/* ══════════════════════════════════════════════════════════════════════════════════════════════
   FRENTE C · LA CUARTA HOJA DE LA CAPA VISUAL — presentación del panel de Dirección (CEO)

   ═══ QUÉ ES ESTO Y QUÉ NO ES ═══
   El panel del CEO NO tiene un diseño propio aprobado: los once bloques del pliego del 05/09 no lo
   incluyen y el Plan Maestro lo dejó «pendiente del diseño de septiembre». Lo que el dueño resolvió
   —y lo único que esta hoja hace— es REUTILIZAR el sistema visual ya aprobado para mejorar su
   presentación. Nada de rieles nuevos, pestañas nuevas, cifras nuevas ni cambios de permisos: una
   ampliación funcional del panel queda PROPUESTA por separado, no implementada acá.

   Es CSS y un atributo. No toca una métrica, ni un permiso, ni un manejador, ni una confirmación,
   ni una escritura. Ningún número que se lee en pantalla lo calcula esta hoja: solo decide de qué
   tamaño, de qué color y en qué renglón se dibuja lo que el módulo ya calculó.

   ═══ LO QUE CORRIGE, MEDIDO EN PRODUCCIÓN EL 05/09 A LAS 23:30 ═══
     · Inicio: `.amt.pos` (#00c98d) a 2,01:1 y `.amt.neg` (#ff7b7b) a 2,34:1 sobre la tarjeta.
     · Finanzas del CEO: las mismas clases que el panel de Finanzas (.estado-cuenta/.ec-row/
       .ec-saldo) pero colgando de #ceo-content, así que la hoja de Finanzas —anclada a
       #finanzas-content— no las alcanza. --green a 2,16:1; .ec-title 10 px y .ec-counts 11 px a
       2,45:1; el toggle de moneda a 1,92:1 y 32 px de alto.
     · Etiquetas por debajo del piso de la norma: .ceoi-lab 10 px, .ceoi-kpi .k 8,5 px (!),
       .kpi-label/.kpi-sub 10 px, .equipo-role 12 px a 2,45:1, .ceo-section-title 11 px.
     · Equipo → Cuentas de acceso: «➕ Agregar usuario» 101×18, «🔑 PIN» 35×18, «✏️» 14×18,
       «Baja» 23×13. El texto, el manejador y la confirmación NO cambian: cambia el área táctil.
     · Cromo: .ceo-tab con min-height 40, ← 28×20, 💸 36×30, ↻ 32×32, el select de país 28 px y
       los ‹ › del mes 32×32. Y la barra de 7 pestañas, que a 390 px desborda ~90 px bajo una
       máscara que desvanece la última.
     · Ancho: a 834 px el cuerpo seguía en 430 (404 px de blanco muerto), porque el ensanche del
       05/09 se ató a #screen-coordinator y esta pantalla es otra.

   ═══ POR QUÉ NO SE PISA NINGÚN COLOR CON !important ═══
   Igual que en la hoja de plata: src/dashboards.js escribe muchos colores EN LÍNEA y en varios
   casos EL SIGNO O EL ESTADO LOS DECIDE ÉL (`style="color:var(--green)"` si el saldo es positivo,
   `var(--red)` si es negativo; los cinco colores de badgeActividad). Si esta hoja forzara `color`,
   un saldo negativo podría salir pintado de verde y un operario «sin rastro» podría salir en verde
   de «activo hoy». Por eso se REDEFINEN LOS TOKENS dentro de las cajas donde corresponde: cada
   valor sigue eligiendo su color según su signo —la lógica no se toca— y solo cambia el tono.

   ═══ LO QUE ESTA HOJA NO PUEDE ALCANZAR, DICHO DE FRENTE ═══
   El panel escribe ~27 estilos EN LÍNEA con tamaño y color literales (por ejemplo los badges de
   actividad del equipo, o el chip de país en rojo, que lleva el hex #ff8a8a escrito a mano). Un
   estilo en línea solo se vence con `!important`, y para esos casos `!important` aplastaría
   justamente la señal de estado. Quedan declarados y CONTADOS en tests/ceo-visual-navegador.mjs:
   arreglarlos pide tocar src/dashboards.js, que no es este frente.

   ═══ ALCANCE ═══
   Dos raíces —#screen-ceo y #ceo-content— registradas en tests/_lib-hojas-capa.mjs. Toda regla
   cuelga del interruptor y arranca en una de ellas.
   ⚠️ #alerts-banner-ceo VIVE DENTRO de #screen-ceo pero es raíz de public/finanzas-visual.css:
   ninguna regla de acá lo puede alcanzar. Como el registro solo mira los `#id` del selector y una
   regla por CLASE podría colarse igual, hay un contrato que lo mide EJECUTANDO —recorre cada
   selector de esta hoja con querySelectorAll en el DOM real y exige cero nodos dentro del banner—
   y otro que compara los estilos computados del banner entero con esta hoja puesta y sacada.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

html[data-base-visual='on'] {
  /* ── COLOR ──────────────────────────────────────────────────────────────────────────────────
     Los dos números del rediseño son los MISMOS que declara public/finanzas-visual.css. Están
     escritos otra vez acá y no tomados prestados a propósito: una hoja no debería depender de un
     token de otra para no romperse si aquella se reordena. Que no se separen lo vigila un
     contrato que compara los dos archivos y se pone rojo si divergen. */
  --bvc-pos: #00694f; /* 6,26:1 sobre la tarjeta (#f4f8f6) · 6,70:1 sobre blanco */
  --bvc-neg: #b91c1c; /* 6,04:1 sobre la tarjeta · 6,47:1 sobre blanco */
  --bvc-aviso: #8a5200; /* 6,39:1 sobre blanco · 5,96:1 sobre la tarjeta */
  --bvc-etiqueta: #456b5e; /* el --text2 de la app: 5,57:1 sobre la tarjeta · 5,97:1 sobre blanco */
  --bvc-neutro: #3d4b46; /* 9,16:1 sobre blanco — para los chips grises de estado */
  --bvc-info: #0b5fa5; /* 6,64:1 sobre blanco · 5,39:1 sobre el celeste del chip de estado de cliente */

  /* ── TAMAÑO DE TEXTO ────────────────────────────────────────────────────────────────────────
     Todo en rem, para que el texto ampliado del sistema escale de verdad. 0,75rem = 12 px, que es
     el piso que este frente declara: hoy hay etiquetas de 8,5 px. */
  --bvc-etiqueta-tam: 0.75rem;
  --bvc-texto-tam: 0.8125rem;

  /* ── TÁCTIL Y ANCHO — prestados de la hoja base, con respaldo escrito ───────────────────────
     Se toman de public/base-visual.css, que es donde el piso de la norma y la medida de lectura
     viven en UN solo lugar. El respaldo (`, 44px`) existe porque un `var()` sin valor invalida la
     declaración entera y el control volvería a quedar chico EN SILENCIO. Un contrato comprueba
     además que esos tres tokens sigan existiendo en la hoja base. */
  --bvc-tap: var(--bv-tap, 44px);
  --bvc-medida: var(--bv-medida, 900px);
  --bvc-lienzo: var(--bv-lienzo, 1400px);
  /* ── EL RIEL (bloque C8, 06/09) ────────────────────────────────────────────────────────────
     El ancho sale del MISMO token que usa el riel del coordinador: es el mismo riel, no otro. Si
     alguien cambia el número allá, cambia acá — que es lo que se quiere. El respaldo escrito
     (`, 236px`) está por la razón de siempre: un `var()` sin valor invalida la declaración entera
     y el riel se quedaría sin ancho EN SILENCIO. */
  --bvc-riel: var(--bv-riel, 236px);
  /* El fondo del riel es el gris de TARJETA que el contrato ya mide (`FONDOS.tarjeta`): así ningún
     rótulo del riel necesita un número de contraste nuevo. Y el borde es el mismo de la app. */
  --bvc-riel-superficie: #f4f8f6;
  --bvc-riel-borde: #d5e5df;

  --bvc-radio: 8px;
  --bvc-pista: #a9c8bd; /* el pulgar de la barra de deslizamiento de las pestañas */
}

