/* ═══════════════════════════════════════════════════════════════
   RIOSMA RECLAMOS · Design System · Light Vivid Theme · v42
   Paleta: Teal · Índigo · Violeta · Ámbar · Coral
   Tipografía: Sora (display) + DM Sans (body)
   ═══════════════════════════════════════════════════════════════ */

/* El atributo HTML `hidden` nunca debe ser pisado por display de otros selectores */
[hidden] { display: none !important; }

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* ── Backgrounds ──────────────────────────────────── */
  --bg:         #f0f4f8;
  --bg-soft:    #f7f9fc;
  --surface:    #ffffff;
  --surface-2:  #f3f7ff;
  --surface-3:  #eef2fb;
  --overlay:    rgba(15,23,54,.48);

  /* ── Text ─────────────────────────────────────────── */
  --text:        #1a2540;
  --text-strong: #0d1530;
  --text-medium: #3d4f70;
  --muted:       #7a8eac;
  --subtle:      #a3b3c9;

  /* ── Borders ─────────────────────────────────────── */
  --line:        rgba(30,60,120,.10);
  --line-2:      rgba(30,60,120,.16);
  --line-3:      rgba(30,60,120,.26);
  --line-focus:  rgba(0,160,180,.55);

  /* ── Brand — Teal Riosma ─────────────────────────── */
  --teal:         #00b4c8;
  --teal-dark:    #007f90;
  --teal-light:   #e0f7fb;
  --teal-dim:     rgba(0,180,200,.12);
  --teal-glow:    rgba(0,180,200,.30);

  /* ── Accent — Índigo ─────────────────────────────── */
  --indigo:       #4361ee;
  --indigo-dark:  #2c46c8;
  --indigo-light: #eef0ff;
  --indigo-dim:   rgba(67,97,238,.12);
  --indigo-glow:  rgba(67,97,238,.28);

  /* ── Violet ───────────────────────────────────────── */
  --violet:       #7c3aed;
  --violet-light: #f3eeff;
  --violet-dim:   rgba(124,58,237,.12);
  --violet-glow:  rgba(124,58,237,.28);

  /* ── Semantic ─────────────────────────────────────── */
  --green:        #059669;
  --green-light:  #ecfdf5;
  --green-dim:    rgba(5,150,105,.12);
  --green-glow:   rgba(5,150,105,.28);
  --amber:        #d97706;
  --amber-light:  #fffbeb;
  --amber-dim:    rgba(217,119,6,.12);
  --amber-glow:   rgba(217,119,6,.28);
  --red:          #dc2626;
  --red-light:    #fef2f2;
  --red-dim:      rgba(220,38,38,.12);
  --red-glow:     rgba(220,38,38,.28);
  --coral:        #f43f5e;
  --coral-light:  #fff1f4;
  --coral-dim:    rgba(244,63,94,.12);

  /* ── Alias compat (usados en secciones operativas) ─ */
  --panel:   var(--surface);
  --panel-2: var(--surface-2);
  --panel-3: var(--surface-3);
  --blue:    var(--indigo);
  --blue-dim: var(--indigo-dim);
  --blue-glow: var(--indigo-glow);

  /* ── Typography ───────────────────────────────────── */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --fs-2xs:  10px;
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13.5px;
  --fs-md:   14.5px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  22px;
  --fs-3xl:  28px;

  /* ── Spacing — 4px grid ───────────────────────────── */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3:  12px; --sp-4: 16px;
  --sp-5:  20px; --sp-6:  24px; --sp-7:  28px; --sp-8: 32px;
  --sp-10: 40px; --sp-12: 48px;

  /* ── Radius ───────────────────────────────────────── */
  --r-xs:   6px;  --r-sm:  10px; --r-md:  14px;
  --r-lg:   20px; --r-xl:  28px; --r-pill: 999px;
  --radius: var(--r-md);

  /* ── Shadows ─────────────────────────────────────── */
  --shadow-xs:  0 1px 3px rgba(15,30,60,.08), 0 1px 2px rgba(15,30,60,.06);
  --shadow-sm:  0 2px 8px rgba(15,30,60,.09), 0 1px 3px rgba(15,30,60,.07);
  --shadow:     0 4px 20px rgba(15,30,60,.11), 0 2px 6px rgba(15,30,60,.07);
  --shadow-md:  0 8px 32px rgba(15,30,60,.13), 0 4px 10px rgba(15,30,60,.08);
  --shadow-lg:  0 20px 60px rgba(15,30,60,.16), 0 8px 20px rgba(15,30,60,.09);
  --shadow-xl:  0 32px 80px rgba(15,30,60,.20), 0 16px 30px rgba(15,30,60,.10);
  --shadow-teal:   0 8px 28px rgba(0,180,200,.22);
  --shadow-indigo: 0 8px 28px rgba(67,97,238,.22);
  --shadow-violet: 0 8px 28px rgba(124,58,237,.22);
  --shadow-green:  0 8px 28px rgba(5,150,105,.18);
  --shadow-blue:   0 8px 28px rgba(67,97,238,.22);

  /* ── Motion ──────────────────────────────────────── */
  --t-instant: .06s ease;
  --t-fast:    .12s ease;
  --t-base:    .20s ease;
  --t-slow:    .32s ease;
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ──────────────────────────────────────── */
  --top:    70px;
  --bottom: 82px;

  /* ── Topbar tokens (theme-aware) ────────────────── */
  --topbar-bg:          rgba(255,255,255,.92);
  --topbar-border:      rgba(30,60,120,.10);
  --topbar-shadow:      0 2px 16px rgba(15,30,60,.10);
  --topbar-brand-text:  var(--text-strong);
  --topbar-brand-muted: var(--muted);
  --topbar-brand-mark:  linear-gradient(135deg, var(--teal) 0%, var(--indigo) 100%);
  --topbar-btn-bg:      rgba(30,60,120,.06);
  --topbar-btn-border:  rgba(30,60,120,.14);
  --topbar-btn-text:    var(--text-medium);
  --topbar-btn-hover:   rgba(30,60,120,.12);

  /* ── Bottom nav tokens ───────────────────────────── */
  --nav-bg:             rgba(218,226,242,.98);
  --nav-border:         rgba(30,60,120,.18);
  --nav-shadow:         rgba(15,30,60,.15);
  --nav-text:           #3a4f72;

  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════════
   DARK PREMIUM THEME — [data-theme="dark"]
   ═══════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  /* ── Backgrounds ──────────────────────────────────── */
  --bg:         #080e1d;
  --bg-soft:    #0b1220;
  --surface:    #0f1929;
  --surface-2:  #152234;
  --surface-3:  #1c2d44;
  --overlay:    rgba(4,8,18,.62);

  /* ── Text ─────────────────────────────────────────── */
  --text:        #dde8f8;
  --text-strong: #f2f7ff;
  --text-medium: #8ba4c4;
  --muted:       #5b7799;
  --subtle:      #3d5478;

  /* ── Borders ─────────────────────────────────────── */
  --line:   rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --line-3: rgba(255,255,255,.22);
  --line-focus: rgba(0,220,240,.40);

  /* ── Brand — Teal ────────────────────────────────── */
  --teal:         #0ff0b4;
  --teal-dark:    #00b88a;
  --teal-light:   #012e22;
  --teal-dim:     rgba(15,240,180,.11);
  --teal-glow:    rgba(15,240,180,.30);

  /* ── Accent — Índigo ─────────────────────────────── */
  --indigo:       #738bff;
  --indigo-dark:  #4a66ff;
  --indigo-light: #0a1040;
  --indigo-dim:   rgba(115,139,255,.13);
  --indigo-glow:  rgba(115,139,255,.30);

  /* ── Violet ───────────────────────────────────────── */
  --violet:       #b47cff;
  --violet-light: #1a0838;
  --violet-dim:   rgba(180,124,255,.13);
  --violet-glow:  rgba(180,124,255,.30);

  /* ── Semantic ─────────────────────────────────────── */
  --green:        #10d98c;
  --green-light:  #011e14;
  --green-dim:    rgba(16,217,140,.12);
  --green-glow:   rgba(16,217,140,.28);
  --amber:        #ffb820;
  --amber-light:  #1e1200;
  --amber-dim:    rgba(255,184,32,.12);
  --amber-glow:   rgba(255,184,32,.28);
  --red:          #ff4d6d;
  --red-light:    #1e0008;
  --red-dim:      rgba(255,77,109,.12);
  --red-glow:     rgba(255,77,109,.28);
  --coral:        #ff6b8a;
  --coral-light:  #1e0010;
  --coral-dim:    rgba(255,107,138,.12);

  /* ── Alias compat ─────────────────────────────────── */
  --panel:   var(--surface);
  --panel-2: var(--surface-2);
  --panel-3: var(--surface-3);
  --blue:    var(--indigo);
  --blue-dim: var(--indigo-dim);
  --blue-glow: var(--indigo-glow);

  /* ── Shadows ─────────────────────────────────────── */
  --shadow-xs:  0 1px 3px rgba(0,0,0,.30);
  --shadow-sm:  0 2px 8px rgba(0,0,0,.32);
  --shadow:     0 4px 20px rgba(0,0,0,.38);
  --shadow-md:  0 8px 32px rgba(0,0,0,.44);
  --shadow-lg:  0 20px 60px rgba(0,0,0,.52);
  --shadow-xl:  0 32px 80px rgba(0,0,0,.60);
  --shadow-teal:   0 8px 28px rgba(15,240,180,.18);
  --shadow-indigo: 0 8px 28px rgba(115,139,255,.18);
  --shadow-violet: 0 8px 28px rgba(180,124,255,.18);
  --shadow-green:  0 8px 28px rgba(16,217,140,.15);
  --shadow-blue:   0 8px 28px rgba(115,139,255,.18);

  /* ── Topbar tokens ───────────────────────────────── */
  --topbar-bg:          rgba(8,14,29,.97);
  --topbar-border:      rgba(255,255,255,.07);
  --topbar-shadow:      0 2px 20px rgba(0,0,0,.35);
  --topbar-brand-text:  #fff;
  --topbar-brand-muted: rgba(255,255,255,.50);
  --topbar-brand-mark:  linear-gradient(135deg, var(--teal) 0%, var(--indigo) 100%);
  --topbar-btn-bg:      rgba(255,255,255,.08);
  --topbar-btn-border:  rgba(255,255,255,.18);
  --topbar-btn-text:    rgba(255,255,255,.75);
  --topbar-btn-hover:   rgba(255,255,255,.16);

  /* ── Bottom nav tokens ───────────────────────────── */
  --nav-bg:             rgba(8,14,29,.97);
  --nav-border:         rgba(255,255,255,.07);
  --nav-shadow:         rgba(0,0,0,.40);
  --nav-text:           #8ba4c4;

  color-scheme: dark;
}

/* Dark mode: fondo con gradientes propios del dark */
:root[data-theme="dark"] body {
  background-image:
    radial-gradient(ellipse 80% 50% at 15% -10%, rgba(15,240,180,.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 110%, rgba(115,139,255,.06) 0%, transparent 60%);
}

/* ── 2. RESET / BASE ──────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  background-image:
    radial-gradient(ellipse 80% 50% at 15% -10%, rgba(0,180,200,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 110%, rgba(67,97,238,.06) 0%, transparent 60%);
}

::selection {
  background: var(--teal-dim);
  color: var(--teal-dark);
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  {
  background: var(--line-2);
  border-radius: var(--r-pill);
  transition: background var(--t-fast);
}
::-webkit-scrollbar-thumb:hover { background: var(--line-3); }

button, input, select, textarea { font-family: var(--font-body); font-size: var(--fs-base); }
button { cursor: pointer; }
img    { max-width: 100%; display: block; }
p      { margin: 0; color: var(--text-medium); line-height: 1.6; }
a      { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  background: var(--surface-2); color: var(--teal-dark);
  padding: 2px 7px; border-radius: var(--r-xs); font-size: var(--fs-sm);
  border: 1px solid var(--line);
}

/* ── 3. TYPOGRAPHY ────────────────────────────────────────────── */
h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.15;
  font-family: var(--font-display);
  color: var(--text-strong);
  letter-spacing: -.3px;
}
h1 { font-size: clamp(24px, 3.5vw, 42px); font-weight: 800; letter-spacing: -.5px; }
h2 { font-size: clamp(20px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.4px; }
h3 { font-size: var(--fs-xl); font-weight: 600; }
h4 { font-size: var(--fs-lg); font-weight: 600; }

.muted { color: var(--muted); font-size: var(--fs-base); }

.eyebrow {
  display: inline-block;
  color: var(--teal-dark);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-bottom: var(--sp-2);
}

/* ── 4. LAYOUT ────────────────────────────────────────────────── */
.scroll-area {
  position: fixed;
  inset: var(--top) 0 var(--bottom) 0;
  overflow: auto;
  padding: var(--sp-6) clamp(var(--sp-4), 4vw, var(--sp-8)) var(--sp-10);
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.screen {
  display: none;
  max-width: 1360px;
  margin: 0 auto;
}

.screen.active {
  display: block;
  animation: screenReveal .28s var(--ease-out) both;
}

@keyframes screenReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.screen.active > * { animation: itemRise .32s var(--ease-out) both; }
.screen.active > *:nth-child(1) { animation-delay: .04s; }
.screen.active > *:nth-child(2) { animation-delay: .08s; }
.screen.active > *:nth-child(3) { animation-delay: .12s; }
.screen.active > *:nth-child(4) { animation-delay: .16s; }
.screen.active > *:nth-child(5) { animation-delay: .20s; }
.screen.active > *:nth-child(n+6) { animation-delay: .24s; }

@keyframes itemRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes uiRiseIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.screen.active .kpi         { animation: uiRiseIn .28s var(--ease-out) both; }
.screen.active .kpi:nth-child(2) { animation-delay: .04s; }
.screen.active .kpi:nth-child(3) { animation-delay: .08s; }
.screen.active .kpi:nth-child(4) { animation-delay: .12s; }
.screen.active .kpi:nth-child(5) { animation-delay: .16s; }
.screen.active .case-card   { animation: uiRiseIn .26s var(--ease-out) both; }
.screen.active .catalog-card { animation: uiRiseIn .26s var(--ease-out) both; }

/* ── 5. TOPBAR ────────────────────────────────────────────────── */
.topbar {
  position: fixed; inset: 0 0 auto 0;
  min-height: var(--top); z-index: 110;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: 8px clamp(var(--sp-4), 3vw, var(--sp-8));
  box-sizing: border-box;
  background: var(--topbar-bg);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid var(--topbar-border);
  box-shadow: var(--topbar-shadow);
  transition: background var(--t-slow), border-color var(--t-slow), box-shadow var(--t-slow);
}

.brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }

.brand-mark {
  width: 38px; height: 38px; border-radius: var(--r-md); flex-shrink: 0;
  background: var(--topbar-brand-mark);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 20px; font-weight: 800;
  box-shadow: var(--shadow-teal);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.brand-mark:hover { transform: scale(1.06); box-shadow: var(--shadow-indigo); }

.brand strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 700;
  color: var(--topbar-brand-text); letter-spacing: -.3px;
  transition: color var(--t-slow);
}
.brand small {
  display: block; color: var(--topbar-brand-muted);
  font-size: var(--fs-sm); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 55vw;
  transition: color var(--t-slow);
}

.brand-actions { display: flex; align-items: center; gap: var(--sp-2); }
.clear-cache-btn {
  min-width: 32px; min-height: 32px; border-radius: var(--r-sm);
  border: 1px solid var(--topbar-btn-border); background: var(--topbar-btn-bg);
  color: var(--topbar-btn-text); font-size: 15px;
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.clear-cache-btn:hover { background: var(--topbar-btn-hover); color: var(--topbar-brand-text); transform: rotate(-30deg); }
.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  min-width: 0;
  flex-wrap: wrap;
}

.operator-select {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: rgba(255,255,255,.55); font-size: var(--fs-sm); white-space: nowrap;
}
.operator-select select {
  width: auto; margin: 0; padding: 6px var(--sp-3);
  background: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.30);
  border-radius: var(--r-pill); color: var(--text-strong);
  font-size: var(--fs-sm); font-weight: 600;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.operator-select select:focus { border-color: rgba(255,255,255,.5); outline: none; }
.operator-select select option { background: #fff; color: var(--text-strong); }

.sync-state {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px var(--sp-3);
  border: 1px solid var(--topbar-btn-border); border-radius: var(--r-pill);
  background: var(--topbar-btn-bg); color: var(--topbar-btn-text);
  font-size: var(--fs-xs); font-weight: 600;
  transition: color var(--t-base), border-color var(--t-base), background var(--t-slow);
}
.sync-state i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber); flex-shrink: 0;
  animation: pulseDot 2.4s ease-in-out infinite;
}
.sync-state.ok  i { background: var(--green); animation-name: pulseDotGreen; }
.sync-state.bad i { background: var(--red);   animation: none; }

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.8); }
}
@keyframes pulseDotGreen {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(5,150,105,.4); }
  50%       { opacity: .8; box-shadow: 0 0 0 4px rgba(5,150,105,.0); }
}

