/* ========= Tema base (dark) — limpio ========= */
:root{
  --bg:#0b1220;          /* fondo de página */
  --card:#0f1a2f;        /* tarjetas/controles */
  --menu:#0a1426;        /* sidebar */
  --line:rgba(255,255,255,.08);
  --text:#e6edf6;        /* texto principal */
  --muted:#9fb0c3;       /* texto tenue */
  --primary:#3b82f6;     /* azul */
  --green:#22c55e;       /* verde */
  --sidebar-w:210px;     /* ancho del menú */
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:'Montserrat',sans-serif;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
}

/* ========= Efecto entrada ========= */
.fade-in{
  opacity:0; transform:translateY(20px);
  transition:opacity 1s ease, transform 1s ease;
}
.fade-in.visible{ opacity:1; transform:none; }

/* ========= Botón hamburguesa ========= */
.boton-menu{
  position:fixed; top:20px; left:10px; z-index:1100;
  background:#1a2742; border:1px solid var(--line); color:#fff;
  padding:10px 12px; font-size:22px; border-radius:10px;
  cursor:pointer; transition:filter .25s, transform .25s;
}
.boton-menu:hover{ filter:brightness(1.07); transform:scale(1.05); }

/* ========= Sidebar ========= */
.menu-lateral{
  position:fixed; top:0; left:0; z-index:1000;
  width:var(--sidebar-w); height:100vh;
  background:var(--menu);
  border-right:1px solid var(--line);
  transform:translateX(calc(-1 * var(--sidebar-w)));
  transition:transform .35s ease, opacity .35s ease;
  box-shadow:3px 0 20px rgba(0,0,0,.35);
  opacity:.98;
}
.menu-lateral:not(.cerrado){ transform:translateX(0); opacity:1; }

/* Navegación */
.navegacion{ padding:86px 14px 14px; }
.navegacion ul{
  list-style:none; margin:0; padding:0; display:grid; gap:6px;
}
.navegacion li{
  opacity:0; transform:translateX(-12px);
  transition:opacity .25s, transform .25s;
}
.menu-lateral:not(.cerrado) .navegacion li{ opacity:1; transform:none; }
.navegacion li a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; font-weight:700;
  color:var(--text); text-decoration:none; border:1px solid transparent;
}
.navegacion li a:hover{
  background:rgba(59,130,246,.12);
  border-color:var(--line);
}
/* Botón rojo para "Cerrar sesión" */
.btn-danger{
  background:#dc2626;      /* rojo */
  border:1px solid #b91c1c;
  color:#fff;
}
.btn-danger:hover{
  background:#b91c1c;
  border-color:#991b1b;
}
.btn-danger:active{
  background:#991b1b;
  transform:translateY(1px);
}

/* Logo en el menú (abajo) */
.logo-menu{
  position:absolute; left:0; right:0; bottom:18px;
  display:flex; justify-content:center; opacity:.95;
}
.logo-menu img{ width:190px; height:auto; }

/* ===== Neon para el logo del menú ===== */
.logo-menu {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  display: flex; justify-content: center; opacity: .95;
  /* halo suave detrás (opcional) */
  isolation: isolate;
}
.logo-menu::before{
  content:"";
  position:absolute; inset:auto 0 -10px 0; height:110px;
  margin:auto; z-index:-1; filter: blur(18px);
  background: radial-gradient(60px 40px at 50% 60%,
              rgba(59,130,246,.28), transparent 60%);
  pointer-events:none;
}
.logo-menu img{ width:190px; height:auto; }