/* ══ BLOQUE C1 · EL GRIS QUE NO SE LEE ══════════════════════════════════════════════════════════
   --text3 (#8aada3) da 2,45:1 sobre blanco: por debajo de la norma para cualquier texto. El panel
   lo usa por clase Y en línea (27 veces en src/dashboards.js), así que pisar `color` regla por
   regla dejaría afuera justo los de la línea. Se REDEFINE el token dentro de la pantalla: cada
   lugar que dice `var(--text3)` —esté en la hoja o en el atributo style— pasa a 5,97:1 sin que
   cambie una sola palabra ni una sola decisión del módulo.
   Es seguro porque en toda la app --text3 se usa SOLO como color de texto; el único uso como borde
   (.cancelar-inicio-banner button, styles.css) vive en el circuito del operario, fuera de acá. */
html[data-base-visual='on'] #screen-ceo {
  --text3: var(--bvc-etiqueta);
}
/* ⚠️ NOTA CRUZADA CON public/finanzas-visual.css (06/09) — la frontera con el banner de avisos.
   Este `--text3` SÍ cambia de valor dentro de `#alerts-banner-ceo`, por herencia: el banner vive
   dentro de esta pantalla. No pinta nada porque la hoja de plata escribe `color` explícitamente en
   los dos únicos consumidores del token que hay ahí (`.alerts-toggle` y `.alert-dismiss`), así que
   el valor heredado nunca se usa. Está medido —volcado de TODAS las propiedades computadas de todo
   el subárbol, con esta hoja puesta y vaciada: cero propiedades pintadas distintas— pero conviene
   saber que la frontera se apoya en una regla que vive en OTRA hoja: si alguien sacara ese `color`
   de finanzas-visual.css, este token pasaría a pintar. El contrato de navegador lo cazaría en el
   acto (compara los computados), y por eso la nota queda acá y no en un documento aparte. */

/* ══ BLOQUE C2 · EL CROMO DEL PANEL — piso táctil de la norma ═══════════════════════════════════
   Los seis controles del encabezado y de la navegación estaban por debajo de 44 px. Ninguno cambia
   de texto, de icono ni de manejador: cambia el área que hay que acertar con el pulgar. */

/* El ← de volver: 28×20 → 44×44. */
html[data-base-visual='on'] #screen-ceo > .ceo-header .ceo-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--bvc-tap);
  min-height: var(--bvc-tap);
  padding: 0;
  margin-left: -8px; /* el botón crece hacia adentro: la marca no se corre de donde está hoy */
  border-radius: var(--bvc-radio);
}
/* El 💸 de gastos. No tiene clase: src/dashboards.js lo escribe con el estilo en línea, así que se
   lo nombra por su acción. Es un selector de CSS —no toca el manejador ni lo que hace. */
html[data-base-visual='on'] #screen-ceo > .ceo-header button[data-click='openGastos'] {
  min-width: var(--bvc-tap);
  min-height: var(--bvc-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bvc-texto-tam);
  color: var(--bvc-etiqueta);
}
/* El nombre de la persona abre el menú de cuenta: es un control, no una etiqueta. */
html[data-base-visual='on'] #screen-ceo > .ceo-header .ceo-user-tag {
  display: inline-flex;
  align-items: center;
  min-height: var(--bvc-tap);
  padding: 0 var(--bvc-radio);
  font-size: var(--bvc-etiqueta-tam);
  color: var(--bvc-etiqueta);
  border-radius: var(--bvc-radio);
}

/* Los tres controles del encabezado también reciben el anillo: la comprobación de foco que se
   agregó el 06/09 —dar el foco por programa y leer el `outline` computado— los encontró con el
   anillo por defecto del navegador (`auto 1px`), por debajo de los 2 px que esta capa promete. */
html[data-base-visual='on'] #screen-ceo > .ceo-header .ceo-back-btn:focus-visible,
html[data-base-visual='on'] #screen-ceo > .ceo-header button:focus-visible,
html[data-base-visual='on'] #screen-ceo > .ceo-header .ceo-user-tag:focus-visible {
  outline: 2px solid var(--bvc-pos);
  outline-offset: 2px;
}

/* ── La barra de 7 pestañas ──────────────────────────────────────────────────────────────────
   A 390 px las pestañas suman ~90 px más de lo que entra. Hoy eso queda debajo de una MÁSCARA
   (`mask-image` en styles.css) que desvanece los últimos 22 px: «👥 Clientes» y «👥 Equipo» se ven
   a medias y parecen deshabilitadas en vez de parecer «hay más, deslizá». Y desde 900 px styles.css
   pone la barra en `overflow-x: visible`, o sea que el desborde deja de ser de la barra y pasa a
   ser del documento.

   Acá: la máscara se APAGA (ninguna pestaña se desvanece), el deslizamiento interno vale a
   CUALQUIER ancho (el documento nunca se va de costado) y la pista de que hay más es la barra de
   deslizamiento de verdad —fina y con color— más una sombra en el borde que solo aparece cuando
   hay contenido afuera (el truco de fondos `local`/`scroll`: el degradado blanco tapa la sombra
   mientras no haya nada que deslizar). Ninguna de las dos cosas se pinta ENCIMA de una pestaña. */
