/* ⚠ EMERGENCIA 16/oct: se retiraron 5 bloques moviles mios.
   La version movil del panel volvio a como estaba antes de que yo la
   tocara: sin el vidrio ni la maqueta del lienzo, pero FUNCIONAL.
   Se rehace desde las tres mesas del lienzo, con calma. */

/* ════════ 0 · EL ACENTO, EN LA RAÍZ ════════

   Esto va primero y es lo que de verdad cambia la consola.

   Llevaba cuatro rondas escribiendo reglas por selector —el menú, el
   botón, el foco, el activo, el activo plegado, el ícono del hijo—, y
   cada ronda aparecía otro sitio con amarillo: el diálogo de «Hay una
   versión nueva» vive FUERA de `#app`, así que ninguna de esas reglas
   lo alcanzaba. Parchear por selector no converge: son 131 usos
   repartidos por todo el sistema.

   La variable sí converge. `--amar` NO significa advertencia —eso es
   `--warn`—: es el acento de marca, y el acento de la consola es el
   teal de Orvik. Cambiarla aquí cubre los 131 usos de una vez,
   incluidos los diálogos, los avisos y los menús flotantes.

   Quedan fuera los 74 literales `#FFC207` y los 64 `rgba(255,194,7)`
   escritos a mano, que no pasan por aquí y se cambian uno por uno.

   Si esto no convence, se borra este bloque y la consola vuelve al
   amarillo sin tocar `panel.css`. */
/* ── POR QUÉ `--amar` SE TEÑÍA Y `--amar-dark` NO ──
   Medido 16/oct: `--amar` salía #4ECDC4 (bien) y `--amar-dark` seguía
   en #FFD666, el amarillo. Los iconos de la hoja «Más» usan el
   segundo, y por eso seguían amarillos aunque el resto ya fuera teal.

   La razón es la especificidad. `panel.css` no los define en `:root`
   a secas: los define en `:root:not([data-tema="claro"])`, que pesa
   (0,1,1). Mi `:root` pelado pesa (0,1,0) y perdía SIEMPRE, estuviera
   donde estuviera en el archivo. `--amar` se salvó porque panel.css sí
   lo declara en un `:root` simple.

   Y `--amar-suave` --el fondo del renglón activo de la hoja, que salía
   marrón (#2A2416): amarillo al 10 % sobre navy-- nunca lo redefiní.

   Aquí se nombran los cuatro contextos para empatar en peso (0,1,1) y
   ganar por ir después, que es como se resuelve un empate. */
:root,
:root:not([data-tema="claro"]),
:root:not([data-tema="oscuro"]),
:root[data-tema="claro"],
:root[data-tema="oscuro"] {
  --amar:       var(--marca-principal);
  --sobre-amar: var(--marca-sobre-principal);
  --amar-dark:  var(--marca-principal-texto);
  --amar-suave: color-mix(in srgb, var(--marca-principal) 14%, transparent);
}

/* ── Y LAS PIEZAS DE LA EMPRESA RECUPERAN EL SUYO ──

   Esto no es un detalle: son 104 usos de `--amar` que NO son de la
   consola sino de la empresa operativa, y tenirlos de teal habria
   mandado al cliente una propuesta de Lykos con los colores de la
   plataforma. La regla madre lo prohibe expresamente.

   Donde vive cada una, contado en sus hojas:
     .doc        · la propuesta y el enlace del candidato (843 reglas)
     #cot-zona   · el cotizador (334)
     #vd-acta    · el acta VERIDOM (48)
     .fc-*       · la factura (26)
     .re-*       · las etiquetas de rondin (9)

   `--empresa-principal` la escribe el motor de marca al entrar. El
   respaldo es el amarillo de Lykos, que es quien opera hoy: si el
   motor no contesto, un documento suyo sale con su color y no con
   uno prestado. */
.doc,
#cot-zona,
/* `#vd-acta` SALIÓ de esta lista el 16/oct. Lo había metido con los
   documentos del cliente, y no lo es: el acta de verificación
   domiciliaria la mira Capital Humano para dictaminar un candidato.
   Es pantalla del sistema, y el sistema es Orvik. Lo que sí sigue
   aquí son los documentos que el cliente recibe con la marca de la
   operativa que se los emite: la propuesta, la cotización, la
   factura, el recibo y las etiquetas. */
.fc-tabla, .fc-barra, .fc-cab, .fc-qr,
.re, .re-per, .re-qr, .re-aviso {
  --amar:       var(--empresa-principal, #FFC207);
  --sobre-amar: var(--empresa-sobre-principal, #2B1C00);
  --amar-dark:  #854F0B;
}

/* ============================================================
   LA CONSOLA, EN ORVIK
   16 de octubre de 2026 · lienzo «Orvik OS · Consola», medido del
   render, y lámina 2 de los mockups

   NO es un cambio de color. Es una remaquetación, y por eso va
   en este orden:

     1. Las medidas   · radios concéntricos, superficie, borde
     2. Las tarjetas  · radio 20, borde 1px, padding 20, sin sombra
     3. El chasis     · vidrio donde flota, sólido donde se lee
     4. La tipografía · la escala del sistema
     5. El acento     · lo último, no lo primero

   Lo que el lienzo quita, aquí se quita: la marquita amarilla de
   antes del título de sección ya no existe en el diseño nuevo.

   Va acotada a `#app`, así que el login y los documentos no la
   ven, y `panel.css` se queda intacto: quitar este archivo
   devuelve la consola de ayer.

   LO QUE NO TOCA:
   · El ámbar que SIGNIFICA advertencia (`t-warn`, `.alert`). Ése
     no es color de marca, es un estado.
   · La línea amarilla del cotizador, los semáforos de riesgo y
     los estados de nómina.
   · Los documentos —contrato, credencial, factura, actas—, que
     son de la empresa operativa.
   ============================================================ */

/* ════════ 1 · LAS MEDIDAS ════════
   Los radios del sistema son concéntricos y tienen nombre:
   contenedor 24 · tarjeta 20 · control 12 · miniatura 8.
   El panel ya los consume por variable, así que cambiarlos aquí
   remaqueta las 41 pantallas a la vez en vez de clase por clase. */
#app {
  --r-2xl: var(--r-contenedor);   /* 24 · ya coincidía */
  --r-xl:  var(--r-tarjeta);      /* 20 */
  --r-lg:  var(--r-tarjeta);      /* 20 · era 14 */
  --r-md:  var(--r-control);      /* 12 · era 11 */
  --r-sm:  var(--r-chico);         /*  8 · ya coincidía */
}

/* ════════ LAS SUPERFICIES · EL DEFECTO DE «AZUL SOBRE AZUL» ════════
   Visto con captura: en el teléfono, con el tema en automático, las
   tarjetas salían navy con la letra navy. Ilegibles.

   LA LÍNEA CULPABLE ERA ÉSTA, Y ERA MÍA:

       :root:not([data-tema="claro"]) #app { --superficie: #0E1A2E }

   «No claro» NO quiere decir «oscuro». En automático el panel BORRA el
   atributo `data-tema` por completo (`app.js`), así que no hay ni
   «claro» ni «oscuro»: no hay nada. Y un selector que dice «mientras no
   sea claro» acierta también cuando no hay nada --y entonces imponía la
   superficie oscura aunque el sistema del teléfono estuviera en claro.
   Encima, sin media query, ganaba a cualquier cosa que sí mirara el
   sistema. Las tarjetas se quedaban oscuras mientras el fondo, las
   barras y los textos se iban a claro: navy sobre navy.

   Un tema tiene CUATRO combinaciones y hay que escribir las cuatro:
     1 · elegido oscuro ........... [data-tema="oscuro"]
     2 · elegido claro ............ [data-tema="claro"]
     3 · automático + SO oscuro ... @media dark  + sin elección
     4 · automático + SO claro .... @media light + sin elección   ← faltaba

   Los valores no se escriben a mano: salen de `orvik-tokens.css`. El
   `--superficie-2` además estaba mal copiado --decía #0B1524 y el token
   dice #12223A. */

/* 1 y 3 · oscuro */
:root[data-tema="oscuro"] #app {
  --bg: var(--fondo); --bg-suave: var(--fondo);
  --superficie: #0E1A2E; --superficie-2: #12223A;
  --border: rgba(148,163,184,0.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) #app {
    --bg: var(--fondo); --bg-suave: var(--fondo);
    --superficie: #0E1A2E; --superficie-2: #12223A;
    --border: rgba(148,163,184,0.16);
  }
}
/* 2 y 4 · claro */
:root[data-tema="claro"] #app {
  --bg: var(--fondo); --bg-suave: var(--fondo);
  --superficie: #FFFFFF; --superficie-2: #F1F5F9;
  --border: rgba(71,85,105,0.16);
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) #app {
    --bg: var(--fondo); --bg-suave: var(--fondo);
    --superficie: #FFFFFF; --superficie-2: #F1F5F9;
    --border: rgba(71,85,105,0.16);
  }
}

/* ════════ 2 · LAS TARJETAS ════════
   Contenido SÓLIDO. Nunca vidrio, nunca degradado de fondo,
   nunca tarjeta dentro de tarjeta. Sin sombra en oscuro: el
   borde ya separa, y una sombra sobre navy sólo ensucia. */
#app .dash-card,
#app .kpi-card {
  border-width: 1px;
  border-radius: var(--r-tarjeta);
  padding: 20px;
  box-shadow: none;
}

/* Lista y tabla respiran distinto: 16 arriba y abajo, 20 a los
   lados, para que las filas no queden apretadas contra el borde. */
#app .ch-tabla tr,
#app .r-nivel {
  border-width: 1px;
  border-radius: var(--r-tarjeta);
  padding: 16px 20px;
}

/* ════════ 3 · EL CHASIS ════════
   Vidrio sólo en la capa que flota sobre el contenido: la barra
   lateral y la de herramientas. El texto largo nunca se lee
   sobre vidrio. */
/* ── DE AQUI PARA ABAJO, SOLO ESCRITORIO ──

   Esto estaba SIN media query y fue lo que destrozo la version movil:
   en un telefono `panel.css` pone la barra abajo, fija y de alto
   automatico, pero mi `height: calc(100dvh - 40px)` --que no llevaba
   !important pero el suyo tampoco-- ganaba y estiraba la barra a toda
   la pantalla. El destino activo se estiraba con ella.

   La maqueta movil no se toca: asi quedo dicho, y es lo correcto.
   Aqui solo entra lo de escritorio. */
@media (min-width: 1024px) {
#app #tabs {
  background: var(--vidrio-fondo);
  -webkit-backdrop-filter: var(--vidrio-filtro);
  backdrop-filter: var(--vidrio-filtro);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--r-contenedor);
  margin: 20px 0 20px 20px;
  height: calc(100dvh - 40px);
  padding: 20px 14px;
  /* ── EL MENÚ SE DESLIZA DENTRO DE SÍ MISMO ──
     Esta regla le puso ALTURA FIJA y se quedó sin `overflow`. Con eso
     pasaron dos cosas a la vez:

       · los renglones que no caben se salen del contenedor y se
         dibujan encima de lo demás --«Postulaciones» cortado arriba y
         el menú montado sobre el logotipo--;
       · `position:sticky` del logotipo se queda SIN CONTENEDOR QUE
         DESLICE, así que se pega a la ventana en vez de a la barra, y
         el menú le pasa por debajo.

     `panel.css` ya traía la barra de desplazamiento dibujada para
     `#tabs`: el deslizamiento era lo esperado y se perdió aquí.
     Reportado el 21/oct con captura. */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* ── SOLO EL FONDO DEL LOGOTIPO, NADA MAS ──

   Regla del 21/oct: solo el fondo, solo la solidez del fondo. Nunca
   el logotipo.

   MI ERROR, Y QUEDA ANOTADO. Le cambie el ancho (`width:auto` y
   `align-self:stretch`), los margenes negativos, el relleno y el
   radio, y de paso le quite el relleno de arriba a la barra. Nada de
   eso se pidio: el logotipo se vio mas grande y movido de sitio. Fuera
   todo. El logotipo y su icono quedan EXACTAMENTE como estaban.

   Lo unico que queda es el fondo, y vive en la seccion 6, con
   `--vidrio-solido`. El `marca-fondo.js` que llego a hacerlo desde
   JavaScript se borro: escribia color en JS --regla 1-- y el color que
   copiaba era el del vidrio, que es translucido. */

#app .topbar {
    background: var(--vidrio-fondo);
  -webkit-backdrop-filter: var(--vidrio-filtro);
  backdrop-filter: var(--vidrio-filtro);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--r-tarjeta);
  margin: 20px 20px 0;
  padding: 12px 12px 12px 20px;
}
}

/* El fondo de la consola lleva la aurora: sin algo que
   refractar, el vidrio no es vidrio, es un gris. */
/* El fondo, COLOR Y TINTE. Esto solo traia el tinte, sobre
   transparente: las tarjetas quedaban flotando encima de lo que
   hubiera debajo y por eso se veian negras y planas. El color va
   primero y el tinte encima; `fixed` para que la aurora no se
   arrastre al rodar la pagina. */
#app,
#app .contenido,
#app #main {
  background-color: var(--fondo);
}
#app {
  background-image: var(--fondo-tinte);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* El cuerpo tambien, o al rebotar el scroll asoma el color viejo. */