.icon-btn {
  min-width: 36px; min-height: 36px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text-medium); display: grid; place-items: center;
  font-size: 16px;
  transition: background var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast), box-shadow var(--t-fast);
}
.icon-btn:hover {
  background: var(--surface-2); border-color: var(--line-2);
  transform: translateY(-1px); box-shadow: var(--shadow-xs);
}

/* Botón icon en topbar — usa colores del topbar, no del surface */
.topbar-icon-btn {
  border-color: var(--topbar-btn-border) !important;
  background: var(--topbar-btn-bg) !important;
  color: var(--topbar-btn-text) !important;
}
.topbar-icon-btn:hover {
  background: var(--topbar-btn-hover) !important;
  color: var(--topbar-brand-text) !important;
  transform: translateY(-1px) scale(1.08);
}

.theme-toggle-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--topbar-btn-border);
  background: var(--topbar-btn-bg);
  color: var(--topbar-brand-text);
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}
.theme-toggle-btn:hover {
  background: var(--topbar-btn-hover);
  transform: translateY(-1px);
}
.theme-toggle-btn[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--teal) 45%, var(--topbar-btn-border));
}
.topbar-user-menu {
  align-items: center;
  margin-right: 0;
  min-width: 0;
}

.topbar-pill-btn,
.topbar-logout-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--topbar-btn-border);
  background: var(--topbar-btn-bg);
  color: var(--topbar-brand-text);
  font-size: var(--fs-xs);
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.topbar-pill-btn:hover,
.topbar-pill-btn:focus-visible,
.topbar-logout-btn:hover,
.topbar-logout-btn:focus-visible {
  outline: none;
  background: var(--topbar-btn-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}
.topbar-logout-btn {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 42%, var(--topbar-btn-border));
  background: color-mix(in srgb, var(--red-dim, #fee2e2) 66%, transparent);
}
.topbar-logout-btn:hover,
.topbar-logout-btn:focus-visible {
  color: #fff;
  border-color: var(--red);
  background: var(--red);
}

#refreshBtn {
  min-width: 78px; border-radius: var(--r-pill);
  border: 1px solid var(--topbar-btn-border); background: var(--topbar-btn-bg);
  color: var(--topbar-brand-text); font-size: var(--fs-sm); font-weight: 700;
  gap: 5px; padding: 0 var(--sp-3);
  letter-spacing: .3px;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
#refreshBtn:hover {
  background: var(--topbar-btn-hover); border-color: var(--topbar-btn-border);
  box-shadow: var(--shadow-xs);
}

/* ── 6. BOTTOM NAVIGATION ─────────────────────────────────────── */
.bottom-nav {
  position: fixed; inset: auto 0 0 0;
  height: var(--bottom); z-index: 60;
  display: flex;
  background: var(--nav-bg);
  backdrop-filter: blur(24px) saturate(2);
  -webkit-backdrop-filter: blur(24px) saturate(2);
  border-top: 2px solid var(--nav-border);
  box-shadow: 0 -6px 28px var(--nav-shadow), 0 -1px 0 var(--nav-border);
  padding-bottom: env(safe-area-inset-bottom);
  transition: background var(--t-slow), border-color var(--t-slow);
}

.nav-btn {
  flex: 1; background: transparent; border: 0; border-radius: 0;
  color: var(--nav-text); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .3px;
  padding: var(--sp-1) var(--sp-1);
  position: relative; overflow: hidden;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-btn span {
  font-size: 26px; line-height: 1;
  transition: transform var(--t-base), filter var(--t-base);
  filter: drop-shadow(0 1px 2px rgba(30,60,120,.18));
}
.nav-btn:hover { color: var(--indigo); background: rgba(67,97,238,.10); }
.nav-btn:hover span { filter: drop-shadow(0 2px 8px rgba(67,97,238,.30)); }
.nav-btn.active { color: var(--indigo); font-weight: 800; }
.nav-btn.active span {
  transform: translateY(-3px) scale(1.12);
  filter: drop-shadow(0 3px 8px rgba(67,97,238,.45));
}

.nav-btn.active::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 34px; height: 3.5px; border-radius: 0 0 var(--r-pill) var(--r-pill);
  background: linear-gradient(90deg, var(--teal), var(--indigo));
  box-shadow: 0 2px 12px var(--teal-glow);
  animation: indicatorSlide .28s var(--ease-spring) both;
}

@keyframes indicatorSlide {
  from { width: 0; opacity: 0; }
  to   { width: 34px; opacity: 1; }
}

.nav-btn::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, var(--teal-dim) 1%, transparent 70%);
  opacity: 0; transform: scale(0);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.nav-btn:active::after { opacity: 1; transform: scale(2.5); transition-duration: .1s; }

/* ── 7. BUTTONS ───────────────────────────────────────────────── */
.primary, .secondary, .ghost, .danger, .accent {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  border: 1px solid transparent; border-radius: var(--r-md);
  padding: 10px var(--sp-5);
  font-size: var(--fs-base); font-weight: 600;
  line-height: 1; white-space: nowrap;
  transition:
    transform var(--t-fast), box-shadow var(--t-base),
    background var(--t-fast), border-color var(--t-fast),
    filter var(--t-fast), color var(--t-fast);
  position: relative; overflow: hidden;
}

.primary::before, .accent::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .5s ease;
}
.primary:hover::before, .accent:hover::before { transform: translateX(100%); }

.primary {
  background: linear-gradient(135deg, var(--teal) 0%, var(--indigo) 100%);
  color: #fff;
  box-shadow: 0 2px 12px var(--indigo-dim);
}
.primary:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-indigo);
  filter: brightness(1.06);
}

.accent {
  background: linear-gradient(135deg, var(--violet) 0%, var(--indigo) 100%);
  color: #fff;
  box-shadow: 0 2px 12px var(--violet-dim);
}
.accent:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-violet);
  filter: brightness(1.06);
}

.secondary {
  background: var(--surface);
  border-color: var(--line-2); color: var(--text);
  box-shadow: var(--shadow-xs);
}
.secondary:not(:disabled):hover {
  background: var(--surface-2); border-color: var(--line-3);
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}

.ghost {
  background: transparent;
  border-color: var(--line-2); color: var(--text-medium);
}
.ghost:not(:disabled):hover { background: var(--surface-2); color: var(--text); border-color: var(--line-3); }

.danger {
  background: var(--red-dim); border-color: rgba(220,38,38,.30);
  color: var(--red);
}
.danger:not(:disabled):hover { background: var(--coral-dim); border-color: var(--red); }

.big { padding: 13px var(--sp-7); font-size: var(--fs-md); border-radius: var(--r-lg); }

button:active:not(:disabled) { transform: scale(.96) !important; }
button:disabled { opacity: .45; cursor: not-allowed; filter: saturate(.4); }
button:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; box-shadow: 0 0 0 4px var(--teal-dim); }

.row-actions {
  display: flex; gap: var(--sp-2);
  justify-content: flex-end; flex-wrap: wrap;
}
.row-actions button { min-height: 40px; padding: 8px var(--sp-4); }
.drawer-actions { justify-content: flex-start; gap: var(--sp-2); margin-top: var(--sp-1); }
.left-actions { justify-content: flex-start; margin-top: var(--sp-3); flex-wrap: wrap; }

/* ── 8. CARDS ─────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: 0 3px 16px rgba(30,50,100,.09), 0 1px 4px rgba(30,50,100,.06);
  transition:
    box-shadow var(--t-base),
    border-color var(--t-base),
    transform var(--t-base);
}
.card:not(.sticky-head):hover {
  border-color: var(--line-2);
  box-shadow: 0 8px 32px rgba(30,50,100,.13), 0 2px 8px rgba(30,50,100,.08);
  transform: translateY(-2px);
}
.card.compact { padding: var(--sp-4); }
.card h3 { font-size: var(--fs-xl); font-weight: 600; margin-bottom: var(--sp-4); color: var(--text-strong); }
.card-header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.card-header-row p { margin: var(--sp-1) 0 0; font-size: var(--fs-base); }

.hero-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-6);
  align-items: center;
  background:
    linear-gradient(135deg,
      rgba(0,180,200,.08) 0%,
      rgba(67,97,238,.06) 50%,
      rgba(124,58,237,.05) 100%),
    var(--surface);
  border: 1px solid rgba(0,180,200,.22);
  border-radius: var(--r-xl);
  padding: clamp(var(--sp-5), 4vw, var(--sp-8));
  box-shadow: var(--shadow-md);
  position: relative; overflow: hidden;
}
.hero-card::after {
  content: "";
  position: absolute; top: -40px; right: -40px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(67,97,238,.08), transparent 70%);
  pointer-events: none;
}

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-5);
}
.section-head h2 { color: var(--text-strong); }
.section-head p  { margin: var(--sp-1) 0 0; font-size: var(--fs-base); }

.sticky-head {
  position: sticky; top: -24px; z-index: 15;
  padding: var(--sp-3) 0;
  background: linear-gradient(180deg, var(--bg) 65%, transparent 100%);
}

/* ── 9. FORM ELEMENTS ─────────────────────────────────────────── */
label {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  margin-bottom: var(--sp-1);
}

input, select, textarea {
  width: 100%;
  margin-top: var(--sp-2);
  border: 1.5px solid var(--line-2);
  background: var(--bg-soft);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 10px var(--sp-3);
  font-size: var(--fs-base);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
input:hover, select:hover, textarea:hover {
  border-color: var(--line-3);
  background: var(--surface);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--teal);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--teal-dim);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
input[readonly] {
  background: var(--surface-2); color: var(--text-medium);
  cursor: default; border-style: dashed;
}
input::placeholder, textarea::placeholder { color: var(--subtle); }
textarea { resize: vertical; min-height: 82px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-4); }
.grid-4    { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-3); margin: var(--sp-3) 0; }
.grid-3    { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-3); }
.grid-2    { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-3); }
.span-2    { grid-column: span 2; }
.hidden-field { display: none !important; }

.form-new-layout { display: grid; grid-template-columns: 380px 1fr; gap: var(--sp-4); align-items: start; }
.form-left-col  { grid-column: 1; }
.form-right-col { grid-column: 2; position: sticky; top: 4px; align-self: start; }
.form-full-row  { grid-column: 1 / -1; }
.form-compact-section { padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.form-compact-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.action-bar {
  position: sticky; bottom: -38px; z-index: 16;
  display: flex; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.input-with-icon { position: relative; display: flex; align-items: center; }
.input-with-icon input { padding-right: 40px; }
.input-with-icon .icon-btn {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 0; border-radius: var(--r-xs);
  font-size: 14px; border: none; background: transparent; color: var(--muted); margin-top: 0; flex-shrink: 0;
}
.input-with-icon .icon-btn:hover { background: var(--surface-2); color: var(--text); }
.hidden-picker { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; top: 0; left: 0; }

/* ── Custom autocomplete dropdown ─────────────────────────────── */
.ac-dropdown {
  position: fixed;
  z-index: 400;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  max-height: 260px;
  overflow-y: auto;
  animation: itemRise .12s var(--ease-out) both;
  overscroll-behavior: contain;
}
.ac-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px var(--sp-4);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast);
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.ac-active {
  background: var(--teal-dim);
}
.ac-code {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--teal-dark);
  font-size: var(--fs-sm);
  min-width: 44px;
  flex-shrink: 0;
  background: var(--teal-light);
  border-radius: var(--r-xs);
  padding: 1px 6px;
  text-align: center;
}
.ac-text {
  color: var(--text);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ac-empty {
  padding: var(--sp-3) var(--sp-4);
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ── 10. TABLES ───────────────────────────────────────────────── */
.table-wrap {
  width: 100%; overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

table { width: 100%; border-collapse: collapse; min-width: 920px; }

th, td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: middle;
}
th {
  color: var(--text-medium); font-size: var(--fs-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px;
  background: var(--surface-2);
  border-bottom: 1.5px solid var(--line-2);
  position: sticky; top: 0; z-index: 2;
}
td { font-size: var(--fs-base); color: var(--text); }

tr { transition: background var(--t-fast); }
tr:last-child td { border-bottom: none; }

tbody tr:nth-child(even) td { background: rgba(15,30,60,.025); }

tr:hover td { background: var(--indigo-dim) !important; }
.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: var(--teal-dim) !important; }

@keyframes rowSlideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.row-new { animation: rowSlideIn .24s var(--ease-out) both; }

.amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.items-table input, .items-table select { min-width: 100px; margin: 0; padding: 7px var(--sp-2); background: var(--bg); border-color: var(--line-2); }
.items-table .desc-input { min-width: 260px; }
.input-table-wrap { margin-top: var(--sp-3); }
.totals-row {
  display: flex; justify-content: flex-end; flex-wrap: wrap;
  gap: var(--sp-4); padding: var(--sp-3) var(--sp-1) 0;
  color: var(--muted); font-size: var(--fs-sm);
}
.totals-row strong { color: var(--text-strong); font-size: var(--fs-md); font-weight: 700; }
#dashCasesList table { min-width: 700px; }
#dashCasesList { content-visibility: auto; contain-intrinsic-size: 0 600px; }

.col-check { width: 36px; padding: 0 var(--sp-1); text-align: center; }
.col-check input[type="checkbox"], .case-check { width: 16px; height: 16px; accent-color: var(--teal); margin: 0; cursor: pointer; }

/* ── 11. BADGES ───────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px var(--sp-2); border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: var(--fs-xs); font-weight: 700;
  white-space: nowrap; line-height: 1.4;
  letter-spacing: .2px;
}

.badge.ABIERTO, .badge.REABIERTO {
  background: var(--indigo-light); color: var(--indigo-dark);
  border-color: rgba(67,97,238,.25);
}
.badge.BORRADOR {
  background: var(--surface-2); color: var(--text-medium);
  border-color: var(--line-2);
}
.badge.CERRADO {
  background: var(--green-light); color: var(--green);
  border-color: rgba(5,150,105,.25);
}
.badge.ANULADO {
  background: var(--red-light); color: var(--red);
  border-color: rgba(220,38,38,.25);
}
.badge.EN_PROCESO,
.badge[class*="PENDIENTE"],
.badge.EN_ANALISIS,
.badge.REUBICAR_MERCADERIA {
  background: var(--amber-light); color: var(--amber);
  border-color: rgba(217,119,6,.25);
}
.badge.sync-pending { background: var(--amber-light); color: var(--amber); border-color: rgba(217,119,6,.25); }
.badge.sync-error   { background: var(--red-light);   color: var(--red);   border-color: rgba(220,38,38,.25); }
.badge.sync-synced, .badge.sync- { background: var(--green-light); color: var(--green); border-color: rgba(5,150,105,.25); }
.badge.decision-badge {
  margin-left: var(--sp-1);
  background: var(--amber-light); color: var(--amber);
  border-color: rgba(217,119,6,.28);
}
.badge.decision-badge.needs-owner-attention {
  background: linear-gradient(90deg, var(--amber-light), var(--coral-light));
  color: var(--coral); border-color: rgba(244,63,94,.28);
  animation: attentionPulse 2.5s ease-in-out infinite;
}
@keyframes attentionPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244,63,94,.20); }
  50%       { box-shadow: 0 0 0 4px rgba(244,63,94,.0); }
}

/* ── 12. KPI GRID ─────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
}
.kpi-grid-secondary { margin-top: calc(var(--sp-4) * -1 + var(--sp-2)); }

.kpi {
  background: linear-gradient(155deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  min-height: 120px;
  position: relative; overflow: hidden;
  cursor: default;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  border-left: 4px solid var(--indigo);
  box-shadow: 0 4px 20px rgba(30,50,100,.10), 0 1px 4px rgba(30,50,100,.06);
}

.kpi::after {
  content: "";
  position: absolute; bottom: -20px; right: -20px;
  width: 80px; height: 80px; border-radius: 50%;
  background: radial-gradient(circle, var(--indigo-dim) 0%, transparent 70%);
  pointer-events: none;
  transition: transform var(--t-slow);
}
.kpi:hover::after { transform: scale(1.5); }

.kpi.warn        { border-left-color: var(--amber); }
.kpi.ok          { border-left-color: var(--green); }
.kpi.money       { border-left-color: var(--violet); }
.kpi.danger-kpi  { border-left-color: var(--red); }

.kpi.warn::after    { background: radial-gradient(circle, var(--amber-dim),  transparent 70%); }
.kpi.ok::after      { background: radial-gradient(circle, var(--green-dim),  transparent 70%); }
.kpi.money::after   { background: radial-gradient(circle, var(--violet-dim), transparent 70%); }
.kpi.danger-kpi::after { background: radial-gradient(circle, var(--red-dim), transparent 70%); }

.kpi span {
  display: block;
  color: var(--muted); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700;
}
.kpi strong {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: 700; color: var(--text-strong); line-height: 1.2;
  margin: var(--sp-2) 0 var(--sp-1);
  transition: color var(--t-base);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -.2px;
  font-variant-numeric: tabular-nums;
}
.kpi small { color: var(--muted); font-size: var(--fs-sm); }

.kpi:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-2);
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kpi.visible strong { animation: countUp .4s var(--ease-out) both; }

/* ── 13. DASHBOARD ────────────────────────────────────────────── */
.dash-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  transition: max-height var(--t-slow), opacity var(--t-slow), padding var(--t-slow);
  overflow: hidden;
}
.dash-filters.filters-hidden {
  max-height: 0 !important; opacity: 0;
  padding-top: 0 !important; padding-bottom: 0 !important;
  margin-bottom: 0 !important; border: none !important;
}
.dash-filters select {
  margin-top: 0 !important; padding: 8px var(--sp-3) !important;
  font-size: var(--fs-sm); min-width: 0; width: 100%;
  text-overflow: ellipsis; overflow: hidden;
}

.dashboard-insights { margin: var(--sp-3) 0; }
.dashboard-insights .card-header-row { align-items: flex-start; }
.dashboard-insights .card-header-row p { margin: var(--sp-1) 0 0; max-width: 780px; }
#dashAnalysisStatus { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .5px; }

.dash-charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--sp-4); margin: var(--sp-4) 0;
}
.dash-chart-card {
  min-height: 90px;
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.dash-chart-card:hover { box-shadow: var(--shadow-md); }
.dash-chart-card h3 {
  font-size: var(--fs-md); font-weight: 600; margin-bottom: var(--sp-3);
  color: var(--text-strong);
}
.dash-charts-advanced .dash-chart-card { min-height: 250px; }
.bar-chart { display: block; width: 100%; overflow: visible; }
.chart-label { font-size: var(--fs-sm); fill: var(--muted); font-family: inherit; }
.chart-val   { font-size: var(--fs-sm); fill: var(--text);  font-weight: 700; font-family: inherit; }
.column-chart-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
.column-chart { display: block; overflow: visible; }
.cause-chart-card { min-height: 310px; }
.cause-chart-card .chart-label { font-size: var(--fs-xs); fill: var(--text); }
.cause-chart-card .chart-val   { font-size: var(--fs-sm); fill: var(--text); font-weight: 700; }

/* Resolucion por tipo chart */
.resolucion-bars { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.res-row { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 8px; }
.res-label { font-size: var(--fs-sm); color: var(--text-medium); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-bar-track { height: 10px; background: var(--surface-3); border-radius: 5px; overflow: hidden; }
.res-bar-fill { height: 100%; background: linear-gradient(90deg, var(--green), var(--teal)); border-radius: 5px; transition: width .4s var(--ease-out); min-width: 4px; }
.res-val { font-size: var(--fs-xs); font-weight: 700; color: var(--text-medium); white-space: nowrap; }

/* Last logistics event badge in drawer */
.last-event-badge {
  background: linear-gradient(135deg, var(--violet-light), var(--indigo-light));
  border: 1px solid rgba(124,58,237,.25);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  display: flex; flex-direction: column; gap: 3px;
}
.last-event-badge .event-badge-type {
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--violet);
}
.last-event-badge .event-badge-text {
  font-size: var(--fs-base); font-weight: 600; color: var(--text-strong);
}
.last-event-badge .event-badge-meta {
  font-size: var(--fs-xs); color: var(--muted);
}

.sla-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3); width: 100%; margin-top: var(--sp-3);
}
.sla-strip span {
  display: block;
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-4);
  background: var(--surface-2);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.sla-strip span:hover {
  background: var(--surface);
  border-color: rgba(0,180,200,.3);
  transform: translateY(-2px);
}
.sla-strip b {
  display: block; color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 26px; font-weight: 700; line-height: 1;
}
.sla-strip small { display: block; margin-top: var(--sp-2); color: var(--muted); font-size: var(--fs-sm); }

