: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;
    }
    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;}
    .light {background: #e8eaf0; color: #0e1420;}

  .hidden{ display:none !important; }

body{
  display: block;
  justify-items: center;
  background-color: var(--bg);
}
.cuerpo{
  width: 920px; 
  margin: 0 auto; 
  padding: 24px; 
}
#contenedorInput{
  background-color: var(--card);
  border-radius: 10px;
  margin: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

button{
  background-color: var(--btn);
  color: var(--btn-text);
  border: var(--border);
  padding: 5px;
  margin: 5px;
  border-radius: 10px;
}

label{
  margin-top: 10px;
  margin: 20px;
  font-weight: bold;
}
input[type="text"],textarea{
  display:block;
  width: 95%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin: 2%;
}

#tarjC{
  display: grid;
  grid-template-columns: repeat(4,auto);
}

#tarjC div{
  background-color: var(--card);
  border-radius: 10px;
  margin: 10px;
}

#tarjC div h3, #tarjC div p{
  margin: 10px;
}

#tarjC div img{
  width: 95%;
  margin-left: 10px;
  margin-top: 10px;
  margin-right: 10px;
  border-radius: 10px;
}