body:has(#app:not(.hidden)) { background: var(--fondo) }

/* ════════ 4 · LA TIPOGRAFÍA ════════
   Título de sección 20/26 · 600. Y SIN la marquita de antes: el
   diseño nuevo no la lleva. El peso baja de 800 a 600 porque la
   escala del sistema no usa pesos tan altos. */
#app h2 {
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 14px;
  gap: 0;
}
#app h2::before { content: none }

/* Título de tarjeta 17/22 · 600. */
#app .dash-card > h3,
#app .dash-card > header h3 {
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
}

/* La cifra de un indicador: 34/40 · 600, con dígitos de ancho
   fijo para que dos indicadores se puedan comparar de un vistazo. */
#app .kpi-card .val,
#app .kpi-card .num {
  font-size: 34px;
  line-height: 40px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  /* Una cifra no se parte. A 34 px «412 / 430» no cabe en una
     columna angosta y el navegador la manda al renglón de abajo:
     deja de leerse como un número y pasa a leerse como dos. */
  white-space: nowrap;
}

/* La etiqueta de arriba del indicador: 13/18 · 500, en caja
   baja. Estaba en 10.5 con mayúsculas y 800 de peso, que es la
   receta de antes; la escala del sistema no la usa. */
#app .kpi-card .lbl {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* ════════ 5 · EL ACENTO ════════
   Lo último. El teal de Orvik dice dónde estás parado y qué
   invita a actuar; no decora. */

/* Dónde estás parado */
#app #tabs button.act b { color: var(--marca-principal) }
#app #tabs button { min-height: var(--toque); border-radius: var(--r-control) }

#app .pl-op.act {
  background: color-mix(in srgb, var(--marca-principal) 16%, transparent);
  color: var(--marca-principal);
  font-weight: 600;
}
#app .pl-op.act b { color: var(--marca-principal) }

#app .tab.on,
#app .tab.act { border-bottom-color: var(--marca-principal) }

/* ── LO QUE INVITA A ACTUAR · REGLA 3 DEL VIDRIO ──
   «Un solo tinte por pantalla: la acción principal. Lo demás va
   neutro», y la hoja de distribución es aún más explícita: en una
   tarjeta, «nunca el botón con degradado». El degradado aparece UNA
   vez, en la barra de herramientas.

   Yo se lo había puesto a TODOS los `.btn` que no fueran fantasma,
   peligro o aviso: veintitrés botones repartidos por el sistema, casi
   todos dentro de tarjetas y formularios. Eso convertía cada pantalla
   en varias acciones principales compitiendo.

   Ahora: el de la barra lleva el degradado; el resto lleva el relleno
   sólido de la marca. Sigue siendo la acción y sigue siendo de la
   marca, pero deja de disputarle el primer lugar al de arriba. */
/* La barra de herramientas de una pantalla cuenta como «la barra»: es
   donde el lienzo pone el único botón con degradado. `.opv-barra` es la
   de Operación en vivo; `.topbar` la del chasis. Las dos son la misma
   idea y por eso llevan el mismo botón. */
/* ── TAMBIEN AQUI SE VA EL DEGRADADO ──
   El comentario de arriba decia que la barra era "donde el lienzo pone
   el unico boton con degradado". La decision del 19/oct es
   posterior y no deja excepcion: «se va de todo el sistema».

   Y la ficha le da la razon: medido en
   `Ficha_com_prospectos_lista_PC`, el boton "Nuevo prospecto" de la
   barra es #0B7C75 SOLIDO, sin degradado.

   Queda guardado aqui, apagado:
     background: var(--marca-degradado-boton);
     border: 1px solid var(--vidrio-borde);                            */
#app .opv-barra .btn:not(.ghost):not(.danger):not(.warn),
#app .topbar .btn:not(.ghost):not(.danger):not(.warn) {
  background: var(--marca-principal);
  border: 1px solid transparent;
  color: var(--marca-sobre-principal);
  font-weight: 600;
}
#app .btn:not(.ghost):not(.danger):not(.warn) {
  background: var(--marca-principal);
  border: 1px solid transparent;
  color: var(--marca-sobre-principal);
  font-weight: 500;
  border-radius: var(--r-control);
}
#app .btn:not(.ghost):not(.danger):not(.warn):hover  { filter: brightness(1.12) }
#app .btn:not(.ghost):not(.danger):not(.warn):active { filter: brightness(.98) }

/* Dónde está el cursor */
#app .fi:focus {
  border-color: var(--marca-principal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-principal) 20%, transparent);
}

/* Lo seleccionado */
#app .r-nivel.sel { border-color: var(--marca-principal) }
#app .nums-fila button:hover { border-color: var(--marca-principal) }
#app #radio-slider { accent-color: var(--marca-principal) }

/* Hoy, en el calendario de asistencia, es una posición y no una
   advertencia. */
#app .as-hoy { background: color-mix(in srgb, var(--marca-principal) 16%, transparent) }
#app .as-dh.hoy { box-shadow: inset 0 0 0 2px var(--marca-principal) }

/* El enlace del candidato es de Cresta: quien recluta responde
   por él, así que toma el acento de la marca viva. */
#app .u-linkbox { border-color: var(--empresa-principal, var(--marca-principal)) }

/* El tutorial señala; no advierte. */
#app #tut-hueco { outline-color: var(--marca-principal) }
#app #guia-punto { background: var(--marca-principal) }
#app .tut-guia:hover { border-color: var(--marca-principal) }

/* En pantalla angosta la lateral deja de flotar y vuelve a pegarse
   a los bordes: el vidrio con márgenes se come el ancho útil. */


/* ════════ 6 · LA FILA DE MARCA ════════

   EL RECUADRO OSCURO DETRÁS DEL LOGO NO ESTÁ EN EL DISEÑO.

   Venía de `background:var(--nav-bg)` en tres reglas de `panel.css`:
   el `:hover`, el `:focus` y el menú plegado. El `:focus` es el que se
   queda pegado después de hacer clic, y por eso el recuadro aparecía
   solo y no se iba. El lienzo no lo lleva en ningún estado.

   El foco SÍ tiene que verse —el anexo lo exige en todo elemento
   interactivo—, pero se marca con un anillo, no pintando una caja. */
#app #tabs .marca,
#app #tabs .marca:hover,
#app #tabs .marca:focus,
#app #tabs button.marca,
body.nav-plegada #app #tabs button.marca {
  /* EL FONDO DEL LOGOTIPO. Regla del 21/oct: al deslizarse, nada debe
     verse debajo del logotipo. No va un glass: debajo va el mismo
     material sólido con el que está hecho.

     Ese material tiene nombre en el anexo: `--vidrio-solido`, «reemplazo
     cuando el usuario pide reducir transparencia». No es un color
     elegido por mí --la regla 1 lo prohibiría-- y está definido en los
     cuatro casos de tema.

     Lo que había antes y por qué fallaba las dos veces:
       · `var(--nav-bg)` (panel.css) es #041E42, EL NAVY DE LYKOS: color
         de marca en la consola, prohibido, y de otro tono que el
         vidrio. Ese era el recuadro que quedó rechazado el 16/oct.
       · `transparent`, que puse encima para quitar el recuadro, dejó
         pasar los renglones por debajo. Rechazado el 21/oct.
       · copiar el color calculado de la barra con JavaScript: el vidrio
         en oscuro es `rgba(14,26,46,0.16)`, o sea 16% de opacidad, así
         que copiarlo era poner vidrio sobre vidrio. Y escribir color en
         JS lo prohíbe la regla 1. Ese archivo se borró. */
  background: var(--vidrio-solido);
  filter: none;

  /* EL HUECO DE ARRIBA. La barra tiene 20 px de relleno superior y el
     logotipo pegajoso se detiene en el borde de ESE relleno, así que
     los renglones se asomaban por los 20 px de encima. Y de LOS LADOS:
     el logotipo queda 15 px corto por cada costado --14 de relleno mas
     1 de borde--, asi que un fondo que solo lo cubra a el se lee como
     una banda mas clara. Medido en pantalla.

     Se tapa con una sombra sólida del mismo material. Una sombra PINTA
     pero NO OCUPA LUGAR: el logotipo no se mueve, no cambia de tamaño
 y no cambia su caja.

     El reparto, con la extension `--e-4` (16) y el mismo desplazamiento
     hacia arriba: a los lados cubre 16 --basta para los 15--, por
     arriba cubre 32 --basta para los 20--, y por abajo el crecimiento
     y el desplazamiento se cancelan, asi que termina EXACTAMENTE en el
     borde inferior del logotipo y no invade el primer renglon. La
     barra recorta por su propio radio, asi que no se sale. */
  box-shadow: 0 calc(-1 * var(--e-4)) 0 var(--e-4) var(--vidrio-solido);
}
#app #tabs .marca:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--r-control);
}

/* El wordmark a 28, como pide la especificación —venía a 36— y la
   etiqueta «CONSOLA» a la derecha, que es lo que el lienzo sí lleva. */
#app #tabs .marca { gap: var(--e-2); padding: 0 var(--e-1) var(--e-5) }
#app #tabs .marca img { height: 28px }
#app #tabs .marca .et-consola {
  margin-left: auto;
  font: var(--t-etiqueta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-3);
}

/* Plegado sólo cabe el isotipo, y va centrado de verdad: el padding
   era 26 arriba y 12 abajo, que es lo que lo dejaba caído. */
body.nav-plegada #app #tabs button.marca {
  justify-content: center;
  padding: var(--e-3) 0;
}
body.nav-plegada #app #tabs .marca .et-consola { display: none }
body.nav-plegada #app #tabs .marca .iso { height: 32px }

/* ════════ 7 · «TRABAJANDO EN» Y EL PERFIL ════════

   OJO: estos dos bloques NO están montados ahora mismo.

   Los había añadido a `montarNav()` en app.js y se reportó que el
   menú dejó de desplegarse. No pude reproducirlo —en local no hay
   sesión y el menú sólo se arma después de entrar—, así que revertí
   el cambio de app.js entero: un selector bonito no vale un menú que
   no abre.

   Las reglas se quedan escritas porque el marcado está decidido y
   medido contra el lienzo (23 de 23).

   ── 20/oct · YA NO ES VERDAD QUE NO EXISTA ──

   Esto decía «mientras tanto no estorban: no existe ningún
   `.nav-trabajando` ni `.nav-perfil` en la página». Sí existe:
   `montarNav` en `app.js` lo inserta después de la marca. Así que
   estas reglas SÍ están aplicando, y hay que leerlas como vivas.

   Y están escritas DOS VECES —aquí y más abajo, en el bloque del menú
   lateral—, con medidas que no coinciden: la placa mide 44×32 en las
   dos, pero su imagen 36×24 aquí y 38×26 allá. Gana la de abajo por
   orden. No se unifican hoy porque eso es tocar el menú, y el menú
   sólo se toca cuando Dirección lo pide. Queda anotado. */
#app .nav-trabajando { padding: 0 0 var(--e-5) }
#app .nav-trabajando > .et {
  display: block;
  font: var(--t-etiqueta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-bottom: var(--e-2);
}
/* `#nav-empresa` dejó de ser un `<button>` el 20/oct: prometía un
   desplegable que no existe. Se nombra junto a `button` para que las
   medidas sigan valiendo tal cual, y para que el día que vuelva a ser
   botón no haya que tocar nada aquí. */
#app .nav-trabajando button,
#app .nav-trabajando #nav-empresa {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 0 var(--e-3) 0 var(--e-2);
  background: var(--control);
  border: 1px solid var(--linea);
  border-radius: var(--r-control);
  color: var(--texto);
  font: var(--t-cuerpo-f);
  cursor: pointer;
}
#app .nav-trabajando .placa {
  width: 44px;
  height: 32px;
  flex: 0 0 44px;
  border-radius: var(--r-chico);
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}
#app .nav-trabajando .placa img { max-width: 36px; max-height: 24px; display: block }
#app .nav-trabajando .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
#app .nav-trabajando .ti { margin-left: auto; color: var(--texto-3) }
body.nav-plegada #app .nav-trabajando > .et,
body.nav-plegada #app .nav-trabajando .nom,
body.nav-plegada #app .nav-trabajando .ti { display: none }
body.nav-plegada #app .nav-trabajando button,
body.nav-plegada #app .nav-trabajando #nav-empresa { padding: 0; justify-content: center }

/* ════════ 8 · EL PERFIL AL PIE ════════ */
#app .nav-perfil {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-1) var(--e-2);
  border-top: 1px solid var(--linea);
  margin-top: var(--e-2);
}
#app .nav-perfil .av {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: var(--r-pildora);
  background: var(--proceso-suave);
  color: var(--proceso-texto);
  display: grid;
  place-items: center;
  font: var(--t-sec);
}
#app .nav-perfil .dat { min-width: 0 }
#app .nav-perfil b {
  display: block;
  font: 600 13px/18px var(--fuente);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app .nav-perfil .dat > span {
  display: block;
  font: var(--t-nota);
  color: var(--texto-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.nav-plegada #app .nav-perfil { justify-content: center }
body.nav-plegada #app .nav-perfil .dat { display: none }

/* ════════ 9 · LO QUE FALTABA DEL MENÚ ════════
   Tres amarillos más que no estaban cubiertos, y uno de ellos sólo se
   ve con el menú PLEGADO, que es donde apareció. */

/* El área activa cuando el menú está plegado. Plegado el renglón
   activo está escondido, así que lo único que dice dónde estás es su
   área: por eso se enciende. Mismo gesto, el color del sistema. */
body.nav-plegada #app #tabs .nav-area.act-area {
  background: color-mix(in srgb, var(--marca-principal) 14%, transparent);
  color: var(--marca-principal);
}

/* El ícono de un hijo del menú. */
#app #tabs .nav-hijo .ti:first-child { color: var(--marca-principal) }

/* El foco del logo: anillo, no caja, y en el color del sistema. */
#app #tabs .marca:focus-visible { outline-color: var(--foco) }

/* Y el activo de la lista, con su radio de control. */
#app #tabs button.act {
  background: color-mix(in srgb, var(--marca-principal) 14%, transparent);
  color: var(--texto);
  font-weight: 600;
  border-radius: var(--r-control);
}
#app #tabs button.act .ti { color: var(--marca-principal) }

