/* ============================================================
   SUPER CEREBRO — SHELL COMPARTIDO
   Sidebar de dos niveles + buscador global (⌘K) para TODAS las
   páginas del sistema.

   TODO el CSS está namespaced con .scs- / #scs- . La única regla
   que toca un selector ajeno es el padding-left del <body>, que es
   la forma de correr el contenido de la página sin tocar su layout
   interno (hay páginas con body flex, body block!important y
   body height:100%: ninguna se rompe con un padding).

   Identidad: azul institucional #003595 (Pantone 661 C),
   negro #222222 (Neutral Black C), gris de filete #CFD2D3 (427 C).
   Geometría y sombras siguen los tokens de panel/styles.css.
   ============================================================ */

:root {
  /* Tokens propios, namespaced. NO heredamos --bg/--t1/--border de la
     página: 60 herramientas redefinen esos nombres con valores propios y
     el shell tiene que verse igual en todas. Los valores salen del manual
     de identidad y de panel/styles.css. */
  --scs-w:        264px;
  --scs-blue:     #003595;   /* Pantone 661 C */
  --scs-blue-2:   #1b4da0;
  --scs-ink:      #222222;   /* Neutral Black C */
  --scs-line:     #CFD2D3;   /* Pantone 427 C */
  --scs-surface:  #FFFFFF;
  --scs-surface-2:#F5F5F7;   /* --bg de styles.css */
  --scs-t2:       #5C6068;   /* 6.0:1 sobre blanco */
  --scs-tint:     rgba(0,53,149,.07);
  --scs-tint-2:   rgba(0,53,149,.12);
  --scs-r-sm:     8px;       /* --r-sm */
  --scs-r-md:     12px;      /* --r-md */
  --scs-r-lg:     16px;      /* --r-lg */
  --scs-shadow:   0 4px 16px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.05);
  --scs-font:     -apple-system, BlinkMacSystemFont, 'Plus Jakarta Sans', system-ui, sans-serif;
}

:root[data-theme="dark"] {
  --scs-ink:      #FFFFFF;
  --scs-line:     rgba(255,255,255,.14);
  --scs-surface:  #1C1C1E;
  --scs-surface-2:#2C2C2E;
  --scs-t2:       #B4B4BA;   /* 7.4:1 sobre #1C1C1E */
  --scs-tint:     rgba(90,140,235,.16);
  --scs-tint-2:   rgba(90,140,235,.24);
  --scs-shadow:   0 4px 20px rgba(0,0,0,.45);
}

/* ── Desplazamiento del contenido de la página ──────────────
   !important a propósito: el <style> de cada herramienta se
   carga después que este archivo y varias usan `padding` en
   shorthand sobre body. */
html.scs-on body { padding-left: var(--scs-w) !important; }

/* ── Rail ───────────────────────────────────────────────────
   z-index bajo (30) a propósito: los modales de las herramientas
   (z-index 50/100/9000) tienen que poder taparlo. El drawer móvil
   y el buscador sí van por encima de todo. */
#scs-shell {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--scs-w);
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--scs-surface);
  border-right: 1px solid var(--scs-line);
  font-family: var(--scs-font);
  font-size: 13px;
  color: var(--scs-ink);
  -webkit-font-smoothing: antialiased;
}

#scs-shell *, #scs-shell *::before, #scs-shell *::after { box-sizing: border-box; }
#scs-shell button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
#scs-shell a { color: inherit; text-decoration: none; }
#scs-shell :focus-visible,
#scs-palette :focus-visible {
  outline: 2px solid var(--scs-blue);
  outline-offset: 2px;
  border-radius: 6px;
}
:root[data-theme="dark"] #scs-shell :focus-visible,
:root[data-theme="dark"] #scs-palette :focus-visible { outline-color: #7FA8F5; }

/* ── Cabecera del rail ──────────────────────────────────── */
.scs-head {
  flex-shrink: 0;
  padding: 14px 12px 12px;
  border-bottom: 1px solid var(--scs-line);
  background: var(--scs-blue);
  color: #fff;
}
.scs-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.scs-brand-o {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 9px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.26);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; line-height: 1;
}
.scs-brand-txt { min-width: 0; }
.scs-brand-kick {
  font-size: 9px; font-weight: 800; letter-spacing: .17em;
  text-transform: uppercase; color: #B9C8E8;
}
.scs-brand-name { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }

.scs-search {
  width: 100%;
  min-height: 44px;                     /* objetivo táctil */
  display: flex; align-items: center; gap: 8px;
  padding: 0 9px;
  border-radius: var(--scs-r-sm);
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.26);
  color: #E4EBF8;
  font-size: 12.5px; font-weight: 600;
  transition: background 140ms;
}
.scs-search:hover { background: rgba(255,255,255,.22); color: #fff; }
.scs-search span { flex: 1; text-align: left; }
.scs-kbd {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 5px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
}

/* ── Navegación ─────────────────────────────────────────── */
.scs-nav {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 8px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--scs-line) transparent;
}
.scs-nav::-webkit-scrollbar { width: 4px; }
.scs-nav::-webkit-scrollbar-thumb { background: var(--scs-line); border-radius: 99px; }

.scs-sec-title {
  font-size: 9.5px; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--scs-t2);
  padding: 12px 10px 5px;
}
.scs-nav > .scs-sec-title:first-child { padding-top: 4px; }

/* Fila de área (nivel 1) */
.scs-area-btn {
  width: 100%;
  min-height: 44px;                     /* objetivo táctil */
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px;
  border-radius: var(--scs-r-md);
  text-align: left;
  border: 1px solid transparent;
  transition: background 120ms, border-color 120ms;
}
.scs-area-btn:hover { background: var(--scs-surface-2); }
.scs-area-btn[aria-expanded="true"] { background: var(--scs-tint); }
.scs-area.scs-here > .scs-area-btn { border-color: var(--scs-tint-2); }