html[data-base-visual='on'] #screen-ceo .ceo-tab-bar {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-mask-image: none;
  mask-image: none;
  gap: 2px;
  padding: 0 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--bvc-pista) transparent;
  background:
    linear-gradient(to right, #ffffff 60%, rgba(255, 255, 255, 0)) left center / 22px 100% no-repeat
      local,
    linear-gradient(to left, #ffffff 60%, rgba(255, 255, 255, 0)) right center / 22px 100% no-repeat
      local,
    radial-gradient(farthest-side at 0 50%, rgba(13, 31, 25, 0.16), rgba(13, 31, 25, 0)) left center /
      9px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(13, 31, 25, 0.16), rgba(13, 31, 25, 0)) right
      center / 9px 100% no-repeat scroll,
    #ffffff;
}
html[data-base-visual='on'] #screen-ceo .ceo-tab-bar::-webkit-scrollbar {
  display: block; /* styles.css la esconde; acá es justamente la pista de que hay más */
  height: 4px;
}
html[data-base-visual='on'] #screen-ceo .ceo-tab-bar::-webkit-scrollbar-thumb {
  background: var(--bvc-pista);
  border-radius: 3px;
}
/* ⚠️ EL ÚNICO PAR QUE EMPEORA EN TODO EL FRENTE, y va escrito porque nadie lo había declarado:
   la pestaña NO activa pasa de **17,11:1** (--text sobre blanco, 11 px) a **6,70:1** (12 px). Sigue
   muy por encima de la norma —lo mide el contrato en las 60 combinaciones— y es una decisión de
   JERARQUÍA: con siete pestañas todas en el tono más fuerte, la activa no se distinguía por nada más
   que un borde de 2 px. Ahora la activa es la oscura y las otras retroceden un paso. Lo encontró la
   revisión independiente comparando nodo por nodo. */
html[data-base-visual='on'] #screen-ceo .ceo-tab {
  min-height: var(--bvc-tap);
  padding: 0 10px;
  font-size: var(--bvc-etiqueta-tam);
  color: var(--bvc-etiqueta);
  border-radius: var(--bvc-radio) var(--bvc-radio) 0 0;
}
/* La pestaña activa con DOS señales, no solo color: el subrayado ya existía y se engrosa, y la
   letra pasa a peso fuerte. Quien no distingue el verde igual ve cuál está elegida. */
html[data-base-visual='on'] #screen-ceo .ceo-tab.active {
  color: var(--bvc-pos);
  font-weight: 800;
  border-bottom-width: 3px;
  border-bottom-color: var(--bvc-pos);
}
html[data-base-visual='on'] #screen-ceo .ceo-tab:focus-visible {
  outline: 2px solid var(--bvc-pos);
  outline-offset: -2px;
}

/* ── Los chips de país del encabezado, el toggle de moneda de Finanzas y el de Rentabilidad ──
   Son todos `.ceo-country-tab`. El activo estaba en 1,92:1 (verde de marca sobre verde claro): el
   chip elegido era el MENOS legible de la fila. Y medían 28 px de alto. */
html[data-base-visual='on'] #screen-ceo .ceo-country-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bvc-tap);
  /* El relleno vertical se CONSERVA. Poniéndolo en 0 el chip pasaba de 46 px a 44: cumplía el piso
     y aun así era más chico que antes. Un piso no puede funcionar como techo — lo cazó el contrato
     de navegador con la regla «ningún control se achica». */
  padding: 6px 14px;
  font-size: var(--bvc-etiqueta-tam);
  color: var(--bvc-etiqueta);
}
html[data-base-visual='on'] #screen-ceo .ceo-country-tab.active {
  color: var(--bvc-pos); /* 5,97:1 sobre el verde claro (#e0f7ef), contra 1,92:1 de hoy */
  font-weight: 800; /* segunda señal: el elegido no depende solo del color */
  border-color: var(--bvc-pos);
}
html[data-base-visual='on'] #screen-ceo .ceo-country-tab:focus-visible,
html[data-base-visual='on'] #screen-ceo .period-chip:focus-visible,
html[data-base-visual='on'] #screen-ceo .month-nav-btn:focus-visible,
html[data-base-visual='on'] #screen-ceo .ceo-refresh-btn:focus-visible,
html[data-base-visual='on'] #screen-ceo .ceo-pais-select:focus-visible {
  outline: 2px solid var(--bvc-pos);
  outline-offset: 2px;
}

/* ── El selector de país, el ↻ y los ‹ › del mes ─────────────────────────────────────────────── */
/* ⚠️ El `<select>` lleva `height` ADEMÁS de `min-height`, y no es por gusto: WebKit —el motor del
   iPad y del iPhone, que es donde el CEO abre esto— IGNORA `min-height` en un `<select>`. Medido:
   con solo `min-height` el selector de país quedaba en 87×25 en WebKit y en 44 en Chromium. Un piso
   que solo se cumple en un motor no es un piso. El alto es de 44 px fijos y la letra sigue en rem:
   con el texto del sistema al doble (24 px) sigue entrando. */
html[data-base-visual='on'] #ceo-content .ceo-pais-select {
  min-height: var(--bvc-tap);
  height: var(--bvc-tap);
  padding: 0 8px;
  font-size: var(--bvc-etiqueta-tam);
  color: var(--bvc-etiqueta);
}
html[data-base-visual='on'] #ceo-content .ceo-refresh-btn {
  width: var(--bvc-tap);
  height: var(--bvc-tap);
  color: var(--bvc-etiqueta);
}
html[data-base-visual='on'] #ceo-content .ceo-fresh {
  font-size: var(--bvc-etiqueta-tam);
}
html[data-base-visual='on'] #ceo-content .month-nav-btn {
  width: var(--bvc-tap);
  height: var(--bvc-tap);
  color: var(--bvc-etiqueta);
}
html[data-base-visual='on'] #ceo-content .period-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--bvc-tap);
  padding: 0 14px;
  font-size: var(--bvc-etiqueta-tam);
  color: var(--bvc-etiqueta);
}
/* El chip de período elegido ya estaba bien de contraste (#04130d sobre el verde de marca: 8,82:1).
   ⚠️ Y JUSTAMENTE POR ESO hay que devolvérselo: la regla de arriba pinta `.period-chip` con más
   especificidad que el `.period-chip.active` de styles.css, así que el chip elegido se quedaba con
   el gris de etiqueta sobre el verde — 2,77:1, PEOR que antes. Lo encontró el contrato de navegador
   midiendo, no leyendo: un arreglo que empeora el caso de al lado. */
html[data-base-visual='on'] #ceo-content .period-chip.active {
  color: #04130d; /* 8,82:1 sobre el verde de marca */
  font-weight: 800;
}

/* ══ BLOQUE C3 · INICIO ════════════════════════════════════════════════════════════════════════
   El titular del panel es el balance del período, y era lo menos legible de la pantalla. */
/* ⚠️ EL NÚMERO TITULAR NO SE PARTE EN DOS RENGLONES (corrección del 06/09).
   Subir las etiquetas de la fila (`.cur`, `.ceoi-up`, `.ceoi-dn`, `.ceoi-eq`, `.ceoi-vs`) de 10 a
   12 px le come al importe los 6 px de ancho que justo necesitaba: a 390 px «+UY$ 224.250» pasaba
   de 140×26 (un renglón) a 134×52 (DOS). O sea que el arreglo de legibilidad rompía la pieza más
   importante de la pantalla, y NINGÚN contrato lo veía — envolver no es desbordar y `scrollWidth`
   no cambia. Lo encontró la revisión independiente midiendo.
   La decisión, y su porqué: el que NO puede partirse es el importe, así que la fila pasa a poder
   envolver y el que baja de renglón es «vs período anterior», la etiqueta más prescindible de las
   cuatro. A 834 y a 1440 nada envuelve y la fila queda igual que hoy. */
