/* =============================================================================
   enterprise-theme.css  —  Capa visual del rediseño (SaaS enterprise).
   Cargada DESPUÉS de admin.css desde lib/layout.php. Capa NO destructiva:
   redefine los tokens que admin.css ya consume, sin renombrar clases/IDs.
   Rollback = quitar la línea del <link> en lib/layout.php.

   ETAPA 1 — Tokens. (Tipografía, superficies, sidebar, tablas, etc. se
   agregan en etapas posteriores; ver docs/mejoras/PLAN-FASE-D.md.)
   Colores con contraste WCAG AA verificado (docs/QA-PROTOTIPO.md).
   ============================================================================= */

/* ---- Tema claro (por defecto y data-theme="light") ----
   DECISIÓN: sidebar OSCURO ESTABLE en ambos temas (como el prototipo v3.2).
   El sidebar queda #101F2E siempre; el resto del panel es claro en modo claro.
   Estos overrides ganan sobre el bloque :root[data-theme="light"] de admin.css
   porque esta hoja se carga DESPUÉS. ---- */
:root,
:root[data-theme="light"]{
  /* fondo y superficies */
  --bg1:#F5F7FB; --bg2:#EEF2F7; --bg3:#E8EDF3;
  --glass:#FFFFFF; --glass2:#F8FAFD;
  --inset:#FFFFFF; --sidebar:#101F2E;
  --line:#DFE6EE;
  /* texto */
  --text:#131F2B; --muted:#677585;
  /* marca y semánticos (AA) */
  --accent:#2A7E4F; --accent2:#3F9A5D; --accent-ink:#FFFFFF;
  --accent-glow:rgba(42,126,79,.20);
  --secondary:#3F6FA8;
  --ok:#0A6B4A; --warn:#8A5E12; --bad:#B83A34;

  /* tokens enterprise nuevos (disponibles para etapas siguientes) */
  --ui-surface:#FFFFFF; --ui-surface-subtle:#F8FAFD;
  --ui-border-strong:#C7D3E0;
  --ui-info:#3F6FA8; --ui-info-soft:#ECF2F9;
  --ui-violet:#6E52AD; --ui-violet-soft:#F1EDF9;
  --ui-neutral:#5A6875; --ui-neutral-soft:#EEF1F5;
  --ui-success-soft:#E7F6F0; --ui-warning-soft:#FBF3E2; --ui-danger-soft:#FBEDEC;
  --ui-radius-sm:8px; --ui-radius-md:10px; --ui-radius-lg:14px;
  --ui-shadow:0 1px 2px rgba(15,31,56,.04),0 4px 12px rgba(15,31,56,.04);
  --ui-focus:#2A7E4F;
}

/* ---- Tema oscuro ---- */
:root[data-theme="dark"]{
  --bg1:#10161D; --bg2:#141C25; --bg3:#18212B;
  --glass:#18212B; --glass2:#141C25; --inset:#0F161D; --sidebar:#0C1319;
  --line:#26313D;
  --text:#E7EDF3; --muted:#96A6B6;
  --accent:#3FA86C; --accent2:#4DBD7C; --accent-ink:#07130C; --accent-glow:rgba(63,168,108,.25);
  --secondary:#6FA3DD;
  --ok:#4CC38A; --warn:#E0B054; --bad:#E5716A;

  --ui-surface:#18212B; --ui-surface-subtle:#141C25; --ui-border-strong:#33414F;
  --ui-info:#6FA3DD; --ui-info-soft:#182636;
  --ui-violet:#A78FDD; --ui-violet-soft:#241E33;
  --ui-neutral:#93A3B4; --ui-neutral-soft:#1E2833;
  --ui-success-soft:#15291F; --ui-warning-soft:#2C2415; --ui-danger-soft:#2E1B1A;
  --ui-shadow:0 1px 2px rgba(0,0,0,.25),0 4px 12px rgba(0,0,0,.2);
  --ui-focus:#4CC38A;
}

/* =============================================================================
   ETAPA 2 — Tipografía. Se mantienen las familias del panel (Plus Jakarta Sans
   + Manrope). Se ajusta a un peso display más sobrio (700 en vez de 800) y una
   jerarquía enterprise más contenida. Sin cambiar familias ni cargar webfonts nuevos.
   ============================================================================= */
