/* ═══════════════════════════════════════════════════════════════════════════
   GOLFITO · TEMA CLARO — LOS AJUSTES A MANO (2026-09-23)
   ───────────────────────────────────────────────────────────────────────────
   Calcado de `vivero-tema-claro-ajustes.css`, que es el modelo aprobado (Luis: «VIVERO en este
   momento es el perfecto modelo del tema claro»). Los archivos generados se pierden en cada
   corrida; esto se edita a mano y se carga al final.

   Es corto porque no hace falta más: la herramienta emite cada regla con `:not([data-pz-foto])`,
   así que el tema claro NO ENTRA donde hay una fotografía detrás, y ahí queda el tema oscuro
   intacto sin tener que replicar un solo valor. Acá vive únicamente lo que de verdad cambia.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · EL MENÚ, EN TEAL ─────────────────────────────────────────────────────────────────────
   El mismo #046477 de VIVERO: el blanco encima da 6,79:1 y contra el lienzo 6,13:1. Arriba
   sigue transparente, porque ahí pasa la fotografía, con el corte al píxel. */
html[data-tema="claro"].riel-con-banda #main-sidebar{
  background-color:transparent !important;
  background-image:linear-gradient(180deg,
    rgba(4,100,119,0) 0, rgba(4,100,119,0) var(--alto-cab),
    #046477 var(--alto-cab)) !important;
  box-shadow:10px 0 26px -10px rgba(26,38,51,.26), 1px 0 0 rgba(26,38,51,.08) !important; }
html[data-tema="claro"]:not(.riel-con-banda) #main-sidebar{ background:#046477 !important; }

/* Sobre el teal se escribe en crema, con los mismos valores del tema oscuro. */
html[data-tema="claro"] #main-sidebar .sidebar-link{ color:rgba(234,223,206,.70) !important; }
html[data-tema="claro"] #main-sidebar .sidebar-link .material-icons-outlined,
html[data-tema="claro"] #main-sidebar .sidebar-link i,
html[data-tema="claro"] #main-sidebar .sidebar-link svg{ color:rgba(234,223,206,.70) !important; }
html[data-tema="claro"] #main-sidebar .sidebar-section-label,
html[data-tema="claro"] #main-sidebar h3{ color:rgba(234,223,206,.62) !important; }
html[data-tema="claro"] #main-sidebar .sidebar-link:hover{ background-color:rgba(234,223,206,.10) !important; }
html[data-tema="claro"] #main-sidebar .sidebar-link:hover,
html[data-tema="claro"] #main-sidebar .sidebar-link:hover *{ color:#FFFFFF !important; }

/* EL ACTIVO, con el mismo degradado que en VIVERO y el mismo filete interior. */
html[data-tema="claro"] #main-sidebar .sidebar-link.active{
  background-color:transparent !important;
  background-image:linear-gradient(90deg, rgba(0,61,74,.92) 0%, rgba(0,61,74,.34) 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(234,223,206,.16) !important; }
html[data-tema="claro"] #main-sidebar .sidebar-link.active,
html[data-tema="claro"] #main-sidebar .sidebar-link.active *{ color:#FFFFFF !important; }

/* el pie: `last-of-type` y no `last-child`, porque el menú termina con los dos botones de
   colapsar y ocultar, así que ningún div es el último hijo. */
html[data-tema="claro"] #main-sidebar > div:last-of-type{
  background-color:rgba(0,61,74,.28) !important;
  border-top:0.8px solid rgba(234,223,206,.16) !important; }
html[data-tema="claro"] #main-sidebar > div:last-of-type *{ color:rgba(234,223,206,.72) !important; }
html[data-tema="claro"] #main-sidebar .lang-btn{ background-color:transparent !important; }
/* El atributo va repetido para ganarle a las reglas del tema, que arrastran selectores con un
   id adentro de un `:not()` — y un id pesa más que cualquier clase. */
html[data-tema="claro"][data-tema="claro"] #main-sidebar .lang-btn.active,
html[data-tema="claro"][data-tema="claro"] #main-sidebar .lang-btn.active *,
html[data-tema="claro"][data-tema="claro"] #main-sidebar > div:last-of-type .lang-btn.active,
html[data-tema="claro"][data-tema="claro"] #main-sidebar > div:last-of-type .lang-btn.active *{
  background-color:rgba(0,61,74,.85) !important; color:#FFFFFF !important; }
html[data-tema="claro"] #main-sidebar > div:last-of-type .lang-btn:not(.active),
html[data-tema="claro"] #main-sidebar > div:last-of-type .lang-btn:not(.active) *{
  color:rgba(234,223,206,.72) !important; }

/* ── 2 · LO ÚNICO QUE CAMBIA SOBRE LA FOTOGRAFÍA: EL ÍCONO DE LA PERSONA ───────────────────── */
html[data-tema="claro"] #main-sidebar [data-pz-foto][data-pz-foto] .user-glass-pill .bg-sky-500\/20,
html[data-tema="claro"] #main-sidebar .user-glass-pill .bg-sky-500\/20,
html[data-tema="claro"] #main-sidebar .user-glass-pill > div:first-child > div:first-child{
  background-color:transparent !important;
  background-image:linear-gradient(135deg, #046477 0%, #04788E 100%) !important;
  color:#FFFFFF !important; }

/* ── 3 · EL BOTÓN QUE ABRE EL MENÚ ─────────────────────────────────────────────────────────── */
html[data-tema="claro"] #riel-mostrar,
html[data-tema="claro"] #menu-toggle,
html[data-tema="claro"] #mobile-menu-toggle{
  background-color:#046477 !important;
  border:1px solid rgba(255,255,255,.55) !important;
  color:#FFFFFF !important;
  box-shadow:0 10px 26px -14px rgba(26,38,51,.55) !important; }
html[data-tema="claro"] #riel-mostrar *,
html[data-tema="claro"] #menu-toggle *,
html[data-tema="claro"] #mobile-menu-toggle *{ color:#FFFFFF !important; }

/* ── 4 · LOS FILETES DEL CONTENIDO ───────────────────────────────────────────────────────────
   Sólo se afina lo que YA tenía filete. A los campos no se les pone color: varios llevan el
   borde en `transparent` —así se les quitó en su día— y darles color los haría aparecer. */
html[data-tema="claro"] main .glf-stat,
html[data-tema="claro"] main table,
html[data-tema="claro"] main th,
html[data-tema="claro"] main td{ border-color:rgba(26,38,51,.08) !important; }
html[data-tema="claro"] main .glf-stat{
  box-shadow:0 1px 2px rgba(26,38,51,.04), 0 10px 26px -18px rgba(26,38,51,.18) !important; }

/* el círculo del tema cabe entero dentro de la franja */
.pz-accesos{ margin-top:.85rem !important; margin-bottom:.15rem !important; flex:none; }
#main-sidebar > div:first-child{ overflow:visible !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   LA REVISIÓN COMPLETA DE LUIS (2026-09-23)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 6 · LOS <select>, QUE SE VEÍAN ROTOS ─────────────────────────────────────────────────────
   Luis mostró un cuadro gris con una X en lugar del desplegable. Es la flecha del navegador:
   el tema le daba a la caja un fondo claro pero la flecha seguía dibujándose con el color del
   tema oscuro, y encima quedaba ese bloque. Se le apaga la flecha del sistema y se le dibuja
   la de la casa, que es la misma que usan ARIA y Golfito en su barra de texto. */
