:root{
  --bg:#f6f7fb;
  --text:#1f2328;
  --muted:#67728a;
  --card:#ffffff;
  --border:#e5e9f0;
  --accent:#2d7ff9;
  --danger:#d53535;
  --btn:#eef3ff;
  --btn-text:#1d4ed8;
}
.dark{
  --bg:#0f1217;
  --text:#e8eaf0;
  --muted:#b6bdc7;
  --card:#161b22;
  --border:#222a35;
  --accent:#6aa6ff;
  --btn:#1f2940;
  --btn-text:#cfe0ff;
}
html, body { background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; margin:0; }
.contenedor{ max-width: 960px; margin: 0 auto; padding: 24px;}

.dark {background: #0e1420; color: #e8eaf0;}

.hidden{ visibility: hidden !important; }


body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


.crear-sec{
  padding: 0 20px 20px 20px;
  background-color: var(--card);
  border-radius: 10px;
  border: 1px solid var(--border)
}

h3{
  font-size: 26px;
}

.input-div{
  display: flex;
  flex-direction: column;
  gap:10px;
  padding-bottom: 20px;
  color: var(--text);
  font-weight: 500;
}

#titulo, #descr{
  border-radius: 8px;
  border: 1px solid var(--border);
  padding:10px;
  font-size: 16px;
  accent-color:green
}

#descr{
  resize: vertical;
  min-height: 20px;
}

.boton, .boton1, .boton2, .boton3{
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background-color:var(--btn);
  color:var(--btn-text);
  font-weight: 600;
  margin-right: 10px;
}


#tarjetas-display{
  display: flex;
  flex-direction: row;
  gap: 20px;
  
}

.divTar{
  display: flex;
  flex-direction: column;
  width: 300px;
  background-color: var(--card);
  border: 1px solid var(--border);
  padding: 16px;
  border-radius: 6px;
}

.upperTar{
  display: flex;
  flex-direction: column;
}

.upperTar img{
  width: 100%;
  border-radius: 6px;
}

p{
  font-size: 14;
  margin: 0px 0px 20px 2px;
}

h4{
  font-size: 20px;
  margin: 10px 10px 10px 2px;
}

.lowerTar{
  display: flex;
  flex-direction: row;
}

.aviso{
  color: var(--danger);
  font-weight: 700;
}

button:hover{
  cursor: pointer;
}

footer{
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  text-align: center;
}