/* Filters (cases screen) */
.filters { display: grid; grid-template-columns: 1fr 200px 200px; gap: var(--sp-3); margin-bottom: var(--sp-3); }

/* Recurrent clients */
.recurrent-card { margin-top: var(--sp-3); }
.recurrent-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-2); }
.recurrent-client-card {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-3);
  align-items: center; width: 100%; text-align: left;
  border: 1px solid rgba(220,38,38,.22); border-radius: var(--r-md);
  padding: var(--sp-3); color: var(--text);
  background: linear-gradient(135deg, rgba(244,63,94,.07), rgba(67,97,238,.04));
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.recurrent-client-card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(244,63,94,.10); border-color: rgba(244,63,94,.38); }
.recurrent-client-card strong { display: block; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recurrent-client-card small  { display: block; color: var(--muted); margin-top: 2px; font-size: var(--fs-sm); }
.recurrent-client-card b  { color: var(--red); white-space: nowrap; }
.recurrent-client-card em { color: var(--text-strong); font-style: normal; white-space: nowrap; }

/* Mini table */
.dash-mini-table { border-radius: var(--r-md); background: var(--surface-2); }
.dash-mini-table table { min-width: 520px; }
.dash-mini-table th, .dash-mini-table td { padding: 9px var(--sp-2); }
.dash-mini-table th { font-size: var(--fs-2xs); }
.dash-rank-label strong { display: block; color: var(--text-strong); font-size: var(--fs-sm); max-width: 270px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-rank-label span   { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; max-width: 270px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Pagination */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-2); padding: var(--sp-4) 0;
  flex-wrap: wrap; color: var(--muted); font-size: var(--fs-base);
}
.pagination button {
  min-width: 36px; height: 36px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text-medium); font-size: var(--fs-sm); font-weight: 600;
  padding: 7px var(--sp-3); min-height: 40px;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.pagination button:not(:disabled):hover { background: var(--surface-2); border-color: var(--line-2); color: var(--text); }
.pagination button.active {
  background: var(--indigo); border-color: var(--indigo);
  color: #fff; box-shadow: var(--shadow-indigo);
}

/* Bulk bar */
.bulk-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--indigo-light);
  border: 1px solid rgba(67,97,238,.22);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-3);
  animation: itemRise .2s var(--ease-out) both;
}
.bulk-bar span { flex: 1; color: var(--indigo); font-weight: 700; font-size: var(--fs-sm); }

/* Needs-owner row highlight */
.needs-owner-attention-row { background: linear-gradient(90deg, rgba(217,119,6,.07), transparent 55%); box-shadow: inset 4px 0 0 rgba(217,119,6,.50); }
.needs-owner-attention-row:hover { background: linear-gradient(90deg, rgba(217,119,6,.12), rgba(67,97,238,.05)); }

/* ── 14. CASE CARDS / LIST ────────────────────────────────────── */
.case-list { display: grid; gap: var(--sp-3); }
.case-card {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-4); display: grid; grid-template-columns: 1fr auto;
  gap: var(--sp-3); align-items: center;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.case-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(67,97,238,.22); }
.case-card h3  { margin-bottom: 5px; }
.case-card p   { margin: 0; }
.case-card .meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }

/* ── 15. EMPTY STATE & LOADING ────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--sp-12) var(--sp-6);
  text-align: center; gap: var(--sp-3);
  color: var(--muted);
  border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  background: var(--surface); font-size: var(--fs-md); line-height: 1.6;
}
.empty-state h4 { color: var(--text-medium); font-size: var(--fs-lg); }
.empty-state p  { font-size: var(--fs-base); max-width: 340px; }

.skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--surface-3) 50%,
    var(--surface-2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}
.skeleton-row    { height: 48px; margin-bottom: var(--sp-2); border-radius: var(--r-sm); }
.skeleton-kpi    { height: 120px; border-radius: var(--r-lg); }
.skeleton-text   { height: 14px; border-radius: var(--r-xs); }
.skeleton-text.short  { width: 60%; }
.skeleton-text.medium { width: 80%; }

.skeleton-line {
  height: 12px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
  background-size: 220% 100%; margin: var(--sp-3) 0;
  animation: shimmer 1.6s ease-in-out infinite;
}
.skeleton-line.short { width: 55%; }

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes riosmaPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

.loading-card { border-style: dashed; }
button.is-loading, .case-card.is-loading, .kanban-card.is-loading { opacity: .72; pointer-events: none; }
[data-open-case].is-loading { opacity: .72; pointer-events: none; }
.soft-loading { border-style: solid; background: linear-gradient(90deg, var(--indigo-dim), var(--teal-dim)); }

.drawer button[aria-busy="true"] { opacity: .78; cursor: progress; }
.drawer button[aria-busy="true"]::after {
  content: ""; display: inline-block; width: .75em; height: .75em; margin-left: .45em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; vertical-align: -.12em; animation: drawerActionSpin .7s linear infinite;
}
@keyframes drawerActionSpin { to { transform: rotate(360deg); } }

/* ── 16. KANBAN ───────────────────────────────────────────────── */
.kanban {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4); align-items: start;
}
.kanban-col {
  background: var(--surface-2); border-radius: var(--r-lg);
  border: 1px solid var(--line); padding: var(--sp-4); min-height: 140px;
}
.kanban-col h3 { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-2); font-size: var(--fs-lg); }
.kanban-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-3);
  margin-bottom: var(--sp-2); cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--teal);
}
.kanban-card strong { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-base); }
.kanban-card small  { color: var(--muted); font-size: var(--fs-sm); }

/* ── 17. CATALOGS ─────────────────────────────────────────────── */
.catalog-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.catalog-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-4);
  transition: transform var(--t-fast), box-shadow var(--t-base);
}
.catalog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.catalog-card strong { display: block; font-size: var(--fs-2xl); margin-bottom: var(--sp-1); color: var(--text-strong); font-weight: 800; }
.catalog-card span   { color: var(--muted); text-transform: uppercase; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .8px; }
.catalog-card.wide-card { grid-column: 1 / -1; }
.catalog-card.wide-card small { color: var(--muted); line-height: 1.4; font-size: var(--fs-base); }

/* ── 18. DRAWER ───────────────────────────────────────────────── */
.drawer { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.drawer.open { pointer-events: all; }
.drawer-backdrop {
  position: absolute; inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity var(--t-slow);
}
.drawer.open .drawer-backdrop { opacity: 1; }

.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(760px, 100%); overflow: auto;
  background: var(--surface);
  border-left: 1px solid var(--line);
  padding: var(--sp-6);
  box-shadow: var(--shadow-xl);
  transform: translateX(100%);
  transition: transform .24s var(--ease-out);
}
.drawer.open .drawer-panel { transform: translateX(0); }

.drawer-close {
  position: sticky; top: 0; float: right; z-index: 3;
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted); font-size: 20px; line-height: 1;
  display: grid; place-items: center;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.drawer-close:hover {
  background: var(--red-light); color: var(--red);
  transform: rotate(90deg);
}

.drawer-detail-head { margin: 0 var(--sp-10) var(--sp-3) 0; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.drawer-detail-head h2 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.drawer-detail-head p:last-child { margin: var(--sp-1) 0 0; }
.drawer-card { margin-top: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); }
.drawer-card h3 { font-size: var(--fs-lg); letter-spacing: .1px; }
.drawer-card table { min-width: 760px; }
.drawer-actions { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.drawer-actions button { width: 100%; }

/* Detail sections */
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-3); margin: var(--sp-4) 0; }
.detail-sections { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-3); margin-bottom: var(--sp-3); }
.detail-card {
  --detail-accent: 67,97,238;
  background: linear-gradient(135deg, rgba(var(--detail-accent),.06), transparent 40%), var(--surface-2);
  border: 1px solid rgba(var(--detail-accent),.18); border-radius: var(--r-md); padding: var(--sp-3);
  box-shadow: inset 3px 0 0 rgba(var(--detail-accent),.35), var(--shadow-xs);
}
.detail-card.wide { grid-column: 1 / -1; }
.detail-section-identificacion { --detail-accent: 5,150,105; }
.detail-section-cliente         { --detail-accent: 67,97,238; }
.detail-section-factura         { --detail-accent: 217,119,6; }
.detail-section-importes        { --detail-accent: 124,58,237; }
.detail-section-resumen         { --detail-accent: 67,97,238; }
.detail-card h3 { margin: 0 0 var(--sp-2); color: var(--text-strong); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .85px; font-weight: 800; }
.detail-card .detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin: 0; }
.detail-section-resumen .detail-grid,
.detail-section-factura .detail-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.detail-box {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-sm); padding: var(--sp-2) 11px;
  min-height: 60px; display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.detail-box.wide { grid-column: span 2; }
.detail-section-factura .detail-box.wide { grid-column: span 2; }
.detail-box span   { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .68px; font-weight: 800; }
.detail-box strong { color: var(--text-strong); font-size: var(--fs-base); line-height: 1.25; overflow-wrap: anywhere; }

/* Timeline */
.timeline { display: grid; gap: var(--sp-2); }
.timeline-item {
  border-left: 3px solid var(--teal);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-3);
  background: var(--surface-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.timeline-item small { color: var(--muted); font-size: var(--fs-sm); }

.upload-box { border: 1px dashed var(--line-2); padding: var(--sp-3); border-radius: var(--r-md); margin: var(--sp-3) 0; background: var(--bg-soft); }

/* ── 19. TOAST ────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: calc(var(--bottom) + var(--sp-4)); left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 400; opacity: 0;
  max-width: 420px; min-width: 240px;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--text-strong); color: var(--surface);
  font-size: var(--fs-sm); font-weight: 600;
  box-shadow: var(--shadow-lg);
  transition: transform var(--t-slow) var(--ease-spring), opacity var(--t-slow);
  pointer-events: none; text-align: center;
  animation: none;
}
.toast:not([hidden]) {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.94); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.toast.ok     { background: var(--green);  color: #fff; }
.toast.warn   { background: var(--amber);  color: #fff; }
.toast.error  { background: var(--red);    color: #fff; }

/* ── 20. ADMIN ────────────────────────────────────────────────── */
.admin-tabs {
  display: flex; gap: var(--sp-1); flex-wrap: wrap;
  margin-bottom: var(--sp-4); border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-1);
}
.admin-tab {
  padding: 8px var(--sp-4); border-radius: var(--r-sm) var(--r-sm) 0 0;
  border: 1px solid transparent; border-bottom: 2px solid transparent;
  background: transparent; color: var(--muted);
  font-size: var(--fs-sm); font-weight: 600;
  min-height: 40px; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.admin-tab:hover { background: var(--surface-2); color: var(--text); }
.admin-tab.active {
  background: var(--surface); color: var(--indigo);
  border-color: var(--line) var(--line) var(--surface);
  border-bottom-color: var(--indigo);
}
.admin-help  { color: var(--muted); margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }
.admin-form  { display: grid; gap: var(--sp-3); }
.admin-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: var(--sp-2); }
.admin-table th, .admin-table td { white-space: nowrap; }
.admin-table .is-inactive { opacity: .55; }
.admin-search-wrap { flex-shrink: 0; }
.admin-search { width: 220px; margin-top: 0 !important; padding: 8px var(--sp-3) !important; font-size: var(--fs-base); }

/* ── 21. FORM: NUEVO CASO ─────────────────────────────────────── */
.form-full-layout { display: flex; flex-direction: column; gap: var(--sp-3); }
.grid-factura-obs { display: grid; grid-template-columns: 1fr 1.3fr 0.7fr 2fr; gap: var(--sp-3); align-items: start; }
.grid-factura-obs textarea { height: 52px; min-height: 52px; }

.form-section-card {
  --section-accent: 67,97,238;
  position: relative; overflow: hidden;
  background: var(--surface);
  border-color: rgba(var(--section-accent),.18);
  box-shadow: inset 3px 0 0 rgba(var(--section-accent),.40), var(--shadow-xs);
}
.form-section-identificacion { --section-accent: 5,150,105; }
.form-section-cliente        { --section-accent: 67,97,238; }
.form-section-factura        { --section-accent: 217,119,6; }
.form-section-productos      { --section-accent: 124,58,237; }

.form-section-card:focus-within {
  border-color: rgba(0,180,200,.3);
  box-shadow: inset 3px 0 0 rgba(var(--section-accent),.55), 0 0 0 3px var(--teal-dim), var(--shadow-sm);
}