html[data-tema="claro"] main select,
html[data-tema="claro"] .glf-input,
html[data-tema="claro"] select.glf-input{
  -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
  background-color:#FFFFFF !important;
  color:#1A2633 !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(26,38,51,.55) 50%),
    linear-gradient(135deg, rgba(26,38,51,.55) 50%, transparent 50%) !important;
  background-position:calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px) !important;
  background-size:5px 5px, 5px 5px !important;
  background-repeat:no-repeat !important;
  padding-right:2rem !important; }
html[data-tema="claro"] main select option{ background:#FFFFFF !important; color:#1A2633 !important; }

/* ── 7 · LAS PESTAÑAS ─────────────────────────────────────────────────────────────────────────
   La activa es un relleno de acento: encima va el blanco, como en todo el ecosistema. */
html[data-tema="claro"] .glf-tab{ color:rgba(26,38,51,.72) !important; background:transparent !important; }
html[data-tema="claro"] .glf-tab:hover{ background:rgba(0,109,130,.08) !important; color:#006D82 !important; }
html[data-tema="claro"][data-tema="claro"] .glf-tab.active,
html[data-tema="claro"][data-tema="claro"] .glf-tab.active *{
  background:#006D82 !important; color:#FFFFFF !important; }

/* ── 8 · LOS ENCABEZADOS DE TABLA ─────────────────────────────────────────────────────────────
   Venían de un azul de sistema. Quedan como en VIVERO: crema apenas teñido, con la letra en
   tinta abierta y un filete fino debajo. */


/* ── 9 · LA LISTA DE USUARIOS ─────────────────────────────────────────────────────────────────
   Luis: «esta lista no se ajusta a la temática PRISMA». Traía el verde #0b7266 de Golfito, que
   no es de la casa. El generador ya lo mapea al teal; acá se le da la superficie y el realce. */
html[data-tema="claro"] #login-user-list,
html[data-tema="claro"] .user-dropdown,
html[data-tema="claro"] [id*="user-list"]{
  background:#FFFFFF !important;
  border:1px solid rgba(26,38,51,.10) !important;
  box-shadow:0 20px 50px -24px rgba(26,38,51,.34) !important; }
html[data-tema="claro"] #login-user-list *,
html[data-tema="claro"] .user-dropdown *,
html[data-tema="claro"] [id*="user-list"] *{ color:#1A2633 !important; }
html[data-tema="claro"] #login-user-list > *:hover,
html[data-tema="claro"] .user-dropdown > *:hover,
html[data-tema="claro"] [id*="user-list"] > *:hover{ background:rgba(0,109,130,.10) !important; }

/* ── 10 · LA LÍNEA DE PERMISOS, SOBRE LA FOTO ────────────────────────────────────────────────
   Luis: «el cual sigue cambiando a color oscuro en vez de quedarse color claro».
   Va encima de la fotografía, así que no cambia de tema: queda en crema como en el oscuro.
   Lleva el atributo repetido y el nombre de su clase de Tailwind porque `text-tnteal` es un
   color PROPIO del `tailwind.config` de Golfito —no una de las rampas— y por eso no pasa por
   la traducción normal: hay que nombrarlo. */
html[data-tema="claro"][data-tema="claro"] .glf-cab-lista p,
html[data-tema="claro"][data-tema="claro"] .glf-cab-lista .text-tnteal,
html[data-tema="claro"][data-tema="claro"] [data-pz-foto] p,
html[data-tema="claro"][data-tema="claro"] [data-pz-foto] .text-tnteal{
  color:rgba(234,223,206,.92) !important;
  text-shadow:0 1px 2px rgba(13,23,32,.55) !important; }

/* ── 11 · LAS PESTAÑAS Y LOS ENCABEZADOS, CON MÁS PUNTERÍA ──────────────────────────────────
   Las reglas anteriores perdían contra las del tema, que arrastran selectores con un id
   adentro de un `:not()`. Se repite el atributo, igual que con el idioma. */
html[data-tema="claro"][data-tema="claro"] .glf-tab.active,
html[data-tema="claro"][data-tema="claro"] .glf-tab.active *{
  background:#006D82 !important; color:#FFFFFF !important; }


/* ── 12 · LOS ENCABEZADOS DE TABLA, SIN FRANJA ───────────────────────────────────────────────
   Luis: «no me gusta esa franja de color que queda en los títulos en el modo claro».
   Tenía razón y el error era mío por partida doble: primero dejé la franja azulada que traía
   la app, y después la cambié por una crema — pero seguía siendo una franja.
   En el tema oscuro esos encabezados no tienen fondo: son letra pequeña en mayúsculas con un
   filete debajo, que es como se lee una tabla de libro. En claro se hace igual: sin relleno,
   la letra en tinta abierta y un hilo que separa. Así la tabla no arranca con una barra de
   color que le quita el aire a la primera fila. */
/* Lleva `#main-app` porque la regla del generado arrastra ese id del selector original, y un
   id pesa más que cualquier cantidad de clases: sin él, esta regla perdía. */
html[data-tema="claro"][data-tema="claro"] #main-app .glf-table th,
html[data-tema="claro"][data-tema="claro"] #main-app thead th,
html[data-tema="claro"][data-tema="claro"] main thead th,
html[data-tema="claro"][data-tema="claro"] main .glf-th,
html[data-tema="claro"][data-tema="claro"] main thead tr{
  background:transparent !important;
  background-image:none !important;
  color:rgba(26,38,51,.55) !important;
  border-bottom:1px solid rgba(26,38,51,.12) !important;
  box-shadow:none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   13 · LAS REGLAS DE RESTAURACIÓN SE RETIRARON (2026-09-23)
   ───────────────────────────────────────────────────────────────────────────
   Acá había un bloque que forzaba el color y el fondo de TODO lo que cuelga de un bloque
   marcado como «sobre la fotografía». Lo puse para que el título dejara de salir en tinta, y
   servía para eso, pero al aplicar un único valor a todas las piezas aplastaba el que cada una
   ya tenía bien: el logo, el nombre, el chevron, el botón de salir y el ícono terminaban con el
   mismo crema, cuando en el tema oscuro cada uno tiene el suyo.
   Medido antes de quitarlas: cambiaban 17 de las 19 piezas de la franja — exactamente lo que
   Luis reportó como «todo cambia cuando no debe cambiar, como en VIVERO».
   Ya no hacen falta: el marcado de las tres vistas lleva `data-pz-foto` escrito a mano, el
   script completa la rama hacia abajo y las reglas del tema excluyen lo marcado. Con eso cada
   pieza conserva su valor sin que nadie se lo imponga, que es la única forma de que de verdad
   no cambie nada.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   14 · LA BARRA DE TÍTULOS DE LA TABLA: SIN FRANJA Y FIJA
   ───────────────────────────────────────────────────────────────────────────
   Luis: «esta franja de color no debe de estar» y «esa barra de títulos debe ser fija».
   Las dos cosas van juntas y por eso se resuelven juntas: un encabezado que se queda quieto
   mientras las filas pasan por debajo NECESITA un fondo, o se le transparenta el texto de las
   filas encima. Pero ese fondo no tiene por qué ser una franja de color: es el MISMO color del
   lienzo. Así el encabezado no se ve como una barra pintada —que es lo que molestaba— y sin
   embargo tapa lo que pasa por debajo.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-tema="claro"][data-tema="claro"] #main-app .glf-table th,
html[data-tema="claro"][data-tema="claro"] #main-app thead th,
html[data-tema="claro"][data-tema="claro"] #view-lista .glf-table th{
  background:#F6F3ED !important;
  background-image:none !important;
  color:rgba(26,38,51,.55) !important;
  border-bottom:1px solid rgba(26,38,51,.12) !important;
  box-shadow:none !important; }

/* ── 15 · LAS PESTAÑAS Y LOS CAMPOS, CON EL ID DELANTE ───────────────────────────────────────
   Mismo motivo que los títulos: las reglas del generado arrastran `#main-app` del selector
   original, y un id le gana a cualquier cantidad de clases. La pestaña activa se quedaba sin
   su relleno de teal y con la letra en tinta, que sobre el fondo claro parecía apagada. */
html[data-tema="claro"][data-tema="claro"] #main-app .glf-tab.active,
html[data-tema="claro"][data-tema="claro"] #main-app .glf-tab.active *{
  background:#006D82 !important; color:#FFFFFF !important; }
html[data-tema="claro"][data-tema="claro"] #main-app .glf-tab:not(.active){
  background:transparent !important; color:rgba(26,38,51,.72) !important; }
html[data-tema="claro"][data-tema="claro"] #main-app .glf-tab:not(.active):hover{
  background:rgba(0,109,130,.08) !important; color:#006D82 !important; }

/* Los campos, en papel blanco: un gris al 5% sobre crema se lee como suciedad, no como campo.
   El hundido de esta app es el blanco con su filete, igual que en VIVERO. */
html[data-tema="claro"][data-tema="claro"] #main-app .glf-input,
html[data-tema="claro"][data-tema="claro"] #main-app input:not([type=checkbox]):not([type=radio]),
html[data-tema="claro"][data-tema="claro"] #main-app select,
html[data-tema="claro"][data-tema="claro"] #main-app textarea{
  background-color:#FFFFFF !important;
  color:#1A2633 !important;
  border-color:rgba(26,38,51,.12) !important; }
html[data-tema="claro"][data-tema="claro"] #main-app [data-pz-foto] input,
html[data-tema="claro"][data-tema="claro"] #main-app [data-pz-foto] select{
  background-color:rgba(13,23,32,.45) !important; color:#FFFFFF !important;
  border-color:rgba(234,223,206,.24) !important; }

/* ── 16 · LOS BOTONES SOBRE LA FOTOGRAFÍA, CON EL VALOR EXACTO DEL TEMA OSCURO ───────────────
   Luis: «este botón tampoco debe de cambiar».
   Medido en los dos temas, el desvío era éste:
                      oscuro                  claro (mal)
     Vista Cliente    rgb(34,46,58) + crema   blanco + blanco  ← invisible
     Guardar          rgb(0,85,101) deep      rgb(0,109,130) teal
   Las reglas de restauración anteriores fijaban el COLOR de la letra pero no el FONDO, y el
   fondo venía de otra regla que sí ganaba. Acá se fija el par completo, con los números leídos
   del tema oscuro de esta misma app, no con unos parecidos.
   Se distinguen por su clase: el de acción lleva `.glf-btn-primary`; los demás son de vidrio. */
/* LA REGLA QUE IMPONÍA VIDRIO A LOS BOTONES DEL EDITOR SE RETIRÓ (2026-09-23)
   Le daba a todos el mismo #222E3A con crema. Pero medido, cada uno tiene lo suyo en el tema
   oscuro: «Cotizaciones» es rgba(26,38,51,.4) con filete blanco al 30% y letra blanca, y
   «Vista Cliente» es otro. Imponerles un valor común los igualaba entre sí y los alejaba del
   oscuro — justo lo contrario de lo que se busca.
   Ya no hace falta: la cabecera del editor lleva `data-pz-foto` escrito en el marcado, así que
   el tema no entra y cada botón conserva el suyo. */

/* sólo el color de la letra y del ícono; el fondo lo pone el botón */
html[data-tema="claro"][data-tema="claro"] #main-app [data-pz-foto] .glf-btn-primary *,
html[data-tema="claro"][data-tema="claro"] #view-editor [data-pz-foto] .glf-btn-primary *{
  background-color:transparent !important;
  border-color:transparent !important;
  color:#FFFFFF !important; }
/* NADA DE EXCEPCIONES SOBRE LA FOTOGRAFÍA. Acá yo había dejado el botón «Nueva» en teal, por
   una lectura mía de un pedido anterior que era sobre la barra de búsqueda, no sobre él. Pero
   ese botón vive sobre la foto, y ahí la regla es una sola: no cambia. Medido, en oscuro es
   deep rgb(0,85,101) y en claro había quedado teal rgb(0,109,130) — justo la diferencia que
   Luis vio. Se borra la excepción y hereda el deep, como su vecino «Guardar». */

/* ── 17 · EL ACENTO DE LA OPCIÓN SELECCIONADA ───────────────────────────────────────────────
   Luis: «el acento de color de la opción seleccionada no se ve igual».
   En VIVERO el activo se lee de un vistazo; en Golfito apenas se insinuaba. El degradado era el
   mismo, pero perdía contra las reglas propias de Golfito —que llevan `#main-sidebar`, un id—,
   así que quedaba el relleno pálido de la app. Con el id delante toma el valor que corresponde.
   El filete interior es el que le da el canto y lo despega del fondo del menú. */
html[data-tema="claro"][data-tema="claro"] #main-sidebar .sidebar-link.active{
  background-color:transparent !important;
  background-image:linear-gradient(90deg, rgba(0,61,74,.92) 0%, rgba(0,61,74,.34) 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(234,223,206,.20) !important;
  border-radius:999px !important; }
html[data-tema="claro"][data-tema="claro"] #main-sidebar .sidebar-link.active,
html[data-tema="claro"][data-tema="claro"] #main-sidebar .sidebar-link.active *{
  color:#FFFFFF !important; }

/* El traductor sobre el teal: la pastilla en vidrio crema y el activo hundido en deep. */
html[data-tema="claro"][data-tema="claro"] #main-sidebar #ui-lang-switcher{
  background:rgba(234,223,206,.08) !important;
  border:1px solid rgba(234,223,206,.18) !important; }