.scs-area-ico {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 7px;
  background: var(--scs-surface-2);
  border: 1px solid var(--scs-line);
  color: var(--scs-t2);
  display: flex; align-items: center; justify-content: center;
}
.scs-area.scs-here > .scs-area-btn .scs-area-ico,
.scs-area-btn[aria-expanded="true"] .scs-area-ico {
  background: var(--scs-blue); border-color: var(--scs-blue); color: #fff;
}
.scs-area-txt { flex: 1; min-width: 0; }
.scs-area-name {
  display: block;
  font-size: 12.5px; font-weight: 700; line-height: 1.25;
  color: var(--scs-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scs-area.scs-here > .scs-area-btn .scs-area-name { color: var(--scs-blue); }
:root[data-theme="dark"] .scs-area.scs-here > .scs-area-btn .scs-area-name { color: #8FB4F7; }
.scs-area-label { display: block; font-size: 10.5px; color: var(--scs-t2); margin-top: 1px; }
.scs-chev {
  flex-shrink: 0; color: var(--scs-t2);
  transition: transform 160ms cubic-bezier(.16,1,.3,1);
}
.scs-area-btn[aria-expanded="true"] .scs-chev { transform: rotate(90deg); }

/* Lista de herramientas (nivel 2) */
.scs-tools {
  display: none;
  margin: 2px 0 6px 20px;
  padding-left: 9px;
  border-left: 1px solid var(--scs-line);
}
.scs-tools.scs-show { display: block; }

.scs-tool {
  position: relative;
  min-height: 44px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 7px;                       /* sin padding vertical: el alto lo pone el link */
  border-radius: var(--scs-r-sm);
  color: var(--scs-t2);
  transition: background 110ms, color 110ms;
}
.scs-tool:hover { background: var(--scs-surface-2); color: var(--scs-ink); }
/* El interactivo de la fila es este <a>, no el <div> que lo envuelve: si
   sólo la línea de texto es clickeable el objetivo mide 16px de alto por
   más que la fila mida 44. El line-height estira el link a la fila entera
   y sigue centrando el texto (white-space:nowrap garantiza un renglón). */
.scs-tool-name {
  flex: 1; min-width: 0;
  display: block;
  font-size: 12px; font-weight: 600; line-height: 44px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scs-tool.scs-active {
  background: var(--scs-tint);
  color: var(--scs-blue);
  font-weight: 700;
}
:root[data-theme="dark"] .scs-tool.scs-active { color: #8FB4F7; }
.scs-tool.scs-active::before {
  content: '';
  position: absolute; left: -10px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 16px;
  background: var(--scs-blue);
  border-radius: 0 3px 3px 0;
}
:root[data-theme="dark"] .scs-tool.scs-active::before { background: #8FB4F7; }
.scs-tool.scs-soon { opacity: .55; }

/* Badge numérico (lo llena otro módulo vía SCShell.setBadge) */
.scs-badge {
  flex-shrink: 0;
  min-width: 18px; height: 17px;
  padding: 0 5px;
  border-radius: 99px;
  background: #C0392B; color: #fff;
  font-size: 10px; font-weight: 800; line-height: 17px;
  text-align: center;
}
.scs-badge[hidden] { display: none; }

/* Estrella de favorita.
   Control secundario que se revela al pasar el mouse: 32px alcanza con
   puntero fino. En pantallas sin hover no habría forma de tocarla, así
   que ahí se muestra siempre y crece a 44px — los márgenes negativos le
   dan el área táctil comiéndose el padding de la fila, sin estirarla. */
.scs-fav {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px;
  color: var(--scs-line);
  opacity: 0;
  transition: opacity 110ms, color 110ms;
}
.scs-tool:hover .scs-fav, .scs-fav:focus-visible, .scs-fav.scs-on { opacity: 1; }
.scs-fav:hover { color: var(--scs-blue); }
.scs-fav.scs-on { color: #E8A21C; }
.scs-fav.scs-on svg { fill: currentColor; }

@media (hover: none) {
  .scs-fav { opacity: 1; width: 44px; height: 44px; margin-right: -7px; }
}

.scs-empty { padding: 6px 10px 2px; font-size: 11.5px; color: var(--scs-t2); }

/* ── Hamburguesa (≤860px) ───────────────────────────────── */
#scs-burger {
  position: fixed;
  left: 16px; bottom: 20px;
  z-index: 9990;
  display: none;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--scs-blue); color: #fff;
  border: none; cursor: pointer;
  align-items: center; justify-content: center;
  box-shadow: 0 8px 26px rgba(0,53,149,.42);
}
#scs-burger:hover { background: var(--scs-blue-2); }
/* La hamburguesa cuelga de <body>, no de #scs-shell: el :focus-visible de
   arriba no la alcanza. Anillo blanco por dentro — uno azul sobre el
   círculo azul no se vería. */
#scs-burger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -5px;
  box-shadow: 0 8px 26px rgba(0,53,149,.42), 0 0 0 3px var(--scs-blue);
}

#scs-scrim {
  position: fixed; inset: 0;
  z-index: 9988;
  background: rgba(0,0,0,.42);
  display: none;
}
#scs-scrim.scs-show { display: block; }

/* ── Buscador global ────────────────────────────────────── */
#scs-palette {
  position: fixed; inset: 0;
  z-index: 9999;
  display: none;
  padding: 12vh 16px 16px;
  background: rgba(20,24,32,.45);
  font-family: var(--scs-font);
}
#scs-palette.scs-show { display: block; }

/* Reset propio del buscador. NO es redundante con el de #scs-shell: la
   paleta se monta como hermana del rail, colgando de <body>, así que las
   reglas de #scs-shell no la alcanzan. Sin esto los resultados heredan el
   <a> del user-agent (subrayado + azul #0000EE) o el `a{}` global de la
   herramienta de turno, y se ven como HTML sin estilar. */
#scs-palette *, #scs-palette *::before, #scs-palette *::after { box-sizing: border-box; }
#scs-palette a { color: inherit; text-decoration: none; }

.scs-pal-box {
  width: min(560px, 100%);
  margin: 0 auto;
  background: var(--scs-surface);
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-r-lg);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  overflow: hidden;
  color: var(--scs-ink);
  font-size: 13px; line-height: 1.4;   /* piso propio: hay herramientas que mueven el font-size del root */
}
.scs-pal-input {
  width: 100%;
  min-height: 44px;
  border: none; outline: none;
  padding: 16px 18px;
  font: inherit; font-size: 15px; font-weight: 600;
  color: var(--scs-ink);
  background: var(--scs-surface);
  border-bottom: 1px solid var(--scs-line);
}
.scs-pal-input::placeholder { color: var(--scs-t2); font-weight: 500; }
.scs-pal-list { max-height: 52vh; overflow-y: auto; padding: 6px; }

/* Resultado: tres niveles de jerarquía en dos renglones.
   1) nombre — el dato que se busca: ink, 700, el más grande.
   2) área   — metadato de ubicación: chip gris, chico, no compite.
   3) desc   — apoyo: t2, dos líneas como máximo. */
.scs-pal-item {
  position: relative;
  display: block;
  min-height: 44px;                     /* objetivo táctil */
  padding: 8px 12px;
  border-radius: var(--scs-r-sm);
  cursor: pointer;
  color: var(--scs-ink);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 110ms, border-color 110ms;
}
.scs-pal-name {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13.5px; font-weight: 700; line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--scs-ink);
  min-width: 0;
}
.scs-pal-area {
  flex-shrink: 0;
  margin-left: 0;                       /* el gap del flex reemplaza al margin */
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--scs-surface-2);
  border: 1px solid var(--scs-line);
  font-size: 9.5px; font-weight: 800; letter-spacing: .09em;
  line-height: 1.5; text-transform: uppercase;
  color: var(--scs-t2);
}
.scs-pal-desc {
  font-size: 11.5px; line-height: 1.45; color: var(--scs-t2);
  margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Seleccionado: no alcanza con teñir el fondo un 7%. Se distingue por
   cuatro señales a la vez — fondo, filete, barra de acento y el chip de
   área invertido — para que se lea también sin percibir color. */
.scs-pal-item[aria-selected="true"] {
  background: var(--scs-tint-2);
  border-color: var(--scs-tint-2);
}
.scs-pal-item[aria-selected="true"]::before {
  content: '';
  position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--scs-blue);
}
.scs-pal-item[aria-selected="true"] .scs-pal-name { color: var(--scs-blue); }
.scs-pal-item[aria-selected="true"] .scs-pal-area {
  background: var(--scs-blue); border-color: var(--scs-blue); color: #fff;
}
.scs-pal-item[aria-selected="true"] .scs-pal-desc { color: var(--scs-ink); }
:root[data-theme="dark"] .scs-pal-item[aria-selected="true"]::before { background: #8FB4F7; }
:root[data-theme="dark"] .scs-pal-item[aria-selected="true"] .scs-pal-name { color: #8FB4F7; }
:root[data-theme="dark"] .scs-pal-item[aria-selected="true"] .scs-pal-area {
  background: #8FB4F7; border-color: #8FB4F7; color: #10233F;
}
.scs-pal-foot {
  display: flex; gap: 14px;
  padding: 8px 14px;
  border-top: 1px solid var(--scs-line);
  background: var(--scs-surface-2);
  font-size: 10.5px; font-weight: 600; color: var(--scs-t2);
}
.scs-pal-empty { padding: 22px 14px; text-align: center; font-size: 12.5px; color: var(--scs-t2); }

/* ── Responsive ─────────────────────────────────────────────
   El corte es 1220 y no 860 por una razón que no se ve a simple vista.

   El rail fijo empuja el contenido con `padding-left: 264px`, así que la
   herramienta trabaja en `viewport − 264`. Pero sus propios `@media` miden
   contra el VIEWPORT, no contra el ancho que realmente le quedó: una regla
   pensada para "≤ 820" recién dispara cuando la herramienta ya viene
   apretada desde hace 264 px. Medido: cotizador_omega se desborda 286 px a
   900 de viewport y reclamos 173, sin que ninguno de sus breakpoints se
   entere.

   Colapsando el rail a cajón antes (1220 = 860 del diseño + 264 del rail +
   aire), la herramienta recupera el viewport completo y sus breakpoints
   vuelven a valer. El costo es que entre 861 y 1220 hay que abrir el
   sidebar con el botón; la alternativa —tocar el CSS de las 60
   herramientas— es infinitamente más cara y más frágil.

   Si algún día el rail cambia de ancho, este número tiene que acompañarlo. */
@media (max-width: 1220px) {
  html.scs-on body { padding-left: 0 !important; }
  #scs-shell {
    z-index: 9989;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(.16,1,.3,1);
    box-shadow: var(--scs-shadow);
  }
  #scs-shell.scs-open { transform: translateX(0); }
  #scs-burger { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  #scs-shell, #scs-shell *, #scs-palette * { transition: none !important; }
  .scs-kpi-link:hover { transform: none; }
}

/* Nada del shell se imprime (hay herramientas que imprimen propuestas). */
@media print {
  #scs-shell, #scs-burger, #scs-scrim, #scs-palette { display: none !important; }
  html.scs-on body { padding-left: 0 !important; }
}

/* ============================================================
   DASHBOARD DEL SECTOR — los números del área, arriba de todo
   ============================================================
   Tarjetas sobrias: el dato manda, el envase no compite. Un KPI que no
   cargó se muestra como tal (skeleton / "sin conexión"), nunca como un
   cero: un cero se lee como dato real y hace tomar decisiones equivocadas.
   Paleta del Manual de Identidad 2022: azul 661 C, negro Neutral Black C. */
.scs-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 10px;
  margin: 0 0 20px;
}
.scs-kpis:empty { margin: 0; }