html[data-base-visual='on'] #ceo-content .ceoi-hero-row {
  flex-wrap: wrap;
  row-gap: 2px;
}
html[data-base-visual='on'] #ceo-content .ceoi-hero-row .amt {
  white-space: nowrap;
  font-variant-numeric: tabular-nums; /* ya lo traía styles.css; se repite para que el token viva acá */
}
html[data-base-visual='on'] #ceo-content .ceoi-hero-row .amt.pos {
  color: var(--bvc-pos); /* 2,01:1 → 6,26:1 */
}
html[data-base-visual='on'] #ceo-content .ceoi-hero-row .amt.neg {
  color: var(--bvc-neg); /* 2,34:1 → 6,04:1 */
}
html[data-base-visual='on'] #ceo-content .ceoi-hero-row .cur {
  font-size: var(--bvc-etiqueta-tam);
  color: var(--bvc-etiqueta);
}
html[data-base-visual='on'] #ceo-content .ceoi-lab {
  font-size: var(--bvc-etiqueta-tam); /* 10 px → 12 px */
  color: var(--bvc-etiqueta); /* 2,28:1 → 5,57:1 */
  line-height: 1.4;
}
/* Las flechas de variación: ▲ era el verde de marca (2,01:1) y ▼ un rosa de tema oscuro (2,27:1).
   El símbolo ya distingue subida de bajada sin color; lo que faltaba era poder leerlos. */
html[data-base-visual='on'] #ceo-content .ceoi-up {
  color: var(--bvc-pos);
  font-size: var(--bvc-etiqueta-tam);
}
html[data-base-visual='on'] #ceo-content .ceoi-dn {
  color: var(--bvc-neg);
  font-size: var(--bvc-etiqueta-tam);
}
html[data-base-visual='on'] #ceo-content .ceoi-eq {
  font-size: var(--bvc-etiqueta-tam);
}
html[data-base-visual='on'] #ceo-content .ceoi-vs {
  font-size: var(--bvc-etiqueta-tam);
}
/* Los cuatro KPI de arriba. `.k` medía 8,5 px: es el texto más chico de toda la app. */
html[data-base-visual='on'] #ceo-content .ceoi-kpi {
  padding: 10px 6px;
}
html[data-base-visual='on'] #ceo-content .ceoi-kpi .v {
  font-variant-numeric: tabular-nums;
}
html[data-base-visual='on'] #ceo-content .ceoi-kpi .k {
  font-size: var(--bvc-etiqueta-tam); /* 8,5 px → 12 px */
  color: var(--bvc-etiqueta);
  letter-spacing: 0.04em;
  line-height: 1.3;
}
html[data-base-visual='on'] #ceo-content .ceoi-kpi .d {
  font-size: var(--bvc-etiqueta-tam);
}
/* La franja de salud y el bloque de atención: los tres colores eran del tema OSCURO que la app
   dejó atrás (#ffd24a a 1,44:1 y #7fe7c3 a 1,49:1 sobre blanco). El emoji 🟢🟡🔴 sigue siendo la
   señal que no depende del color; acá se agrega que además se lea. */
html[data-base-visual='on'] #ceo-content .ceoi-band.ok {
  color: var(--bvc-pos);
}
html[data-base-visual='on'] #ceo-content .ceoi-band.warn {
  color: var(--bvc-aviso);
}
html[data-base-visual='on'] #ceo-content .ceoi-band.bad {
  color: var(--bvc-neg);
}
html[data-base-visual='on'] #ceo-content .ceoi-band .att {
  font-size: var(--bvc-etiqueta-tam);
}
html[data-base-visual='on'] #ceo-content .ceoi-att .at {
  color: var(--bvc-aviso);
  font-size: var(--bvc-etiqueta-tam);
  letter-spacing: 0.08em;
}
html[data-base-visual='on'] #ceo-content .ceoi-att.allok .at {
  color: var(--bvc-pos);
}
/* «HOY EN LA OPERACIÓN»: el rótulo iba en verde de marca sobre un fondo teñido de verde. */
html[data-base-visual='on'] #ceo-content .ceoi-live .lt {
  color: var(--bvc-pos);
  font-size: var(--bvc-etiqueta-tam);
  letter-spacing: 0.08em;
}
html[data-base-visual='on'] #ceo-content .ceoi-live .l2 {
  font-size: var(--bvc-etiqueta-tam);
}
/* La barra de avance del servicio en curso: el canal era negro al 35 %, de la época del tema
   oscuro; sobre el fondo claro quedaba un rectángulo gris fuerte. */
html[data-base-visual='on'] #ceo-content .ceoi-live .bar {
  background: rgba(13, 31, 25, 0.12);
}
/* Las filas que se tocan dentro de las tarjetas de Inicio (abren un servicio, cambian de pestaña,
   despliegan la comparativa o el pipeline): eran de 26 a 40 px de alto. */
html[data-base-visual='on'] #ceo-content .ceoi-live .row-tap,
html[data-base-visual='on'] #ceo-content .ceoi-item.tap {
  min-height: var(--bvc-tap);
  box-sizing: border-box;
}
html[data-base-visual='on'] #ceo-content .ceoi-item {
  font-size: var(--bvc-texto-tam);
}
html[data-base-visual='on'] #ceo-content .ceoi-pais {
  min-height: var(--bvc-tap);
  padding: 8px 10px;
}
html[data-base-visual='on'] #ceo-content .ceoi-pais .f {
  font-size: 1rem;
}
html[data-base-visual='on'] #ceo-content .ceoi-pais .m {
  font-size: var(--bvc-etiqueta-tam);
}
html[data-base-visual='on'] #ceo-content .ceoi-table {
  font-size: var(--bvc-etiqueta-tam);
}
html[data-base-visual='on'] #ceo-content .ceoi-table th {
  font-size: var(--bvc-etiqueta-tam);
  color: var(--bvc-etiqueta);
  letter-spacing: 0.04em;
}
html[data-base-visual='on'] #ceo-content .ceoi-table td {
  font-variant-numeric: tabular-nums;
}
/* La comparativa de países es la única tabla del panel: si no entra, se desliza DENTRO de su caja
   y no de costado en la página. La tarjeta ya trae `overflow-x:auto` en línea; acá se asegura que
   la tabla pueda ser más ancha que la tarjeta en vez de aplastar las columnas. */