/* ════════ 10 · EL VIDRIO TAMBIÉN PLEGADO ════════
   La barra plegada seguía con su fondo sólido: el vidrio estaba
   declarado sólo para el ancho completo. */
body.nav-plegada #app #tabs {
  background: var(--vidrio-fondo);
  -webkit-backdrop-filter: var(--vidrio-filtro);
  backdrop-filter: var(--vidrio-filtro);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--r-contenedor);
}
/* Plegada es el mismo caso: el material sólido del anexo, no
   transparente. Lo de «no puede traer su propio fondo» que decía aquí
   estaba mal: sin fondo, los renglones se le ven por debajo. */
body.nav-plegada #app #tabs button.marca {
  background: var(--vidrio-solido);
  box-shadow: 0 calc(-1 * var(--e-4)) 0 var(--e-4) var(--vidrio-solido);
}

/* ════════ 11 · EL MENÚ EN TEMA CLARO ════════

   DEFECTO MÍO, Y DE LOS QUE DEJAN LA PANTALLA INSERVIBLE: texto
   blanco sobre vidrio claro. El menú del panel pinta su texto con
   `color:var(--blanco)` porque siempre tuvo un fondo navy debajo. Al
   ponerle vidrio, en claro ese fondo se vuelve casi blanco y el texto
   desaparece: el menú entero deja de leerse.

   No lo encontré porque no probé el tema claro. La regla 5 del anexo
   pide capturas en oscuro Y claro, y ésta es exactamente la razón.

   Aquí el texto del menú pasa a los tokens de texto, que ya saben de
   qué color tienen que ser en cada tema. */

:root[data-tema="claro"] #app #tabs button,
:root[data-tema="claro"] #app #tabs .lbl,
:root[data-tema="claro"] #app #tabs .marca .et-consola,
:root[data-tema="claro"] #app .nav-trabajando button,
:root[data-tema="claro"] #app .nav-perfil b {
  color: var(--texto);
}
:root[data-tema="claro"] #app #tabs .nav-grupo,
:root[data-tema="claro"] #app #tabs .quien-nav,
:root[data-tema="claro"] #app .nav-trabajando > .et,
:root[data-tema="claro"] #app .nav-perfil .dat > span {
  color: var(--texto-3);
}
:root[data-tema="claro"] #app #tabs button:hover { background: var(--superficie-2) }
:root[data-tema="claro"] #app #tabs::-webkit-scrollbar-thumb { background: var(--pista) }

@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) #app #tabs button,
  :root:not([data-tema="oscuro"]) #app #tabs .lbl,
  :root:not([data-tema="oscuro"]) #app #tabs .marca .et-consola,
  :root:not([data-tema="oscuro"]) #app .nav-trabajando button,
  :root:not([data-tema="oscuro"]) #app .nav-perfil b {
    color: var(--texto);
  }
  :root:not([data-tema="oscuro"]) #app #tabs .nav-grupo,
  :root:not([data-tema="oscuro"]) #app #tabs .quien-nav,
  :root:not([data-tema="oscuro"]) #app .nav-trabajando > .et,
  :root:not([data-tema="oscuro"]) #app .nav-perfil .dat > span {
    color: var(--texto-3);
  }
  :root:not([data-tema="oscuro"]) #app #tabs button:hover { background: var(--superficie-2) }
  :root:not([data-tema="oscuro"]) #app #tabs::-webkit-scrollbar-thumb { background: var(--pista) }
}

/* Y el activo: en claro el teal al 14% sobre blanco casi no se ve, y
   el texto tiene que ser legible encima. */
:root[data-tema="claro"] #app #tabs button.act,
:root[data-tema="claro"] #app .pl-op.act {
  background: color-mix(in srgb, var(--marca-principal) 18%, transparent);
  color: var(--marca-principal-texto);
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) #app #tabs button.act,
  :root:not([data-tema="oscuro"]) #app .pl-op.act {
    background: color-mix(in srgb, var(--marca-principal) 18%, transparent);
    color: var(--marca-principal-texto);
  }
}

/* ════════ 12 · EL WORDMARK EN TEMA CLARO ════════
   `logo-consola.png` es la version para fondo OSCURO: su texto es
   blanco. En tema claro desaparecia y solo quedaba el isotipo teal
   flotando. El repo ya trae la version clara; se cambia con
   `content`, que es lo unico que permite sustituir una imagen desde
   CSS sin tocar el marcado. */
/* EL LOGO DEL TELÉFONO TAMBIÉN. Esta sección existía y sólo cubría la
   lateral de PC; la barra del teléfono usa `.logo-movil`, que se quedó
   fuera y salía en letra blanca sobre vidrio claro: invisible. */
:root[data-tema="claro"] #app .topbar .logo-movil {
  content: url("./img/logo-consola-claro.png");
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) #app .topbar .logo-movil {
    content: url("./img/logo-consola-claro.png");
  }
}
:root[data-tema="claro"] #app #tabs .marca .completo {
  content: url("./img/logo-consola-claro.png");
}
:root[data-tema="claro"] #app #tabs .marca .iso {
  content: url("./img/logo-consola-iso.png");
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) #app #tabs .marca .completo {
    content: url("./img/logo-consola-claro.png");
  }
}

/* ════════ 13 · LOS PUNTOS DE CORTE ════════
   Sección 3 del anexo. Estaban sin cumplir: a 1024 la lateral seguía
   en 248 cuando la especificación pide 72, sólo íconos.

   ≥1280   lateral 248 · 12 col · margen 20 · 4 indicadores
   1024-79 lateral 72, sólo íconos · 12 col · margen 20 · 4
   600-1023 lateral oculta, se abre como hoja · 6 col · margen 16 · 2×2
   <600    igual que tablet · 1 col · margen 16 · 2×2 */

/* ── EL CORTE DE 1024–1279 SE RETIRA, Y AQUÍ ESTÁ EL PORQUÉ ──

   La sección 3 del anexo pide que entre 1024 y 1279 la lateral baje a
   72 px y se quede en íconos. Lo escribí tal cual y rompió el menú:
   no se podía abrir, y sólo funcionaba ALEJANDO el zoom del
   navegador. Ese detalle es el que lo explica: al alejar, el ancho en
   píxeles de CSS crece, se sale de este tramo, y todo vuelve.

   El motivo de fondo: el panel YA TIENE su propio modo estrecho
   --`body.nav-plegada`--, que el usuario enciende y apaga desde el
   logo, y que además lleva su lógica: al tocar un área se despliega
   el menú y lo deja parado ahí. Mi regla imitaba ese aspecto por
   ancho pero SIN esa lógica: escondía los textos y los hijos, así
   que el menú sí abría y no se veía nada. Un menú que responde y no
   se ve es, para quien lo usa, un menú roto.

   Forzar el modo estrecho por ancho y tener además un interruptor
   manual son dos formas de lo mismo peleándose. La decisión de cuál
   gana es suya, no mía, así que la lateral se queda en 248 hasta que
   me lo diga. Lo demás del anexo --márgenes, rejilla, indicadores--
   sí está aplicado.

   PENDIENTE DE DECIDIR: o el plegado pasa a ser automático por ancho
   y se retira el interruptor del logo, o el interruptor manda y este
   tramo del anexo no aplica a este panel. */


/* ════════ 14 · EL MENÚ, PLANO COMO EL DISEÑO ════════

 Y: «no me elimines nada».

   Las dos cosas a la vez. El lienzo enseña nueve destinos planos, sin
   chevron y sin aire de "carpeta que se abre"; el panel tiene esos
   mismos nueve pero dibujados como áreas plegables, con flecha y con
   los hijos como un submenú indentado.

   Aquí NO se quita ninguna pantalla: lo que cambia es cómo se ven.
   El grupo se dibuja igual que un destino —44 de alto, radio 12,
   ícono de 18— y sus hijos siguen estando, debajo y sólo cuando ese
   grupo está abierto. Quien hoy llega a Legal o a Catálogos sigue
   llegando igual.

   Cobertura y Auditoría EPAC del lienzo se quedan fuera a propósito:
   todavía no existen en el sistema y un destino que no lleva a ningún
   lado es peor que uno que falta. */

/* Fuera la flecha: es lo que delata la carpeta. */
#app #tabs .nav-flecha { display: none !important }

/* El grupo se dibuja como un destino más. */
#app #tabs .nav-area {
  height: var(--toque);
  min-height: var(--toque);
  padding: 0 var(--e-3);
  border-radius: var(--r-control);
  font: var(--t-cuerpo);
  color: var(--texto-2);
  gap: var(--e-3);
}
#app #tabs .nav-area .ti { font-size: 18px }
#app #tabs .nav-area.act-area {
  background: color-mix(in srgb, var(--marca-principal) 14%, transparent);
  color: var(--texto);
  font-weight: 600;
}
#app #tabs .nav-area.act-area .ti { color: var(--marca-principal) }

/* Los hijos: mismo renglón, apenas sangrados, sin decoración de
   submenú. Siguen siendo la única puerta a esas pantallas. */
#app #tabs .nav-hijos { padding: 0; margin: 0 }
#app #tabs .nav-hijos.abierta { padding: var(--e-1) 0 var(--e-2) }
#app #tabs .nav-hijo {
  height: var(--toque);
  min-height: var(--toque);
  padding: 0 var(--e-3) 0 var(--e-10);
  border-radius: var(--r-control);
  font: var(--t-cuerpo);
  color: var(--texto-2);
}
#app #tabs .nav-hijo .ti:first-child { font-size: 16px }
#app #tabs .nav-hijo.act {
  background: color-mix(in srgb, var(--marca-principal) 14%, transparent);
  color: var(--texto);
  font-weight: 600;
}
#app #tabs .nav-hijo.act .ti:first-child { color: var(--marca-principal) }

/* Aire entre destinos: el lienzo los separa, el panel los pegaba a 1 px. */
#app #tabs .nav-lista { display: flex; flex-direction: column; gap: var(--e-1) }

/* Plegado sólo caben los íconos, y el sangrado del hijo sobra. */
body.nav-plegada #app #tabs .nav-hijo { padding: 0; justify-content: center }

/* ════════ 15 · LA VERSIÓN MÓVIL ════════


   Así que aquí NO hay ni una medida, ni una posición, ni un orden. La
   barra sigue abajo, la hoja sigue subiendo desde el borde y el
   agarre sigue donde está. Lo único que entra es el material: vidrio
   donde el sistema dice vidrio, y los radios y el acento del anexo.

   Antes de esto había una regla mía para ≤1023 que le ponía margen 0 y
   quitaba el radio. Eso SÍ era tocar la maqueta y por eso se retiró. */



/* El menú «Más» vive FUERA de #app —es un overlay— así que necesita su
   propia línea para el vidrio. */
#mas-menu.abierto .hoja {
  -webkit-backdrop-filter: var(--vidrio-filtro);
  backdrop-filter: var(--vidrio-filtro);
}

/* ════════ 16 · MÓVIL · los valores del diseño que me diste ════════
   Medidos de `project/ConsolaMovil.dc.html` del lienzo (390 × 844).
   Sólo material: ni una posición, ni un orden, ni un alto de la barra.

     barra superior ..... radio 20 · alto 60 · padding 0 8 0 16
     controles .......... 44 × 44 · radio 14 · blur(22px) saturate(190%)
     vidrio general ..... blur(30px) saturate(190%)
     hoja de abajo ...... radio 24 arriba
     avatar del perfil .. 36 · redondo
     cualquier acción ... 44 de alto, sin excepción */


/* ── LA BARRA DE ABAJO NO SE ESTIRA ──
   Medido: a 375 px la barra salia con 812 de alto, o sea toda la
   pantalla, y los destinos se estiraban con ella. `panel.css` ya pone
   aqui `position:fixed !important` y `top:auto !important` por la misma
   pelea; el `height:auto` suyo iba sin important y lo perdia.
   Se iguala: alto por contenido, ancho completo, abajo. */

/* ════════ 17 · LOS PESOS 800 Y 900 ════════

   El anexo los prohíbe: «pesos permitidos 400, 500, 600 y 700 (700
   SOLO en texto con degradado y en el botón de pánico). 800 y 900
   prohibidos». La consola tenía 59 selectores en 800.

   Esta lista NO está escrita a mano: sale de leer `panel.css` y
   recoger cada selector que declara 800 o 900, así que no se queda
   ninguno fuera. Si mañana alguien escribe otro 800, se vuelve a
   generar y aparece.

   Los documentos de la empresa --la propuesta, el cotizador, la
   factura, el acta, las etiquetas-- quedan FUERA a propósito: tienen
   su propio diseño, ya aprobado, y el anexo es de Orvik.

   600 es el peso fuerte del sistema. Donde el texto pide énfasis
   dentro de una frase, el sistema usa 500. */