html[data-tema="claro"][data-tema="claro"] #main-sidebar .lang-btn.active{
  background:#00455A !important; color:#FFFFFF !important; border-radius:999px !important; }
html[data-tema="claro"][data-tema="claro"] #main-sidebar .lang-btn:not(.active){
  background:transparent !important; color:rgba(234,223,206,.72) !important; }

/* ── 18 · LOS RÓTULOS DE GRUPO, IGUALES A VIVERO ─────────────────────────────────────────────
   Luis: «los títulos tampoco coinciden». En VIVERO «VENTAS» se lee en crema; en Golfito
   «COTIZACIONES» salía en tinta, casi invisible sobre el teal.
   La causa, otra vez, es el peso del selector: el rótulo de Golfito es `.sidebar-section-label`
   y su regla de origen vive en el <style> del index, que el generador tradujo con el selector
   original — más específico que el que yo había escrito. Con el atributo repetido y el id del
   menú delante, toma el mismo valor que VIVERO: crema al 62%, que es el que se mide allá. */
html[data-tema="claro"][data-tema="claro"] #main-sidebar .sidebar-section-label,
html[data-tema="claro"][data-tema="claro"] #main-sidebar .sidebar-section-label *,
html[data-tema="claro"][data-tema="claro"] #main-sidebar h3{
  color:rgba(234,223,206,.62) !important; }