html[data-base-visual='on'] #ceo-content .ceoi-card .ceoi-table {
  min-width: 340px;
}
/* …Y ESA TARJETA PASA A RECIBIR EL FOCO, así que necesita anillo (06/09).
   Cuando la tabla desborda su caja, Chromium hace que un contenedor que se desliza y no tiene hijos
   enfocables sea alcanzable con Tab — para poder deslizarlo con el teclado. Es contenido que sin la
   capa no se alcanzaba, o sea que está bien; lo que estaba mal es que llegaba con el anillo por
   defecto del navegador (1 px), por debajo de los 2 px que esta capa promete. Lo encontró el
   recorrido con Tab del contrato de navegador: ninguna regla lo hacía visible porque la tarjeta no
   es un `button`, ni un `input`, ni un `[data-click]`. */
html[data-base-visual='on'] #ceo-content .ceoi-card:focus-visible {
  outline: 2px solid var(--bvc-pos);
  outline-offset: 2px;
}
html[data-base-visual='on'] #ceo-content .pedido-card-detail {
  font-size: var(--bvc-etiqueta-tam);
}

/* ══ BLOQUE C4 · MÉTRICAS ══════════════════════════════════════════════════════════════════════ */
html[data-base-visual='on'] #ceo-content .salud-band {
  font-size: var(--bvc-etiqueta-tam);
  letter-spacing: 0.06em;
}
html[data-base-visual='on'] #ceo-content .hero-label {
  font-size: var(--bvc-etiqueta-tam);
  color: var(--bvc-etiqueta);
}
html[data-base-visual='on'] #ceo-content .hero-line {
  font-variant-numeric: tabular-nums;
}
html[data-base-visual='on'] #ceo-content .hero-spark-cap {
  font-size: var(--bvc-etiqueta-tam);
  color: var(--bvc-etiqueta);
}
html[data-base-visual='on'] #ceo-content .hero-delta {
  font-size: var(--bvc-etiqueta-tam);
}
html[data-base-visual='on'] #ceo-content .kpi-label {
  font-size: var(--bvc-etiqueta-tam); /* 10 px → 12 px */
  color: var(--bvc-etiqueta); /* 2,45:1 → 5,97:1 */
  letter-spacing: 0.04em;
}
html[data-base-visual='on'] #ceo-content .kpi-sub {
  font-size: var(--bvc-etiqueta-tam);
  color: var(--bvc-etiqueta);
  line-height: 1.4;
}
html[data-base-visual='on'] #ceo-content .kpi-num {
  font-variant-numeric: tabular-nums;
}
html[data-base-visual='on'] #ceo-content .kpi-unit {
  font-size: var(--bvc-etiqueta-tam);
  color: var(--bvc-etiqueta);
}
html[data-base-visual='on'] #ceo-content .tipo-val,
html[data-base-visual='on'] #ceo-content .tipo-name {
  font-size: var(--bvc-texto-tam);
}
html[data-base-visual='on'] #ceo-content .tipo-val {
  font-variant-numeric: tabular-nums;
}
html[data-base-visual='on'] #ceo-content .ceo-acc-head {
  min-height: var(--bvc-tap);
}
/* La flecha ▴/▾ de los acordeones y de los grupos de gastos medía 10 px. */
html[data-base-visual='on'] #ceo-content .fin-arrow {
  font-size: var(--bvc-etiqueta-tam);
  color: var(--bvc-etiqueta);
}
html[data-base-visual='on'] #ceo-content .ceo-acc-head.warn {
  color: var(--bvc-aviso);
}
html[data-base-visual='on'] #ceo-content .ceo-section-title {
  font-size: var(--bvc-etiqueta-tam); /* 11 px → 12 px */
  color: var(--bvc-etiqueta); /* 2,45:1 → 5,97:1 */
}
/* Las tarjetas de servicio de la pestaña 📋 Servicios. El chip de estado «Pendiente» iba en #888
   sobre un gris translúcido: 2,59:1. Los demás estados ya usan tokens legibles del tema claro. */
html[data-base-visual='on'] #ceo-content .ceo-service-card .service-estado.estado-pendiente {
  color: var(--bvc-neutro);
}
html[data-base-visual='on'] #ceo-content .ceo-service-card .service-estado.estado-completado {
  color: var(--bvc-pos);
}
html[data-base-visual='on'] #ceo-content .service-estado,
html[data-base-visual='on'] #ceo-content .coord-tag {
  font-size: var(--bvc-etiqueta-tam);
}
html[data-base-visual='on'] #ceo-content .coord-tag {
  color: var(--bvc-etiqueta);
}
html[data-base-visual='on'] #ceo-content .report-pdf-btn {
  min-height: var(--bvc-tap);
  font-size: var(--bvc-texto-tam);
}

/* ══ BLOQUE C5 · FINANZAS DEL CEO ═══════════════════════════════════════════════════════════════
   Estas son las MISMAS clases que arregló el bloque 05 (public/finanzas-visual.css), pero acá
   cuelgan de #ceo-content y aquella hoja está anclada a #finanzas-content: por eso el CEO seguía
   viendo los importes a 2,16:1 y las etiquetas a 2,45:1 después de aquel frente. La corrección es
   la misma —redefinir --green y --red DENTRO de las cajas de plata, nunca pisar `color`— aplicada
   a la raíz que faltaba. */
html[data-base-visual='on'] #ceo-content .estado-cuenta,
html[data-base-visual='on'] #ceo-content .ec-section-total,
html[data-base-visual='on'] #ceo-content .fin-detail-row,
html[data-base-visual='on'] #ceo-content .fin-group-head,
html[data-base-visual='on'] #ceo-content .hero-block,
html[data-base-visual='on'] #ceo-content .kpi-card,
html[data-base-visual='on'] #ceo-content .ceoi-hero-row,
html[data-base-visual='on'] #ceo-content .ceo-acc-body {
  --green: var(--bvc-pos);
  --red: var(--bvc-neg);
}
html[data-base-visual='on'] #ceo-content .ec-title {
  font-size: var(--bvc-etiqueta-tam); /* 10 px → 12 px */
  color: var(--bvc-etiqueta); /* 2,45:1 → 5,57:1 */
  letter-spacing: 0.3px;
  line-height: 1.4;
}
html[data-base-visual='on'] #ceo-content .ec-counts {
  font-size: var(--bvc-etiqueta-tam); /* 11 px → 12 px */
  color: var(--bvc-etiqueta);
  line-height: 1.45;
}
html[data-base-visual='on'] #ceo-content .ec-section-total {
  font-size: var(--bvc-etiqueta-tam);
  color: var(--bvc-etiqueta);
}
html[data-base-visual='on'] #ceo-content .ec-row,
html[data-base-visual='on'] #ceo-content .ec-saldo {
  font-variant-numeric: tabular-nums;
}
/* Una fila por moneda, igual que en el panel de Finanzas: `fmtTotalSplit()` pone las dos monedas en
   la misma línea separadas por un «·», y a 390 px eso se parte por donde caiga y se lee como un
   solo número largo. Acá la celda de importes pasa a ser una COLUMNA. Ni un carácter cambia. */