#app .login-card h1, #login .login-card h1,
#app #tabs button.act, #login #tabs button.act,
#app #tabs .badge, #login #tabs .badge,
#app .topbar h1, #login .topbar h1,
#app h2, #login h2,
#app .g-e-v, #login .g-e-v,
#app .g-dona .hueco, #login .g-dona .hueco,
#app .pl-filtro label, #login .pl-filtro label,
#app .pl-f-lbl, #login .pl-f-lbl,
#app .pl-op.act, #login .pl-op.act,
#app .kpi-card .lbl, #login .kpi-card .lbl,
#app .kpi-card .val, #login .kpi-card .val,
#app .btn, #login .btn,
#app label, #login label,
#app .kd-val, #login .kd-val,
#app .chip, #login .chip,
#app .section-title, #login .section-title,
#app .tag, #login .tag,
#app th, #login th,
#app .kpi, #login .kpi,
#app .ch-tabla td::before, #login .ch-tabla td::before,
#app .r-big, #login .r-big,
#app .r-hora, #login .r-hora,
#app .u-lbl, #login .u-lbl,
#app .rep-folio, #login .rep-folio,
#app .exp-num, #login .exp-num,
#app .tend-val, #login .tend-val,
#app .dentro, #login .dentro,
#app .fuera, #login .fuera,
#app .med-pct, #login .med-pct,
#app .med-lbl, #login .med-lbl,
#app .c-hero h1, #login .c-hero h1,
#app .btn-c, #login .btn-c,
#app .exp-hero-num, #login .exp-hero-num,
#app .exp-hero-txt b, #login .exp-hero-txt b,
#app .ms-tabla th, #login .ms-tabla th,
#app .ms-letra, #login .ms-letra,
#app .ms-tarde, #login .ms-tarde,
#app .aud-rol, #login .aud-rol,
#app .nl-t, #login .nl-t,
#app .as-dd, #login .as-dd,
#app .as-dn, #login .as-dn,
#app .as-toth, #login .as-toth,
#app .nom-f span, #login .nom-f span,
#app .nom-paso .nom-p-n, #login .nom-paso .nom-p-n,
#app .nom-a-t, #login .nom-a-t,
#app .nom-t span, #login .nom-t span,
#app .pc-frase, #login .pc-frase,
#app .pc-pasos li::before, #login .pc-pasos li::before,
#app .nums-fila button, #login .nums-fila button,
#app .fui-h, #login .fui-h,
#app .fui-msg .fui-t, #login .fui-msg .fui-t,
/* `.tut-hecha` y `.tut-media` ya no existen: las sustituyó una sola
   pastilla, `.tut-estado`, que dice el avance en frase completa en vez
   de «a medias» en mayúsculas. Se quedan las que siguen vivas. */
#app .tut-cuenta, #login .tut-cuenta,
#app .tut-t, #login .tut-t,
#app .tut-guia b, #login .tut-guia b,
#app .ct-cuenta b, #login .ct-cuenta b,
#app .ct-title, #login .ct-title {
  font-weight: 600;
}

/* Las dos excepciones que el anexo sí permite en 700. */
#app .texto-degradado,
#app .grad,
#app [data-panico] { font-weight: 700 }
/* ════════ 18 · LOS AMARILLOS ESCRITOS A MANO ════════

   `--amar` ya viaja por variable y cubre 131 usos, pero estos no
   pasan por ella: están escritos con el hexadecimal dentro de la
   regla, así que ninguna variable los alcanza. Son 19
   selectores del chasis de la consola.

   La lista sale de leer `panel.css`, no de escribirla a mano: cada
   `#FFC207` y cada `rgba(255,194,7,·)` se convierte en el acento del
   sistema conservando su opacidad. Si mañana aparece otro, se vuelve
   a generar y sale.

   Los documentos de la empresa quedan fuera, como siempre. */
  #app #jor-caja .jor-pronto {
    background: color-mix(in srgb, var(--marca-principal) 16%, transparent);
    border-color: color-mix(in srgb, var(--marca-principal) 30%, transparent);
  }

  body.nav-plegada #jor-caja .jor-btn.pronto::after {
    background: var(--marca-principal);
  }

  #app .lec-guia {
    border-color: color-mix(in srgb, var(--marca-principal) 85%, transparent);
  }

  #app .fi:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-principal) 18%, transparent);
  }

  #app .r-nivel.sel {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-principal) 16%, transparent);
  }

  #app .enr-guia::before {
    border-color: color-mix(in srgb, var(--marca-principal) 60%, transparent);
  }

  #app .enr-crop-ovalo::before {
    border-color: color-mix(in srgb, var(--marca-principal) 70%, transparent);
  }

  #app .nom-paso.ahora {
    border-color: var(--marca-principal);
  }

  #app .nom-paso.ahora .nom-p-n {
    background: var(--marca-principal);
  }

  #app .nom-t.fuerte {
    border-color: var(--marca-principal);
  }

  #app #kryptos-engine .q-o:hover, #kr-overlays .q-o:hover {
    border-color: var(--marca-principal);
  }

  #app #kryptos-engine .q-o.on .q-n, #kr-overlays .q-o.on .q-n {
    background: var(--marca-principal);
  }

  #app #kryptos-engine .mx-o.on, #kr-overlays .mx-o.on {
    border-color: var(--marca-principal);
  }

  #app .pc-pasos li::before {
    border-color: color-mix(in srgb, var(--marca-principal) 55%, transparent);
  }

  #app .pc-pasos li.va::before {
    background: color-mix(in srgb, var(--marca-principal) 16%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca-principal) 10%, transparent);
  }

  #app .fui-anillo {
    stroke: var(--marca-principal);
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--marca-principal) 55%, transparent));
  }

  #app .fui-msg {
    border-color: color-mix(in srgb, var(--marca-principal) 30%, transparent);
  }

  #app .fui[data-estado="ajustando"] .fui-ov-int {
    stroke: color-mix(in srgb, var(--marca-principal) 35%, transparent);
  }

  #app button:focus-visible, .btn:focus-visible, a.btn:focus-visible, label.btn:focus-visible, [role="button"]:focus-visible, input[type="submit"]:focus-visible, input[type="button"]:focus-visible {
    outline: 2px solid var(--marca-principal);
  }

/* ════════ 19 · LA CONSOLA MÓVIL, PORTADA DEL DISEÑO ════════

   Medidas sacadas de `project/ConsolaMovil.dc.html` del lienzo que me
   diste (390 × 844), leyendo su esqueleto, no imitándolo de vista.

   Lo que yo tenía estaba mal de raíz: la barra de abajo pegada al
   borde, sin radio y de 64 de alto. En tu diseño las DOS barras
   FLOTAN, con 16 de margen por los tres lados:

     barra superior ... top 16 · izq/der 16 · alto 60 · radio 20
                        padding 0 8 0 16 · z 10
     barra de abajo ... abajo 16 · izq/der 16 · alto 68 · radio 24
                        grid con gap 4 · padding 8 · z 10
     cada destino ..... min 44 · radio 16 · en columna · gap 4
     el contenido ..... padding 88 arriba y 112 abajo, para que ninguna
                        de las dos barras tape nada
     tarjetas ......... padding 16 · radio 20 · gap 12 entre ellas

   El menú sigue naciendo de abajo, como pediste. Lo que cambia es que
   ahora flota, que es lo que tu diseño enseña. */

/* ════════════════════════════════════════════════════════════════
   20 · EL CELULAR, SEGÚN LA MESA «CONSOLA ORVIK · CELULAR»
   16 de octubre de 2026 · 390 × 844

   POR QUÉ EL CORTE ES 768 Y NO 1024
   La primera vez puse 1023 y rompí la franja de 769 a 1023, donde el
   panel NO usa la móvil: usa su lateral plegable con velo
   (`@media (max-width:1080px) and (min-width:769px)` de panel.css).
   Mi bloque imitaba el plegado sin su lógica. El panel tiene UN punto
   de corte para el teléfono --768-- y éste es el mismo. La franja de
   tableta (769-1023) la decide Dirección antes de programarla.

   QUÉ NO SE TOCA DE LA MÓVIL QUE YA FUNCIONA
   Esta móvil no se reescribe, se viste. Lo de panel.css que se queda:
     · `flex:1 1 0; min-width:0` en los botones --es lo que arregló el
       amontonamiento a la izquierda; una rejilla lo tiraría a la basura
     · `.nav-lista{display:contents}` --ya está en panel.css:3483
     · `.lbl` con elipsis, `.badge` colocado, `button.oculto`
     · el z-index 50 de la barra --probado contra los modales; el token
       dice 20, y cambiarlo mete la barra debajo o encima de un diálogo
       sin que nadie lo haya pedido

   LO QUE LA MESA SÍ CAMBIA
     barra de arriba .. de pegada y navy  →  flotante 16, alto 60,
                        radio 20, padding 0 8 0 16, vidrio
     barra de abajo ... de pegada y opaca →  flotante 16, alto 68,
                        radio 24, padding 8, vidrio
     botones de la barra  56 → 44 de alto, radio 16, activo 700 (no 800)
     logotipo ......... 34 → 24 de alto
     controles ........ 44 × 44, radio 12, con borde y fondo de control
     contenido ........ 15/15/90 → 88/16/112, por las dos flotantes
     título de pantalla  --t-pantalla (30/36, peso 600)
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 599px), (max-height: 479px){

  /* ── La barra de abajo se despega del borde ──
     Sólo posición, caja y piel. El reparto del ancho y el recorte de
     las etiquetas siguen siendo los de panel.css. */
  #app #tabs {
    /* LA MESA MANDA UNA REJILLA DE CINCO, no un `space-between`.
       `elegirBarra()` ya pone cuatro destinos mas el boton «Mas»: cinco
       justos. Se usa `grid-auto-flow: column` en vez de fijar las cinco
       columnas porque asi la barra sigue repartiendo en UNA sola fila si
       a alguien le tocan cuatro o seis; con `repeat(5,1fr)` el sexto se
       iria a un segundo renglon y partiria la barra en dos. */
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    justify-content: stretch !important;
    /* ── POR QUÉ TRES BOTONES QUEDABAN MÁS ARRIBA QUE LOS OTROS ──

       Medido: los tres son `.nav-hijo` y medían 44 de alto; «Tablero» y
       «Más» medían 51. Todos arrancaban en la misma línea de arriba, así
       que los bajitos quedaban colgando de la parte de arriba de su celda
       mientras los otros dos llenaban la barra. De ahí el escalón.

       Los 44 vienen de mi `min-height` y los 51 del contenido de los
       otros. `align-items: stretch` hace que todas las celdas midan lo
       mismo --el alto de la barra-- y, como cada botón centra su propio
       contenido, los cinco quedan a la misma altura sin importar cuánto
       ocupe cada rótulo. */
    align-items: stretch !important;
    left: var(--e-4);
    right: var(--e-4);
    bottom: calc(var(--e-4) + env(safe-area-inset-bottom, 0px)) !important;
    width: auto;
    padding: var(--e-2) !important;
    gap: var(--e-1);
    border-radius: var(--r-contenedor);
    min-height: var(--alto-pestanas);
    border-top: 0 !important;
    background: var(--vidrio-fondo);
    -webkit-backdrop-filter: var(--vidrio-filtro);
    backdrop-filter: var(--vidrio-filtro);
    border: 1px solid var(--vidrio-borde);
    box-shadow: inset 0 1px 0 var(--vidrio-brillo), var(--vidrio-sombra);
  }
  /* El radio: LA MESA DICE 16 Y LA ESCALA DEL ANEXO NO TIENE 16.
   Va 8 · 12 · 14 · 20 · 24. El más cercano es `--r-control-g` (14), y
   ése se usa. Queda anotado como choque entre el lienzo y el anexo
   para que lo resuelva Dirección: o la escala gana un 16, o la mesa
   se redibuja a 14.
   El `.act` se nombra aparte porque su regla de escritorio lleva la
   clase y, sin nombrarla, le gana a ésta por especificidad. */
#app #tabs button,
#app #tabs button.act {
    min-height: var(--toque);
    padding: var(--e-1) 2px;
    gap: var(--e-1);
    border-radius: var(--r-control-g);
    font: var(--t-etiqueta);
  }
#app #tabs button.act { font-weight: 700 }
/* ── LOS CINCO ICONOS, EN LA MISMA LÍNEA ──
   Un icono de fuente se asienta donde lo pone el renglón de texto, y
   cada glifo ocupa una altura distinta dentro de él: los tres puntos
   de «Más» no llenan lo mismo que la casita de «Inicio». Medido: dos
   píxeles de diferencia, suficientes para que «Más» se viera caído.

   Con `line-height: 1` y una caja de 20 de alto, el glifo deja de
   mandar: la caja mide siempre lo mismo y el dibujo se centra dentro.
   Así los cinco iconos --y con ellos los cinco rótulos-- quedan en la
   misma línea, sea cual sea el icono. */
  #app #tabs button .ti {
    font-size: 20px;
    line-height: 1;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