.scs-kpi {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: var(--r-md, 12px);
  padding: 13px 15px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08));
  min-width: 0;
}
.scs-kpi-link { display: block; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.scs-kpi-link:hover { border-color: rgba(0,53,149,.28); box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.08)); transform: translateY(-1px); }
.scs-kpi-link:focus-visible { outline: 2px solid #003595; outline-offset: 2px; }

.scs-kpi-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--t3, #8b8b90);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scs-kpi-valor {
  font-size: 21px; font-weight: 800; line-height: 1.15;
  letter-spacing: -.02em; color: var(--t1, #222); margin-top: 5px;
  font-variant-numeric: tabular-nums;   /* que no bailen los dígitos */
}
.scs-kpi-nota { font-size: 10.5px; color: var(--t2, #6E6E73); margin-top: 4px; line-height: 1.35; }
.scs-kpi-tend { font-size: 10.5px; font-weight: 700; margin-top: 4px; color: var(--t2, #6E6E73); }
.scs-kpi-tend.sube { color: #248A3D; }
.scs-kpi-tend.baja { color: #C93400; }

/* Error: gris y en minúscula. No rojo — un endpoint caído es una molestia
   operativa, no una alarma del negocio; teñirlo de rojo cría el hábito de
   ignorar el rojo cuando sí importa. */
.scs-kpi-err { font-size: 12.5px; font-weight: 600; color: var(--t3, #8b8b90); letter-spacing: 0; }

.scs-kpi-sk {
  display: block; height: 21px; width: 72%; border-radius: 5px;
  background: linear-gradient(90deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.09) 50%, rgba(0,0,0,.05) 75%);
  background-size: 200% 100%;
  animation: scs-sk 1.1s linear infinite;
}
@keyframes scs-sk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .scs-kpi-sk { animation: none; } }

:root[data-theme="dark"] .scs-kpi-sk {
  background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.06) 75%);
  background-size: 200% 100%;
}

@media (max-width: 760px) {
  .scs-kpis { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .scs-kpi-valor { font-size: 19px; }
}

/* ── Adentro de una herramienta: el menú no ocupa lugar ──────
   Mismo tratamiento que en pantalla chica, pero por otro motivo: acá la
   herramienta es el contenido principal y el menú es de paso. 8 de las 61
   traen su propio menú lateral, y dos menús pegados no se entienden.
   Ojo: esto NO puede ir dentro de un @media — vale en todos los anchos. */
html.scs-en-herramienta body { padding-left: 0 !important; }
html.scs-en-herramienta #scs-shell {
  z-index: 9989;
  transform: translateX(-100%);
  transition: transform 220ms cubic-bezier(.16,1,.3,1);
  box-shadow: var(--scs-shadow);
}
html.scs-en-herramienta #scs-shell.scs-open { transform: translateX(0); }
/* El botón sí queda siempre a la vista: es la única puerta de vuelta. */
html.scs-en-herramienta #scs-burger { display: flex; }
@media (prefers-reduced-motion: reduce) {
  html.scs-en-herramienta #scs-shell { transition: none; }
}

/* El botón, adentro de una herramienta, va ARRIBA a la izquierda y no abajo.
   Abajo pisaba los últimos ítems de los menús laterales propios —justo donde
   esas herramientas ponen su "volver"— y encima competía con los botones
   flotantes de IA que varias tienen en la esquina opuesta. Arriba, sobre la
   banda de marca, hay franja libre en las 61. */
html.scs-en-herramienta #scs-burger {
  top: 14px; bottom: auto; left: 14px;
  width: 42px; height: 42px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
html.scs-en-herramienta #scs-burger:hover { background: rgba(255,255,255,.28); }

/* ── Cabecera del menú, corregida ────────────────────────────
   Antes: un cuadro con una "Ω" de teclado + "Grupo Omega" + "Super Cerebro",
   apretados en 264 px y compitiendo con la banda de marca de la página, que
   dice exactamente lo mismo tres centímetros a la derecha. De ahí venía la
   sensación de desalineado.
   Ahora: el símbolo oficial, el nombre del sistema, y nada más. */
.scs-brand { gap: 11px; margin-bottom: 13px; align-items: center; }
img.scs-brand-o {
  width: 30px; height: 30px; flex-shrink: 0;
  object-fit: contain;
  /* El PNG es azul sobre transparente; sobre la cabecera azul va en blanco,
     que es la aplicación negativa que pide el manual (pág. 10). */
  filter: brightness(0) invert(1);
  opacity: .96;
}
.scs-brand-name {
  font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  line-height: 1.15; color: #fff;
}


/* ============================================================
   EL MENÚ DENTRO DEL PANEL — botonera en azul institucional
   ============================================================
   Píldoras sobre Pantone 661 C, sin íconos, con el área abierta en blanco
   sólido. Es el mismo gesto que los filtros que el sistema ya usa en
   Distribuidora y en Caja ("Hoy · Ayer · Este mes"): el activo lleno, el
   resto atrás. Así el menú deja de ser una pieza con lenguaje propio.

   Los íconos se van: con once áreas de nombre claro no agregaban información,
   y once cuadraditos grises apilados pesaban más que los nombres. */

html.scs-en-panel #scs-shell {
  top: var(--scs-top, 64px);
  background: #003595;
  border-right: none;
}
@media (max-width: 760px) { html.scs-en-panel #scs-shell { top: var(--scs-top, 56px); } }

/* ── Cabecera: sólo el buscador ── */
html.scs-en-panel #scs-shell .scs-head {
  background: transparent;
  border-bottom: none;
  padding: 14px 14px 6px;
}

/* ── Buscador: píldora, misma familia que los botones ── */
html.scs-en-panel #scs-shell .scs-search {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 99px;
  padding: 0 14px;
  min-height: 42px;
  color: #A9BEE4;
  gap: 9px;
  transition: background .15s, border-color .15s;
}
html.scs-en-panel #scs-shell .scs-search:hover {
  background: rgba(255,255,255,.20);
  border-color: rgba(255,255,255,.34);
  color: #fff;
}
html.scs-en-panel #scs-shell .scs-search span { color: inherit; font-weight: 500; }
html.scs-en-panel #scs-shell .scs-search svg { stroke: currentColor; flex-shrink: 0; }
html.scs-en-panel #scs-shell .scs-search:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html.scs-en-panel #scs-shell .scs-kbd {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 99px;
  color: #8FA9D8;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px;
}
@media (max-width: 860px) { html.scs-en-panel #scs-shell .scs-kbd { display: none; } }

/* ── Rótulos de sección ── */
html.scs-en-panel #scs-shell .scs-sec-title {
  color: #7B95C8;
  font-size: 9.5px;
  letter-spacing: .18em;
  padding: 14px 20px 8px;
}

/* ── Áreas: la píldora ── */
html.scs-en-panel #scs-shell .scs-nav { padding: 4px 0 18px; }
html.scs-en-panel #scs-shell .scs-area-btn {
  width: calc(100% - 28px);
  margin: 3px 14px;
  padding: 11px 16px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  border: 1px solid transparent;
  color: #DCE6F7;
  min-height: 46px;
  gap: 0;
  transition: background .15s, color .15s, box-shadow .15s;
}
html.scs-en-panel #scs-shell .scs-area-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
html.scs-en-panel #scs-shell .scs-area-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Sin íconos: once cuadraditos no decían nada que el nombre no dijera. */
html.scs-en-panel #scs-shell .scs-area-ico { display: none; }

