* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:#0f0f12; color:#eaeaea; }
a { color: inherit; text-decoration: none; }
input, button, select, textarea { width:100%; padding:.65rem .8rem; border-radius:.75rem; border:1px solid #333; background:#16161a; color:#eaeaea; }
button { cursor:pointer; border:none; background:#6c5ce7; font-weight:600; transition:.2s transform; }
button:hover { transform: translateY(-1px); }
label { display:block; margin: .5rem 0; font-size:.95rem; }

.topbar { position:sticky; top:0; display:flex; align-items:center; gap:1rem; padding: .75rem 1rem; background:#121218; border-bottom:1px solid #222; z-index:10;}
.brand { font-weight:800; letter-spacing:.5px; }
.brand span { color:#ffd166; }
.spacer { flex:1; }
.user { opacity:.9; }

.menu-toggle { display:none; }

.sidebar { position:fixed; top:56px; left:0; width:230px; height:calc(100vh - 56px); background:#121218; border-right:1px solid #222; padding:.75rem; display:flex; flex-direction:column; gap:.25rem; }
.sidebar a { padding:.6rem .8rem; border-radius:.75rem; transition:.15s background; }
.sidebar a:hover { background:#1b1b23; }
.sidebar a.danger { background:#2b1a1a; }
.content { margin-left:230px; padding:1rem; }

/* === Tarjetas de estadísticas === */
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:1rem; }
.card { 
  background: rgba(220, 220, 228, 0.55); /* transparente */
  border: 1px solid rgba(35, 35, 50, 0.4);
  backdrop-filter: blur(6px);
  padding:1rem; border-radius:1rem; text-align:center;
}

/* === Bienvenida === */
.welcome { 
  margin-top:1rem; 
  background: rgba(237, 237, 245, 0.55); /* transparente */
  border: 1px solid rgba(35, 35, 50, 0.4);
  backdrop-filter: blur(6px);
  padding:1rem; border-radius:1rem; 
}

.table { width:100%; border-collapse: collapse; background:#151521; border:1px solid #232332; border-radius:1rem; overflow:hidden; }
.table th, .table td { padding:.7rem; border-bottom:1px solid #232332; font-size:.95rem; }
.table th { text-align:left; background:#19192a; }

.actions { display:flex; gap:.4rem; }
.actions a, .actions button { padding:.45rem .6rem; border-radius:.6rem; font-size:.9rem; }

.form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.8rem; background:#151521; border:1px solid #232332; padding:1rem; border-radius:1rem; margin-bottom:1rem; }
.form { display:grid; gap:.6rem; }
.auth-card { max-width:420px; margin: 6vh auto; background:#151521; border:1px solid #232332; padding:1.2rem; border-radius:1rem; }
.alert { background:#2b2131; border:1px solid #4a2a52; padding:.7rem .9rem; border-radius:.75rem; margin:.5rem 0 1rem; }
.footer { text-align:center; padding:1rem; color:#aaa; }

@media (max-width: 900px) {
  .menu-toggle { display:inline-flex; }
  .sidebar { transform: translateX(-100%); transition:.2s transform; }
  .sidebar.open { transform: translateX(0); }
  .content { margin-left:0; padding:1rem; }
  .form-grid { grid-template-columns: 1fr; }
}

/* === Equipo === */
.equipo { 
  margin-top: 2rem; 
  padding: 1rem; 
  background: rgba(245, 245, 250, 0.5); /* transparente */
  border: 1px solid rgba(35, 35, 50, 0.35);
  backdrop-filter: blur(6px);
  border-radius: 1rem; 
}
.equipo h2 { margin: 0 0 1rem 0; font-size: 1.5rem; }
.equipo-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.equipo-card { 
  background: rgba(228, 228, 233, 0.5); /* transparente */
  border: 1px solid rgba(35, 35, 50, 0.35);
  backdrop-filter: blur(6px);
  border-radius: 1rem; padding: 1rem; 
}
.equipo-foto { aspect-ratio: 1/1; width: 100%; overflow: hidden; border-radius: .75rem; background: #0f0f12; border: 1px dashed #2a2a3a; display:flex; align-items:center; justify-content:center; }
.equipo-foto img { width: 100%; height: 100%; object-fit: cover; display:block; }
.equipo h3 { margin: .8rem 0 .2rem 0; }
.equipo-rol { opacity: .8; margin: 0 0 .5rem 0; }
.equipo-cualidades { margin: 0; padding-left: 1rem; display: grid; gap: .25rem; }

@media (max-width: 1100px) { .equipo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .equipo-grid { grid-template-columns: 1fr; } }

body {
  background: #000; /* Fondo negro completo */
  color: #fff;
}

.productos {
  padding: 1.5rem;
  min-height: 100vh; /* Para que cubra toda la pantalla */
}

.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.producto {
  background: #111;
  padding: 1rem;
  border-radius: 1rem;
  text-align: center;
}

.producto-img {
  width: 3cm;   /* ancho exacto */
  height: 3cm;  /* alto exacto */
  object-fit: cover;
  margin-bottom: .5rem;
}

.descripcion {
  font-size: .95rem;
  margin: .3rem 0;
}

.precio {
  font-weight: bold;
  color: #ffd166;
}