/* el filete que acompaña al rótulo, del mismo crema abierto */
html[data-tema="claro"][data-tema="claro"] #main-sidebar .sidebar-section-label::after,
html[data-tema="claro"][data-tema="claro"] #main-sidebar .sidebar-section-label::before{
  background:rgba(234,223,206,.22) !important;
  border-color:rgba(234,223,206,.22) !important; }

/* ── 19 · `.gol-grupo`: EL RÓTULO QUE DE VERDAD SE VE ────────────────────────────────────────
   Luis: «los títulos siguen sin cambiar», tres veces. Y las tres yo corregí el elemento
   equivocado. En el menú conviven DOS rótulos con el mismo texto:
     · `.sidebar-section-label`, el del marcado original, que queda oculto;
     · `.gol-grupo`, el que dibuja `golfito-lujo.js` y es el que se ve en pantalla.
   Yo venía pintando el primero —de ahí que la medición diera crema y la pantalla mostrara
   tinta—. En VIVERO el equivalente es `.viv-grupo` y sí lo tenía cubierto; acá faltaba su
   hermano. Mismo valor que allá: crema al 62%. */
html[data-tema="claro"][data-tema="claro"] #main-sidebar .gol-grupo,
html[data-tema="claro"][data-tema="claro"] #main-sidebar .gol-grupo *{
  color:rgba(234,223,206,.62) !important; }
html[data-tema="claro"][data-tema="claro"] #main-sidebar .gol-grupo::after,
html[data-tema="claro"][data-tema="claro"] #main-sidebar .gol-grupo hr,
html[data-tema="claro"][data-tema="claro"] #main-sidebar .gol-grupo span{
  background-color:rgba(234,223,206,.22) !important;
  border-color:rgba(234,223,206,.22) !important; }

/* El muñequito de la píldora, blanco también en claro: la regla general de «sobre la foto va
   en crema» lo alcanzaba y lo apagaba. Con el id del menú delante queda por encima de ella. */
html[data-tema="claro"][data-tema="claro"] #main-sidebar .user-glass-pill .bg-sky-500\/20 .material-icons-outlined,
html[data-tema="claro"][data-tema="claro"] #main-sidebar .user-glass-pill [class*="rounded-full"]:not(button) span{
  color:#FFFFFF !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   20 · LA CABECERA DEL CONTENIDO, COMO ESTABA
   ───────────────────────────────────────────────────────────────────────────
   Luis: «pero dañaste esto, ya el diseño de eso era perfecto y lo dañaste».
   Y era cierto. Al quitar las reglas de restauración —que estaban causando que 17 piezas del
   MENÚ cambiaran— me llevé también las que sostenían la cabecera del CONTENIDO, y la barra de
   búsqueda volvió a ser blanca con el texto de permisos en tinta.
   Las dos zonas no son iguales y por eso no se tratan igual:
     · la franja del MENÚ se defiende sola, porque sus piezas ya tienen su color propio en
       `golfito-lujo.css` y basta con que el tema no entre;
     · la cabecera del CONTENIDO está escrita con clases de Tailwind —`bg-white`,
       `text-slate-900`, `text-tnteal`— que no traen color propio: se lo da la hoja del tema.
       Ahí sí hay que decir qué color va.
   Por eso esto se acota a las vistas y NO alcanza a `#main-sidebar`.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-tema="claro"][data-tema="claro"] #main-app #view-lista [data-pz-foto] h1,
html[data-tema="claro"][data-tema="claro"] #main-app #view-editor [data-pz-foto] h1,
html[data-tema="claro"][data-tema="claro"] #main-app #view-config [data-pz-foto] h1{
  color:#FFFFFF !important;
  text-shadow:0 1px 2px rgba(13,23,32,.55), 0 10px 30px rgba(13,23,32,.45) !important; }
html[data-tema="claro"][data-tema="claro"] #main-app #view-lista [data-pz-foto] p,
html[data-tema="claro"][data-tema="claro"] #main-app #view-editor [data-pz-foto] p,
html[data-tema="claro"][data-tema="claro"] #main-app #view-config [data-pz-foto] p,
html[data-tema="claro"][data-tema="claro"] #main-app [data-pz-foto] .text-tnteal{
  /* crema SÓLIDO, que es el valor exacto del tema oscuro. Con el 92% quedaba un pelo más
     apagado y la comparación lo delataba. */
  color:rgb(234,223,206) !important;
  text-shadow:0 1px 2px rgba(13,23,32,.5) !important; }

/* la barra de búsqueda, con el vidrio que tenía: es la pieza que Luis aprobó */
html[data-tema="claro"][data-tema="claro"] #main-app #lista-search{
  background-color:rgba(13,23,32,.45) !important;
  border-color:rgba(234,223,206,.24) !important;
  color:#FFFFFF !important; }
html[data-tema="claro"][data-tema="claro"] #main-app #lista-search::placeholder{
  color:rgba(234,223,206,.62) !important; }
html[data-tema="claro"][data-tema="claro"] #main-app #view-lista [data-pz-foto] .material-icons-outlined{
  color:rgba(234,223,206,.7) !important; }

/* ── 21 · EL COLOR HEREDADO DE LA CABECERA ───────────────────────────────────────────────────
   Los contenedores de la cabecera no tienen texto propio, así que su color no se ve… hasta que
   aparece adentro algo que no declara el suyo y lo hereda. En el tema oscuro esos contenedores
   están en crema; en claro habían quedado en tinta. Se les devuelve el crema para que lo
   heredado también coincida, y con eso caen de una vez las cuatro diferencias que la
   comparación marcaba en cajas vacías. */
html[data-tema="claro"][data-tema="claro"] #main-app #view-lista > [data-pz-foto],
html[data-tema="claro"][data-tema="claro"] #main-app #view-editor > [data-pz-foto],
html[data-tema="claro"][data-tema="claro"] #main-app #view-config > [data-pz-foto],
html[data-tema="claro"][data-tema="claro"] #main-app #view-lista > [data-pz-foto] > div,
html[data-tema="claro"][data-tema="claro"] #main-app #view-editor > [data-pz-foto] > div,
html[data-tema="claro"][data-tema="claro"] #main-app #view-lista > [data-pz-foto] > div > div{
  /* sólo el color, que es lo que se hereda. El `border-color` sobraba: esas cajas no tienen
     borde, así que no se veía, pero aparecía como diferencia en cada comparación. */
  color:rgb(234,223,206) !important; }