.form-section-mini {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-2); padding-bottom: var(--sp-2);
  border-bottom: 1px solid rgba(var(--section-accent),.14);
}
.form-section-mini h4 { color: var(--text-strong); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .75px; font-weight: 800; margin: 0; }
.form-section-label { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); border-bottom: 1px solid var(--line); padding-bottom: var(--sp-3); }
.form-section-label h3 { color: var(--text-strong); font-size: var(--fs-md); font-weight: 700; margin: 0; text-transform: none; letter-spacing: 0; }
.form-section-icon {
  width: 24px; height: 24px; border-radius: var(--r-sm); flex-shrink: 0;
  background: rgba(var(--section-accent),.12); color: rgb(var(--section-accent));
  font-size: var(--fs-sm); font-weight: 800; display: grid; place-items: center;
  border: 1px solid rgba(var(--section-accent),.28);
}
.products-section-head { border-bottom: 1px solid rgba(var(--section-accent),.14); padding-bottom: var(--sp-2); }

/* ── 22. OPERATIONAL FLOWS ────────────────────────────────────── */
.operational-alert {
  display: grid; gap: var(--sp-1); margin: 0 0 var(--sp-3); padding: var(--sp-3);
  border-radius: var(--r-md); border: 1px solid rgba(217,119,6,.22);
  background: linear-gradient(135deg, rgba(217,119,6,.07), rgba(67,97,238,.04));
  color: var(--text-strong);
}
.operational-alert.for-owner { border-color: rgba(217,119,6,.40); box-shadow: inset 4px 0 0 rgba(217,119,6,.55), var(--shadow-xs); }
.operational-alert strong { font-size: var(--fs-md); }
.operational-alert span   { color: var(--muted); font-size: var(--fs-base); }

.operational-actions-card { border-color: rgba(5,150,105,.18); background: linear-gradient(135deg, var(--green-dim), rgba(67,97,238,.04)), var(--surface); }
.operational-actions-card > p { color: var(--muted); margin: 0 0 var(--sp-3); font-size: var(--fs-base); }

.operational-observation-card textarea {
  width: 100%; min-height: 108px; resize: vertical;
  border: 1.5px solid var(--line-2); border-radius: var(--r-md);
  padding: var(--sp-3); font: inherit;
  background: var(--bg-soft); color: var(--text); caret-color: var(--teal);
}
.operational-observation-card textarea::placeholder { color: var(--subtle); }
.operational-observation-card textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim); background: var(--surface); }
.operational-observation-card .muted { margin-top: -2px; color: var(--muted); font-size: var(--fs-sm); }

.logistics-choice-group { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-2); margin: var(--sp-3) 0; }
.logistics-choice {
  min-height: 72px; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; text-align: left; gap: 4px;
  border-color: var(--line-2);
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.logistics-choice:not(.selected):hover { background: var(--surface-2); border-color: var(--line-3); }
.logistics-choice strong { color: var(--text-strong); font-size: var(--fs-md); }
.logistics-choice small  { color: var(--muted); font-size: var(--fs-sm); line-height: 1.3; }
.logistics-choice.selected { background: linear-gradient(135deg, var(--green-dim), var(--indigo-dim)); border-color: rgba(5,150,105,.40); box-shadow: 0 0 0 2px var(--green-dim); }
.logistics-sub-control {
  margin: var(--sp-2) 0 var(--sp-3);
  animation: fadeInDown .22s var(--ease-spring) both;
}
.logistics-sub-control .field.mini { margin: 0; }
.logistics-sub-control select,
.logistics-sub-control textarea {
  width: 100%;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3); font: inherit;
  background: var(--bg-soft); color: var(--text); caret-color: var(--indigo);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.logistics-sub-control select:focus,
.logistics-sub-control textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-dim); background: var(--surface); }
.logistics-sub-control textarea { min-height: 72px; resize: vertical; }
.logistics-sub-control textarea::placeholder { color: var(--subtle); }

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.decision-current { margin: var(--sp-2) 0 0; color: var(--muted); font-size: var(--fs-sm); }

.case-flow-card { border-color: rgba(67,97,238,.18); background: linear-gradient(135deg, var(--indigo-dim), rgba(5,150,105,.04)), var(--surface); }
.case-flow-card > .muted { margin: 0 0 var(--sp-3); color: var(--muted); font-size: var(--fs-base); }
.case-flow-actions { align-items: stretch; }
.case-flow-pending {
  display: grid; grid-template-columns: minmax(130px,.55fr) minmax(220px,1fr);
  gap: var(--sp-2); grid-column: span 2; align-items: stretch;
}
.case-flow-pending button { height: 100%; }
.case-flow-pending textarea {
  width: 100%; min-height: 60px; resize: vertical;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3); font: inherit;
  background: var(--bg-soft); color: var(--text); caret-color: var(--indigo);
}
.case-flow-pending textarea::placeholder { color: var(--subtle); }
.case-flow-pending textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-dim); background: var(--surface); }
.case-flow-branch-grid { display: grid; grid-template-columns: minmax(190px,.45fr) minmax(260px,1fr); gap: var(--sp-3); align-items: start; margin-bottom: var(--sp-3); }
.case-flow-details { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--sp-2); background: var(--surface-2); }
.case-flow-details summary { cursor: pointer; font-weight: 700; color: var(--text-strong); margin-bottom: var(--sp-2); }
.case-flow-actions.nested { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
.case-flow-actions.nested button:last-child:nth-child(3) { grid-column: 1 / -1; }
.case-flow-admin-actions { margin-top: var(--sp-2); }
.single-flow-action { grid-template-columns: minmax(220px,360px); }

/* v38 · Diferencia de kilos */
.case-flow-diferencia .case-flow-primary-row {
  display: grid; grid-template-columns: minmax(210px,.62fr) minmax(360px,1.38fr);
  gap: var(--sp-3); align-items: stretch; margin: var(--sp-3) 0 var(--sp-2);
}
.case-flow-diferencia .flow-main-action { min-height: 76px; font-size: var(--fs-lg); font-weight: 700; letter-spacing: .1px; border-radius: var(--r-md); }
.case-flow-diferencia .case-flow-pending { grid-column: auto; grid-template-columns: minmax(170px,.48fr) minmax(240px,1fr); min-height: 76px; }
.case-flow-diferencia .case-flow-pending textarea { min-height: 76px; }
.case-flow-diferencia .case-flow-admin-actions { grid-template-columns: repeat(4, minmax(0,1fr)); margin-top: var(--sp-3); }
.drawer-card.productos-detalle-card { border-color: rgba(5,150,105,.14); }

/* v39 · Acciones detalle */
.actions-stack-vertical { grid-template-columns: minmax(220px,340px) !important; align-items: stretch; justify-content: flex-start; max-width: 360px; }
.actions-stack-vertical button { min-height: 46px; text-align: center; }
.embedded-observation { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.embedded-observation h4 { margin: 0 0 var(--sp-2); color: var(--text-strong); font-size: var(--fs-md); letter-spacing: .1px; }

.case-flow-diferencia .case-flow-primary-row.three-main-actions {
  grid-template-columns: minmax(170px,.8fr) minmax(170px,.8fr) minmax(330px,1.4fr);
  gap: var(--sp-3); align-items: stretch;
}
.case-flow-close-with-text { display: grid; grid-template-columns: minmax(190px,1fr) minmax(130px,.55fr); gap: var(--sp-2); align-items: stretch; }
.case-flow-close-with-text textarea,
.case-flow-rechazo-close input {
  width: 100%; border: 1.5px solid var(--line-2); border-radius: var(--r-md);
  padding: var(--sp-3); font: inherit;
  background: var(--bg-soft); color: var(--text); caret-color: var(--indigo);
}
.case-flow-close-with-text textarea { min-height: 76px; resize: vertical; }
.case-flow-close-with-text textarea::placeholder,
.case-flow-rechazo-close input::placeholder { color: var(--subtle); }
.case-flow-close-with-text textarea:focus,
.case-flow-rechazo-close input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-dim); background: var(--surface); }

.case-flow-rechazo-close { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; margin: var(--sp-3) 0 var(--sp-2); }
.case-flow-rechazo-close .field { display: grid; gap: 7px; margin: 0; }
.case-flow-rechazo-close .field span { color: var(--muted); font-size: var(--fs-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
#rechazoInvoiceList { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }
.rechazo-invoice-row { display: flex; gap: var(--sp-2); align-items: center; }
.rechazo-invoice-row .rechazo-invoice-input { flex: 1; max-width: 360px; }
.rechazo-invoice-row .remove-invoice-btn { flex-shrink: 0; padding: 0 var(--sp-2); font-size: 1.1rem; line-height: 1; color: var(--red); border: 1.5px solid var(--red); border-radius: var(--r-md); opacity: .7; }
.rechazo-invoice-row .remove-invoice-btn:hover { opacity: 1; background: var(--red-dim, #fee2e2); }
.case-flow-rechazo-close .flow-main-action,
.case-flow-diferencia .case-flow-close-with-text .flow-main-action { min-height: 76px; font-size: var(--fs-lg); font-weight: 700; }
.case-flow-admin-actions.actions-stack-vertical { margin-top: var(--sp-3); }

/* ── 22b. AUTH GATE ───────────────────────────────────────────── */
body[data-auth="guest"] .topbar,
body[data-auth="guest"] .bottom-nav { display: none !important; }
body[data-auth="guest"] #react-app-shell-root,
body[data-auth="guest"] .v55-app-shell,
body[data-auth="guest"] .v55-shell-rail,
body[data-auth="guest"] .v55-shell-pulse,
body[data-auth="guest"] .v55-command { display: none !important; }
body[data-auth="guest"] .scroll-area { inset: 0 !important; padding-left: clamp(var(--sp-4), 4vw, var(--sp-8)) !important; }
body[data-auth="authenticated"] .topbar { display: flex !important; }

/* ── 23. USER ROLES ───────────────────────────────────────────── */
body.limited-user .topbar { box-shadow: 0 2px 20px rgba(0,0,0,.35); }
body.limited-user .nav-btn:not([hidden]) { max-width: 280px; }
body.limited-user .nav-btn[data-screen="home"],
body.limited-user .nav-btn[data-screen="new"],
body.limited-user .nav-btn[data-screen="receipts"],
body.limited-user .nav-btn[data-screen="admin"],
body.limited-user .nav-btn[data-screen="catalogs"],
body.limited-user [data-goto="new"] { display: none !important; }
body.limited-user .bottom-nav {
  grid-template-columns: repeat(2, minmax(160px, 300px));
  justify-content: center;
  height: 90px;
  border-top-width: 2.5px;
  box-shadow: 0 -8px 32px rgba(15,30,60,.18), 0 -1px 0 rgba(30,60,120,.12);
}
body.limited-user .nav-btn {
  gap: 5px;
  font-size: 11.5px;
  letter-spacing: .4px;
}
body.limited-user .nav-btn span {
  font-size: 34px;
  filter: drop-shadow(0 2px 4px rgba(30,60,120,.22));
}
body.limited-user .nav-btn.active span {
  transform: translateY(-4px) scale(1.16);
  filter: drop-shadow(0 4px 10px rgba(67,97,238,.55));
}
body.limited-user .nav-btn.active::before {
  width: 44px; height: 4px;
  animation: indicatorSlide .28s var(--ease-spring) both;
}

/* ── 24. SCREEN-NEW OVERRIDES ─────────────────────────────────── */
#screen-new { max-width: 1160px; }
#screen-new .section-head { margin-bottom: var(--sp-2); align-items: center; }
#screen-new .section-head.sticky-head { top: -18px; padding: 9px 0 var(--sp-2); }
#screen-new .eyebrow { margin-bottom: var(--sp-1); font-size: var(--fs-sm); letter-spacing: 2px; color: var(--teal-dark); }
#screen-new .section-head h2 { font-size: clamp(24px, 2vw, 32px); letter-spacing: -.3px; }
#screen-new .section-head p  { font-size: var(--fs-base); line-height: 1.35; margin-top: 5px; }
#screen-new #clearFormBtn    { padding: 9px var(--sp-3); min-width: 84px; }
#screen-new .form-full-layout { gap: var(--sp-2); }
#screen-new .card            { padding: var(--sp-3); border-radius: var(--r-md); }
#screen-new .form-section-card { --section-accent: 67,97,238; }
#screen-new .form-section-identificacion { --section-accent: 5,150,105; }
#screen-new .form-section-cliente        { --section-accent: 67,97,238; }
#screen-new .form-section-factura        { --section-accent: 217,119,6; }
#screen-new .form-section-productos      { --section-accent: 124,58,237; }
#screen-new .form-section-mini { gap: var(--sp-2); margin-bottom: 7px; padding-bottom: 7px; }
#screen-new .form-section-mini h4, #screen-new .products-section-head h3 { color: var(--text-strong); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .85px; font-weight: 800; }
#screen-new .form-section-icon { width: 24px; height: 24px; color: rgb(var(--section-accent)); background: rgba(var(--section-accent),.10); border-color: rgba(var(--section-accent),.28); }
#screen-new label { color: var(--muted); font-size: var(--fs-sm); line-height: 1.2; letter-spacing: .65px; }
#screen-new input, #screen-new select, #screen-new textarea { margin-top: 5px; padding: 9px 11px; border-radius: var(--r-sm); font-size: var(--fs-base); min-height: 38px; }
#screen-new textarea { resize: vertical; min-height: 44px; }
#screen-new .grid-4 { gap: var(--sp-2); margin: var(--sp-2) 0 0; }
#screen-new .grid-factura-obs { gap: var(--sp-2); margin-top: var(--sp-2); grid-template-columns: 1fr 1.15fr .72fr 2.15fr; }
#screen-new .grid-factura-obs textarea { height: 42px; min-height: 42px; }
#screen-new .input-with-icon .icon-btn { width: 27px; height: 27px; right: 5px; font-size: 13px; }
#screen-new .input-with-icon input { padding-right: 37px; }
#screen-new .card-header-row { margin-bottom: var(--sp-2); }
#screen-new .card-header-row p { margin-top: 3px; font-size: var(--fs-base); line-height: 1.3; }
#screen-new #addItemBtn { padding: 8px var(--sp-3); }
#screen-new .input-table-wrap { margin-top: var(--sp-2); border-radius: var(--r-sm); }
#screen-new .items-table { min-width: 780px; }
#screen-new .items-table th, #screen-new .items-table td { padding: 7px 9px; }
#screen-new .items-table th { font-size: var(--fs-2xs); }
#screen-new .items-table input, #screen-new .items-table select { min-width: 88px; padding: 7px 9px; min-height: 34px; }
#screen-new .items-table .desc-input { min-width: 230px; }
#screen-new .items-table .remove-row { padding: 6px var(--sp-2); border-radius: var(--r-sm); }
#screen-new .totals-row { gap: var(--sp-3); padding: 9px 2px 0; font-size: var(--fs-sm); }
#screen-new .action-bar { bottom: -38px; padding: 9px var(--sp-2); border-radius: var(--r-md); gap: var(--sp-2); }
#screen-new .action-bar button { padding: 9px var(--sp-3); border-radius: var(--r-sm); }

/* ── 25. RESPONSIVE ───────────────────────────────────────────── */
@media (min-width: 1100px) {
  .kpi-grid           { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .kpi-grid-secondary { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .detail-grid        { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (min-width: 981px) {
  :root { --top: 66px; --bottom: 62px; }
  .topbar { padding-top: 9px; padding-bottom: 9px; }
  .brand-mark { width: 36px; height: 36px; border-radius: var(--r-sm); font-size: 20px; }
  .brand strong { font-size: var(--fs-lg); }
  .brand small  { font-size: var(--fs-xs); }
  .operator-select select { padding: .34rem .5rem; }
  .sync-state { padding: 6px var(--sp-2); }
  .icon-btn   { width: 36px; height: 36px; }
  .nav-btn    { font-size: var(--fs-2xs); gap: 2px; }
  .nav-btn span { font-size: 16px; }
  .drawer-panel { width: min(980px, 96vw); padding: 22px var(--sp-6) var(--sp-8); }
}

@media (max-width: 980px) {
  :root { --top: 74px; --bottom: 72px; }
  .scroll-area { padding: var(--sp-3) var(--sp-3) var(--sp-8); }
  .hero-card, .section-head, .card-header-row { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; }
  .kpi-grid, .grid-4, .form-grid, .catalog-grid, .kanban, .filters { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .action-bar { flex-direction: column; bottom: -28px; }
  .bottom-nav { overflow-x: auto; }
  .nav-btn { min-width: 76px; }
  .case-card { grid-template-columns: 1fr; }
  .top-actions .sync-state { display: inline-flex; }
  .drawer-panel { padding: var(--sp-4) var(--sp-3); }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-sections { grid-template-columns: 1fr; }
  .detail-section-resumen .detail-grid,
  .detail-section-factura .detail-grid,
  .detail-card .detail-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .drawer-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-factura-obs { grid-template-columns: 1fr 1fr; }
  .grid-factura-obs label:last-child { grid-column: 1 / -1; }
  .dash-charts { grid-template-columns: 1fr !important; }
  .form-new-layout { grid-template-columns: 1fr; }
  .form-right-col { position: static; grid-column: 1; }
  .form-full-row { grid-column: 1; }
  .dash-filters { grid-template-columns: repeat(2, 1fr); }
  #screen-new .form-section-card { border-color: rgba(var(--section-accent),.18); }
}

@media (max-width: 920px) {
  .case-flow-diferencia .case-flow-primary-row,
  .case-flow-diferencia .case-flow-pending { grid-template-columns: 1fr; }
  .case-flow-diferencia .case-flow-admin-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .case-flow-diferencia .case-flow-primary-row.three-main-actions,
  .case-flow-close-with-text,
  .case-flow-rechazo-close { grid-template-columns: 1fr; }
  .actions-stack-vertical { max-width: none; }
  .case-flow-pending,
  .case-flow-branch-grid,
  .case-flow-actions.nested { grid-template-columns: 1fr; }
  .case-flow-pending { grid-column: auto; }
}

@media (max-width: 900px) {
  .dash-filters { grid-template-columns: 1fr 1fr; }
  .sla-strip { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .drawer-panel { width: min(980px, 96vw); padding: 22px var(--sp-6) var(--sp-8); }
}

@media (max-width: 760px) {
  .operator-select { width: 100%; justify-content: space-between; }
  .operator-select select { flex: 1; }
  .recurrent-list { grid-template-columns: 1fr; }
  .recurrent-client-card { grid-template-columns: 1fr; }
  .logistics-choice-group { grid-template-columns: 1fr; }
  body.limited-user .bottom-nav { grid-template-columns: repeat(2, 1fr); height: 90px; }
  #screen-new .section-head { align-items: stretch; }
  #screen-new .grid-factura-obs { grid-template-columns: 1fr; }
  #screen-new .grid-factura-obs label:last-child { grid-column: 1; }
  #screen-new .action-bar { padding: var(--sp-2); }
  .drawer-actions { gap: var(--sp-2); }
  .drawer-actions button { font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3); }
}

@media (max-width: 620px) {
  body.limited-user .bottom-nav { grid-template-columns: repeat(2, 1fr); height: 90px; }
}

@media (max-width: 600px) {
  :root { --top: 64px; --bottom: 82px; }
  body.limited-user { --bottom: 90px; }
  .scroll-area { padding: var(--sp-4) var(--sp-3) var(--sp-8); }
  .brand small { display: none; }
  .topbar { padding: 0 var(--sp-3); }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .kpi strong { font-size: 18px; }
  .kpi { min-height: 100px; padding: var(--sp-4) var(--sp-3); }
  .grid-4, .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .action-bar { flex-direction: column; bottom: -34px; }
  .action-bar button { width: 100%; }
  table { min-width: 600px; }
  .drawer-panel { width: 100vw; padding: var(--sp-5) var(--sp-4); }
}

@media (max-width: 560px) {
  .dash-filters { grid-template-columns: 1fr; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .detail-section-resumen .detail-grid,
  .detail-section-factura .detail-grid,
  .detail-card .detail-grid { grid-template-columns: 1fr; }
  .detail-box.wide,
  .detail-section-factura .detail-box.wide { grid-column: auto; }
  .drawer-actions { grid-template-columns: 1fr; }
  .case-flow-diferencia .case-flow-admin-actions { grid-template-columns: 1fr; }
}

/* ── 26. PREFERS-REDUCED-MOTION ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 27. CASES OVERLAY ────────────────────────────────────────── */
.cases-overlay {
  position: fixed; inset: 0; z-index: 150;
  pointer-events: none;
}
.cases-overlay.open { pointer-events: auto; }

.cases-overlay-backdrop {
  position: absolute; inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--t-slow);
}
.cases-overlay.open .cases-overlay-backdrop { opacity: 1; }

.cases-overlay-panel {
  position: absolute; inset: 0;
  background: var(--bg);
  display: flex; flex-direction: column;
  transform: translateY(28px);
  opacity: 0;
  transition: transform .28s var(--ease-out), opacity .22s var(--ease-out);
  overflow: hidden;
}
.cases-overlay.open .cases-overlay-panel {
  transform: translateY(0);
  opacity: 1;
}

.cases-overlay-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) clamp(var(--sp-4), 3vw, var(--sp-8));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  flex-shrink: 0;
}
.cases-overlay-head h2 { margin: 0; font-size: var(--fs-xl); }
.cases-overlay-head .eyebrow { margin: 0 0 2px; }

.cases-overlay-filters {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3) clamp(var(--sp-4), 3vw, var(--sp-8));
  background: var(--surface-2);
  border-bottom: 1.5px solid var(--line-2);
  flex-shrink: 0;
}
.cof-row {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center;
}
.cof-row input[type="search"],
.cof-row input[type="date"],
.cof-row select {
  margin: 0 !important;
  padding: 7px var(--sp-3) !important;
  font-size: var(--fs-sm);
  min-width: 0; flex: 1 1 148px; max-width: 210px;
  border-radius: var(--r-md); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cof-row input:focus, .cof-row select:focus {
  border-color: var(--teal); outline: none;
  box-shadow: 0 0 0 3px var(--teal-dim);
}
.cof-search { flex: 2 1 240px !important; max-width: 440px !important; }
.cof-product-search { flex: 1.4 1 210px !important; max-width: 320px !important; }
.cof-date-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
  white-space: nowrap;
}
.cof-date-label input { flex: 0 0 auto; width: 140px; max-width: 140px; }
.cof-row button.ghost { flex-shrink: 0; padding: 7px var(--sp-4); font-size: var(--fs-sm); }

.cases-overlay-table-wrap {
  flex: 1; overflow: auto;
  border: none !important; border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--surface);
}
.cases-overlay-table { min-width: 1160px; }
.cases-overlay-table th {
  position: sticky; top: 0; z-index: 3;
  background: var(--surface-2);
  white-space: nowrap;
}

/* Sortable column headers */
.sortable { cursor: pointer; user-select: none; }
.sortable:hover { background: var(--teal-dim) !important; color: var(--teal-dark) !important; }
.sort-active { color: var(--teal-dark) !important; background: rgba(0,180,200,.12) !important; }
.sort-ind { display: inline-block; width: 12px; font-size: 10px; opacity: .9; }

.cases-overlay-pagination {
  flex-shrink: 0;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) clamp(var(--sp-4), 3vw, var(--sp-8));
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--text-medium);
}
.cases-overlay-pagination button { padding: 6px var(--sp-4); font-size: var(--fs-sm); }

/* Hide overlay button for limited users */
body.limited-user #openCasesOverlayBtn { display: none !important; }

/* Overlay responsive */
@media (max-width: 760px) {
  .cof-row input[type="search"],
  .cof-row input[type="date"],
  .cof-row select { flex-basis: calc(50% - var(--sp-2)); max-width: none; }
  .cof-search { flex-basis: 100% !important; max-width: none !important; }
}
@media (max-width: 480px) {
  .cof-row input[type="search"],
  .cof-row input[type="date"],
  .cof-row select,
  .cof-date-label,
  .cof-row button { flex-basis: 100%; max-width: none; }
  .cof-date-label input { width: 100%; max-width: none; }
}

/* ── 28. CUSTOM USER SELECTOR ─────────────────────────────────── */
.user-selector {
  position: relative;
  display: inline-flex; align-items: center;
}

.user-selector-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-3);
  background: var(--topbar-btn-bg);
  border: 1px solid var(--topbar-btn-border);
  border-radius: var(--r-pill);
  color: var(--topbar-brand-text); cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  white-space: nowrap;
}
.user-selector-btn:hover {
  background: var(--topbar-btn-hover);
  border-color: var(--topbar-btn-border);
  box-shadow: var(--shadow-xs);
}
.user-selector-btn:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px;
}