html[data-base-visual='on'] #ceo-content .ec-row > span:last-child,
html[data-base-visual='on'] #ceo-content .ec-saldo > span:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
}
html[data-base-visual='on'] #ceo-content .ec-row > span:last-child > strong,
html[data-base-visual='on'] #ceo-content .ec-saldo > span:last-child > strong {
  display: block;
  white-space: nowrap;
}
html[data-base-visual='on'] #ceo-content .ec-row > span:last-child > span:has(+ strong),
html[data-base-visual='on'] #ceo-content .ec-saldo > span:last-child > span:has(+ strong) {
  display: none; /* el «·» ya no separa nada: es el único display:none de la hoja, y es decorativo */
}
html[data-base-visual='on'] #ceo-content .ec-row,
html[data-base-visual='on'] #ceo-content .ec-saldo {
  align-items: flex-start;
  gap: 12px;
}
html[data-base-visual='on'] #ceo-content .ec-row > span:first-child,
html[data-base-visual='on'] #ceo-content .ec-saldo > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Los desgloses de gastos e ingresos. */
html[data-base-visual='on'] #ceo-content .fin-group-head {
  min-height: var(--bvc-tap);
}
html[data-base-visual='on'] #ceo-content .fin-detail-sub {
  font-size: var(--bvc-etiqueta-tam);
  color: var(--bvc-etiqueta);
  line-height: 1.45;
}
html[data-base-visual='on'] #ceo-content .fin-detail-amt,
html[data-base-visual='on'] #ceo-content .finance-row-value {
  font-variant-numeric: tabular-nums;
}
html[data-base-visual='on'] #ceo-content .ver-mas {
  min-height: var(--bvc-tap);
  font-size: var(--bvc-etiqueta-tam);
  color: var(--bvc-etiqueta);
}

/* ── Los rótulos del gráfico de Ingresos vs Gastos ────────────────────────────────────────────
   `buildFinanceChart()` los dibuja con `font-size="7.5"` COMO ATRIBUTO del <text>, y un atributo de
   presentación pierde contra cualquier regla de CSS: se pueden subir desde acá.
   ⚠️ PERO NO HASTA 12 px, y el motivo es geométrico, no de pereza: el módulo fija el `viewBox` en
   360×150 y las coordenadas de cada rótulo a mano, así que el tamaño de la letra está en unidades
   del dibujo. Los valores del eje viven en un canal de 33 unidades; pasando de ~10 se pisan con las
   barras. Van a 10 (de 7,5 a 9,9 px reales a 390 px de ancho, un tercio más grandes) y el resto es
   una decisión sobre `src/dashboards.js`, que no es este frente. El contrato lo declara y lo mide:
   exige que MEJOREN respecto de hoy y que cumplan el contraste, no que lleguen al piso de 12. */
html[data-base-visual='on'] #ceo-content .ceo-acc-body svg text {
  font-size: 10px;
}

/* ══ BLOQUE C6 · EQUIPO Y CUENTAS DE ACCESO ════════════════════════════════════════════════════
   Cuatro controles medían entre 13 y 18 px de alto: «➕ Agregar usuario» 101×18, «🔑 PIN» 35×18,
   «✏️» 14×18 y «Baja» 23×13. Son los que crean, editan, dan de baja y resetean el PIN de una
   persona — las acciones más delicadas del panel — y eran las más difíciles de acertar.
   NO cambia el texto, ni el manejador, ni la confirmación: cambia el área táctil.

   ⚠️ Se los nombra por su lugar en el árbol (hijo directo de .equipo-card) y por su acción
   (data-click), NO con un `.fin-svc-link` a secas: esa misma clase se usa como ENLACE DENTRO DE UN
   RENGLÓN DE TEXTO en los desgloses de plata («🔗 ver servicio», dentro de .fin-detail-sub). Darle
   44 px de alto a un enlace incrustado en una línea rompería el renglón. Esos quedan como están y
   figuran declarados en el contrato, con su porqué. */
html[data-base-visual='on'] #ceo-content .fin-svc-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bvc-tap);
  min-width: var(--bvc-tap);
  padding: 0 10px;
  font-size: var(--bvc-etiqueta-tam);
  border-radius: var(--bvc-radio);
}
/* ── LA ÚNICA EXCEPCIÓN AL PISO, Y SE DECLARA POR CONTEXTO, NO POR CLASE (06/09) ───────────────
   `.fin-svc-link` se usa para dos cosas distintas: botones sueltos (los de Cuentas de acceso, «Ir a
   conciliar») y ENLACES INCRUSTADOS EN UN RENGLÓN DE TEXTO («🔗 ver servicio», dentro de
   `.fin-detail-sub`). A los segundos, 44 px de alto les rompe el renglón que los contiene.
   La primera versión resolvía esto al revés: excluía la CLASE ENTERA del piso estructural
   (`button:not(.fin-svc-link)`) y volvía a incluir los botones sueltos con una lista de cuatro
   selectores escrita a mano. La revisión independiente marcó —con razón— que el propio comentario
   de este archivo dice que las listas a mano son «exactamente el modo de falla que la revisión del
   04/09 encontró»: hoy la lista era completa, pero un botón nuevo con esa clase nacía sin piso.
   Ahora el piso lo tienen TODOS y lo pierde el único contexto que de verdad lo rompe. */
html[data-base-visual='on'] #ceo-content .fin-detail-sub .fin-svc-link {
  display: inline;
  min-height: 0;
  min-width: 0;
  padding: 0;
}
html[data-base-visual='on'] #ceo-content .fin-svc-link:focus-visible {
  outline: 2px solid var(--bvc-pos);
  outline-offset: 2px;
}
/* El verde de marca subrayado da 2,01:1: el enlace se leía por el subrayado, no por el color.
   El tamaño sube para TODOS los `.fin-svc-link`, incluidos los incrustados en un renglón: subir la
   letra no rompe el renglón (lo que sí lo rompería es darles 44 px de alto, y por eso esos quedan
   exentos del piso táctil y no del piso de lectura). */
html[data-base-visual='on'] #ceo-content .fin-svc-link {
  color: var(--bvc-pos);
  font-size: var(--bvc-etiqueta-tam);
}
html[data-base-visual='on'] #ceo-content .equipo-role {
  font-size: var(--bvc-etiqueta-tam);
  color: var(--bvc-etiqueta); /* 2,45:1 → 5,97:1 */
  line-height: 1.4;
}
html[data-base-visual='on'] #ceo-content .equipo-country {
  font-size: var(--bvc-etiqueta-tam);
  color: var(--bvc-etiqueta);
}
html[data-base-visual='on'] #ceo-content .equipo-card {
  gap: 10px;
  flex-wrap: wrap;
}
/* ── EL PISO TÁCTIL, POR ESTRUCTURA Y NO POR LISTA ────────────────────────────────────────────
   Las reglas de arriba nombran clase por clase, y una lista escrita a mano solo cubre lo que
   alguien se acordó de anotar: es exactamente el modo de falla que la revisión del 04/09 encontró
   en el contrato de accesibilidad. Estas tres reglas cierran el conjunto por su ESTRUCTURA —todo
   botón, todo campo y todo `div` que responde a un toque dentro del panel— así que un control
   nuevo entra solo, sin que nadie lo agregue a ninguna lista.

   La única excepción vive arriba y se declara POR CONTEXTO —el enlace incrustado en un renglón de
   texto—, no por clase: así un botón nuevo entra solo al piso en vez de nacer afuera.
   El formulario de alta y el editor de un usuario entran por acá: sus campos medían ~37 px. */