/* El título, grande y con presencia. */
html.scs-en-panel #scs-shell .scs-area-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: inherit;
}
/* La bajada ("Dirección", "Caja") se va: repetía en chiquito lo que el
   nombre ya dice, y con el título grande no hacía falta. Queda el número
   de herramientas, que sí es un dato. */
html.scs-en-panel #scs-shell .scs-area-label { display: none; }
html.scs-en-panel #scs-shell .scs-chev {
  color: currentColor;
  opacity: .55;
  margin-left: auto;
}
html.scs-en-panel #scs-shell .scs-area-btn[aria-expanded="true"] .scs-chev { opacity: .8; }

/* Área abierta: blanca sólida, como el filtro activo del sistema. */
html.scs-en-panel #scs-shell .scs-area-btn[aria-expanded="true"],
.scs-area.scs-here > .scs-area-btn {
  background: #fff;
  border-color: #fff;
  color: #003595;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
html.scs-en-panel #scs-shell .scs-area-btn[aria-expanded="true"] .scs-area-name,
.scs-area.scs-here > .scs-area-btn .scs-area-name {
  color: #003595;
  font-weight: 800;
}

/* ── Herramientas: píldoras chicas, sangradas ── */
html.scs-en-panel #scs-shell .scs-tools {
  margin: 4px 0 10px;
  padding-left: 0;
  border-left: none;
}
html.scs-en-panel #scs-shell .scs-tool {
  margin: 2px 14px 2px 28px;
  padding: 0 6px 0 14px;
  border-radius: 99px;
  min-height: 40px;
  transition: background .13s;
}
html.scs-en-panel #scs-shell .scs-tool:hover { background: rgba(255,255,255,.10); }
html.scs-en-panel #scs-shell .scs-tool-name {
  color: #BCCCE8;
  font-size: 13px;
  font-weight: 500;
  transition: color .13s;
}
html.scs-en-panel #scs-shell .scs-tool:hover .scs-tool-name { color: #fff; }
html.scs-en-panel #scs-shell .scs-tool.scs-active { background: rgba(255,255,255,.18); }
html.scs-en-panel #scs-shell .scs-tool.scs-active .scs-tool-name { color: #fff; font-weight: 700; }
/* El filete vertical del activo no va: acá el relleno ya lo dice. */
html.scs-en-panel #scs-shell .scs-tool.scs-active::before { display: none; }
/* Las que todavía no existen, apagadas. */
html.scs-en-panel #scs-shell .scs-tool.scs-soon .scs-tool-name { color: #7B95C8; }