/* el ícono de la lupa y el «+», en blanco como en el tema oscuro */
html[data-tema="claro"][data-tema="claro"] #main-app [data-pz-foto] .material-icons-outlined{
  color:#FFFFFF !important; }
/* SÓLO LA LUPA, que es hija directa de su caja. Con el descendiente suelto, esta regla
   alcanzaba también al «+» del botón Nueva —que cuelga del mismo contenedor— y lo dejaba en
   crema mientras en el tema oscuro es blanco. Era la última diferencia que quedaba. */
html[data-tema="claro"][data-tema="claro"] #main-app #view-lista [data-pz-foto] .relative > .material-icons-outlined{
  color:rgba(234,223,206,.7) !important; }

/* ── 22 · LOS TRES ÚLTIMOS QUE LA COMPARACIÓN ENCONTRÓ ──────────────────────────────────────
   · el botón de SALIR de la píldora: en claro se había quedado en tinta al 70% y en oscuro es
     crema al 70%. Va sobre la fotografía, así que no cambia;
   · el «+» del botón Nueva: blanco, como en oscuro;
   · los botones de la cabecera del EDITOR —«Cotizaciones» y «Vista Cliente»—: Luis los midió a
     ojo y tenía razón, no coincidían ni en color, ni en translucidez, ni en la letra. Se les
     fija el par completo con los valores del tema oscuro. */
/* (Acá había una regla que ponía en crema al 70% el botón de salir y, de paso, el chevron de
   la píldora. El chevron en el tema oscuro es crema al 75%, no al 70%, así que la regla lo
   apartaba de su valor. Se retiró por el mismo motivo que las otras: la píldora está marcada y
   no necesita que nadie le imponga nada.) */
html[data-tema="claro"][data-tema="claro"] #main-app [data-pz-foto] .glf-btn-primary .material-icons-outlined{
  color:#FFFFFF !important; }

/* los dos de la cabecera del editor, con el vidrio y la letra del tema oscuro */
html[data-tema="claro"][data-tema="claro"] #view-editor [data-pz-foto] .gol-volver,
html[data-tema="claro"][data-tema="claro"] #view-editor [data-pz-foto] button:not(.glf-btn-primary):not(.pz-tema-btn){
  background-color:#222E3A !important;
  background-image:none !important;
  border-color:rgba(234,223,206,.16) !important;
  color:#EADFCE !important;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease !important; }
html[data-tema="claro"][data-tema="claro"] #view-editor [data-pz-foto] .gol-volver *,
html[data-tema="claro"][data-tema="claro"] #view-editor [data-pz-foto] button:not(.glf-btn-primary):not(.pz-tema-btn) *{
  color:#EADFCE !important; background-color:transparent !important; }
/* EL ACENTO DEL HOVER (Luis, 2026-09-23):
   · «Cotizaciones»: en oscuro, al pasar por encima se resalta con un color —es el DEEP, que su
     propia regla le da—. En claro yo se lo había tapado con un gris y el acento desaparecía.
     Vuelve el deep, que es el que él ve en oscuro.
   · «Vista Cliente»: al revés. En claro tiene un realce que a él le gusta y en oscuro no tiene
     ninguno; pidió que el oscuro se parezca al claro. Se le da el mismo, abajo, sin `data-tema`
     para que valga en los dos. */
html[data-tema="claro"][data-tema="claro"] #main-app #view-editor [data-pz-foto] .gol-volver:hover{
  background-color:#005565 !important;
  background-image:none !important;
  border-color:#005565 !important;
  color:#FFFFFF !important; }
html[data-tema="claro"][data-tema="claro"] #main-app #view-editor [data-pz-foto] .gol-volver:hover *{
  color:#FFFFFF !important; }

/* ── 23 · LOS DOS ÚLTIMOS ─────────────────────────────────────────────────────────────────────
   · el botón de SALIR de la píldora: es el único del menú que seguía cambiando —crema al 70%
     en oscuro, tinta al 70% en claro—, porque arrastra la clase `text-gray-400` de Tailwind y
     no tiene color propio en el CSS de la app;
   · el «+» del botón Nueva: blanco, como su hermano en el tema oscuro. */
html[data-tema="claro"][data-tema="claro"] #main-sidebar .user-glass-pill > button,
html[data-tema="claro"][data-tema="claro"] #main-sidebar .user-glass-pill > button *{
  color:rgba(234,223,206,.70) !important; }
html[data-tema="claro"][data-tema="claro"] #main-app [data-pz-foto] .glf-btn-primary span,
html[data-tema="claro"][data-tema="claro"] #main-app [data-pz-foto] .glf-btn-primary .material-icons-outlined{
  color:#FFFFFF !important; border-color:transparent !important; }

/* ── 24 · LOS DOS SPAN DEL BOTÓN «NUEVA» ─────────────────────────────────────────────────────
   Eran los dos últimos que quedaban cambiando. El botón ya tenía su color, pero el «+» y la
   palabra de adentro arrastran clases de Tailwind y se los llevaba la hoja del tema.
   Se apuntan desde la vista, que es lo que le da el peso necesario. */
/* OJO: el `border-color:transparent` de la versión anterior alcanzaba también al BOTÓN y le
   borraba su filete —rgba(234,223,206,.28)—, que en el tema oscuro sí está. El filete es del
   botón; lo que no lleva nada es lo de adentro. Por eso van separados. */
html[data-tema="claro"][data-tema="claro"] #view-lista [data-pz-foto] .glf-btn-primary,
html[data-tema="claro"][data-tema="claro"] #view-editor [data-pz-foto] .glf-btn-primary,
html[data-tema="claro"][data-tema="claro"] #view-config [data-pz-foto] .glf-btn-primary{
  border-color:rgba(234,223,206,.28) !important; }
html[data-tema="claro"][data-tema="claro"] #view-lista [data-pz-foto] .glf-btn-primary span,
html[data-tema="claro"][data-tema="claro"] #view-lista [data-pz-foto] .glf-btn-primary .material-icons-outlined,
html[data-tema="claro"][data-tema="claro"] #view-editor [data-pz-foto] .glf-btn-primary span,
html[data-tema="claro"][data-tema="claro"] #view-config [data-pz-foto] .glf-btn-primary span{
  color:#FFFFFF !important;
  background-color:transparent !important; }

/* ── 25 · EL «+» DEL BOTÓN NUEVA ─────────────────────────────────────────────────────────────
   La última. La regla de la lupa lleva DOS ids —#main-app y #view-lista— y por eso le ganaba a
   la del botón, que llevaba uno. No es cuestión de repetir atributos: contra un id sólo pesa
   otro id. Se escribe con los dos y queda por encima. */
html[data-tema="claro"][data-tema="claro"] #main-app #view-lista [data-pz-foto] .glf-btn-primary .material-icons-outlined,
html[data-tema="claro"][data-tema="claro"] #main-app #view-lista [data-pz-foto] .glf-btn-primary span{
  color:#FFFFFF !important; }