/* ── LA SANGRÍA DE LA LATERAL NO VA EN LA BARRA DE ABAJO ──
 Lo estaba, y mucho.

   En la lateral de PC los hijos van indentados bajo el titular de su
   área: `padding: 0 12px 0 40px`. Esa sangría se venía ENTERA a la
   barra del teléfono, donde no hay titulares ni jerarquía que marcar.
   Resultado: de los 82 px de columna, 52 se los comía el relleno y
   quedaban 30 para el texto. «Prospect.» necesita 53 y «Candid.» 42,
   así que salían «Pro…» y «Ca…»: tres letras.

   Y en el panel de verdad es peor, porque ahí van CINCO columnas de
   65 y no cuatro de 82: habrían quedado 13 px de texto.

   `padding-left` y `padding-right` a la medida de la barra, que es
   centrada y sin jerarquía. Se nombran los tres selectores reales
   --el hijo, el área de una sola sección y el botón «Más»-- porque la
   sangría viene de la clase y hay que ganarle con la clase. */
#app #tabs .nav-hijo,
#app #tabs .nav-area-sola,
#app #tabs [data-mas] {
  padding: var(--e-1) 2px;
  margin-left: 0;
  text-align: center;
  justify-content: center;
  /* `align-items: stretch` en la barra no bastaba: los `.nav-hijo` traen
     un `height: 44px` FIJO de la lateral, y un alto explícito le gana al
     estirado. Medido: la fila medía 51 y ellos seguían en 44, colgando de
     arriba. Con el alto en automático los cinco llenan su celda y quedan a
     la misma altura, que es lo que se veía desalineado. */
  height: auto;
  align-self: stretch;
  /* Y el mismo hueco entre icono y rótulo en los tres: `.nav-hijo` traía
     3 px de la lateral y los otros dos 4, y esos 2 px de diferencia se
     veían como un escaloncito al mirar la barra de frente. */
  gap: var(--e-1);
}

  /* ── EL ROTULO SE QUEDA EN 10 px Y NO EN 11 ──
     `--t-etiqueta` es 11/14 y lo habia aplicado aqui. Pero esta barra
     ya estaba medida: a 375 px son cinco columnas de 73 y dentro quedan
     69 px de texto. A 10 px «Tablero general» ya ocupaba 74 y por eso
     existen los rotulos cortos. Subirlo a 11 estira cada rotulo un 10 %
     y los corta justo donde se leen de un vistazo con el pulgar.

     El 10 no esta en la escala del anexo, pero estaba antes que yo y
     esta medido contra esta barra. Queda anotado para Direccion. */
  #app #tabs button,
  #app #tabs button .lbl { font-size: 10px; line-height: 13px; letter-spacing: 0 }

  /* El contador, donde lo pone la mesa. */
  #app #tabs .badge {
    top: var(--e-1); right: var(--e-3); left: auto;
    min-width: 16px; height: 16px; padding: 0 var(--e-1);
    box-sizing: border-box; font-size: 10px; line-height: 16px;
  }
  #app #tabs button .lbl { font: var(--t-etiqueta) }

  /* ── La barra de arriba también flota ──
     Era navy de Lykos pegado al borde. Ahora es vidrio, y por eso el
     contenido tiene que apartarse: `fixed` la saca del flujo. */
  #app .topbar {
    position: fixed;
    top: calc(var(--e-4) + env(safe-area-inset-top, 0px));
    left: var(--e-4);
    right: var(--e-4);
    height: var(--alto-barra);
    padding: 0 var(--e-2) 0 var(--e-4);
    gap: var(--e-2);
    align-items: center;
    border-radius: var(--r-tarjeta);
    background: var(--vidrio-fondo);
    -webkit-backdrop-filter: var(--vidrio-filtro);
    backdrop-filter: var(--vidrio-filtro);
    border: 1px solid var(--vidrio-borde);
    box-shadow: inset 0 1px 0 var(--vidrio-brillo), var(--vidrio-sombra);
    z-index: var(--z-barra);
  }
  #app .topbar .logo-movil { height: 24px; max-width: 46vw }

  /* Los controles de la barra, como en la mesa: caja de 44 con borde.
     `color` sale del tema y NO es blanco fijo: en tema claro el vidrio
     es claro y un icono blanco desaparece --ya pasó una vez. */
  #app .topbar .icon-btn,
  #app .topbar #menu-btn {
    width: var(--toque);
    height: var(--toque);
    flex: 0 0 auto;
    border-radius: var(--r-control);
    border: 1px solid var(--linea);
    background: var(--control);
    color: var(--texto);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  #app .topbar .icon-btn { margin-left: auto }
  #app .topbar .icon-btn + #menu-btn { margin-left: 0 }

  /* ── El contenido se aparta de las dos ──
     88 arriba = 16 de margen + 60 de barra + 12 de aire.
     112 abajo = 16 + 68 + 28, que es lo que la mesa deja. */
  #app #main { padding: 88px var(--e-4) calc(112px + env(safe-area-inset-bottom, 0px)) }

  /* El título de la pantalla, el único que la mesa pone en grande. */
  #app #main > h2:first-child,
  #app #main > .vista > h2:first-child { font: var(--t-pantalla); margin: 0 0 var(--e-3) }

  /* ── Tarjetas ── */
  #app .panel { padding: var(--e-4); border-radius: var(--r-tarjeta) }
#app .kpis { gap: var(--e-3) }

/* ── LA CIFRA DEL INDICADOR · LA MESA DICE 28 Y NO CABE ──
   La mesa del celular pone la cifra a 28/34. Pero sus cifras son
   «26» y «12 sitios»; la más larga de Lykos es «$410,788.48», once
   caracteres, y en una columna de 124 px a 28 px mide 185: se sale
   de la tarjeta. panel.css ya había bajado a 19 px justamente por
   eso, tras verlo romperse en Facturación (su comentario lo cuenta).

   Mi regla de 34 px --sin media query y con `#app` por delante-- le
   ganaba también en el teléfono, y por eso la cifra desbordaba. Aquí
   se devuelve el valor probado.

   ESTO ES UN CHOQUE ENTRE LA MESA Y UN DATO REAL, no entre el anexo
   y el lienzo: mando lo que no se rompe y queda anotado para que
   Dirección decida el tamaño definitivo. */
#app .kpi-card .val,
#app .kpi-card .num { font-size: 19px; line-height: 26px; letter-spacing: -.6px; white-space: nowrap }
#app .kpi-card .lbl { font-size: 12px; line-height: 16px; font-weight: 500 }
    /* El pie de la tarjeta. La mesa lo pone a 12/16 en el tono más tenue;
       panel.css lo tenía a 11.5, que no está en ninguna escala. */
    #app .kpi-card .pie { font-size: 12px; line-height: 16px; color: var(--texto-3); margin-top: var(--e-1) }

/* En un teléfono, 20 de relleno lateral deja la fila sin aire útil:
   panel.css usa 14/16 y está medido contra este ancho. */
#app .ch-tabla tr, #app .r-nivel { padding: 14px var(--e-4) }

  /* ── La hoja «Más» ──
     Lleva texto largo encima, y ahí la transparencia estorba: el anexo
     ya tiene el token para eso, `--vidrio-solido`. Y nunca pasa de media pantalla: lo que
     crece al abrir un área es lo que rueda dentro, no la hoja. */
  /* El velo era `rgba(4,30,66,.5)`: el navy de Lykos escrito a mano, que en
     Orvik no va y en tema claro se veía azul. Se deriva del fondo del tema.
     El valor exacto lo tiene la mesa «Celular, menú abierto», que no tengo:
     esto es el fondo del tema, no un color nuevo. */
  #mas-menu { background: color-mix(in srgb, var(--fondo) 62%, transparent) }
  #mas-menu .hoja {
    background: var(--vidrio-solido);
    -webkit-backdrop-filter: var(--vidrio-filtro);
    backdrop-filter: var(--vidrio-filtro);
    border: 1px solid var(--vidrio-borde);
    border-bottom: 0;
    border-radius: var(--r-contenedor) var(--r-contenedor) 0 0;
    box-shadow: inset 0 1px 0 var(--vidrio-brillo), var(--vidrio-sombra);
    max-height: 50dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--e-4) var(--e-4) calc(var(--e-6) + env(safe-area-inset-bottom, 0px));
  }
  #mas-menu .hoja button { min-height: var(--toque); border-radius: var(--r-control) }
}

/* ════════════════════════════════════════════════════════════════

   Era `box-shadow: inset 3px 0 0` --una barrita pegada al canto
   izquierdo-- sobre un fondo amarillo al 10 %. La barrita es un
   recurso que no existe en el lienzo: ahí lo activo se marca con el
   relleno de la marca y el texto de la marca, igual que el destino
   activo de la barra de abajo y que el renglón activo de la lateral.
   Un solo gesto para la misma idea en todo el sistema.

   `#mas-menu` vive FUERA de `#app` --es hermano suyo en el marcado--,
   así que nada de lo que está acotado a `#app` lo alcanza. Se nombra
   aparte a propósito. */
#mas-menu .mas-hijo.act,
#mas-menu .mas-sola.act,
#mas-menu .mas-area.act {
  box-shadow: none;
  background: color-mix(in srgb, var(--marca-principal) 14%, transparent);
  color: var(--marca-principal-texto);
  font-weight: 600;
  border-radius: var(--r-control);
}
#mas-menu .mas-hijo.act .ti:first-child,
#mas-menu .mas-sola.act .ti:first-child { color: var(--marca-principal-texto) }

/* ════════════════════════════════════════════════════════════════
   22 · LA TABLETA (769 – 1023) · LA FRANJA QUE SE QUEDÓ SIN VESTIR
   16 de octubre de 2026


   Las dos cosas eran ciertas y la causa es una sola: TODO lo que
   escribí para la lateral vive dentro de `@media (min-width:1024px)`.
   Lo acoté ahí durante la emergencia del teléfono, y esta franja se
   quedó con el estilo de `panel.css` a secas. Medido a 900 px: margen
   0, alto 1000 --la pantalla entera-- y, al abrir el menú, radio 0 y
   `backdrop-filter: none`.

   LO QUE AQUÍ NO SE TOCA
   La lógica de esta franja es de `panel.css` y funciona: la lateral
   vive plegada en 68, al abrirla se pone `fixed` en 264 y se enciende
   un velo detrás (`#nav-velo`). Eso se queda tal cual. Esto es el
   vestido: margen, radio, vidrio y alto. Ya rompí esta franja una vez
   por imitar su comportamiento en vez de respetarlo.

   El margen es 16 y no 20 porque bajo 1023 el propio anexo baja
   `--margen-pagina` a 16.
   ════════════════════════════════════════════════════════════════ */

@media (min-width: 600px) and (min-height: 480px) and (max-width: 1023px) {

  /* Plegada: despegada de los tres marcos. */
  #app #tabs {
    margin: var(--e-4) 0 var(--e-4) var(--e-4);
    height: calc(100dvh - var(--e-8));
    border-radius: var(--r-contenedor);
    padding: var(--e-4) var(--e-2);
  }

  /* Abierta: `panel.css` la clava en `top:0; left:0` y le quita el
     fondo de vidrio. Se recolocan las cuatro esquinas y se le devuelve
     el material, que es lo que se perdía. */
  body:not(.nav-plegada) #app #tabs {
    /* `margin` a cero: estando `fixed`, el margen SE SUMA a `top` y a
       `left` y la dejaba en 32 en vez de 16 --y, con el alto calculado
       encima, desbordando por abajo--. Mandan las cuatro esquinas. */
    margin: 0;
    top: var(--e-4);
    left: var(--e-4);
    bottom: var(--e-4);
    height: auto;
    border-radius: var(--r-contenedor);
    background: var(--vidrio-fondo);
    -webkit-backdrop-filter: var(--vidrio-filtro);
    backdrop-filter: var(--vidrio-filtro);
    border: 1px solid var(--vidrio-borde);
    box-shadow: inset 0 1px 0 var(--vidrio-brillo), var(--vidrio-sombra);
    padding: var(--e-4);
  }

  /* El velo de detrás deja de ser el navy de Lykos escrito a mano. */
  #nav-velo { background: color-mix(in srgb, var(--fondo) 62%, transparent) }

  /* Y el contenido respeta el mismo margen. */
  #app #main { padding: var(--e-4) }
}

/* ════════════════════════════════════════════════════════════════
   23 · EL LOGOTIPO NO SALTA AL ABRIR EL MENÚ
   «se ve muy drástico el cambio de logotipo, se mueve mucho».

   Plegada se enseña el isotipo y abierta el imagotipo completo: son
   dos imágenes distintas, con alturas distintas, dentro de una fila
   que se encoge y se estira con ellas. Medido: la fila pasaba de 52 a
   48 de alto y el dibujo se recolocaba de golpe.

   La fila se fija a una altura y a una alineación que no dependen de
   cuál de las dos imágenes esté puesta. Así lo único que cambia es la
   imagen --que es lo que tiene que cambiar-- y no la caja que la
   contiene ni lo que viene debajo.
   ════════════════════════════════════════════════════════════════ */

/* OJO CON EL `display`. `panel.css` esconde la marca en el teléfono
   --ahí la lateral ES la barra de abajo y el logotipo vive en la barra
   de arriba-- con `#tabs .marca{display:none}`. Al poner aquí un
   `display:flex` sin acotar, la reviví: el logotipo y «CONSOLA» se
   metieron DENTRO de la barra de pestañas y empujaron los destinos.
   Esta regla vive de 769 para arriba, que es donde hay lateral. */