h1,h2,h3,.disp{ font-weight:700; letter-spacing:-.015em; }
h1{ font-size:1.35rem; line-height:1.25; }
h2{ font-size:1rem; }
.crumb{ font-size:.75rem; }
th{ font-weight:600; letter-spacing:.05em; }
label{ font-weight:600; letter-spacing:0; }
.badge,.btn{ font-weight:600; }
body{ font-size:14px; line-height:1.5; }

/* =============================================================================
   ETAPA 3 — Fondo y superficies. Glass translúcido con blur → superficie sólida
   enterprise con borde fino y sombra sutil. Fondo plano gris azulado (sin los
   gradientes fijos). Reduce blur/glow (skill §8.2). No renombra ninguna clase.
   ============================================================================= */
body{ background:var(--bg1); } /* fondo plano, sin radial/linear-gradient fijos */
/* Modo claro: anular el fondo con gradientes de admin.css → fondo plano enterprise */
:root[data-theme="light"] body{ background:var(--bg1); }
/* Sidebar SIEMPRE oscuro (estable) — su texto e íconos legibles en ambos temas */
.side, :root[data-theme="light"] .side{ background:#101F2E; color:#B9C7D4; }
.side .nav-i, :root[data-theme="light"] .side .nav-i{ color:#B9C7D4; }
.side .nav-group, :root[data-theme="light"] .side .nav-group{ color:#8EA0B2; }
.side .logo, .side .logo small, .side .who, .side .who b, .side .who .muted,
:root[data-theme="light"] .side .logo small, :root[data-theme="light"] .side .who,
:root[data-theme="light"] .side .who .muted{ color:#B9C7D4; }
.side .logo>div, :root[data-theme="light"] .side .logo>div{ color:#fff; }
.side .who b, :root[data-theme="light"] .side .who b{ color:#fff; }
/* ---- App bar (móvil): fondo oscuro FIJO en ambos temas → todo su contenido en blanco.
   admin.css pone `.ab-btn{color:var(--text)}` (oscuro en modo claro) que quedaba ilegible
   sobre el app bar oscuro. Acá forzamos blanco a botones, íconos, título e isotipo, con más
   especificidad que admin.css, en los DOS temas. ---- */
.appbar, :root[data-theme="light"] .appbar{ background:#101F2E; color:#fff; }
.appbar .ab-btn, :root[data-theme="light"] .appbar .ab-btn{ color:#fff; }
.appbar .ab-btn:active, :root[data-theme="light"] .appbar .ab-btn:active{ background:rgba(255,255,255,.12); }
.appbar .ab-btn svg, :root[data-theme="light"] .appbar .ab-btn svg{ color:#fff; stroke:#fff; }
.appbar .ab-title, .ab-title span,
:root[data-theme="light"] .appbar .ab-title, :root[data-theme="light"] .ab-title span{ color:#fff; }

/* ---- Estado del menú (normal / hover / activo / activo+hover) legible en AMBOS temas ----
   Igual al prototipo: activo = fondo acento + texto blanco + borde de marca.
   Ganan sobre el .nav-i.on de admin.css (que usaba var(--text), oscuro en modo claro). ---- */
.side .nav-i, :root[data-theme="light"] .side .nav-i{ background:transparent; }
.side .nav-i:hover, :root[data-theme="light"] .side .nav-i:hover{
  background:rgba(255,255,255,.07); color:#EAF1EC;
}
.side .nav-i.on, :root[data-theme="light"] .side .nav-i.on{
  background:var(--accent); color:#fff; font-weight:700;
  box-shadow:inset 3px 0 0 rgba(255,255,255,.65);
}
.side .nav-i.on:hover, :root[data-theme="light"] .side .nav-i.on:hover{
  background:var(--accent2); color:#fff;
}
.side .nav-i.on svg, :root[data-theme="light"] .side .nav-i.on svg{ opacity:1; color:#fff; }
/* Grupos colapsables: rótulo y chevron legibles sobre el sidebar oscuro */
.nav-group-btn, :root[data-theme="light"] .nav-group-btn{ color:#8EA0B2; }
.nav-group-btn:hover, :root[data-theme="light"] .nav-group-btn:hover{ color:#B9C7D4; opacity:1; }
.nav-group-caret{ color:#8EA0B2; }
/* Badge "ADMIN" de los ítems restringidos: legible sobre el sidebar */
.side .nav-i .adm, .side .adm{ color:#8EA0B2; border-color:#3A4B5E; }
.side .nav-i.on .adm{ color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.4); }
/* Botones del pie del sidebar (tema, perfil, salir): legibles en ambos temas */
.side .sidebtn, :root[data-theme="light"] .side .sidebtn{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#C6D2DD;
}
.side .sidebtn:hover, :root[data-theme="light"] .side .sidebtn:hover{
  background:rgba(255,255,255,.12); color:#fff;
}
.glass{
  background:var(--ui-surface);
  border:1px solid var(--line);
  border-radius:var(--ui-radius-lg);
  box-shadow:var(--ui-shadow);
  backdrop-filter:none;
}
:root[data-theme="light"] .glass{ background:#FFFFFF; }
:root[data-theme="dark"] .glass{ background:var(--ui-surface); }
.section{ border-radius:var(--ui-radius-lg); }
code,.inset{ background:var(--ui-surface-subtle); }

/* =============================================================================
   ETAPA 4 — Sidebar + logo + grupos colapsables + subtítulo GESTIÓN.
   No renombra #side, .nav-i, .nav-i.on, .nav-group ni rompe el drawer.
   ============================================================================= */
.side{ background:var(--sidebar); backdrop-filter:none; }

/* Panel de notificaciones (campana): fondo oscuro SIEMPRE (usa --sidebar) → los textos deben ser claros
   en ambos temas. En tema claro, --text/--muted son oscuros y quedaban ilegibles sobre el panel oscuro. */
.notif-panel{ background:#101F2E; border-color:#24384B; }
.notif-panel .np-head b{ color:#EAF1F7; }
.notif-panel .np-head a{ color:#5EA9E6; }
.notif-panel .np-row{ color:#D6E1EC; border-color:#1E2E3E; }
.notif-panel .np-row:hover{ background:rgba(255,255,255,.06); }
.notif-panel .np-bd b{ color:#EAF1F7; }
.notif-panel .np-bd span, .notif-panel .np-bd small{ color:#9DB0C2; }
.notif-panel .np-empty{ color:#9DB0C2; }
.notif-panel .np-foot{ border-color:#1E2E3E; }
.notif-panel .np-foot button{ background:rgba(255,255,255,.06); color:#D6E1EC; border-color:#2A3E52; }
.notif-panel .np-foot button:hover{ background:rgba(255,255,255,.1); }
/* Logo con isotipo oficial: alineación óptica igual al prototipo. El logo es
   un enlace al dashboard (index.php); la campana queda a la derecha. */
.logo-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.logo{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; }
.logo:hover{ text-decoration:none; opacity:.9; }
.logo .iso{ flex:none; }
.logo>div{ display:flex; flex-direction:column; line-height:1; }
.logo>div small{ margin-top:3px; letter-spacing:.15em; }
.ab-title{ display:flex; align-items:center; gap:9px; }
.ab-title .iso{ flex:none; }
.nav-i{ border-radius:8px; }
.nav-i.on{ box-shadow:inset 2px 0 0 var(--accent); }

/* ---- Grupos plegables del sidebar — pulido 8c (transición suave, chevron alineado, jerarquía) ---- */
/* Espaciado SOLO en el wrap, para que colapsado y expandido sean consistentes (sin huecos muertos). */
.nav-group-wrap{ margin:0; }
.nav-group-wrap + .nav-group-wrap{ margin-top:4px; }
/* El botón lleva ambas clases (.nav-group .nav-group-btn) → el margin:18px de admin.css caía sobre el botón,
   dejando ~24px muertos entre grupos colapsados. Lo neutralizamos con mayor especificidad. */
.side .nav-group-btn{
  display:flex; align-items:center; gap:8px; width:100%; background:none; border:0;
  color:inherit; font:inherit; cursor:pointer;
  margin:0; padding:9px 8px; border-radius:8px;
  font-size:10.5px; font-weight:800; letter-spacing:.13em; opacity:.72;
  transition:background .15s, color .15s;
}
.side .nav-group-btn:first-of-type{ margin-top:2px; }
.nav-group-btn:hover{ background:rgba(255,255,255,.04); opacity:1; }
.nav-group-btn:hover .nav-group-caret{ opacity:1; }

/* Chevron: expandido ⌄ (abajo), colapsado › (derecha). 5c: giro correcto a -135deg (antes -45 apuntaba arriba). */
.nav-group-caret{
  margin-left:auto; width:7px; height:7px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg);
  transform-origin:center; transition:transform .24s cubic-bezier(.4,0,.2,1); opacity:.6; flex:none; margin-right:2px;
}
.nav-group-wrap.colapsado .nav-group-caret{ transform:rotate(-135deg); }

/* Transición suave de altura (5c): grid-rows 1fr↔0fr + overflow:hidden en el hijo para que el margin del
   último ítem no asome durante la animación (era el recorte/parpadeo reportado). */
.nav-group-items{
  display:grid; grid-template-rows:1fr; overflow:hidden;
  transition:grid-template-rows .24s cubic-bezier(.4,0,.2,1), opacity .16s ease; opacity:1;
}
.nav-group-items > *{ min-height:0; overflow:hidden; }
.nav-group-items .nav-i:last-child{ margin-bottom:0; }   /* 5c #6: ritmo vertical parejo entre grupos */
.nav-group-wrap.colapsado .nav-group-items{ grid-template-rows:0fr; opacity:0; }
/* 5c #11: foco por teclado visible en los ítems del sidebar */
.side .nav-i:focus-visible{ outline:2px solid var(--accent,#3f9a48); outline-offset:2px; border-radius:8px; }
@media (prefers-reduced-motion: reduce){
  .nav-group-caret, .nav-group-items{ transition:none; }
}

/* =============================================================================
   ETAPA 5 — Encabezados de página
   ============================================================================= */
.main h1{ font-weight:700; letter-spacing:-.015em; }
.crumb{ color:var(--muted); }

/* =============================================================================
   ETAPA 6 — Botones e inputs. Botón primario plano (sin glow/gradiente fuerte),
   foco visible AA (quick-win Q3). Inputs con borde definido.
   ============================================================================= */
.btn{ border-radius:var(--ui-radius-md); }
.btn-primary{ background:var(--accent); box-shadow:none; }
.btn-primary:hover{ background:var(--accent2); }
.btn-ghost{ background:var(--ui-surface); border:1px solid var(--ui-border-strong); }
input,select,textarea{ border:1px solid var(--ui-border-strong); border-radius:var(--ui-radius-md); }
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ui-focus); outline-offset:2px; border-radius:4px;
}

/* =============================================================================
   ETAPA 7 — Tarjetas / paneles (.section, .card)
   ============================================================================= */
.card{ border-radius:var(--ui-radius-lg); box-shadow:var(--ui-shadow); }
/* KPI clickeable con panel de detalle (paridad con el prototipo) */
.kpi-btn{ width:100%; text-align:left; font-family:inherit; cursor:pointer; color:inherit;
  border:1px solid var(--line); transition:border-color .15s, transform .1s; }
.kpi-btn:hover{ border-color:var(--ui-border-strong); transform:translateY(-1px); }
.kpi-btn.sel{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.kpi-hint{ font-size:11px; margin-top:6px; }
.kpi-btn:hover .kpi-hint{ color:var(--accent); }
.kd-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.kpi-detail table td, .kpi-detail table th{ padding:8px 10px; }
.kpi-detail tbody tr{ cursor:pointer; }

/* =============================================================================
   ETAPA 8 — Tablas enterprise. NO cambia la estructura <tr> (JS usa closest('tr')).
   ============================================================================= */
th{ background:var(--ui-surface-subtle); font-weight:600; }
tbody tr:hover{ background:var(--ui-surface-subtle); }
.pager a{ border-radius:var(--ui-radius-sm); border:1px solid var(--ui-border-strong); }
.pager a.on{ background:var(--accent); border-color:var(--accent); }

/* =============================================================================
   ETAPA 9 — Estados / badges. Los badges reciben color inline desde la BD
   (fallback preservado); acá solo se uniforma la forma. Los 9 estados siguen
   diferenciándose por su color de BD.
   ============================================================================= */
.badge{ border-radius:99px; font-weight:600; }
.okmsg{ background:var(--ui-success-soft); color:var(--ok); border:1px solid var(--ok); border-radius:var(--ui-radius-md); }
.alert{ background:var(--ui-danger-soft); color:var(--bad); border:1px solid var(--bad); border-radius:var(--ui-radius-md); }

/* =============================================================================
   ETAPA 10 — Login. Card sobria + fondo con toque de marca (halos suaves azul
   + verde del isotipo). 100% presentacional: el form postea email+pass+csrf igual.
   ============================================================================= */
.login-wrap{ position:relative; }
.login-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(55% 50% at 18% 12%, rgba(66,133,244,.12), transparent 60%),
    radial-gradient(50% 50% at 85% 90%, rgba(52,168,83,.12), transparent 60%),
    var(--bg1);
}
.login-card{ position:relative; z-index:1; box-shadow:0 10px 30px rgba(15,31,56,.10),0 2px 6px rgba(15,31,56,.05); }

/* =============================================================================
   ETAPA 11 — Responsive. El panel ya tiene breakpoints 900/860/760/560 en
   admin.css (drawer, inputs 16px, targets 44px). Acá solo reforzamos que las
   superficies sólidas y el sidebar enterprise no rompan en móvil.
   ============================================================================= */
@media (max-width:900px){
  .side{ box-shadow:0 0 40px rgba(0,0,0,.35); } /* drawer con sombra al abrir */
  .nav-group-btn{ min-height:44px; } /* target táctil ≥44px (WCAG 2.5.8) */
}
@media (max-width:760px){
  /* el fondo de marca del login no debe crear scroll lateral */
  .login-bg{ background-attachment:scroll; }

  /* ---- FIX responsive del bug de botones que "desaparecían" ----
     admin.css aplica `.glass{overflow-x:auto}` a TODO .glass en <=760px
     (pensado para tablas). Eso hace que las secciones con botones/acciones
     scrolleen de lado y sus controles queden fuera del viewport sin scroll
     visible. Acá lo neutralizamos: el .glass NO scrollea; el scroll horizontal
     lo lleva SOLO la tabla, envuelta en su propio contenedor. */
  .glass{ overflow-x:visible; }
  .glass.section{ overflow-x:visible; }
  /* La tabla scrollea sola: display:block + overflow para que su ancho no
     empuje a la sección ni oculte los botones. width:100% para que no quede
     angosta cuando el contenido sí entra. */
  .glass table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; max-width:100%; }
  /* Headers de página: título + acciones se apilan, nunca se pisan. */
  .row-between{ flex-wrap:wrap; }
  .row-between>*{ min-width:0; }

  /* Targets táctiles ≥44px (WCAG 2.5.8), igual al prototipo v3.2 */
  .btn-sm{ min-height:44px; }
  .pager a{ min-height:44px; display:inline-flex; align-items:center; }
}
@media (max-width:900px){
  .appbar .ab-btn{ width:44px; height:44px; }
}

/* =============================================================================
   ETAPA 12 — Accesibilidad. Foco visible reforzado (ya en etapa 6) + asegurar
   que los grupos colapsables sean operables y visibles al foco por teclado.
   ============================================================================= */
.nav-group-btn:focus-visible{ outline:2px solid var(--ui-focus); outline-offset:2px; border-radius:4px; }
/* Estado no dependiente solo del color: el caret indica plegado/desplegado además del color. */

/* =============================================================================
   ETAPA 13 — Microinteracciones ligeras (respetan prefers-reduced-motion).
   ============================================================================= */
.btn{ transition:background .15s, border-color .15s, transform .1s; }
@media (hover:hover){ .btn-ghost:hover{ border-color:var(--accent); } }
.nav-i{ transition:background .12s; }
tbody tr{ transition:background .1s; }
@media (prefers-reduced-motion: reduce){
  .btn,.nav-i,tbody tr,.nav-group-caret{ transition:none; }
}

/* N3c — affordance: cualquier fila con onclick es clickeable */
tr[onclick]{ cursor:pointer; }