.user-selector-label {
  color: var(--topbar-brand-muted);
  font-size: var(--fs-xs); font-weight: 600;
}
.user-selector-name {
  color: var(--topbar-brand-text);
  font-size: var(--fs-sm); font-weight: 700;
  max-width: 130px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-selector-caret {
  color: var(--topbar-btn-text);
  font-size: 10px; line-height: 1;
  transition: transform var(--t-fast);
}
.user-selector[aria-expanded="true"] .user-selector-caret {
  transform: rotate(180deg);
}

.user-selector-list {
  position: fixed;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  list-style: none; margin: 0; padding: var(--sp-1) 0;
  z-index: 500;
  max-height: 320px; overflow-y: auto;
  animation: userDropIn .14s var(--ease-out) both;
}
@keyframes userDropIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.user-selector-item {
  padding: 10px var(--sp-4);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--text); cursor: pointer;
  border-radius: var(--r-sm);
  margin: 2px var(--sp-1);
  transition: background var(--t-fast), color var(--t-fast);
  display: flex; align-items: center; gap: var(--sp-2);
}
.user-selector-item:hover,
.user-selector-item:focus {
  background: var(--teal-dim); color: var(--teal-dark); outline: none;
}
.user-selector-item.selected {
  background: var(--indigo-light); color: var(--indigo);
}
.user-selector-item.selected::after { content: " ✓"; font-size: 11px; margin-left: auto; }

@media (max-width: 480px) {
  .user-selector-label { display: none; }
  .user-selector-name  { max-width: 80px; }
}

/* ── 29. BATCH ACTION BAR (OVERLAY) ──────────────────────────── */
.cof-batch-bar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-2) clamp(var(--sp-4), 3vw, var(--sp-8));
  background: var(--indigo-light);
  border-bottom: 1.5px solid var(--indigo-dim);
  flex-shrink: 0;
  font-size: var(--fs-sm); font-weight: 600; color: var(--indigo);
  animation: batchBarIn .16s var(--ease-out) both;
}
@keyframes batchBarIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cof-batch-count { flex: 1 1 auto; }
.cof-batch-bar button { font-size: var(--fs-sm); padding: 5px var(--sp-3); }

/* ── 30. MOBILE OVERLAY FILTER TOGGLE ───────────────────────── */
.cof-filters-toggle { display: none; }

@media (max-width: 760px) {
  .cof-filters-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px var(--sp-3); font-size: var(--fs-sm);
  }
  .cases-overlay-filters:not(.filters-open) { display: none; }
  .cases-overlay-head { flex-wrap: wrap; gap: var(--sp-2); }
  .cases-overlay-head .row-actions { gap: var(--sp-1); }
  .cases-overlay-head .row-actions .badge { display: none; }
}

/* Overlay checkbox column */
.cases-overlay-table .col-check {
  width: 36px; text-align: center; padding: 6px 4px;
}
.cases-overlay-table .col-check input[type="checkbox"] {
  cursor: pointer; width: 15px; height: 15px; accent-color: var(--indigo);
}
.cases-overlay-table tr:has(.cof-row-check:checked) { background: var(--indigo-dim) !important; }

/* ═════════════════════════════════════════════════════════════════
   LOGIN SCREEN
   ═════════════════════════════════════════════════════════════════ */

.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--indigo) 0%, var(--teal) 100%);
  padding: var(--sp-4);
}

.login-box {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(15, 30, 60, 0.3);
  width: 100%;
  max-width: 400px;
  padding: var(--sp-12);
  animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-header {
  text-align: center;
  margin-bottom: var(--sp-8);
}

.login-header .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--indigo), var(--teal));
  color: white;
  font-size: 24px;
  font-weight: 700;
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-4);
}

.login-header h1 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--text-strong);
  margin: var(--sp-2) 0;
}

.login-header p {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.form-group label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-strong);
}

.form-group input {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  font-family: var(--font-body);
  color: var(--text);
  background: var(--surface);
  transition: all 0.2s ease;
}

.form-group input:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-dim);
}

.form-group input::placeholder {
  color: var(--subtle);
}

.login-btn {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-md);
  font-weight: 600;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  background: linear-gradient(135deg, var(--indigo), var(--teal));
  color: white;
  margin-top: var(--sp-2);
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(67, 97, 238, 0.3);
}

.login-btn:active {
  transform: translateY(0);
}

.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.login-error {
  padding: var(--sp-3) var(--sp-4);
  background: var(--red-light);
  border: 1px solid var(--red-dim);
  border-radius: var(--r-sm);
  color: var(--red);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.login-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  color: var(--indigo);
  font-size: var(--fs-sm);
  padding: var(--sp-3);
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--indigo-dim);
  border-top-color: var(--indigo);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.login-footer {
  text-align: center;
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.login-footer p {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--subtle);
}

@media (max-width: 480px) {
  .login-box {
    padding: var(--sp-6);
  }

  .login-header h1 {
    font-size: var(--fs-2xl);
  }

  .login-container {
    padding: var(--sp-2);
  }
}

/* User selector dropdown styles */
.user-selector-list {
  position: fixed;
  z-index: 1000;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  box-shadow: 0 10px 25px rgba(15, 30, 60, 0.15);
  list-style: none;
  margin: 0;
  padding: var(--sp-2) 0;
  min-width: 200px;
}

.user-selector-list[hidden] {
  display: none;
}

.user-selector-item,
.user-selector-item button {
  display: block;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: none;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-base);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.user-selector-item:hover,
.user-selector-item button:hover {
  background: var(--surface-2);
  color: var(--indigo);
}

.user-selector-item.logout button {
  color: var(--red);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
  margin-top: var(--sp-2);
}

.user-selector-item.logout button:hover {
  background: var(--red-light);
  color: var(--red);
}

/* v50 React/Vite Tabla Completa: render controlado con fallback legacy */
.react-table-island:empty {
  display: none;
}
.react-table-island {
  margin: 0 1.25rem .85rem;
}
.react-table-island-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  padding: .75rem .9rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 90%, var(--brand) 10%);
  box-shadow: var(--shadow-soft);
}
.react-table-island-main {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}
.react-table-island-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-weight: 800;
  color: var(--text);
}
.react-table-island-copy {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
}
.react-table-island-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .45rem;
}
.react-table-island-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .28rem .55rem;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: .78rem;
  white-space: nowrap;
}
.react-table-island-chip strong {
  color: var(--text);
  font-weight: 800;
}
@media (max-width: 760px) {
  .react-table-island {
    margin: 0 .8rem .75rem;
  }
  .react-table-island-card {
    align-items: stretch;
    flex-direction: column;
  }
  .react-table-island-metrics {
    justify-content: flex-start;
  }
}



/* v50 React/Vite Tabla Completa: render controlado con fallback legacy */
.cases-overlay.react-table-active .cases-overlay-panel > .cases-overlay-filters,
.cases-overlay.react-table-active .cases-overlay-panel > .cases-overlay-table-wrap,
.cases-overlay.react-table-active .cases-overlay-panel > #casesOverlayPagination,
.cases-overlay.react-table-active .cases-overlay-panel > #cofBatchBar {
  display: none !important;
}
.react-table-island[hidden] { display: none !important; }
.react-table-island.react-table-v50-root,
.react-table-island[data-react-island="tabla-completa-v50"] {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.react-table-v50 {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
}
.react-table-v50-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) clamp(var(--sp-4), 3vw, var(--sp-8));
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, var(--teal) 6%);
}
.react-table-v50-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.react-table-v50-title strong { display: block; color: var(--text); }
.react-table-v50-title small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.react-table-v50-dot {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--teal-dim);
  color: var(--teal-dark);
}
.react-table-v50-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.react-table-filters.cases-overlay-filters {
  display: flex;
}
.react-batch-bar {
  flex-shrink: 0;
}
.react-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
}
.react-table-state-cell {
  text-align: center;
  padding: 2rem !important;
  color: var(--muted);
}
.react-table-state-cell.error-state {
  color: var(--red);
}
.react-table-state-cell strong,
.react-table-state-cell span {
  display: block;
  margin-bottom: .35rem;
}
.react-state-actions {
  display: inline-flex !important;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-2);
}
.react-table-pagination {
  flex-shrink: 0;
}
.react-table-v50-error {
  padding: var(--sp-4);
  gap: var(--sp-2);
  align-items: flex-start;
  color: var(--red);
}
@media (max-width: 760px) {
  .react-table-v50-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .react-table-v50-actions {
    justify-content: flex-start;
  }
}