/* Glow principal + pulso */
.logo-menu img.neon{
  /* 3 capas de glow azul */
  filter:
    drop-shadow(0 0 4px  #3b82f6)
    drop-shadow(0 0 10px #3b82f6)
    drop-shadow(0 0 18px #60a5fa);
  animation: neonPulse 2.8s ease-in-out infinite;
}

/* Hover: un poco más intenso */
.logo-menu img.neon:hover{
  filter:
    drop-shadow(0 0 6px  #3b82f6)
    drop-shadow(0 0 14px #3b82f6)
    drop-shadow(0 0 28px #93c5fd);
  transform: translateY(-1px);
}

/* Animación del pulso */
@keyframes neonPulse{
  0%, 100% {
    filter:
      drop-shadow(0 0 4px  #3b82f6)
      drop-shadow(0 0 10px #3b82f6)
      drop-shadow(0 0 18px #60a5fa);
  }
  50% {
    filter:
      drop-shadow(0 0 6px  #3b82f6)
      drop-shadow(0 0 16px #60a5fa)
      drop-shadow(0 0 30px #93c5fd);
  }
}

/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .logo-menu img.neon{ animation: none; }
}


/* ========= Contenido ========= */
.contenido{
  padding:22px;
  margin-left:0;                /* por defecto sin empuje */
  transition:margin-left .35s ease;
}
/* Empuja el contenido SOLO cuando el menú está abierto (desktop) */
.menu-lateral:not(.cerrado) ~ .contenido{ margin-left:var(--sidebar-w); }

/* En pantallas angostas: overlay, no empuja */
@media (max-width:1024px){
  .menu-lateral:not(.cerrado) ~ .contenido{ margin-left:0; }
}

.contenido h1{
  margin:4px 0 14px;
  font-weight:800; letter-spacing:1.2px; font-size:26px;
  color:#fff; text-shadow:none;
}
.contenido h2{ color:#dbe7ff; margin:8px 0 10px; }
.contenido p{
  color:#cfd8e3; font-size:15px; line-height:1.6; letter-spacing:.2px;
  margin:0 0 10px; padding:0; text-align:justify;
}

/* ========= Tarjetas genéricas ========= */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
}

/* ========= Sección Prendas (detalle) ========= */
.prenda-container{ max-width:600px; margin:40px auto; padding:0 20px; }
.titulo-prenda{ text-align:center; color:#e6edf6; margin-bottom:20px; font-weight:800; font-size:28px; }
.card-prenda{
  background:var(--card); padding:25px 30px; border-radius:12px;
  border:1px solid var(--line); box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.card-prenda ul{ list-style:none; padding:0; margin:0; }
.card-prenda li{
  padding:10px 0; border-bottom:1px solid var(--line); font-size:16px; color:#d6e0ee;
}
.card-prenda li:last-child{ border-bottom:none; }
.error-msg{ color:#ffb4b4; text-align:center; font-size:18px; margin-top:28px; }

@media (max-width:600px){
  .prenda-container{ padding:0 10px; margin:20px auto; }
  .card-prenda{ padding:20px; }
  .titulo-prenda{ font-size:22px; }
  .card-prenda li{ font-size:14px; padding:8px 0; }
  .error-msg{ font-size:16px; }
}

/* ========= Totales blancos (reporte) ========= */
.totales-resumen{ margin-top:10px; font-weight:700; color:#ffffff; opacity:.95; }
.totales-resumen p{ margin:4px 0; }

.totales-general,
.totales-general p,
.totales-general *{ color:#fff !important; }
.totales-general{
  margin-top:40px; font-weight:800; font-size:20px;
  border-top:1px solid rgba(255,255,255,.15); padding-top:10px;
}

/* ===== Dashboard logueado ===== */
.dashboard-top{
  margin-bottom: 24px;
}

.dashboard-hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:28px;
  border-radius:20px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.18), transparent 30%),
    linear-gradient(135deg, rgba(15,26,47,.98), rgba(10,20,38,.98));
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}

.dashboard-badge{
  display:inline-block;
  margin-bottom:10px;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.4px;
  color:#cfe2ff;
  background:rgba(59,130,246,.14);
  border:1px solid rgba(59,130,246,.24);
}

.dashboard-sub{
  max-width:700px;
  color:var(--muted);
  margin:0;
}

.dashboard-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:18px;
  margin-bottom:24px;
}

.dash-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  text-decoration:none;
  color:var(--text);
  background:linear-gradient(180deg, rgba(15,26,47,.98), rgba(11,18,32,.98));
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.dash-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(0,0,0,.28);
  border-color:rgba(59,130,246,.35);
}

.dash-card h3{
  margin:0;
  font-size:20px;
  color:#fff;
}

.dash-card p{
  margin:0;
  color:var(--muted);
  text-align:left;
}

.dash-card span{
  margin-top:auto;
  font-weight:700;
  color:#8ec5ff;
}

.dash-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-size:22px;
  color:#fff;
  background:linear-gradient(135deg, #2563eb, #3b82f6);
  box-shadow:0 8px 18px rgba(59,130,246,.22);
}

.dash-card-featured{
  border-color:rgba(34,197,94,.28);
}

.dash-card-featured .dash-icon{
  background:linear-gradient(135deg, #16a34a, #22c55e);
  box-shadow:0 8px 18px rgba(34,197,94,.20);
}

.dash-card-admin{
  border-color:rgba(239,68,68,.28);
}

.dash-card-admin .dash-icon{
  background:linear-gradient(135deg, #dc2626, #ef4444);
  box-shadow:0 8px 18px rgba(239,68,68,.18);
}

@media (max-width: 768px){
  .dashboard-hero{
    flex-direction:column;
    align-items:flex-start;
    padding:22px;
  }

  .dashboard-actions{
    width:100%;
  }

  .dashboard-actions a{
    width:100%;
    justify-content:center;
  }
}