: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;}

  .hidden{ display:none !important; }

.contenedor{ 
max-width: 960px; 
margin: 0 auto; 
padding: 24px; 
}

#crearTarjetas{
background-color: var(--card);
border-radius: 20px;
margin-top: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}


label{
  display: block;
  margin-bottom: 10px;
  font-weight:500;
}

input{
  display:block;
  width: 920px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin: 10px;
}

#botones {
  margin: 20px auto 10px;
  display: flex;
  gap: 10px;
  padding: 10px;
}

#botones .btns {
  background-color:var(--btn);
  color: var(--btn-text);
  border: none;
  padding: 10px 25px; 
  font-size: 1.3rem; 
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.1s;
}

h2{
  max-width: 960px; 
  margin: 0 auto; 
  padding: 24px; 
}

.creadasEstilos{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 25px;
  background-color: var(--card);
  border-radius: 20px;
  margin-top: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}