/* v51 React/Vite Dashboard: resumen controlado con fallback legacy */
.react-dashboard-island:empty { display: none; }
.react-dashboard-island[hidden] { display: none !important; }
#screen-home.react-dashboard-active #dashboardLegacyRoot { display: none !important; }
#react-dashboard-root[data-react-island="dashboard-v51"] { margin-top: var(--sp-4); }
.react-dashboard-v51 { display: block; }
.react-dashboard-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  border: 1px solid rgba(67,97,238,.16);
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface) 88%, var(--indigo) 12%));
}
.react-dashboard-title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.react-dashboard-title strong { display: block; color: var(--text-strong); }
.react-dashboard-title small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.react-dashboard-dot {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--indigo-dim);
  color: var(--indigo);
  flex: 0 0 auto;
}
.react-dashboard-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.react-dashboard-filter-field { margin: 0; }
.react-dashboard-filter-field span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.react-dashboard-filters { align-items: center; }
.react-dashboard-clear-inline { min-height: 38px; align-self: end; }
.react-dashboard-status { margin: var(--sp-3) 0; }
.react-dashboard-status.error-state { color: var(--red); border-color: rgba(244,63,94,.25); }
.react-dashboard-bars { display: grid; gap: 10px; }
.react-dashboard-bar-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(90px, 1.2fr) auto;
  gap: var(--sp-2);
  align-items: center;
}
.react-dashboard-bar-row span {
  color: var(--text-medium);
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.react-dashboard-bar-track {
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.react-dashboard-bar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--indigo), var(--teal));
}
.react-dashboard-bar-row b { color: var(--text-strong); font-size: var(--fs-sm); min-width: 24px; text-align: right; }
.react-dashboard-columns {
  min-height: 230px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(64px, 1fr);
  gap: var(--sp-2);
  align-items: end;
  overflow-x: auto;
  padding: var(--sp-2) 0;
}
.react-dashboard-col {
  min-height: 220px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: end;
  gap: 8px;
  text-align: center;
}
.react-dashboard-col b { color: var(--text-strong); font-size: var(--fs-sm); }
.react-dashboard-col i {
  display: block;
  width: 70%;
  min-height: 10px;
  margin: 0 auto;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, var(--violet), var(--indigo));
}
.react-dashboard-col span {
  min-height: 42px;
  color: var(--text-medium);
  font-size: var(--fs-xs);
  line-height: 1.15;
  overflow: hidden;
}
.react-dashboard-pie-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: center;
}
.react-dashboard-pie-total {
  width: 116px;
  height: 116px;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 12px solid color-mix(in srgb, var(--indigo) 35%, var(--surface-3));
  background: var(--surface-2);
}
.react-dashboard-pie-total strong { color: var(--text-strong); font-size: 26px; line-height: 1; }
.react-dashboard-pie-total small { color: var(--muted); margin-top: 4px; }
.react-dashboard-pie-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: var(--sp-2);
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.react-dashboard-pie-row b { color: var(--indigo); font-size: var(--fs-sm); }
.react-dashboard-pie-row span { color: var(--text-medium); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.react-dashboard-pie-row em { color: var(--text-strong); font-style: normal; font-weight: 700; }
.react-dashboard-cases-head { margin-top: var(--sp-5); }
.react-dashboard-error {
  padding: var(--sp-4);
  border: 1px solid rgba(244,63,94,.22);
  border-radius: var(--r-lg);
  color: var(--red);
  background: var(--surface);
}
.react-dashboard-error strong,
.react-dashboard-error span { display: block; margin-bottom: var(--sp-2); }
@media (max-width: 760px) {
  .react-dashboard-toolbar { align-items: stretch; flex-direction: column; }
  .react-dashboard-actions { justify-content: flex-start; }
  .react-dashboard-pie-list { grid-template-columns: 1fr; }
  .react-dashboard-pie-total { margin: 0 auto; }
  .react-dashboard-bar-row { grid-template-columns: 1fr; gap: 4px; }
}

/* v52 Detalle de Caso React controlado: convive con #drawerContent legacy. */
.react-detail-island[hidden],
#drawerContent.is-react-fallback-hidden[hidden] { display: none !important; }
.react-detail-v52 { display: grid; gap: 14px; }
.react-detail-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 2px; }
.react-detail-head h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.react-detail-inline-state { margin-top: 8px; }
.react-detail-sections { margin-top: 0; }
.react-detail-actions-card .actions-stack-vertical { align-items: stretch; }
.react-detail-actions-card .actions-stack-vertical button { width: 100%; justify-content: center; }
.react-detail-observation textarea,
.react-detail-actions-card textarea { width: 100%; }
.react-detail-error { padding: 18px; border-radius: 18px; border: 1px solid var(--border); background: var(--card); }
@media (max-width: 720px) {
  .react-detail-toolbar { align-items: stretch; flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
   v55 · App Shell React + Design System inicial
   Mantiene DOM legacy y agrega navegación moderna no destructiva.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --v55-shell-w: 108px;
  --v55-shell-blur: blur(18px) saturate(1.18);
  --v55-shell-bg: color-mix(in srgb, #cbd5e1 82%, transparent);
  --v55-shell-bg-solid: #d7dee8;
  --v55-shell-line: color-mix(in srgb, #94a3b8 58%, transparent);
  --v55-shell-item-w: 68px;
  --v55-focus-ring: 0 0 0 4px color-mix(in srgb, var(--teal) 18%, transparent);
}

#react-app-shell-root {
  position: relative;
  z-index: 85;
}

.ds-card {
  background: var(--v55-shell-bg);
  border: 1px solid var(--v55-shell-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--v55-shell-blur);
}

.ds-btn {
  appearance: none;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.ds-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.ds-btn:focus-visible { outline: none; box-shadow: var(--v55-focus-ring), var(--shadow-sm); }
.ds-btn:disabled { cursor: not-allowed; opacity: .48; transform: none; box-shadow: none; }
.ds-btn-primary { color: white; border-color: transparent; background: linear-gradient(135deg, var(--teal), var(--indigo)); box-shadow: var(--shadow-teal); }
.ds-btn-ghost { color: var(--text-medium); background: color-mix(in srgb, var(--surface-2) 70%, transparent); }

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  min-height: 26px;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.ds-badge-neutral { color: var(--text-medium); background: color-mix(in srgb, var(--surface-2) 72%, transparent); }
.ds-badge-ok { color: var(--green); background: var(--green-dim); border-color: color-mix(in srgb, var(--green) 24%, transparent); }
.ds-badge-danger { color: var(--red); background: var(--red-dim); border-color: color-mix(in srgb, var(--red) 24%, transparent); }

.ds-skeleton,
.v55-shell-loading .ds-skeleton {
  display: inline-block;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
  background-size: 240% 100%;
  animation: v55Skeleton 1.2s ease-in-out infinite;
}
@keyframes v55Skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.ds-empty-state,
.ds-error-state {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px dashed var(--line-2);
  color: var(--text-medium);
  background: color-mix(in srgb, var(--surface-2) 62%, transparent);
}
.ds-error-state { border-color: color-mix(in srgb, var(--red) 32%, transparent); background: var(--red-dim); color: var(--red); }
.ds-empty-state strong,
.ds-error-state strong { display: block; color: var(--text-strong); font-family: var(--font-display); margin-bottom: var(--sp-2); }

.v55-app-shell {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 95;
}

.v55-shell-rail {
  pointer-events: auto;
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  top: calc(var(--top) + 12px);
  bottom: calc(var(--bottom) + 12px);
  width: 88px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 10px;
  border: 1px solid var(--v55-shell-line);
  border-radius: 28px;
  background: linear-gradient(180deg, var(--v55-shell-bg-solid), color-mix(in srgb, #e2e8f0 76%, transparent));
  box-shadow: 0 18px 48px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255,255,255,.62);
  backdrop-filter: var(--v55-shell-blur);
  overflow: visible;
  box-sizing: border-box;
}

.v55-rail-brand {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 20px;
  color: white;
  background: linear-gradient(135deg, var(--teal), var(--indigo));
  box-shadow: var(--shadow-teal);
  font: 900 21px/1 var(--font-display);
}

.v55-rail-nav {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  overflow: auto;
  scrollbar-width: none;
  padding: 3px 0 6px;
}
.v55-rail-nav::-webkit-scrollbar { display: none; }

.v55-rail-btn {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 58px;
  width: var(--v55-shell-item-w);
  max-width: var(--v55-shell-item-w);
  padding: 7px 5px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: transparent;
  color: #334155;
  cursor: pointer;
  box-sizing: border-box;
  transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.v55-rail-btn span { font-size: 20px; line-height: 1; }
.v55-rail-btn small { max-width: 100%; font-size: 10px; font-weight: 900; letter-spacing: -.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v55-rail-btn:hover,
.v55-rail-btn:focus-visible {
  outline: none;
  transform: translateY(-1px);
  color: var(--text-strong);
  background: rgba(255,255,255,.58);
  border-color: rgba(148,163,184,.46);
  box-shadow: var(--shadow-xs);
}
.v55-rail-btn.active {
  color: white;
  background: linear-gradient(135deg, var(--teal), var(--indigo));
  box-shadow: var(--shadow-teal);
}
.v55-rail-btn:disabled {
  opacity: .36;
  cursor: not-allowed;
  filter: grayscale(.5);
}

.v55-command-open {
  width: 52px;
  height: 52px;
  padding: 0;
  margin-top: auto;
  font-size: 18px;
  flex: 0 0 auto;
}

.v55-shell-pulse {
  pointer-events: auto;
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  top: calc(var(--top) + 12px);
  display: none;
  align-items: center;
  gap: var(--sp-4);
  max-width: min(540px, calc(100vw - 138px));
  padding: 12px 14px;
  transform: translateY(-8px);
  opacity: 0;
  animation: v55PulseIn .32s var(--ease-out) .1s forwards;
}
.v55-shell-pulse > div:first-child {
  display: grid;
  gap: 1px;
  min-width: 136px;
}
.v55-shell-pulse strong { color: var(--text-strong); font: 900 15px/1.15 var(--font-display); }
.v55-shell-pulse small { color: var(--muted); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v55-shell-badges { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.v55-shell-logout {
  min-height: 30px;
  padding: 6px 10px;
  border-color: color-mix(in srgb, var(--red) 32%, var(--line-2));
  color: var(--red);
  background: color-mix(in srgb, var(--red-dim, #fee2e2) 60%, transparent);
}
.v55-shell-logout:hover,
.v55-shell-logout:focus-visible {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}

@keyframes v55PulseIn { to { transform: translateY(0); opacity: 1; } }

.v55-command {
  pointer-events: auto;
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
}
.v55-command-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: var(--overlay);
  backdrop-filter: blur(4px);
}
.v55-command-panel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(720px, calc(100vh - 40px));
  overflow: auto;
  padding: var(--sp-5);
  box-shadow: var(--shadow-xl);
  animation: v55CommandIn .22s var(--ease-out);
}
@keyframes v55CommandIn { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

.v55-command-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.v55-command-head h3 { margin: 2px 0 0; font: 900 22px/1.1 var(--font-display); color: var(--text-strong); }
.v55-command-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-3);
}
.v55-command-item {
  text-align: left;
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-template-areas: "icon title" "icon copy";
  gap: 2px 12px;
  min-height: 78px;
  padding: var(--sp-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.v55-command-item:hover,
.v55-command-item:focus-visible {
  outline: none;
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--teal) 38%, var(--line-2));
  box-shadow: var(--shadow-sm);
  background: color-mix(in srgb, var(--teal-dim) 22%, var(--surface));
}
.v55-command-item span { grid-area: icon; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 16px; color: white; background: linear-gradient(135deg, var(--teal), var(--indigo)); box-shadow: var(--shadow-teal); }
.v55-command-item strong { grid-area: title; color: var(--text-strong); font: 900 15px/1.15 var(--font-display); }
.v55-command-item small { grid-area: copy; color: var(--muted); font-weight: 700; line-height: 1.3; }

.v55-shell-loading {
  position: fixed;
  left: 16px;
  top: calc(var(--top) + 16px);
  z-index: 92;
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: var(--r-lg);
  background: var(--v55-shell-bg);
  border: 1px solid var(--v55-shell-line);
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--v55-shell-blur);
}

.react-shell-v55-ready .topbar {
  box-shadow: var(--topbar-shadow), 0 1px 0 color-mix(in srgb, var(--teal) 10%, transparent) inset;
}
.react-shell-v55-ready .screen.active {
  animation: v55ScreenIn .18s var(--ease-out);
}
@keyframes v55ScreenIn { from { opacity: .84; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.react-shell-v55-ready .card,
.react-shell-v55-ready .kpi,
.react-shell-v55-ready .hero-card,
.react-shell-v55-ready .section-head,
.react-shell-v55-ready .filters,
.react-shell-v55-ready .dash-filters {
  border-color: color-mix(in srgb, var(--line-2) 72%, transparent);
}

.react-shell-v55-ready .hero-card {
  padding: clamp(28px, 4vw, 48px) clamp(34px, 4.8vw, 62px);
  border-radius: 30px;
}
.react-shell-v55-ready .hero-card > div:first-child {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.react-shell-v55-ready .hero-card .eyebrow {
  margin-bottom: 0;
  color: #087f92;
  font-size: clamp(12px, .95vw, 14px);
  font-weight: 950;
  letter-spacing: 4px;
}
.react-shell-v55-ready .hero-card h1 {
  font-size: clamp(36px, 4.15vw, 58px);
  line-height: .98;
  font-weight: 950;
  letter-spacing: -1.7px;
  color: #0f172a;
  text-wrap: balance;
}
.react-shell-v55-ready .hero-card p {
  max-width: 720px;
  font-size: clamp(14px, 1.05vw, 16px);
  color: #52627a;
}

.react-shell-v55-ready button:not(.v55-rail-btn):not(.v55-command-item):not(.v55-command-backdrop):not(.drawer-close),
.react-shell-v55-ready input,
.react-shell-v55-ready select,
.react-shell-v55-ready textarea {
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.react-shell-v55-ready input:focus,
.react-shell-v55-ready select:focus,
.react-shell-v55-ready textarea:focus {
  box-shadow: var(--v55-focus-ring);
}

@media (min-width: 1180px) {
  .react-shell-v55-ready .scroll-area {
    padding-left: calc(var(--v55-shell-w) + var(--sp-3));
  }
  .react-shell-v55-ready .bottom-nav {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }
  .v55-shell-rail,
  .v55-shell-pulse {
    display: flex;
  }
}

@media (min-width: 1180px) and (max-height: 760px) {
  .v55-shell-pulse {
    top: 10px;
    right: 12px;
    max-width: min(520px, calc(100vw - 130px));
    padding: 8px 10px;
  }
  .v55-shell-pulse .eyebrow,
  .v55-shell-pulse .ds-badge:nth-of-type(n+3) { display: none; }
  .v55-shell-rail { bottom: 16px; }
}

@media (max-width: 1179px) {
  .v55-command-open { display: none; }
  .v55-shell-loading { display: none; }
  .react-shell-v55-ready .bottom-nav {
    border-top-color: color-mix(in srgb, var(--teal) 16%, var(--nav-border));
    box-shadow: 0 -16px 40px color-mix(in srgb, var(--nav-shadow) 70%, transparent);
  }
  .react-shell-v55-ready .nav-btn.active {
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .react-shell-v55-ready .screen.active,
  .v55-command-panel,
  .v55-shell-pulse,
  .ds-skeleton,
  .v55-shell-loading .ds-skeleton {
    animation: none !important;
    transition: none !important;
  }
}


/* ── v55 scroll/header polish: compact home hero and non-sticky section heads ── */
.react-shell-v55-ready .screen > .sticky-head,
.react-shell-v55-ready #screen-home .hero-card.sticky-head,
.react-shell-v55-ready #screen-new .section-head.sticky-head,
.react-shell-v55-ready #screen-cases .section-head.sticky-head,
.react-shell-v55-ready #screen-admin .section-head.sticky-head {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.react-shell-v55-ready #screen-home .hero-card {
  min-height: 0 !important;
  padding: clamp(18px, 2.1vw, 28px) clamp(28px, 4vw, 54px) !important;
  gap: clamp(14px, 2vw, 28px) !important;
  border-radius: 26px !important;
  margin-bottom: var(--sp-4) !important;
  align-items: center !important;
  overflow: hidden;
}

.react-shell-v55-ready #screen-home .hero-card > div:first-child {
  gap: 6px !important;
}

.react-shell-v55-ready #screen-home .hero-card .eyebrow {
  margin: 0 !important;
  font-size: clamp(11px, .86vw, 13px) !important;
  letter-spacing: 3.4px !important;
}

.react-shell-v55-ready #screen-home .hero-card h1 {
  margin: 0 !important;
  font-size: clamp(34px, 3.55vw, 52px) !important;
  line-height: 1.01 !important;
  letter-spacing: -1.45px !important;
}

.react-shell-v55-ready #screen-home .hero-card .row-actions {
  align-items: center;
  gap: 10px;
}

.react-shell-v55-ready #screen-home .hero-card .row-actions button {
  min-height: 42px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.react-shell-v55-ready #screen-new .section-head,
.react-shell-v55-ready #screen-cases .section-head {
  padding-top: 0 !important;
  box-shadow: none !important;
}

.react-shell-v55-ready #screen-new .section-head.sticky-head,
.react-shell-v55-ready #screen-cases .section-head.sticky-head {
  margin-bottom: var(--sp-4) !important;
}

@media (min-width: 1180px) {
  .react-shell-v55-ready #screen-home .hero-card {
    min-height: 118px !important;
  }
}

@media (max-width: 820px) {
  .react-shell-v55-ready #screen-home .hero-card {
    grid-template-columns: 1fr;
    padding: 22px !important;
  }
  .react-shell-v55-ready #screen-home .hero-card h1 {
    font-size: clamp(30px, 10vw, 42px) !important;
  }
}

/* v56 · Núcleo operativo React */
.react-operational-core-island,
.react-operational-cases-island {
  display: block;
  margin: 0 0 16px;
}
.react-operational-fallback-active .react-operational-core-island,
.react-operational-fallback-active .react-operational-cases-island {
  display: none !important;
}
.react-operational-cases-active #casesFilters,
.react-operational-cases-active #bulkBar,
.react-operational-cases-active #casesTableWrap,
.react-operational-cases-active #casesPagination,
.react-operational-cases-active #pendingBoard {
  display: none !important;
}
.v56-operational-panel {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.92));
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.09);
  padding: 18px;
  overflow: hidden;
}
.v56-op-head,
.v56-head-actions,
.v56-action-groups,
.v56-action-group,
.v56-bulk-bar,
.v56-pagination,
.v56-row-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.v56-op-head {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.v56-op-head h3 { margin: 2px 0 4px; font-size: clamp(1.1rem, 2vw, 1.45rem); }
.v56-op-head p { margin: 0; color: var(--muted); max-width: 780px; }
.v56-head-actions { flex-wrap: wrap; justify-content: flex-end; }
.v56-form-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 16px;
}
.v56-step {
  border: 1px solid rgba(15,23,42,.1);
  background: rgba(255,255,255,.82);
  border-radius: 16px;
  padding: 11px;
  text-align: left;
  cursor: pointer;
}
.v56-step span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  margin-right: 8px;
  background: rgba(100,116,139,.14);
  font-weight: 800;
}
.v56-step.ok span { background: rgba(22, 163, 74, .16); }
.v56-step.pending strong { color: var(--muted); }
.v56-form-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.v56-form-summary-grid article {
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  padding: 14px;
}
.v56-form-summary-grid span,
.v56-action-group span { display: block; color: var(--muted); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.v56-form-summary-grid strong { display: block; margin: 4px 0; font-size: 1.25rem; }
.v56-form-summary-grid small { color: var(--muted); }
.v56-inline-state {
  margin: 14px 0 0;
  border-radius: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(241,245,249,.92);
}
.v56-inline-state.ok { background: rgba(220,252,231,.7); }
.v56-inline-state.warn { background: rgba(254,243,199,.75); }
.v56-inline-state.loading { background: rgba(219,234,254,.7); }
.v56-action-groups {
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 14px;
}
.v56-action-group {
  flex-wrap: wrap;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  padding: 10px;
  background: rgba(255,255,255,.66);
}
.v56-action-group.primary-group { flex: 1 1 360px; justify-content: flex-end; }
.v56-cases-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(150px, .7fr) minmax(150px, .7fr) auto;
  gap: 10px;
  margin: 12px 0;
}
.v56-cases-filters input,
.v56-cases-filters select {
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.9);
  padding: 0 12px;
}
.v56-bulk-bar {
  justify-content: space-between;
  border: 1px solid rgba(239,68,68,.2);
  background: rgba(254,242,242,.9);
  border-radius: 16px;
  padding: 10px 12px;
  margin: 10px 0;
  flex-wrap: wrap;
}
.v56-table-wrap { overflow: auto; border-radius: 18px; border: 1px solid rgba(15,23,42,.08); }
.v56-cases-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 1050px; }
.v56-cases-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(248,250,252,.98);
  text-align: left;
  padding: 12px;
  font-size: .78rem;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.v56-cases-table td { padding: 12px; border-bottom: 1px solid rgba(15,23,42,.06); vertical-align: middle; }