html[data-base-visual='on'] #ceo-content button,
html[data-base-visual='on'] #ceo-content input,
html[data-base-visual='on'] #ceo-content select,
html[data-base-visual='on'] #ceo-content div[data-click] {
  min-height: var(--bvc-tap);
}
/* ⚠️ TODO `<select>` lleva `height` ADEMÁS de `min-height`, y esto NO es redundancia: WebKit —el
   motor del iPad y del iPhone— ignora `min-height` en un `<select>`. Medido en WebKit 26.4 sobre los
   cuatro selectores del alta y de la edición de un usuario: con solo `min-height` quedaban en 22 px
   de alto mientras Chromium los daba en 44. Un piso que se cumple en un motor y en el otro no, no es
   un piso — y justo esos cuatro eligen el ROL y el PAÍS de una persona. */
html[data-base-visual='on'] #ceo-content select {
  height: var(--bvc-tap);
}
html[data-base-visual='on'] #ceo-content button:focus-visible,
html[data-base-visual='on'] #ceo-content input:focus-visible,
html[data-base-visual='on'] #ceo-content select:focus-visible,
html[data-base-visual='on'] #ceo-content div[data-click]:focus-visible {
  outline: 2px solid var(--bvc-pos);
  outline-offset: 2px;
}

/* ══ BLOQUE C6bis · LAS DOS PESTAÑAS QUE SE PINTAN CON COMPONENTES COMPARTIDOS ═════════════════
   «💰 Por cobrar» y «👥 Clientes» NO las dibuja src/dashboards.js: las dibujan `renderPorCobrar()`
   y `renderClientesView()` DENTRO de #ceo-content. O sea que reciben las reglas estructurales de
   esta hoja igual que las otras cuatro — y hasta el 06/09 nadie las medía: la vista previa no las
   tenía y la revisión independiente contó 17 de 117 selectores que no alcanzaban un solo nodo.
   Al medirlas apareció trabajo real y ALCANZABLE (nada de estilo en línea): once textos a 11 px, el
   botón de alta a 1,92:1 y los tres chips de estado entre 1,83:1 y 3,81:1.

   ⚠️ Estas reglas cuelgan de #ceo-content y NO de #coord-content: las mismas clases en el panel del
   coordinador son de public/base-visual.css y esta hoja no las puede tocar. */
html[data-base-visual='on'] #ceo-content .contact-estado {
  font-size: var(--bvc-etiqueta-tam);
  color: var(--bvc-info); /* 3,81:1 → 5,39:1 sobre el celeste translúcido del chip */
}
html[data-base-visual='on'] #ceo-content .contact-estado.activo {
  color: var(--bvc-pos); /* 1,83:1 → 5,69:1 (el verde de marca sobre su propio fondo teñido) */
}
html[data-base-visual='on'] #ceo-content .contact-estado.inactivo {
  color: var(--bvc-neutro); /* 3,51:1 → 5,38:1 sobre el gris al 30 % */
}
html[data-base-visual='on'] #ceo-content .contact-detail {
  font-size: var(--bvc-etiqueta-tam);
}
/* El botón de alta usa el verde de marca sobre el verde claro: 1,92:1. Mismo caso que el chip de
   país activo, misma corrección — el borde y el fondo no se tocan, solo la letra. */
html[data-base-visual='on'] #ceo-content .nueva-prop-btn,
html[data-base-visual='on'] #ceo-content .cargar-mas-btn {
  min-height: var(--bvc-tap);
  font-size: var(--bvc-texto-tam);
  color: var(--bvc-pos);
}
html[data-base-visual='on'] #ceo-content .contact-search {
  min-height: var(--bvc-tap);
  font-size: var(--bvc-texto-tam);
}
html[data-base-visual='on'] #ceo-content .pc-cubre-slot {
  font-size: var(--bvc-etiqueta-tam);
}

/* ══ BLOQUE C7 · EL ANCHO EN TABLET Y ESCRITORIO ═══════════════════════════════════════════════
   El frente del ancho (#383, 05/09) ensanchó el lienzo del panel del COORDINADOR y lo ató a
   `:has(#screen-coordinator.active)`. Esa atadura es lo correcto —sin ella el ensanche alcanzaría
   al circuito del operario— pero deja al CEO exactamente como estaba: a 834 px el cuerpo seguía en
   430 y sobraban 404 px de blanco muerto a los costados. Acá se aplica el MISMO lienzo con la
   MISMA forma de atadura, cambiando solo la pantalla.

   El teléfono no cambia ni un píxel: todo lo de este bloque vive dentro de `@media (min-width:768px)`.

   Y con el lienzo va la MEDIDA DE LECTURA, por la razón que el frente del ancho ya dejó escrita: un
   lienzo de 1400 px sin medida no saca el blanco muerto, lo cambia por renglones de 150 caracteres.
   Medido hoy sin la medida: el contenido del CEO se estira a 1322 px a 1440. La medida es el
   DEFECTO de #ceo-content; lo único que se sale es el gráfico de barras de Finanzas, que quiere
   todo el ancho que le den. */
@media (min-width: 768px) {
  html[data-base-visual='on'] body:has(#screen-ceo.active) {
    max-width: var(--bvc-lienzo);
  }
  html[data-base-visual='on'] #ceo-content {
    padding-inline: max(0px, calc((100% - var(--bvc-medida)) / 2));
  }
}

