/* ============================================================
   INEQ OP — sistema visual unificado (always-on dark navy).
   Paleta y tokens del ineq_op_visual_system_pack.
   Los nombres --c-* se conservan por compatibilidad con el resto del CSS;
   se remapean a la paleta INEQ. Los --ineq-* exponen los tokens nativos.
   ============================================================ */

/* Metrisch — fuente institucional INEQ (Formika Studio).
   Solo 3 pesos cargados (Book/Medium/Bold) en woff2 para reducir bundle.
   font-display: swap evita FOIT — si la fuente tarda, cae al fallback. */
@font-face {
  font-family: "Metrisch";
  src: url("../assets/fonts/metrisch/Metrisch-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metrisch";
  src: url("../assets/fonts/metrisch/Metrisch-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metrisch";
  src: url("../assets/fonts/metrisch/Metrisch-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Tokens nativos INEQ — Signature V1 (2026-05-23) ----------
     Paleta alineada al manual de marca oficial INEQ Médica:
       Primary cyan:    #12A9E3
       Soft cyan:       #51C4F0
       Deep blue:       #054B86
       Brand blue:      #0787F0
       Electric blue:   #262FE0
       Lime / soft:     #92D14F
       Primary green:   #00AF50
     Cambio quirúrgico: solo valores hex; los nombres de tokens existentes
     se conservan para no romper 50+ referencias en el resto del CSS. */
  --ineq-bg-main: #050B15;
  --ineq-bg-app: #071321;
  --ineq-bg-sidebar: #082033;
  --ineq-bg-panel: #0B1B2F;
  --ineq-bg-card: #10233A;
  --ineq-bg-elevated: #132A45;

  --ineq-cyan: #12A9E3;
  --ineq-cyan-soft: #51C4F0;
  --ineq-blue: #0787F0;
  --ineq-blue-deep: #054B86;
  --ineq-blue-electric: #262FE0;
  --ineq-teal: #16C7B7;
  --ineq-green: #00AF50;
  --ineq-green-soft: #92D14F;
  --ineq-amber: #F59E0B;
  --ineq-red: #EF4444;

  /* Canales RGB (para usar con rgba via var()) — Signature V1 */
  --ineq-cyan-rgb: 18, 169, 227;
  --ineq-blue-rgb: 7, 135, 240;
  --ineq-green-rgb: 0, 175, 80;

  --ineq-text-primary: #F4F8FF;
  --ineq-text-secondary: #C5D6EA;
  --ineq-text-muted: #91A4BD;
  --ineq-text-disabled: #5F7187;

  --ineq-border-soft: rgba(18,169,227, 0.14);
  --ineq-border-medium: rgba(18,169,227, 0.24);
  --ineq-border-strong: rgba(18,169,227, 0.42);

  --ineq-gradient-primary: linear-gradient(90deg, #12A9E3 0%, #0787F0 100%);
  --ineq-gradient-primary-hover: linear-gradient(90deg, #1FB7EE 0%, #2095F5 100%);
  --ineq-gradient-card: linear-gradient(135deg, rgba(18,169,227,0.08), rgba(7,135,240,0.06));
  --ineq-gradient-sidebar: linear-gradient(180deg, #082033 0%, #054B86 130%);

  --ineq-shadow-card: 0 18px 48px rgba(0, 0, 0, 0.28);
  --ineq-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.18);
  --ineq-glow-cyan: 0 0 28px rgba(18, 169, 227, 0.22);
  --ineq-glow-blue: 0 18px 45px rgba(7, 135, 240, 0.22);

  --ineq-radius-sm: 10px;
  --ineq-radius-md: 14px;
  --ineq-radius-lg: 18px;
  --ineq-radius-xl: 24px;

  --ineq-motion-fast: 120ms;
  --ineq-motion-base: 180ms;
  --ineq-motion-slow: 260ms;
  --ineq-ease-standard: cubic-bezier(.2, .8, .2, 1);

  /* ---------- UI-REDESIGN-F1 (2026-05-27) — tokens de escala aditivos ----------
     Aditivos, no reemplazan nada. Espaciado consistente, capas z-index
     coherentes y una transición UI estándar reutilizable. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --z-base: 1;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-modal: 1000;
  --z-toast: 1100;

  --transition-ui: var(--ineq-motion-base) var(--ineq-ease-standard);

  /* Layout (common) */
  --sidebar-w: 240px;
  --topbar-h: 56px;
  --radius: var(--ineq-radius-sm);
  --radius-sm: 6px;

  /* Tipografía (common) */
  --font-sans: "Metrisch", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ---------- Tema oscuro (default) ---------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --c-bg: var(--ineq-bg-app);
  --c-surface: var(--ineq-bg-card);
  --c-surface-2: var(--ineq-bg-panel);
  --c-border: var(--ineq-border-soft);
  --c-text: var(--ineq-text-primary);
  --c-text-soft: var(--ineq-text-secondary);
  --c-text-muted: var(--ineq-text-muted);

  --c-brand: var(--ineq-bg-sidebar);
  --c-brand-strong: #061729;
  --c-brand-soft: var(--ineq-blue);
  --c-accent: var(--ineq-cyan);
  --c-link: var(--ineq-cyan);

  --c-info: var(--ineq-blue);
  --c-success: var(--ineq-green);
  --c-warning: var(--ineq-amber);
  --c-danger: var(--ineq-red);
  --c-critical: #B91C1C;
  --c-purple: #8B5CF6;

  --c-st-nuevo: var(--ineq-text-muted);
  --c-st-asignado: var(--ineq-blue);
  --c-st-en-proceso: var(--ineq-amber);
  --c-st-pendiente: #C87B13;
  --c-st-resuelto: var(--ineq-green);
  --c-st-cerrado: #0E7A4A;
  --c-st-vencido: var(--ineq-red);
  --c-st-reabierto: var(--c-purple);

  --shadow-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 4px rgba(0,0,0,.20);
  --shadow-2: var(--ineq-shadow-card);

  /* Theme-aware surfaces para componentes ya migrados a tokens INEQ */
  --t-app-bg: var(--ineq-bg-app);
  --t-card-bg: var(--ineq-bg-card);
  --t-panel-bg: var(--ineq-bg-panel);
  --t-elevated-bg: var(--ineq-bg-elevated);
  --t-input-bg: var(--ineq-bg-app);
  --t-input-focus-bg: var(--ineq-bg-elevated);
  --t-table-row-hover: rgba(18,169,227,.04);
  --t-border: var(--ineq-border-soft);
  --t-border-medium: var(--ineq-border-medium);
  --t-text: var(--ineq-text-primary);
  --t-text-soft: var(--ineq-text-secondary);
  --t-text-muted: var(--ineq-text-muted);
  --t-text-disabled: var(--ineq-text-disabled);
  --t-sidebar-bg: var(--ineq-gradient-sidebar);
  --t-sidebar-text: var(--ineq-text-secondary);
  --t-sidebar-text-active: var(--ineq-text-primary);
  --t-sidebar-active-bg: linear-gradient(90deg, rgba(18,169,227,.16) 0%, rgba(7,135,240,.08) 100%);
  --t-sidebar-hover-bg: rgba(18,169,227,.06);
  --t-scrollbar-track: var(--ineq-bg-app);
  --t-scrollbar-thumb: rgba(18,169,227,.18);
  --t-scrollbar-thumb-hover: rgba(18,169,227,.32);
}

/* ---------- Tema claro ---------- */
[data-theme="light"] {
  color-scheme: light;

  --c-bg: #F3F7FB;
  --c-surface: #FFFFFF;
  --c-surface-2: #EAF2FA;
  --c-border: #D7E3F0;
  --c-text: #0B1B2F;
  --c-text-soft: #334155;
  --c-text-muted: #64748B;

  --c-brand: #0B1B2F;
  --c-brand-strong: #061729;
  --c-brand-soft: #0787F0;
  --c-accent: #007EA7;
  --c-link: #0787F0;

  --c-info: #0787F0;
  --c-success: #15803D;
  --c-warning: #B45309;
  --c-danger: #B91C1C;
  --c-critical: #991B1B;
  --c-purple: #6D28D9;

  --c-st-nuevo: #64748B;
  --c-st-asignado: #0787F0;
  --c-st-en-proceso: #B45309;
  --c-st-pendiente: #92400E;
  --c-st-resuelto: #15803D;
  --c-st-cerrado: #166534;
  --c-st-vencido: #B91C1C;
  --c-st-reabierto: #6D28D9;

  --shadow-1: 0 1px 2px rgba(11,27,47,.06), 0 1px 4px rgba(11,27,47,.04);
  --shadow-2: 0 12px 32px rgba(11,27,47,.10);

  /* Tokens semánticos para tema claro */
  --t-app-bg: #F3F7FB;
  --t-card-bg: #FFFFFF;
  --t-panel-bg: #FFFFFF;
  --t-elevated-bg: #FFFFFF;
  --t-input-bg: #FFFFFF;
  --t-input-focus-bg: #FFFFFF;
  --t-table-row-hover: rgba(7,135,240,.04);
  --t-border: #D7E3F0;
  --t-border-medium: #B6CCE2;
  --t-text: #0B1B2F;
  --t-text-soft: #334155;
  --t-text-muted: #64748B;
  --t-text-disabled: #94A3B8;
  --t-sidebar-bg: linear-gradient(180deg, #EAF2FA 0%, #DCE7F2 100%);
  --t-sidebar-text: #334155;
  --t-sidebar-text-active: #0B1B2F;
  --t-sidebar-active-bg: linear-gradient(90deg, rgba(7,135,240,.18) 0%, rgba(0,126,167,.10) 100%);
  --t-sidebar-hover-bg: rgba(7,135,240,.08);
  --t-scrollbar-track: #EAF2FA;
  --t-scrollbar-thumb: #B6CCE2;
  --t-scrollbar-thumb-hover: #8AA6C5;

  /* Modulación de tokens INEQ en tema claro (mantiene marca pero adapta superficies) */
  --ineq-bg-main: #F3F7FB;
  --ineq-bg-app: #F3F7FB;
  --ineq-bg-sidebar: #EAF2FA;
  --ineq-bg-panel: #FFFFFF;
  --ineq-bg-card: #FFFFFF;
  --ineq-bg-elevated: #FFFFFF;
  --ineq-border-soft: #D7E3F0;
  --ineq-border-medium: #B6CCE2;
  --ineq-border-strong: #8AA6C5;
  --ineq-shadow-card: 0 12px 32px rgba(11,27,47,.10);
  --ineq-shadow-soft: 0 6px 18px rgba(11,27,47,.06);
  --ineq-glow-cyan: 0 0 24px rgba(0,126,167,.18);
  --ineq-gradient-card: linear-gradient(135deg, rgba(0,126,167,0.04), rgba(7,135,240,0.04));
  --ineq-gradient-sidebar: linear-gradient(180deg, #EAF2FA 0%, #DCE7F2 100%);
  --ineq-text-primary: #0B1B2F;
  --ineq-text-secondary: #334155;
  --ineq-text-muted: #64748B;
  --ineq-text-disabled: #94A3B8;
}

/* Refinamientos específicos para tema claro */
[data-theme="light"] .sidebar { border-right: 1px solid #D7E3F0; }
[data-theme="light"] .nav-link { color: #334155; }
[data-theme="light"] .nav-link:hover { background: rgba(7,135,240,.06); color: #0B1B2F; }
[data-theme="light"] .nav-link.active {
  background: linear-gradient(90deg, rgba(7,135,240,.14) 0%, rgba(0,126,167,.08) 100%);
  color: #0B1B2F;
  border-left-color: #0787F0;
}
[data-theme="light"] .sidebar__brand { border-bottom-color: #D7E3F0; }
[data-theme="light"] .sidebar__title { color: #0B1B2F; }
[data-theme="light"] .sidebar__title span { color: #007EA7; }
[data-theme="light"] .sidebar__user-name { color: #0B1B2F; }
[data-theme="light"] .nav-section { color: #64748B; border-top-color: #D7E3F0; }
[data-theme="light"] .topbar { background: #FFFFFF; border-bottom-color: #D7E3F0; }
[data-theme="light"] .topbar__user-name { color: #0B1B2F; }
[data-theme="light"] .topbar input[type="search"], [data-theme="light"] .topbar select { background: #F3F7FB; border-color: #D7E3F0; }
[data-theme="light"] table.data th { background: #EAF2FA; color: #334155; }
[data-theme="light"] table.data tr:hover td { background: rgba(7,135,240,.04); }
[data-theme="light"] .card { background-color: #FFFFFF; }
[data-theme="light"] .card:hover { border-color: #B6CCE2; box-shadow: var(--ineq-shadow-card), 0 0 18px rgba(7,135,240,.10); }
[data-theme="light"] select option { background-color: #FFFFFF; color: #0B1B2F; }
[data-theme="light"] select option:checked,
[data-theme="light"] select option:hover { background-color: #0787F0; color: #FFFFFF; }
[data-theme="light"] .modal__header { border-bottom-color: #D7E3F0; }
[data-theme="light"] .modal::backdrop { background: rgba(11,27,47,.45); }
[data-theme="light"] .pill { background: rgba(11,27,47,.04); color: #334155; border-color: #D7E3F0; }
[data-theme="light"] .pill--brand { background: rgba(0,126,167,.12); color: #007EA7; border-color: rgba(0,126,167,.30); }
[data-theme="light"] .pill--info { background: rgba(7,135,240,.10); color: #0787F0; border-color: rgba(7,135,240,.30); }
[data-theme="light"] .pill--success { background: rgba(21,128,61,.10); color: #15803D; border-color: rgba(21,128,61,.30); }
[data-theme="light"] .pill--warning { background: rgba(180,83,9,.10); color: #B45309; border-color: rgba(180,83,9,.30); }
[data-theme="light"] .pill--danger { background: rgba(185,28,28,.10); color: #B91C1C; border-color: rgba(185,28,28,.30); }
[data-theme="light"] .pill--purple { background: rgba(109,40,217,.10); color: #6D28D9; border-color: rgba(109,40,217,.30); }
[data-theme="light"] ::-webkit-scrollbar-track { background: #EAF2FA; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #B6CCE2; border: 2px solid #EAF2FA; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #8AA6C5; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-link); text-decoration: none; }
a:hover { text-decoration: underline; }

[hidden] { display: none !important; }

/* ============================================================
   Splash — pantalla de carga inicial (más grande y limpia)
   ============================================================ */
.splash {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(18,169,227,.10), transparent 60%),
    linear-gradient(160deg, var(--c-brand) 0%, var(--c-brand-strong) 70%, #061421 100%);
  color: #fff;
  z-index: 9999;
  animation: splash-fade-in .35s ease;
}
@keyframes splash-fade-in { from { opacity: 0; } to { opacity: 1; } }
.splash__brand {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  animation: splash-rise .55s cubic-bezier(.2,.7,.2,1);
}
@keyframes splash-rise { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.splash__logo-img {
  width: 180px; height: auto; padding: 0; background: transparent; box-shadow: none;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.35));
}
.splash__wordmark {
  font-size: 28px; font-weight: 600; letter-spacing: .5px; text-align: center;
  margin-top: 4px;
}
.splash__wordmark span { font-weight: 300; opacity: .85; margin-left: 6px; }
.splash__tagline {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.55); font-weight: 500;
}
.splash__spinner {
  margin-top: 8px;
  width: 26px; height: 26px;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: var(--c-accent, #12A9E3);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Login — split layout usando assets de ineq_login_asset_pack
   Desktop ≥ 981px: cabe en 100vh, sin scroll.
   Panel izquierdo: logo + hero + mockup + features TODO CENTRADO.
   ============================================================ */
.login {
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 55fr 45fr;
  background: #040a14;
  animation: splash-fade-in .35s ease;
}

/* ---------- Panel izquierdo: branding + hero + mockup + features (centrado) ---------- */
.login-visual {
  position: relative;
  overflow: hidden;
  color: #f4f8ff;
  background:
    url("/assets/login/backgrounds/login_left_background_hd.svg") center / cover no-repeat,
    linear-gradient(140deg, #061021 0%, #0d1d44 45%, #0a2756 100%);
}
.login-visual__inner {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 56px;
  gap: 26px;
}
.login-visual__brand {
  display: flex; justify-content: center;
}
.login-visual__logo {
  width: clamp(240px, 28vw, 380px);
  height: auto;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.45));
}
.login-visual__hero {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  max-width: 620px;
}
.login-visual__divider {
  display: block;
  width: min(560px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(18,169,227,.5), transparent);
  margin-bottom: 4px;
}
.login-visual__hero-title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: #ffffff;
}
.login-visual__hero-sub {
  margin: 0;
  font-size: clamp(13px, 1.05vw, 15px);
  color: #c2d3e8;
  letter-spacing: 0.01em;
}
.login-visual__mockup {
  display: block;
  width: 100%;
  max-width: 640px;
  max-height: 280px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 56px rgba(0,0,0,.45));
}
.login-visual__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: min(640px, 100%);
}
.login-visual__features li {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 8px;
  border: 1px solid rgba(18,169,227,0.18);
  border-radius: 14px;
  background: rgba(2,14,27,0.32);
  color: rgba(216,230,246,0.92);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.login-visual__features li:hover {
  border-color: rgba(18,169,227,0.45);
  background: rgba(18,169,227,0.07);
  transform: translateY(-1px);
}
.login-visual__feature-icon {
  width: 40px; height: 40px;
  display: block;
}
.login-visual__feature-label {
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: #d8e6f6;
  font-weight: 500;
  text-align: center;
}

/* ---------- Panel derecho: tarjeta premium ---------- */
.login__panel {
  position: relative;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 36px 48px;
  background:
    url("/assets/login/backgrounds/login_right_panel_bg.svg") center / cover no-repeat,
    #040a14;
  border-left: 1px solid rgba(18,169,227,0.12);
  border-top-left-radius: 32px;
  border-bottom-left-radius: 32px;
  animation: splash-rise .5s cubic-bezier(.2,.7,.2,1);
  overflow: hidden;
}
.login__panel::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 400px at 100% 0%, rgba(7,135,240,0.10), transparent 60%),
    radial-gradient(500px 400px at 0% 100%, rgba(18,169,227,0.08), transparent 70%);
  pointer-events: none;
}
.login__badge {
  position: absolute;
  top: 28px; right: 32px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(18,169,227,0.24);
  border-radius: 12px;
  background: rgba(12,32,54,0.55);
  color: #d9e6f7;
  font-size: 12px;
  letter-spacing: 0.02em;
  z-index: 2;
}
.login__badge img { width: 16px; height: 16px; display: block; }
.login__card {
  position: relative; z-index: 1;
  width: 100%;
  max-width: 460px;
  display: flex; flex-direction: column;
}
.login__brand {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  margin-bottom: 26px;
}
.login__title {
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 700; margin: 0;
  letter-spacing: -0.01em;
  color: #f4f8ff;
  line-height: 1.05;
}
.login__subtitle {
  font-size: 15px; color: #c5d6ea; font-weight: 500;
  margin: 10px 0 0;
}
.login__tagline {
  font-size: 12.5px;
  color: #91a4bd;
  margin: 6px 0 0;
  letter-spacing: 0.01em;
}
.login__form {
  display: flex; flex-direction: column; gap: 16px;
  width: 100%;
}
.login__form .field { gap: 6px; }
.login__form .field__label {
  font-size: 12px;
  color: #d9e6f7;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.login__form .field__wrap {
  position: relative;
  display: flex; align-items: center;
}
.login__form .field__icon {
  position: absolute;
  left: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(185,208,233,0.85);
  pointer-events: none;
}
.login__form .field--icon input {
  width: 100%;
  background: #061422;
  border: 1px solid rgba(18,169,227,0.26);
  color: #ffffff;
  padding: 14px 14px 14px 46px;
  border-radius: 12px;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.login__form .field--icon input:focus {
  outline: none;
  border-color: #12A9E3;
  box-shadow: 0 0 0 3px rgba(18,169,227,.18);
  background: #07182a;
}
.login__form .field--icon input::placeholder {
  color: rgba(145,164,189,0.5);
}
.field__toggle {
  position: absolute;
  right: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  color: rgba(185,208,233,0.7);
  cursor: pointer;
  border-radius: 6px;
  transition: color .15s ease, background .15s ease;
}
.field__toggle:hover { color: #f4f8ff; background: rgba(255,255,255,0.04); }
.field__toggle[data-shown="1"] { color: #12A9E3; }

.login__actions {
  display: flex; flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  align-items: stretch;
}
.login__submit {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 16px 18px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  border-radius: 14px;
  border: 0;
  color: #ffffff;
  background: linear-gradient(90deg, #00b8ee 0%, #155cff 100%);
  box-shadow: 0 14px 26px rgba(0,184,238,0.22), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
  cursor: pointer;
}
.login__submit:hover { filter: brightness(1.06); box-shadow: 0 18px 32px rgba(0,184,238,0.32), inset 0 1px 0 rgba(255,255,255,0.22); }
.login__submit:active { transform: translateY(1px); }
.login__submit svg { transition: transform .15s ease; }
.login__submit:hover svg { transform: translateX(3px); }
.login__actions .btn--link,
.login__forgot {
  font-size: 14px;
  font-weight: 600;
  align-self: center;
  color: #51C4F0;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  letter-spacing: 0.01em;
  transition: color .15s ease, background .15s ease;
}
.login__actions .btn--link:hover,
.login__forgot:hover {
  color: #b9e3f7;
  background: rgba(81,196,240,0.10);
  text-decoration-thickness: 2px;
}
.login__forgot:focus-visible {
  outline: 2px solid var(--ineq-cyan);
  outline-offset: 2px;
}
/* LOGIN-ACCESS-PREMIUM-V1: checkbox "Recordar mi correo" — solo persiste email
   en localStorage. No guarda contraseña, no manipula tokens, no toca persistencia
   de Firebase Auth. */
.login__remember {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 -4px;
  cursor: pointer;
  font-size: 13px;
  color: #c5d6ea;
  user-select: none;
}
.login__remember-input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.login__remember-box {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(18,169,227,0.45);
  background: #061422;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.login__remember-input:checked + .login__remember-box {
  background: #12A9E3;
  border-color: #12A9E3;
  color: #ffffff;
}
.login__remember-input:focus-visible + .login__remember-box {
  outline: 2px solid var(--ineq-cyan);
  outline-offset: 2px;
}
.login__remember-label {
  letter-spacing: 0.01em;
}
/* Badge "Autenticación segura · Firebase Auth": un poco más legible que el
   antiguo "Acceso seguro" — texto más claro, leve hover para hint de tooltip
   nativo del navegador. */
.login__badge {
  cursor: help;
}
.login__badge:hover {
  background: rgba(18,32,54,0.7);
  border-color: rgba(18,169,227,0.40);
}
/* Feature "CRM · Próximamente" en panel izquierdo del login. Visualmente más
   tenue que las features activas — comunica que NO es ruta operativa. */
.login-visual__feature--coming {
  opacity: 0.55;
  position: relative;
}
.login-visual__feature--coming::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(18,169,227,0.32);
  border-radius: inherit;
  pointer-events: none;
}
.login__error {
  background: rgba(217,54,54,.08);
  color: var(--c-danger);
  border: 1px solid rgba(217,54,54,.25);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-top: 6px;
  font-size: 13px;
  text-align: center;
}
.login__divider {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  margin: 30px 0 16px;
  color: rgba(145,164,189,0.55);
}
.login__divider-line {
  flex: 1;
  height: 1px;
  background: rgba(145,164,189,0.28);
}
.login__legal {
  font-size: 12px;
  color: #91a4bd;
  line-height: 1.65;
  text-align: center;
  margin: 0;
}
.login__version {
  font-size: 11px;
  color: #697b91;
  margin-top: 14px;
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: 0.5px;
  text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .login-visual__inner { padding: 32px 36px; gap: 20px; }
  .login-visual__features { gap: 10px; }
  .login-visual__features li { padding: 10px 6px; }
  .login__panel { padding: 28px 32px; }
}
@media (max-width: 980px) {
  .login { height: auto; min-height: 100dvh; grid-template-columns: 1fr; overflow: auto; }
  .login-visual { display: none; }
  .login__panel { padding: 36px 24px; border-left: none; border-radius: 0; align-items: stretch; }
  .login__badge { position: static; align-self: center; margin-bottom: 18px; }
  .login__card { max-width: 420px; margin: 0 auto; }
  .login__brand { align-items: center; text-align: center; }
}
/* Laptops 13"/14" (alto ≤ 800px): comprime sin scroll */
@media (max-height: 800px) and (min-width: 981px) {
  .login-visual__inner { padding: 24px 40px; gap: 16px; }
  .login-visual__logo { width: clamp(220px, 24vw, 320px); }
  .login-visual__hero-title { font-size: clamp(20px, 2vw, 26px); }
  .login-visual__mockup { max-height: 220px; }
  .login-visual__features li { padding: 9px 6px; }
  .login-visual__feature-icon { width: 34px; height: 34px; }
  .login-visual__feature-label { font-size: 11.5px; }
  .login__panel { padding: 26px 40px; }
  .login__brand { margin-bottom: 18px; }
  .login__title { font-size: clamp(26px, 2.8vw, 32px); }
  .login__form { gap: 12px; }
  .login__form .field--icon input { padding: 12px 14px 12px 44px; }
  .login__submit { padding: 13px 16px; }
  .login__divider { margin: 18px 0 10px; }
}

/* ============================================================
   Forms
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 4px; }
.field__label { font-size: 12px; color: var(--c-text-soft); font-weight: 500; }
.field__hint { font-size: 12px; color: var(--c-text-muted); }
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"], input[type="url"],
input[type="date"], input[type="datetime-local"], textarea, select {
  width: 100%;
  font: inherit;
  color: var(--ineq-text-primary);
  background: var(--ineq-bg-app);
  border: 1px solid var(--ineq-border-soft);
  border-radius: var(--ineq-radius-sm);
  padding: 9px 12px;
  outline: 0;
  transition: border-color var(--ineq-motion-fast) var(--ineq-ease-standard), box-shadow var(--ineq-motion-fast) var(--ineq-ease-standard), background-color var(--ineq-motion-fast) var(--ineq-ease-standard);
}
input::placeholder, textarea::placeholder { color: var(--ineq-text-disabled); }
input:focus, textarea:focus, select:focus {
  border-color: var(--ineq-cyan);
  box-shadow: 0 0 0 3px rgba(18,169,227,.18);
  background: var(--ineq-bg-elevated);
}
textarea { min-height: 84px; resize: vertical; }
.fieldset { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
}
.btn:hover { background: var(--c-surface-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn--primary {
  background: var(--ineq-gradient-primary);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(7,135,240,0.18), inset 0 1px 0 rgba(255,255,255,0.16);
  transition: filter var(--ineq-motion-base) var(--ineq-ease-standard), box-shadow var(--ineq-motion-base) var(--ineq-ease-standard), transform var(--ineq-motion-fast) var(--ineq-ease-standard);
}
.btn--primary:hover { background: var(--ineq-gradient-primary-hover); filter: brightness(1.04); border-color: transparent; box-shadow: 0 14px 28px rgba(7,135,240,0.28), inset 0 1px 0 rgba(255,255,255,0.20); }
.btn--primary:active { transform: translateY(1px); }
.btn--primary:focus-visible { outline: 2px solid var(--ineq-cyan); outline-offset: 2px; }
.btn--ghost { background: transparent; border-color: var(--ineq-border-medium); color: var(--ineq-text-secondary); }
.btn--ghost:hover { background: rgba(18,169,227,.06); border-color: var(--ineq-border-strong); color: var(--ineq-text-primary); }
.btn--danger { background: var(--ineq-red); color: #fff; border-color: var(--ineq-red); }
.btn--danger:hover { background: #DC2626; border-color: #DC2626; }
.btn--link { background: transparent; color: var(--ineq-cyan); padding: 6px 4px; border: 0; }
.btn--link:hover { text-decoration: underline; background: transparent; color: var(--ineq-cyan-soft); }
.btn--block { width: 100%; }
.btn--sm { padding: 5px 10px; font-size: 12px; }

/* ============================================================
   App shell
   ============================================================ */
.app {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar page";
  background: var(--c-bg);
  transition: grid-template-columns .2s ease;
}
.sidebar {
  grid-area: sidebar;
  background: var(--ineq-gradient-sidebar);
  color: var(--ineq-text-secondary);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--ineq-border-soft);
  position: sticky; top: 0; align-self: start;
  height: 100dvh;
  width: 100%;
  transition: width .2s ease;
}
/* Sidebar colapsado: solo iconos visibles, ancho reducido.
   IMPORTANTE: hay que reducir TANTO el .sidebar como la columna del grid
   en .app, si no queda un gap horizontal entre sidebar y contenido. */
.app.is-sidebar-collapsed { grid-template-columns: 60px 1fr; }
.app.is-sidebar-collapsed .sidebar { width: 100%; }
.app.is-sidebar-collapsed .sidebar__title,
.app.is-sidebar-collapsed .nav-link__text,
.app.is-sidebar-collapsed .nav-section,
.app.is-sidebar-collapsed .nav-link__bullet,
.app.is-sidebar-collapsed .nav-group__chev,
.app.is-sidebar-collapsed .nav-group__items { display: none; }
.app.is-sidebar-collapsed .sidebar__brand { justify-content: center; padding: 14px 8px; }
/* SBL-1: en colapsado mantener el logo compacto + max-height para evitar
 * que se infle si el aspect ratio del archivo cambia. */
.app.is-sidebar-collapsed .sidebar__logo-img { width: 36px; max-height: 36px; }
.app.is-sidebar-collapsed .nav-link,
.app.is-sidebar-collapsed .nav-group__head { justify-content: center; padding: 10px 8px; }

/* Botón colapsar/expandir sidebar — pegado al borde derecho del sidebar.
   Más grande y con buen contraste para ser obvio sin tapar nav items. */
.sidebar__collapse {
  position: absolute;
  /* Lo bajamos un poco (debajo del logo) para que las tooltips de los nav-items
     que aparecen al hacer hover no se solapen visualmente. */
  top: 64px; right: -14px; z-index: 50;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-accent, #12A9E3); color: #001318;
  border: 2px solid var(--c-brand-strong);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.4), 0 0 0 1px rgba(18,169,227,.3);
  /* MOTION-STD-1 (2026-05-25): unificado a tokens. transform usa slow (260ms)
     porque rota 180deg, los color/shadow usan fast (120ms). */
  transition: transform var(--ineq-motion-slow) var(--ineq-ease-standard), background-color var(--ineq-motion-fast) var(--ineq-ease-standard), box-shadow var(--ineq-motion-fast) var(--ineq-ease-standard);
}
.sidebar__collapse:hover {
  background: #fff; color: #001318;
  box-shadow: 0 6px 16px rgba(18,169,227,.4), 0 0 0 1px rgba(18,169,227,.6);
  transform: scale(1.08);
}
.app.is-sidebar-collapsed .sidebar__collapse { transform: rotate(180deg); }
.app.is-sidebar-collapsed .sidebar__collapse:hover { transform: rotate(180deg) scale(1.08); }

/* Separador de sección — etiqueta arriba */
.nav-section {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px;
  color: rgba(199,211,227,.45); font-weight: 600;
  padding: 14px 16px 4px; margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.nav-section:first-child { border-top: 0; margin-top: 0; }
/* SBL-1_2026-05-24 — El brand header del sidebar ahora muestra SOLO el
 * logo oficial INEQ (versión blanca para fondo oscuro), sin texto manual
 * "INEQ Médica" duplicado. El logo se centra horizontalmente y crece para
 * llenar el espacio del header sin deformarse (object-fit: contain). En
 * sidebar colapsado, el override de más abajo reduce el logo a 36px y
 * mantiene el padding compacto.
 *
 * Las reglas `.sidebar__title` se mantienen como código muerto inocuo —
 * el selector ya no existe en el DOM, pero las reglas no afectan render
 * y permiten revertir el cambio rápido si fuera necesario.
 */
.sidebar__brand {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar__logo {
  width: 32px; height: 32px; border-radius: 6px;
  background: #fff; color: var(--c-brand);
  display: grid; place-items: center;
  font-weight: 800; font-size: 16px;
}
.sidebar__logo::before { content: "I"; }
.sidebar__logo-img {
  width: auto; height: auto; max-height: 48px; max-width: 180px; object-fit: contain;
}
/* Selectores legacy mantenidos por compatibilidad — el .sidebar__title ya no
 * existe en el DOM (eliminado en SBL-1). No afectan render. */
.sidebar__title { color: #fff; font-weight: 600; font-size: 16px; letter-spacing: .3px; }
.sidebar__title span { color: var(--c-accent, #12A9E3); font-weight: 700; margin-left: 4px; letter-spacing: .8px; }
.sidebar__nav {
  flex: 1; overflow-y: auto;
  padding: 12px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--ineq-text-secondary);
  font-size: 13.5px;
  border-left: 2px solid transparent;
  transition: background-color var(--ineq-motion-fast) var(--ineq-ease-standard), color var(--ineq-motion-fast) var(--ineq-ease-standard), border-color var(--ineq-motion-fast) var(--ineq-ease-standard);
}
.nav-link:hover { background: rgba(18,169,227,.06); text-decoration: none; color: var(--ineq-text-primary); }
.nav-link.active {
  background: linear-gradient(90deg, rgba(18,169,227,.16) 0%, rgba(7,135,240,.08) 100%);
  color: var(--ineq-text-primary);
  border-left-color: var(--ineq-cyan);
}
/* ── Anular estilos de navegador para todos los links del sidebar ──────────
   Problema: el UA stylesheet tiene `a:visited { color:purple }` (0,1,1) y
   `a { text-decoration:underline }`. El fix anterior (.nav-link:visited = 0,2,0)
   no cubría todos los sub-items ni todos los contextos de tema.

   Solución definitiva:
   - .sidebar a:link, .sidebar a:visited  (0,2,1) > browser UA (0,1,1)
   - color:inherit → el anchor toma el color que .nav-link ya estableció,
     eliminando completamente el morado sin tocar la lógica de color existente.
   - Los estados active se re-afirman a (0,4,0) para no quedar en inherit. */
.sidebar a:link,
.sidebar a:visited {
  color: inherit;
  text-decoration: none;
}
.sidebar a:hover,
.sidebar a:focus-visible { text-decoration: none; }
/* Re-afirmar colores activos (dark mode) — especificidad (0,4,0) > (0,2,1) */
.sidebar .nav-link.active:link,
.sidebar .nav-link.active:visited { color: var(--ineq-text-primary); }
.sidebar .nav-link--sub.active:link,
.sidebar .nav-link--sub.active:visited { color: #fff; }
/* Re-afirmar colores activos (light mode) */
[data-theme="light"] .sidebar .nav-link.active:link,
[data-theme="light"] .sidebar .nav-link.active:visited { color: #0B1B2F; }
.nav-link__icon { width: 18px; height: 18px; opacity: .85; flex: 0 0 auto; display: inline-grid; place-items: center; font-size: 14px; }
.nav-section {
  margin-top: 8px; padding: 8px 12px 4px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: #7e90ad;
}
.sidebar__footer {
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; gap: 8px;
}
.sidebar__user { display: flex; align-items: center; gap: 10px; }
.sidebar__user-name { color: #fff; font-size: 13px; font-weight: 500; }
.sidebar__user-role { color: #9fb3cf; font-size: 11px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-brand-soft), var(--c-accent));
  color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
}

.topbar {
  grid-area: topbar;
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  background: var(--ineq-bg-app);
  border-bottom: 1px solid var(--ineq-border-soft);
  position: sticky; top: 0; z-index: 5;
}
.topbar__menu { display: none; background: transparent; border: 0; font-size: 20px; cursor: pointer; }

/* Botón de perfil en top-left */
.topbar__user-btn {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid transparent; cursor: pointer;
  padding: 4px 10px 4px 4px; border-radius: 999px; color: inherit;
  transition: background .15s, border-color .15s;
}
.topbar__user-btn:hover { background: rgba(255,255,255,.04); border-color: var(--c-border); }
.topbar__user-btn[aria-expanded="true"] { background: rgba(255,255,255,.06); border-color: var(--c-border); }
.avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.topbar__user-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; text-align: left; }
.topbar__user-name { font-size: 13px; font-weight: 600; color: #fff; }
.topbar__user-role { font-size: 10px; }
.topbar__user-chev { font-size: 10px; opacity: .6; margin-left: 2px; }
.topbar__user-menu {
  /* HOTFIX_PROFILE_MENU_2026-05-24
     Antes vivía dentro del .topbar (stacking context z=5) y el page lo tapaba.
     Ahora se monta como hijo del <body> y se posiciona via JS con position:fixed.
     z-index 850: encima de notif-panel/FAB/page, debajo de modales (1000). */
  position: fixed; top: calc(var(--topbar-h) + 6px); right: 12px;
  z-index: 850; min-width: 220px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.45);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
/* Variante a la derecha del topbar (cuando el botón usuario va al lado del de disponibilidad) */
.topbar__user-menu--right { left: auto; right: 12px; }
/* Cuando está oculto, no captura clics aunque el JS aún no haya corrido. */
.topbar__user-menu[hidden] { display: none !important; }
.topbar__user-btn--right { margin-left: 4px; }

/* Avatar con aro de disponibilidad alrededor.
   El color del aro lo determina la variable --availability-color que el JS
   actualiza al cambiar el estado del usuario. */
.topbar__avatar-wrap {
  position: relative; display: inline-block; line-height: 0;
  padding: 2px; border-radius: 50%;
  background: var(--availability-color, #00AF50);
  /* MOTION-STD-1: unificado a token base (180ms) — antes 250ms se sentía lento. */
  transition: background-color var(--ineq-motion-base) var(--ineq-ease-standard);
}
.topbar__avatar-wrap .avatar { display: block; border: 2px solid var(--c-surface); }

/* Estado a la derecha del item "Cambiar disponibilidad" del menú */
.topbar__user-menu-status {
  margin-left: auto; font-size: 11px; opacity: .7;
  background: rgba(255,255,255,.06); padding: 2px 8px; border-radius: 10px;
}

/* ───────── Popover de disponibilidad anclado al botón del topbar ───────── */
.availability-popover {
  position: absolute; top: calc(var(--topbar-h) - 4px); right: 12px; z-index: 35;
  width: min(560px, calc(100vw - 24px));
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.55);
  padding: 14px 16px; color: inherit;
  max-height: calc(100vh - var(--topbar-h) - 24px); overflow-y: auto;
}
.availability-popover[hidden] { display: none; }
.ap__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); }
.ap__close { background: transparent; border: 0; font-size: 22px; line-height: 1; color: inherit; cursor: pointer; padding: 0 4px; opacity: .7; }
.ap__close:hover { opacity: 1; }
.ap__section { margin-bottom: 10px; }
.ap__label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; opacity: .65; margin-bottom: 4px; font-weight: 600; }
.ap__sublabel { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; opacity: .55; margin-bottom: 4px; }
.availability-popover input[type="text"], .availability-popover input[type="date"], .availability-popover textarea {
  width: 100%; padding: 6px 8px; background: rgba(255,255,255,.04); color: inherit;
  border: 1px solid var(--c-border); border-radius: 6px; font: inherit; font-size: 13px;
}
.availability-popover textarea { resize: vertical; min-height: 36px; }

/* Grid de estados como botones de píldora */
.ap__status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ap__status {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  background: transparent; border: 1px solid var(--c-border); border-radius: 6px;
  color: inherit; cursor: pointer; font-size: 12px; text-align: left;
  transition: background .12s, border-color .12s;
}
.ap__status:hover { background: rgba(255,255,255,.04); }
.ap__status.is-active { background: rgba(18,169,227,.12); border-color: var(--status-color, #12A9E3); }
.ap__status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-color, #6b7280); flex-shrink: 0; }

/* Liberación: fecha + columna hora + columna minuto */
.ap__release { display: grid; grid-template-columns: minmax(140px, 1fr) 1.6fr 1fr; gap: 10px; align-items: start; }
.ap__time-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; max-height: 156px; overflow-y: auto; padding: 2px; border: 1px solid var(--c-border); border-radius: 6px; }
.ap__min-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 2px; border: 1px solid var(--c-border); border-radius: 6px; }
.ap__hour, .ap__min {
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  color: inherit; cursor: pointer; padding: 4px 0; font-size: 12px; font-family: ui-monospace, monospace; text-align: center;
}
.ap__hour:hover, .ap__min:hover { background: rgba(255,255,255,.06); }
.ap__hour.is-active, .ap__min.is-active { background: var(--c-accent, #12A9E3); color: #001318; border-color: var(--c-accent, #12A9E3); font-weight: 600; }

.ap__checkbox { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 0; cursor: pointer; }
.ap__footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--c-border); }

@media (max-width: 640px) {
  .availability-popover { width: calc(100vw - 16px); right: 8px; }
  .ap__release { grid-template-columns: 1fr; }
  .ap__status-grid { grid-template-columns: repeat(2, 1fr); }
}
.topbar__user-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  padding: 9px 12px; border-radius: 6px; font-size: 13px; color: inherit;
  text-decoration: none;
}
.topbar__user-menu-item:hover { background: rgba(255,255,255,.06); }
.topbar__user-menu-item--danger { color: #ff8b8b; }
.topbar__user-menu-item .icon, .topbar__user-menu-item .menu-icon { opacity: .85; flex-shrink: 0; }
.topbar__user-menu-sep { border: 0; border-top: 1px solid var(--c-border); margin: 4px 0; }
.topbar__user-chev { display: inline-flex; align-items: center; opacity: .6; margin-left: 2px; transition: transform .15s; }
.topbar__user-btn[aria-expanded="true"] .topbar__user-chev { transform: rotate(180deg); }

/* Iconos genéricos */
.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.nav-link__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; opacity: .9; }
.nav-link__bullet { color: rgba(199,211,227,.45); margin-right: 4px; font-size: 14px; }

/* Sidebar — grupos colapsables.
   Normalizados para coincidir tipográficamente con `.nav-link` (items flat):
   misma fuente, mismo tamaño, mismo peso. Lo único que distingue un grupo
   de un item flat es el chevron a la derecha. Los separadores de sección
   (`.nav-section`) mantienen su estilo uppercase pequeño porque son labels
   de bloque, no items navegables. */
.nav-group__head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: 0; color: var(--ineq-text-secondary); cursor: pointer;
  padding: 9px 12px; font-size: 13.5px; font-weight: 500;
  text-transform: none; letter-spacing: normal;
  border-radius: 8px;
  font-family: inherit;
}
.nav-group__head:hover { color: var(--ineq-text-primary); background: rgba(18,169,227,.06); }
.nav-group__chev { margin-left: auto; display: inline-flex; align-items: center; transition: transform .15s; opacity: .55; }
.nav-group[data-open="true"] .nav-group__chev { transform: rotate(90deg); opacity: .85; }
.nav-group__items { display: none; padding: 2px 0 6px 8px; border-left: 1px solid rgba(255,255,255,.06); margin-left: 18px; }
.nav-group[data-open="true"] .nav-group__items { display: block; }
.nav-link--sub { padding-left: 14px; font-size: 13px; }
.nav-link--sub.active { background: linear-gradient(90deg, rgba(7,135,240,.18), transparent); color: #fff; border-left: 2px solid var(--c-accent); padding-left: 12px; }

/* DataTable — tabla tipo Excel con columnas reordenables */
.dt { display: flex; flex-direction: column; gap: 8px; }
.dt__toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dt__search { position: relative; flex: 1; max-width: 360px; display: flex; align-items: center; }
.dt__search .icon { position: absolute; left: 10px; opacity: .5; pointer-events: none; }
.dt__search input { width: 100%; padding: 7px 12px 7px 32px; }
.dt__toolbar-spacer { flex: 1; }
.dt__toolbar-extra { display: flex; gap: 6px; }
.dt__cols-btn { display: inline-flex; align-items: center; gap: 6px; }
/* 2026-05-18: en móvil ocultamos el botón "Exportar Excel" porque el flujo de
   download + descompresión + apertura en Excel no es viable en celular. En su
   lugar mostramos un hint discreto. Desktop: hint oculto, botón visible. */
.dt__export-mobile-hint { display: none; font-size: 11px; color: var(--c-text-soft, #888); font-style: italic; }
@media (max-width: 600px) {
  .dt__export-btn { display: none; }
  .dt__export-mobile-hint { display: inline; }
}
.dt__cols-panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 8px; padding: 12px; }
.dt__cols-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.dt__col-toggle { display: flex; align-items: center; gap: 8px; padding: 4px 6px; cursor: pointer; border-radius: 4px; font-size: 13px; }
.dt__col-toggle:hover { background: rgba(255,255,255,.04); }
.dt__cols-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin-top: 6px; }

/* QA-B 2026-05-22 — Scroll interno horizontal + vertical para evitar que la
   barra de scroll quede al fondo de la página. max-height limita el alto,
   forzando scroll interno cuando hay muchas filas. max-width:100% evita
   que la tabla expanda el contenedor padre cuando hay muchas columnas. */
.dt__wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-surface);
  max-width: 100%;
  max-height: 70vh;
}
.dt__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
/* Sticky header: el thead queda fijo al scrollear vertical dentro de .dt__wrap */
.dt__table thead { position: sticky; top: 0; z-index: 5; }
.dt__table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--c-surface-2, #131826); color: #c7d3e3;
  text-align: left; font-weight: 600; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 9px 10px; border-bottom: 1px solid var(--c-border);
  user-select: none; cursor: grab; white-space: nowrap;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.dt__table thead th:hover { background: var(--c-surface, #1a2236); }
.dt__table thead th:active { cursor: grabbing; }
.dt__table thead th.dragging {
  opacity: .55; transform: scale(.98);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.dt__table thead th.drag-over {
  background: rgba(7,135,240,.22); border-bottom: 2px solid var(--c-accent);
  box-shadow: inset 3px 0 0 var(--c-accent);
}
.dt__th-grip { display: inline-flex; vertical-align: middle; margin-right: 4px; opacity: .35; }
.dt__th-label { cursor: pointer; }
.dt__th-label:hover { color: #fff; }
.dt__th-arrow { margin-left: 4px; opacity: .7; }
.dt__table tbody td {
  padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.04);
  vertical-align: top;
}
.dt__table tbody tr:hover td { background: rgba(255,255,255,.02); }
.dt__row-clickable { cursor: pointer; transition: background-color .12s ease; }
.dt__row-clickable:hover { background: rgba(18,169,227, 0.06); }
.dt__row-clickable:hover td { color: var(--ineq-text-primary, #fff); }
.dt__empty { text-align: center; padding: 28px; color: var(--c-text-soft, #9fb3cf); }
.dt__footer { font-size: 11px; color: var(--c-text-soft, #9fb3cf); padding: 6px 4px 0; }
.dt__pagination { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.dt__pagination-info { font-weight: 500; }
.dt__pagination-size label { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; }
.dt__pagination-size select { padding: 3px 6px; background: transparent; border: 1px solid var(--c-border); border-radius: 4px; color: inherit; font-size: 12px; }
.dt__pagination-pages { display: inline-flex; gap: 6px; align-items: center; }
.dt__pagination-pages button { min-width: 28px; padding: 2px 8px; font-size: 14px; line-height: 1; }
.dt__pagination-pages button:disabled { opacity: .3; cursor: not-allowed; }
.dt__pagination-page { font-size: 12px; opacity: .8; padding: 0 4px; }

/* Toggle switch genérico */
.ineq-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; cursor: pointer; user-select: none;
  padding: 6px 10px; border-radius: 6px; border: 1px solid var(--c-border);
  transition: background-color .15s;
}
.ineq-toggle:hover { background: rgba(255,255,255,.04); }
.ineq-toggle input[type="checkbox"] { accent-color: var(--c-accent); margin: 0; }

/* Animación de "ven aquí" para el botón primario cuando está vacío.
   Se activa con la clase .pulse-attention en el botón. */
@keyframes pulseAttention {
  0%, 100% { box-shadow: 0 0 0 0 rgba(24, 169, 153, 0); }
  50%      { box-shadow: 0 0 0 8px rgba(24, 169, 153, 0.18); }
}
.btn.pulse-attention { animation: pulseAttention 1.6s ease-in-out 3; }

/* Chatbox IA flotante */
.ai-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  width: 52px; height: 52px; border-radius: 26px;
  background: linear-gradient(135deg, #12A9E3, #0787F0); border: 0; color: #fff;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.ai-fab:hover { transform: translateY(-1px); }
.ai-panel {
  position: fixed; right: 24px; bottom: 88px; z-index: 50;
  width: 380px; max-width: calc(100vw - 32px); height: 540px; max-height: calc(100vh - 120px);
  background: var(--c-surface, #161c2a); border: 1px solid var(--c-border, #232a3b);
  border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.45);
  display: flex; flex-direction: column; overflow: hidden;
}
.ai-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--c-border); background: rgba(255,255,255,.02); }
.ai-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ai-msg { display: flex; align-items: flex-end; gap: 6px; max-width: 95%; }
.ai-msg--user { align-self: flex-end; flex-direction: row-reverse; }
.ai-msg__bubble { padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; max-width: 280px; }
.ai-msg--user .ai-msg__bubble { background: linear-gradient(135deg, #0787F0, #054B86); color: #fff; border-bottom-right-radius: 4px; }
.ai-msg--assistant .ai-msg__bubble { background: rgba(255,255,255,.06); color: #e2e8f0; border-bottom-left-radius: 4px; }
.ai-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--c-border); }
.ai-form textarea { flex: 1; resize: none; border-radius: 8px; padding: 8px; font-size: 13px; }
.ai-greet { padding: 14px; text-align: center; color: var(--c-text-soft, #9fb3cf); font-size: 13px; line-height: 1.6; }
.ai-greet svg { display: inline-block; vertical-align: middle; margin-bottom: 8px; opacity: .8; }
.ai-suggestions { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ai-chip { background: rgba(7,135,240,.08); border: 1px solid rgba(7,135,240,.3); color: #c7d3e3; padding: 7px 10px; border-radius: 18px; font-size: 12px; cursor: pointer; text-align: left; }
.ai-chip:hover { background: rgba(7,135,240,.18); color: #fff; }
.ai-link { color: #0787F0; text-decoration: none; }
.ai-link:hover { text-decoration: underline; }

[data-theme="light"] .ai-panel {
  background: #FFFFFF;
  border-color: #C9D8EA;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
}
[data-theme="light"] .ai-panel__head,
[data-theme="light"] .ai-form {
  background: #F8FBFE;
  border-color: #D7E3F0;
}
[data-theme="light"] .ai-msg--assistant {
  color: #334155;
}
[data-theme="light"] .ai-msg--assistant svg {
  color: #0F5F8F;
}
[data-theme="light"] .ai-msg--assistant .ai-msg__bubble {
  background: #EEF6FC;
  color: #0B1B2F;
  border: 1px solid #C9D8EA;
}
[data-theme="light"] .ai-greet {
  color: #334155;
}
[data-theme="light"] .ai-chip {
  background: #EEF6FC;
  border-color: #B6CCE2;
  color: #0B1B2F;
}
[data-theme="light"] .ai-chip:hover {
  background: #DDF0FA;
  color: #0B1B2F;
}
[data-theme="light"] .ai-form textarea {
  background: #FFFFFF;
  color: #0B1B2F;
  border-color: #B6CCE2;
}

/* Modo Auditoria / QA local-only */
.qa-feedback-fab {
  position: fixed; right: 24px; bottom: 88px; z-index: 2147483000;
  min-width: 118px; height: 34px; border-radius: 8px;
  border: 1px solid rgba(26, 188, 156, .42);
  background: rgba(13, 23, 38, .94);
  color: #9ff5de;
  display: inline-grid; place-items: center;
  padding: 0 12px;
  font-weight: 800; font-size: 12px; letter-spacing: 0;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.qa-feedback-fab:hover { background: rgba(26,188,156,.18); color: #fff; }
.qa-audit-fab {
  position: fixed; right: 24px; bottom: 88px; z-index: 2147483000;
  min-width: 44px; height: 34px; border-radius: 8px;
  border: 1px solid rgba(18,169,227,.45);
  background: rgba(13, 23, 38, .92);
  color: #8ee7f4;
  display: grid; place-items: center;
  padding: 0 10px;
  font-weight: 800; font-size: 12px; letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.qa-audit-fab:hover { background: rgba(18,169,227,.18); color: #fff; }
.qa-audit-fab--legacy { bottom: 132px; }
.qa-audit-panel {
  position: fixed; right: 24px; bottom: 176px; z-index: 2147483000;
  width: 420px; max-width: calc(100vw - 32px); max-height: calc(100vh - 160px);
  overflow: hidden; display: flex; flex-direction: column;
  background: var(--c-surface, #161c2a);
  border: 1px solid var(--c-border, #232a3b);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.qa-audit-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-bottom: 1px solid var(--c-border);
  background: rgba(18,169,227,.06);
}
.qa-audit-count {
  display: block; margin-top: 2px;
  color: var(--c-text-soft); font-size: 11px; font-weight: 500;
}
.qa-audit-icon-btn {
  width: 28px; height: 28px; border: 1px solid var(--c-border);
  border-radius: 6px; background: transparent; color: var(--c-text-soft);
  cursor: pointer; font-size: 18px; line-height: 1;
}
.qa-audit-icon-btn:hover { color: var(--c-text); background: rgba(255,255,255,.06); }
.qa-audit-context {
  padding: 10px 12px; border-bottom: 1px solid var(--c-border);
  color: var(--c-text-soft); font-size: 12px; line-height: 1.45;
}
.qa-audit-context strong { color: var(--c-text); }
.qa-audit-context span { font-family: var(--font-mono); font-size: 11px; }
.qa-audit-field {
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 12px 0;
  color: var(--c-text-soft); font-size: 12px; font-weight: 600;
}
.qa-audit-field textarea,
.qa-audit-field select {
  width: 100%; border: 1px solid var(--c-border); border-radius: 8px;
  background: var(--c-surface-2); color: var(--c-text);
  padding: 8px 10px; font: inherit; font-size: 13px;
}
.qa-audit-field textarea { resize: vertical; min-height: 70px; }
.qa-audit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.qa-audit-check {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 0; color: var(--c-text); font-size: 13px;
}
.qa-audit-check input { accent-color: var(--c-accent); }
.qa-audit-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 12px; border-bottom: 1px solid var(--c-border);
}
.qa-audit-actions .btn { justify-content: center; min-height: 32px; }
.qa-audit-list-wrap {
  padding: 10px 12px 12px; overflow-y: auto; min-height: 0;
}
.qa-audit-list-head { display: flex; gap: 8px; margin-bottom: 10px; }
.qa-audit-list-head select {
  min-width: 0; flex: 1; border: 1px solid var(--c-border); border-radius: 8px;
  background: var(--c-surface-2); color: var(--c-text); padding: 6px 8px;
}
.qa-audit-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 220px; overflow-y: auto; padding-right: 2px;
}
.qa-audit-note {
  border: 1px solid var(--c-border); border-radius: 8px;
  background: rgba(255,255,255,.03); padding: 8px 10px;
}
.qa-audit-note__meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11px; color: var(--c-text-soft);
}
.qa-audit-note__meta strong { color: var(--c-text); font-family: var(--font-mono); }
.qa-audit-note__meta span {
  border: 1px solid rgba(255,255,255,.08); border-radius: 999px;
  padding: 2px 6px;
}
.qa-audit-note__route {
  margin-top: 6px; color: var(--c-text-muted); font-family: var(--font-mono); font-size: 11px;
}
.qa-audit-note p { margin: 6px 0 0; color: var(--c-text); font-size: 12px; line-height: 1.45; }
.qa-audit-empty { color: var(--c-text-soft); font-size: 13px; padding: 10px 0; }
.qa-audit-host--in-dialog .qa-feedback-fab,
.qa-audit-host--in-dialog .qa-audit-fab,
.qa-audit-host--in-dialog .qa-audit-panel {
  z-index: 2147483000;
}

@media (max-width: 640px) {
  .qa-feedback-fab { right: 16px; bottom: 84px; min-width: 108px; }
  .qa-audit-fab { right: 16px; bottom: 84px; }
  .qa-audit-fab--legacy { bottom: 126px; }
  .qa-audit-panel { right: 16px; bottom: 168px; max-height: calc(100vh - 192px); }
  .qa-audit-grid,
  .qa-audit-actions { grid-template-columns: 1fr; }
}

/* ============================================================
   Notificaciones — dropdown panel
   ============================================================ */
.notif-panel {
  position: fixed; z-index: 100;
  width: 380px; max-width: calc(100vw - 16px);
  max-height: 60vh; overflow: hidden;
  background: var(--c-surface, #1a2230);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
  animation: notif-slide-in .18s ease;
}
@keyframes notif-slide-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.notif-panel__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--c-border);
  font-size: 13px;
}
.notif-mark-all {
  background: transparent; border: 0; color: var(--c-accent, #12A9E3);
  font-size: 11px; cursor: pointer; padding: 4px 6px; border-radius: 4px;
}
.notif-mark-all:hover { background: rgba(18,169,227,.08); }
.notif-panel__list {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column;
}
.notif-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; cursor: pointer;
  background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.04);
  text-align: left; color: inherit;
  transition: background-color .12s ease;
}
.notif-item:hover { background: rgba(255,255,255,.04); }
.notif-item--unread { background: rgba(18,169,227,.04); }
.notif-item--unread:hover { background: rgba(18,169,227,.08); }
.notif-item__dot {
  width: 8px; height: 8px; border-radius: 50%;
  margin-top: 6px; flex-shrink: 0;
  background: #6b7280;
}
.notif-item__dot.dot-critica { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
.notif-item__dot.dot-alta    { background: #f59e0b; }
.notif-item__dot.dot-media   { background: #3b82f6; }
.notif-item__dot.dot-baja    { background: #6b7280; }
.notif-item__body { flex: 1; min-width: 0; }
.notif-item__title { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--c-text); }
.notif-item__meta { font-size: 10px; color: var(--c-text-muted); margin-top: 2px; }
.notif-item__text {
  font-size: 12px; color: var(--c-text-soft); margin-top: 4px;
  white-space: pre-wrap; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-empty { padding: 24px; text-align: center; color: var(--c-text-soft); font-size: 13px; }
.notif-panel__foot {
  padding: 8px 14px; font-size: 11px; color: var(--c-text-muted);
  border-top: 1px solid var(--c-border); text-align: center;
}

/* ============================================================
   Búsqueda global — dropdown debajo del input del topbar
   ============================================================ */
.global-search-results {
  position: fixed; z-index: 90;
  background: var(--c-surface, #1a2230);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  max-height: 60vh; overflow-y: auto;
  animation: notif-slide-in .15s ease;
}
.global-search__group { padding: 6px 0; }
.global-search__group + .global-search__group { border-top: 1px solid var(--c-border); }
.global-search__group-title {
  font-size: 10px; letter-spacing: 1.2px; font-weight: 600;
  color: var(--c-text-muted); padding: 6px 14px 4px;
}
.global-search__item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 14px; text-decoration: none; color: var(--c-text);
  transition: background-color .12s ease;
}
.global-search__item:hover { background: rgba(18,169,227,.08); }
.global-search__empty {
  padding: 24px; text-align: center; color: var(--c-text-soft); font-size: 13px;
}

/* ============================================================
   Scanner QR — overlay full-screen con video de cámara
   ============================================================ */
.qr-scanner-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.85);
  display: grid; place-items: center;
  padding: 16px;
  animation: notif-slide-in .15s ease;
}
.qr-scanner-card {
  width: min(480px, 100%);
  background: var(--c-surface, #1a2230);
  border: 1px solid var(--c-border);
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
}
.qr-scanner-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--c-border);
  font-size: 14px;
}
.qr-scanner-close {
  background: transparent; border: 0; color: var(--c-text-soft);
  font-size: 28px; cursor: pointer; line-height: 1; padding: 0 4px;
}
.qr-scanner-close:hover { color: var(--c-text); }
.qr-scanner-body {
  position: relative; aspect-ratio: 4/3;
  background: #000;
}
.qr-scanner-body video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.qr-scanner-frame {
  position: absolute; inset: 16%;
  border: 3px solid var(--c-accent, #12A9E3);
  border-radius: 12px;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.35) inset;
}
@keyframes qr-pulse {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(0,0,0,.35) inset, 0 0 0 0 rgba(18,169,227,.5); }
  50% { box-shadow: 0 0 0 9999px rgba(0,0,0,.35) inset, 0 0 0 8px rgba(18,169,227,0); }
}
.qr-scanner-frame { animation: qr-pulse 2s ease-in-out infinite; }
.qr-scanner-status {
  padding: 12px 16px;
  font-size: 12px; color: var(--c-text-soft);
  text-align: center; border-top: 1px solid var(--c-border);
}

/* ============================================================
   Vista pública del equipo (QR sin login)
   ============================================================ */
.public-host {
  min-height: 100dvh;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(29,111,184,.15), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(24,169,153,.12), transparent 60%),
    var(--c-bg);
  padding: 24px 16px;
  color: var(--c-text);
}
.public-eq-wrap {
  max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
}
.public-eq-header {
  text-align: center; padding: 16px 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.public-eq-header img { filter: drop-shadow(0 4px 12px rgba(0,0,0,.3)); }
.public-eq-header h1 {
  font-size: 18px; margin: 0; font-weight: 600;
  letter-spacing: .3px;
}
.public-eq-card {
  background: var(--c-surface, #1a2230);
  border: 1px solid var(--c-border);
  border-radius: 12px; padding: 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.public-eq-eqhead {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--c-border);
}
.public-eq-pill {
  font-size: 11px; padding: 4px 10px; border-radius: 12px; font-weight: 600;
  text-transform: capitalize; white-space: nowrap;
}
.public-eq-kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; font-size: 13px; margin: 0; }
.public-eq-kv dt { color: var(--c-text-soft); font-weight: 500; font-size: 11px; align-self: center; }
.public-eq-kv dd { margin: 0; word-break: break-word; }
.public-eq-cta {
  background: linear-gradient(135deg, rgba(18,169,227,.08), rgba(7,135,240,.08));
  border: 1px solid rgba(18,169,227,.3);
  border-radius: 12px; padding: 18px; text-align: center;
}
.public-eq-cta h3 { color: var(--c-text); }
.public-eq-btn {
  background: linear-gradient(135deg, #12A9E3, #0787F0);
  color: #001318; border: 0; padding: 12px 28px;
  border-radius: 10px; font-weight: 600; font-size: 14px;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 4px 12px rgba(18,169,227,.3);
}
.public-eq-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(18,169,227,.5); }
.public-eq-btn:disabled { opacity: .5; cursor: not-allowed; }
.public-eq-btn--ghost {
  background: transparent; color: var(--c-text-soft);
  border: 1px solid var(--c-border); padding: 10px 18px; border-radius: 8px;
  cursor: pointer; font-size: 13px;
}
.public-eq-btn--ghost:hover { background: rgba(255,255,255,.04); }
.public-eq-form { display: flex; flex-direction: column; gap: 10px; }
.public-eq-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--c-text-soft);
}
.public-eq-form input, .public-eq-form select, .public-eq-form textarea {
  background: rgba(255,255,255,.04); border: 1px solid var(--c-border);
  color: var(--c-text); padding: 9px 12px; border-radius: 6px; font-size: 13px;
  font-family: inherit;
}
.public-eq-form input:focus, .public-eq-form select:focus, .public-eq-form textarea:focus {
  outline: none; border-color: var(--c-accent, #12A9E3);
  box-shadow: 0 0 0 3px rgba(18,169,227,.15);
}
.public-eq-check { flex-direction: row; align-items: center; gap: 8px; cursor: pointer; }
.public-eq-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.public-eq-result { margin-top: 12px; }
.public-eq-success {
  background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4);
  color: #86efac; padding: 12px; border-radius: 8px; font-size: 13px;
}
.public-eq-error {
  background: rgba(220,38,38,.12); border: 1px solid rgba(220,38,38,.4);
  color: #fca5a5; padding: 10px; border-radius: 6px; font-size: 12px;
}
.public-eq-info {
  font-size: 11px; color: var(--c-text-muted); padding: 12px;
  border-top: 1px solid var(--c-border); margin-top: 8px;
}
.public-eq-info p { margin: 6px 0 0; line-height: 1.5; }
.public-eq-footer { text-align: center; padding: 14px 0; }

/* Botón de navegación que el asistente sugiere al final de su respuesta.
   Aparece como una pill clickeable, separada del párrafo. */
.ai-go-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #12A9E3, #0787F0);
  color: #001318 !important;
  font-weight: 600;
  font-size: 12px;
  border-radius: 16px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 2px 6px rgba(18,169,227,.3);
}
.ai-go-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(18,169,227,.5);
  text-decoration: none;
}

.topbar__search { flex: 1; max-width: 520px; }
.topbar__search input { width: 100%; padding: 7px 12px; }
.topbar__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topbar__notif { position: relative; background: transparent; border: 0; cursor: pointer; padding: 6px 8px; font-size: 16px; }
.topbar__badge {
  position: absolute; top: 0; right: 0;
  background: var(--c-danger); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 1px 5px; border-radius: 10px;
}

/* HEADER_THEME_TOGGLE_V1 (2026-06-08) — toggle día/noche en topbar.
   Reutiliza .topbar__notif (background:transparent, border:0, padding 6px 8px)
   para mantener consistencia visual con QR y campana. Color suave en reposo,
   acento cyan en hover, anillo focus visible para accesibilidad.            */
.topbar__theme-toggle { color: var(--c-text-soft); transition: color .15s ease, background-color .15s ease; border-radius: 6px; }
.topbar__theme-toggle:hover { color: var(--ineq-cyan, #12A9E3); background: rgba(255,255,255,.06); }
[data-theme="light"] .topbar__theme-toggle:hover { background: rgba(7,135,240,.08); }
.topbar__theme-toggle:focus-visible { outline: 2px solid var(--ineq-cyan, #12A9E3); outline-offset: 2px; }
.topbar__theme-toggle svg { transition: transform .25s ease; display: block; }
@media (prefers-reduced-motion: reduce) { .topbar__theme-toggle svg { transition: none; } }
@media (max-width: 480px) { .topbar__theme-toggle { padding: 6px; } }

.page {
  grid-area: page;
  padding: 20px 24px 40px;
  overflow-x: auto;
}

/* Sidebar móvil */
@media (max-width: 880px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "page";
  }
  .sidebar {
    position: fixed; left: -100%; top: 0; bottom: 0;
    width: 80vw; max-width: 320px; height: 100dvh; z-index: 50;
    transition: left .2s;
    box-shadow: var(--shadow-2);
  }
  .app.is-sidebar-open .sidebar { left: 0; }
  .topbar__menu { display: inline-block; }

  /* ─────────────────────────────────────────────────────────────────────
     Mobile Hotfix A — neutralizar `is-sidebar-collapsed` (estado desktop
     persistido en localStorage). En móvil, el sidebar es drawer, NO debe
     comprimir el main a `60px 1fr` ni ocultar textos del drawer.
     Especificidad necesaria: las reglas base `.app.is-sidebar-collapsed`
     (línea ~730) tienen 2 selectores; replicamos misma especificidad.
     ───────────────────────────────────────────────────────────────────── */
  .app.is-sidebar-collapsed {
    grid-template-columns: 1fr;   /* anula `60px 1fr` */
  }
  /* Drawer móvil: textos + subitems siempre visibles, incluso si el
     usuario tenía sidebar colapsado en escritorio. */
  .app.is-sidebar-collapsed .sidebar__title,
  .app.is-sidebar-collapsed .nav-link__text,
  .app.is-sidebar-collapsed .nav-section,
  .app.is-sidebar-collapsed .nav-link__bullet,
  .app.is-sidebar-collapsed .nav-group__chev,
  .app.is-sidebar-collapsed .nav-group__items {
    display: revert;
  }
  .app.is-sidebar-collapsed .sidebar__brand {
    justify-content: flex-start;
    padding: 14px 16px;
  }
  .app.is-sidebar-collapsed .sidebar__logo-img { width: 40px; }
  .app.is-sidebar-collapsed .nav-link,
  .app.is-sidebar-collapsed .nav-group__head {
    justify-content: flex-start;
    padding: 10px 14px;
  }
  /* En móvil, el botón de collapse del sidebar no tiene sentido (drawer
     abre/cierra con hamburger). Lo ocultamos para evitar confusión. */
  .sidebar__collapse { display: none; }

  /* Evitar scroll horizontal global aunque alguna sección se desborde. */
  html, body { overflow-x: hidden; max-width: 100vw; }
  .app, .page { max-width: 100vw; }
}

/* ============================================================
   Page components: header, cards, tables
   ============================================================ */
.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.page-header h1 { margin: 0; font-size: 20px; font-weight: 600; }
.page-header__sub { color: var(--c-text-soft); font-size: 13px; margin-top: 4px; }
.page-header__actions { display: flex; gap: 8px; align-items: center; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 20px; }
.card {
  background: var(--ineq-bg-card);
  background-image: var(--ineq-gradient-card);
  border: 1px solid var(--ineq-border-soft);
  border-radius: var(--ineq-radius-md);
  padding: 16px 18px;
  box-shadow: var(--ineq-shadow-soft);
  transition: border-color var(--ineq-motion-base) var(--ineq-ease-standard), box-shadow var(--ineq-motion-base) var(--ineq-ease-standard), transform var(--ineq-motion-base) var(--ineq-ease-standard);
}
.card:hover { border-color: var(--ineq-border-medium); box-shadow: var(--ineq-shadow-card), var(--ineq-glow-cyan); }
.card__label { font-size: 11.5px; color: var(--ineq-text-muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.card__value { font-size: 26px; font-weight: 700; margin-top: 6px; color: var(--ineq-text-primary); letter-spacing: -0.02em; }
.card__delta { font-size: 12px; margin-top: 2px; }
.card__delta--up { color: var(--c-success); }
.card__delta--down { color: var(--c-danger); }

.panel {
  background: var(--ineq-bg-panel);
  border: 1px solid var(--ineq-border-soft);
  border-radius: var(--ineq-radius-md);
  padding: 18px;
  box-shadow: var(--ineq-shadow-soft);
  margin-bottom: 16px;
}
.panel__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 8px; flex-wrap: wrap; }
.panel__title { font-size: 14px; font-weight: 600; margin: 0; }

.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar input[type="search"], .toolbar select { min-width: 160px; }

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ineq-border-soft);
  border-radius: var(--ineq-radius-md);
  background: var(--ineq-bg-card);
  max-width: 100%;
  /* QA-A 2026-05-22 — max-height para scroll interno en Top 5 equipos / Top 5 técnicos */
  max-height: 60vh;
}
table.data {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
table.data th, table.data td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--ineq-border-soft); white-space: nowrap; }
table.data th { background: var(--ineq-bg-panel); font-weight: 600; color: var(--ineq-text-secondary); position: sticky; top: 0; z-index: 1; letter-spacing: .02em; }
table.data tr { transition: background-color var(--ineq-motion-fast) var(--ineq-ease-standard); }
table.data tr:hover td { background: rgba(18,169,227,.04); }
table.data .col-actions { text-align: right; width: 1%; }
table.data tbody tr.row-clickable { cursor: pointer; }

.empty {
  padding: 32px; text-align: center; color: var(--c-text-muted);
}

/* Pills / badges semánticos */
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.6;
  background: rgba(255,255,255,0.04); color: var(--ineq-text-secondary);
  border: 1px solid var(--ineq-border-soft);
}
.pill--brand { background: rgba(18,169,227,.12); color: var(--ineq-cyan); border-color: var(--ineq-border-medium); }
.pill--info { background: rgba(7,135,240,.14); color: #6FA9FF; border-color: rgba(7,135,240,.30); }
.pill--success { background: rgba(34,197,94,.12); color: #4ADE80; border-color: rgba(34,197,94,.28); }
.pill--warning { background: rgba(245,158,11,.14); color: #FBBF24; border-color: rgba(245,158,11,.30); }
.pill--danger { background: rgba(239,68,68,.12); color: #FCA5A5; border-color: rgba(239,68,68,.30); }
.pill--purple { background: rgba(139,92,246,.14); color: #C4B5FD; border-color: rgba(139,92,246,.30); }
.pill--muted { background: rgba(255,255,255,0.04); color: var(--ineq-text-muted); }

/* Indicadores de estado de ticket */
.status { display: inline-flex; align-items: center; gap: 6px; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-text-muted); }
.status--nuevo::before { background: var(--c-st-nuevo); }
.status--asignado::before { background: var(--c-st-asignado); }
.status--en_proceso::before, .status--en_ruta::before, .status--en_sitio::before { background: var(--c-st-en-proceso); }
.status--pendiente_cliente::before, .status--pendiente_repuesto::before,
.status--pendiente_proveedor::before, .status--pendiente_fabrica::before { background: var(--c-st-pendiente); }
.status--resuelto::before, .status--en_revision::before { background: var(--c-st-resuelto); }
.status--cerrado::before { background: var(--c-st-cerrado); }
.status--reabierto::before { background: var(--c-st-reabierto); }
.status--vencido::before { background: var(--c-st-vencido); }

/* Disponibilidad técnica */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-text-muted); }
.dot--available { background: var(--c-success); }
.dot--busy { background: var(--c-warning); }
.dot--unavailable { background: var(--c-danger); }

/* ============================================================
   Modal
   ============================================================ */
.modal {
  border: 1px solid var(--ineq-border-soft);
  border-radius: var(--ineq-radius-lg);
  padding: 0;
  max-width: min(960px, 96vw);
  width: 100%;
  background: var(--ineq-bg-panel);
  color: var(--ineq-text-primary);
  box-shadow: var(--ineq-shadow-card);
  animation: ineq-modal-in var(--ineq-motion-base) var(--ineq-ease-standard);
}
@keyframes ineq-modal-in {
  from { opacity: 0; transform: scale(.98); }
  to   { opacity: 1; transform: scale(1); }
}
/* Modal en variante "compact" para confirmaciones / formularios chicos */
.modal.modal--compact { max-width: min(520px, 96vw); }
.modal.modal--delivery-receipt {
  width: min(900px, 92vw);
  max-width: min(900px, 92vw);
}
.modal.modal--delivery-receipt .modal__inner {
  max-height: 85vh;
}
.modal.modal--delivery-receipt .modal__body {
  overflow-y: auto;
  padding-bottom: 24px;
}
.modal.modal--delivery-receipt .modal__footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .modal.modal--delivery-receipt {
    width: 94vw;
    max-width: 94vw;
  }
}
.modal.modal--delivery-receipt .typeahead {
  position: relative;
  z-index: 2;
}
.modal.modal--delivery-receipt .typeahead--open {
  z-index: 20;
}
.modal.modal--delivery-receipt .typeahead__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin-top: 0;
  max-height: min(320px, 38vh);
  overflow-y: auto;
  z-index: 30;
}
.modal.modal--delivery-receipt .typeahead__item {
  padding: 10px 12px;
}
.modal.modal--delivery-receipt .typeahead__item__sub {
  font-size: 11.5px;
  line-height: 1.35;
}
.modal.modal--delivery-receipt .dr-selected-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  max-height: 190px;
  overflow: auto;
  padding-right: 2px;
}
.modal.modal--delivery-receipt .dr-selected-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 104px 30px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--c-border, #2b2b2b);
  border-radius: 8px;
  background: var(--c-surface-2, #1a1a1a);
}
.modal.modal--delivery-receipt .dr-selected-row__info { min-width: 0; }
.modal.modal--delivery-receipt .dr-selected-row__title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal.modal--delivery-receipt .dr-selected-row__meta {
  font-size: 11px;
  color: var(--c-text-soft, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal.modal--delivery-receipt .dr-selected-qty,
.modal.modal--delivery-receipt .dr-selected-unit {
  min-height: 30px;
  padding: 4px 7px;
}
.modal.modal--delivery-receipt .dr-selected-qty { text-align: right; }
.modal.modal--delivery-receipt .dr-selected-remove {
  width: 28px;
  height: 28px;
  border: 1px solid var(--c-border, #2b2b2b);
  border-radius: 6px;
  background: transparent;
  color: var(--c-text-soft, #94a3b8);
  cursor: pointer;
  line-height: 1;
  font-weight: 700;
}
.delivery-receipt-modal-open .qa-feedback-fab,
.delivery-receipt-modal-open .qa-report-button {
  right: 22px !important;
  bottom: 18px !important;
}
[data-theme="light"] .modal.modal--delivery-receipt .typeahead__list {
  background: #ffffff;
  color: #0f172a;
  border-color: #bfdbfe;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
}
[data-theme="light"] .modal.modal--delivery-receipt .typeahead__item {
  color: #0f172a;
  border-bottom-color: #e5e7eb;
}
[data-theme="light"] .modal.modal--delivery-receipt .typeahead__item:hover,
[data-theme="light"] .modal.modal--delivery-receipt .typeahead__item--active {
  background: #e0f2fe;
  color: #075985;
}
[data-theme="light"] .modal.modal--delivery-receipt .typeahead__item__sub,
[data-theme="light"] .modal.modal--delivery-receipt .typeahead__empty {
  color: #475569;
  opacity: 1;
}
[data-theme="light"] .modal.modal--delivery-receipt .typeahead__clear:hover {
  background: #e0f2fe;
  color: #075985;
}
[data-theme="light"] .modal.modal--delivery-receipt .dr-selected-row {
  background: #f8fafc;
  border-color: #cbd5e1;
}
[data-theme="light"] .modal.modal--delivery-receipt .dr-selected-row__meta {
  color: #64748b;
}
[data-theme="light"] .modal.modal--delivery-receipt .dr-selected-remove {
  border-color: #cbd5e1;
  color: #64748b;
}
[data-theme="light"] .modal.modal--delivery-receipt .dr-selected-remove:hover {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}
@media (max-width: 640px) {
  .modal.modal--delivery-receipt .dr-selected-row {
    grid-template-columns: minmax(0, 1fr) 64px 92px 30px;
  }
}

/* Formulario "Nueva solicitud" — secciones amplias y grid responsivo.
   Override del .fieldset por defecto que ponía los hijos en columnas. */
/* Native <select> + <option> dark-mode contrast.
   En Windows/Chrome los <option> usan colores del SO si no se fuerzan; sin esto el
   texto al desplegar queda casi invisible sobre el fondo claro del menú nativo. */
select option {
  background-color: #0f1729;
  color: #e6edf7;
  padding: 6px 8px;
}
select option:checked,
select option:hover {
  background-color: #12A9E3;
  color: #fff;
}
select optgroup { color: #94a3b8; font-style: normal; font-weight: 600; }
[data-theme="light"] select option {
  background-color: #ffffff;
  color: #0f172a;
}
[data-theme="light"] select option:checked,
[data-theme="light"] select option:hover {
  background-color: #e0f2fe;
  color: #075985;
}

/* ============================================================
   Typeahead — input con sugerencias en vivo (cliente, sede, área, equipo)
   ============================================================ */
.typeahead { position: relative; width: 100%; }
.typeahead__wrap { position: relative; display: block; }
.typeahead__input {
  width: 100%;
  padding-right: 28px !important;  /* espacio para el ✕ */
}
.typeahead--has-edit .typeahead__input { padding-right: 56px !important; }  /* + botón editar */
.typeahead__clear {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border: 0; background: transparent;
  color: var(--c-text-soft);
  cursor: pointer; font-size: 16px; line-height: 1;
  border-radius: 4px;
  display: none;
  align-items: center; justify-content: center;
}
.typeahead--has-value .typeahead__clear { display: flex; }
.typeahead__clear:hover { background: rgba(255,255,255,.08); color: #fff; }
.typeahead__edit {
  position: absolute;
  right: 30px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border: 0; background: transparent;
  color: var(--c-text-soft);
  cursor: pointer; line-height: 1;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.typeahead__edit:hover { background: rgba(18,169,227,.15); color: #12A9E3; }
.typeahead__edit:disabled { opacity: .35; cursor: not-allowed; }
.typeahead__edit:disabled:hover { background: transparent; color: var(--c-text-soft); }
.typeahead__list {
  position: absolute;
  top: calc(100% + 2px); left: 0; right: 0;
  z-index: 1000;
  max-height: 280px; overflow-y: auto;
  background: #0f1729;
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  display: none;
}
.typeahead--open .typeahead__list { display: block; }
.typeahead__item {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: #e6edf7;
}
.typeahead__item:last-child { border-bottom: 0; }
.typeahead__item:hover,
.typeahead__item--active {
  background: rgba(18,169,227,.18);
  color: #fff;
}
.typeahead__item__sub {
  font-size: 11px;
  opacity: .65;
  margin-top: 2px;
}
.typeahead__item mark {
  background: rgba(18,169,227,.35);
  color: #fff;
  padding: 0 2px;
  border-radius: 2px;
}
.typeahead__empty {
  padding: 14px;
  font-size: 12px;
  opacity: .65;
  text-align: center;
}
[data-theme="light"] .typeahead__list {
  background: #ffffff;
  color: #111827;
  border-color: #D1D5DB;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
}
[data-theme="light"] .typeahead__item {
  color: #111827;
  border-bottom-color: #E5E7EB;
}
[data-theme="light"] .typeahead__item:hover,
[data-theme="light"] .typeahead__item--active {
  background: #EFF6FF;
  color: #075985;
}
[data-theme="light"] .typeahead__item__sub,
[data-theme="light"] .typeahead__empty {
  color: #4B5563;
  opacity: 1;
}
[data-theme="light"] .typeahead__item mark {
  background: #BAE6FD;
  color: #075985;
}
[data-theme="light"] .typeahead__clear:hover {
  background: #EFF6FF;
  color: #075985;
}

.nr-form { display: block !important; }
.nr-form .nr-section {
  background: var(--c-surface-2, rgba(255,255,255,.02));
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 14px 16px 4px;
  margin-bottom: 12px;
  display: block;
}
.nr-form .nr-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--c-accent, #12A9E3); font-weight: 600;
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--c-border);
}
.nr-form .nr-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nr-form .nr-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.nr-form .field { margin-bottom: 10px; }
.nr-form .field__label { font-size: 12px; font-weight: 500; }
.nr-form .req { color: var(--c-danger, #dc2626); margin-left: 2px; }
.nr-form input[type="text"], .nr-form input[type="tel"], .nr-form select, .nr-form textarea {
  width: 100%; padding: 8px 10px; font-size: 14px;
  background: rgba(255,255,255,.04); color: inherit;
  border: 1px solid var(--c-border); border-radius: 6px;
  font-family: inherit;
}
.nr-form input:focus, .nr-form select:focus, .nr-form textarea:focus {
  outline: 2px solid var(--c-accent, #12A9E3); outline-offset: -1px;
}
.nr-form textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.nr-form .nr-checkbox { padding-top: 0; }
/* ── Selector visual de canal (Sprint 2A) ──────────────────────────────── */
/* 2026-05-18: cambiado de flex 1x4 → grid 2x2 por pedido de Sergio. En móvil
   (<=480px) cae a 1 columna para evitar botones apretados con ícono+texto. */
.nr-channel-picker {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.nr-channel-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 9px 6px; border-radius: 8px;
  border: 1px solid var(--c-border); background: rgba(255,255,255,.03);
  cursor: pointer; min-width: 0;
  font-size: 11px; font-weight: 500; color: var(--c-text-soft);
  transition: border-color .15s, background .15s, color .15s;
  user-select: none; position: relative;
}
@media (max-width: 480px) {
  .nr-channel-picker { grid-template-columns: 1fr; }
}
.nr-channel-btn input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.nr-channel-btn:has(input:checked) {
  border-color: rgba(18,169,227,.45); background: rgba(18,169,227,.1);
  color: var(--ineq-cyan, #12A9E3);
}
.nr-channel-btn:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.nr-channel-btn:has(input:checked):hover { border-color: rgba(18,169,227,.6); }
.nr-channel-btn:focus-within {
  outline: 2px solid var(--c-accent, #12A9E3); outline-offset: 2px;
}
@media (max-width: 720px) {
  .nr-form .nr-grid-2, .nr-form .nr-grid-3 { grid-template-columns: 1fr; }
}
.modal::backdrop { background: rgba(13, 22, 35, .55); backdrop-filter: blur(2px); }
.modal__inner { display: flex; flex-direction: column; max-height: 85dvh; }
.modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--c-border);
}
.modal__title { margin: 0; font-size: 16px; font-weight: 600; }
.modal__close { background: transparent; border: 0; font-size: 22px; cursor: pointer; color: var(--c-text-muted); }
.modal__body { padding: 16px; overflow-y: auto; }
.modal__body .fieldset { margin-bottom: 12px; }
.modal__footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 16px; border-top: 1px solid var(--c-border);
  background: var(--c-surface-2);
}

/* ============================================================
   Toasts
   ============================================================ */
.toasts {
  position: fixed; bottom: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 200;
}
.toast {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-brand);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  max-width: 360px;
  font-size: 13.5px;
  animation: toastIn .18s ease-out;
}
.toast--success { border-left-color: var(--c-success); }
.toast--error { border-left-color: var(--c-danger); }
.toast--warning { border-left-color: var(--c-warning); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Detalle de ticket — pestañas
   ============================================================ */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-border); margin-bottom: 12px; flex-wrap: wrap; }
.tab {
  padding: 8px 14px; cursor: pointer;
  border: 0; background: transparent; color: var(--c-text-soft);
  border-bottom: 2px solid transparent;
  font: inherit; font-weight: 500;
}
.tab.active { color: var(--c-brand); border-bottom-color: var(--c-brand); }

.kv { display: grid; grid-template-columns: 160px 1fr; gap: 6px 12px; align-items: baseline; }
.kv > dt { color: var(--c-text-soft); font-size: 12.5px; }
.kv > dd { margin: 0; font-size: 13.5px; }

/* Chat interno */
.chat { display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow-y: auto; padding-right: 4px; }
.chat__msg {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
}
.chat__msg--internal { background: rgba(45,125,246,.06); border-color: rgba(45,125,246,.18); }
.chat__msg--client { background: rgba(26,162,96,.06); border-color: rgba(26,162,96,.18); }
.chat__meta { font-size: 11.5px; color: var(--c-text-muted); margin-bottom: 2px; display: flex; gap: 8px; align-items: center; }
.chat__form { display: flex; gap: 6px; margin-top: 12px; }
.chat__form textarea { min-height: 56px; }
.chat__body { line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.chat__link { color: var(--c-accent); text-decoration: underline; word-break: break-all; }
.chat__link:hover { opacity: .8; }
.chat-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 10px;
  font-size: 10px; font-weight: 700; vertical-align: middle; margin-left: 3px;
  background: rgba(18,169,227,.2); color: var(--ineq-cyan, #12A9E3);
}

/* 404 */
.not-found {
  min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: 24px;
  background: var(--c-bg);
}
.not-found__panel { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.not-found h1 { font-size: 64px; margin: 0; color: var(--c-brand); }

/* Utilidades */
.text-soft { color: var(--c-text-soft); }
.text-muted { color: var(--c-text-muted); }
.text-mono { font-family: var(--font-mono); font-size: 12.5px; }
.text-right { text-align: right; }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; }
.w-full { width: 100%; }
.hidden { display: none !important; }

/* ============================================================
   Scrollbars sobrios (dark theme)
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ineq-bg-app); }
::-webkit-scrollbar-thumb { background: rgba(18,169,227,.18); border-radius: 999px; border: 2px solid var(--ineq-bg-app); }
::-webkit-scrollbar-thumb:hover { background: rgba(18,169,227,.32); }

/* ============================================================
   Accesibilidad: prefers-reduced-motion
   Mantener feedback funcional, suprimir animaciones decorativas.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* uploadService — drag&drop visual hover en secciones de evidencias.
   Aplicado por `attachDropZone` (clase configurable, default `ev-dropzone-hover`). */
.ev-phase-section {
  position: relative;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ev-phase-section.ev-dropzone-hover {
  border-color: var(--ineq-cyan, #12A9E3) !important;
  background: rgba(var(--ineq-cyan-rgb, 18, 169, 227), 0.06) !important;
  box-shadow: 0 0 0 2px rgba(var(--ineq-cyan-rgb, 18, 169, 227), 0.25) inset;
}
.ev-phase-section::after {
  content: "Soltar aquí para agregar evidencia";
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(var(--ineq-cyan-rgb, 18, 169, 227), 0.10);
  color: var(--ineq-cyan, #12A9E3);
  font-weight: 600;
  font-size: 13px;
  border-radius: 8px;
  pointer-events: none;
  z-index: 2;
}
.ev-phase-section.ev-dropzone-hover::after { display: flex; }

/* BackButton estándar — `← Volver` arriba a la izquierda del header de detalle.
   Estilo discreto, no compite con acciones primarias a la derecha. */
.btn-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--c-border, rgba(255,255,255,.08));
  color: var(--ineq-text-secondary, #94a3b8);
  padding: 6px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background-color .12s, color .12s, border-color .12s;
  font-family: inherit;
}
.btn-back:hover {
  background: rgba(18,169,227, 0.08);
  color: var(--ineq-text-primary, #fff);
  border-color: rgba(18,169,227, 0.4);
  text-decoration: none;
}
.btn-back__arrow { display: inline-block; font-size: 15px; line-height: 1; }

/* Modal "Detalle técnico de la orden" — variante ancha con secciones tipo card.
   Se aplica al <dialog id="modal"> agregando la clase `modal--workorder`
   antes de invocar showModal() y removiéndola al cerrar. Coexiste con otros
   modales (compact, delivery-receipt) sin afectarlos. */
.modal.modal--workorder {
  width: min(900px, 92vw);
  max-width: min(900px, 92vw);
}
.modal.modal--workorder .modal__inner { max-height: 88vh; }
.modal.modal--workorder .modal__body { overflow-y: auto; padding-bottom: 16px; }
/* Forzar layout vertical: el `.fieldset` por defecto usa grid auto-fit que
   acomoda las secciones en columnas. En este modal queremos cada sección
   ocupando ancho completo, una debajo de la otra. */
.modal.modal--workorder .fieldset { display: block; }

.wo-section {
  border: 1px solid var(--c-border, rgba(255,255,255,.08));
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: rgba(255,255,255,.02);
}
.wo-section__title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ineq-text-primary, #fff);
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.wo-section__title .wo-section__hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--ineq-text-secondary, #94a3b8);
}
.wo-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
@media (max-width: 640px) {
  .wo-grid-2 { grid-template-columns: 1fr; }
}
.wo-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 16px;
  font-size: 13px;
}
.wo-summary__item { display: flex; flex-direction: column; gap: 2px; }
.wo-summary__label {
  font-size: 11px;
  color: var(--ineq-text-secondary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.wo-summary__value { color: var(--ineq-text-primary, #fff); font-weight: 500; }
.wo-evidence-counters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  margin-bottom: 6px;
}
.wo-evidence-counter {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(18,169,227, 0.08);
  border: 1px solid rgba(18,169,227, 0.25);
  color: var(--ineq-text-primary, #fff);
}
.wo-evidence-counter strong { color: #12A9E3; margin-right: 4px; }
.wo-note {
  margin-top: 4px;
  padding: 10px 12px;
  background: rgba(245, 166, 35, 0.06);
  border: 1px solid rgba(245, 166, 35, 0.25);
  border-left: 3px solid #f5a623;
  border-radius: 6px;
  font-size: 12px;
  color: var(--ineq-text-secondary, #94a3b8);
  line-height: 1.45;
}
.wo-readonly {
  font-size: 13px;
  color: var(--ineq-text-secondary, #94a3b8);
  font-style: italic;
  padding: 4px 0;
}
.wo-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}
@media (max-width: 640px) {
  .wo-checks { grid-template-columns: 1fr; }
}
.wo-checks label {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  padding: 4px 0;
}

/* Template Visual Editor Pilot */
.template-visual-header .page-header__sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.template-visual-shell {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(420px, 1fr) minmax(260px, 320px);
  gap: 12px;
  align-items: start;
}
.template-visual-sidebar,
.template-visual-props {
  position: sticky;
  top: calc(var(--topbar-h, 64px) + 12px);
  max-height: calc(100vh - var(--topbar-h, 64px) - 24px);
  overflow: auto;
  padding: 10px;
}
.template-visual-panel-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ineq-text-muted);
  font-weight: 700;
  margin-bottom: 8px;
}
.template-visual-section-list,
.template-visual-prop-stack { display: grid; gap: 8px; }
.template-visual-section-card {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  background: rgba(255,255,255,.035);
  cursor: pointer;
}
.template-visual-section-card.is-active {
  border-color: var(--c-accent, #12A9E3);
  box-shadow: 0 0 0 1px rgba(18,169,227,.25);
  background: rgba(18,169,227,.08);
}
.template-visual-section-card__main { display: grid; gap: 2px; min-width: 0; }
.template-visual-section-card__main strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.template-visual-section-card__actions { display: inline-flex; gap: 3px; }
.template-visual-section-card__actions button,
.template-visual-doc-field__actions button {
  width: 24px;
  height: 24px;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  background: rgba(255,255,255,.04);
  color: inherit;
  cursor: pointer;
  line-height: 1;
}
.template-visual-section-card__actions button:disabled,
.template-visual-doc-field__actions button:disabled { opacity: .35; cursor: not-allowed; }
.template-visual-toolbar {
  padding: 8px 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.template-visual-stage { min-width: 0; }
.template-visual-paper {
  width: min(100%, 216mm);
  min-height: 279mm;
  margin: 0 auto 32px;
  padding: 14mm;
  background: #fff;
  color: #111;
  border-radius: 2px;
  box-shadow: 0 14px 36px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.08);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.4;
}
.template-visual-preview-note {
  margin: -4mm 0 6mm;
  padding: 6px 8px;
  background: #eef7fb;
  color: #245;
  border: 1px solid #b7dce8;
  border-radius: 4px;
  font-size: 11px;
}
.template-visual-doc-section {
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 7px;
  margin: 0 0 8px;
  cursor: pointer;
}
.template-visual-doc-section.is-selected {
  border-color: #13a7c7;
  background: rgba(19,167,199,.08);
}
.template-visual-doc-section.is-hidden,
.template-visual-doc-field.is-hidden { opacity: .42; }
.template-visual-doc-section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px solid #cbd7e3;
  margin-bottom: 7px;
  padding-bottom: 3px;
}
.template-visual-doc-section__head h2 {
  margin: 0;
  font-size: 12px;
  color: #25384b;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.template-visual-doc-section__head span { color: #607083; font-size: 10px; }
.template-visual-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.template-visual-doc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.template-visual-doc-field {
  border: 1px solid #d8e1eb;
  border-radius: 5px;
  padding: 6px;
  position: relative;
  min-height: 52px;
  background: #fff;
  cursor: pointer;
}
.template-visual-doc-field.is-selected {
  border-color: #13a7c7;
  box-shadow: 0 0 0 1px rgba(19,167,199,.4);
}
.template-visual-doc-field__actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 2px;
}
.template-visual-doc-field__actions button {
  width: 20px;
  height: 20px;
  color: #173145;
  background: #f3f8fb;
  border-color: #c8d6e2;
}
.template-visual-doc-field__label {
  padding-right: 70px;
  font-size: 9px;
  color: #5c6c7d;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
}
.template-visual-doc-field__token {
  margin-top: 3px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  color: #111;
  word-break: break-word;
}
.template-visual-props .field { margin: 0; }
.template-visual-props input,
.template-visual-props select { width: 100%; }

@media (max-width: 1180px) {
  .template-visual-shell { grid-template-columns: 1fr; }
  .template-visual-sidebar,
  .template-visual-props { position: static; max-height: none; }
  .template-visual-paper { width: 100%; min-height: auto; padding: 10mm; }
}

/* ============================================================
   Sprint Mobile A — Base responsive global (2026-05-15)
   Breakpoint 720px: cuando la pantalla está apretada, layout
   pasa a una columna, sidebar a drawer overlay, modales a ancho
   completo, formularios a 1 columna, tablas con scroll horizontal,
   targets táctiles ≥ 40px alto. NO toca escritorio (>720px queda igual).
   ============================================================ */

/* Overlay que oscurece el contenido cuando el sidebar está abierto en móvil.
   Solo aparece bajo el breakpoint 880px (donde el sidebar es drawer) Y
   cuando .app tiene clase .is-sidebar-open. Click sobre overlay → cierra. */
@media (max-width: 880px) {
  .app.is-sidebar-open::before {
    content: "";
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 49;
    cursor: pointer;
  }
  /* Sidebar por encima del overlay */
  .app.is-sidebar-open .sidebar { z-index: 50; }
}

@media (max-width: 720px) {
  /* Page padding compacto */
  .page { padding: 12px 12px 64px; overflow-x: hidden; }

  /* Header de página: título y acciones se apilan */
  .page-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-header h1 { font-size: 18px; line-height: 1.25; }
  .page-header__sub { font-size: 12px; }
  .page-header__actions {
    flex-wrap: wrap; gap: 6px;
    width: 100%;
  }
  .page-header__actions .btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    font-size: 12.5px;
    padding: 9px 10px;
    min-height: 40px;
  }
  .page-header__actions .btn--primary {
    flex: 1 1 100%;
  }

  /* Tabs: scroll horizontal sin wrap, sin que el contenedor explote */
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .tabs .tab {
    white-space: nowrap;
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: 13px;
    min-height: 40px;
  }

  /* Panels más compactos */
  .panel { padding: 12px 12px; }
  .panel__header { gap: 6px; flex-wrap: wrap; }
  .panel__title { font-size: 14px; }

  /* Cards del dashboard apiladas a 1 columna */
  .cards { grid-template-columns: 1fr; gap: 10px; }
  .card { padding: 12px 14px; }
  .card__value { font-size: 22px; }

  /* Definition lists: clave arriba, valor abajo, una columna */
  dl.kv { grid-template-columns: 1fr; gap: 4px; }
  dl.kv dt { font-size: 11.5px; color: var(--c-text-soft); margin-top: 8px; }
  dl.kv dt:first-child { margin-top: 0; }
  dl.kv dd { font-size: 13.5px; margin: 0; line-height: 1.45; }

  /* Forms: una columna, inputs táctiles */
  .fieldset { grid-template-columns: 1fr; gap: 10px; }
  .wo-grid-2 { grid-template-columns: 1fr; gap: 10px; }
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="tel"],
  .field input[type="number"],
  .field input[type="datetime-local"],
  .field input[type="date"],
  .field input[type="password"],
  .field select,
  .field textarea,
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="datetime-local"],
  select,
  textarea {
    min-height: 42px;
    font-size: 14.5px;
    padding: 10px 12px;
  }
  textarea { min-height: 80px; }
  .btn { min-height: 40px; padding: 10px 14px; font-size: 13.5px; }
  .btn--sm { min-height: 34px; padding: 7px 12px; font-size: 12.5px; }

  /* Modal nativo a ancho completo con scroll interno */
  dialog#modal,
  dialog.modal,
  dialog {
    width: calc(100vw - 16px);
    max-width: none;
    max-height: calc(100dvh - 24px);
    margin: 12px auto;
    padding: 16px;
    border-radius: 10px;
  }
  dialog#modal form,
  dialog form { gap: 10px; }

  /* Tablas: forzar contenedor a scroll horizontal — la tabla nunca debe
     hacer que la página entera tenga scroll. Mobile Hotfix A: el selector
     real del componente es `.dt__wrap` (no `.dt__container`). Mantengo
     ambos para compatibilidad con otros wrappers que sí usan ese nombre. */
  .table-wrap, .dt__wrap, .dt__container, .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .table-wrap table,
  .dt__wrap table,
  .dt__container table,
  .data-table {
    min-width: 640px;
  }

  /* Topbar compacto */
  .topbar { padding: 0 8px; gap: 6px; }
  .topbar__search { display: none; }
  .topbar__user-meta { display: none; }
  .topbar__user-chev { display: none; }
  .topbar__menu { min-width: 38px; min-height: 38px; }

  /* Chat interno y mensajes: usar ancho completo */
  .chat { max-width: 100%; }
  .chat__form { flex-direction: column; gap: 8px; }
  .chat__form textarea { width: 100%; }
  .chat__form .btn { width: 100%; }

  /* AI chat widget en móvil: ancho casi total, no fijo */
  .ai-chat-panel {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    height: calc(100dvh - 80px) !important;
    right: 8px !important;
    bottom: 8px !important;
  }

  /* Mobile Hotfix A — FAB AI/QA en móvil: reducir tamaño + safe area
     + bajar z-index para que NO tape acciones críticas del header.
     z-index < 49 (overlay del drawer) y < 50 (modales). */
  .ai-fab {
    width: 44px; height: 44px; border-radius: 22px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
  }
  .ai-panel {
    width: calc(100vw - 16px); max-width: none;
    height: calc(100dvh - 96px); max-height: calc(100dvh - 96px);
    right: 8px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  .qa-feedback-fab {
    min-width: 108px; height: 30px;
    right: 12px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
  }
  .qa-audit-fab {
    min-width: 38px; height: 30px;
    right: 12px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    /* En móvil bajamos z-index drásticamente — el FAB QA no debe tapar
       modal ni drawer. Sigue por encima del contenido normal. */
    z-index: 40;
  }
  .qa-audit-fab--legacy {
    bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }
  .qa-audit-panel {
    width: calc(100vw - 16px); max-width: none;
    right: 8px;
    bottom: calc(144px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 180px);
    z-index: 40;
  }

  /* Notificaciones popover móvil */
  .notif-panel,
  .availability-popover {
    width: calc(100vw - 16px) !important;
    right: 8px !important;
  }

  /* Cuando el modal de detalle técnico está abierto, ajustarlo también */
  dialog.modal--workorder {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 16px);
    margin: 6px auto;
    padding: 14px;
  }

  /* wo-section spacing más compacto */
  .wo-section { padding: 10px 0; }
  .wo-section__title { font-size: 13px; }
  .wo-summary { grid-template-columns: 1fr; }

  /* Sidebar drawer: ancho cómodo en móvil chico */
  .sidebar { width: 84vw; max-width: 320px; }

  /* Evitar overflow horizontal global */
  html, body { max-width: 100vw; overflow-x: hidden; }

  /* Evidence cards en móvil */
  .att-card { padding: 8px; }
  .att-card img { height: 120px; }

  /* Avatares más pequeños en topbar móvil */
  .topbar__avatar-wrap { transform: scale(.85); }
}

/* Móvil muy pequeño (≤ 380px): apretar todavía más */
@media (max-width: 380px) {
  .page { padding: 10px 10px 56px; }
  .page-header h1 { font-size: 16px; }
  .panel { padding: 10px; }
  .card__value { font-size: 20px; }
  .page-header__actions .btn { flex: 1 1 100%; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Sprint Dictado Universal — botón Dictar reutilizable + estados móviles
   ═════════════════════════════════════════════════════════════════════════ */

.dict-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  flex-wrap: wrap;
}

.btn-dict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12.5px;
  line-height: 1;
  background: rgba(17, 184, 214, .08);
  color: var(--c-accent, #12A9E3);
  border: 1px solid rgba(17, 184, 214, .35);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn-dict:hover {
  background: rgba(17, 184, 214, .15);
  border-color: rgba(17, 184, 214, .55);
}
.btn-dict:active { transform: translateY(1px); }
.btn-dict:focus-visible {
  outline: 2px solid var(--c-accent, #12A9E3);
  outline-offset: 2px;
}

.btn-dict__icon { display: inline-flex; }
.btn-dict__label { font-weight: 500; }

/* Estado escuchando — pulso rojo */
.btn-dict--listening {
  background: rgba(239, 68, 68, .12);
  color: #ef4444;
  border-color: rgba(239, 68, 68, .55);
  animation: btn-dict-pulse 1.4s ease-in-out infinite;
}
.btn-dict--listening:hover {
  background: rgba(239, 68, 68, .2);
  border-color: rgba(239, 68, 68, .75);
}
@keyframes btn-dict-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .35); }
  50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* Estado no compatible — gris, NO not-allowed: ahora actúa como "Usar teclado" */
.btn-dict--unsupported {
  background: rgba(127, 127, 127, .08);
  color: var(--c-text-soft, #888);
  border-color: rgba(127, 127, 127, .35);
  cursor: pointer;
  opacity: .9;
}
.btn-dict--unsupported:hover {
  background: rgba(127, 127, 127, .14);
  color: var(--c-text);
}

/* Hotfix Dictado Móvil A.2 — estado "keyboard": el dictado web falló pero
   el textarea queda enfocable para usar el micrófono del teclado del SO. */
.btn-dict--keyboard {
  background: rgba(245, 184, 0, .10);
  color: #d97706;
  border-color: rgba(245, 184, 0, .45);
  cursor: pointer;
}
.btn-dict--keyboard:hover {
  background: rgba(245, 184, 0, .20);
  color: #b45309;
}
[data-theme="dark"] .btn-dict--keyboard {
  background: rgba(245, 184, 0, .14);
  color: #fbbf24;
  border-color: rgba(245, 184, 0, .50);
}

/* Hint móvil debajo del botón */
.btn-dict__hint {
  display: block;
  flex-basis: 100%;
  font-size: 11px;
  color: var(--c-text-soft, #888);
  margin-top: 2px;
  line-height: 1.35;
}
/* Variante móvil-only: oculta en desktop, visible en móvil */
.btn-dict__hint--mobile { display: none; }

/* Hotfix Dictado Móvil A.4 — hint full-width estilizado debajo del textarea.
   Aparece amber discreto, ocupa todo el ancho disponible (no queda en columna
   estrecha lateral). Visible en móvil y desktop cuando aplica. */
.btn-dict__hint--block,
.nr-dict-hint,
.wo-dict-hint {
  display: block;
  width: 100%;
  font-size: 12px;
  color: var(--c-text-soft, #888);
  margin-top: 6px;
  line-height: 1.4;
  padding: 6px 10px;
  background: rgba(245, 184, 0, .08);
  border-left: 3px solid rgba(245, 184, 0, .55);
  border-radius: 4px;
}

/* Hotfix A.4 — botón "Probar micrófono" oculto en móvil. Es diagnóstico
   técnico para desktop / QA, no debe verse como acción regular en móvil
   (confunde al usuario y abre modal de diagnóstico con mensaje técnico). */
@media (max-width: 720px) {
  .mic-test-btn { display: none !important; }
}

/* Móvil: botón más grande para tap fácil + hint móvil visible */
@media (max-width: 720px) {
  .btn-dict {
    padding: 9px 14px;
    font-size: 13.5px;
    min-height: 40px;
  }
  .dict-toolbar { margin: 6px 0 10px; gap: 6px; }
  .btn-dict__hint { font-size: 11.5px; }
  .btn-dict__hint--mobile { display: block; }
  /* Hints full-width: en móvil aumentamos un poco la fuente */
  .btn-dict__hint--block,
  .nr-dict-hint,
  .wo-dict-hint {
    font-size: 12.5px;
    padding: 8px 12px;
  }
}

/* ============================================================
   UX Foundation V1 — Responsive shell (2026-05-19, parcheado 2026-05-19 PM)
   ------------------------------------------------------------
   IMPORTANTE — historia del bug:
   La versión original de este bloque introducía dos overrides que
   ROMPÍAN el mobile drawer del Sprint Mobile A (sección @ 880px y
   720px de este mismo archivo):
     1) `@media (max-width: 980px) { .app:not(.is-sidebar-collapsed)
        { grid-template-columns: 60px 1fr; } }` — forzaba columna de
        sidebar fija de 60px en TODOS los anchos <=980px, incluido
        móvil. Como Sprint Mobile A pone el sidebar en `position:
        fixed` desde 880px, el grid quedaba con una columna fantasma
        de 60px a la izquierda del contenido.
     2) `@media (max-width: 720px) { .app .sidebar { position: sticky } }`
        — devolvía el sidebar al flow normal en móviles muy
        estrechos, deshaciendo el drawer.
   Resultado visual reportado: en móvil la pantalla se "partía",
   sidebar aparecía a la derecha ocupando media pantalla, contenido
   comprimido y con overflow horizontal.
   ------------------------------------------------------------
   Corrección:
   - El auto-collapse a `60px 1fr` se limita a 881-980px (tablet /
     media pantalla desktop), ANTES del breakpoint drawer móvil.
   - Se elimina el override de `position: sticky` en 720px (deja
     que Sprint Mobile A mantenga el `position: fixed`).
   - Se garantiza `overflow-x: hidden` en body y .app para impedir
     scroll horizontal global en cualquier viewport.
   ============================================================ */

/* --- Defensa global: no permitir scroll horizontal del shell ---
   PM-22 fix: `.app` usa `overflow-x: clip` en vez de `hidden`. `hidden`
   crea un contexto de scroll que rompe el `position: sticky` del sidebar
   (#/users con tablas largas: al scrollear el body, el sidebar se iba
   con el scroll en vez de mantenerse fijo). `clip` corta visualmente
   pero NO genera contexto de scroll, así el sticky del sidebar funciona
   contra el viewport. Soporte: Chrome 90+, Firefox 81+, Safari 16+.
   `html, body` queda con `hidden` (no participa del sticky context). */
html, body { overflow-x: hidden; }
.app { overflow-x: clip; max-width: 100vw; }

/* --- 881-980px: auto-colapsar sidebar (zona tablet / media pantalla) ---
   Rango cuidadosamente acotado: NO baja de 881px para no pelear con el
   mobile drawer de Sprint Mobile A (que arranca en 880px). */
@media (min-width: 881px) and (max-width: 980px) {
  .app:not(.is-sidebar-collapsed) { grid-template-columns: 60px 1fr; }
  .app:not(.is-sidebar-collapsed) .sidebar__title,
  .app:not(.is-sidebar-collapsed) .nav-link__text,
  .app:not(.is-sidebar-collapsed) .nav-section,
  .app:not(.is-sidebar-collapsed) .nav-link__bullet,
  .app:not(.is-sidebar-collapsed) .nav-group__chev,
  .app:not(.is-sidebar-collapsed) .nav-group__items { display: none; }
  .app:not(.is-sidebar-collapsed) .sidebar__brand { justify-content: center; padding: 14px 8px; }
  .app:not(.is-sidebar-collapsed) .sidebar__logo-img { width: 36px; }
  .app:not(.is-sidebar-collapsed) .nav-link,
  .app:not(.is-sidebar-collapsed) .nav-group__head { justify-content: center; padding: 10px 8px; }
}

/* --- Tablas: contención horizontal para que no empujen el shell --- */
@media (max-width: 1180px) {
  .dt2,
  .panel > table,
  .page > table { max-width: 100%; }
  .dt2__scroll,
  .dt2-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dt2 table { min-width: 720px; } /* permite scroll horizontal cómodo */
}

/* --- Page header en ancho reducido: que se apilen título + acciones --- */
@media (max-width: 880px) {
  .page-header {
    flex-wrap: wrap;
    gap: 10px;
  }
  .page-header__actions {
    flex-wrap: wrap;
    width: 100%;
  }
  .page-header__actions .btn { font-size: 12.5px; padding: 7px 10px; }
}

/* --- Móvil V1: tipografía/spacing táctil + hide acciones desktop pesadas ---
   NOTA: ya NO tocamos `position` del sidebar — Sprint Mobile A mantiene
   `position: fixed` y `left: -100%` por defecto, con `is-sidebar-open`
   activando `left: 0` y backdrop ::before. */
@media (max-width: 720px) {
  /* Botones más cómodos al tap */
  .btn { min-height: 36px; }
  .btn--sm { min-height: 32px; }
  /* Topbar más compacta */
  .topbar { padding: 6px 10px; gap: 8px; }
  /* Modal full-width con margen visual */
  dialog.modal,
  .modal {
    max-width: calc(100vw - 16px) !important;
    width: calc(100vw - 16px) !important;
  }
  /* Export Excel y acciones administrativas pesadas — ocultas en móvil */
  .dt2__toolbar [data-act="export"],
  .dt2-export-btn,
  .btn--export-xlsx {
    display: none !important;
  }
  /* Hint global "algunas funciones son para computadora" — compacto, no
     intrusivo. Solo en .page raíz para no contaminar cards/panels. */
  #page.page::before {
    content: "Algunas funciones administrativas están optimizadas para computadora.";
    display: block;
    margin: 0 0 8px 0;
    padding: 5px 8px;
    background: rgba(245, 158, 11, .08);
    border: 1px solid rgba(245, 158, 11, .25);
    border-radius: 4px;
    font-size: 11px;
    color: var(--c-soft);
    line-height: 1.35;
  }
  /* El contenido NUNCA debe quedar bajo el sidebar drawer cuando está cerrado */
  .page { width: 100%; max-width: 100%; min-width: 0; }
}

/* --- Error recovery: card cómoda incluso en móvil --- */
@media (max-width: 720px) {
  .page-error {
    margin: 16px 8px !important;
    padding: 16px !important;
  }
  .page-error pre { font-size: 10.5px; }
}

/* ============================================================
   Mobile Experience V3 — Patrón master-detail (2026-05-19)
   ============================================================
   Componentes con menú interno (Configuraciones, Plantillas con menú,
   Reportes con menú) deben usar este patrón:
     - Desktop: dos columnas lado a lado (.cfg-layout grid 260px 1fr).
     - Móvil: una sola columna que muestra LISTA por defecto
       (.cfg-layout--list-only) o DETALLE full-width con back button
       (.cfg-layout--detail-active).
   Esto evita el comportamiento roto previo donde el sidebar interno se
   quedaba pegado al borde con contenido comprimido a la derecha.
   ============================================================ */

/* Base desktop: grid de dos columnas */
.cfg-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items: flex-start;
}
.cfg-layout > .cfg-nav.panel {
  position: sticky; top: 12px;
  padding: 8px;
  max-height: calc(100vh - 100px);
  overflow: auto;
}
.cfg-layout > .cfg-content {
  min-height: 400px;
  min-width: 0; /* permite shrink dentro del grid */
}
.cfg-back-btn {
  display: none; /* oculto en desktop por default */
  align-items: center; gap: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: transparent;
  border: 1px solid var(--c-border, rgba(255,255,255,.1));
  color: inherit;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.cfg-back-btn:hover {
  background: rgba(255,255,255,.04);
}

/* ─── Móvil: master-detail real ─── */
@media (max-width: 880px) {
  /* Una sola columna full-width */
  .cfg-layout {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  /* Aside ya NO es sticky en móvil — fluye en el documento */
  .cfg-layout > .cfg-nav.panel {
    position: static;
    max-height: none;
    overflow: visible;
  }
  /* Estado LIST-ONLY: mostrar solo la lista de secciones */
  .cfg-layout--list-only > .cfg-content {
    display: none;
  }
  /* Estado DETAIL-ACTIVE: mostrar solo el detalle + back button */
  .cfg-layout--detail-active > .cfg-nav {
    display: none;
  }
  .cfg-layout--detail-active .cfg-back-btn {
    display: inline-flex;
  }
  /* La lista de items dentro del nav crece full-width y los items
     son targets táctiles cómodos */
  .cfg-nav__list .cfg-nav__item {
    padding: 12px 14px !important;
    min-height: 44px;
    font-size: 14px;
  }
  /* Panel embedido se ajusta al ancho disponible */
  .cfg-content .panel { width: 100%; max-width: 100%; }
}

/* ============================================================
   Mobile UX V4 — Sprint 2026-05-19 PM-4
   ============================================================
   Refina V3 con:
   - Configuraciones: back button siempre visible y grande en móvil.
   - Usuarios: acciones compactas con flex-wrap + filas más densas.
   - Nueva solicitud: ocultar IA + WhatsApp import en móvil; ayuda corta.
   - Mantener desktop intacto.
   ============================================================ */

/* ============================================================
   Datos Maestros Operativos V1 — 2026-05-19 PM-5
   ============================================================ */

/* --- Usuarios desktop: ocultar el botón "Más acciones" ---
   Solo se usa en móvil. Los iconos inline son la UX desktop. */
.dt-actions__more {
  display: none;
}

/* --- Nueva solicitud V5: chips canales de reporte --- */
.nr-channel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 0;
}
.nr-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 14px;
  border: 1px solid var(--c-border, rgba(255,255,255,.1));
  background: rgba(255,255,255,.04);
  color: inherit;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.nr-chip:hover { background: rgba(18,169,227,.08); border-color: rgba(18,169,227,.3); }
.nr-chip.is-selected {
  background: rgba(18,169,227,.18);
  border-color: rgba(18,169,227,.6);
  color: var(--c-accent, #12A9E3);
  font-weight: 600;
}
@media (max-width: 720px) {
  /* Mobile: chips más compactos y horizontal scroll si no caben */
  .nr-channel-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .nr-chip { padding: 6px 8px; font-size: 11.5px; flex-shrink: 0; }
  /* Row de clasificación: 1 col en móvil */
  .nr-classification-row { display: flex !important; flex-direction: column; gap: 8px; }
}

/* --- Usuarios móvil V2: tabla → cards apiladas (≤720px) ---
   En lugar de comprimir la tabla horizontalmente, transformamos cada fila
   en una card vertical. Aplica solo cuando la tabla tiene id que arranca
   con `users-` (el tableId del dataTable de usuarios). */
@media (max-width: 720px) {
  /* En móvil, ocultar todos los iconos inline y mostrar solo "Más acciones" */
  .dt-actions__inline { display: none !important; }
  .dt-actions__more {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
  }
  #users-table thead { display: none; }
  #users-table, #users-table tbody, #users-table tr, #users-table td {
    display: block;
    width: 100%;
  }
  #users-table tr {
    background: rgba(255,255,255,.02);
    border: 1px solid var(--c-border, rgba(255,255,255,.08));
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px 12px;
    box-sizing: border-box;
  }
  #users-table td {
    border: 0 !important;
    padding: 4px 0 !important;
    font-size: 13px;
  }
  /* Acciones: la fila de iconos compacta horizontal con separador visual */
  #users-table .dt-actions {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(255,255,255,.06) !important;
  }
  /* Si la columna está oculta vía la config de dataTable2, se conserva el
     `display: none` original — no la forzamos a block. */
  #users-table td[style*="display: none"],
  #users-table td[hidden] {
    display: none !important;
  }
}

/* ============================================================
   Mobile UX V5.1 — Cierre 2026-05-19 PM-7
   ============================================================
   - Repara back button huérfano de Configuraciones (selector perdido en edit previo).
   - Refuerza cards de usuarios con jerarquía clara (nombre, email, pills, acciones).
   - Texto anti-PHI obligatorio en evidencias móvil.
   ============================================================ */

/* --- Configuraciones móvil: back button visible y grande --- */
@media (max-width: 880px) {
  .cfg-layout--detail-active .cfg-back-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
    background: rgba(17, 184, 214, .08);
    border: 1px solid rgba(17, 184, 214, .35);
    color: var(--c-accent, #12A9E3);
    border-radius: 8px;
    cursor: pointer;
  }
  .cfg-layout--detail-active .cfg-back-btn:hover {
    background: rgba(17, 184, 214, .15);
  }
}

/* --- Usuarios móvil: cards con jerarquía visual real --- */
@media (max-width: 720px) {
  /* Cada fila se ve como card con padding generoso */
  #users-table tr {
    padding: 12px 14px !important;
    background: rgba(255,255,255,.03);
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
  }
  /* Celda principal (nombre + email): jerarquía clara */
  #users-table td:first-child {
    font-weight: 600;
    font-size: 14px !important;
    margin-bottom: 4px;
    padding-bottom: 6px !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }
  /* Celdas secundarias (rol, estado, etc.): más sutiles */
  #users-table td:not(:first-child):not(:last-child) {
    font-size: 12.5px !important;
    color: var(--c-text-soft, rgba(255,255,255,.7));
  }
  /* Pills (rol/estado) se ven destacados */
  #users-table td .pill,
  #users-table td .badge,
  #users-table td [class*="role-"] {
    display: inline-flex;
    margin: 2px 4px 2px 0;
  }
  /* Botón "Más acciones": full-width al final de la card */
  #users-table .dt-actions {
    display: flex !important;
    justify-content: stretch !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
  }
  #users-table .dt-actions .dt-actions__more {
    width: 100% !important;
    justify-content: center !important;
    min-height: 40px !important;
    font-size: 13.5px !important;
    background: rgba(17, 184, 214, .06);
    border: 1px solid rgba(17, 184, 214, .25);
  }
}

/* --- Usuarios: tabla compacta con acciones en wrap horizontal en móvil --- */
@media (max-width: 720px) {
  /* dt-actions: las 8+ acciones por fila no deben apilar verticalmente.
     Las ponemos en wrap con tamaño mínimo cómodo al tap. */
  .dt-actions {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    max-width: 100%;
  }
  .dt-actions .btn--sm {
    min-width: 32px;
    min-height: 32px;
    padding: 4px 6px;
    flex: 0 0 auto;
  }
  /* Reducir padding general en celdas para compactar filas */
  .dt2 td, .dt__table td {
    padding: 6px 8px !important;
    font-size: 12.5px;
  }
  /* En tabla de usuarios específicamente, ocultar columnas no críticas
     en móvil para que la fila quepa sin overflow excesivo. Sergio puede
     activarlas desde el botón Columnas si las necesita.
     Identificación: la columna 1 (usuario), 2 (rol), y la última (acciones)
     son las imprescindibles. */
}

/* --- Nueva solicitud: ocultar funciones no integradas en móvil --- */
@media (max-width: 720px) {
  .nr-ai-button {
    /* IA Limpiar/traducir — escritorio solo */
    display: none !important;
  }
  .nr-wa-import-btn {
    /* WhatsApp import — pendiente integración Meta Cloud API */
    display: none !important;
  }
  .nr-attachments-help--desktop { display: none !important; }
  .nr-attachments-help--mobile { display: block !important; }
  /* Botones de adjuntos compactos */
  #nr-attachments-wrap .btn {
    min-height: 36px;
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    font-size: 12.5px;
  }
  /* Modal de nueva solicitud full-width */
  #nr-modal, dialog#nr-modal, .nr-modal {
    max-width: calc(100vw - 12px) !important;
    width: calc(100vw - 12px) !important;
  }
  /* Secciones internas del modal con padding compacto */
  .nr-section { padding: 8px 4px !important; }
  .nr-section-title { font-size: 13px !important; }
  /* Form grids: una sola columna en móvil */
  .nr-grid-2, .nr-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* --- Hardening contra overflow horizontal en módulos con tablas anchas --- */
@media (max-width: 720px) {
  /* Defensa adicional: cualquier contenedor de página no debe permitir scroll
     horizontal del shell. Las tablas dentro tendrán su propio overflow. */
  #page.page { overflow-x: hidden; }
  /* Mejorar mensaje genérico — el banner anterior decía "optimizado para
     computadora" en TODAS las páginas. Ahora solo lo muestran las que tengan
     la clase .page--complex-admin (no aplicamos por default, pero queda
     disponible para módulos que la necesiten). Ver Mobile V3. */
  #page.page::before {
    /* Suprimimos el banner global anterior — era ruidoso y no aportaba. */
    content: none !important;
    display: none !important;
  }
  /* En módulos administrativos complejos donde se quiera mostrar el aviso,
     opt-in usando .page--complex-admin */
  #page.page.page--complex-admin::before {
    content: "Modo móvil activo. Algunas acciones avanzadas se muestran compactas.";
    display: block;
    margin: 0 0 8px 0;
    padding: 6px 10px;
    background: rgba(59,130,246,.08);
    border: 1px solid rgba(59,130,246,.25);
    border-radius: 4px;
    font-size: 11px;
    color: var(--c-soft);
    line-height: 1.35;
  }
}

/* ============================================================
   Modo demo visual por rol — V1 (2026-05-19 PM-9)
   Cuando body.is-demo-role está activo, el banner fijo de aviso ocupa
   ~38px arriba. Empujamos el contenido principal con padding-top para
   no taparlo. El topbar de la app queda debajo del banner.
   ============================================================ */
body.is-demo-role { padding-top: 40px; }
body.is-demo-role #demo-role-banner { font-weight: 500; }
@media (max-width: 720px) {
  body.is-demo-role { padding-top: 64px; }
  #demo-role-banner > div { font-size: 12px !important; }
}

/* Hover sutil sobre las cards "Mis reportes" del módulo QA */
.qa-my-card:hover { background: rgba(255,255,255,.05) !important; }

/* ============================================================
   Mobile P0 — Sprint autónomo 2026-05-19 PM-28
   ============================================================
   Sergio reportó:
   - Configuraciones se rompe en media pantalla / tablet pequeña.
   - Falta botón "Volver" claro en subsecciones.
   - Usuarios: filas muy altas (desperdicia espacio).
   - Botones de canal de reporte en Nueva Solicitud se montaban.
   - Tablas con overflow horizontal sin scroll claro.

   Estrategia: extender breakpoints a tablet (1024px) y forzar
   patrón master-detail también en media-pantalla. Compactar filas
   y mejorar overflow táctil.
   ============================================================ */

/* --- Master-detail de Configuraciones hasta 1024px (tablets/media pantalla) --- */
@media (max-width: 1024px) {
  .cfg-layout {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cfg-layout > .cfg-nav.panel {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .cfg-layout--list-only > .cfg-content { display: none; }
  .cfg-layout--detail-active > .cfg-nav { display: none; }
  .cfg-layout--detail-active .cfg-back-btn {
    display: inline-flex;
    /* hacerlo más visible y con icono claro */
    background: rgba(18,169,227,.08);
    border-color: rgba(18,169,227,.35);
    color: var(--c-accent, #12A9E3);
    font-weight: 600;
  }
  .cfg-layout--detail-active .cfg-back-btn:hover {
    background: rgba(18,169,227,.15);
  }
  .cfg-nav__list .cfg-nav__item {
    padding: 12px 14px !important;
    min-height: 44px;
    font-size: 14px;
  }
  .cfg-content .panel { width: 100%; max-width: 100%; }
}

/* --- Tablas: scroll horizontal explícito + indicador en tablet/media --- */
@media (max-width: 1024px) {
  .dt2-wrap,
  .dt2__scroll,
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* indicador visual de scroll horizontal disponible */
    background:
      linear-gradient(to right, var(--c-bg, #0a0f1a), transparent 8px),
      linear-gradient(to left, var(--c-bg, #0a0f1a), transparent 8px),
      linear-gradient(to right, rgba(18,169,227,.1), transparent 14px) 0 0 / 100% 100% no-repeat;
  }
}

/* --- Usuarios: filas más compactas en tablet/mobile (densidad real) --- */
@media (max-width: 1024px) {
  /* Páginas que usan dataTable2 dentro de .panel — compactar padding */
  .dt2 tbody td,
  .dt2 thead th {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 12.5px;
  }
  /* Avatar + nombre + correo en una sola línea cuando se pueda */
  .dt2 tbody td .avatar,
  .dt2 tbody td .badge {
    transform: scale(0.92);
  }
}

/* --- Botones de canal de reporte en Nueva Solicitud (.nr-channel-chips) ---
   Forzar que NUNCA se monten: scroll horizontal limpio con snap.            */
.nr-channel-chips {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  white-space: nowrap;
}
.nr-channel-chips > .nr-chip {
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* --- Botones de acción en page-header en mobile/tablet: stack vertical --- */
@media (max-width: 720px) {
  .page-header__actions {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .page-header__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- Modal: compactación general en tablet/mobile --- */
@media (max-width: 1024px) {
  dialog.modal,
  .modal {
    max-width: calc(100vw - 16px);
    width: calc(100vw - 16px);
  }
  /* Form fields más cómodos al tap */
  dialog.modal input[type="text"],
  dialog.modal input[type="email"],
  dialog.modal input[type="tel"],
  dialog.modal input[type="number"],
  dialog.modal select,
  dialog.modal textarea {
    font-size: 14px;
    min-height: 38px;
  }
  /* Grid de campos: que se apilen en tablet/mobile */
  dialog.modal [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* --- Sidebar drawer en mobile: cerrar con tap fuera --- */
@media (max-width: 880px) {
  /* Asegurar que el sidebar drawer SIEMPRE está sobre contenido cuando abre */
  .app.is-sidebar-open .sidebar {
    z-index: 90;
  }
  .app.is-sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 85;
  }
}

/* --- Anti-overflow global en tablet/media pantalla --- */
@media (max-width: 1024px) {
  /* La página NUNCA debe causar scroll horizontal del shell */
  #page.page {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* ============================================================
   INEQ Signature V1 — Add-ons (2026-05-23)
   Bloque OPT-IN al final del archivo. Solo aplica a clases nuevas
   (.skeleton, .kpi-card, .empty-state-v2, .fade-in, .is-critical-pulse,
   .glass-strong). NO modifica selectores existentes. Reversible borrando
   este bloque.
   ============================================================ */

/* ---------- Skeleton + shimmer (placeholders mientras carga data) ---------- */
.skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    rgba(18,169,227,0.06) 0%,
    rgba(18,169,227,0.14) 50%,
    rgba(18,169,227,0.06) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--ineq-radius-sm);
  animation: ineq-shimmer 1.4s ease-in-out infinite;
}
.skeleton--bar { height: 14px; width: 100%; }
.skeleton--bar-sm { height: 10px; width: 60%; }
.skeleton--bar-lg { height: 22px; width: 80%; }
.skeleton--circle { width: 32px; height: 32px; border-radius: 50%; }
.skeleton--card {
  height: 92px;
  border-radius: var(--ineq-radius-md);
}
@keyframes ineq-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- KPI hero card (variante para dashboards "Clinical Command Center") ---------- */
.kpi-card {
  position: relative;
  background: var(--ineq-bg-card);
  background-image:
    linear-gradient(135deg, rgba(18,169,227,0.10), rgba(7,135,240,0.05) 60%, transparent),
    radial-gradient(circle at 100% 0%, rgba(81,196,240,0.10), transparent 60%);
  border: 1px solid var(--ineq-border-soft);
  border-radius: var(--ineq-radius-lg);
  padding: 18px 20px;
  box-shadow: var(--ineq-shadow-soft);
  overflow: hidden;
  transition:
    border-color var(--ineq-motion-base) var(--ineq-ease-standard),
    box-shadow var(--ineq-motion-base) var(--ineq-ease-standard),
    transform var(--ineq-motion-base) var(--ineq-ease-standard);
}
.kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--ineq-gradient-primary);
  opacity: 0.85;
}
.kpi-card:hover {
  transform: translateY(-1px);
  border-color: var(--ineq-border-medium);
  box-shadow: var(--ineq-shadow-card), var(--ineq-glow-cyan);
}
.kpi-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.kpi-card__label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  font-weight: 700; color: var(--ineq-text-muted);
}
.kpi-card__icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(18,169,227,0.10);
  color: var(--ineq-cyan);
}
.kpi-card__value {
  font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ineq-text-primary);
  font-variant-numeric: tabular-nums;
}
.kpi-card__delta {
  font-size: 12px; margin-top: 2px;
  color: var(--ineq-text-muted);
}
.kpi-card__delta--up { color: var(--ineq-green); }
.kpi-card__delta--down { color: var(--ineq-red); }
.kpi-card--accent-blue .kpi-card__icon { background: rgba(7,135,240,0.10); color: var(--ineq-blue); }
.kpi-card--accent-green .kpi-card__icon { background: rgba(0,175,80,0.12); color: var(--ineq-green); }
.kpi-card--accent-amber .kpi-card__icon { background: rgba(245,158,11,0.12); color: var(--ineq-amber); }
.kpi-card--accent-red .kpi-card__icon { background: rgba(239,68,68,0.12); color: var(--ineq-red); }

/* ---------- Empty state V2 (icono lineal + título + descripción + CTA) ---------- */
.empty-state-v2 {
  padding: 36px 28px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--ineq-text-secondary);
}
.empty-state-v2__icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(18,169,227,0.08);
  color: var(--ineq-cyan);
  border: 1px solid var(--ineq-border-medium);
}
.empty-state-v2__title {
  margin: 0; font-size: 15px; font-weight: 600;
  color: var(--ineq-text-primary);
}
.empty-state-v2__desc {
  max-width: 420px; font-size: 13px; line-height: 1.55;
  color: var(--ineq-text-muted);
  margin: 0;
}
.empty-state-v2__cta { margin-top: 6px; }

/* ---------- Glass strong (variante glassmorphism más pronunciado, opt-in) ---------- */
.glass-strong {
  background: rgba(11,27,47,0.62);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--ineq-border-medium);
}

/* ---------- Animación de entrada para tarjetas (opt-in) ----------
   Aplica con clase .fade-in en cards o contenedores. Stagger soportado
   con --stagger: 1, 2, 3 ... en cada hijo si se requiere. */
@keyframes ineq-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: ineq-fade-in var(--ineq-motion-slow) var(--ineq-ease-standard) both;
  animation-delay: calc(var(--stagger, 0) * 60ms);
}

/* ---------- Pulse de alerta crítica (opt-in para badges/cards de prioridad crítica) ---------- */
@keyframes ineq-pulse-alert {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.50); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0.00); }
}
.is-critical-pulse {
  animation: ineq-pulse-alert 1.6s var(--ineq-ease-standard) infinite;
}

/* ---------- Modal entrance (opt-in con clase .modal--animated) ---------- */
@keyframes ineq-modal-slide-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal--animated[open] {
  animation: ineq-modal-slide-in var(--ineq-motion-slow) var(--ineq-ease-standard) both;
}
.modal--animated[open]::backdrop {
  animation: ineq-fade-in var(--ineq-motion-slow) var(--ineq-ease-standard) both;
}

/* ---------- Focus visible consistente (mejora a11y manteniendo estética) ----------
   Solo refuerza :focus-visible — no afecta :focus (mouse). */
:where(button, a, [role="button"], input, select, textarea):focus-visible {
  outline: 2px solid var(--ineq-cyan);
  outline-offset: 2px;
  border-radius: var(--ineq-radius-sm);
}

/* Reduced-motion: el bloque global L2060 ya silencia animaciones.
   Aquí no necesitamos override adicional — los keyframes nuevos
   también se neutralizan por --animation-duration: .001ms. */

/* ============================================================
   INEQ Clinical Glass UI V2 (2026-05-23)
   Evolución visual sobre Signature V1. Aplica overrides quirúrgicos
   a selectores existentes para lograr el look "Clinical Command Center":
   glass en topbar/modal, profundidad atmosférica global, hover lift en
   cards, tabla premium sin perder legibilidad, sidebar más institucional.
   Reglas aplicadas:
     - ineq-brand-system: glass solo en topbar/modal/popover, no en cards.
     - ineq-accessibility-a11y: contraste AA preservado, reduced-motion.
     - ineq-minimal-motion: motion como comunicación, no decoración.
   Reversible borrando este bloque + revirtiendo el body background.
   ============================================================ */

/* ---------- Tokens V2 ---------- */
:root {
  /* Glass surfaces (solo topbar/modal/popover) */
  --glass-bg: rgba(11, 27, 47, 0.62);
  --glass-bg-strong: rgba(8, 32, 51, 0.78);
  --glass-border: rgba(81, 196, 240, 0.18);
  --glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(81, 196, 240, 0.06);
  --glass-blur: blur(16px) saturate(140%);
  --glass-blur-strong: blur(22px) saturate(160%);

  /* Glow tokens */
  --glow-cyan: 0 0 40px rgba(18, 169, 227, 0.32), 0 0 80px rgba(18, 169, 227, 0.12);
  --glow-cyan-soft: 0 0 24px rgba(18, 169, 227, 0.18);
  --glow-blue: 0 18px 60px rgba(7, 135, 240, 0.28);

  /* Surface depth (capas) */
  --surface-depth-1: 0 2px 8px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(81, 196, 240, 0.04) inset;
  --surface-depth-2: 0 8px 20px rgba(0, 0, 0, 0.36), 0 1px 0 rgba(81, 196, 240, 0.06) inset;
  --surface-depth-3: 0 18px 44px rgba(0, 0, 0, 0.48), 0 1px 0 rgba(81, 196, 240, 0.08) inset;

  /* Atmosphere gradient para body (clinical command center) */
  --gradient-clinical-bg:
    radial-gradient(1200px 700px at 12% -5%, rgba(18, 169, 227, 0.10), transparent 55%),
    radial-gradient(1000px 600px at 95% 10%, rgba(7, 135, 240, 0.08), transparent 60%),
    radial-gradient(900px 500px at 50% 110%, rgba(5, 75, 134, 0.18), transparent 60%),
    linear-gradient(180deg, #05101F 0%, #071321 100%);

  /* Command panel (KPI hero zones) */
  --gradient-command-panel:
    linear-gradient(135deg, rgba(18, 169, 227, 0.10), rgba(7, 135, 240, 0.05) 50%, transparent 90%),
    radial-gradient(circle at 100% 0%, rgba(81, 196, 240, 0.12), transparent 50%);

  /* Motion V2 */
  --motion-soft: 320ms;
  --motion-emphasis: 480ms;
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ---------- Fondo global: clinical command center atmosphere ---------- */
body {
  background: var(--gradient-clinical-bg);
  background-attachment: fixed;
  background-size: cover;
}
.app { background: transparent; }

/* Capa atmosférica decorativa — pseudo-elemento del body para grano sutil
   sin imágenes pesadas. NO interactivo, no toca scroll, no captura clicks. */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(18, 169, 227, 0.05), transparent 25%),
    radial-gradient(circle at 80% 70%, rgba(7, 135, 240, 0.04), transparent 28%);
  opacity: 0.7;
}
/* FIX-SBSC1_2026-05-24 — Sidebar sticky perdido.
 *
 * BUG RECURRENTE (Sergio reportó múltiples veces): el sidebar se "corta"
 * al scrollear hacia abajo en rutas con tabla alta (ej. /requests/open con
 * 449 filas). Los items inferiores del menú quedaban fuera del viewport
 * porque el sidebar fluía con el scroll del body en vez de mantenerse fijo.
 *
 * CAUSA: la regla compartida abajo declaraba `position: relative` para
 * `.sidebar` también — eso anulaba el `position: sticky; top: 0; height:
 * 100dvh` declarado en la sección base del sidebar (línea ~764).
 *
 * FIX: excluimos `.sidebar` de la regla compartida. El sidebar conserva
 * su `position: sticky` original. Si necesita stacking context propio
 * (z-index > 1), se asigna explícitamente en la regla base.
 *
 * Documentado en `docs/CLAUDE_ERROR_LEDGER.md` para que no se repita.
 */
.app, .topbar, .page { position: relative; z-index: 1; }

/* ---------- Sidebar V2: más institucional, glow lateral ---------- */
.sidebar {
  background: linear-gradient(180deg, rgba(8, 32, 51, 0.92) 0%, rgba(5, 75, 134, 0.55) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-right: 1px solid rgba(81, 196, 240, 0.14);
  box-shadow: inset -1px 0 0 rgba(81, 196, 240, 0.10), 4px 0 24px rgba(0, 0, 0, 0.32);
  /* FIX-SBSC1: preservar stacking context sin sobrescribir position:sticky */
  z-index: 5;
}
.nav-link {
  position: relative;
  transition:
    background-color var(--motion-soft) var(--ease-out-quart),
    color var(--motion-soft) var(--ease-out-quart),
    transform var(--motion-soft) var(--ease-out-quart);
}
.nav-link.active::before {
  content: "";
  position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, #51C4F0, #12A9E3 70%, transparent);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(18, 169, 227, 0.55);
}
.nav-link:hover { transform: translateX(2px); }

/* ---------- Topbar V2: glassmorphism aprobado por brand-system ---------- */
.topbar {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 rgba(81, 196, 240, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.22);
}

/* ---------- Cards V2: depth + hover lift (NO glass — preserva legibilidad de datos) ---------- */
.card {
  background-color: var(--ineq-bg-card);
  border: 1px solid var(--ineq-border-soft);
  box-shadow: var(--surface-depth-2);
  transition:
    border-color var(--motion-soft) var(--ease-out-quart),
    box-shadow var(--motion-soft) var(--ease-out-quart),
    transform var(--motion-soft) var(--ease-out-quart);
}
.card:hover {
  border-color: rgba(81, 196, 240, 0.30);
  box-shadow: var(--surface-depth-3), var(--glow-cyan-soft);
  transform: translateY(-2px);
}

/* ---------- Panel V2 ---------- */
.panel {
  background: var(--ineq-bg-panel);
  border: 1px solid var(--ineq-border-soft);
  box-shadow: var(--surface-depth-1);
  border-radius: var(--ineq-radius-md);
}

/* ---------- KPI card V2 refinamiento (sobre la variante V1) ---------- */
.kpi-card {
  background-image: var(--gradient-command-panel);
  box-shadow: var(--surface-depth-2);
  transition:
    border-color var(--motion-soft) var(--ease-out-quart),
    box-shadow var(--motion-soft) var(--ease-out-quart),
    transform var(--motion-soft) var(--ease-out-quart);
}
.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--surface-depth-3), var(--glow-cyan-soft);
}
.kpi-card::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(18, 169, 227, 0.42), transparent);
  opacity: 0.7;
}

/* ---------- Tablas V2: premium pero legibles ---------- */
table.data th {
  background: linear-gradient(180deg, rgba(11, 27, 47, 0.92), rgba(8, 32, 51, 0.92));
  border-bottom: 1px solid var(--glass-border);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 11.5px;
}
table.data tbody tr {
  position: relative;
  transition: background-color var(--motion-soft) var(--ease-out-quart);
}
table.data tbody tr:hover td {
  background: linear-gradient(90deg, rgba(18, 169, 227, 0.06), rgba(18, 169, 227, 0.02));
}
table.data tbody tr:hover td:first-child {
  box-shadow: inset 2px 0 0 var(--ineq-cyan);
}
.table-wrap {
  box-shadow: var(--surface-depth-1);
}

/* ---------- Botones primary V2 ---------- */
.btn--primary {
  box-shadow:
    0 8px 22px rgba(7, 135, 240, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
.btn--primary:hover {
  box-shadow:
    0 14px 32px rgba(7, 135, 240, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    var(--glow-cyan-soft);
}

/* ---------- Inputs V2 focus premium ---------- */
input:focus, textarea:focus, select:focus {
  border-color: var(--ineq-cyan);
  box-shadow:
    0 0 0 3px rgba(18, 169, 227, 0.22),
    0 0 18px rgba(18, 169, 227, 0.15);
  background: var(--ineq-bg-elevated);
}

/* ---------- Pills V2 refinamiento ---------- */
.pill {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
  letter-spacing: 0.2px;
}

/* ---------- Modal V2: glass strong (aprobado por brand-system) ---------- */
.modal {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.modal::backdrop {
  background: rgba(5, 16, 31, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ---------- Page header V2 ---------- */
.page-header h1 {
  background: linear-gradient(180deg, #F4F8FF, #C5D6EA);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: -0.01em;
}

/* ---------- Motion V2: hover lift opt-in para cards genéricos ----------
   Activar agregando clase .lift-on-hover al elemento. NO se aplica a cards
   de tabla — solo a cards visuales (KPI, tarjetas-resumen, panels destacados). */
.lift-on-hover {
  transition:
    transform var(--motion-soft) var(--ease-out-quart),
    box-shadow var(--motion-soft) var(--ease-out-quart);
}
.lift-on-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--surface-depth-3), var(--glow-cyan-soft);
}

/* ---------- Fade-in de página al cargar ----------
   Aplica al contenedor #page del shell para que cada navegación de hash
   muestre la transición. Solo una vez por mount; reduced-motion lo silencia. */
@keyframes ineq-page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#page > * {
  animation: ineq-page-enter var(--motion-emphasis) var(--ease-out-quart) both;
}

/* ---------- Focus ring V2 elegante ---------- */
:where(button, a, [role="button"], input, select, textarea):focus-visible {
  outline: 2px solid var(--ineq-cyan-soft);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(81, 196, 240, 0.14);
}

/* ---------- Reduced-motion override consistencia V2 ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
  .nav-link:hover,
  .card:hover,
  .kpi-card:hover,
  .lift-on-hover:hover { transform: none; }
  #page > * { animation: none; }
}

/* ============================================================
   Sprint MOBILE-FIX 2026-05-24 — Reparar layout responsive móvil
   ============================================================
   Bugs reportados por Sergio (Samsung Browser, ~390-430px):
   1. Cards del dashboard cortadas a la derecha (inline `style="grid:
      repeat(auto-fill, minmax(190px, 1fr))"` en dashboard.js vence
      la regla mobile `.cards { grid-template-columns: 1fr }`).
   2. Selectores del filtro temporal + inputs date desbordan en mobile.
   3. Topbar puede dejar bloque negro incompleto si el contenido no
      llena el alto/ancho disponible.
   4. Login mobile sin logo oficial (panel-visual con logo se oculta
      <980px, panel derecho solo tenía texto).
   5. Placeholders e iconos de inputs login con bajo contraste.
   6. FAB QA/feedback puede tapar acciones críticas.
   Sin tocar JS, lógica, Firestore rules, Storage, Functions ni
   firebase-config.js. Solo CSS de presentación + 1 línea HTML
   (logo en login__brand). Reversible: revertir este bloque + la
   línea del logo en index.html.
   ============================================================ */

/* --- Login: logo institucional en panel derecho (visible siempre) --- */
/* Desktop: discreto (panel izquierdo ya tiene logo grande).
   Mobile: presencia clara (panel izquierdo se oculta <980px). */
.login__brand-logo {
  width: clamp(110px, 10vw, 140px);
  height: auto;
  /* LOGIN-ACCESS-PREMIUM-V1 fix Sergio: centrar logo institucional.
     Antes: align-self: flex-start (heredaba el legacy align-items:flex-start
     que ya cambié a center; align-self con flex-start sobrescribía).
     Ahora: align-self:center + margin auto para consistencia con padre. */
  align-self: center;
  margin: 0 auto 12px;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.30));
  /* Respetar zona de seguridad del manual: no recortar, no recolorear. */
}
@media (max-width: 980px) {
  /* En mobile el panel-visual se oculta — el logo del card es el único. */
  .login__brand-logo {
    width: clamp(140px, 38vw, 180px);
    align-self: center;
    margin: 0 auto 16px;
  }
}
@media (max-height: 800px) and (min-width: 981px) {
  .login__brand-logo {
    width: clamp(100px, 8vw, 120px);
    margin-bottom: 8px;
  }
}

/* --- Login: contraste de inputs mobile + autofill + iconos --- */
/* Refuerza placeholder e iconos para Samsung Browser donde el alpha
   pierde visibilidad. Cumple manual: foco con `#12A9E3` + glow soft. */
.login__form .field--icon input::placeholder {
  color: rgba(193, 210, 232, 0.62);
}
.login__form .field__icon {
  color: rgba(193, 210, 232, 0.95);
}
.field__toggle {
  color: rgba(193, 210, 232, 0.85);
}
/* Autofill: forzar background y color INEQ — el amarillo browser default
   rompe la identidad y la legibilidad. */
.login__form input:-webkit-autofill,
.login__form input:-webkit-autofill:hover,
.login__form input:-webkit-autofill:focus,
.login__form input:-webkit-autofill:active {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 1000px #061422 inset !important;
  caret-color: #ffffff;
  transition: background-color 9999s ease-in-out 0s;
}
/* Submit del login: alinear gradient al manual oficial INEQ.
   Antes: #00b8ee → #155cff (no oficial). Ahora: #12A9E3 → #0787F0. */
.login__submit {
  background: linear-gradient(90deg, #12A9E3 0%, #0787F0 100%);
  box-shadow: 0 14px 26px rgba(7, 135, 240, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.login__submit:hover {
  background: linear-gradient(90deg, #1FB7EE 0%, #2095F5 100%);
  box-shadow: 0 18px 32px rgba(7, 135, 240, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* --- Mobile dashboard: forzar 1 columna a pesar del inline style --- */
/* `dashboard.js:227` setea `style="grid-template-columns:repeat(auto-fill,
   minmax(190px,1fr))"` con prioridad por inline. Lo vencemos con
   selector específico + !important solo en mobile. */
@media (max-width: 720px) {
  .dash-kpi-group {
    padding: 8px 10px !important;
    margin-bottom: 10px !important;
  }
  .dash-kpi-group > .cards,
  #dash-cards .cards,
  #dash-cards .dash-kpi-group .cards {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  /* Drill cells del dashboard: una columna también en angosto */
  #dash-eq-drill > div {
    grid-template-columns: 1fr !important;
  }
  /* Cards individuales del dashboard: ancho completo del contenedor,
     sin overflow horizontal por contenido largo. */
  .dash-kpi-group .card,
  .dash-kpi-group .card-link {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }
}

/* Ancho 420-640px: 2 columnas en dashboard cards (no 3+) */
@media (min-width: 421px) and (max-width: 720px) {
  .dash-kpi-group > .cards,
  #dash-cards .cards,
  #dash-cards .dash-kpi-group .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --- Mobile page-header: filtros + acciones en columna full-width --- */
@media (max-width: 720px) {
  .page-header__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .page-header__actions > select,
  .page-header__actions > input[type="date"],
  .page-header__actions > input[type="text"] {
    width: 100%;
    min-height: 42px;
  }
  /* El span que envuelve "from → to" en dashboard custom: stretch */
  .page-header__actions > span {
    width: 100%;
    flex-wrap: wrap;
  }
  .page-header__actions > span > input[type="date"] {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Botones Solicitudes / Tickets quedan en fila (50/50) al final */
  .page-header__actions > a.btn,
  .page-header__actions > button.btn {
    flex: 1 1 auto;
  }
}

/* --- Topbar mobile: asegurar ancho completo + safe area iOS/Android --- */
@media (max-width: 880px) {
  .topbar {
    width: 100%;
    box-sizing: border-box;
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
  }
  /* Confirmar que actions queda alineado al borde derecho sin overflow */
  .topbar__actions {
    margin-left: auto;
    flex-shrink: 0;
    min-width: 0;
  }
}

/* --- Page mobile: garantizar box-sizing + sin min-width hardcoded --- */
@media (max-width: 720px) {
  .page,
  .page > * {
    box-sizing: border-box;
    max-width: 100%;
  }
  .page > .panel,
  .page > .cards {
    margin-left: 0;
    margin-right: 0;
  }
}

/* --- FAB QA: bajar para no tapar acciones críticas en mobile --- */
@media (max-width: 720px) {
  .qa-feedback-fab {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    min-width: 96px;
    font-size: 11.5px;
  }
  .qa-audit-fab {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .qa-audit-fab--legacy {
    bottom: calc(124px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* --- Subtítulo de page-header: reforzar contraste mobile --- */
@media (max-width: 720px) {
  .page-header__sub {
    color: var(--ineq-text-secondary);
    opacity: 0.92;
  }
}

/* ============================================================
   Hotfix 2026-05-24 (Samsung S24 Ultra "pantalla dividida en 2")
   ============================================================
   Sergio reportó: dashboard se divide visualmente por la mitad en
   S24 Ultra (~412 CSS px). Causa: `dashboard.js` líneas 109/129/140
   usan `<div style="grid-template-columns:1fr 1fr">` inline para
   parejas de paneles (Top técnicos | Top equipos, etc). Inline
   style vence las reglas mobile globales.
   Fix: selectores de atributo [style*=] que venzan inline en mobile.
   Aplica a TODO panel inline-grid 2-col dentro del .page. No toca
   JS — defensivo desde CSS.
   ============================================================ */
@media (max-width: 720px) {
  .page [style*="grid-template-columns:1fr 1fr"],
  .page [style*="grid-template-columns: 1fr 1fr"],
  .page [style*="grid-template-columns:repeat(2,"],
  .page [style*="grid-template-columns: repeat(2,"],
  .page [style*="grid-template-columns:1fr 1fr 1fr"],
  .page [style*="grid-template-columns: 1fr 1fr 1fr"],
  .page [style*="grid-template-columns:1fr 1fr 1fr 1fr"],
  .page [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* Inputs date inline-grid en deliveryReceipt y forms similares */
  .page [style*="grid-template-columns:1fr 1fr 1fr 1fr 60px 30px"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Tablet 421-720px: paneles complejos pueden seguir en 2 cols si
   el contenido es liviano (KPIs simples) pero la mayoría va 1 col.
   No tocamos aquí — el override mobile <720 ya cubre el caso S24. */

/* ---------- Compat: navegadores sin backdrop-filter ---------- */
@supports not (backdrop-filter: blur(1px)) {
  .topbar { background: rgba(8, 32, 51, 0.95); }
  .modal { background: rgba(8, 32, 51, 0.97); }
}

/* ============================================================
   IDENTITY_BOOST_2026-05-24 — Identidad INEQ visible en rutas productivas
   ============================================================
   Antecedente: el rediseño Visual Lab existe en archivos aislados
   (`dashboard-visual-lab.css`, `visual-lab.css`) que solo cargan en sus
   rutas de prueba. `index.html` solo importa `/css/styles.css`, así que
   ninguna mejora del Lab era visible en /clients, /equipment, /requests,
   /dashboard.

   Este bloque introduce mejoras VISIBLES en las rutas productivas
   reusando los tokens INEQ ya definidos (#12A9E3, #054B86, #0787F0,
   #00AF50). No toca lógica de negocio, no toca componentes nuevos,
   solo eleva contraste y acento donde antes la pantalla se veía
   "dashboard genérico oscuro".

   Reglas se colocan al final del archivo para ganar por orden, sin
   usar !important salvo donde un inline style del JS lo exige. */

/* ── Topbar más institucional ─────────────────────────────────
   Antes: background = body (#071321), border tenue rgba(.14).
   Resultado: la barra se fusionaba con el contenido — sin separación.
   Ahora: panel #0B1B2F + border-bottom 1.5px cyan tenue + glow inferior. */
.topbar {
  background: linear-gradient(180deg, #0B1B2F 0%, #0A1828 100%);
  border-bottom: 1px solid rgba(18, 169, 227, 0.32);
  box-shadow: 0 2px 0 0 rgba(18, 169, 227, 0.06), 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* Buscador global con contraste real (se fusionaba con el body). */
#global-search {
  background: var(--ineq-bg-elevated);
  border: 1px solid rgba(18, 169, 227, 0.22);
}
#global-search:focus {
  border-color: var(--ineq-cyan);
  box-shadow: 0 0 0 3px rgba(18, 169, 227, 0.22);
  background: #16304D;
}

/* ── Sidebar: item activo con presencia ────────────────────────
   Antes: border-left 2px, gradient alpha .16 — apenas notable.
   Ahora: border-left 3px sólido cyan + gradient más fuerte + glow lateral. */
.nav-link.active {
  background: linear-gradient(90deg, rgba(18,169,227,0.22) 0%, rgba(7,135,240,0.08) 60%, transparent 100%);
  border-left: 3px solid var(--ineq-cyan);
  padding-left: 11px; /* compensa el +1px del border */
  box-shadow: inset 0 0 0 1px rgba(18,169,227,0.10), 0 0 18px rgba(18,169,227,0.08);
  font-weight: 600;
}
.nav-link:hover {
  background: linear-gradient(90deg, rgba(18,169,227,0.10) 0%, transparent 60%);
  color: var(--ineq-text-primary);
}
/* Sub-items activos con la misma intensidad para que se note jerarquía. */
.nav-link--sub.active {
  background: linear-gradient(90deg, rgba(7,135,240,0.22), transparent);
  border-left: 3px solid var(--ineq-cyan-soft);
  padding-left: 11px;
}

/* Sidebar brand con borde inferior cyan tenue para separar de la nav. */
.sidebar__brand {
  border-bottom: 1px solid rgba(18, 169, 227, 0.20);
}

/* ── Tablas DataTable v2 (dt__*): identidad INEQ legible ─────────
   Antes: header gris oscuro plano, hover .02 imperceptible, sin zebra. */
.dt__wrap {
  border: 1px solid rgba(18, 169, 227, 0.20);
  background: var(--ineq-bg-card);
}
.dt__table thead th {
  background: linear-gradient(180deg, rgba(18,169,227,0.10) 0%, rgba(18,169,227,0.04) 100%);
  color: #E8F2FB;
  border-bottom: 1.5px solid rgba(18, 169, 227, 0.35);
  font-weight: 700;
  letter-spacing: .06em;
}
.dt__table thead th:hover {
  background: linear-gradient(180deg, rgba(18,169,227,0.18) 0%, rgba(18,169,227,0.08) 100%);
  color: #fff;
}
.dt__table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.012);
}
.dt__table tbody tr:hover td {
  background: rgba(18, 169, 227, 0.07);
}
.dt__row-clickable {
  position: relative;
}
.dt__row-clickable:hover {
  background: linear-gradient(90deg, rgba(18,169,227,0.12) 0%, rgba(18,169,227,0.04) 100%);
  box-shadow: inset 3px 0 0 0 var(--ineq-cyan);
}
.dt__row-clickable:hover td {
  color: #fff;
}

/* Sección legacy `table.data` (paginas tipo workOrders/inventario antigua). */
.table-wrap {
  border: 1px solid rgba(18, 169, 227, 0.20);
}
table.data th {
  background: linear-gradient(180deg, rgba(18,169,227,0.10) 0%, rgba(18,169,227,0.04) 100%);
  color: #E8F2FB;
  border-bottom: 1.5px solid rgba(18, 169, 227, 0.32);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
table.data tbody tr:hover td {
  background: rgba(18, 169, 227, 0.07);
  color: #fff;
}

/* ── Paneles con borde superior accent ────────────────────────
   Da identidad sin saturar — solo una línea cyan delgada arriba. */
.panel {
  border-top: 2px solid rgba(18, 169, 227, 0.30);
  background: linear-gradient(180deg, #0E2138 0%, #0B1B2F 60%);
}
.panel__title {
  color: var(--ineq-text-primary);
  letter-spacing: .02em;
}

/* ── Page header con underline institucional ──────────────────
   Antes: título plano sin separación de contenido. */
.page-header {
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(18, 169, 227, 0.16);
  position: relative;
}
.page-header::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0;
  width: 72px; height: 2px;
  background: var(--ineq-cyan);
  border-radius: 1px;
}
.page-header h1 {
  color: var(--ineq-text-primary);
  letter-spacing: -0.01em;
}
.page-header__sub {
  color: var(--ineq-text-secondary);
}

/* ── Inputs y selects con contraste real ──────────────────────
   Antes: input bg = body bg → se fusionan con el fondo.
   Ahora: elevated (#132A45) para que destaquen. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
textarea,
select {
  background: var(--ineq-bg-elevated);
  border-color: rgba(18, 169, 227, 0.18);
}
input:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled) {
  border-color: rgba(18, 169, 227, 0.32);
}

/* ── Botones primary con presencia real ──────────────────────
   El gradiente ya está bien, solo elevamos shadow para que destaque
   sobre el dashboard oscuro. */
.btn--primary {
  box-shadow:
    0 8px 20px rgba(7, 135, 240, 0.32),
    0 0 0 1px rgba(81, 196, 240, 0.18) inset,
    0 1px 0 rgba(255, 255, 255, 0.20) inset;
}
.btn--primary:hover {
  box-shadow:
    0 12px 28px rgba(7, 135, 240, 0.42),
    0 0 0 1px rgba(81, 196, 240, 0.28) inset,
    0 1px 0 rgba(255, 255, 255, 0.24) inset;
}

/* ── Pills con borde más visible para que se lean al primer golpe ── */
.pill {
  border-width: 1px;
}
.pill--info { background: rgba(7, 135, 240, 0.14); border-color: rgba(7, 135, 240, 0.50); color: #66B8FF; }
.pill--success { background: rgba(0, 175, 80, 0.14); border-color: rgba(0, 175, 80, 0.55); color: #4ADE80; }
.pill--warning { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.55); color: #FBBF24; }
.pill--danger { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.55); color: #F87171; }
.pill--brand { background: rgba(18, 169, 227, 0.14); border-color: rgba(18, 169, 227, 0.55); color: var(--ineq-cyan-soft); }

/* ── Texto secundario con más contraste que el original ──────── */
.text-soft { color: var(--ineq-text-secondary); }
.text-muted { color: var(--ineq-text-muted); }

/* ── Cards con borde top accent (igual jerarquía que paneles) ── */
.card {
  border-top: 1.5px solid rgba(18, 169, 227, 0.32);
}
.card:hover {
  border-color: rgba(18, 169, 227, 0.48);
}

/* ── Light theme: equivalentes legibles ───────────────────────
   En light theme la "fusión con el fondo" es menos crítica pero
   los acentos cyan siguen aplicando para mantener identidad. */
[data-theme="light"] .topbar {
  background: #fff;
  border-bottom: 1px solid rgba(5, 75, 134, 0.18);
  box-shadow: 0 2px 0 0 rgba(18, 169, 227, 0.10), 0 4px 16px rgba(5, 75, 134, 0.06);
}
[data-theme="light"] .nav-link.active {
  background: linear-gradient(90deg, rgba(18,169,227,0.18) 0%, rgba(7,135,240,0.06) 60%, transparent 100%);
  border-left: 3px solid var(--ineq-cyan);
}
[data-theme="light"] .dt__table thead th,
[data-theme="light"] table.data th {
  background: linear-gradient(180deg, #EAF6FD 0%, #DDEFFB 100%);
  color: #054B86;
  border-bottom: 1.5px solid rgba(5, 75, 134, 0.18);
}
[data-theme="light"] .dt__row-clickable:hover {
  background: rgba(18, 169, 227, 0.08);
  box-shadow: inset 3px 0 0 0 var(--ineq-cyan);
}
[data-theme="light"] .panel {
  border-top: 2px solid rgba(18, 169, 227, 0.32);
  background: #fff;
}
[data-theme="light"] .page-header { border-bottom-color: rgba(5, 75, 134, 0.14); }
[data-theme="light"] .page-header::after { background: var(--ineq-cyan); }

/* ── Mobile: en pantallas chicas el acento de tabla debe seguir leyéndose ── */
@media (max-width: 720px) {
  .dt__table thead th {
    background: rgba(18, 169, 227, 0.12);
    font-size: 10.5px;
  }
  .dt__row-clickable:hover {
    box-shadow: inset 2px 0 0 0 var(--ineq-cyan);
  }
}

/* ============================================================================
 * LIGHT-B 2026-05-24 — Fix rápido modo día (autorizado por Sergio, opción B).
 *
 * Decisión de diseño aprobada:
 *   • SIDEBAR siempre OSCURO institucional (chrome INEQ).
 *     Justificación: el manual de marca usa logo blanco sobre fondo oscuro
 *     y el sidebar es identidad de plataforma, no contenido.
 *   • PAGE/CONTENT sí cambia a paleta light cuando data-theme="light".
 *
 * Bug previo (LIGHT-1): las reglas [data-theme="light"] del sidebar (líneas
 * 252-264 + 891-892) cambiaban texto a `#0B1B2F` asumiendo que el fondo del
 * sidebar también iba a ser claro — pero la regla V2 .sidebar (línea ~3717)
 * lo mantiene oscuro siempre. Resultado: texto oscuro sobre fondo oscuro.
 *
 * Este bloque se ubica al final del archivo para tener máxima especificidad
 * por orden de cascada, sin tocar las reglas previas (rollback fácil).
 * Sobrescribe colores de textos del sidebar a la paleta dark institucional
 * (blanco / cyan-soft) y aplica fondo claro a body en modo light.
 *
 * Smoke MCP obligatorio antes de cerrar (DEPLOY-1).
 * ============================================================================ */
[data-theme="light"] .sidebar {
  /* Border institucional, no del esquema light */
  border-right: 1px solid rgba(81, 196, 240, 0.14);
}
[data-theme="light"] .sidebar .nav-link {
  color: #C5D6EA;  /* --ineq-text-secondary dark hardcoded */
}
[data-theme="light"] .sidebar .nav-link:hover {
  background: rgba(18, 169, 227, 0.10);
  color: #FFFFFF;
}
[data-theme="light"] .sidebar .nav-link.active,
[data-theme="light"] .sidebar .nav-link.active:link,
[data-theme="light"] .sidebar .nav-link.active:visited {
  color: #FFFFFF;
  background: rgba(18, 169, 227, 0.14);
}
[data-theme="light"] .sidebar__title { color: #FFFFFF; }
[data-theme="light"] .sidebar__title span { color: #51C4F0; }  /* --ineq-cyan-soft */
[data-theme="light"] .sidebar__brand { border-bottom-color: rgba(255, 255, 255, 0.08); }
[data-theme="light"] .sidebar__user-name { color: #FFFFFF; }
[data-theme="light"] .sidebar__user-role { color: rgba(244, 248, 255, 0.65); }
[data-theme="light"] .nav-section {
  color: rgba(244, 248, 255, 0.55);
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .nav-group__head {
  color: #C5D6EA;
}
[data-theme="light"] .nav-group__head:hover {
  background: rgba(18, 169, 227, 0.10);
  color: #FFFFFF;
}

/* ---------- Page/content en modo light ----------
 * El body en dark usa --gradient-clinical-bg (linear-gradient #05101F → #071321).
 * En light, sobrescribimos a un degradado claro INEQ con la misma estructura.
 * body::before (radial accent cyan) se atenúa para no saturar el claro.
 */
[data-theme="light"] body {
  background:
    radial-gradient(1200px 700px at 12% -5%, rgba(18, 169, 227, 0.06), transparent 55%),
    radial-gradient(1000px 600px at 95% 10%, rgba(7, 135, 240, 0.05), transparent 60%),
    linear-gradient(180deg, #F4F8FD 0%, #EAF2FA 100%);
  background-attachment: fixed;
}
[data-theme="light"] body::before {
  opacity: 0.30;
}

/* ────────────────────────────────────────────────────────────────────────────
 * REQ-UX-LIGHT (2026-05-24): cámara QR oculta en desktop, visible en mobile.
 * El botón "Escanear QR" del topbar solo tiene sentido cuando el usuario
 * tiene cámara accesible (smartphone, tablet). En desktop web genera ruido
 * visual sin uso real. Lógica del scanner (qrScanner.js) NO se removió —
 * solo se oculta el trigger via CSS.
 * Breakpoint 901px coincide con el media query del sidebar colapsable.
 * ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
  #qr-scan-btn { display: none !important; }
}

/* ────────────────────────────────────────────────────────────────────────────
 * REQ-UX-LIGHT (2026-05-24): item read-only en el menú de usuario.
 * Para "Disponibilidad" derivada — se ve como item de menú pero NO es
 * clickeable. Mantiene la consistencia visual con los otros items
 * (icono, padding, status badge a la derecha) pero sin hover ni cursor.
 * ──────────────────────────────────────────────────────────────────────── */
.topbar__user-menu-item--readonly {
  cursor: default;
  opacity: 0.95;
}
.topbar__user-menu-item--readonly:hover {
  background: transparent;
}
#availability-derived[data-status="busy"] {
  color: var(--ineq-amber, #F59E0B);
  font-weight: 700;
}
#availability-derived[data-status="available"] {
  color: var(--ineq-green, #00AF50);
  font-weight: 700;
}
#availability-derived[data-status="unknown"] {
  color: var(--c-text-soft);
  font-style: italic;
}

/* ────────────────────────────────────────────────────────────────────────────
 * REQ-UX-LIGHT (2026-05-24): correcciones de contraste tema claro.
 * Sergio reportó textos ilegibles en /profile, /requests/open y otras rutas
 * cuando data-theme="light" está activo. Aplicamos overrides puntuales sobre
 * los elementos más problemáticos sin reescribir el sistema de tokens.
 * Contraste objetivo: AA mínimo (4.5:1 texto, 3:1 large/iconos).
 * ──────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .page-header h1,
[data-theme="light"] h1.page-title,
[data-theme="light"] .panel__title,
[data-theme="light"] .form-section h2 {
  color: var(--ineq-blue-deep, #054B86);
}
[data-theme="light"] .text-soft,
[data-theme="light"] .page-header__sub {
  color: rgba(11, 27, 47, 0.72) !important;
}
[data-theme="light"] .text-muted {
  color: rgba(11, 27, 47, 0.54) !important;
}
[data-theme="light"] .topbar__user-name {
  color: var(--ineq-blue-deep, #054B86);
}
[data-theme="light"] .topbar__user-role {
  color: rgba(11, 27, 47, 0.7);
}
/* Inputs y selects en tema light dentro del page (no aplica a sidebar/topbar) */
[data-theme="light"] #page input[type="text"],
[data-theme="light"] #page input[type="search"],
[data-theme="light"] #page input[type="email"],
[data-theme="light"] #page input[type="date"],
[data-theme="light"] #page input[type="tel"],
[data-theme="light"] #page select,
[data-theme="light"] #page textarea {
  color: #0B1B2F;
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(18, 169, 227, 0.32);
}
[data-theme="light"] #page input::placeholder,
[data-theme="light"] #page textarea::placeholder {
  color: rgba(11, 27, 47, 0.45);
}

/* ──────────────────────────────────────────────────────────────────────────
 * LIGHT-CONTRAST-P0 — 2026-05-24
 *
 * Hotfix de contraste para tema claro/mixto reportado por Sergio en captura
 * de /clients: el hover de filas volvía el texto blanco (ilegible sobre el
 * fondo cyan claro). Headers de página también se veían demasiado claros.
 *
 * Root causes:
 *   1. `.dt__row-clickable:hover td { color: var(--ineq-text-primary, #fff) }`
 *      forzaba blanco en hover. En light theme la variable apunta a oscuro
 *      pero el fallback `#fff` se mezclaba según orden de cascada.
 *   2. Page headers usaban color heredado que en light no contrastaba con
 *      el fondo glass claro.
 *   3. Sticky selected rows no tenían acento explícito.
 *
 * Reglas obligatorias post-fix:
 *   - Hover de fila: fondo cyan suave, texto siempre #0B1B2F (no blanco).
 *   - Selected: borde izquierdo cyan + texto navy.
 *   - h1/h2/h3 en page header: navy o blue-deep (#0B1B2F / #054B86).
 *   - Sub-textos: #334155 mínimo (contraste AA sobre fondo claro).
 *
 * Selector: [data-theme="light"]. No afecta tema oscuro.
 * Ver E030 en docs/CLAUDE_ERROR_LEDGER.md.
 * ────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .dt__row-clickable:hover {
  background: rgba(18, 169, 227, 0.10) !important;
}
[data-theme="light"] .dt__row-clickable:hover td,
[data-theme="light"] .dt__row-clickable:hover td * {
  color: #0B1B2F !important;
  opacity: 1 !important;
}
[data-theme="light"] .dt__row-clickable:hover .text-soft,
[data-theme="light"] .dt__row-clickable:hover .text-muted {
  color: #334155 !important;
}
[data-theme="light"] .dt__row-clickable.is-selected,
[data-theme="light"] tr.is-selected {
  background: rgba(18, 169, 227, 0.14) !important;
  box-shadow: inset 3px 0 0 #12A9E3 !important;
}
[data-theme="light"] .dt__row-clickable.is-selected td,
[data-theme="light"] tr.is-selected td,
[data-theme="light"] .dt__row-clickable.is-selected td * {
  color: #0B1B2F !important;
}

/* Headers de tabla en light: fondo claro con tinte cyan + texto navy */
[data-theme="light"] .dt__table thead th,
[data-theme="light"] table.data th {
  background: rgba(18, 169, 227, 0.06) !important;
  color: #054B86 !important;
  border-bottom: 1px solid rgba(18, 169, 227, 0.25) !important;
}
[data-theme="light"] table.data tr:hover td {
  background: rgba(18, 169, 227, 0.10) !important;
  color: #0B1B2F !important;
}

/* Page headers en light: títulos navy + subtítulos slate */
[data-theme="light"] .page-header h1,
[data-theme="light"] .page-header h2,
[data-theme="light"] h1.page-title,
[data-theme="light"] .panel__title,
[data-theme="light"] .form-section h2,
[data-theme="light"] #page h1,
[data-theme="light"] #page h2:not(.rq-preview__title) {
  color: #054B86 !important;
}
[data-theme="light"] .page-header__sub,
[data-theme="light"] .text-soft {
  color: #334155 !important;
  opacity: 1 !important;
}
[data-theme="light"] .text-muted {
  color: #475569 !important;
}

/* Topbar user en light: nombre navy, rol slate */
[data-theme="light"] .topbar__user-name { color: #054B86 !important; }
[data-theme="light"] .topbar__user-role { color: #334155 !important; }

/* Menú dropdown de perfil en light: texto oscuro */
[data-theme="light"] .topbar__user-menu,
[data-theme="light"] .topbar__user-menu-item {
  color: #0B1B2F !important;
}
[data-theme="light"] .topbar__user-menu-item:hover {
  background: rgba(18, 169, 227, 0.10) !important;
  color: #0B1B2F !important;
}
[data-theme="light"] .topbar__user-menu-item--readonly:hover {
  background: transparent !important;
}

/* Pills/badges en light — asegurar contraste interno */
[data-theme="light"] .pill--info {
  background: rgba(18, 169, 227, 0.12) !important;
  color: #054B86 !important;
  border-color: rgba(18, 169, 227, 0.32) !important;
}
[data-theme="light"] .pill--success {
  background: rgba(0, 175, 80, 0.14) !important;
  color: #15803d !important;
  border-color: rgba(0, 175, 80, 0.35) !important;
}
[data-theme="light"] .pill--warning {
  background: rgba(245, 158, 11, 0.14) !important;
  color: #b45309 !important;
  border-color: rgba(245, 158, 11, 0.38) !important;
}
[data-theme="light"] .pill--danger {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #b91c1c !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}
[data-theme="light"] .pill--muted {
  background: rgba(100, 116, 139, 0.14) !important;
  color: #334155 !important;
  border-color: rgba(100, 116, 139, 0.3) !important;
}

/* Body td default en light: texto navy oscuro legible */
[data-theme="light"] .dt__table tbody td,
[data-theme="light"] table.data tbody td {
  color: #0B1B2F;
}

/* ============================================================
   FONDOS-REFINE-1 (2026-05-25) — Wash tonal sutil por módulo (refinado)
   Reemplaza FONDOS-1 (2026-05-24). Subdivide grupos en atmósferas
   distintas por módulo segun spec Sergio:
     - solicitudes:   cyan institucional suave
     - tickets:       azul operativo
     - calendario:    azul hielo
     - dashboard:     cyan operativo general
     - clientes:      cyan claro institucional
     - equipos:       cyan/teal biomédico
     - inventario:    verde controlado
     - comercial:     cyan-soft con tinte verde
     - documentacion: blue referencia
     - analisis:      violeta/azul muy sutil
     - configuracion: neutro
     - comunicacion:  blue eléctrico mensajes
   Reglas obligatorias:
     - Wash 4-7% alpha en dark. Light theme escala a 0.4x.
     - No interferir con z-index de topbar/sidebar/modales.
     - THEME-CONTRAST-P0 manda: tablas/labels/modales/títulos
       siempre legibles (!important del bloque final gana).
   ============================================================ */
body[data-route-group] .page {
  position: relative;
}
body[data-route-group] .page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  background-repeat: no-repeat;
  background-position: top left, bottom right;
  background-size: 60vw 60vh, 50vw 50vh;
  transition: opacity 240ms var(--ineq-ease-standard);
}
.page > * { position: relative; z-index: 1; }

/* Dashboard — cyan operativo general */
body[data-route-group="dashboard"] .page::before {
  background-image:
    radial-gradient(circle at 0% 0%, rgba(18, 169, 227, 0.07), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(7, 135, 240, 0.04), transparent 60%);
}
/* Solicitudes — cyan institucional suave */
body[data-route-group="solicitudes"] .page::before {
  background-image:
    radial-gradient(circle at 0% 0%, rgba(81, 196, 240, 0.06), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(18, 169, 227, 0.04), transparent 60%);
}
/* Tickets — azul operativo */
body[data-route-group="tickets"] .page::before {
  background-image:
    radial-gradient(circle at 0% 0%, rgba(7, 135, 240, 0.07), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(5, 75, 134, 0.04), transparent 60%);
}
/* Calendario / cronogramas — azul hielo */
body[data-route-group="calendario"] .page::before {
  background-image:
    radial-gradient(circle at 0% 0%, rgba(81, 196, 240, 0.07), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(7, 135, 240, 0.03), transparent 60%);
}
/* Comunicación — blue eléctrico (mensajes) */
body[data-route-group="comunicacion"] .page::before {
  background-image:
    radial-gradient(circle at 0% 0%, rgba(7, 135, 240, 0.07), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(38, 47, 224, 0.04), transparent 60%);
}
/* Clientes — cyan claro institucional */
body[data-route-group="clientes"] .page::before {
  background-image:
    radial-gradient(circle at 0% 0%, rgba(81, 196, 240, 0.07), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(5, 75, 134, 0.04), transparent 60%);
}
/* Equipos — cyan/teal biomédico */
body[data-route-group="equipos"] .page::before {
  background-image:
    radial-gradient(circle at 0% 0%, rgba(18, 169, 227, 0.07), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(81, 196, 240, 0.04), transparent 60%);
}
/* Inventario — verde controlado (stock + movimiento) */
body[data-route-group="inventario"] .page::before {
  background-image:
    radial-gradient(circle at 0% 0%, rgba(0, 175, 80, 0.06), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(146, 209, 79, 0.04), transparent 60%);
}
/* Comercial — cyan-soft con tinte verde (energía comercial) */
body[data-route-group="comercial"] .page::before {
  background-image:
    radial-gradient(circle at 0% 0%, rgba(81, 196, 240, 0.06), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(0, 175, 80, 0.03), transparent 60%);
}
/* Documentación — blue de referencia */
body[data-route-group="documentacion"] .page::before {
  background-image:
    radial-gradient(circle at 0% 0%, rgba(7, 135, 240, 0.06), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(5, 75, 134, 0.04), transparent 60%);
}
/* Análisis / reportes — violeta/azul muy sutil */
body[data-route-group="analisis"] .page::before {
  background-image:
    radial-gradient(circle at 0% 0%, rgba(38, 47, 224, 0.05), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(7, 135, 240, 0.04), transparent 60%);
}
/* Configuración / sistema — neutro muy sutil */
body[data-route-group="configuracion"] .page::before {
  background-image:
    radial-gradient(circle at 0% 0%, rgba(91, 109, 138, 0.04), transparent 55%);
}
/* Compatibilidad backwards con el viejo grupo "sistema" */
body[data-route-group="sistema"] .page::before {
  background-image:
    radial-gradient(circle at 0% 0%, rgba(91, 109, 138, 0.04), transparent 55%);
}
/* Público / vistas sin login — sin wash */
body[data-route-group="publico"] .page::before { background-image: none; }

/* Light theme: escala 0.35x para no ensuciar el blanco ni reducir
   contraste de texto. THEME-CONTRAST-P0 ya garantiza legibilidad,
   este wash queda como atmósfera muy ligera. */
[data-theme="light"] body[data-route-group] .page::before,
[data-theme="light"][data-route-group] .page::before {
  opacity: 0.35;
}

/* Honrar reduced-motion: sin transición */
@media (prefers-reduced-motion: reduce) {
  body[data-route-group] .page::before { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
 * THEME-CONTRAST-P0 — 2026-05-25
 *
 * Sergio reportó P0: el tema día/claro sigue rompiendo contraste en:
 *   - Title "HOSPITAL ESCUELA UNIVERSITARIO" casi invisible.
 *   - Modal "Editar cliente" labels invisibles.
 *   - Hovers/selected/headers ilegibles.
 *
 * Causas raíz identificadas:
 *   1. .page-header h1 (línea 3878) usa linear-gradient(F4F8FF a C5D6EA)
 *      + -webkit-text-fill-color: transparent. Sobre fondo claro = blanco
 *      sobre blanco = invisible. Crítico arreglarlo en light.
 *   2. Tokens light de label dependen de cascada, varios componentes usan
 *      var(--c-text-soft) que cae a 334155 en light pero pierde en
 *      contextos donde el padre fuerza color heredado.
 *   3. Modal dark fallback puede dejar fondo navy mientras labels van a 0B1B2F.
 *
 * Política aplicada (Sergio aprobó):
 *   - Light theme:
 *       primary  0B1B2F  (texto principal)
 *       secondary 334155 (labels, secundarios)
 *       muted    475569  (notas, hints)
 *       title    054B86  (page header h1, modal title)
 *       placeholder 64748B
 *   - Dark theme:
 *       primary  F4F8FF
 *       secondary C1D2E8
 *       label    B9D0E9
 *       placeholder rgba(193,210,232,.65)
 *   - Hover en light: fondo cyan 8-12 por ciento alpha, texto SIEMPRE 0B1B2F.
 *   - Selected en light: misma cyan + box-shadow inset 3px cyan.
 *   - Modal: si bg claro → texto oscuro. Si bg oscuro → texto claro.
 *
 * Posicionado al final del archivo para máxima especificidad por cascada.
 * Registra: E037 (ledger), D017 (decisions log).
 * ════════════════════════════════════════════════════════════════════════ */

/* Tokens de seguridad para contraste (no dependen de cascada) */
[data-theme="light"] {
  --text-primary-safe: #0B1B2F;
  --text-secondary-safe: #334155;
  --text-muted-safe: #475569;
  --label-safe: #334155;
  --title-safe: #054B86;
  --placeholder-safe: #64748B;
  --hover-bg-safe: rgba(18, 169, 227, 0.10);
  --selected-bg-safe: rgba(18, 169, 227, 0.14);
}
:root:not([data-theme="light"]) {
  --text-primary-safe: #F4F8FF;
  --text-secondary-safe: #C1D2E8;
  --text-muted-safe: #91A4BD;
  --label-safe: #B9D0E9;
  --title-safe: #F4F8FF;
  --placeholder-safe: rgba(193, 210, 232, 0.65);
  --hover-bg-safe: rgba(18, 169, 227, 0.10);
  --selected-bg-safe: rgba(18, 169, 227, 0.18);
}

/* 1. Page header h1 — fix CRITICO del gradient invisible en light */
[data-theme="light"] .page-header h1,
[data-theme="light"] .page-header__title,
[data-theme="light"] h1.page-title {
  background: none !important;
  -webkit-text-fill-color: var(--title-safe) !important;
  color: var(--title-safe) !important;
  letter-spacing: -0.01em;
}
[data-theme="light"] .page-header__sub,
[data-theme="light"] .page-subtitle {
  color: var(--text-secondary-safe) !important;
}
[data-theme="light"] .page h2,
[data-theme="light"] .page h3,
[data-theme="light"] .panel h2,
[data-theme="light"] .panel h3,
[data-theme="light"] .card h2,
[data-theme="light"] .card h3,
[data-theme="light"] section h2,
[data-theme="light"] section h3 {
  color: var(--text-primary-safe);
}

/* 2. Labels y form fields — contraste universal */
[data-theme="light"] label,
[data-theme="light"] .field label,
[data-theme="light"] .field__label,
[data-theme="light"] .form-label,
[data-theme="light"] .nr-form .field__label,
[data-theme="light"] .wo-summary__label,
[data-theme="light"] .ap__label,
[data-theme="light"] .ap__sublabel,
[data-theme="light"] .card__label {
  color: var(--label-safe) !important;
  opacity: 1 !important;
}
[data-theme="light"] .field__hint {
  color: var(--text-muted-safe) !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder,
[data-theme="light"] select::placeholder {
  color: var(--placeholder-safe) !important;
  opacity: 1 !important;
}
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="search"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="url"],
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="datetime-local"],
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: #FFFFFF !important;
  color: var(--text-primary-safe) !important;
  border-color: #B6CCE2 !important;
}
[data-theme="light"] input:disabled,
[data-theme="light"] textarea:disabled,
[data-theme="light"] select:disabled {
  background: #F1F5F9 !important;
  color: #64748B !important;
}

/* 3. Modal — coherente con el theme */
[data-theme="light"] .modal,
[data-theme="light"] dialog.modal {
  background: #FFFFFF !important;
  color: var(--text-primary-safe) !important;
  border-color: #D7E3F0 !important;
}
[data-theme="light"] .modal__header {
  background: #F8FAFC !important;
  border-bottom: 1px solid #D7E3F0 !important;
}
[data-theme="light"] .modal__title,
[data-theme="light"] .modal h1,
[data-theme="light"] .modal h2,
[data-theme="light"] .modal h3 {
  color: var(--title-safe) !important;
}
[data-theme="light"] .modal label,
[data-theme="light"] .modal .field__label,
[data-theme="light"] .modal .form-label {
  color: var(--label-safe) !important;
  opacity: 1 !important;
}
[data-theme="light"] .modal input,
[data-theme="light"] .modal textarea,
[data-theme="light"] .modal select {
  background: #FFFFFF !important;
  color: var(--text-primary-safe) !important;
  border: 1px solid #B6CCE2 !important;
}
[data-theme="light"] .modal__footer {
  background: #F8FAFC !important;
  border-top: 1px solid #D7E3F0 !important;
}
[data-theme="light"] .modal__close {
  color: var(--text-secondary-safe) !important;
}

/* 4. Tablas — hover/selected/headers */
[data-theme="light"] .dt__table tbody td,
[data-theme="light"] table.data tbody td {
  color: var(--text-primary-safe);
}
[data-theme="light"] .dt__table thead th,
[data-theme="light"] table.data thead th {
  color: var(--title-safe) !important;
}
[data-theme="light"] .dt__row-clickable:hover,
[data-theme="light"] table.data tbody tr:hover {
  background: var(--hover-bg-safe) !important;
}
[data-theme="light"] .dt__row-clickable:hover td,
[data-theme="light"] .dt__row-clickable:hover td *,
[data-theme="light"] table.data tbody tr:hover td {
  color: var(--text-primary-safe) !important;
}
[data-theme="light"] .dt__row-clickable.is-selected,
[data-theme="light"] tr.is-selected {
  background: var(--selected-bg-safe) !important;
  box-shadow: inset 3px 0 0 #12A9E3 !important;
}
[data-theme="light"] .dt__row-clickable.is-selected td,
[data-theme="light"] tr.is-selected td,
[data-theme="light"] .dt__row-clickable.is-selected td * {
  color: var(--text-primary-safe) !important;
}

/* 5. Cards, panels, detail pages */
[data-theme="light"] .card,
[data-theme="light"] .panel {
  color: var(--text-primary-safe);
}
[data-theme="light"] .client-detail,
[data-theme="light"] .equipment-detail,
[data-theme="light"] .client-detail__hero,
[data-theme="light"] .equipment-detail__hero {
  color: var(--text-primary-safe);
}
[data-theme="light"] .client-detail h1,
[data-theme="light"] .equipment-detail h1,
[data-theme="light"] .client-detail__title,
[data-theme="light"] .equipment-detail__title {
  background: none !important;
  -webkit-text-fill-color: var(--title-safe) !important;
  color: var(--title-safe) !important;
}
[data-theme="light"] .client-detail .text-soft,
[data-theme="light"] .equipment-detail .text-soft {
  color: var(--text-secondary-safe) !important;
}

/* 6. Dropdowns / profile menu */
[data-theme="light"] .dropdown,
[data-theme="light"] .dropdown__menu,
[data-theme="light"] .topbar__user-menu,
[data-theme="light"] .profile-menu {
  background: #FFFFFF !important;
  color: var(--text-primary-safe) !important;
  border-color: #D7E3F0 !important;
}
[data-theme="light"] .dropdown__menu a,
[data-theme="light"] .dropdown__menu button,
[data-theme="light"] .topbar__user-menu-item {
  color: var(--text-primary-safe) !important;
}
[data-theme="light"] .topbar__user-menu-item:hover,
[data-theme="light"] .dropdown__menu a:hover,
[data-theme="light"] .dropdown__menu button:hover {
  background: var(--hover-bg-safe) !important;
  color: var(--text-primary-safe) !important;
}
[data-theme="light"] .topbar__user-menu-item--readonly,
[data-theme="light"] .topbar__user-menu-status {
  color: var(--text-secondary-safe) !important;
}

/* 7. Split preview panels */
[data-theme="light"] .sp-split__preview,
[data-theme="light"] .preview-panel,
[data-theme="light"] .schedules-preview {
  background: #FFFFFF;
  color: var(--text-primary-safe);
  border-color: #D7E3F0;
}
[data-theme="light"] .sp-split__preview h2,
[data-theme="light"] .sp-split__preview h3,
[data-theme="light"] .preview-panel h2,
[data-theme="light"] .preview-panel h3 {
  color: var(--title-safe);
}
[data-theme="light"] .sp-split__preview label,
[data-theme="light"] .preview-panel label {
  color: var(--label-safe) !important;
}

/* 8. Empty states + tooltips */
[data-theme="light"] .empty,
[data-theme="light"] .empty-state {
  color: var(--text-muted-safe);
}
[data-theme="light"] .tooltip {
  color: var(--text-primary-safe);
}

/* 9. Botones — texto siempre legible */
[data-theme="light"] .btn,
[data-theme="light"] button.btn {
  color: var(--text-primary-safe);
}
[data-theme="light"] .btn--primary,
[data-theme="light"] .btn--cta {
  color: #FFFFFF !important;
}
[data-theme="light"] .btn--ghost,
[data-theme="light"] .btn--secondary {
  color: var(--text-primary-safe) !important;
  background: #FFFFFF !important;
  border-color: #B6CCE2 !important;
}
[data-theme="light"] .btn--ghost:hover {
  background: var(--hover-bg-safe) !important;
  color: var(--text-primary-safe) !important;
}

/* 10. Calendario (schedules) */
[data-theme="light"] .cal-day,
[data-theme="light"] .schedules-month__cell {
  color: var(--text-primary-safe);
}
[data-theme="light"] .cal-day__num {
  color: var(--text-primary-safe);
}
[data-theme="light"] .sch-filters label,
[data-theme="light"] .schedules-filters label {
  color: var(--label-safe) !important;
}

/* 11. Dark theme — refuerzo para que labels NUNCA se opaquen */
:root:not([data-theme="light"]) label,
:root:not([data-theme="light"]) .field__label,
:root:not([data-theme="light"]) .form-label,
:root:not([data-theme="light"]) .modal label {
  color: var(--label-safe);
  opacity: 1;
}
:root:not([data-theme="light"]) input::placeholder,
:root:not([data-theme="light"]) textarea::placeholder {
  color: var(--placeholder-safe);
  opacity: 1;
}

/* THEME-CONTRAST-P0 fin */

/* ════════════════════════════════════════════════════════════════════════
 * MOTION-STD-1 — 2026-05-25
 *
 * Estandariza microinteracciones a 120-220 ms (260 ms max slow). Respeta
 * prefers-reduced-motion (heredado del bloque global de líneas 2098-2105).
 *
 * Aplicado:
 *   - Split preview entrada/salida: fade + slide sutil de 200 ms.
 *   - Dropdown / menú perfil: fade-in 150 ms con translateY pequeño.
 *   - Toast: ya tiene animation propia, sin tocar.
 *   - Modales: ya usan animation ineq-modal-in con motion-base. Sin tocar.
 *
 * Reglas:
 *   - No animar display:none → flex (no es animable). Usamos opacity +
 *     transform en .sp-split.split-active .sp-split__preview.
 *   - GPU-friendly: solo opacity + transform. No animar layout (top, left,
 *     width, height).
 * ════════════════════════════════════════════════════════════════════════ */

/* Split preview entrada — aplicada al pasar de "no active" → "active".
   El display: flex se aplica instantáneamente pero la animation hace
   fade + slide en los 200 ms siguientes. */
@keyframes sp-preview-in {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.sp-split.split-active .sp-split__preview {
  animation: sp-preview-in 200ms var(--ineq-ease-standard);
}

/* Mobile drawer: entrada desde abajo en lugar de derecha */
@media (max-width: 1100px) {
  @keyframes sp-preview-in-mobile {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .sp-split.split-active .sp-split__preview {
    animation: sp-preview-in-mobile 220ms var(--ineq-ease-standard);
  }
}

/* Dropdown / topbar user menu — fade-in al desocultar */
@keyframes ineq-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.topbar__user-menu:not([hidden]),
.dropdown__menu:not([hidden]) {
  animation: ineq-dropdown-in 150ms var(--ineq-ease-standard);
}

/* prefers-reduced-motion ya cubierto por el bloque global @media en línea
   2098 que reduce animation-duration a .001 ms. No requerimos bloque
   adicional, pero comentamos por claridad. */
/* @media (prefers-reduced-motion: reduce) {
 *   .sp-split.split-active .sp-split__preview { animation: none; }
 *   .topbar__user-menu:not([hidden]), .dropdown__menu:not([hidden]) { animation: none; }
 * } */

/* MOTION-STD-1 fin */

/* ════════════════════════════════════════════════════════════════════════
   UX-TABLE-HEADER-P0 (2026-05-25)
   Encabezados sticky de DataTable opacos + sombra inferior + z-index alto
   para evitar superposición de filas al hacer scroll dentro de .dt__wrap.
   Sergio reportó que al hacer scroll vertical en tablas el contenido se
   veía atravesando el thead. Causa: fondo no era 100% opaco, z-index
   insuficiente, sin separación visual (sombra) entre header y filas.
   ════════════════════════════════════════════════════════════════════════ */

/* Dark theme (default): fondo más sólido + sombra inferior + z-index +
   backdrop-filter desactivado para no introducir transparencia. */
.dt__table thead {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  background: #131826 !important;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.55), 0 1px 0 var(--c-border, #243040) !important;
}
.dt__table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 21 !important;
  background: #131826 !important;
  /* Borde inferior reforzado para separar visualmente del tbody. */
  border-bottom: 1px solid var(--c-border, #243040) !important;
}

/* Light theme: fondo blanco completamente opaco + sombra inferior sutil
   azul institucional + z-index alto. Sergio reportó superposición en /clients,
   /equipment, /tickets/pending, /inventory, /requests/open. */
[data-theme="light"] .dt__table thead {
  background: #FFFFFF !important;
  box-shadow: 0 4px 12px -6px rgba(5, 75, 134, 0.18), 0 1px 0 #D7E3F0 !important;
}
[data-theme="light"] .dt__table thead th {
  background: #FFFFFF !important;
  border-bottom: 1px solid #D7E3F0 !important;
}

/* Aplicar mismo patrón a table.data legacy (algunas vistas viejas). */
.table-wrap table.data thead {
  position: sticky;
  top: 0;
  z-index: 20;
}
[data-theme="light"] .table-wrap table.data thead {
  background: #FFFFFF !important;
  box-shadow: 0 4px 12px -6px rgba(5, 75, 134, 0.18), 0 1px 0 #D7E3F0 !important;
}
[data-theme="light"] .table-wrap table.data thead th {
  background: #FFFFFF !important;
  border-bottom: 1px solid #D7E3F0 !important;
}

/* UX-TABLE-HEADER-P0 fin */

/* ════════════════════════════════════════════════════════════════════════════
   UI-REDESIGN-F1-GLOBAL-VISUAL-FOUNDATION (2026-05-27)
   ────────────────────────────────────────────────────────────────────────────
   Pulido visual global ADITIVO. Usa solo tokens existentes. No reescribe
   componentes ni toca lógica. Objetivo: microinteracciones discretas +
   feedback de hover/focus/active más refinado y coherente con la identidad
   INEQ (cyan/azul institucional). Reduced-motion neutraliza al final.
   ════════════════════════════════════════════════════════════════════════════ */

/* Botones: transición suave de fondo/borde/sombra + leve realce al hover y
   "press" al activar. No cambia color ni layout; solo movimiento sutil. */
.btn {
  transition: background var(--transition-ui), border-color var(--transition-ui),
              box-shadow var(--transition-ui), transform var(--ineq-motion-fast) var(--ineq-ease-standard);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Cards y paneles: elevación sutil al hover para sensación de profundidad
   institucional. Solo si el elemento ya usa estas clases. */
.card,
.panel,
.kpi-card {
  transition: box-shadow var(--transition-ui), border-color var(--transition-ui),
              transform var(--ineq-motion-base) var(--ineq-ease-standard);
}
.card:hover,
.kpi-card:hover {
  box-shadow: var(--ineq-shadow-card);
  border-color: var(--ineq-border-medium);
}

/* Enlaces de acento: transición de color para que el hover no sea un salto seco. */
a {
  transition: color var(--ineq-motion-fast) var(--ineq-ease-standard);
}

/* Inputs/selects/textarea: transición de borde+fondo al enfocar (refuerza el
   foco sin alterar el esquema de color ya definido por tema). */
input, select, textarea {
  transition: border-color var(--transition-ui), background var(--transition-ui),
              box-shadow var(--transition-ui);
}

/* Refuerzo de focus visible coherente con la marca (additivo al :where global
   ya existente). Anillo cyan tenue para teclado. */
:where(button, a, [role="button"], input, select, textarea):focus-visible {
  outline: 2px solid var(--ineq-cyan);
  outline-offset: 2px;
}

/* Filas de tabla clicables: cursor + hover tenue de marca, transición suave.
   No interfiere con .is-selected (más específico) ni con el hover por tema. */
tr[data-id] {
  transition: background var(--ineq-motion-fast) var(--ineq-ease-standard);
}

/* Reduced motion: neutralizar TODO lo introducido en este bloque F1.
   Va al final para ganar por orden ante las reglas de arriba. */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn:hover,
  .btn:active,
  .card, .panel, .kpi-card,
  .card:hover, .kpi-card:hover,
  a, input, select, textarea,
  tr[data-id] {
    transition: none !important;
    transform: none !important;
  }
}
/* UI-REDESIGN-F1 fin */

/* ════════════════════════════════════════════════════════════════════════════
   UI-REDESIGN-F2-COMPONENT-SYSTEM (2026-05-27)
   ────────────────────────────────────────────────────────────────────────────
   Refinamiento de cohesión de componentes comunes. ADITIVO: no reescribe los
   componentes (que ya están maduros desde sprints previos: cards con gradiente,
   tablas sticky, pills variantes, inputs con focus ring). Solo agrega
   consistencia institucional usando tokens existentes. Sin nueva motion que
   requiera guard (el bloque reduced-motion de F1 cubre transiciones globales).
   ════════════════════════════════════════════════════════════════════════════ */

/* Pills/badges: permitir alineación limpia de icono + texto (regla de marca:
   estado = color + icono + texto). `.pill` era inline-block; lo hacemos
   inline-flex para centrar el SVG sin romper el layout existente. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
}
.pill > .icon,
.pill > svg { flex: 0 0 auto; }

/* Empty states: lectura más cómoda y tono institucional coherente. */
.empty {
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 520px;
  margin-inline: auto;
}

/* Sidebar: acento institucional en el item activo (barra cyan a la izquierda
   vía inset box-shadow → sin desplazar layout). Refuerza "dónde estoy" sin
   depender solo del color de texto. */
.sidebar .nav-link.active,
.sidebar .nav-link--sub.active {
  box-shadow: inset 3px 0 0 var(--ineq-cyan);
}

/* Selects: mismo lenguaje de hover que inputs/botones (borde de marca al pasar
   el cursor). El focus ring ya existe en la regla base de inputs/select. */
select:hover { border-color: var(--ineq-border-medium); }

/* Botón secundario (.btn base, no primario): elevación sutil coherente con el
   resto al hacer hover, sin cambiar color de fondo definido por tema. */
.btn:not(.btn--primary):not(.btn--link):hover {
  border-color: var(--ineq-border-medium);
  box-shadow: var(--ineq-shadow-soft);
}

/* Tablas: peso/contraste del header ligeramente más institucional + zebra muy
   sutil en filas pares para escaneo (additivo, tenue, no rompe selección ni
   hover existentes que son más específicos). */
table.data tbody tr:nth-child(even) td { background: rgba(255,255,255,0.012); }

/* Reduced motion: este bloque F2 no introduce transiciones nuevas; las que
   aplican (hover de .btn/.card/select) ya están neutralizadas por el bloque
   global de F1. No se requiere guard adicional. */

/* ============================================================
   VISUAL-QA-DESIGN-PILOT-V2 (2026-05-28)
   ============================================================
   Sergio reportó que cambios recientes no se perciben como
   rediseño visible. Este bloque refuerza, sin tocar JS, los
   patrones más críticos: sidebar activo, tabs tipo navegador,
   hero del equipo, header de clientes y microtransiciones.
   - Solo aditivo. No reemplaza tokens del manual de marca.
   - Selectores específicos para no romper otras pantallas.
   - Respeta prefers-reduced-motion (todas las transiciones
     usan tokens --motion-* ya gobernados por el guard global).
   ============================================================ */

/* ── V2.1 Sidebar activo: pastilla + indicador lateral grueso ── */
.sidebar .nav-link.active {
  background: linear-gradient(90deg, rgba(18,169,227,0.28) 0%, rgba(7,135,240,0.10) 55%, transparent 100%);
  border-left: 4px solid var(--ineq-cyan);
  padding-left: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(81, 196, 240, 0.16),
    0 0 24px rgba(18, 169, 227, 0.16),
    0 4px 14px rgba(0, 0, 0, 0.22);
  font-weight: 700;
  color: var(--ineq-text-primary);
  letter-spacing: 0.005em;
}
.sidebar .nav-link.active::after {
  content: "";
  position: absolute;
  right: 10px; top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--ineq-cyan);
  box-shadow: 0 0 8px rgba(18, 169, 227, 0.75);
}
.sidebar .nav-link--sub.active {
  background: linear-gradient(90deg, rgba(7,135,240,0.32) 0%, rgba(7,135,240,0.06) 70%, transparent 100%);
  border-left: 3px solid var(--ineq-cyan-soft);
  padding-left: 11px;
  color: #fff;
  font-weight: 600;
}
[data-theme="light"] .sidebar .nav-link.active {
  background: linear-gradient(90deg, rgba(7,135,240,0.18) 0%, rgba(7,135,240,0.04) 70%, transparent 100%);
  box-shadow:
    inset 0 0 0 1px rgba(7,135,240,0.22),
    0 4px 14px rgba(7,135,240,0.10);
  color: var(--ineq-blue-deep);
}
[data-theme="light"] .sidebar .nav-link.active::after { background: var(--ineq-blue); box-shadow: 0 0 6px rgba(7,135,240,0.55); }

/* ── V2.2 Tabs tipo navegador: pills elevadas con borde superior cyan ── */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid rgba(18, 169, 227, 0.18);
  margin-bottom: 14px;
  padding: 0 2px;
  background: linear-gradient(180deg, transparent 0%, rgba(11,27,47,0.35) 100%);
  border-radius: 10px 10px 0 0;
  flex-wrap: wrap;
}
.tabs .tab,
.tabs > button {
  position: relative;
  background: rgba(11, 27, 47, 0.55);
  border: 1px solid rgba(18, 169, 227, 0.10);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ineq-text-secondary, #B5C6DE);
  cursor: pointer;
  bottom: -2px;
  transition:
    background-color 140ms var(--ease-out-quart, ease),
    color 140ms var(--ease-out-quart, ease),
    border-color 140ms var(--ease-out-quart, ease),
    transform 140ms var(--ease-out-quart, ease);
}
.tabs .tab:hover,
.tabs > button:hover {
  background: rgba(18, 169, 227, 0.10);
  color: var(--ineq-text-primary, #F4F8FF);
  transform: translateY(-1px);
}
.tabs .tab:focus-visible,
.tabs > button:focus-visible {
  outline: 2px solid var(--ineq-cyan);
  outline-offset: 2px;
}
.tabs .tab.active,
.tabs > button.active {
  background: linear-gradient(180deg, rgba(18,169,227,0.20) 0%, rgba(11,27,47,0.95) 90%);
  color: var(--ineq-text-primary, #F4F8FF);
  font-weight: 700;
  border-color: rgba(18, 169, 227, 0.45);
  border-bottom: 2px solid transparent;
  box-shadow:
    0 -2px 0 var(--ineq-cyan) inset,
    0 -10px 22px -10px rgba(18, 169, 227, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.25);
}
.tabs .tab.active::before,
.tabs > button.active::before {
  content: "";
  position: absolute;
  top: 0; left: 12px; right: 12px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ineq-cyan), transparent);
  border-radius: 2px;
}
[data-theme="light"] .tabs {
  background: linear-gradient(180deg, transparent, rgba(7,135,240,0.04));
  border-bottom-color: rgba(7,135,240,0.18);
}
[data-theme="light"] .tabs .tab,
[data-theme="light"] .tabs > button {
  background: #F6FAFE;
  border-color: rgba(7,135,240,0.10);
  color: #475569;
}
[data-theme="light"] .tabs .tab:hover,
[data-theme="light"] .tabs > button:hover {
  background: rgba(7,135,240,0.08);
  color: var(--ineq-blue-deep);
}
[data-theme="light"] .tabs .tab.active,
[data-theme="light"] .tabs > button.active {
  background: #fff;
  color: var(--ineq-blue-deep);
  border-color: rgba(7,135,240,0.30);
  box-shadow:
    0 -2px 0 var(--ineq-blue) inset,
    0 4px 10px rgba(7,135,240,0.10);
}
@media (max-width: 720px) {
  .tabs .tab,
  .tabs > button { padding: 7px 11px; font-size: 12px; }
}

/* ── V2.3 Hero ficha equipo: fondo técnico de profundidad ── */
.equipment-detail-page-header {
  position: relative;
  padding: 18px 18px 16px;
  margin-bottom: 16px;
  border-radius: var(--ineq-radius-lg, 12px);
  background:
    linear-gradient(135deg, rgba(18,169,227,0.10) 0%, rgba(7,135,240,0.04) 55%, transparent 100%),
    linear-gradient(180deg, rgba(13, 31, 51, 0.85) 0%, rgba(11, 27, 47, 0.85) 100%);
  border: 1px solid rgba(18, 169, 227, 0.22);
  box-shadow:
    var(--surface-depth-2, 0 12px 30px rgba(0,0,0,0.32)),
    inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}
.equipment-detail-page-header::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(18,169,227,0.18), transparent 60%),
    radial-gradient(60% 50% at 100% 100%, rgba(7,135,240,0.10), transparent 60%);
  pointer-events: none;
  opacity: 0.85;
}
.equipment-detail-page-header > * { position: relative; z-index: 1; }
.equipment-detail-page-header h1 {
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 700;
  margin: 4px 0 6px;
}
.equipment-detail-page-header .eq-thumb {
  border: 1px solid rgba(18, 169, 227, 0.35);
  border-radius: 12px;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.38),
    inset 0 0 0 1px rgba(81, 196, 240, 0.10);
  background: linear-gradient(135deg, rgba(18,169,227,0.06), rgba(7,135,240,0.02));
}
[data-theme="light"] .equipment-detail-page-header {
  background:
    linear-gradient(135deg, rgba(7,135,240,0.08), rgba(81,196,240,0.04)),
    #FFFFFF;
  border-color: rgba(7, 135, 240, 0.22);
  box-shadow: 0 4px 14px rgba(7,135,240,0.08);
}

/* ── V2.4 Clientes header: identidad institucional refinada ── */
.clients-page-header {
  position: relative;
  padding: 16px 18px 12px;
  margin-bottom: 14px;
  border-radius: var(--ineq-radius-lg, 12px);
  background: linear-gradient(135deg, rgba(18,169,227,0.07) 0%, rgba(7,135,240,0.03) 60%, transparent 100%);
  border: 1px solid rgba(18, 169, 227, 0.16);
  border-bottom: 2px solid rgba(18, 169, 227, 0.28);
}
.clients-page-header .cl-count-pill {
  background: linear-gradient(135deg, rgba(18,169,227,0.22), rgba(7,135,240,0.12));
  border: 1px solid rgba(18, 169, 227, 0.35);
  color: var(--ineq-text-primary, #F4F8FF);
  box-shadow: 0 4px 12px rgba(18, 169, 227, 0.15);
  font-weight: 700;
}
[data-theme="light"] .clients-page-header {
  background: linear-gradient(135deg, rgba(7,135,240,0.07), rgba(81,196,240,0.02));
  border-color: rgba(7, 135, 240, 0.20);
}

/* ── V2.5 Microtransiciones sobrias en cards/rows/buttons ── */
.dt__table tbody tr {
  transition: background-color 140ms var(--ease-out-quart, ease),
              box-shadow 140ms var(--ease-out-quart, ease);
}
.btn {
  transition:
    background-color 140ms var(--ease-out-quart, ease),
    border-color 140ms var(--ease-out-quart, ease),
    color 140ms var(--ease-out-quart, ease),
    box-shadow 160ms var(--ease-out-quart, ease),
    transform 140ms var(--ease-out-quart, ease);
}
.btn:not(.btn--primary):not(.btn--link):hover { transform: translateY(-1px); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(7,135,240,0.32); }

/* ── V2.6 Alerta crítica en hero (clase opt-in: .hero-critical-alert) ── */
.hero-critical-alert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(239,68,68,0.18), rgba(245,158,11,0.10));
  border: 1px solid rgba(239, 68, 68, 0.40);
  color: #FECACA;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(239,68,68,0.18);
}
[data-theme="light"] .hero-critical-alert { color: #991B1B; background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.30); }

/* Reduced motion: heredamos guards globales ya definidos. */
@media (prefers-reduced-motion: reduce) {
  .sidebar .nav-link.active::after { box-shadow: none; }
  .tabs .tab,
  .tabs > button,
  .btn { transition: none; transform: none !important; }
}
/* === END VISUAL-QA-DESIGN-PILOT-V2 === */

/* UI-REDESIGN-F2 fin */

/* ====================================================================
   INEQ Clinical Command — Visual System Pilot V1 (módulo: ticketDetail)
   Aditivo y SCOPED a .ticket-hero / .tabs--browser. No toca estilos
   globales ni otros módulos. Reutiliza tokens --ineq-* / --c-* existentes
   (sin colores nuevos hardcodeados, sin fuentes externas, sin librerías).
   ==================================================================== */

/* --- Hero del detalle: superficie con jerarquía + barra de acento --- */
.ticket-hero {
  align-items: flex-start;
  background: var(--c-surface-2);
  background-image: var(--ineq-gradient-card);
  border: 1px solid var(--ineq-border-medium);
  border-radius: var(--ineq-radius-lg);
  box-shadow: var(--ineq-shadow-soft);
  padding: 16px 20px 16px 22px;
  position: relative;
  overflow: hidden;
}
.ticket-hero::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--ineq-gradient-primary);
}
.ticket-hero h1 {
  font-size: 24px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.ticket-hero .page-header__sub {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* --- Tabs tipo navegador: pestañas elevadas, activa inequívoca --- */
.tabs--browser {
  gap: 6px;
  margin-bottom: 14px;
}
.tabs--browser .tab {
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--ineq-radius-sm) var(--ineq-radius-sm) 0 0;
  padding: 9px 16px;
  color: var(--c-text-muted);
  position: relative;
  top: 1px;
  transition: background var(--ineq-motion-fast) var(--ineq-ease-standard),
              color var(--ineq-motion-fast) var(--ineq-ease-standard);
}
.tabs--browser .tab:hover {
  color: var(--c-text);
  background: rgba(var(--ineq-cyan-rgb), 0.07);
}
.tabs--browser .tab.active {
  color: var(--ineq-cyan);
  background: var(--c-surface);
  border-color: var(--c-border);
  border-bottom-color: var(--c-surface);
  box-shadow: inset 0 -2px 0 var(--ineq-cyan);
  font-weight: 600;
}
.tabs--browser .tab:focus-visible {
  outline: 2px solid var(--ineq-cyan);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .ticket-hero { padding: 14px 14px 14px 16px; }
  .ticket-hero h1 { font-size: 20px; }
  .tabs--browser .tab { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .tabs--browser .tab { transition: none; }
}
/* === END INEQ Clinical Command — Visual System Pilot V1 === */

/* ============================================================
   A002 — SIDEBAR PREMIUM POLISH (2026-05-30)
   ============================================================
   Refuerzos scoped al sidebar para llevar la sensación a premium:

   1. Trickle-up: el HEAD del grupo padre se ilumina cuando un
      sub-link interno está activo. Antes solo se marcaba el
      sub-item — el head quedaba neutro y "perdías" la ubicación
      al recorrer otras secciones del menú.
   2. Focus-visible institucional con anillo cyan offset (WCAG
      2.1 AA — keyboard navigation).
   3. Sub-items inactivos refinados: opacidad sutil + transición
      hover suave para diferenciar jerarquía sin "ruidear".
   4. Section labels (.nav-section) con micro-acento cyan a la
      izquierda — pista visual de bloque sin uppercase agresivo.
   5. Group head hover con micro-elevación coherente al
      nav-link:hover existente (translateX 2px).

   Todo aditivo. No reemplaza tokens ni reglas previas.
   Light theme variantes al final.
   ============================================================ */

/* — A002.1 Trickle-up: grupo padre con sub-link activo — */
.sidebar .nav-group.is-active-parent > .nav-group__head {
  color: var(--ineq-text-primary);
  background: linear-gradient(90deg, rgba(18,169,227,0.10) 0%, rgba(18,169,227,0.02) 70%, transparent 100%);
  box-shadow: inset 2px 0 0 var(--ineq-cyan-soft);
  font-weight: 600;
}
.sidebar .nav-group.is-active-parent > .nav-group__head .nav-link__icon {
  opacity: 1;
  color: var(--ineq-cyan-soft);
}
.sidebar .nav-group.is-active-parent > .nav-group__head .nav-group__chev {
  opacity: 0.95;
  color: var(--ineq-cyan-soft);
}

/* — A002.2 Focus-visible institucional (a11y WCAG) — */
.sidebar .nav-link:focus-visible,
.sidebar .nav-group__head:focus-visible {
  outline: 2px solid var(--ineq-cyan);
  outline-offset: 2px;
  border-radius: 8px;
}

/* — A002.3 Sub-items inactivos: jerarquía visual suave — */
.sidebar .nav-link--sub:not(.active) {
  opacity: 0.78;
  transition:
    opacity var(--motion-soft) var(--ease-out-quart),
    background-color var(--motion-soft) var(--ease-out-quart),
    transform var(--motion-soft) var(--ease-out-quart);
}
.sidebar .nav-link--sub:not(.active):hover {
  opacity: 1;
}

/* — A002.4 Section labels con micro-acento cyan — */
.sidebar .nav-section {
  position: relative;
}
.sidebar .nav-section::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--ineq-cyan);
  opacity: 0.45;
}
.app.is-sidebar-collapsed .sidebar .nav-section::before { display: none; }

/* — A002.5 Group head hover: micro-elevación consistente — */
.sidebar .nav-group__head {
  transition:
    background-color var(--motion-soft) var(--ease-out-quart),
    color var(--motion-soft) var(--ease-out-quart),
    transform var(--motion-soft) var(--ease-out-quart);
}
.sidebar .nav-group__head:hover { transform: translateX(2px); }

/* — A002.6 Sidebar collapsed: ocultar chev del head activo
   (ya hereda is-active-parent pero el chev colapsado
   pierde sentido visual sin texto) — */
.app.is-sidebar-collapsed .sidebar .nav-group.is-active-parent > .nav-group__head {
  box-shadow: inset 0 0 0 1px var(--ineq-cyan-soft);
  border-radius: 8px;
}

/* — A002.7 Light theme variantes — */
[data-theme="light"] .sidebar .nav-group.is-active-parent > .nav-group__head {
  color: var(--ineq-blue-deep);
  background: linear-gradient(90deg, rgba(7,135,240,0.10) 0%, rgba(7,135,240,0.02) 70%, transparent 100%);
  box-shadow: inset 2px 0 0 var(--ineq-blue);
}
[data-theme="light"] .sidebar .nav-group.is-active-parent > .nav-group__head .nav-link__icon,
[data-theme="light"] .sidebar .nav-group.is-active-parent > .nav-group__head .nav-group__chev {
  color: var(--ineq-blue);
}
[data-theme="light"] .sidebar .nav-link:focus-visible,
[data-theme="light"] .sidebar .nav-group__head:focus-visible {
  outline-color: var(--ineq-blue);
}
[data-theme="light"] .sidebar .nav-section::before {
  background: var(--ineq-blue);
  opacity: 0.55;
}

/* — A002.8 Reduced motion guard — */
@media (prefers-reduced-motion: reduce) {
  .sidebar .nav-group__head { transition: none; }
  .sidebar .nav-group__head:hover { transform: none; }
  .sidebar .nav-link--sub:not(.active) { transition: none; }
}

/* === END A002 — SIDEBAR PREMIUM POLISH === */

/* ============================================================
   T06 MOBILE-NAV-POLISH-V1 (2026-05-31)
   Polish opt-in del botón hamburger + drawer mobile.
   NO toca selectores existentes destructivamente — solo agrega
   propiedades sobre `.topbar__menu`, `.topbar__menu-icon` y un
   bloque `prefers-reduced-motion` para `.sidebar`. Reversible
   borrando este bloque.
   ============================================================ */

/* Botón hamburger: estilo táctil premium con focus visible y feedback. */
.topbar__menu {
  border-radius: 10px;
  padding: 6px 8px;
  color: var(--ineq-text-primary, #F4F8FF);
  transition:
    background var(--ineq-motion-base, 180ms) var(--ineq-ease-standard, ease),
    color var(--ineq-motion-base, 180ms) var(--ineq-ease-standard, ease),
    transform var(--ineq-motion-base, 180ms) var(--ineq-ease-standard, ease);
}
.topbar__menu:hover {
  background: rgba(18, 169, 227, 0.10);
  color: var(--ineq-cyan, #12A9E3);
}
.topbar__menu:active {
  transform: scale(0.96);
}
.topbar__menu:focus-visible {
  outline: 2px solid var(--ineq-cyan, #12A9E3);
  outline-offset: 2px;
  background: rgba(18, 169, 227, 0.08);
}
.topbar__menu[aria-expanded="true"] {
  background: rgba(18, 169, 227, 0.14);
  color: var(--ineq-cyan, #12A9E3);
}
.topbar__menu-icon {
  display: block;
  pointer-events: none;
}

/* Light theme — invierte fondo del botón abierto. */
[data-theme="light"] .topbar__menu { color: var(--ineq-blue-deep, #054B86); }
[data-theme="light"] .topbar__menu:hover {
  background: rgba(7, 135, 240, 0.08);
  color: var(--ineq-blue, #0787F0);
}
[data-theme="light"] .topbar__menu:focus-visible {
  outline-color: var(--ineq-blue, #0787F0);
  background: rgba(7, 135, 240, 0.06);
}
[data-theme="light"] .topbar__menu[aria-expanded="true"] {
  background: rgba(7, 135, 240, 0.10);
  color: var(--ineq-blue, #0787F0);
}

/* Reduced motion: elimina transition del drawer + del hamburger. */
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none !important; }
  .topbar__menu { transition: none !important; }
  .topbar__menu:active { transform: none; }
}

/* === END T06 MOBILE-NAV-POLISH-V1 === */

/* ============================================================
   T08 QA-FEEDBACK-BUTTON-POLISH-V1 (2026-05-31)
   ------------------------------------------------------------
   Polish del FAB universal "Reportar QA" en `qaAudit.js`:
   - Paleta INEQ oficial (cyan #12A9E3) sustituye el turquesa
     legacy `rgba(26,188,156)` heredado de versiones previas.
   - Layout flex con icono SVG `bug` Lucide + label.
   - Focus-visible cyan 2px box-shadow (a11y teclado).
   - Hover/active suaves con `prefers-reduced-motion` opt-out.
   - Variante light theme (`[data-theme="light"]`) con blue
     deep `#054B86` por contraste sobre fondo claro.
   - Aditivo. Override de propiedades específicas; el bloque
     base `.qa-feedback-fab` (línea ~1219) sigue siendo el
     fallback. Cero cambios a la lógica del bind ni al modal.
   ============================================================ */
.qa-feedback-fab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(18, 169, 227, 0.42);
  background: linear-gradient(180deg, rgba(13, 23, 38, 0.96), rgba(13, 23, 38, 0.92));
  color: var(--ineq-cyan-soft, #51C4F0);
  letter-spacing: 0.2px;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 120ms ease;
}
.qa-feedback-fab:hover {
  border-color: rgba(18, 169, 227, 0.65);
  background: linear-gradient(180deg, rgba(18, 169, 227, 0.18), rgba(7, 135, 240, 0.10));
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(18, 169, 227, 0.25);
}
.qa-feedback-fab:active {
  transform: scale(0.97);
}
.qa-feedback-fab:focus-visible {
  outline: 2px solid var(--ineq-cyan, #12A9E3);
  outline-offset: 2px;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.32),
    0 0 0 4px rgba(18, 169, 227, 0.22);
}
.qa-feedback-fab__icon {
  flex: 0 0 auto;
  display: inline-block;
  color: currentColor;
}
.qa-feedback-fab__label {
  flex: 0 1 auto;
  font-weight: 800;
}

/* Light theme: el FAB debe leerse claro sobre fondo claro sin
   convertirse en una mancha cyan saturada. Usamos azul institucional. */
[data-theme="light"] .qa-feedback-fab {
  background: linear-gradient(180deg, #ffffff, #F4F8FF);
  border-color: rgba(7, 135, 240, 0.42);
  color: var(--ineq-blue-deep, #054B86);
  box-shadow: 0 10px 22px rgba(7, 75, 134, 0.16);
}
[data-theme="light"] .qa-feedback-fab:hover {
  background: linear-gradient(180deg, rgba(7, 135, 240, 0.08), rgba(7, 135, 240, 0.04));
  border-color: rgba(7, 135, 240, 0.65);
  color: var(--ineq-blue, #0787F0);
  box-shadow: 0 14px 28px rgba(7, 75, 134, 0.22), 0 0 0 1px rgba(7, 135, 240, 0.28);
}
[data-theme="light"] .qa-feedback-fab:focus-visible {
  outline-color: var(--ineq-blue, #0787F0);
  box-shadow:
    0 14px 28px rgba(7, 75, 134, 0.22),
    0 0 0 4px rgba(7, 135, 240, 0.20);
}

/* Ocultar botón QA cuando hay un modal abierto */
body:has(dialog[open]) .qa-feedback-fab {
  display: none !important;
}
/* QA-FAB-FALLBACK (2026-06-03): fallback por clase para navegadores sin
   soporte de `:has()`. modal.js agrega/quita `body.modal-open` al abrir/cerrar
   cualquier modal genérico. Garantiza que el FAB "Reportar QA" nunca tape los
   botones del modal (Cancelar / Guardar / Agendar / etc.). */
body.modal-open .qa-feedback-fab {
  display: none !important;
}

/* Reduced motion: sin transitions ni transform en :active. */
@media (prefers-reduced-motion: reduce) {
  .qa-feedback-fab { transition: none; }
  .qa-feedback-fab:active { transform: none; }
}

/* Mobile (≤720px): mantiene el ajuste vertical del bloque
   `.qa-feedback-fab` original (línea ~4128) y refuerza tamaño
   mínimo de target táctil (≥36px) para a11y AA. */
@media (max-width: 720px) {
  .qa-feedback-fab {
    height: 38px;
    padding: 0 14px;
    font-size: 12px;
  }
}

/* === END T08 QA-FEEDBACK-BUTTON-POLISH-V1 === */

/* ============================================================================
   LOGIN-ACCESS-PREMIUM-V1 — Fondo premium global opt-in (2026-06-01)
   ----------------------------------------------------------------------------
   Sergio pidió que el estilo visual premium del login inspire toda la plataforma.
   Esta sección define una capa decorativa MUY sutil que se activa automáticamente
   en el shell autenticado (.app) sin tocar tablas, modales ni áreas de lectura
   intensiva. Características:

   - Pseudo-elemento ::before posicionado fixed detrás del contenido (z-index -1).
   - Dos radial-gradients en colores brand (--ineq-cyan + --ineq-blue) con alpha
     muy bajo (0.04-0.06) → no compite con datos.
   - Tablas, modales y cards mantienen su fondo opaco propio → legibilidad intacta.
   - Respeta @media (prefers-reduced-motion: reduce): sin animaciones.
   - Light theme: gradients más tenues aún (alpha 0.025-0.04).
   - NO usa imágenes externas. NO usa filtros costosos. Cero impacto en performance.

   Activación: la clase ".app" YA existe en el shell autenticado. La capa se
   monta automáticamente. Si en el futuro hay que desactivar, basta con remover
   este bloque o añadir clase ".app--no-premium-bg" al shell.
   ========================================================================= */

.app { position: relative; isolation: isolate; }
.app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 100% 0%,
      rgba(18, 169, 227, 0.06),
      transparent 60%),
    radial-gradient(800px 600px at 0% 100%,
      rgba(7, 135, 240, 0.05),
      transparent 65%),
    radial-gradient(500px 400px at 50% 100%,
      rgba(38, 47, 224, 0.025),
      transparent 70%);
  background-color: var(--ineq-bg-app);
}
.app.app--no-premium-bg::before { display: none; }
[data-theme="light"] .app::before {
  background:
    radial-gradient(900px 600px at 100% 0%,
      rgba(18, 169, 227, 0.04),
      transparent 60%),
    radial-gradient(800px 600px at 0% 100%,
      rgba(7, 135, 240, 0.025),
      transparent 65%);
  background-color: var(--ineq-bg-app);
}
@media (prefers-reduced-motion: reduce) {
  .app::before { animation: none; }
}
@media print {
  .app::before { display: none; }
}