/* ── 26 · LA CABECERA DEL EDITOR, AL PÍXEL ───────────────────────────────────────────────────
   Luis, con el detalle exacto: «el botón de cotización pierde su transparencia y toma otro
   color; cambia el color del tipo de letra. El de vista de cliente sí se mantiene igual, pero
   el símbolo del ojito cambia de color. No tiene que haber ningún cambio de color en la
   cabecera.»
   Medido, tenía razón en las tres cosas:
                        oscuro                                  claro (mal)
     botón Cotizaciones rgba(26,38,51,.4) translúcido           rgb(34,46,58) SÓLIDO
                        filete blanco al 30%                    filete crema al 16%
                        letra blanca                            letra crema
     su ícono           crema al 70%                            crema sólido
     el ojito           crema al 70%                            crema sólido
   Acá sí se imponen los valores, porque son los del tema oscuro leídos de esta misma pantalla,
   no unos parecidos. Van con DOS ids —#main-app y #view-editor— porque contra las reglas del
   generado, que arrastran un id, no alcanza repetir atributos: sólo pesa otro id. */
html[data-tema="claro"][data-tema="claro"] #main-app #view-editor [data-pz-foto] .gol-volver{
  background-color:rgba(26,38,51,.4) !important;
  background-image:none !important;
  border-color:rgba(255,255,255,.3) !important;
  color:#FFFFFF !important; }
html[data-tema="claro"][data-tema="claro"] #main-app #view-editor [data-pz-foto] .gol-volver .gol-volver__txt{
  color:#FFFFFF !important; }
/* los dos íconos de la cabecera —la flecha de volver y el ojito— en crema al 70% */
html[data-tema="claro"][data-tema="claro"] #main-app #view-editor [data-pz-foto] .gol-volver .material-icons-outlined,
html[data-tema="claro"][data-tema="claro"] #main-app #view-editor [data-pz-foto] button:not(.glf-btn-primary) .material-icons-outlined{
  color:rgba(234,223,206,.7) !important; }

/* ── 27 · TRES DEL EDITOR (Luis, 2026-09-23) ─────────────────────────────────────────────────

   1 · «Ese botón de añadir servicio no tiene la letra color claro.»
       Medido: el fondo es deep rgb(0,85,101), correcto, pero la letra salía en tinta
       rgb(26,38,51) — que sobre el deep no se lee. Va blanca, como todos los botones de acción.

   2 · «Las listas desplegables con esa X extrañísima que mata todo el diseño.»
       Ésta tiene explicación y era mía: al ponerles `appearance:none` les quité la flecha que
       dibuja el sistema, y la que yo había puesto —dos gradientes— quedó borrada por otra regla
       que fija `background-image:none`. Un <select> sin flecha propia y sin la del sistema es
       lo que el navegador termina dibujando como ese cuadro con la equis.
       Se le devuelve la flecha, y con `background-image` en la MISMA regla que el color, para
       que no vuelvan a separarse.

   3 · «La flechita que colapsa el menú, cuando me pongo encima se pone blanca; debería
       mantenerse oscura.» Sólo en claro; en oscuro queda como está, que él aprobó.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 · el botón de acción, con su letra blanca */
html[data-tema="claro"][data-tema="claro"] #main-app #view-editor .glf-btn-primary,
html[data-tema="claro"][data-tema="claro"] #main-app #view-editor .glf-btn-primary *,
html[data-tema="claro"][data-tema="claro"] #main-app #view-config .glf-btn-primary,
html[data-tema="claro"][data-tema="claro"] #main-app #view-config .glf-btn-primary *{
  color:#FFFFFF !important; }

/* 2 · los desplegables, con la flecha de la casa */
html[data-tema="claro"][data-tema="claro"] #main-app select,
html[data-tema="claro"][data-tema="claro"] #main-app select.glf-input{
  -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
  background-color:#FFFFFF !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(26,38,51,.55) 50%),
    linear-gradient(135deg, rgba(26,38,51,.55) 50%, transparent 50%) !important;
  background-position:calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px) !important;
  background-size:5px 5px, 5px 5px !important;
  background-repeat:no-repeat !important;
  border:1px solid rgba(26,38,51,.12) !important;
  color:#1A2633 !important;
  padding-right:2rem !important; }
html[data-tema="claro"][data-tema="claro"] #main-app select option{
  background:#FFFFFF !important; color:#1A2633 !important; }

/* 3 · la flecha de colapsar, que no se blanquea al pasar por encima */
html[data-tema="claro"][data-tema="claro"] #riel-colapsar:hover,
html[data-tema="claro"][data-tema="claro"] #riel-ocultar:hover{
  background-color:rgba(13,23,32,.78) !important;
  border-color:rgba(234,223,206,.5) !important; }
html[data-tema="claro"][data-tema="claro"] #riel-colapsar:hover *,
html[data-tema="claro"][data-tema="claro"] #riel-ocultar:hover *{
  color:#FFFFFF !important; }

/* ── 28 · EL ACENTO DE «VISTA CLIENTE», TAMBIÉN EN CLARO ─────────────────────────────────────
   Luis: «el botón de vista cliente en modo claro perdió ese acentito de color cuando le pongo
   el mouse, que era lo que me gustó».
   Al escribir ese realce en `golfito-lujo.css` —para que valiera en los dos temas— el generador
   lo leyó como cualquier otra regla del tema oscuro y emitió su gemela clara con el color
   aclarado: en claro el acento quedaba casi del color del botón y no se notaba.
   Acá se fija el valor que él aprobó. Va en esta hoja, que se carga después del generado, y con
   dos ids para no depender sólo del orden. */
html[data-tema="claro"][data-tema="claro"] #main-app #view-editor [data-pz-foto] button:not(.gol-volver):not(.glf-btn-primary):not(.pz-tema-btn):hover{
  background-color:#2A3743 !important;
  background-image:none !important;
  border-color:rgba(234,223,206,.34) !important; }
html[data-tema="claro"][data-tema="claro"] #main-app #view-editor [data-pz-foto] button:not(.gol-volver):not(.glf-btn-primary):not(.pz-tema-btn):hover *{
  color:#EADFCE !important; }

/* ── 29 · EL ENCABEZADO DENTRO DE LA TARJETA, EN CLARO ───────────────────────────────────────
   Su gemelo: en el tema claro la `.glf-card` es blanca, así que el encabezado va en blanco y
   desaparece contra ella, igual que el de la lista desaparece contra el lienzo. */