/* ══ BLOQUE C8 · EL RIEL LATERAL DEL ESCRITORIO ════════════════════════════════════════════════
   (06/09/2026 — el punto 1 del «lo que este bloque NO hace» de C7, CERRADO por decisión del dueño.)

   ═══ QUÉ SE PIDIÓ, Y QUÉ SE HIZO ═══
   El resto de la app ya navega con un riel vertical a la izquierda en escritorio: lo trajo el
   frente del ancho (#383) para el panel del coordinador, que es el que ve todo el mundo — Dirección
   incluida. El panel de Dirección, en cambio, seguía con la tira horizontal de pestañas arriba. El
   dueño resolvió que en escritorio use EL MISMO patrón. Esto no es un riel nuevo: es el de
   `public/base-visual.css` (bloque 10.5) traducido a esta pantalla, con el mismo token de ancho,
   el mismo quiebre y la misma forma de colocarlo.

   ═══ CÓMO, SIN DUPLICAR NADA ═══
   Igual que el del coordinador, y por la misma razón: `.ceo-tab-bar` pasa a `position: absolute`
   dentro de `#screen-ceo` (que es `position: relative` cuando está activa, por `styles.css`), y a
   la pantalla se le abre el lugar con `padding-left`. Así el resto de la columna —encabezado,
   chips de país, banner de avisos y contenido— se acomoda solo, sin reescribir un layout de cinco
   hijos que aparecen y desaparecen según la pestaña y el rol.
   NO se toca `index.html`, NO se duplica un panel, NO se agrega un controlador: `setCEOTab()` sigue
   siendo el mismo manejador, las siete pestañas son los mismos nodos en el mismo orden del DOM
   —así que ninguna parada del teclado se pierde ni se cruza— y ninguna métrica, permiso, filtro o
   selección se entera de nada.

   ═══ LOS TRES ANCHOS ═══
   · Teléfono (< 768):      NADA cambia. La tira horizontal de siempre. Está medido en los dos
                            contratos, con la capa puesta y sacada.
   · Tablet (768–1023):     el patrón responsive que el sistema YA tiene en esa banda — el lienzo
                            ancho de C7 y la tira horizontal. El riel arranca donde arranca en el
                            resto de la app: a 1024. No se inventó un quiebre para esta pantalla
                            (el contrato hermético además lo prohíbe: solo 768 y 1024).
   · Escritorio (≥ 1024):   riel de 236 px a la izquierda.

   ═══ TRES DIFERENCIAS CON EL RIEL DEL COORDINADOR, DECLARADAS ═══
   1. SIN RÓTULOS DE GRUPO. El del coordinador agrupa DOCE pestañas en cuatro temas, y para eso hay
      marcado propio en `index.html` (`.coord-tab-group`). Acá son SIETE y no hay marcado de grupo:
      inventar una taxonomía («¿Por cobrar es plata o es comercial?») es una decisión de diseño del
      panel, no una traducción del sistema visual — y el encargo dice, con todas las letras, que
      esto se hace con CSS sobre el marcado que ya existe. Queda propuesto, no hecho.
   2. SIN MÁSCARA. El riel del coordinador señala «hay más abajo» con un `mask-image` girado. Acá
      no se puede y no se debe: esta hoja APAGÓ la máscara de la tira horizontal a propósito
      (bloque C2 — desvanecía «Clientes» y «Equipo» y las hacía parecer deshabilitadas), y su
      contrato de navegador se pone rojo con cualquier `mask-image` de degradado sobre esta barra.
      La pista es la barra de deslizamiento de verdad, fina y con color, que ese mismo bloque ya
      declaró: acá solo se la gira a vertical. Con siete pestañas de 44 px, seis separaciones de 2 y
      36 de relleno son 356 px, así que no desborda ni en un portátil de 620 px de alto útil; el contrato lo mide igual y exige que,
      SI desborda, se pueda deslizar (`overflow-y: auto`) — que es la lección del 05/09: un
      `overflow-y: hidden` sigue siendo scrolleable POR PROGRAMA y dejaba pasar un riel trabado.
   3. EL INDICADOR DE ACTIVA NO CORRE EL TEXTO. El del coordinador le pone `border-left: 3px` solo
      a la activa y le compensa el relleno; acá la franja de 3 px la llevan TODAS, transparente en
      las que no están elegidas, así que el rótulo no se mueve un píxel al cambiar de pestaña.
      Las dos señales que la pestaña activa ya tenía —color y peso de letra— no se tocan. */
@media (min-width: 1024px) {
  html[data-base-visual='on'] #screen-ceo.active {
    padding-left: var(--bvc-riel);
  }
  html[data-base-visual='on'] #screen-ceo .ceo-tab-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--bvc-riel);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 8px 24px;
    /* De pie no hay «más a la derecha»: lo que puede faltar está ABAJO. El eje se da vuelta entero
       —y con él la barra de deslizamiento del bloque C2, que acá pasa a ser vertical. */
    overflow-x: hidden;
    overflow-y: auto;
    /* El fondo del riel es el MISMO gris de tarjeta que el contrato ya mide como «tarjeta»
       (#f4f8f6): así el contraste de los rótulos —#456b5e a 5,57:1 y el verde legible a 6,26:1— no
       necesita ningún número nuevo, porque es un fondo que ya estaba medido. Los cuatro degradados
       del bloque C2 (la pista horizontal) se apagan con este `background` único. */
    background: var(--bvc-riel-superficie);
    border-bottom: none;
    border-right: 1px solid var(--bvc-riel-borde);
  }
  html[data-base-visual='on'] #screen-ceo .ceo-tab-bar::-webkit-scrollbar {
    width: 4px;
  }
  html[data-base-visual='on'] #screen-ceo .ceo-tab {
    /* `styles.css` le pone `flex: 1 0 auto`, que en una columna significa ESTIRARSE en alto: las
       siete se repartirían el riel entero y una pestaña mediría 100 px. De pie cada una ocupa lo
       que necesita y la barra desliza si no entran. */
    flex: 0 0 auto;
    justify-content: flex-start;
    text-align: left;
    border-radius: var(--bvc-radio);
    /* la franja de estado pasa de abajo (tira horizontal) al costado, que es donde se lee de pie */
    border-bottom-color: transparent;
    border-left: 3px solid transparent;
    /* `white-space: nowrap` viene de `styles.css` y la barra no desliza de costado: sin esto, un
       rótulo más largo que el riel se cortaría a la mitad de una palabra. Hoy no pasa en español ni
       en portugués; es el próximo rótulo o el próximo idioma. */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html[data-base-visual='on'] #screen-ceo .ceo-tab.active {
    /* ⚠️ HAY QUE APAGARLO ACÁ, no en `.ceo-tab`: el subrayado de la activa lo pinta el bloque C2 con
       `.ceo-tab.active`, que gana por especificidad. Con solo la regla de `.ceo-tab` la pestaña
       elegida quedaba con la franja de la izquierda Y el subrayado de abajo — una «L» verde que
       parecía un recuadro a medio dibujar. Se vio en una captura, no en el CSS. */
    border-bottom-color: transparent;
    border-left-color: var(--bvc-pos);
  }
}

/* ── LO QUE ESTE BLOQUE NO HACE, Y POR QUÉ ────────────────────────────────────────────────────
   1. ~~NO hay riel vertical.~~ **CERRADO el 06/09**: está arriba, en el bloque C8. Lo que sigue sin
      hacerse es AGRUPAR las pestañas por tema, y ahí el motivo original vale igual: agrupar pide
      marcado nuevo y una taxonomía que nadie aprobó.
   2. NO se acopla ninguna ficha a la derecha (maestro-detalle). El CEO abre `#edit-overlay`, que
      es la ficha de servicio y la comparte el circuito del operario: está en la lista de overlays
      prohibidos del contrato de alcance. A 1440 ese diálogo se sigue centrando en el viewport.
   3. NO se reordena la grilla de KPI de Métricas (sigue en dos columnas a cualquier ancho).
      Pasarla a cuatro en tablet se ve mejor, pero cambia la composición que el dueño conoce y no
      es una corrección: va propuesto, con el riel. */