@media (min-width: 600px) and (min-height: 480px){
  #app #tabs .marca {
    min-height: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: none;
  }
}
#app #tabs .marca img { max-height: 32px; width: auto; object-fit: contain }
body.nav-plegada #app #tabs .marca { justify-content: center }

/* ════════════════════════════════════════════════════════════════
   24 · LA LATERAL, SUS CUATRO ZONAS
   El lienzo la divide en marca · «Trabajando en» · navegación · perfil.
   La primera no decía «CONSOLA» y la segunda no existía: no había forma
   de saber de qué empresa operativa son los datos que se ven, que en un
   sistema de nueve marcas no es un adorno.

   La placa del logotipo es BLANCA y mide 44×32 porque los logotipos de
   las operativas son oscuros --el de Lykos es navy con el lobo en
   amarillo-- y sobre el vidrio de la lateral no se distinguirían.
   ════════════════════════════════════════════════════════════════ */

#app #tabs .marca .et-consola {
  font: var(--t-etiqueta);
  letter-spacing: .06em;
  color: var(--texto-3);
  margin-left: auto;
}
body.nav-plegada #app #tabs .marca .et-consola { display: none }

#app .nav-trabajando {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-3) 0 var(--e-4);
  flex-shrink: 0;
}
#app .nav-trabajando > .et {
  font: var(--t-etiqueta);
  letter-spacing: .06em;
  color: var(--texto-3);
}
#app .nav-trabajando button,
#app .nav-trabajando #nav-empresa {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  width: 100%;
  min-height: var(--toque);
  padding: var(--e-1) var(--e-2) var(--e-1) var(--e-1);
  border-radius: var(--r-control);
  border: 1px solid var(--linea);
  background: var(--control);
  color: var(--texto);
  cursor: pointer;
  text-align: left;
}
#app .nav-trabajando .placa {
  width: 44px; height: 32px;
  border-radius: var(--r-chico);
  background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
#app .nav-trabajando .placa img { max-width: 38px; max-height: 26px; width: auto; height: auto }
#app .nav-trabajando b { flex: 1; min-width: 0; font: var(--t-cuerpo-f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
#app .nav-trabajando .ti { font-size: 16px; color: var(--texto-3); flex: none }

/* Plegada sólo cabe la placa, y el renglón pierde sus rótulos. */
body.nav-plegada #app .nav-trabajando > .et,
body.nav-plegada #app .nav-trabajando b,
body.nav-plegada #app .nav-trabajando .ti { display: none }
body.nav-plegada #app .nav-trabajando { padding: var(--e-2) 0 }
body.nav-plegada #app .nav-trabajando button,
#app .nav-trabajando #nav-empresa { justify-content: center; padding: var(--e-1); border: 0; background: transparent }

/* En el teléfono la lateral ES la barra de abajo: esto no cabe ahí. */
@media (max-width: 599px), (max-height: 479px) { #app .nav-trabajando { display: none } }

/* Y «CONSOLA» tampoco: es el rótulo de la lateral, no de la barra de
   pestañas. Sin esto se colaba junto a la marca que yo había revivido. */
@media (max-width: 599px), (max-height: 479px){
  #app #tabs .marca,
  #app #tabs .marca .et-consola { display: none !important }
}

/* ════════════════════════════════════════════════════════════════
   25 · EL LOGOTIPO DE LA LATERAL · LOS TRES DEFECTOS QUE SE VEN
   16 de octubre de 2026, con capturas en tema claro.

   ── A · EL RECUADRO AL PASAR EL CURSOR ──

   `panel.css` le pone un fondo sólido en `:hover` Y en `:focus`. El de
   `:focus` es el peor de los dos: no se va al quitar el cursor, se queda
   pegado desde el clic hasta que tocas otra cosa, y por eso parecía un
   recuadro permanente alrededor del isotipo.

   Lo que se quita es el FONDO, no la reacción: el logotipo sigue
   respondiendo al clic --se hunde un punto-- y sigue teniendo su aro de
   foco cuando se llega con el teclado, que es obligatorio y es otra cosa
   distinta de pintarle una caja al pasar por encima.

   ── B · EL LOGOTIPO DESCENTRADO ──

   La causa: el imagotipo mide `height: 36px` y el isotipo `height: 30px`
   --dos alturas distintas para la misma ranura--. Al plegar y desplegar
   se cambia una imagen por otra Y el alto del dibujo cambia 6 px, así que
   el logotipo se recolocaba solo. No era una animación: era el alto.

   Las dos van a la misma altura y al mismo centro. Lo único que cambia
   al plegar es QUÉ imagen se ve.

   ── C · EL RECUADRO PUNTEADO ──
   La placa de «Trabajando en» lleva un `<img>` que `marca.js` llena
   cuando llega el tema. Hasta entonces la imagen no tiene fuente, y una
   imagen sin fuente se dibuja como un marco roto. Se esconde mientras
   no tenga qué enseñar: una placa vacía se lee como una placa; un marco
   punteado se lee como un error.
   ════════════════════════════════════════════════════════════════ */

/* A · sin fondo al pasar el cursor ni al quedar enfocado por un clic */
#app #tabs .marca:hover,
#app #tabs .marca:focus,
#app #tabs .marca:focus-visible {
  background: transparent;
  filter: none;
}
/* Pero sigue reaccionando: al clic se hunde, y con teclado sí hay aro. */
#app #tabs .marca:active { transform: scale(.97) }
#app #tabs .marca:focus-visible { outline: 2px solid var(--marca-principal); outline-offset: 2px }

/* B · una sola altura para las dos imágenes */
/* El `display` NO se toca aquí. `panel.css` enseña una imagen y esconde
   la otra según el menú esté plegado o abierto, y al escribir yo
   `display: block` para las dos las encendí a la vez: salían el
   imagotipo Y el isotipo, uno encima del otro, y eso era el desvío de
   10 px que se veía como «mal centrado». Es el mismo tropiezo que con
   `.marca` en el teléfono: un `display` escrito sin mirar quién estaba
   ocultando esa pieza. Aquí sólo van altura y encuadre. */
#app #tabs .marca .completo,
#app #tabs .marca .iso {
  height: 32px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
body.nav-plegada #app #tabs .marca .completo,
body.nav-plegada #app #tabs .marca .iso { object-position: center }

/* C · la placa no enseña un marco roto mientras no hay logotipo */
#app .nav-trabajando .placa img:not([src]),
#app .nav-trabajando .placa img[src=""] { display: none }

/* ── EL DESVÍO DE 10 px, DE DÓNDE SALÍA ──
   Medido: la fila tenía `padding: 0 4px 20px` --20 abajo, para separarse
   de la navegación-- y yo le fijé `height: 52`. Con `border-box`, esos
   20 se comen el alto: quedaban 32 útiles, justo lo que mide el
   logotipo, así que se pegaba al techo y su centro caía 10 px por
   encima del centro de la fila. Eso es lo que se veía torcido, y lo que
   hacía que al plegar pareciera que «se sube».

   La separación no desaparece: deja de estar DENTRO de la caja y pasa a
   estar fuera. Así los 52 son 52 de contenido, el logotipo se centra de
   verdad, y la navegación sigue a la misma distancia de antes. */
@media (min-width: 600px) and (min-height: 480px){
  #app #tabs .marca {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: var(--e-5);
  }
}

/* ════════════════════════════════════════════════════════════════
   26 · LOS INDICADORES NUNCA BAJAN DE 200 DE ANCHO
   Salió en la prueba de regresión, a 900 px: el tablero repartía CINCO
   columnas de 165 y pasaban dos cosas a la vez.

     · la cifra no cabía --«$410,788.48» necesita 185 a 34 px, que es el
       tamaño que manda el lienzo para una cifra-- y se salía de su
       tarjeta;
     · la fila entera medía más que el hueco útil y aparecía un barrido
       horizontal de 25 px.

   La hoja de distribución ya lo decía y no lo había aplicado aquí:
   «Indicador · mín. 200 de ancho · 2 a 4 por fila», y en tablet
   «indicadores 2 × 2». Con el mínimo puesto, la rejilla deja de
   apretar cinco donde caben tres, y los dos síntomas se van juntos.

   No se toca el tamaño de la cifra: 34/40 es lo que dice la escala.
   Lo que estaba mal era la columna, no el número.
   ════════════════════════════════════════════════════════════════ */

#app .kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) }

/* CUATRO POR FILA EN ESCRITORIO, QUE ES LO QUE DICE EL LIENZO.
   Su esquema reparte los indicadores en «3 col» cada uno sobre una
   rejilla de 12: exactamente cuatro. Con `auto-fit` salían CINCO a
   1440, de 220 cada una, y quitando los 40 de relleno quedaban 180
   útiles para una cifra que necesita 185. Por cinco píxeles.

   Con cuatro, la columna pasa de 220 a 275 y la cifra más larga del
   sistema cabe con holgura. No se encoge el número: se respeta el
   ancho que el lienzo le había dado. */
@media (min-width: 1024px) {
  #app .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}

/* Tablet: dos por fila, como el lienzo. */
@media (min-width: 600px) and (min-height: 480px) and (max-width: 1023px) {
  #app .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* ── LA PLACA SIN LOGOTIPO NO ES UNA PLACA BLANCA ──
   Se veía un rectángulo blanco vacío colgando en la lateral plegada.
   La placa es blanca porque los logotipos de las operativas son oscuros;
   sin logotipo que enseñar, un rectángulo blanco no significa nada y
   parece un hueco de carga que nunca termina.

   Mientras no haya imagen, la placa toma el aspecto del resto de
   controles --fondo de control y borde-- y enseña la inicial de la
   empresa. En cuanto `marca.js` pone el logotipo, vuelve a ser blanca. */
#app .nav-trabajando .placa:not(:has(img[src])) {
  background: var(--control);
  border: 1px solid var(--linea);
}
#app .nav-trabajando .placa:not(:has(img[src]))::before {
  content: attr(data-inicial);
  font: var(--t-cuerpo-f);
  color: var(--texto-2);
}

/* ════════════════════════════════════════════════════════════════
   27 · EL VIDRIO, DONDE DE VERDAD TOCA
   16 de octubre · «fíjate en qué partes de todo el sistema puedes
   ocupar el glass, para que lo explotes, ya que es un recurso que se ve
   excelente».

   Se explota, pero dentro de su regla, que es del propio lienzo:
   «Vidrio sólo donde se navega. Sólido donde se lee.» El vidrio es de
   la capa que FLOTA sobre el contenido; el texto largo nunca se lee
   encima.

   Ya lo llevaban: la lateral, la barra de arriba, la barra de pestañas
   del teléfono, la hoja «Más», la tarjeta del acceso, los controles del
   plano y la barra de herramientas.

   Lo que se suma ahora, porque flota y no se lee encima:

   A · EL GLOBO DEL TUTORIAL. Flota sobre cualquier pantalla y señala
       cosas debajo: es navegación pura. Era una caja opaca que tapaba
       justo lo que estaba explicando.

   B · EL PIE DE LOS DIÁLOGOS. La barra de Cancelar y Continuar se queda
       fija mientras el cuerpo rueda por debajo --es la barra inferior
       de la plantilla D del lienzo--. Con fondo sólido, el contenido
       desaparecía de golpe debajo de ella; con vidrio se ve pasar y se
       entiende que hay más.

   LO QUE NO LLEVA, Y NO ES OLVIDO: el cuerpo del diálogo, las tarjetas,
   las tablas, las listas, los formularios y los documentos. Ahí se LEE.
   ════════════════════════════════════════════════════════════════ */

/* A · el globo del tutorial */
/* ── AQUÍ VIVÍA EL VIDRIO DE LA VENTANA DE GUÍAS ──

   Se retira el 27-oct. El `02` §A.3 dice que el vidrio NUNCA va en
   tarjetas --va en capas que flotan sobre el contenido, como la barra
   o el menú-- y una ventana con la que se trabaja es una tarjeta. En
   tema oscuro, además, el texto sobre el desenfoque quedaba ilegible:
   Dirección lo describió el 26-oct como «un vidrio así horrible que no
   autoricé».

   El estilo de `#tut-card` vive ahora en `panel.css`, escrito con
   tokens y contra el lienzo aprobado
   `docs/mockups-orvik/guias-del-sistema-aprobado.html`. */