html[data-tema="claro"][data-tema="claro"] #main-app .glf-card .glf-table thead th{
  background:#FFFFFF !important;
  color:rgba(26,38,51,.55) !important;
  border-bottom:1px solid rgba(26,38,51,.12) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   30 · LA VISTA PREVIA DEL CLIENTE, REDISEÑADA PARA EL TEMA CLARO
   ───────────────────────────────────────────────────────────────────────────
   Luis: «es todo un rediseño total porque está muy mal en modo claro».
   Lo estaba, y medido se entiende por qué: el marco había quedado con las dos escalas mezcladas
   a la vez. El panel de filtros en crema —rgb(241,237,228)—, pero sus campos en tinta
   translúcida con la letra blanca: sobre el crema se leían como manchas grises apagadas, como
   si estuvieran deshabilitados. Y el rótulo «Comisiones incluidas en el precio» en crema sobre
   crema, o sea invisible.

   ── LA IDEA ────────────────────────────────────────────────────────────────
   Esta pantalla son DOS COSAS distintas y hay que tratarlas distinto:
     · EL PAPEL, que es el documento que va a ver el cliente. Es papel blanco en los dos temas,
       porque es lo que se imprime. No se toca ni un valor suyo.
     · EL MARCO —la barra de arriba, el panel de filtros, la barra de formato— que es la mesa de
       trabajo de quien arma la cotización.
   El marco se resuelve como el menú de la app: una pieza de TEAL con la letra en crema. Así el
   panel es hermano del riel que quedó a la izquierda, el papel resalta en el centro como lo que
   es, y no hay ninguna zona donde convivan dos escalas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* EL PANEL DE FILTROS: teal, como el menú */
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-filtros-panel{
  background-color:#046477 !important;
  background-image:none !important;
  border-right:1px solid rgba(234,223,206,.16) !important; }
/* sus rótulos y textos, en crema — los mismos valores que el menú */
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-filtros-panel,
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-filtros-panel *{
  color:rgba(234,223,206,.86) !important; }
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-filtros-panel label,
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-filtros-panel p,
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-filtros-panel .glf-section-label{
  color:rgba(234,223,206,.62) !important; }
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-filtros-panel h2,
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-filtros-panel h3{
  color:#FFFFFF !important; }

/* LOS CAMPOS: hundidos sobre el teal, con la flecha de la casa. Eran el problema mayor: iban en
   tinta translúcida sobre crema y parecían apagados. Sobre el teal, hundidos, se leen. */
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-filtros-panel select,
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-filtros-panel input,
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-filtros-panel textarea{
  -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
  background-color:rgba(13,23,32,.34) !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(234,223,206,.72) 50%),
    linear-gradient(135deg, rgba(234,223,206,.72) 50%, transparent 50%) !important;
  background-position:calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px) !important;
  background-size:5px 5px, 5px 5px !important;
  background-repeat:no-repeat !important;
  border:1px solid rgba(234,223,206,.22) !important;
  color:#FFFFFF !important;
  padding-right:2rem !important;
  border-radius:12px !important; }
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-filtros-panel select:hover,
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-filtros-panel select:focus{
  background-color:rgba(13,23,32,.5) !important;
  border-color:rgba(234,223,206,.45) !important;
  outline:none !important; }
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-filtros-panel option{
  background:#0D1720 !important; color:#FFFFFF !important; }
/* los interruptores y sus pastillas */
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-filtros-panel button{
  background-color:rgba(13,23,32,.34) !important;
  border-color:rgba(234,223,206,.22) !important;
  color:#EADFCE !important; }

/* LA BARRA DE ARRIBA se queda como está: ya es oscura en los dos temas y Luis no la objetó. */

/* LA BARRA DE FORMATO: papel claro, porque trabaja sobre el papel. Lo único que hay que
   arreglar es el selector de tipografía, que salía con el cuadro y la equis por la misma razón
   que los del editor: `appearance:none` sin flecha propia. */
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-toolbar select,
html[data-tema="claro"][data-tema="claro"] #print-view-overlay .pv-tb-select{
  -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
  background-color:#FFFFFF !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(26,38,51,.55) 50%),
    linear-gradient(135deg, rgba(26,38,51,.55) 50%, transparent 50%) !important;
  background-position:calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px) !important;
  background-size:5px 5px, 5px 5px !important;
  background-repeat:no-repeat !important;
  border:1px solid rgba(26,38,51,.14) !important;
  color:#1A2633 !important;
  padding-right:2rem !important; }