.v56-cases-table tr:hover td { background: rgba(59,130,246,.045); }
.v56-cases-table td small { display: block; color: var(--muted); margin-top: 2px; }
.v56-status-stack { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.v56-row-actions { justify-content: flex-end; flex-wrap: wrap; }
.v56-empty-state {
  display: grid;
  place-items: center;
  min-height: 180px;
  text-align: center;
  color: var(--muted);
  padding: 24px;
}
.v56-empty-state strong { color: var(--text); font-size: 1rem; }
.v56-cases-skeleton { display: grid; gap: 10px; padding: 14px; }
.v56-cases-skeleton span {
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(226,232,240,.75), rgba(248,250,252,.98), rgba(226,232,240,.75));
  background-size: 240% 100%;
  animation: v56Skeleton 1.4s ease-in-out infinite;
}
@keyframes v56Skeleton { from { background-position: 0 0; } to { background-position: -240% 0; } }
.v56-pagination { justify-content: center; margin-top: 12px; }
.v56-kanban {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.v56-kanban-col {
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  padding: 12px;
  min-height: 170px;
}
.v56-kanban-col h4 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; }
.v56-kanban-card {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(248,250,252,.9);
  border-radius: 14px;
  padding: 10px;
  margin: 0 0 8px;
  cursor: pointer;
}
.v56-kanban-card strong,
.v56-kanban-card small { display: block; }
.v56-kanban-card small { color: var(--muted); margin: 3px 0 8px; }
.v56-actions-hint { margin: 0 0 10px; }
@media (max-width: 920px) {
  .v56-op-head { flex-direction: column; }
  .v56-form-steps,
  .v56-form-summary-grid,
  .v56-cases-filters { grid-template-columns: 1fr; }
  .v56-action-groups,
  .v56-action-group,
  .v56-action-group.primary-group { align-items: stretch; justify-content: stretch; }
  .v56-action-group > button { width: 100%; }
  .v56-operational-panel { padding: 14px; border-radius: 18px; }
}

/* Correccion visual v56 · nucleo operativo compacto y filas de casos mas bajas */
.v56-form-panel-compact {
  padding: 12px 14px;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
}
.v56-form-panel-compact .v56-op-head-compact {
  align-items: center;
  margin-bottom: 8px;
}
.v56-form-panel-compact .v56-op-head-compact h3 {
  margin: 1px 0 0;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.15;
}
.v56-form-panel-compact .v56-op-head-compact .eyebrow {
  font-size: .68rem;
  letter-spacing: .12em;
}
.v56-form-compact-body {
  display: grid;
  gap: 8px;
}
.v56-form-panel-compact .v56-form-steps {
  margin: 0;
  gap: 7px;
}
.v56-form-panel-compact .v56-step {
  min-height: 38px;
  padding: 6px 8px;
  border-radius: 12px;
  line-height: 1.15;
}
.v56-form-panel-compact .v56-step span {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  font-size: .78rem;
}
.v56-form-panel-compact .v56-step strong {
  font-size: .86rem;
}
.v56-form-summary-inline {
  gap: 7px;
}
.v56-form-summary-inline article {
  min-height: 46px;
  padding: 7px 10px;
  border-radius: 12px;
}
.v56-form-panel-compact .v56-form-summary-grid span {
  font-size: .68rem;
  letter-spacing: .05em;
}
.v56-form-panel-compact .v56-form-summary-grid strong {
  margin: 1px 0 0;
  font-size: 1rem;
  line-height: 1.05;
}
.v56-form-panel-compact .v56-form-summary-grid small {
  display: none;
}
.v56-compact-status-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.v56-form-panel-compact .v56-inline-state {
  margin: 0;
  padding: 8px 10px;
  border-radius: 12px;
  line-height: 1.25;
}
.v56-action-groups-compact {
  margin-top: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px;
}
.v56-action-groups-compact .v56-action-group {
  padding: 6px;
  border-radius: 12px;
  flex-wrap: nowrap;
}
.v56-action-groups-compact .v56-action-group span {
  display: none;
}
.v56-action-groups-compact button {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: .85rem;
  line-height: 1;
  white-space: nowrap;
}
.v56-cases-table th {
  padding: 8px 10px;
}
.v56-cases-table td {
  padding: 7px 10px;
  line-height: 1.25;
}
.v56-cases-table td strong {
  font-size: .9rem;
  line-height: 1.15;
}
.v56-cases-table td small {
  margin-top: 1px;
  font-size: .78rem;
  line-height: 1.18;
}
.v56-cases-table .col-check {
  width: 34px;
  padding-inline: 8px;
}
.v56-cases-table th:nth-child(2),
.v56-cases-table td:nth-child(2) {
  min-width: 132px;
}
.v56-cases-table td:nth-child(2) strong,
.v56-cases-table td:nth-child(4),
.v56-cases-table td:nth-child(5),
.v56-cases-table td:nth-child(8),
.v56-cases-table td.amount {
  white-space: nowrap;
}
.v56-cases-table td:last-child {
  width: 220px;
}
.v56-row-actions {
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: nowrap;
  min-width: 194px;
}
.v56-row-actions button {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: .83rem;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 920px) {
  .v56-form-panel-compact .v56-form-steps,
  .v56-form-panel-compact .v56-form-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .v56-compact-status-actions {
    grid-template-columns: 1fr;
  }
  .v56-action-groups-compact {
    justify-content: stretch;
  }
  .v56-action-groups-compact .v56-action-group {
    flex: 1 1 auto;
  }
}


/* Correccion v57 · tabla de Casos completa, compacta y sin scroll horizontal */
.v56-table-wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
.v56-cases-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.v56-cases-table th,
.v56-cases-table td {
  padding: 6px 7px;
  line-height: 1.12;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v56-cases-table th {
  font-size: .68rem;
  letter-spacing: .035em;
}
.v56-cases-table td {
  height: 42px;
  max-height: 42px;
  font-size: .82rem;
}
.v56-cases-table td strong {
  font-size: .82rem;
  line-height: 1.05;
}
.v56-cases-table td small {
  margin-top: 1px;
  font-size: .72rem;
  line-height: 1.05;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.v56-cases-table .col-check {
  width: 2.6%;
  min-width: 28px;
  padding-inline: 5px;
}
.v56-cases-table th:nth-child(2),
.v56-cases-table td:nth-child(2) { width: 13.2%; }
.v56-cases-table th:nth-child(3),
.v56-cases-table td:nth-child(3) { width: 10.2%; }
.v56-cases-table th:nth-child(4),
.v56-cases-table td:nth-child(4) { width: 9.8%; }
.v56-cases-table th:nth-child(5),
.v56-cases-table td:nth-child(5) { width: 9.8%; }
.v56-cases-table th:nth-child(6),
.v56-cases-table td:nth-child(6) { width: 8.6%; }
.v56-cases-table th:nth-child(7),
.v56-cases-table td:nth-child(7) { width: 7%; }
.v56-cases-table th:nth-child(8),
.v56-cases-table td:nth-child(8) { width: 9.2%; }
.v56-cases-table th:nth-child(9),
.v56-cases-table td:nth-child(9) { width: 7.6%; }
.v56-cases-table th:nth-child(10),
.v56-cases-table td:nth-child(10) { width: 7.8%; }
.v56-cases-table th.v56-actions-col,
.v56-cases-table td.v56-actions-col {
  position: static;
  right: auto;
  z-index: auto;
  width: 14.2%;
  min-width: 0;
  max-width: none;
  padding-inline: 5px 7px;
  background: inherit;
  box-shadow: none;
}
.v56-cases-table tr:hover td.v56-actions-col {
  background: rgba(59,130,246,.045);
}
.v56-cases-table td:nth-child(2) strong,
.v56-cases-table td:nth-child(3) strong,
.v56-cases-table td:nth-child(3) small,
.v56-cases-table td:nth-child(4),
.v56-cases-table td:nth-child(5),
.v56-cases-table td:nth-child(6),
.v56-cases-table td:nth-child(7),
.v56-cases-table td:nth-child(8),
.v56-cases-table td.amount {
  white-space: nowrap;
}
.v56-row-actions {
  width: 100%;
  min-width: 0;
  gap: 3px;
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.v56-row-actions button {
  min-height: 26px;
  padding: 4px 6px;
  border-radius: 9px;
  font-size: .72rem;
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
}
.v56-row-actions button.secondary,
.v56-row-actions button.ghost,
.v56-row-actions button.danger {
  box-shadow: none;
}
@media (max-width: 1180px) {
  .v56-operational-panel { padding: 12px; }
  .v56-cases-table th,
  .v56-cases-table td { padding-inline: 5px; }
  .v56-cases-table th { font-size: .62rem; }
  .v56-cases-table td { font-size: .76rem; }
  .v56-cases-table td strong { font-size: .76rem; }
  .v56-cases-table td small { font-size: .68rem; }
  .v56-row-actions { gap: 2px; }
  .v56-row-actions button { padding-inline: 4px; font-size: .66rem; }
}
@media (max-width: 760px) {
  .v56-cases-table th,
  .v56-cases-table td { padding-inline: 3px; }
  .v56-cases-table th { font-size: .54rem; letter-spacing: .015em; }
  .v56-cases-table td { font-size: .66rem; height: 36px; max-height: 36px; }
  .v56-cases-table td strong { font-size: .66rem; }
  .v56-cases-table td small { font-size: .58rem; }
  .v56-row-actions button { min-height: 22px; padding-inline: 2px; font-size: .54rem; border-radius: 7px; }
}

/* v57 - Administración, módulos auxiliares y sync React */
.react-v57-aux-root { margin: var(--sp-4) 0; }
#screen-admin.v57-react-mounted .v57-legacy-admin-fallback,
#screen-receipts.v57-react-mounted .v57-legacy-aux-fallback,
#screen-attachments.v57-react-mounted .v57-legacy-aux-fallback,
#screen-catalogs.v57-react-mounted .v57-legacy-sync-fallback { display: none !important; }
.v57-aux-panel {
  display: grid;
  gap: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, white), color-mix(in srgb, var(--surface-2) 82%, transparent));
  box-shadow: var(--shadow-md);
  padding: clamp(16px, 2.5vw, 24px);
  animation: uiRiseIn .24s var(--ease-out) both;
}
.v57-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  padding-bottom: var(--sp-3);
}
.v57-panel-head h3 { margin: 2px 0 4px; font-size: clamp(1.18rem, 2vw, 1.55rem); color: var(--text-strong); }
.v57-panel-head p { max-width: 860px; color: var(--muted); margin: 0; line-height: 1.45; }
.v57-head-actions, .v57-form-actions, .v57-row-actions, .v57-sync-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.v57-admin-tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.v57-admin-tabs button {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  padding: 9px 14px;
  color: var(--text-medium);
  font-weight: 800;
  cursor: pointer;
}
.v57-admin-tabs button:hover { background: var(--surface-2); color: var(--text); }
.v57-admin-tabs button.active { background: var(--indigo); color: white; border-color: transparent; box-shadow: var(--shadow-sm); }
.v57-admin-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}
.v57-admin-overview article {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 88%, white);
  padding: var(--sp-3);
  box-shadow: var(--shadow-xs);
}
.v57-admin-overview span { display: block; color: var(--muted); font-size: var(--fs-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.v57-admin-overview strong { display: block; color: var(--text-strong); font-size: clamp(1.3rem, 2.4vw, 2rem); margin-top: 2px; }
.v57-admin-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); align-items: stretch; }
.v58-admin-stacked { grid-template-columns: 1fr !important; }
.v58-admin-stacked .v57-form-card, .v58-admin-stacked .v57-table-card { width: 100%; }
.v58-admin-stacked .v57-form-card { order: 1; }
.v58-admin-stacked .v57-table-card { order: 2; }
.v57-form-card, .v57-table-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4);
}
.v57-form-card h4, .v57-table-card h4 { margin: 0 0 4px; color: var(--text-strong); }
.v57-form-card p, .v57-table-card p { margin: 0 0 var(--sp-3); color: var(--muted); }
.v57-admin-form { display: grid; gap: var(--sp-3); }
.v57-admin-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-3); }
.v57-admin-form label { display: grid; gap: 6px; color: var(--text-medium); font-weight: 800; font-size: var(--fs-sm); }
.v57-admin-form input, .v57-table-toolbar input, .v57-filters input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 12px;
  background: var(--surface-2);
  color: var(--text);
}
.v57-admin-form input:focus, .v57-table-toolbar input:focus, .v57-filters input:focus { outline: none; box-shadow: var(--v55-focus-ring); border-color: color-mix(in srgb, var(--indigo) 45%, var(--border)); }
.v57-table-toolbar { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: start; margin-bottom: var(--sp-3); }
.v57-table-toolbar input { max-width: 320px; background: white; }
.v57-table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--r-md); max-height: min(62vh, 720px); }
.v57-admin-table { width: 100%; border-collapse: collapse; min-width: 820px; }
.v57-admin-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--text-medium);
  text-align: left;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.v57-admin-table th, .v57-admin-table td { border-bottom: 1px solid var(--border); padding: 10px 12px; vertical-align: middle; white-space: nowrap; }