/* B · el pie de los diálogos */
#app .modal .m-foot,
.modal .m-foot {
  background: var(--vidrio-fondo);
  -webkit-backdrop-filter: var(--vidrio-filtro);
  backdrop-filter: var(--vidrio-filtro);
  border-top: 1px solid var(--vidrio-borde);
}
/* Dentro de él, relleno simple: nunca vidrio sobre vidrio. */
#app .modal .m-foot .btn,
.modal .m-foot .btn {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* C · EL VELO DE LOS DIÁLOGOS ERA EL NAVY DE LYKOS
   `rgba(4,30,66,.5)` escrito a mano: color de marca en el código, que
   el anexo prohíbe, y que en tema claro teñía de azul toda la pantalla.
   Se deriva del fondo del tema, así que acompaña al tema solo. */
.modal { background: color-mix(in srgb, var(--fondo) 62%, transparent) }

/* ════════════════════════════════════════════════════════════════
   28 · LA TARJETA DEL AUDITOR · seguía siendo la vieja
   Flota fija en la esquina, por encima de TODO (z-120): es capa que
   flota sobre el contenido, así que le toca vidrio igual que a la hoja
   y al globo del tutorial. Tenía fondo sólido, radio 12 --cuando una
   pieza suelta de ese tamaño va en 20-- y una sombra `rgba(4,30,66,.22)`
   que es el navy de Lykos escrito a mano.

   La raya roja de la izquierda se queda: es lo único que dice de un
   vistazo que eso es un error y no un aviso cualquiera, y el lienzo
   manda que lo crítico sea SÓLIDO y nunca lleve el color de la marca.
   ════════════════════════════════════════════════════════════════ */
.aud-aviso {
  background: var(--vidrio-fondo);
  -webkit-backdrop-filter: var(--vidrio-filtro);
  backdrop-filter: var(--vidrio-filtro);
  border: 1px solid var(--vidrio-borde);
  border-left: 4px solid var(--record-rojo);
  border-radius: var(--r-tarjeta);
  box-shadow: inset 0 1px 0 var(--vidrio-brillo), var(--vidrio-sombra);
  color: var(--texto);
}
.aud-a-top > i { color: var(--record-rojo) }

/* ════════════════════════════════════════════════════════════════

   Aquí el vidrio no contradice la regla: el botón NO es texto que se
   lee, es un control, y se apoya sobre la tarjeta en vez de fundirse
   con ella. Lo que sigue prohibido es el texto largo encima.

   Se les pone el filtro suave --`--vidrio-filtro-sm`-- y no el denso:
   un control pequeño con desenfoque de 30 se ve sucio, y además esto
   flota sobre una tarjeta sólida, no sobre la aurora.
   ════════════════════════════════════════════════════════════════ */
#app .dash-card .btn.ghost,
#app .opv-card .btn.ghost,
#app .dash-head .btn.ghost {
  background: var(--vidrio-fondo);
  -webkit-backdrop-filter: var(--vidrio-filtro-sm);
  backdrop-filter: var(--vidrio-filtro-sm);
  border: 1px solid var(--vidrio-borde);
  box-shadow: inset 0 1px 0 var(--vidrio-brillo);
  color: var(--texto);
  border-radius: var(--r-control);
}

/* ════════════════════════════════════════════════════════════════

   LA REGLA, que es la 3 del vidrio: UNO por pantalla, y es LA acción
   principal --la que crea algo nuevo--. Todo lo demás va neutro.

   Dónde cae en cada pantalla:
     Inicio y los tableros ... «Nuevo reporte», en la barra
     Candidatos ............. «Nuevo candidato»
     Prospectos ............. «Nuevo prospecto»
     y así: el botón de CREAR de cada pantalla.

   Cómo se reconoce sin tocar veintitrés pantallas: la acción de crear
   es el primer botón sólido --ni fantasma, ni peligro, ni aviso-- de la
   cabecera de la pantalla. Se nombran las cabeceras que existen hoy.
   El resto de botones sólidos se queda en relleno de marca, que sigue
   siendo la marca pero no disputa el primer lugar.
   ════════════════════════════════════════════════════════════════ */
#app .opv-barra .btn:not(.ghost):not(.danger):not(.warn),
#app .topbar   .btn:not(.ghost):not(.danger):not(.warn),
/* ── EL DEGRADADO SE VA ──
   Regla del 19/oct/2026: el boton con degradado se va de todo el
   sistema, y queda guardado por si se usa despues. El prompt maestro
   lo repite en una linea: cero degradados.

   El boton de "nuevo" queda como cualquier otro principal: el acento
   solido. La receta anterior queda escrita aqui debajo, comentada, que
   es lo que significa "guardado": no se borra, se apaga.

     background: var(--marca-degradado-boton);
     border: 1px solid var(--vidrio-borde);
     color: #fff;
     box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--sombra-3);  */
#app .btn[id$="-nuevo"]:not(.ghost):not(.danger):not(.warn),
#app .btn#nuevo:not(.ghost):not(.danger):not(.warn) {
  background: var(--marca-principal);
  border: 1px solid transparent;
  color: var(--marca-sobre-principal);
  box-shadow: none;
}

/* ════════ 24 · LOS TRES QUE NINGUNA CAPA ALCANZABA ════════
   Lote 1 · marca · 19 de octubre de 2026

   El tablero «Detalles de marca» del lienzo midió seis puntos que
   seguían en Lykos. Tres de ellos no los arreglaba ninguna regla, y
   cada uno falla de una manera distinta:

   1 · `--lyk-yellow` NO ESTÁ DEFINIDA EN EL PANEL.
       `panel.css` la usa en el rótulo y en el anillo del rostro
       (líneas 2376, 2400 y 2444), pero ninguna hoja del panel la
       declara: sólo existe en `apps/guardia/`. Una variable que no
       existe no es un color equivocado, es ningún color: el anillo
       quedaba SIN TRAZO y el rótulo sin tinta. No se ve amarillo
       feo, se ve nada, y por eso nadie lo reportó.

   2 · EL DIÁLOGO VIVE FUERA DE `#app`.
       Todas las reglas del acento están acotadas a `#app`, así que
       el aro de foco de «Hay una versión nueva del sistema» seguía
       siendo el #FFC207 que pone `panel.css` de forma global. Por
       eso aquí NO se usa `#app`: es el único modo de alcanzarlo.
       Se escribe `outline-color` y no `outline`, para no perder el
       grosor y el estilo que ya puso `panel.css`.

   3 · El velo de ese mismo diálogo era el navy de Lykos. Eso se
       corrigió en `dialogos.js`, donde estaba escrito.             */

#app .fui-h,
#login .fui-h,
.fui-h { color: var(--marca-principal) }

#app .fui[data-estado="ajustando"] .fui-ov-ext,
.fui[data-estado="ajustando"] .fui-ov-ext { stroke: var(--marca-principal) }

#app .fui-anillo,
.fui-anillo { stroke: var(--marca-principal) }

button:focus-visible,
.btn:focus-visible,
a.btn:focus-visible,
label.btn:focus-visible,
[role="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
.lyk-dlg-acts button:focus-visible { outline-color: var(--marca-principal) }

/* ════════ 25 · EL MENÚ LATERAL VA SÓLIDO ════════
   Regla del 19/oct/2026: el menú actual no se toca en diseño en lo
   absoluto; sólo se hace sólido.

   Así que esto cambia DOS cosas y ninguna más:

     el fondo ....... de `rgba(14,26,46,.34)` a opaco
     el desenfoque .. se quita

   NO se toca nada de lo demás: ni las 9 entradas, ni su orden, ni los
   íconos, ni la tipografía, ni el ancho, ni el radio de 24, ni el
   borde, ni la sombra, ni el plegado, ni el velo de la franja
   mediana. El menú se ve igual; deja de transparentarse.

   ── 20/oct · «QUÍTALE TODO EL EFECTO GLASS AL MENÚ» ──

   Esto quitaba el fondo y el desenfoque, y dejaba el canto con brillo
   —que es una de las tres capas del material—. Ese día el token de
   vidrio ganó dos capas más (el canto cónico y la lente del borde, que
   lleva su propio `backdrop-filter`), y el menú se las quedó: las dos
   cuelgan de `[data-vidrio]` y este bloque sólo apagaba el elemento,
   no sus capas.

   O sea que el menú estaba MÁS de vidrio que antes de hacerlo sólido.

   Ahora se va el material entero: fondo, desenfoque, canto, lente,
   grano y el brillo de arriba. Queda el color opaco, el borde, la
   sombra exterior y la forma, que es lo único que se pidió
   conservar.                                                          

   El color no se inventa: es `--vidrio-solido`, que ya existe en
   `orvik-tokens.css` y es el que el propio sistema usa cuando alguien
   pide «reducir transparencia» en su equipo. #101C30 en oscuro y
   #FFFFFF en claro.

   LA BARRA SUPERIOR NO ENTRA AQUÍ: el prompt la nombra entre lo que
   nunca se toca, «la barra superior flotante de vidrio». Se queda de
   vidrio.                                                            */

/* ── POR QUE LA LISTA DE SELECTORES ES TAN LARGA ──

   Porque el vidrio del menu NO estaba solo en el token: este mismo
   archivo lo vuelve a poner TRES veces, una por tamaño de pantalla, y
   cada una con mas especificidad que la regla de arriba.

     @media (max-width: 599px) ...................... #app #tabs
     @media (600-1023px) ...... body:not(.nav-plegada) #app #tabs
     @media (min-width: 1024px) ..................... #app #tabs

   La de en medio pesa (2 ids, 1 clase, 1 elemento) y ganaba. O sea
   que el menu NUNCA dejo de ser de vidrio desde que se pidio hacerlo
   solido el 19/oct: la regla estaba escrita, se leia correcta, y no
   servia en ningun tamaño. Encontrado el 20/oct preguntandole al
   navegador que reglas le aplicaban, no leyendo el archivo.

   Asi que aqui se nombran las tres formas en que el menu puede
   aparecer, con una especificidad que les gana a las tres a la vez,
   en lugar de parchear cada media por separado --que es como se
   llego a tener tres--. Si mañana aparece un cuarto tamaño, esta
   regla ya lo cubre.                                                  */

#tabs[data-vidrio],
#app #tabs[data-vidrio],
body #app #tabs[data-vidrio],
body:not(.nav-plegada) #app #tabs[data-vidrio],
body.nav-plegada #app #tabs[data-vidrio] {
  /* El color no se inventa: `--vidrio-solido` ya existe y es el que el
     propio sistema usa cuando alguien pide «reducir transparencia». */
  background: var(--vidrio-solido);
  /* `background-image: none` además del color, porque `--vidrio-fondo`
     trae el grano y el degradado como capas de imagen: sin esto se
     quedarían encima del color opaco. */
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* Se queda la sombra que lo despega del fondo; se va el brillo
     interior de arriba, que es el canto del vidrio visto por dentro.
     Esa linea blanca la pone la regla de la franja mediana, no el
     token, y por eso hay que decirlo aqui. */
  box-shadow: var(--vidrio-sombra);
}

/* Las dos capas del material. Se apagan con `content: none` --no con
   `opacity` ni `display`-- porque así el navegador no las construye, y
   la lente deja de pedir su propio desenfoque. */
#tabs[data-vidrio]::before,
#tabs[data-vidrio]::after,
#app #tabs[data-vidrio]::before,
#app #tabs[data-vidrio]::after,
body #app #tabs[data-vidrio]::before,
body #app #tabs[data-vidrio]::after { content: none }

/* ── Y LA BARRA DE DESPLAZAMIENTO NO SE DIBUJA ──

   Regla del 20/oct: esa barra no sale dentro del menu al deslizar.

   `panel.css` le daba 8 px de ancho y un pulgar claro
   (`rgba(248,250,252,.22)`), asi que al desplazarse aparecia una linea
   vertical pegada al borde derecho, DENTRO del menu y encima de sus
   iconos. En un menu de nueve entradas que casi siempre cabe entero,
   esa barra solo sale al plegarlo o en pantallas cortas: aparece y
   desaparece sola, que es lo que la hace molesta.

   SE ESCONDE, NO SE DESACTIVA. El menu se sigue desplazando con la
   rueda, con el dedo, con las flechas y con el tabulador: lo unico
   que se va es su dibujo. Un menu que no se pudiera desplazar
   dejaria entradas inalcanzables en una pantalla corta.

   Van las dos formas porque los navegadores no comparten una:
   `scrollbar-width` es la estandar (Firefox y Chrome nuevo) y
   `::-webkit-scrollbar` la de WebKit, que es la que usa Safari. Se
   nombran las tres formas del menu para ganarle a `panel.css`.       */

#tabs,
#app #tabs,
body #app #tabs {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#tabs::-webkit-scrollbar,
#app #tabs::-webkit-scrollbar,
body #app #tabs::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* ════════ 26 · LA TIPOGRAFÍA QUE YA ESTABA APROBADA ════════
   Lote 3 · lenguaje visual · 19/oct/2026

   `orvik-tokens.css` declara `--fuente: "Geist"` desde el 16 de
   octubre y todos los tokens de tipografía cuelgan de esa variable.
   Pero `panel.css:220` pone `body { font-family: Inter }` y nadie lo
   pisaba, así que el panel entero salía en Inter. La fuente declarada
   y la fuente servida nunca fueron la misma, y por eso leyendo el
   código parecía correcto.

   Medido contra la ficha `Ficha_com_prospectos_lista_PC` del lienzo:

     el cuerpo ....... Outfit    (el panel daba Inter)
     el menú ......... Geist     (el panel daba Inter)

   El menú en Geist NO es un cambio de diseño: es lo que el prompt
   maestro ya nombra como parte del menú aprobado, «9 entradas, orden,
   íconos, Geist». Hoy no se veía así porque la fuente no se cargaba.
   Nada más del menú se toca.                                        */

#app, #login, body {
  font-family: "Outfit", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

#tabs, #tabs button, #tabs .lbl, #nav-pie, #mas-menu {
  font-family: "Geist", "Outfit", "Inter", -apple-system, system-ui, sans-serif;
}

/* La cifra y los datos siguen en la de siempre: una tabla de números
   se lee mejor con los dígitos del mismo ancho, y eso no lo cambia el
   lienzo. */
#app .mono, #app .cifra { font-family: var(--fuente-mono) }