/* EL PAPEL NO SE TOCA. Se deja dicho por si alguien viene a «arreglarlo»: el documento del
   cliente es blanco en los dos temas porque es lo que se imprime y lo que él recibe. */
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #print-view,
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-editable{
  background:#FFFFFF !important; }

/* ── 31 · LAS DOS BARRAS DE LA VISTA PREVIA ──────────────────────────────────────────────────
   Luis: «esto se ve súper mal». Y la causa es fina, vale la pena dejarla escrita.
   La cabecera del panel y la barra de arriba usan `bg-ruta-insignia`, un degradado que en el
   tema oscuro va de una tinta a otra tinta. El generador traduce CADA COLOR DE UN DEGRADADO POR
   SEPARADO, y con esa regla el primero se quedó oscuro y el segundo se fue a crema: el
   resultado era un degradado que empieza en tinta y termina en claro, o sea un parche que
   corta la pantalla por la mitad. Medido:
       linear-gradient(rgba(18,28,38,.98), rgba(241,237,228,.98))
   Un degradado no es una lista de colores sueltos: es un recorrido, y si sus extremos cambian
   de tema por separado deja de ser un recorrido.
   Acá se le da a cada barra un degradado entero y coherente, en la escala del teal del marco,
   que es la del panel que tienen debajo. */
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-filtros-panel .bg-ruta-insignia,
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-filtros-panel > div:first-child{
  background-color:#04566A !important;
  background-image:linear-gradient(180deg, #04566A 0%, #046477 100%) !important;
  border-bottom:1px solid rgba(234,223,206,.16) !important; }
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-filtros-panel > div:first-child *{
  color:rgba(234,223,206,.86) !important; }

/* LA BARRA DE ARRIBA, EN TEAL (Luis: «lo de arriba debe verse teal también», «y las letras en
   blanco para que se lean»).
   Va con el MISMO selector que usa el generado —`> .no-print:first-child`—, porque el suyo
   lleva una clase más que el que yo había escrito y por eso ganaba: mi degradado estaba puesto
   pero no se aplicaba nunca.
   En teal, la barra cierra el marco por arriba igual que el panel lo cierra por la izquierda, y
   el papel queda enmarcado por una sola pieza de color en vez de dos tonos distintos. */
html[data-tema="claro"][data-tema="claro"] #print-view-overlay > .no-print:first-child,
html[data-tema="claro"][data-tema="claro"] #print-view-overlay > div:first-child{
  background-color:#04566A !important;
  background-image:linear-gradient(180deg, #04566A 0%, #046477 100%) !important;
  border-bottom:1px solid rgba(234,223,206,.16) !important; }
/* LAS LETRAS Y LOS ÍCONOS, EN BLANCO. Luis: «faltó las letras» —el título quedó en tinta
   sobre el teal—, y era por un pelo de especificidad: la regla del generado para ese título,
   `html[data-tema] #print-view-overlay > .no-print:first-child .font-bold:not([data-pz-foto])`,
   pesa (1 id, 5 clases, 0 elementos); la mía con `*` pesaba (1, 4, 1), y las clases se comparan
   antes que los elementos. Con el atributo puesto tres veces sube a (1, 6, 1) y gana sin tener
   que ir nombrando clase por clase lo que haya en la barra. */
html[data-tema="claro"][data-tema="claro"][data-tema="claro"] #print-view-overlay > .no-print:first-child,
html[data-tema="claro"][data-tema="claro"][data-tema="claro"] #print-view-overlay > .no-print:first-child *,
html[data-tema="claro"][data-tema="claro"][data-tema="claro"] #print-view-overlay > div:first-child,
html[data-tema="claro"][data-tema="claro"][data-tema="claro"] #print-view-overlay > div:first-child *{
  color:#FFFFFF !important; }
/* el botón de volver y el de imprimir, en vidrio sobre el teal */
html[data-tema="claro"][data-tema="claro"] #print-view-overlay > .no-print:first-child button:not([class*="bg-tnteal"]):not([class*="bg-teal"]),
html[data-tema="claro"][data-tema="claro"] #print-view-overlay > .no-print:first-child a:not([class*="bg-tnteal"]){
  background-color:rgba(13,23,32,.34) !important;
  border-color:rgba(234,223,206,.30) !important; }
/* el botón de descargar conserva su teal y el de imprimir su vidrio */
html[data-tema="claro"][data-tema="claro"] #print-view-overlay > div:first-child [class*="bg-tnteal"],
html[data-tema="claro"][data-tema="claro"] #print-view-overlay > div:first-child [class*="bg-teal"]{
  background-color:#006D82 !important; }

/* LOS DOS BOTONES DE LA BARRA, POR SU ID. Luis: «te faltó el botón imprimir, debe ser blanco
   también». Estos dos no los alcanzaba ninguna regla de arriba y no era por falta de fuerza
   bruta: el generado los nombra como `#print-view-overlay #pv-print-btn`, o sea DOS ids, y los
   ids se comparan antes que las clases —así que repetir el atributo del tema no servía de nada.
   Se les responde con los mismos dos ids. Imprimir queda en vidrio sobre el teal, igual que el
   de volver; descargar conserva su teal sólido, que es el botón principal. */
/* OJO CON EL `*`: el vidrio va SÓLO en el botón, nunca en sus hijos. Al principio esta regla
   les daba fondo a los dos —botón e hijos— y el ícono de la impresora arrastraba así su propio
   cuadro oscuro dentro del botón. Luis: «el ícono de la impresora en modo claro le queda ese
   cuadro que se ve mal». El color de letra sí baja a los hijos; el fondo y el filete no. */
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-print-btn{
  background-color:rgba(13,23,32,.34) !important;
  border-color:rgba(234,223,206,.30) !important; }
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-print-btn,
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-print-btn *{
  color:#FFFFFF !important;
  background-color:transparent !important;
  background-image:none !important; }
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-print-btn{
  background-color:rgba(13,23,32,.34) !important; }
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-print-btn:hover,
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-print-btn:hover *{
  background-color:rgba(13,23,32,.48) !important; color:#FFFFFF !important; }
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-pdf-btn{
  background-color:#006D82 !important;
  border-color:#006D82 !important; }
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-pdf-btn *{
  color:#FFFFFF !important;
  background-color:transparent !important;
  background-image:none !important; }
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-pdf-btn{ color:#FFFFFF !important; }

/* LAS VARIABLES DE LA APP, EN OSCURO DENTRO DE LA FOTOGRAFÍA. Luis, en móvil: «el color de la
   letra del usuario en modo claro no se ve como debe» y «el borde del usuario en este menú en
   modo móvil también cambia».
   Era un agujero en la protección, y de los buenos: el marcado `data-pz-foto` impide que entren
   las reglas del tema, pero NO impide que entren sus VARIABLES. El tema claro redefine
   `--g-crema`, `--g-filete` y compañía en el `:root` —con un `:not([data-pz-foto])` que ahí no
   sirve de nada, porque el que lleva el atributo es la rama, no el `html`— y las variables
   heredan hasta el último nieto. Así, una regla del tema OSCURO que dice `color:var(--g-crema)`
   —como `#display-user-name`— seguía gobernando, pero la variable ya valía tinta.
   Se devuelven a sus valores oscuros en la rama de la fotografía, y con eso queda curado de una
   vez todo lo que las use ahí: el nombre, el filete de la píldora, los rótulos. En escritorio no
   se notaba porque las excepciones escritas a mano tapaban justo esos dos elementos; la píldora
   flotante del móvil los dejaba a la vista. */
html[data-tema="claro"] [data-pz-foto]{
  --g-tinta:#1A2633;
  --g-hondo:#141D27;
  --g-hoja:#222E3A;
  --g-salvia:#7D9B5B;
  --g-crema:#EADFCE;
  --g-crema70:rgba(234,223,206,.70);
  --g-filete:rgba(234,223,206,.16);
  --g-filete-s:rgba(234,223,206,.09);
  --g-sombra:0 30px 70px -18px rgba(26,38,51,.62); }

/* EL BOTÓN DEL TEMA NO SE RAYA CON LA UNIÓN. Luis: «si es muy, muy pequeño, se ve cómo el
   botón de cambiar se raya con la unión, cuando no debería».
   Medido en móvil: la banda de fotografía del riel corta a 176px y el botón iba de 145 a 178,
   o sea la línea donde la foto se vuelve teal le pasaba por la base. Dos píxeles, pero en un
   círculo se ven como un filo.
   En el teléfono la cabecera del riel aprieta más que en escritorio —el mismo contenido en un
   panel de 288px—, así que el botón se le sale por abajo. Se le recorta el aire de arriba sólo
   ahí: queda dentro de la fotografía con seis píxeles de sobra, y en escritorio no se mueve
   nada, que es donde ya estaba aprobado. */
@media (max-width:767px){
  .pz-accesos{ margin-top:.35rem !important; }
  /* Y el botón baja de 34 a 28px, que deja ocho píxeles de aire en vez de dos. Se achica él,
     que es pieza propia del tema, y NO el `padding-top` de la cabecera: esos 16,8px son la
     medida de CIMA que Luis pidió milimétrica entre las tres apps, y moverla en el teléfono
     sería desalinear justo lo que se acaba de alinear. */
  .pz-accesos .pz-tema-btn{ width:28px !important; height:28px !important; }
  .pz-accesos .pz-tema-btn .material-icons-outlined,
  .pz-accesos .pz-tema-btn svg,
  .pz-accesos .pz-tema-btn i{ font-size:15px !important; width:15px !important; height:15px !important; }
}

/* EL BOTÓN QUE REABRE EL PANEL DE FILTROS, TAMBIÉN DEL MARCO. Cuando el panel se pliega queda
   flotando este botón, y el generado lo dejaba en crema con letra tinta: coherente cuando el
   panel era claro, fuera de tono ahora que el marco entero es una pieza de teal. Se pinta con
   el mismo teal del panel, que es de lo que es la manija. */
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-panel-reopen-btn,
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-panel-reopen-btn *{
  background-color:#046477 !important;
  color:#FFFFFF !important;
  border-color:rgba(234,223,206,.22) !important; }
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-panel-reopen-btn:hover,
html[data-tema="claro"][data-tema="claro"] #print-view-overlay #pv-panel-reopen-btn:hover *{
  background-color:#04566A !important; color:#FFFFFF !important; }