.v57-admin-table tbody tr:hover { background: color-mix(in srgb, var(--indigo) 5%, transparent); }
.v57-admin-table .is-inactive { opacity: .55; }
.v57-sync-pill { display: inline-flex; align-items: center; gap: 5px; border: 1px solid; border-radius: 999px; padding: 4px 9px; font-size: var(--fs-xs); font-weight: 850; white-space: nowrap; }
.v57-sync-pill.synced { background: var(--green-light); color: var(--green); border-color: rgba(5,150,105,.25); }
.v57-sync-pill.pending { background: var(--amber-light); color: var(--amber); border-color: rgba(217,119,6,.25); }
.v57-sync-pill.error { background: var(--red-light); color: var(--red); border-color: rgba(220,38,38,.25); }
.v57-inline-state {
  display: grid;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  background: var(--surface-2);
  color: var(--text-medium);
}
.v57-inline-state strong { color: var(--text-strong); }
.v57-inline-state.ok { background: var(--green-light); border-color: rgba(5,150,105,.22); color: var(--green); }
.v57-inline-state.warn { background: var(--amber-light); border-color: rgba(217,119,6,.22); color: var(--amber); }
.v57-inline-state.error { background: var(--red-light); border-color: rgba(220,38,38,.22); color: var(--red); }
.v57-inline-state.info { background: color-mix(in srgb, var(--indigo) 7%, var(--surface)); border-color: color-mix(in srgb, var(--indigo) 18%, var(--border)); }
.v57-skeleton-stack { display: grid; gap: var(--sp-2); }
.v57-skeleton-stack span { min-height: 52px; border-radius: var(--r-md); background: linear-gradient(90deg, var(--surface-2), color-mix(in srgb, var(--surface) 55%, white), var(--surface-2)); background-size: 220% 100%; animation: skeletonShimmer 1.2s ease-in-out infinite; }
.v57-card-list { display: grid; gap: var(--sp-3); }
.v57-case-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: var(--sp-3);
  box-shadow: var(--shadow-xs);
}
.v57-case-card strong { color: var(--text-strong); font-size: 1rem; }
.v57-case-card p { color: var(--muted); margin: 3px 0 0; }
.v57-filters { display: flex; gap: var(--sp-2); align-items: center; }
.v57-filters input { max-width: 520px; background: white; }
.v57-sync-actions { border-top: 1px solid var(--border); padding-top: var(--sp-3); }
@media (max-width: 980px) {
  .v57-admin-layout { grid-template-columns: 1fr; }
  .v57-admin-overview, .v57-sync-overview { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .v57-table-toolbar, .v57-panel-head, .v57-case-card { flex-direction: column; align-items: stretch; }
  .v57-table-toolbar input { max-width: none; }
}
@media (max-width: 620px) {
  .v57-admin-overview, .v57-sync-overview { grid-template-columns: 1fr; }
  .v57-head-actions, .v57-row-actions, .v57-sync-actions { width: 100%; }
  .v57-row-actions button, .v57-sync-actions button, .v57-head-actions button { flex: 1 1 auto; }
  .v57-aux-panel { padding: var(--sp-3); border-radius: var(--r-lg); }
}

/* ═══════════════════════════════════════════════════════════════
   v58 · Cierre React final: Inicio moderno, estados claros y legacy controlado
   ═══════════════════════════════════════════════════════════════ */
#screen-home .hero-card {
  border: 1px solid color-mix(in srgb, var(--indigo) 16%, var(--line));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--teal) 13%, transparent) 0, transparent 32%),
    radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--indigo) 10%, transparent) 0, transparent 28%),
    color-mix(in srgb, var(--surface) 94%, white);
  box-shadow: 0 12px 38px rgba(15,30,60,.10), 0 2px 8px rgba(15,30,60,.06);
}
#screen-home .hero-card h1 { letter-spacing: -.04em; }
#screen-home .hero-card .eyebrow { color: var(--teal-dark); font-weight: 900; }
#react-dashboard-root[data-v58-dashboard-final="true"],
.react-dashboard-v51[data-v58-dashboard-final="true"] {
  --v58-card-border: color-mix(in srgb, var(--indigo) 13%, var(--line));
  --v58-card-bg: color-mix(in srgb, var(--surface) 96%, white);
  display: grid;
  gap: var(--sp-4);
}
.react-dashboard-v51[data-v58-dashboard-final="true"] .react-dashboard-toolbar {
  border: 1px solid var(--v58-card-border);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, white), color-mix(in srgb, var(--surface-2) 88%, white)),
    var(--surface);
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-xl);
}
.react-dashboard-v51[data-v58-dashboard-final="true"] .react-dashboard-dot {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--teal) 18%, white), color-mix(in srgb, var(--indigo) 14%, white));
  color: var(--indigo-dark);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--indigo) 16%, transparent);
}
.react-dashboard-v51[data-v58-dashboard-final="true"] .react-dashboard-title strong {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  letter-spacing: -.03em;
}
.react-dashboard-v51[data-v58-dashboard-final="true"] .react-dashboard-actions .badge,
.react-dashboard-v51[data-v58-dashboard-final="true"] .react-table-island-chip {
  background: color-mix(in srgb, var(--indigo) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--indigo) 18%, var(--line));
  color: var(--text-medium);
}
.react-dashboard-v51[data-v58-dashboard-final="true"] .dash-filters.react-dashboard-filters {
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--surface) 96%, white);
  border-color: var(--v58-card-border);
  box-shadow: var(--shadow-xs);
}
.v58-kpi {
  min-height: 112px;
  padding: 18px 18px 16px;
  border-radius: 22px;
  border: 1px solid var(--v58-card-border, var(--line));
  border-left-width: 1px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, white), color-mix(in srgb, var(--surface-2) 76%, white)),
    var(--surface);
  box-shadow: 0 10px 28px rgba(15,30,60,.08), 0 1px 0 rgba(255,255,255,.70) inset;
}
.v58-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 999px 0 0 999px;
  background: linear-gradient(180deg, var(--indigo), var(--teal));
}
.v58-kpi.warn::before { background: linear-gradient(180deg, var(--amber), color-mix(in srgb, var(--amber) 45%, var(--teal))); }
.v58-kpi.ok::before { background: linear-gradient(180deg, var(--green), var(--teal)); }
.v58-kpi.money::before { background: linear-gradient(180deg, var(--violet), var(--indigo)); }
.v58-kpi.danger-kpi::before { background: linear-gradient(180deg, var(--red), var(--coral)); }
.v58-kpi::after { opacity: .45; width: 68px; height: 68px; }
.v58-kpi:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(15,30,60,.12), 0 1px 0 rgba(255,255,255,.75) inset; }
.v58-kpi span { color: var(--text-medium); letter-spacing: .08em; }
.v58-kpi strong { font-size: clamp(18px, 2.2vw, 26px); font-weight: 850; letter-spacing: -.04em; }
.v58-kpi small { color: var(--muted); }
.v58-kpi-skeleton,
.v58-skeleton-card,
.v58-skeleton-chart {
  display: block;
  border-radius: var(--r-lg);
  background: linear-gradient(90deg, var(--surface-2), color-mix(in srgb, var(--surface) 58%, white), var(--surface-2));
  background-size: 220% 100%;
  animation: skeletonShimmer 1.15s ease-in-out infinite;
}
.v58-kpi-skeleton { width: 78%; height: 26px; margin: var(--sp-2) 0; }
.v58-skeleton-card { min-height: 112px; border: 1px solid var(--line); box-shadow: var(--shadow-xs); }
.v58-skeleton-chart { min-height: 220px; border: 1px solid var(--line); box-shadow: var(--shadow-xs); }
.v58-dashboard-skeleton { display: grid; gap: var(--sp-4); }
.v58-dashboard-status {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--indigo) 16%, var(--line));
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  background: color-mix(in srgb, var(--indigo) 5%, var(--surface));
  color: var(--text-medium);
  box-shadow: var(--shadow-xs);
}
.v58-dashboard-status strong { display: block; color: var(--text-strong); }
.v58-dashboard-status span { display: block; color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
.v58-dashboard-status.error {
  border-color: color-mix(in srgb, var(--red) 22%, var(--line));
  background: color-mix(in srgb, var(--red-light) 72%, var(--surface));
}
.v58-dashboard-status.error strong { color: var(--red); }
.v58-empty-state {
  min-height: 132px;
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  border: 1px dashed color-mix(in srgb, var(--indigo) 18%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 95%, white), color-mix(in srgb, var(--surface-2) 62%, white));
}
.v58-empty-state strong { color: var(--text-strong); font-size: var(--fs-md); }
.v58-empty-state span { color: var(--muted); max-width: 420px; }
.react-dashboard-v51[data-v58-dashboard-final="true"] .dashboard-insights,
.react-dashboard-v51[data-v58-dashboard-final="true"] .dash-chart-card,
.react-dashboard-v51[data-v58-dashboard-final="true"] .recurrent-card {
  border-radius: var(--r-xl);
  border-color: var(--v58-card-border);
  background: var(--v58-card-bg);
  box-shadow: 0 8px 26px rgba(15,30,60,.08), 0 1px 0 rgba(255,255,255,.65) inset;
}
.react-dashboard-v51[data-v58-dashboard-final="true"] .dash-chart-card h3,
.react-dashboard-v51[data-v58-dashboard-final="true"] .dashboard-insights h3,
.react-dashboard-v51[data-v58-dashboard-final="true"] .recurrent-card h3 {
  font-weight: 850;
  letter-spacing: -.025em;
}
.react-dashboard-v51[data-v58-dashboard-final="true"] .dash-chart-card:hover { transform: translateY(-2px); }
.react-dashboard-v51[data-v58-dashboard-final="true"] .react-dashboard-bar-track,
.react-dashboard-v51[data-v58-dashboard-final="true"] .res-bar-track {
  background: color-mix(in srgb, var(--surface-3) 74%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-2) 70%, transparent);
}
.react-dashboard-v51[data-v58-dashboard-final="true"] .react-dashboard-pie-total {
  background: radial-gradient(circle, color-mix(in srgb, var(--surface) 96%, white), color-mix(in srgb, var(--surface-2) 72%, white));
  box-shadow: var(--shadow-xs);
}
#dashboardLegacyRoot[data-legacy-dashboard="v50"],
.v57-legacy-admin-fallback,
.v57-legacy-sync-fallback,
.v57-legacy-aux-fallback {
  contain: layout style;
}
.react-v57-aux-root[data-react-mounted="1"] + .v57-legacy-aux-fallback,
#screen-admin.v57-react-mounted .v57-legacy-admin-fallback,
#screen-catalogs.v57-react-mounted .v57-legacy-sync-fallback {
  display: none !important;
}
@media (max-width: 1100px) {
  .react-dashboard-v51[data-v58-dashboard-final="true"] .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #screen-home .hero-card { border-radius: var(--r-lg); }
  .v58-dashboard-status { align-items: stretch; flex-direction: column; }
  .react-dashboard-v51[data-v58-dashboard-final="true"] .kpi-grid { grid-template-columns: 1fr; }
  .v58-kpi { min-height: 98px; }
  .v58-empty-state { min-height: 110px; padding: var(--sp-4); }
}

/* v58 final: fallbacks visuales retirados */
.is-decommissioned { display: none !important; }


/* v58 topbar fix: una sola capa superior. El estado flotante React queda retirado. */
.v55-shell-pulse { display: none !important; }
.react-shell-v55-ready .topbar {
  z-index: 110;
  box-shadow: var(--topbar-shadow), 0 1px 0 color-mix(in srgb, var(--teal) 10%, transparent) inset;
}
@media (max-width: 980px) {
  .topbar { align-items: flex-start; min-height: var(--top); }
  .brand { flex: 1 1 170px; }
  .top-actions { flex: 1 1 100%; justify-content: flex-start; }
  .theme-toggle-btn { min-height: 34px; padding: 0 10px; }
  .topbar-pill-btn, .topbar-logout-btn, #refreshBtn { min-height: 34px; padding-inline: 10px; }
}
@media (max-width: 680px) {
  .topbar { gap: var(--sp-2); }
  .top-actions { gap: 6px; }
  .topbar-user-menu .user-selector-btn { max-width: 100%; }
  .topbar-pill-btn { display: none; }
  #refreshBtn { min-width: 42px; padding-inline: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   v58 · Fases 5-8 Producción: diagnóstico, accesibilidad y polish final
   ═══════════════════════════════════════════════════════════════ */
body[data-release="v58-fases-5-8-produccion"] {
  --prod-ok-bg: color-mix(in srgb, var(--green-light) 78%, var(--surface));
  --prod-warn-bg: color-mix(in srgb, var(--amber-light) 78%, var(--surface));
  --prod-error-bg: color-mix(in srgb, var(--red-light) 78%, var(--surface));
}
body.v58-production-ready .sync-state::after,
body.v58-production-attention .sync-state::after {
  content: "Prod";
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
body.v58-production-ready .sync-state::after {
  color: var(--green);
  background: var(--prod-ok-bg);
}
body.v58-production-attention .sync-state::after {
  color: var(--amber);
  background: var(--prod-warn-bg);
}
body[data-release="v58-fases-5-8-produccion"] .screen.active {
  scroll-margin-top: calc(var(--top) + 14px);
}
body[data-release="v58-fases-5-8-produccion"] :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--teal) 34%, transparent);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--teal) 12%, transparent);
}
body[data-release="v58-fases-5-8-produccion"] :is(.card, .ds-card, .v56-operational-panel, .v57-aux-panel, .react-dashboard-toolbar, .react-table-v50, .react-detail-v52) {
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), background-color var(--t-fast);
}
body[data-release="v58-fases-5-8-produccion"] :is(.v56-operational-panel, .v57-aux-panel, .react-table-v50, .react-detail-v52) {
  border-color: color-mix(in srgb, var(--indigo) 12%, var(--line));
  box-shadow: 0 8px 28px rgba(15,30,60,.075), 0 1px 0 rgba(255,255,255,.55) inset;
}
body[data-release="v58-fases-5-8-produccion"] .react-table-state-cell,
body[data-release="v58-fases-5-8-produccion"] .v57-inline-state,
body[data-release="v58-fases-5-8-produccion"] .v58-dashboard-status {
  text-wrap: pretty;
}
body[data-release="v58-fases-5-8-produccion"] .cases-overlay-table-wrap,
body[data-release="v58-fases-5-8-produccion"] .v57-table-wrap {
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}
body[data-release="v58-fases-5-8-produccion"] .toast {
  max-width: min(560px, calc(100vw - 24px));
  line-height: 1.35;
}
@media (prefers-reduced-motion: reduce) {
  body[data-release="v58-fases-5-8-produccion"] *,
  body[data-release="v58-fases-5-8-produccion"] *::before,
  body[data-release="v58-fases-5-8-produccion"] *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}
@media (max-width: 720px) {
  body[data-release="v58-fases-5-8-produccion"] .top-actions {
    row-gap: 8px;
  }
  body[data-release="v58-fases-5-8-produccion"] .sync-state {
    min-height: 32px;
    max-width: 100%;
  }
  body[data-release="v58-fases-5-8-produccion"] :is(.primary.big, .ghost, .ds-btn, .icon-btn, .topbar-icon-btn, .topbar-logout-btn) {
    min-height: 42px;
  }
  body[data-release="v58-fases-5-8-produccion"] .cases-overlay {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}


/* v59 public access: login retirado, credenciales deshabilitadas */
.public-access-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--green) 34%, var(--topbar-btn-border));
  background: color-mix(in srgb, var(--green-light) 72%, var(--topbar-btn-bg));
  color: color-mix(in srgb, var(--green) 82%, var(--topbar-brand-text));
  font-size: var(--fs-sm);
  font-weight: 800;
  white-space: nowrap;
}
.public-access-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 13%, transparent);
}
body[data-auth="authenticated"] #screen-login[hidden] { display: none !important; }
body[data-auth="authenticated"] #publicAccessBadge { display: inline-flex; }
body[data-auth="authenticated"] #topLogoutBtn[hidden],
body[data-auth="authenticated"] #userMenuAuth[hidden],
body[data-auth="authenticated"] #userSelectorWidget[aria-hidden="true"] { display: none !important; }
.public-access-retired { min-height: 0; }