/* ════════ 27 · EL BOTÓN Y EL TÍTULO, COMO LOS DIBUJA LA FICHA ════════
   Medido en el navegador, los dos lados, a 1440 en claro:

                        la ficha          el panel
     botón alto ....... 44                48
     botón radio ...... 999 (píldora)     12
     botón peso ....... 600               500
     botón tamaño ..... 15 px             14 px
     botón relleno .... 0 24              0 18
     título ........... 32 px / peso 400  20 px / peso 600

   El alto baja de 48 a 44: sigue por encima del mínimo de 44 × 44 que
   piden las reglas responsivas del lote 0, así que no se pierde nada
   de accesibilidad.                                                   */

/* El selector lleva los mismos `:not()` que la regla del acento (arriba
   en este archivo): con `#app .btn` a secas, esa regla pesaba mas y el
   boton principal se quedaba en radio 12 y peso 500. Medido. */
/* ── EL RADIO BAJA DE 999 A 12 · anexo del 27-oct ──

   Direccion, 27/oct: «Yo no autorice botones tan redondos, ni en
   version PC ni movil ni en ningun lado.» La tabla del anexo
   `docs/mockups-orvik/anexo-controles-de-la-consola.md` lo dice en una
   linea: boton principal, secundario y de peligro, rectangulo de radio
   `--r-control` (12) y alto 44.

   ESTA ES LA REGLA QUE REDONDEABA TODA LA CONSOLA, y por eso se cambia
   aqui y en un solo sitio: el `999px` de abajo ganaba sobre el
   `--r-control` que la regla del acento ya ponia mas arriba en este
   mismo archivo. Cambiarlo en cada pantalla habria dejado esta regla
   en pie, mandando sobre todas.

   El alto, el tamano y el relleno NO se tocan: eso venia del lienzo y
   el anexo lo confirma. */
#app .btn,
#app .btn.ghost,
#app .btn.contorno,
#app .btn.danger,
#app .btn:not(.ghost):not(.danger):not(.warn) {
  min-height: 44px;
  border-radius: var(--r-control);
  font-size: 15px;
  font-weight: 600;
  padding: 0 24px;
}

/* El secundario es más ligero que el principal: en la ficha el que
   manda pesa 600 y el que acompaña, 400. */
#app .btn.ghost,
#app .btn.contorno {
  font-weight: 400;
  font-size: 14px;
  padding: 0 20px;
}

/* El chico conserva su proporción. */
#app .btn.sm { min-height: 40px; font-size: 13px; padding: 0 18px }

#app #main > h2:first-child,
#app h2.titulo-pantalla {
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
}

/* ════════ 28 · LOS SEIS DEGRADADOS DEL CHASIS ════════
   «Cero degradados» (prompt maestro) y la decisión del
   19/oct: «se va de todo el sistema, queda guardado por si se usa
   después».

   `panel.css` tenía ocho. Seis son decorativos y se apagan aquí; dos
   se quedan, y conviene decir por qué:

     `.lec-txt` ....... es el velo negro que hace legible el texto
                        encima del vídeo de la cámara. No decora: sin
                        él, el rótulo desaparece sobre una imagen
                        clara. No es lo que la regla prohíbe.
     `.fui-rayas` ..... una trama de líneas al 2.8 % de opacidad sobre
                        el biométrico. Es textura, de un solo color,
                        no una transición de color.

   Los seis que se apagan son los dos «hero» (el saludo del tablero y
   el índice de exposición), sus dos brillos radiales encima, y el
   botón `.btn-c`.

   Qué se pone en su lugar: los hero llevan `--marca-banda`, que es el
   marino de la empresa, oscuro en los dos temas, así que el texto
   blanco que ya tenían sigue legible. El botón va al acento con su
   tinta, como cualquier otro principal.

   Las recetas viejas quedan escritas abajo, apagadas. Eso es
   «guardado»: no se borran, se comentan.

     .dash-hola  linear-gradient(115deg, var(--navy), var(--navy-light) 45%, var(--teal-hondo) 100%)
     .c-hero     linear-gradient(118deg, var(--navy), var(--navy-light) 46%, var(--teal-hondo) 78%, var(--teal) 100%)
     .c-hero::after   radial-gradient(120% 160% at 88% -30%, rgba(78,205,196,.30), transparent 62%)
     .btn-c      linear-gradient(112deg, var(--navy), var(--navy-light) 48%, var(--teal-hondo) 100%)
     .exp-hero   linear-gradient(126deg, var(--navy), var(--navy-light) 52%, var(--teal-hondo) 100%)
     .exp-hero::after radial-gradient(110% 150% at 92% -20%, rgba(78,205,196,.32), transparent 60%)   */

/* ── CORREGIDO: SON TARJETAS, NO BARRAS ──
   Visto en la captura del 19/oct: esos botones largos negros no los
   pidio nadie. Mi primera version les puso el marino
   de la banda a lo ancho, y eso lo invente yo.

   Medido en `ProtoPC.dc.html`, el prototipo navegable del lienzo: en
   el tablero NO hay ninguna pieza oscura. El saludo es texto plano de
   32 px y todo lo demas son TARJETAS CLARAS: fondo de superficie,
   radio 20, SIN borde y con una sombra en dos capas, muy suave.

   `.dash-hola` sigue sin aparecer aqui: `inicio-orvik.css:167` ya le
   quita el fondo con `!important`, y el prototipo confirma que el
   saludo va sin tarjeta.                                            */
#app .c-hero,
#app .exp-hero {
  background: var(--superficie);
  background-image: none;
  color: var(--texto);
  border: 0;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05);
}

/* Los brillos radiales que iban encima de los dos hero. */
#app .c-hero::after,
#app .exp-hero::after { background: none }

#app .btn-c {
  background: var(--marca-principal);
  background-image: none;
  color: var(--marca-sobre-principal);
  /* 999 → 12, por el anexo del 27-oct: tambien se toca. */
  border-radius: var(--r-control);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
   29 · EL RENGLON QUE ELIGE

   El lienzo lo llama `tipo: 'elegir'`: renglones grandes que deciden a
   donde sigue el flujo. Aparecen cuando el sistema no puede adivinar
   --con que empresa cotizas, si tienes al candidato enfrente o se lo
   mandas-- y por eso no son un <select>: la decision se ve completa,
   con su consecuencia escrita debajo.

   Las medidas no se eligieron aqui. Salen de la ficha
   `Ficha_empresacotiza_PC` del lienzo, una por una: alto minimo 72,
   padding 12/16, radio 16, separacion 8, placa del logotipo 112x48 con
   radio 10 y su propio aire de 6/10 adentro.

   NO LLEVA `#app` DELANTE, Y NO ES UN DESCUIDO. El `#modal-root` del
   panel cuelga del <body>, HERMANO de `#app`, no dentro. Un selector
   `#app .elige-op` no alcanzaria ni una sola de estas tarjetas: se
   verian con la pinta por omision del navegador y nada avisaria. Es
   la misma trampa que ya se habia encontrado con el dialogo.

   LA PLACA DEL LOGOTIPO ES BLANCA A PROPOSITO, y no es un descuido del
   tema oscuro: ahi va el imagotipo PARA FONDO CLARO, que es el que
   todas las marcas tienen completo. Es la misma razon por la que la
   placa del menu es blanca.
   ═══════════════════════════════════════════════════════════════════ */

/* ── SEIS RENGLONES NO CABEN EN UNA PANTALLA ──
   A 72 px de alto cada uno, mas el titulo y los botones, el sexto
   quedaba cortado y los botones empujados fuera de la vista: habia que
   adivinar que la caja se desplazaba. La lista se desplaza SOLA y los
   botones no se mueven, que es lo que hace cualquier lista larga del
   sistema. */
.elige {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  /* El aire de la derecha es para que la barra no se encime en el
     borde del renglon seleccionado. */
  padding-right: 4px;
}

.elige-op {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 72px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid var(--linea);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.elige-op:hover { background: var(--superficie-2) }

/* La que el sistema propone. No la deja elegida de oficio: la señala,
   y el boton principal dice su nombre para que aceptar sea un clic. */
.elige-op[aria-current="true"] { border-color: var(--marca-principal) }

.elige-placa {
  width: 112px;
  height: 48px;
  flex: none;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid rgba(15,23,42,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  box-sizing: border-box;
}
.elige-placa img { max-width: 100%; max-height: 100%; object-fit: contain }

/* Sin logotipo se cae a la inicial, como en todo el sistema. */
.elige-ini {
  width: 44px;
  height: 48px;
  flex: none;
  border-radius: 999px;
  background: var(--control);
  color: var(--marca-principal-texto);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.elige-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.elige-t   { font-size: 15px; font-weight: 600 }
.elige-s   { font-size: 13px; line-height: 18px; color: var(--texto-2) }
.elige-ch  { color: var(--texto-3); font-size: 18px }

/* Lo que a esa empresa le falta para firmar y facturar. Se dice aqui
   porque es el momento en que importa, y NO estorba la venta: el
   renglon se puede elegir igual. */
.elige-falta { font-size: 12px; line-height: 17px; color: var(--proceso-texto) }

/* En telefono la placa se encoge antes que el texto: el nombre de la
   empresa es lo que hay que leer. */
@media (max-width: 480px) {
  .elige-op    { gap: 12px; padding: 12px }
  .elige-placa { width: 84px; height: 40px; padding: 5px 8px }
}

/* ═══════════════════════════════════════════════════════════════════
   30 · UN BOTON APAGADO SE TIENE QUE VER APAGADO

   Lo destapo la tarjeta de «¿Con que empresa le vas a cotizar?»
   mientras lee la lista: su boton principal esta `disabled` y aun asi
   se veia verde, lleno, igual que uno listo para apretarse. Se aprieta
   y no pasa nada.

   El sistema solo le cambiaba el cursor a `not-allowed`. Eso se nota
   si traes raton y lo dejas encima; en un telefono no hay raton, y en
   una pantalla tactil no hay forma de enterarse. Asi que no era una
   regla de este modal: era de todo el panel, y por eso se arregla una
   sola vez aqui.

   Las dos pantallas que ya habian resuelto lo suyo por su cuenta --la
   tarjeta de jornada y los niveles-- siguen mandando sobre su propio
   boton: sus selectores son mas especificos y esta regla no los pisa.
   ═══════════════════════════════════════════════════════════════════ */

button:disabled,
.btn:disabled,
[aria-disabled="true"] {
  opacity: .48;
  /* Y no se ilumina al pasarle encima: un boton apagado que reacciona
     invita a apretarlo otra vez. */
  filter: none;
}
button:disabled:hover,
.btn:disabled:hover,
[aria-disabled="true"]:hover { filter: none }

/* ═══════════════════════════════════════════════════════════════════
   31 · CON QUE EMPRESA SE ESTA COTIZANDO

   El rotulo de la barra del cotizador. Lo pide la ficha del lienzo,
   que marca esa pantalla con `conMarca: true` y le pone «Cambiar
   empresa» al lado.

   No es decoracion: el calculo es identico para las seis empresas y lo
   unico que cambia es de quien es el documento. Sin este rotulo, media
   hora de captura puede terminar en una propuesta con la marca
   equivocada, y eso no se descubre hasta que el cliente la abre.

   La placa es la misma idea que en la tarjeta y en el menu --fondo
   blanco porque ahi va el imagotipo PARA FONDO CLARO-- en la
   proporcion de la ficha (112x48 = 2.33), encogida a la altura de una
   barra de botones.
   ═══════════════════════════════════════════════════════════════════ */

#app .ct-marca-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  background: var(--superficie-2);
  font-size: 13px;
  line-height: 1;
  /* No se parte en dos renglones si la barra se queda sin aire. */
  white-space: nowrap;
}

#app .ct-marca-placa {
  width: 56px;
  height: 24px;
  flex: none;
  border-radius: 6px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 5px;
  box-sizing: border-box;
}
#app .ct-marca-placa img { max-width: 100%; max-height: 100%; object-fit: contain }

/* En telefono la barra ya va apretada: queda el nombre, que es el dato,
   y se va la placa, que es el adorno. */
@media (max-width: 600px) {
  #app .ct-marca-placa { display: none }
  #app .ct-marca-chip  { padding: 5px 10px }
}

/* ═══════════════════════════════════════════════════════════════════
   32 · LAS DOS COLUMNAS DE LOS FORMULARIOS

   `.com-g2` se usa 35 veces en `app.js` y `comercial.js` --la cita, la
   ficha de pago, el alta de sitio, el contrato, y ahora también la
   vacante-- para poner dos campos uno al lado del otro.

   Y NO ESTABA DEFINIDA EN NINGUNA HOJA. Ni en `panel.css`, ni aquí, ni
   en el `<style>` que vivía dentro del index antes de mudarse. O sea
   que los 35 salían en una sola columna, apilados, desperdiciando
   medio modal de ancho en escritorio.

   No falla ruidosamente: una clase que no existe simplemente no hace
   nada, igual que un `var()` inexistente. Se encontró el 20/oct al
   construir el formulario de la vacante, midiendo lo que de verdad
   aplicaba en vez de confiar en que la clase existía.

   En teléfono se apilan, que es lo que manda el lienzo para menos de
   600 px: dos campos de ancho completo en una columna.
   ═══════════════════════════════════════════════════════════════════ */

#app .com-g2,
#modal-root .com-g2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
  align-items: start;
}

@media (max-width: 599px) {
  #app .com-g2,
  #modal-root .com-g2 { grid-template-columns: 1fr }
}