/* Favorita y contadores sobre azul */
html.scs-en-panel #scs-shell .scs-fav { color: #8FA9D8; }
html.scs-en-panel #scs-shell .scs-fav:hover,
.scs-fav.scs-on { color: #FFD75E; }
html.scs-en-panel #scs-shell .scs-badge { background: #FF3B30; color: #fff; }

/* Scrollbar del menú, discreto sobre el azul */
html.scs-en-panel #scs-shell .scs-nav { scrollbar-color: rgba(255,255,255,.28) transparent; }
html.scs-en-panel #scs-shell .scs-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); }

/* El número de herramientas del área. En el cajón lateral va dentro de la
   bajada; en el panel la bajada está oculta y el número sale suelto, alineado
   a la derecha antes del chevron. */
.scs-area-num { display: none; }
html.scs-en-panel #scs-shell .scs-area-num {
  display: inline-block;
  margin-left: auto;
  padding: 0 9px 0 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #8FA9D8;
  font-variant-numeric: tabular-nums;   /* que no bailen al cambiar de área */
}
html.scs-en-panel #scs-shell .scs-area-btn[aria-expanded="true"] .scs-area-num,
html.scs-en-panel #scs-shell .scs-area.scs-here > .scs-area-btn .scs-area-num {
  color: #3D7CC9;                        /* Pantone 660 C sobre la píldora blanca */
}


/* Rótulo de subsegmento dentro de un área. Más chico que el de sección: es un
   nivel más adentro y no tiene que competir con el nombre del área. */
.scs-grp {
  font-size: 8.5px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--scs-t2); opacity: .8;
  padding: 10px 10px 3px 12px;
}
.scs-tools > .scs-grp:first-child { padding-top: 4px; }
html.scs-en-panel #scs-shell .scs-grp { padding: 11px 20px 4px 26px; color: #7B95C8; }