/* =========================================================================
   LA PIEL DE CRISTAL
   -------------------------------------------------------------------------
   Reviste la aplicación de siempre. No la reescribe: app.html y esta página
   cargan EXACTAMENTE el mismo app.js y los mismos catorce módulos, y lo único
   que cambia entre una y otra es esta hoja.

   Por eso va la ÚLTIMA de todas: a igualdad de especificidad gana la hoja más
   tardía, así que puede revestir sin tocar una sola regla de style.css ni de
   cristal.css. Si un día esto sobra, se borra la línea que la carga y la app
   vuelve a su aspecto de siempre. Ni un archivo más que limpiar.

   Todo cuelga de .piel-cristal, en el <body>. Sin esa clase, nada de aquí
   aplica — que es lo que permite que las dos páginas convivan.
   ========================================================================= */


/* =========================================================================
   LOS DOS TEMAS
   -------------------------------------------------------------------------
   La piel SIGUE al tema, no lo impone. Antes estaba escrita solo en oscuro y
   con !important, asi que en claro peleaba con style.css y ganaba: el fondo
   salia gris aunque el consultor hubiera elegido claro.

   Las condiciones son EXACTAMENTE las que usa style.css. Si dos hojas deciden
   el mismo tema con condiciones distintas, hay combinaciones en las que
   discrepan y la pantalla sale a medias — ya paso.
   ========================================================================= */
.piel-cristal{
  /* CLARO: blanco de verdad, no gris. */
  --pc-lienzo:#FFFFFF;
  --pc-velo:
    radial-gradient(1100px 660px at 80% -14%, rgba(47,132,240,.07) 0%, transparent 58%),
    radial-gradient(860px 600px at 4% 108%, rgba(47,132,240,.05) 0%, transparent 62%);
  /* -----------------------------------------------------------------------
     LA SOMBRA GRIS DE LA DIAGONAL
     -----------------------------------------------------------------------
     23-sep-2026. Daniel, por tercera vez: "hace una sombra gris cuando
     recargas o cuando entras a la app, eso sigue aun".

     Las dos veces anteriores apague otras dos manchas --los tres orbes de la
     maqueta y los velos del lienzo-- y segui sin mirar ESTA, que es la que
     de verdad se ve. Era:

         linear-gradient(135deg, rgba(255,255,255,.96) 0%,
                                 rgba(250,252,255,.92) 50%,
                                 rgba(246,249,254,.94) 100%)

     Un degradado DIAGONAL de blanco a #F6F9FE sobre toda la pantalla. Eso
     deja media pantalla blanca, media pantalla gris azulada y una costura en
     diagonal justo en medio: la "raya divisora" que Daniel describio desde el
     principio. Y como las tres paradas son semitransparentes y el elemento
     lleva backdrop-filter, el gris se mueve mientras la pagina carga --de ahi
     que solo lo viera al recargar y al entrar.

     El cristal esmerilado esta pensado para el lienzo OSCURO de la maqueta,
     donde un velo asi es lo que le da profundidad. Sobre papel blanco no
     aporta nada y ensucia. En claro va plano y opaco. En oscuro se queda tal
     cual estaba. */
  --pc-consola:#FFFFFF;
  --pc-borde:rgba(19,66,132,.14);
  --pc-tarjeta:linear-gradient(135deg,#FFFFFF 0%,#FCFDFF 100%);
  --pc-tarjeta-borde:rgba(19,66,132,.12);
  --pc-menu:linear-gradient(180deg,#FFFFFF 0%,#F7FAFF 100%);
  --pc-menu-borde:rgba(19,66,132,.12);
  --pc-txt:#12203A;
  --pc-txt2:#54627C;
  --pc-campo:#F6F9FE;
  --pc-opcion:#FFFFFF;
  --pc-campo-borde:rgba(19,66,132,.16);
  --pc-raya:rgba(19,66,132,.09);
  --pc-realce:rgba(47,132,240,.10);
  --pc-sombra:0 20px 50px rgba(19,66,132,.12);
}

:root[data-tema="oscuro"] .piel-cristal{
  --pc-lienzo:#07101F;
  --pc-velo:
    radial-gradient(900px 520px at 42% -16%, rgba(47,132,240,.26) 0%, transparent 58%),
    radial-gradient(760px 620px at 82% 6%, rgba(28,99,190,.20) 0%, transparent 62%),
    radial-gradient(1000px 700px at 4% 104%, rgba(19,66,132,.24) 0%, transparent 64%);
  /* -----------------------------------------------------------------------
     EL FONDO DE CAJA, EN AZUL Y NO EN NEGRO
     -----------------------------------------------------------------------
     23-sep-2026. Daniel, por segunda vez: "sigo con esos contenedores
     negros". Y tenia razon otra vez.

     El arreglo anterior fue una LISTA: se vistieron .card, .note, .stat, .tw,
     .bar y una docena mas. Se arreglaron esas, y a la vuelta de la esquina
     aparecieron las que no estaban en la lista. Medido pantalla por pantalla:

         Que hago hoy      .tarea (x4)   #141A26
         Clientes          .buscador     #141A26
         Caja Negra        los LI        #141A26
         Certificacion     los LI        #141A26
         Plan y consumo    el boton on   #141A26
         Tu marca          una caja      #0B1220

     Todas el mismo color, y ese color tiene nombre: es --bg, el fondo de caja
     de la hoja base. Lo usan SETENTA Y OCHO sitios. Seguir apuntando nombres
     en una lista garantiza que manana falte el setenta y nueve.

     Asi que se cambia el token, no la lista. Aqui dentro, "fondo de caja" es
     un azul marino de la misma familia que el lienzo, no un gris casi negro.
     Las setenta y ocho quedan bien de una vez, y las que se escriban manana
     nacen bien sin que nadie tenga que acordarse de nada.

     EL INFORME NO SE ENTERA, y no por suerte: .rep declara su propia paleta
     --bg:#FFFFFF sobre SI MISMO. Una propiedad declarada en el propio
     elemento gana siempre a la heredada del ancestro, sin que la
     especificidad ni el orden de los archivos pinten nada. El papel sigue
     siendo papel. */
  --bg:#16294A; --bg-2:#101F3A; --bg-3:#1E3866;
  --pc-consola:linear-gradient(152deg,#0C1F3A 0%,#0A172C 42%,#060F1E 100%);
  --pc-borde:rgba(143,192,250,.20);
  --pc-tarjeta:linear-gradient(135deg,rgba(47,132,240,.12) 0%,rgba(15,31,58,.70) 50%,rgba(10,22,44,.86) 100%);
  --pc-tarjeta-borde:rgba(143,192,250,.17);
  --pc-menu:linear-gradient(160deg,rgba(47,132,240,.12) 0%,rgba(11,26,50,.86) 45%,rgba(6,16,32,.96) 100%);
  --pc-menu-borde:rgba(143,192,250,.14);
  --pc-txt:#F2F5FB;
  --pc-txt2:#E4EDFB;
  --pc-campo:rgba(47,132,240,.07);
  --pc-opcion:#14233D;
  --pc-campo-borde:rgba(143,192,250,.18);
  --pc-raya:rgba(143,192,250,.10);
  --pc-realce:rgba(47,132,240,.09);
  --pc-sombra:0 24px 60px rgba(0,0,0,.50);
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .piel-cristal{
    --pc-lienzo:#07101F;
    --pc-velo:
    radial-gradient(900px 520px at 42% -16%, rgba(47,132,240,.26) 0%, transparent 58%),
    radial-gradient(760px 620px at 82% 6%, rgba(28,99,190,.20) 0%, transparent 62%),
    radial-gradient(1000px 700px at 4% 104%, rgba(19,66,132,.24) 0%, transparent 64%);
    /* -----------------------------------------------------------------------
         EL FONDO DE CAJA, EN AZUL Y NO EN NEGRO
         -----------------------------------------------------------------------
         23-sep-2026. Daniel, por segunda vez: "sigo con esos contenedores
         negros". Y tenia razon otra vez.

         El arreglo anterior fue una LISTA: se vistieron .card, .note, .stat, .tw,
         .bar y una docena mas. Se arreglaron esas, y a la vuelta de la esquina
         aparecieron las que no estaban en la lista. Medido pantalla por pantalla:

             Que hago hoy      .tarea (x4)   #141A26
             Clientes          .buscador     #141A26
             Caja Negra        los LI        #141A26
             Certificacion     los LI        #141A26
             Plan y consumo    el boton on   #141A26
             Tu marca          una caja      #0B1220

         Todas el mismo color, y ese color tiene nombre: es --bg, el fondo de caja
         de la hoja base. Lo usan SETENTA Y OCHO sitios. Seguir apuntando nombres
         en una lista garantiza que manana falte el setenta y nueve.

         Asi que se cambia el token, no la lista. Aqui dentro, "fondo de caja" es
         un azul marino de la misma familia que el lienzo, no un gris casi negro.
         Las setenta y ocho quedan bien de una vez, y las que se escriban manana
         nacen bien sin que nadie tenga que acordarse de nada.

         EL INFORME NO SE ENTERA, y no por suerte: .rep declara su propia paleta
         --bg:#FFFFFF sobre SI MISMO. Una propiedad declarada en el propio
         elemento gana siempre a la heredada del ancestro, sin que la
         especificidad ni el orden de los archivos pinten nada. El papel sigue
         siendo papel. */
    --bg:#16294A; --bg-2:#101F3A; --bg-3:#1E3866;
    --pc-consola:linear-gradient(152deg,#0C1F3A 0%,#0A172C 42%,#060F1E 100%);
    --pc-borde:rgba(143,192,250,.20);
    --pc-tarjeta:linear-gradient(135deg,rgba(47,132,240,.12) 0%,rgba(15,31,58,.70) 50%,rgba(10,22,44,.86) 100%);
    --pc-tarjeta-borde:rgba(143,192,250,.17);
    --pc-menu:linear-gradient(160deg,rgba(47,132,240,.12) 0%,rgba(11,26,50,.86) 45%,rgba(6,16,32,.96) 100%);
    --pc-menu-borde:rgba(143,192,250,.14);
    --pc-txt:#F2F5FB;
    --pc-txt2:#E4EDFB;
    --pc-campo:rgba(47,132,240,.07);
    --pc-opcion:#14233D;
    --pc-campo-borde:rgba(143,192,250,.18);
    --pc-raya:rgba(143,192,250,.10);
    --pc-realce:rgba(47,132,240,.09);
    --pc-sombra:0 24px 60px rgba(0,0,0,.50);
  }
}

/* ---------- El lienzo ---------- */
.piel-cristal{
  margin:0;
  background:var(--pc-velo), var(--pc-lienzo) !important;
  color:var(--pc-txt);
  overflow:hidden;
}
/* La reja y los orbes de la app de siempre se apagan: aquí el fondo lo pone
   la consola y dos capas de ruido compitiendo se ven sucias. */
.piel-cristal .bg-grid,
.piel-cristal .bg-orb{display:none !important}

/* ---------- La consola ----------
   El marco de cristal que envuelve la app entera. .gd-glass-console viene del
   CSS de la referencia; aquí solo se le dice qué tiene que contener. */
.piel-cristal .gd-glass-console{
  padding:0;
  background:var(--pc-consola) !important;
  border-color:var(--pc-borde) !important;
  box-shadow:var(--pc-sombra) !important;
}
/* El backdrop-filter de la maqueta (blur 40px + saturate 200% + brightness
   1.06) toma lo que hay DETRAS y lo reprocesa en cada fotograma. Sobre el
   lienzo blanco no hay nada detras que desenfocar: lo unico que hacia era
   teñir de gris mientras la pagina se pintaba, y cobrarse el trabajo de
   recalcular un desenfoque de toda la pantalla en cada cuadro. Fuera en
   claro; en oscuro es donde tiene sentido y se queda. */
.piel-cristal .gd-glass-console{
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
}
/* Y lo mismo con el riel y el lienzo de trabajo, que heredan el desenfoque de
   cristal.css (--cr-desenfoque, blur 24px). Van encima de una consola ya
   OPACA: no hay nada detras que desenfocar, solo el coste de recalcular un
   desenfoque del tamaño de la pantalla en cada fotograma, y el mismo riesgo
   de pintar gris en el primer cuadro. Aqui se apagan los tres de una vez: si
   manana alguien mete otra capa con desenfoque encima de la consola, esta es
   la linea que hay que ampliar. */
.piel-cristal :is(main,.side,.app){
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
}
/* -------------------------------------------------------------------------
   LA PANTALLA GRIS DE LA CARGA, LA OTRA MITAD
   -------------------------------------------------------------------------
   23-sep-2026. Daniel, cuarta vez: "cuando actualizas sale esa pantalla y
   mientras carga para entrar sale esa pantalla gris... tambien pasa cuando
   cierras sesion". Con el video delante se ve: medio blanco, medio gris
   pizarra, con una costura en diagonal.

   Esta tarde apague esto MISMO en tema claro y lo di por cerrado. Error mio:
   el tema oscuro tenia el mismo fallo escrito al lado y no lo toque. Es justo
   la regla que Daniel acaba de pedir --un arreglo es para toda la app, no
   para el caso que se estaba mirando--.

   Que pasaba, exactamente:

     · El fondo de la consola eran tres paradas SEMITRANSPARENTES (.13, .74,
       .90) pensadas para dejar ver el lienzo azul de detras.
     · Encima, un backdrop-filter que reprocesa lo que hay detras.

   En el primer fotograma lo de detras todavia no esta rasterizado, asi que el
   navegador compone contra BLANCO: azul marino al 74% sobre blanco es gris
   pizarra, y el degradado a 152 grados pone la diagonal. Eso es exactamente
   lo del video. Cuando el lienzo acaba de pintarse se corrige solo, y por eso
   solo se ve al recargar, al entrar y al salir.

   Las dos cosas se quitan: el degradado pasa a OPACO --los mismos colores,
   ya compuestos sobre el lienzo-- y el desenfoque se va. Asi no hay ningun
   fotograma en el que el color dependa de lo que haya debajo.

   Lo que se pierde: el lienzo ya no se transparenta a traves de la consola.
   No se nota --la consola ocupa la pantalla entera-- y a cambio la app pinta
   antes, porque un desenfoque de pantalla completa se recalcula en cada
   cuadro y no era gratis. */
/* NO se toca el display: .app es un grid con `var(--riel-ancho) 1fr` y
   forzarlo a flex le quita a la columna su ancho declarado. Solo se le dice
   que llene la consola. */
.piel-cristal #app{
  width:100%;height:100%;min-height:0;
  background:transparent;
  /* EL MARGEN SE QUITA. #app lleva margin:16px de la app de siempre — alli
     tiene sentido, porque la pagina entera hace scroll y ese es el aire del
     cuerpo. Aqui, dentro de una consola a pantalla completa, empujaba el riel
     16px abajo y a la derecha y el logo quedaba mordido por arriba. Se veia
     como un recorte y era un margen. */
  margin:0 !important;
}
/* El riel curvo ocupa 64px por dentro, asi que la columna necesita esos 64
   de mas para que el menu conserve el sitio que tenia. */
.piel-cristal{--riel-ancho:316px}

/* CADA COLUMNA CON SU PROPIO SCROLL.

   En app.html la pagina entera se desplaza y no hay limite de alto. Aqui la
   consola SI lo tiene y recorta lo que sobra, asi que sin esto el contenido
   se quedaba fuera y sin forma de alcanzarlo: 2.328px de panel dentro de 834
   visibles, y ninguna barra.

   min-height:0 no es decorativo: sin el, un hijo de flex se niega a encogerse
   por debajo de su contenido y se sale del marco igual aunque tenga overflow. */
.piel-cristal #view{
  min-height:0;height:100%;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;
}
.piel-cristal .side{
  min-height:0;height:100%;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;
}
.piel-cristal #view::-webkit-scrollbar,
.piel-cristal .side::-webkit-scrollbar{width:6px}
.piel-cristal #view::-webkit-scrollbar-thumb,
.piel-cristal .side::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);border-radius:6px;
}
.piel-cristal #app.hidden{display:none}

/* ---------- EL RIEL Y EL MENU ----------
   ESTA ES LA MAQUETA QUE DANIEL FIJO EL 22-SEP: "quiero exactamente esto,
   nunca lo cambien".

     · A la izquierda, el riel CURVO de la referencia, estrecho y solo con
       iconos, en el azul de Financore.
     · A su derecha, la columna del menu en VIDRIO OSCURO —no azul— con las
       trece entradas y sus etiquetas.
     · El activo en dorado.

   Antes el menu iba dentro del riel azul y el activo en blanco. Si alguna vez
   vuelve a verse asi, es que se toco esto. */

/* El dock curvo. Se dibuja como una capa DETRAS de la columna, no como un
   elemento aparte: asi no hay que tocar el HTML que genera app.js. */
.piel-cristal .side{
  position:relative;
  background:var(--pc-menu) !important;
  border:0 !important;
  border-right:1px solid var(--pc-menu-borde) !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding-left:64px !important;           /* el hueco del riel curvo */
}
.piel-cristal .side::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:58px;z-index:0;
  background:linear-gradient(152deg,#2F84F0 0%,#1C63BE 34%,#134284 68%,#0E2F60 100%);
  clip-path:url(#rielCurvo);
  box-shadow:10px 0 30px rgba(3,10,28,.40);
}
/* El hilo claro que perfila la curva. */
.piel-cristal .side::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:58px;z-index:1;
  pointer-events:none;clip-path:url(#rielCurvo);
  background:linear-gradient(180deg,
    rgba(255,255,255,.55) 0%, rgba(143,192,250,.35) 34%,
    rgba(255,255,255,.18) 70%, rgba(143,192,250,.40) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  padding:1px;
}
.piel-cristal .side > *{position:relative;z-index:2}

.piel-cristal .side-logo .t{color:var(--pc-txt)}
/* La columna del menu es blanca en los dos temas, asi que esto no puede
   seguir al token de texto secundario: ese es claro, para el lienzo oscuro. */
.piel-cristal .side-logo .s{color:#1C63BE}

/* ---------- El menu ---------- */
.piel-cristal #nav a,
.piel-cristal #nav button{
  color:var(--pc-txt2) !important;
  border-radius:10px;
}
.piel-cristal #nav a:hover,
.piel-cristal #nav button:hover{
  background:var(--pc-realce) !important;color:var(--pc-txt) !important;
}
/* El activo, en DORADO. Antes iba en blanco y se leia como un hueco. */
.piel-cristal #nav .on,
.piel-cristal #nav [aria-current="page"]{
  background:linear-gradient(135deg,rgba(143,192,250,.20),rgba(143,192,250,.08)) !important;
  color:#8FC0FA !important;
  box-shadow:inset 0 0 0 1px rgba(143,192,250,.34) !important;
}
.piel-cristal #nav .on svg,
.piel-cristal #nav [aria-current="page"] svg{color:#8FC0FA !important}

/* En movil el riel se abre como cajon y la curva no tiene sentido. */
@media(max-width:820px){
  .piel-cristal .side{padding-left:14px !important}
  .piel-cristal .side::before,
  .piel-cristal .side::after{display:none}
}

/* ---------- El lienzo de trabajo ---------- */
.piel-cristal #view{
  background:transparent !important;
  padding:22px 26px;
  color:var(--pc-txt);
}

/* ---------- Las tarjetas ----------
   El vidrio de la referencia, con los mismos fondos y bordes. */
.piel-cristal .card,
.piel-cristal .tarjeta,
.piel-cristal .box,
.piel-cristal .note{
  background:var(--pc-tarjeta) !important;
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--pc-tarjeta-borde) !important;
  border-radius:16px !important;
  color:var(--pc-txt);
}
.piel-cristal .card.flat{background:var(--pc-realce) !important}

/* ---------- Y TODO LO DEMAS QUE TAMBIEN ES UNA CAJA ----------
   23-sep-2026. Daniel: "estos contenedores negros, quitarlos, no quedan bien
   en el diseño; quitarlos de todas las paginas, poner otro color u otro
   estilo, o seguir con el mismo del tema del azul oscuro con blanco".

   Tenia razon y era a medias culpa de esta hoja. Aqui arriba solo se vistieron
   .card, .tarjeta, .box y .note. Todo lo demas se quedaba con el fondo plano
   de la hoja base --#141A26 y #101A2A, casi negro-- encima del lienzo azul de
   la consola. Medido en la pantalla del expediente:

       .note        rgba(47,132,240,.12) -> azul    (vestida)
       .card        rgba(47,132,240,.12) -> azul    (vestida)
       .nota-nueva  #141A26              -> NEGRA
       .bit-i       #141A26              -> NEGRA
       .bar         #101A2A              -> NEGRA

   Cajas negras sobre un fondo azul, al lado de cajas azules. No era una
   decision de diseño: era una lista incompleta.

   Se listan TODAS de una vez, y en dos grupos, que es la jerarquia que ya
   tenia la pantalla:

     · Las que llevan contenido propio van con el vidrio de tarjeta.
     · Las de apoyo --la barra de abajo, las pestañas, el marco de escribir--
       van con el realce, un azul mas tenue, para que no compitan.

   Los CAMPOS (input, select, textarea) no entran: un campo es un hueco donde
   se escribe, no una caja, y ya tiene su color propio en --pc-campo.

   Y el .tw del INFORME tampoco: alli manda el papel, que gana desde el bloque
   del final con mas especificidad. */
.piel-cristal :is(.stat,.tool,.plan,.mplan,.find,.tw,.tope-res,.modal-box,
                  .nota-nueva,.bit-i,.ag-ev,.cf,.empty,.emb-col){
  background:var(--pc-tarjeta) !important;
  border:1px solid var(--pc-tarjeta-borde) !important;
  border-radius:14px !important;
  color:var(--pc-txt);
  /* SIN backdrop-filter, y es a proposito. La consola que las envuelve ya
     lleva uno; anidar otro encima vuelve a procesar lo de detras y aclara lo
     que va DENTRO. Se vio al momento: el marco de escribir la nota salio como
     un bloque gris palido en mitad del azul. El degradado translucido solo ya
     da el vidrio, y sale gratis. */
}
/* Las de apoyo: el mismo azul, un tono por debajo, para que la caja de
   contenido siga siendo la que manda. */
.piel-cristal :is(.bar,.tabs,.chk-der){
  background:var(--pc-realce) !important;
  border-color:var(--pc-tarjeta-borde) !important;
  color:var(--pc-txt);
}
/* La bitacora lleva su raya lateral azul, que es lo que distingue una nota de
   una tarjeta cualquiera. No se pierde al vestirla. */
.piel-cristal .bit-i{border-left:3px solid rgba(90,155,239,.85) !important}

/* El texto, sobre vidrio oscuro. */
/* SOLO EN OSCURO.

   Estas eran reglas generales que valian para los dos temas, y pisaban el
   texto blanco de los paneles azules —"Obtener el reporte", "Certificacion"—
   pintandolo de gris oscuro sobre azul. Invisible.

   En claro no hacen falta: style.css ya pone texto oscuro sobre tarjeta
   blanca. Solo hacen falta en oscuro, que es cuando las tarjetas cambian.

   Y aun ahi se excluyen los paneles azules: su texto es blanco por diseno en
   los dos temas, porque su fondo es azul en los dos. */
:root[data-tema="oscuro"] .piel-cristal,
:root[data-tema="oscuro"] .piel-cristal :is(h1,h2,h3,h4):not(.rec-t *):not(.fc-destacado *),
:root[data-tema="oscuro"] .piel-cristal :is(.card b, td b):not(.rec *):not(.vent *){color:var(--pc-txt)}
:root[data-tema="oscuro"] .piel-cristal :is(.sub, p):not(.rec-t *):not(.vent *):not(.fc-destacado *){color:var(--pc-txt2)}

@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .piel-cristal,
  :root:not([data-tema="claro"]) .piel-cristal :is(h1,h2,h3,h4):not(.rec-t *):not(.fc-destacado *),
  :root:not([data-tema="claro"]) .piel-cristal :is(.card b, td b):not(.rec *):not(.vent *){color:var(--pc-txt)}
  :root:not([data-tema="claro"]) .piel-cristal :is(.sub, p):not(.rec-t *):not(.vent *):not(.fc-destacado *){color:var(--pc-txt2)}
}

/* El texto sobre los paneles azules, blanco en los DOS temas: el fondo es
   azul en los dos, asi que el color del texto no depende del tema. */
.piel-cristal .rec-t h3,
.piel-cristal .fc-destacado h2,
.piel-cristal .rec-t p b,
.piel-cristal .vent-t{color:#fff !important}
.piel-cristal .rec-t p,
.piel-cristal .fc-destacado p{color:#E8EFFA !important}
.piel-cristal .vent p{color:#E8EFFA !important}
.piel-cristal .rec-et,
.piel-cristal .fc-et-oro,
.piel-cristal .vent-n{color:#CFE4FF !important}

/* ---------- Tablas ---------- */
.piel-cristal table th{
  color:var(--pc-txt2) !important;
  border-bottom-color:var(--pc-raya) !important;
}
.piel-cristal table td{border-bottom-color:var(--pc-raya) !important}
.piel-cristal tbody tr:hover{background:var(--pc-realce) !important}

/* ---------- Campos ---------- */
.piel-cristal input,
.piel-cristal select,
.piel-cristal textarea{
  background:var(--pc-campo) !important;
  border:1px solid var(--pc-campo-borde) !important;
  color:var(--pc-txt) !important;border-radius:12px !important;
}
/* La lista que se despliega del <select> (29-sep-2026, Daniel: "en que
   monitor es no se ve en el color oscuro"). El campo es transparente, asi
   que la lista la pinta el sistema en claro y las opciones heredaban el
   texto blanco: blanco sobre blanco. Las opciones llevan su propio fondo. */
.piel-cristal select option,
.piel-cristal select optgroup{
  background:var(--pc-opcion) !important;
  color:var(--pc-txt) !important;
}
.piel-cristal input::placeholder,
.piel-cristal textarea::placeholder{color:var(--pc-txt2) !important;opacity:.75}
.piel-cristal input:focus,
.piel-cristal select:focus,
.piel-cristal textarea:focus{
  border-color:rgba(143,192,250,.55) !important;
  box-shadow:0 0 0 3px rgba(143,192,250,.13) !important;
}
/* Chrome pinta el relleno automático de blanco con el texto en negro. La
   única forma que respeta es una sombra interior del tamaño del campo. */
.piel-cristal input:-webkit-autofill,
.piel-cristal input:-webkit-autofill:hover,
.piel-cristal input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff !important;
  -webkit-box-shadow:0 0 0 1000px #17171F inset !important;
  transition:background-color 9999s ease-out;
}

/* ---------- Botones ---------- */
.piel-cristal .btn-ghost{
  background:var(--pc-realce) !important;
  border-color:var(--pc-campo-borde) !important;
  color:var(--pc-txt) !important;
}
.piel-cristal .btn-ghost:hover{background:rgba(255,255,255,.16) !important}

/* ---------- El embudo ---------- */
.piel-cristal .emb-col{
  background:var(--pc-realce) !important;
  border:1px solid var(--pc-tarjeta-borde) !important;
  border-radius:14px !important;
}
.piel-cristal .emb-card{
  background:var(--pc-tarjeta) !important;
  border:1px solid var(--pc-tarjeta-borde) !important;
  color:var(--pc-txt) !important;
}
.piel-cristal .emb-card:hover{border-color:rgba(143,192,250,.35) !important}
.piel-cristal .emb-q{color:var(--pc-txt2) !important}

/* ---------- La ventana ---------- */
.piel-cristal .modal-box{
  background:linear-gradient(135deg,rgba(255,255,255,.07) 0%,rgba(20,20,28,.88) 45%,rgba(10,10,14,.94) 100%) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:20px !important;
  -webkit-backdrop-filter:blur(30px) saturate(150%);
  backdrop-filter:blur(30px) saturate(150%);
}

/* ---------- Móvil ----------
   La consola se queda sin marco: en 375px de ancho, 48px de padding por lado
   son una cuarta parte de la pantalla gastada en aire. */
@media(max-width:820px){
  .piel-cristal .glassy-dashboard-container{padding:0}
  .piel-cristal .gd-glass-console{border-radius:0;max-height:100dvh;border:0}
  .piel-cristal .side{border-radius:0}
  .piel-cristal #view{padding:16px 14px}
}

/* =========================================================================
   LOS BOTONES DEL RIEL CURVO
   -------------------------------------------------------------------------
   El riel era un dibujo: una franja azul bonita y muerta. Ahora lleva siete
   atajos a lo que se usa todos los días y al pulsarlos despliega la sección
   en la columna de al lado.

   Siete y no trece porque el riel mide 58px: trece iconos ahí son una lista
   de trece cosas indistinguibles, y para eso ya está la columna de al lado,
   que además lleva los nombres escritos.
   ========================================================================= */
.piel-cristal .fc-dock{
  position:absolute;left:0;top:0;bottom:0;width:58px;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:16px 0;
  pointer-events:none;                 /* la franja no, los botones sí */
}
.piel-cristal .fc-dock button{
  pointer-events:auto;
  width:36px;height:36px;flex-shrink:0;
  display:grid;place-items:center;
  border:0;border-radius:11px;cursor:pointer;
  background:transparent;color:#CBDCF5;
  transition:background .16s,color .16s,transform .16s;
}
.piel-cristal .fc-dock button:hover{
  background:rgba(255,255,255,.16);color:#fff;transform:translateY(-1px);
}
.piel-cristal .fc-dock button:focus-visible{
  outline:2px solid #fff;outline-offset:2px;
}
/* El encendido, en blanco sobre el azul: es el contraste más alto que hay
   sobre esa franja, y no necesita un tercer color. */
.piel-cristal .fc-dock button.on{
  background:#fff;color:#1C63BE;
  box-shadow:0 4px 14px rgba(3,10,28,.34);
}

/* =========================================================================
   SOLO AZUL. FUERA EL DORADO.
   -------------------------------------------------------------------------
   Decisión de Daniel el 22-sep: la paleta es azul sobre blanco, y en tema
   oscuro al revés. El dorado se retira de los acentos de esta piel.

   Se retira aquí y no en style.css: la app de siempre sigue con su oro, y
   esta hoja solo manda dentro de .piel-cristal.
   ========================================================================= */
.piel-cristal #nav .on,
.piel-cristal #nav [aria-current="page"]{
  background:linear-gradient(135deg,rgba(47,132,240,.26),rgba(47,132,240,.10)) !important;
  color:#8FC0FA !important;
  box-shadow:inset 0 0 0 1px rgba(47,132,240,.44) !important;
}
.piel-cristal #nav .on svg,
.piel-cristal #nav [aria-current="page"] svg{color:#8FC0FA !important}

/* Los botones de acción. El azul de marca con el mismo cuerpo que tenían. */
.piel-cristal .btn-gold,
.piel-cristal .btn-primary,
.piel-cristal .btn.btn-gold{
  background:linear-gradient(180deg,#1976D2 0%,#1565C0 100%) !important;
  color:#fff !important;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,
             0 -3px 0 rgba(0,0,0,.16) inset,
             0 5px 0 #134284,
             0 12px 26px rgba(28,99,190,.34) !important;
}
.piel-cristal .btn-gold:active,
.piel-cristal .btn-primary:active{
  box-shadow:0 1px 0 #134284 !important;
}

/* Los focos de los campos, que iban en oro. */
.piel-cristal input:focus,
.piel-cristal select:focus,
.piel-cristal textarea:focus{
  border-color:rgba(47,132,240,.62) !important;
  box-shadow:0 0 0 3px rgba(47,132,240,.16) !important;
}

/* El hilo del borde del riel: sin la veta dorada. */
.piel-cristal .side::after{
  background:linear-gradient(180deg,
    rgba(255,255,255,.55) 0%, rgba(143,192,250,.45) 38%,
    rgba(255,255,255,.18) 70%, rgba(143,192,250,.40) 100%) !important;
}

/* Las tarjetas al pasar por encima y los bordes de acento. */
.piel-cristal .emb-card:hover{border-color:rgba(47,132,240,.48) !important}
.piel-cristal .note.gold,
.piel-cristal .nota.oro{
  background:rgba(47,132,240,.08) !important;
  border-color:rgba(47,132,240,.26) !important;
}

/* =========================================================================
   LA PUERTA, DENTRO DEL CONTENEDOR FLEX
   -------------------------------------------------------------------------
   #puerta es hijo de .glassy-dashboard-container, que es un flex que centra.
   Sin declarar que ocupa el sitio, se encogia a 42px y la consola a 2px: la
   puerta estaba en el DOM, medible y "visible", y no se veia nada.

   Mismo patron que ya paso con #pantalla. Un envoltorio entre un contenedor
   flex y su contenido tiene que decir que ocupa el sitio, o el flex se lo come.
   ========================================================================= */
.piel-cristal #puerta{flex:1 1 auto;width:100%;min-width:0;align-self:stretch}

/* =========================================================================
   A PANTALLA COMPLETA
   -------------------------------------------------------------------------
   La consola de la referencia se diseñó como una maqueta de escaparate: 48px
   de aire arriba, otro tanto a los lados y `max-height: calc(100vh - 60px)`.
   Para una captura de presentación está bien; para una herramienta de trabajo
   es tirar una franja de pantalla en cada lado y cortar el contenido abajo.

   Aquí el marco se queda —es lo que le da el aspecto— pero fino: el aire
   justo para que se vea que hay un marco, y ni un píxel más.
   ========================================================================= */
/* PAGINA ENTERA, SIN MARCO. Quedaba como una maqueta en una cajita: bordes
   redondeados, sombra alrededor y un hueco de pagina asomando por fuera. Y
   esa esquina redondeada era la que mordia el logo por arriba. */
.piel-cristal .glassy-dashboard-container{
  padding:0 !important;
  max-height:100dvh;
}
.piel-cristal .gd-glass-console{
  max-width:none !important;
  max-height:none !important;
  width:100% !important;
  height:100dvh !important;
  border-radius:0 !important;
  border:0 !important;
  box-shadow:none !important;
}

/* En pantalla pequeña el marco no aporta nada y sí quita sitio: fuera. */
@media(max-width:820px){
  .piel-cristal .glassy-dashboard-container{padding:0 !important}
  .piel-cristal .gd-glass-console{border-radius:0 !important;border:0 !important}
}

/* =========================================================================
   EL LOGO SIGUE AL TEMA
   -------------------------------------------------------------------------
   app.html usa siempre el icono BLANCO porque su riel es oscuro. Aquí, en
   tema claro, la columna del menú es blanca — y un icono blanco sobre blanco
   no es que se vea mal: no se ve.

   `content` sobre un <img> lo sustituye sin tocar el HTML, que es lo que
   permite que las dos páginas compartan el mismo app.js sin bifurcarlo.
   ========================================================================= */
/* LA MARCA DE LA WEB, no una reconstruccion parecida.

   index.html y guia.html usan financore-horizontal.png en claro y
   financore-blanco.png en oscuro. El riel llevaba el icono suelto mas el
   nombre escrito en HTML aparte: parecido, pero con otra proporcion, otro
   espaciado y el "App" en otro tono.

   Se sustituye la imagen y se esconde el texto que la duplicaba. Todo por
   CSS, sin tocar el HTML que genera app.js — que es lo que permite que las
   dos paginas compartan el mismo codigo. */
.piel-cristal .side-logo .logo-mark{
  width:auto !important;height:auto !important;
  background:none !important;box-shadow:none !important;
  border-radius:0 !important;padding:0 !important;
}
.piel-cristal .side-logo .logo-mark img,
.piel-cristal .mt-marca img{
  content:url('img/financore-horizontal.png');
  width:auto;height:30px;max-width:190px;object-fit:contain;
}
/* El logotipo dice "Financore"; la palabra "App" va detras, como en la web.

   Se apaga SOLO la palabra que duplica al logotipo. font-size:0 es lo unico
   que apaga un trozo de texto suelto sin tocar el HTML — y el HTML no se
   toca porque lo genera app.js, que comparten las dos paginas. */
.piel-cristal .side-logo .t{
  font-size:0 !important;
  margin-left:6px;
  line-height:1;
}
.piel-cristal .side-logo .t span{
  font-size:19px !important;
  font-weight:800;letter-spacing:-.02em;
  /* 23-sep-2026: habia CUATRO amarillos distintos para este mismo "App"
     repartidos por el archivo --#F5A524 aqui, #E8A020 mas abajo y #F5BC4A
     dos veces en el tema oscuro--. El logotipo es UNO. Ver el bloque del
     oro, mas abajo, para por que este y no otro. */
  color:#E8A020 !important;
}
/* "Credit Intelligence" se retira: la pieza de marca es logotipo + App. */
.piel-cristal .side-logo .s{display:none !important}
.piel-cristal .side-logo{align-items:center}

.piel-cristal .mt-marca span{font-size:0 !important}
.piel-cristal .mt-marca span b{font-size:15px !important;color:#F5A524 !important}

:root[data-tema="oscuro"] .piel-cristal .side-logo .logo-mark img,
:root[data-tema="oscuro"] .piel-cristal .mt-marca img{
  content:url('img/financore-blanco.png');
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .piel-cristal .side-logo .logo-mark img,
  :root:not([data-tema="claro"]) .piel-cristal .mt-marca img{
    content:url('img/financore-blanco.png');
  }
}

/* =========================================================================
   QUE NO SE CORTE ARRIBA
   -------------------------------------------------------------------------
   La consola recorta con border-radius y el logo quedaba mordido por la
   esquina. No es que falte sitio: es que el contenido empieza justo donde la
   curva del marco se mete hacia dentro.

   Se le da al riel el aire que la curva se come, en lugar de agrandar el
   marco — que es lo que devolvería el problema de la media pantalla.
   ========================================================================= */
.piel-cristal .side{padding-top:26px !important}
.piel-cristal .side-logo{margin-bottom:18px}

/* =========================================================================
   LO QUE SE VOLVIÓ INVISIBLE EN CLARO
   -------------------------------------------------------------------------
   Medido en el navegador, no a ojo: ocho elementos del riel por debajo de
   4,5:1, y TRES en 1,0 — los separadores "Operación", "Trabajo" y "Cuenta",
   que es blanco sobre blanco. Literalmente no estaban.

   La causa es la misma de siempre: son estilos escritos para un riel oscuro
   —blancos, o blancos a baja opacidad— que aquí caen sobre una columna
   blanca. El riel de app.html es azul y ahí se veían perfectos.

   Todos leen ahora los tokens del tema, así que valen en los dos.
   ========================================================================= */
.piel-cristal .nav-sep{color:var(--pc-txt2) !important;opacity:1}
.piel-cristal .whoami{color:var(--pc-txt2) !important}
.piel-cristal .whoami b{color:var(--pc-txt) !important}
.piel-cristal .whoami .version{color:var(--pc-txt2) !important;opacity:.85}

/* La tarjeta del usuario. Vidrio del tema, no un gris fijo. */
.piel-cristal .side-foot > div:first-child,
.piel-cristal .whoami{
  background:transparent !important;
}

/* Las iniciales y la etiqueta del plan: azul de marca sobre claro, blanco
   sobre oscuro. Antes eran blancas siempre, y en claro desaparecían. */
.piel-cristal .whoami .ini,
.piel-cristal .avatar,
.piel-cristal .ini{
  background:linear-gradient(145deg,#4B9BF5,#1C63BE) !important;
  color:#fff !important;
}
.piel-cristal .bdg,
.piel-cristal .plan-bdg,
.piel-cristal .whoami .bdg{
  background:rgba(47,132,240,.14) !important;
  /* 23-sep-2026, medido: #1C63BE sobre este velo azul daba 4,31:1 y la
     insignia es de 10-11px. #17529F sube a 5,62 sin cambiar de azul. */
  color:#17529F !important;
  border:1px solid rgba(47,132,240,.30) !important;
}
:root[data-tema="oscuro"] .piel-cristal .bdg,
:root[data-tema="oscuro"] .piel-cristal .plan-bdg{
  background:rgba(47,132,240,.20) !important;
  color:#8FC0FA !important;
}

/* El "App" del logotipo iba en oro y sobre blanco queda flojo.
   23-sep-2026: Daniel lo quiere en oro, y en oro se queda -- pero en el oro
   OSCURO, que sobre el riel blanco si se lee (ver el bloque del oro, mas
   abajo, con las dos mediciones). Este azul se queda solo para .mt-marca; si
   siguiera nombrando al "App" del riel, el dia que alguien mueva un bloque de
   sitio el logotipo se vuelve azul sin que nadie sepa por que. */
.piel-cristal .mt-marca b{color:#2F84F0 !important}

/* Los selectores de tema, que también eran claros sobre claro. */
.piel-cristal .tema-sel button{color:var(--pc-txt2) !important}
.piel-cristal .tema-sel button[aria-pressed="true"]{
  background:#2F84F0 !important;color:#fff !important;
}

/* =========================================================================
   LOS TRES QUE SÍ ESTABAN MAL
   -------------------------------------------------------------------------
   Con los nombres de clase reales, mirando el DOM en vez de adivinarlos.

   Dos de los que marcó la medición NO eran fallos y se dejan como están:
   `.vo` es texto solo para lectores de pantalla —invisible a propósito— y
   "Daniel Santa" ya iba en azul oscuro; el medidor leyó mal el fondo porque
   no sabe resolver degradados. Corregir eso habría sido romper algo que
   funcionaba.
   ========================================================================= */

/* 1. La etiqueta del plan: azul claro sobre blanco al 12% es casi blanco. */
.piel-cristal .wa-plan{
  background:rgba(47,132,240,.14) !important;
  color:#1C63BE !important;
  border:1px solid rgba(47,132,240,.28) !important;
}
:root[data-tema="oscuro"] .piel-cristal .wa-plan{
  background:rgba(47,132,240,.22) !important;
  color:#BBD9FC !important;
  border-color:rgba(143,192,250,.30) !important;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .piel-cristal .wa-plan{
    background:rgba(47,132,240,.22) !important;
    color:#BBD9FC !important;
    border-color:rgba(143,192,250,.30) !important;
  }
}

/* 2. La sección activa del menú: el azul claro se diseñó para fondo oscuro. */
.piel-cristal .nav-i.on .et,
.piel-cristal .nav-i.on{color:#1C63BE !important}
:root[data-tema="oscuro"] .piel-cristal .nav-i.on .et,
:root[data-tema="oscuro"] .piel-cristal .nav-i.on{color:#8FC0FA !important}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .piel-cristal .nav-i.on .et,
  :root:not([data-tema="claro"]) .piel-cristal .nav-i.on{color:#8FC0FA !important}
}

/* 3. Las iniciales: iban en degradado dorado, que es lo que se retiró. */
.piel-cristal .wa-ini{
  background:linear-gradient(145deg,#4B9BF5,#1C63BE) !important;
  color:#fff !important;
}

/* =========================================================================
   EL ÚLTIMO INVISIBLE
   -------------------------------------------------------------------------
   "Despacho Demo", debajo del nombre del usuario, iba en blanco al 60%. En
   app.html está sobre el riel azul y se lee perfecto; aquí, en tema claro, la
   columna es blanca y el texto simplemente no estaba.

   Lo encontró un barrido por las trece secciones en los dos temas. De los
   tres que marcó la primera medición, este era el único real: los otros dos
   —la sección activa del menú y las iniciales— salían mal porque el medidor
   promediaba las paradas de un degradado IGNORANDO su transparencia, y
   trataba un azul al 26% como azul sólido. Se comprobaron sus valores reales
   antes de tocarlos, y no había nada que tocar.
   ========================================================================= */
.piel-cristal .wa-txt i,
.piel-cristal .whoami i{
  color:var(--pc-txt2) !important;
  font-style:normal;
}

/* =========================================================================
   EL RIEL, PEGADO AL BORDE
   -------------------------------------------------------------------------
   cristal.css le pone al riel `top:17px` y `height:calc(100vh - 34px)`.
   Ahí es correcto: la app de siempre dibuja un marco alrededor y esos 17px
   son el aire entre el marco y el riel.

   Aquí no hay marco —la consola va a pantalla completa— así que esos valores
   empujaban el riel 17px hacia abajo y lo dejaban 34px corto. Eso es lo que
   se veía como "el logo cortado arriba": no estaba recortado, estaba
   desplazado, y el hueco de encima dejaba ver el fondo.

   Lo dije arreglado dos veces midiendo la cosa equivocada — primero el marco
   y luego el margen de #app, que también estorbaban, pero no eran esto.
   ========================================================================= */
.piel-cristal .side{
  top:0 !important;
  height:100% !important;
  border-radius:0 !important;
  border-right:1px solid var(--pc-menu-borde) !important;
}
.piel-cristal #view{border-radius:0 !important}

/* =========================================================================
   LA COLUMNA DEL MENÚ, BLANCA EN LOS DOS TEMAS
   -------------------------------------------------------------------------
   Prueba de contraste que pidió Daniel: en oscuro, la columna en blanco y el
   riel curvo azul intacto.

   Si la columna es blanca SIEMPRE, su contenido tiene que ser oscuro
   SIEMPRE: el color del texto no depende del tema de la página, depende del
   fondo sobre el que cae. Por eso va todo junto aquí y no repartido entre
   los bloques de cada tema — el logo incluido, que si no volvería a ser
   blanco sobre blanco.

   El riel curvo no se toca: es azul en los dos, y es lo que ancla la marca
   cuando el resto cambia.
   ========================================================================= */
:root[data-tema="oscuro"] .piel-cristal .side,
.piel-cristal .side{
  background:linear-gradient(180deg,#FFFFFF 0%,#F7FAFF 100%) !important;
  border-right:1px solid rgba(19,66,132,.14) !important;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .piel-cristal .side{
    background:linear-gradient(180deg,#FFFFFF 0%,#F7FAFF 100%) !important;
    border-right:1px solid rgba(19,66,132,.14) !important;
  }
}

/* El contenido del menú: oscuro sobre blanco, pase lo que pase con el tema. */
.piel-cristal .side .nav-sep,
.piel-cristal .side .whoami,
.piel-cristal .side .wa-txt i,
.piel-cristal .side .whoami .version{color:#54627C !important}
.piel-cristal .side .whoami b,
.piel-cristal .side .wa-txt b{color:#12203A !important}

/* La pastilla del logo del despacho sigue a SU superficie, no al tema.
   En el panel clasico la columna es OSCURA y la pastilla va blanca (esta en
   cristal.css). Aqui la columna es BLANCA en los dos temas, y blanca sobre
   blanca mide 1.00:1 — o sea, no existe: la sujetaba solo el filo.
   Tinte claro y filo mas firme: el hueco del logo se lee como un hueco, y un
   logo blanco sobre transparente conserva al menos su silueta. */
.piel-cristal .side .wa-logo{
  background:#EFF4FC !important;
  box-shadow:0 0 0 1px rgba(19,66,132,.22) !important;
}
.piel-cristal .side #nav a,
.piel-cristal .side #nav button{color:#3B4A63 !important}
.piel-cristal .side #nav a:hover,
.piel-cristal .side #nav button:hover{
  background:rgba(47,132,240,.09) !important;color:#12203A !important;
}
.piel-cristal .side .nav-i.on,
.piel-cristal .side .nav-i.on .et,
.piel-cristal .side #nav [aria-current="page"]{color:#1C63BE !important}
.piel-cristal .side .nav-i.on{
  background:linear-gradient(135deg,rgba(47,132,240,.16),rgba(47,132,240,.06)) !important;
  box-shadow:inset 0 0 0 1px rgba(47,132,240,.30) !important;
}
.piel-cristal .side .wa-plan{
  background:rgba(47,132,240,.14) !important;
  color:#1C63BE !important;
  border:1px solid rgba(47,132,240,.28) !important;
}
.piel-cristal .side .tema-sel button{color:#54627C !important}
.piel-cristal .side .tema-sel button[aria-pressed="true"]{
  background:#2F84F0 !important;color:#fff !important;
}
.piel-cristal .side .btn-ghost{
  background:rgba(47,132,240,.08) !important;
  border-color:rgba(19,66,132,.16) !important;
  color:#12203A !important;
}

/* El logotipo, el de color en los dos temas: su fondo es blanco en los dos. */
.piel-cristal .side-logo .logo-mark img{content:url('img/financore-horizontal.png') !important}

/* =========================================================================
   EL PIE DEL RIEL NO PISA EL MENÚ
   -------------------------------------------------------------------------
   Yo le había puesto scroll al riel entero, y #nav ya trae el suyo: dos
   áreas de desplazamiento anidadas. Cuando la pantalla es baja, el navegador
   no sabe cuál encoger y el pie acaba montándose encima de la última entrada
   del menú — "Equipo" quedaba medio tapado.

   Con una sola regla de columna se acaba: el menú es lo único que se encoge
   y se desplaza; el pie mantiene su alto y no se mueve de abajo.
   ========================================================================= */
.piel-cristal .side{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;          /* el scroll lo lleva #nav, no el riel */
}
.piel-cristal #nav{
  flex:1 1 auto !important;
  min-height:0 !important;             /* sin esto un hijo flex no se encoge */
  overflow-y:auto !important;
  overflow-x:hidden;
}
.piel-cristal .side-foot{
  flex:0 0 auto !important;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(19,66,132,.10);
}

/* =========================================================================
   UN SOLO BOTÓN DE TEMA, ABAJO
   -------------------------------------------------------------------------
   Eran tres —Claro, Oscuro, Auto— ocupando una fila entera del pie para algo
   que se toca una vez y no se vuelve a tocar. Queda una luna que alterna, y
   va en la esquina de la ficha del usuario, al lado del nombre: asi el pie
   deja de ser un bloque de botones y se queda en lo que hace falta.

   Los tres botones siguen en el DOM: son los que app.js conoce y mantiene
   con aria-pressed. La luna los pulsa por debajo, así que el estado, el
   guardado y lo que anuncia un lector de pantalla siguen siendo los suyos.
   ========================================================================= */
.piel-cristal .tema-sel{display:none !important}

/* Solo el icono, en la esquina de la ficha del usuario. */
.piel-cristal .whoami{position:relative}
.piel-cristal .fc-luna{
  position:absolute;top:6px;right:6px;
  display:grid;place-items:center;
  width:30px;height:30px;padding:0;
  border:1px solid rgba(19,66,132,.16);border-radius:9px;cursor:pointer;
  background:rgba(47,132,240,.12);color:#134284;
  transition:background .15s,color .15s;
}
.piel-cristal .fc-luna:hover{background:#1C63BE;color:#fff}

/* La luna NO cambia con el tema, y es a proposito: vive en la columna del
   menu, que en esta piel es blanca en los dos temas. Le puse un azul claro
   "para el tema oscuro" dando por hecho un fondo oscuro que ahi no existe, y
   medido daba 1.28:1 — invisible. El azul oscuro vale para los dos porque el
   fondo es el mismo en los dos. */
.piel-cristal .fc-luna:focus-visible{outline:2px solid #2F84F0;outline-offset:2px}
/* Sitio para que no se monte con el nombre. */
.piel-cristal .wa-txt{padding-right:34px}

/* =========================================================================
   EL ACTIVO Y EL HOVER, QUE SE LEAN
   -------------------------------------------------------------------------
   El activo era azul sobre azul claro: técnicamente pasaba el mínimo, pero
   "pasa el mínimo" y "se lee de un vistazo" no son lo mismo. Y el hover
   estaba en un 9% de tinte — no se notaba que el ratón estuviera encima.

   El activo pasa a azul SÓLIDO con texto blanco: 5,9:1, y sobre todo se ve
   desde el otro lado de la mesa. El hover sube a un tinte que sí se nota,
   con el texto en oscuro.

   La misma pieza vale en los dos temas porque la columna es blanca en los
   dos: el fondo no cambia, así que el color del texto tampoco tiene por qué.
   ========================================================================= */
.piel-cristal .side #nav a:hover,
.piel-cristal .side #nav button:hover,
.piel-cristal .side #nav .nav-i:hover{
  background:rgba(47,132,240,.20) !important;
  color:#0E2F60 !important;
}
.piel-cristal .side #nav .nav-i:hover .et,
.piel-cristal .side #nav .nav-i:hover svg{color:#0E2F60 !important}

/* El activo: azul sólido, texto blanco. */
.piel-cristal .side .nav-i.on,
.piel-cristal .side #nav [aria-current="page"]{
  background:#1C63BE !important;
  box-shadow:0 3px 10px rgba(28,99,190,.30) !important;
  color:#fff !important;
}
.piel-cristal .side .nav-i.on .et,
.piel-cristal .side .nav-i.on svg,
.piel-cristal .side #nav [aria-current="page"] .et,
.piel-cristal .side #nav [aria-current="page"] svg{color:#fff !important}

/* Y al pasar por encima del que ya está activo, que no se apague. */
.piel-cristal .side .nav-i.on:hover{
  background:#134284 !important;color:#fff !important;
}
.piel-cristal .side .nav-i.on:hover .et,
.piel-cristal .side .nav-i.on:hover svg{color:#fff !important}

/* =========================================================================
   EN PANTALLA BAJA, EL MENÚ MANDA
   -------------------------------------------------------------------------
   No se montaban —medido: 10px de hueco— pero el pie se comía 217px de los
   415 del riel y dejaba el menú en 60. Trece entradas en 60px se leen como
   un menú enterrado, y el efecto para quien lo mira es el mismo que un
   solape: no encuentra lo que busca.

   El pie pasa a poder encogerse y a llevar su propio desplazamiento, y el
   menú tiene un mínimo garantizado. Y por debajo de 700px de alto, la ficha
   del usuario se compacta: ahí el nombre del despacho y la versión son lo
   primero que sobra.
   ========================================================================= */
.piel-cristal #nav{min-height:150px !important}
.piel-cristal .side-foot{
  flex:0 1 auto !important;
  min-height:0 !important;
  /* Sin overflow. Se lo puse yo para pantallas bajas y lo que hacia era
     pintar una barra de desplazamiento dentro de la ficha del usuario, que
     son cuatro lineas: nunca hay nada que desplazar ahi, solo la barra. Lo
     que si hace falta —que el pie ceda sitio al menu— ya lo da el flex de
     arriba, y lo que sobra en pantalla baja se recorta mas abajo. */
  overflow:visible !important;
}

@media (max-height:700px){
  .piel-cristal .whoami{padding:6px 4px !important}
  .piel-cristal .whoami .version{display:none !important}
  .piel-cristal .wa-txt i{display:none !important}
  .piel-cristal .side-foot{margin-top:4px;padding-top:6px}
  .piel-cristal .side-logo{margin-bottom:10px !important}
  .piel-cristal .side{padding-top:14px !important}
}
@media (max-height:520px){
  .piel-cristal .whoami .wa-plan{display:none !important}
  .piel-cristal #nav{min-height:110px !important}
}

/* =========================================================================
   LO QUE SE LEIA FLOJO: LA CAJA NEGRA Y LAS LETRAS DE DEBAJO
   -------------------------------------------------------------------------
   Dos cosas distintas que se veian mal por el mismo motivo: heredaban de
   style.css unos tonos pensados para el tema claro.

   1. La caja de "Cuando usarla" usaba --bg-2, que aqui se resuelve a
      rgb(14,19,28): un negro NEUTRO, sin azul, metido dentro de una tarjeta
      que si es azul. No era que se leyera mal —el texto medido daba 8.7:1—
      era que el rectangulo no pertenecia a la paleta y por eso cantaba.
      Ahora es vidrio azul, como todo lo demas.

   2. Las descripciones bajo el chip de minutos eran blanco al 58%, que sobre
      el lienzo compone rgb(151,155,161): gris, 6.8:1, peso 400 a 12.5px.
      Pasaba la norma y aun asi se leia lavado. Se sube el tono en --pc-txt2
      y aqui se les da medio punto de peso: a ese tamano, el grosor hace
      tanto como el color.
   ========================================================================= */
.piel-cristal .guia-c{
  background:rgba(47,132,240,.09) !important;
  border:1px solid rgba(19,66,132,.14);
  color:var(--pc-txt2) !important;
}
.piel-cristal .guia-c b{color:var(--pc-txt) !important}

:root[data-tema="oscuro"] .piel-cristal .guia-c{
  background:rgba(47,132,240,.13) !important;
  border-color:rgba(122,178,250,.20);
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .piel-cristal .guia-c{
    background:rgba(47,132,240,.13) !important;
    border-color:rgba(122,178,250,.20);
  }
}

/* El peso. Solo en el texto pequeno de las tarjetas: subirselo a todos los
   parrafos convertiria la pantalla entera en negrita y no se distinguiria
   nada, que es el problema contrario. */
.piel-cristal .card .sub,
.piel-cristal .guia-c,
.piel-cristal .cert-mod .sub,
.piel-cristal .mon .sub{
  font-weight:500;
  line-height:1.55;
}

/* =========================================================================
   FUERA EL GRIS Y EL BLANCO TRANSLUCIDO DEL TEMA OSCURO
   -------------------------------------------------------------------------
   Daniel: "esos grises o blanco opaco hay que quitarlo de todo el tema
   oscuro, no se ve nada — o blanco, blanco y blanco con negrita".

   Barri el contenido entero midiendo que texto tenia opacidad por debajo
   de 1, y salieron diez formas distintas (p.sub, th, .emb-q, span.r.sub...)
   con EXACTAMENTE el mismo valor: rgba(255,255,255,.58). Todas salian de un
   solo token, --pc-txt2. Ese blanco al 58% sobre el lienzo compone
   rgb(151,155,161): gris plano. Por eso se veia lavado en todas partes a la
   vez, y por eso se arregla en un sitio y no en diez.

   Ahora --pc-txt2 es #CBDCF5: opaco, sin alfa, y con un punto de azul para
   que no vuelva a ser gris. Sobre el lienzo da 12.5:1.

   Lo de abajo son los pocos que NO pasaban por el token y traian su propio
   blanco translucido desde cristal.css. Se fijan uno a uno porque son los
   que quedan; no hay una regla general que los coja sin arrasar tambien con
   los iconos y los bordes, que si deben ser translucidos.
   ========================================================================= */
:root[data-tema="oscuro"] .piel-cristal :is(.tarj-num, .tarj-pie b, .emb-q, th, .guia-c){
  color:#E9F1FC !important;
}
:root[data-tema="oscuro"] .piel-cristal :is(.rec-t p b, .vent p b, .guia-c b){
  color:#FFFFFF !important;
}
/* Sobre el azul del heroe no vale el tono claro de --pc-txt2: ahi el fondo no
   es el lienzo oscuro, es azul medio. Blanco entero y medio punto de peso. */
.piel-cristal :is(.rec-t p, .vent p, .vent-t){color:#FFFFFF !important;font-weight:500}
.piel-cristal .vent-t{opacity:1 !important}
:root[data-tema="oscuro"] .piel-cristal :is(input, textarea, select)::placeholder{
  color:#C4D8F2 !important;opacity:1 !important;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .piel-cristal :is(.tarj-num, .tarj-pie b, .emb-q, th, .guia-c){
    color:#E9F1FC !important;
  }
  :root:not([data-tema="claro"]) .piel-cristal :is(.rec-t p b, .vent p b, .guia-c b){
    color:#FFFFFF !important;
  }
  :root:not([data-tema="claro"]) .piel-cristal :is(input, textarea, select)::placeholder{
    color:#C4D8F2 !important;opacity:1 !important;
  }
}

/* La cabecera de cada pantalla. "Despacho Demo - plan Agencia" era de las
   que peor se leia: blanco translucido, peso 400, justo debajo de un titulo
   enorme que si es blanco entero. */
:root[data-tema="oscuro"] .piel-cristal .ph p{color:#CBDCF5 !important;font-weight:500}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .piel-cristal .ph p{color:#CBDCF5 !important;font-weight:500}
}

/* =========================================================================
   LA FICHA DEL USUARIO, LIMPIA
   -------------------------------------------------------------------------
   Daniel: "queda como mal, incluyendo que tiene una barra de subir y bajar;
   quitar ese estilo, que quede limpio".

   Dos cosas distintas:

   1. El gris. cristal.css le pone al pie background:rgba(0,0,0,.18), que
      sobre el panel oscuro original era un hueco discreto. Aqui la columna
      es BLANCA, y un negro al 18% sobre blanco es exactamente un gris. No es
      que alguien eligiera gris: es un negro translucido encima de un fondo
      que cambio debajo de el.

   2. La altura. La rejilla original apila el plan y la version cada uno en
      su fila: cuatro filas para cuatro datos cortos. Con el boton de salir
      debajo, el bloque se comia el final de la columna.

   Ahora: sin caja, solo una linea de separacion; la luna sube a la fila del
   nombre; y el plan y la version comparten fila, uno a cada lado.
   ========================================================================= */
.piel-cristal .side-foot{
  background:transparent !important;
  border:0 !important;
  border-top:1px solid rgba(19,66,132,.12) !important;
  border-radius:0 !important;
  margin-top:8px !important;
  padding:10px 4px 4px !important;
  gap:7px !important;
}

/* La luna deja de ir en absoluto y pasa a ser una celda mas de la rejilla:
   asi no puede montarse con el nombre pase lo que pase con el ancho. */
.piel-cristal .whoami{
  grid-template-columns:32px minmax(0,1fr) 30px !important;
  grid-template-areas:"ini txt luna" "plan plan plan" !important;
  gap:2px 9px !important;
  padding:0 !important;
}
.piel-cristal .fc-luna{
  position:static !important;
  grid-area:luna;
  align-self:center;
  width:30px;height:30px;margin:0 !important;
}
/* Ya no hace falta apartar el nombre: la luna tiene su propia columna. */
.piel-cristal .wa-txt{padding-right:0 !important}

/* El plan y la version, misma fila, uno a cada punta. La version encoge y se
   corta antes que empujar la pastilla. */
.piel-cristal .whoami .wa-plan{
  grid-area:plan;justify-self:start;margin-top:6px !important;
}
.piel-cristal .whoami .version{
  grid-area:plan;justify-self:end;align-self:center;margin-top:6px !important;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:9px;
}

/* El avatar: el mismo azul de la marca, sin la sombra dura que pedia un
   fondo oscuro detras. */
.piel-cristal .wa-ini{
  width:32px;height:32px;
  box-shadow:0 1px 3px rgba(19,66,132,.18) !important;
}

/* Salir: un boton discreto, no una barra. */
.piel-cristal .side-foot .btn-ghost.tiny{
  padding:8px 10px !important;font-size:11.5px !important;
}

/* =========================================================================
   EL PANEL AZUL DEL HEROE: ERA LO PEOR MEDIDO DE LA APP
   -------------------------------------------------------------------------
   Blanco sobre azul a 2.3:1. Y no venia de la letra —ya esta en blanco
   entero— sino de DOS cosas que empujaban el fondo hacia arriba a la vez:

     .rec   arrancaba el degradado en #2F84F0, el azul mas claro de la rampa
     .vent  le ponia ENCIMA un velo blanco al 20%

   O sea que las tarjetas, que son justo donde va el texto, quedaban sobre el
   punto mas claro del panel mas claro. El techo lo ponia el fondo: por mucho
   que la letra sea blanco puro, no hay nada mas claro que el blanco.

   Se baja el arranque del degradado un escalon de la rampa de marca (de
   #2F84F0 a #1C63BE) y el velo de las tarjetas de .20 a .10. Sigue
   leyendose como vidrio sobre azul —para eso queda el borde y el brillo
   superior— pero el texto pasa de 2.3:1 a mas de 7:1.

   Y el borde del panel era rgba(232,160,32,.34): oro. Se quedaba de antes.
   ========================================================================= */
.piel-cristal .rec{
  background:linear-gradient(152deg,#1C63BE 0%,#134284 45%,#0E2F60 100%) !important;
  border:1px solid rgba(143,192,250,.30) !important;
}
.piel-cristal .vent{
  background:linear-gradient(145deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.04) 100%) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 6px 16px rgba(3,14,34,.20) !important;
}

/* =========================================================================
   EL CREMA QUE SE ME ESCAPO
   -------------------------------------------------------------------------
   Mi detector de amarillo tenia un falso negativo: exigia que el componente
   azul fuera menor de 130, y #FFD489 lo tiene en 137. Asi que barri la
   puerta dos veces, di "cero amarillo", y el "6", el "30" y el rotulo
   "ACADEMIA FINANCORE" seguian saliendo crema en pantalla.

   La condicion buena no es "poco azul" sino la FORMA del color: r >= g > b
   con separacion suficiente. Un crema claro sigue siendo amarillo aunque
   tenga bastante azul dentro.

   #FFD489 esta en cinco sitios de cristal.css (.rec-et, .vent-n, .tarj-mar,
   .tarj-der b, .tarj-firma em). Se cubren los cinco desde aqui en vez de
   editar cristal.css, que es la hoja del clasico: esta piel va la ultima y
   gana, y asi no se toca lo que sirve /clasico.
   ========================================================================= */
.piel-cristal :is(.rec-et, .vent-n, .tarj-mar, .tarj-der b, .tarj-firma em){
  color:#CFE4FF !important;
}

/* ===========================================================================
   EL MODAL ES OSCURO EN LOS DOS TEMAS, Y EL TEXTO NO SE ENTERABA
   ---------------------------------------------------------------------------
   Daniel: "en compartir link la X no se ve — nunca azul sobre azul ni azul
   sobre negro".

   Medido, el fallo solo pasa en tema CLARO:

       oscuro   X en rgb(232,235,242)   15.32:1
       claro    X en rgb(18,32,58)       1.03:1   <- invisible

   .modal-box lleva vidrio OSCURO en los dos temas —es una ventana que se
   monta encima de todo y por eso no se aclara— pero el color del texto lo
   daba --pc-txt, que SI sigue al tema. En claro eso es navy, y navy sobre
   negro no se ve.

   Es el mismo error que llevo cometiendo todo el dia en otras cuatro
   pantallas: EL COLOR DEL TEXTO LO DECIDE LA SUPERFICIE QUE TIENE DEBAJO, NO
   EL TEMA EN QUE ESTE LA PAGINA. Cuando una superficie no cambia con el
   tema, lo que va encima tampoco puede cambiar.

   Por eso esto recolorea el modal ENTERO por defecto y saca las excepciones,
   en vez de ir arreglando el elemento que alguien reporta. La X era la que
   se veia; los titulos y los parrafos tenian el mismo problema.
   =========================================================================== */
.modal-box{color:#E8EFFA}
.modal-box :is(h1,h2,h3,h4,b,strong){color:#FFFFFF}
.modal-box :is(p,li,span,small,.sub,label){color:#CBDCF5}

/* Los botones de dentro, incluida la X de cerrar. */
.modal-box .btn-ghost{
  background:rgba(47,132,240,.14) !important;
  border-color:rgba(143,192,250,.30) !important;
  color:#FFFFFF !important;
}
.modal-box .btn-ghost:hover{background:rgba(47,132,240,.26) !important}

/* ===========================================================================
   LA TARJETA AZUL, LA TERCERA SUPERFICIE DE COLOR
   ---------------------------------------------------------------------------
   Arriba hay un `.piel-cristal .btn-ghost{color:var(--pc-txt) !important}`.
   Ese !important hace que el boton siga al TEMA DE LA PAGINA, y por eso ya
   hubo que sacarle dos excepciones: el menu (.side) y los modales
   (.modal-box). Esta es la tercera, y es la que Daniel lleva señalando desde
   ayer.

   .rec es la tarjeta azul marino de "Obtener el reporte". En tema OSCURO no
   se notaba, porque la tinta del tema ya es clara. En tema CLARO la tinta es
   #12203A y cae sobre azul marino: el boton "Entrar a la plataforma" medía
   **1.40:1** en el navegador. Negro sobre azul.

   Hubo un intento anterior en cristal.css (.rec-acc .btn-ghost{color:#fff})
   que no llegó a verse nunca: sin !important no le gana al de arriba. Por eso
   esto vive AQUI, al lado de las otras dos excepciones, y no alli.

   El dia que haya una cuarta superficie de color, el sitio es este.
   =========================================================================== */
.piel-cristal .rec{color:#E8EFFA !important}
.piel-cristal .rec :is(h1,h2,h3,h4,b,strong){color:#FFFFFF !important}
.piel-cristal .rec .btn-ghost{
  background:rgba(255,255,255,.14) !important;
  border-color:rgba(255,255,255,.34) !important;
  color:#FFFFFF !important;
}
.piel-cristal .rec .btn-ghost:hover{background:rgba(255,255,255,.24) !important}

/* Los campos: fondo claro y letra oscura, que es lo que espera cualquiera
   al escribir. Aqui SI se invierte, porque el campo es su propia superficie. */
.modal-box :is(input,textarea,select){
  background:rgba(255,255,255,.94) !important;
  color:#12203A !important;
  border-color:rgba(143,192,250,.26) !important;
}
.modal-box :is(input,textarea)::placeholder{color:#5A6680 !important;opacity:1}

/* El aviso rojo de dentro del modal se queda legible sobre oscuro. */
.modal-box .note.red{
  background:rgba(244,63,94,.14) !important;
  border-color:rgba(244,63,94,.34) !important;
  color:#FFC7C7 !important;
}
.modal-box .note.red b{color:#FFFFFF !important}

/* ===========================================================================
   EL INFORME: PAPEL BLANCO SIEMPRE, CAJAS OSCURAS SIEMPRE
   ---------------------------------------------------------------------------
   Esto mismo se escribio primero en cristal.css y NO se aplicaba: las reglas
   de esta piel llevan !important y mas especificidad, asi que ganaban. Medido
   despues de aquel intento, el texto seguia en 1.19:1.

   Aqui si gana, porque esta hoja va la ultima. La leccion, que ya llevo
   repetida hoy: un arreglo de color no esta hecho hasta que se MIDE; escribir
   la regla correcta en el archivo equivocado se lee igual de bien en el diff
   y no hace nada.

   Las dos superficies del informe NO cambian con el tema:
       .rep/.doc/.hoja/.contrato   papel blanco (se imprime y se entrega)
       .box de dentro              caja oscura
   Asi que la tinta tampoco puede cambiar.
   =========================================================================== */
:is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato){color:#1E2A3A !important}
:is(.rep,.doc,.hoja,.contrato) :is(p,li,td,th,span,div,small,em,i,b,strong,h1,h2,h3,h4,h5):not(.box){
  color:#1E2A3A !important;
}
:is(.rep,.doc,.hoja,.contrato) :is(h1,h2,h3,h4,h5){color:#12203A !important}
:is(.rep,.doc,.hoja,.contrato) :is(b,strong){color:#12203A !important}
:is(.rep,.doc,.hoja,.contrato) :is(.sub,.mut,small){color:#4A5872 !important}

/* LAS CAJAS SI CAMBIAN CON EL TEMA, y aqui me equivoque primero.

   Di por hecho que .box era oscura siempre porque asi la vi en la captura, y
   le puse letra clara fija. Medido despues: en tema claro la caja es BLANCA
   —degradado de #fff— y mi letra clara daba 1.37:1. Arregle el tema oscuro
   y rompi el claro.

   Lo correcto no es acertar el color de la caja en cada tema: es que lo que
   va dentro HEREDE el de la caja. Asi la regla es verdad hoy y lo sigue
   siendo si manana alguien cambia el fondo de .box, sin que nadie tenga que
   acordarse de venir aqui.

   Esto es justo lo que la regla general de arriba les quitaba: la pintaba de
   tinta de papel (#12203A) tambien dentro de la caja, y en tema oscuro eso
   era negro sobre negro — el <b> que Daniel no veia, medido en 1.17:1. */
:is(.rep,.doc,.hoja,.contrato) .box :is(p,li,span,div,small,em,i,b,strong,h3,h4){
  color:inherit !important;
}

/* EL PAPEL NO TIENE MODO OSCURO, Y ESE ERA EL FONDO DEL ASUNTO.

   Estuve dos intentos peleando el color de la LETRA cuando el problema era
   el FONDO. En tema oscuro la caja traia este degradado:

       rgba(47,132,240,.12) 0%  ->  rgba(15,31,58,.7) 50%  ->  rgba(10,22,44,.86)

   La primera parada tiene un 12% de opacidad: es casi transparente. Y detras
   hay PAPEL BLANCO. Asi que la caja iba de casi-blanco a casi-negro de punta
   a punta, y no hay color de letra que gane en los dos extremos — por eso la
   negrita del principio se perdia aunque el promedio midiera 8.6:1.

   Ese degradado esta pensado para el lienzo oscuro de la app, no para papel.
   Aqui dentro se cambia por un panel OPACO y claro, igual en los dos temas,
   porque el informe se imprime y se le entrega al cliente en mano: el papel
   no tiene modo oscuro. Asi ademas sale igual en pantalla que impreso, que
   es lo que el consultor espera cuando le da al boton de imprimir. */
:is(.rep,.doc,.hoja,.contrato) .box{
  background:#F4F7FC !important;
  border:1px solid rgba(19,66,132,.14) !important;
  color:#1E2A3A !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
}
/* Las tres variantes conservan su aviso con una banda lateral, que es lo que
   distingue sin depender del color del texto. */
:is(.rep,.doc,.hoja,.contrato) .box.amb{border-left:4px solid #C77700 !important}
:is(.rep,.doc,.hoja,.contrato) .box.red{border-left:4px solid #B3261E !important}
:is(.rep,.doc,.hoja,.contrato) .box.blu{border-left:4px solid #1C63BE !important}
:is(.rep,.doc,.hoja,.contrato) .box :is(b,strong){color:#12203A !important}
/* Lo unico que se marca aparte es el peso: dentro de una caja, lo que va en
   negrita es el titulo de la idea y tiene que verse como tal. */
:is(.rep,.doc,.hoja,.contrato) .box :is(b,strong){font-weight:800}

/* LA TABLA TAMBIEN ES PAPEL, Y ESTE ERA EL FALLO GRANDE.

   23-sep-2026. Daniel: "la app en negro sigue con los errores desde el
   principio; negro en azul, ya quedamos que eso no".

   Medido sobre el informe entero con el tema oscuro puesto: 95 textos por
   debajo del minimo en el informe tecnico y 57 en la nota de venta. TODOS el
   mismo par de colores -- tinta #1E2A3A sobre fondo #182234, 1,10:1. Cada
   nombre de acreedor, cada saldo, cada fila de la tabla de disputas.

   La causa, otra vez la misma y por escrito unas lineas mas arriba: cristal
   .css dice

       .rep .tw { background:#fff }                        (0,2,0)

   y mas abajo, en la misma hoja,

       :root[data-tema="oscuro"] .tw { background:#182234 } (0,3,0)

   Gana la segunda por especificidad y ademas va despues. El envoltorio de la
   tabla se volvia panel oscuro con el tema, la tinta seguia siendo la del
   papel -- que aqui lleva !important y no se mueve -- y el resultado era
   texto negro sobre negro.

   El envoltorio de la tabla es parte de la hoja: cuando el consultor imprime,
   sale blanco. Asi que blanco en los dos temas, igual que .box. */
:is(.rep,.doc,.hoja,.contrato) .tw{
  background:#FFFFFF !important;
  border-color:#E7EAF0 !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
}
:is(.rep,.doc,.hoja,.contrato) :is(th,td){background:transparent !important}
/* Las filas alternas del tema oscuro tambien pintan, y con el mismo efecto. */
:is(.rep,.doc,.hoja,.contrato) tbody tr:nth-child(even) :is(th,td){background:transparent !important}

/* LA LLAMADA AZUL ES LO CONTRARIO: OSCURA SOBRE EL PAPEL.

   El bloque "Las disputas se procesan aqui" es un rectangulo azul marino
   dentro de la hoja blanca. La regla general de arriba le metia tinta de
   papel (#1E2A3A) a todo lo que lleva dentro, y ahi medi 1,03:1 -- EN LOS DOS
   TEMAS, no solo en el oscuro. Ese titulo llevaba invisible desde que se
   escribio la regla general.

   Es el mismo caso que .box y se resuelve igual: lo de dentro hereda el color
   de su caja, no el del papel. Si manana alguien cambia el azul, la letra le
   sigue. */
:is(.rep,.doc,.hoja,.contrato) .cta{color:#FFFFFF !important}
:is(.rep,.doc,.hoja,.contrato) .cta :is(p,li,span,div,small,em,i,b,strong,h1,h2,h3,h4,h5){
  color:inherit !important;
}
/* El boton de dentro es blanco: ahi la letra vuelve a ser azul. */
:is(.rep,.doc,.hoja,.contrato) .cta a{color:#1565C0 !important}

/* Al imprimir, la caja oscura se vuelve del reves: en papel gasta tinta y el
   texto claro desaparece. */
/* Ya no hace falta un bloque @media print para las cajas: son claras y
   opacas en pantalla, asi que se imprimen tal cual se ven. */

/* ===========================================================================
   EL MODAL: FONDO AZUL DEL TEMA, Y LAS ISLAS CLARAS DE DENTRO
   ---------------------------------------------------------------------------
   Dos cosas que Daniel vio en la misma pantalla.

   1. El fondo era casi negro. Pasa al azul hondo del tema, que es el mismo
      de la consola: una ventana que se monta encima no tiene por que ser de
      otro color que el resto.

   2. "Se pierde la mitad del escrito". Era el <b>Revisa y corrige aqui</b>
      del aviso: mi regla de antes puso TODAS las negritas del modal en
      blanco, y ese aviso es una caja BLANCA dentro del modal oscuro. Blanco
      sobre blanco.

      Y es, otra vez, lo mismo de todo el dia: recolorear una superficie
      entera sin mirar que dentro hay ISLAS que van al reves. La regla
      general se queda —sigue haciendo falta— pero ahora cada isla dice su
      propia tinta.

      Las islas claras del modal son: el aviso .note, los campos, y las
      tablas. Cada una es su propia superficie.
   =========================================================================== */
/* La clase repetida sube el peso: cristal.css tiene
   `:root[data-tema="oscuro"] .modal-box` —dos clases— y una sola clase pierde
   aunque lleve !important y vaya despues. Es la misma cuenta que ya me mordio
   hoy con :is() y con las iniciales de las resenas. */
.modal-box.modal-box,
:root[data-tema="oscuro"] .modal-box,
:root[data-tema="claro"] .modal-box{
  background:linear-gradient(152deg,#123566 0%,#0E2A50 45%,#0B1F3D 100%) !important;
  border:1px solid rgba(143,192,250,.20) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
}

/* --- Las islas claras: aqui la tinta se vuelve oscura otra vez --- */
.modal-box .note,
.modal-box .tw,
.modal-box table{
  background:#FFFFFF !important;
  color:#1E2A3A !important;
  border-color:rgba(19,66,132,.14) !important;
}
/* La clase repetida sube el peso (1-oct-2026): `:root[data-tema="oscuro"] .piel-cristal :is(...th...)`
   pesa (0,3,1) y ponia los encabezados de la tabla "Lo que dice el reporte"
   en blanco sobre la isla blanca. Con tres .modal-box esta pesa (0,4,1). */
.modal-box.modal-box.modal-box :is(.note,.tw,table) :is(b,strong,h3,h4,th){color:#12203A !important}
.modal-box.modal-box.modal-box :is(.note,.tw,table) :is(p,li,span,small,td){color:#3B4A63 !important}
/* El renglon pequeno bajo cada partida ("Atrasadas · contado de las cuentas")
   lleva su color en linea con --ink-3, que en oscuro es casi blanco. */
.modal-box.modal-box.modal-box :is(.tw,table) td div{color:#5A6A84 !important}
.modal-box.modal-box.modal-box :is(.tw,table) th{color:#5A6A84 !important}

/* El aviso conserva su color cuando avisa de algo. */
.modal-box .note.red{
  background:#FDECEA !important;color:#7A1C16 !important;
  border-color:rgba(179,38,30,.30) !important;
}
.modal-box .note.red :is(b,strong){color:#5C120E !important}
/* OJO CON EL NOMBRE. Este bloque se escribio para `.note.oro` y `.note.oro`
   NO EXISTE: no lo emite ni un sitio del codigo (0 apariciones). La clase que
   se genera de verdad es `.note.gold`, y sale en 43 sitios.

   Asi que este bloque llevaba desde que se escribio sin hacer nada, y el
   aviso dorado dentro de un modal acababa con el fondo azul translucido que
   le pone `.piel-cristal .note.gold` mas arriba y con la tinta OSCURA que le
   pone `.modal-box .note`. Medido: 1.02:1. El de la lectura del reporte
   —"La lectura cuadra a medias"— es justo ese, y Daniel lo reporto tres
   veces mientras yo arreglaba otras cosas.

   La clase repetida (.modal-box.modal-box) es para ganarle a
   `.piel-cristal .note.gold`, que son tres clases: con dos se pierde aunque
   lleve !important. Es la misma cuenta de siempre.

   Se deja `.oro` por si alguien la usa algun dia, pero la que manda es
   `.gold`. */
.modal-box.modal-box .note.oro,
.modal-box.modal-box .note.gold{
  background:#FFF6E6 !important;color:#6B4A05 !important;
  border-color:rgba(199,119,0,.30) !important;
}
.modal-box.modal-box :is(.note.oro,.note.gold) :is(b,strong){color:#4A3303 !important}
.modal-box.modal-box :is(.note.oro,.note.gold) :is(p,li,span,small){color:#6B4A05 !important}

/* ===========================================================================
   LA REGLA DE DANIEL: DENTRO DE UN CONTENEDOR DE COLOR, BLANCO Y NEGRITA
   ---------------------------------------------------------------------------
   Me paso el dia arreglando islas oscuras de una en una —el cierre, las
   cajas, las cabeceras, el bloque rojo— y cada vez aparecia otra que no
   estaba en mi lista. Daniel lo corto con la regla correcta:

       "todo lo que este dentro de un contenedor de COLORES, ponlo blanco y
        en negrita que se vea bien; con eso facilitamos todo"

   Es mejor que lo que yo estaba haciendo por una razon de fondo: no depende
   de acertar el color de cada fondo. Sobre CUALQUIER color con cuerpo, el
   blanco en negrita se lee. Deja de haber que pensar.

   DE DONDE SALE LA LISTA: de barrer style.css y cristal.css buscando reglas
   con fondo de color —ni blanco, ni casi blanco, ni transparente— dentro de
   selectores de documento. No de mi memoria, que es justo lo que fallaba.

   LO QUE EL BARRIDO NO VE, y por eso .rhead va a mano: los fondos escritos
   con variable, como `background:var(--fin)`. Un barrido de texto no
   resuelve variables. Si algun dia se anade un bloque de color con variable,
   hay que anadirlo aqui tambien.

   Y POR QUE HACE FALTA !important: mas arriba hay una regla que pinta de
   tinta de papel todo lo que hay dentro de .rep. Esa regla es la que rompia
   estos bloques, y esta tiene que ganarle.
   =========================================================================== */
:is(.rep,.doc,.hoja,.contrato) :is(.rhead,.cierre,.duele,.mora,.af-n,.paso-n,
  h2.bloque,.rojo,.azul,.verde,.tarj-dorso,.tarj-frente,.tarj-banda,.c-cab),
:is(.rep,.doc,.hoja,.contrato) :is(.rhead,.cierre,.duele,.mora,.af-n,.paso-n,
  h2.bloque,.rojo,.azul,.verde,.tarj-dorso,.tarj-frente,.tarj-banda,.c-cab) *{
  color:#FFFFFF !important;
}

/* La negrita que pide la regla. No a TODO —un parrafo entero en negrita deja
   de tener jerarquia y cansa— sino un escalon mas de peso del que tuviera:
   lo que era normal pasa a medio, lo que era negrita se queda negrita. Asi
   se ve bien y se sigue distinguiendo el titulo del texto. */
:is(.rep,.doc,.hoja,.contrato) :is(.rhead,.cierre,.duele,.mora,h2.bloque,
  .tarj-dorso,.tarj-frente) :is(p,li,span,div,small,i,em){
  font-weight:600;
}
:is(.rep,.doc,.hoja,.contrato) :is(.rhead,.cierre,.duele,.mora,h2.bloque,
  .tarj-dorso,.tarj-frente) :is(b,strong,h1,h2,h3,h4,.d-n,.cie-k,.d-k){
  font-weight:800;
}

/* Lo unico que NO se vuelve blanco dentro de un contenedor de color: las
   islas de papel que van dentro, como el logo del despacho, que se pinta
   sobre su propio cuadro blanco. */
:is(.rep,.doc,.hoja,.contrato) .rhead .idw img{background:#fff !important}

/* Al imprimir se quedan de color: marcan lo que duele y lo que toca hacer, y
   en gris perderian la mitad de su trabajo. */
@media print{
  :is(.rep,.doc,.hoja,.contrato) :is(.rhead,.cierre,.duele,.mora,h2.bloque){
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
}

/* El encabezado del informe arrancaba en #1E88E5, que es el azul mas claro
   de la rampa. El blanco encima medi 3.68:1 — pasa para un titular grande,
   no para "DESPACHO DEMO" ni para la fecha, que van a 11-12px.

   Y no se puede subir la letra: ya es blanco. Lo que baja es el fondo, un
   escalon de la misma rampa. Sigue siendo el azul de la marca y el titular
   se ve igual de bien.

   Este es el mismo caso del heroe de la web: cuando la letra ya es blanca,
   el techo lo pone el fondo. */
/* Sin azul oscuro (1-oct-2026, regla de Daniel del 28-sep): la cabecera, la
   llamada y el cierre de los informes bajaban a #081B38. Ahora van en el azul
   claro de la marca; el blanco encima mide 4,6:1 en #1976D2 y 5,8:1 en #1565C0. */
:is(.rep,.doc,.hoja,.contrato) :is(.rhead,.cta,.cierre){
  background:linear-gradient(160deg,#1976D2 0%,#1565C0 100%) !important;
}

/* =========================================================================
   EL ORO DENTRO DE LA APP                                     23-sep-2026
   -------------------------------------------------------------------------
   Daniel, con cuatro capturas: "dentro de app dame el logo que tenga en
   amarillo / la rayita del buscador ponmela en amarillo / cerrar sesion en
   amarillo / si se puede la rayita que tiene el panel del dash tambien".

   Lo primero que salio al ir a mirarlo: el "App" del logo YA era oro en la
   barra de arriba (.mt-marca b, #F5A524) y azul en el riel de la izquierda
   (#2F84F0, puesto mas arriba en este mismo archivo con el argumento de que
   "sobre blanco queda flojo"). El mismo logotipo, dos colores, en la misma
   pantalla. Eso no era una decision, era un descuido con excusa.

   DOS ORO, PORQUE HAY DOS FONDOS — Y NO ES SIMETRICO
   El riel y el buscador son casi blancos; la barra de arriba es navy. El oro
   claro (#F5BC4A) sobre blanco no se lee, y el oro oscuro sobre navy se
   apaga. Asi que cada superficie lleva el suyo, medido, no elegido.

   LAS DOS "RAYITAS" SON BORDES DE 1px, y ahi el oro funciona MEJOR que en
   el texto: una linea no se lee, se ve. No hay minimo de contraste que
   cumplir para un borde decorativo, y el calido separa mejor del azul de
   los botones que otro azul mas claro.

   UN LOGOTIPO NO ES UN PARRAFO. Aqui hay dos cosas distintas y no llevan el
   mismo oro:

     · El "App" del logotipo va en el AMARILLO DE MARCA, #E8A020. Es la marca
       de Daniel, no un texto que alguien tenga que leer para trabajar, y el
       minimo de contraste de la WCAG deja fuera expresamente los logotipos
       ("text that is part of a logo or brand name"). Se le puso el oro
       oscuro por aplicarle la regla del texto, y el resultado era un marron
       que no es la marca. Daniel: "ese logo, por que es dorado; se supone
       que es amarillo".

     · "Cerrar sesion" SI es texto --es la etiqueta de un boton que hay que
       leer-- y lleva el oro oscuro #95610A.

   ---------------------------------------------------------------------------
   23-sep-2026. MEDIDO, Y LAS DOS CIFRAS DE ANTES ESTABAN MAL.

   Este mismo comentario decia que #A8700A "sobre su pastilla mide 4,6:1". No:
   son 3,74:1. La cuenta se habia hecho contra blanco puro, y la pastilla no es
   blanca — lleva un velo dorado al 10% encima, y eso baja el contraste en vez
   de subirlo. Un numero apuntado de memoria en un comentario no es una
   medicion, y este llevaba semanas dando por bueno algo que no lo estaba.

   Y el "App" del riel se quedo en #E8A020 — 2,12:1 — justo en el mismo bloque
   que avisaba de que ese oro sobre blanco da 2,1:1. Se arreglo uno de los dos
   y el otro se quedo escrito al lado, mal, con la explicacion de por que
   estaba mal delante. Daniel lo vio antes que yo: "ahi ni se ve, por ejemplo".

   #95610A, medido sobre las dos superficies de verdad:
       sobre el riel blanco ................ 5,4:1
       sobre la pastilla dorada al 10% ..... 5,0:1
   Se lee y sigue siendo oro. Eso es para el TEXTO.
   ========================================================================= */

/* 1 · El "App" del logotipo: el amarillo de marca, igual que en la barra de
       arriba y en la web. Es la marca, y la marca no se retoca por una regla
       que no le aplica. */
.piel-cristal .side-logo .t span{color:#E8A020 !important}

/* 2 · La raya del buscador del panel. */
.piel-cristal #buscaTope{
  border-color:rgba(232,160,32,.55) !important;
}
.piel-cristal #buscaTope:focus,
.piel-cristal #buscaTope:focus-visible{
  border-color:#E8A020 !important;
  box-shadow:0 0 0 3px rgba(232,160,32,.18) !important;
  outline:none !important;
}
/* La lupa acompaña al borde: un icono gris dentro de un marco dorado se ve
   como un icono que se quedo sin actualizar. */
.piel-cristal .tope-lupa{color:#C98A14 !important}

/* 3 · "Cerrar sesion". */
.piel-cristal .side-foot .btn-ghost.tiny{
  color:#95610A !important;   /* #A8700A daba 3,74:1 sobre su propia pastilla */
  background:rgba(232,160,32,.10) !important;
  border-color:rgba(232,160,32,.34) !important;
}
.piel-cristal .side-foot .btn-ghost.tiny:hover{
  background:rgba(232,160,32,.18) !important;
  border-color:rgba(232,160,32,.50) !important;
}

/* 4 · La raya del riel, que es la que separa el menu del panel. */
.piel-cristal .side{
  border-right-color:rgba(232,160,32,.40) !important;
}

/* ---------- Y lo mismo en tema oscuro, donde el oro sube de tono ---------- */
/* El riel es blanco tambien en oscuro, asi que el logotipo no cambia. */
:root[data-tema="oscuro"] .piel-cristal .side-logo .t span{color:#E8A020 !important}
:root[data-tema="oscuro"] .piel-cristal #buscaTope{border-color:rgba(245,188,74,.42) !important}
:root[data-tema="oscuro"] .piel-cristal #buscaTope:focus,
:root[data-tema="oscuro"] .piel-cristal #buscaTope:focus-visible{
  border-color:#F5BC4A !important;box-shadow:0 0 0 3px rgba(245,188,74,.20) !important;
}
:root[data-tema="oscuro"] .piel-cristal .tope-lupa{color:#F5BC4A !important}
/* La pastilla de "Cerrar sesion" es clara en los dos temas: el oro claro
   ahi mide ~2:1. Va el mismo oro oscuro medido que en tema claro. */
:root[data-tema="oscuro"] .piel-cristal .side-foot .btn-ghost.tiny{
  color:#95610A !important;
  background:rgba(232,160,32,.10) !important;
  border-color:rgba(232,160,32,.34) !important;
}
:root[data-tema="oscuro"] .piel-cristal .side{border-right-color:rgba(245,188,74,.30) !important}

@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .piel-cristal .side-logo .t span{color:#E8A020 !important}
  :root:not([data-tema="claro"]) .piel-cristal #buscaTope{border-color:rgba(245,188,74,.42) !important}
  :root:not([data-tema="claro"]) .piel-cristal .tope-lupa{color:#F5BC4A !important}
  :root:not([data-tema="claro"]) .piel-cristal .side-foot .btn-ghost.tiny{
    color:#95610A !important;
    background:rgba(232,160,32,.10) !important;
    border-color:rgba(245,188,74,.34) !important;
  }
  :root:not([data-tema="claro"]) .piel-cristal .side{border-right-color:rgba(245,188,74,.30) !important}
}

/* =========================================================================
   EL RIEL ES BLANCO EN LOS DOS TEMAS                          23-sep-2026
   -------------------------------------------------------------------------
   Daniel, con un recorte de dos centimetros: "ahi ni se ve, por ejemplo".
   Tenia razon y el fallo es mio, de esta misma mañana.

   Medido en tema oscuro, sobre el riel:

       "Financore App"   #F2F5FB sobre blanco   1.04:1
       "Solo" (el plan)  #BBD9FC sobre celeste  1.08:1
       "Cerrar sesion"   #F5BC4A sobre crema    1.54:1
       el "App" del logo #F5BC4A sobre blanco   1.65:1

   Cuatro cosas invisibles. Y el motivo es EL DE SIEMPRE en este proyecto,
   el que llevo escrito en tres archivos: PUSE EL COLOR SEGUN EL TEMA Y EL
   TEXTO CAE SOBRE UNA SUPERFICIE QUE NO CAMBIA CON EL TEMA.

   En la piel de cristal el riel es BLANCO en claro y en oscuro — esta
   escrito doscientas lineas mas arriba, con su degradado y todo. Cuando
   esta mañana le di el oro al "App" y a "Cerrar sesion", lo hice con
   `:root[data-tema="oscuro"] .piel-cristal ...` y le puse el oro CLARO,
   el de fondo navy, a un fondo que es blanco.

   Lo de aqui no arregla cuatro colores: ata el riel a SU superficie. Todo
   lo que vive dentro de .side usa la tinta de fondo claro, pase lo que
   pase con el tema. Si mañana alguien vuelve a escribir una regla oscura
   que lo alcance, estas la pisan por ir al final.
   ========================================================================= */
:root[data-tema="oscuro"] .piel-cristal .side .side-logo .t,
:root:not([data-tema="claro"]) .piel-cristal .side .side-logo .t{
  color:#12203A !important;
}
:root[data-tema="oscuro"] .piel-cristal .side .side-logo .t span,
:root:not([data-tema="claro"]) .piel-cristal .side .side-logo .t span{
  /* El logotipo es el mismo en los dos temas: el amarillo de marca. */
  color:#E8A020 !important;
}
:root[data-tema="oscuro"] .piel-cristal .side .wa-plan,
:root:not([data-tema="claro"]) .piel-cristal .side .wa-plan{
  color:#1C63BE !important;
  background:rgba(47,132,240,.14) !important;
  border-color:rgba(47,132,240,.28) !important;
}
:root[data-tema="oscuro"] .piel-cristal .side .side-foot .btn-ghost.tiny,
:root:not([data-tema="claro"]) .piel-cristal .side .side-foot .btn-ghost.tiny{
  color:#95610A !important;
  background:rgba(232,160,32,.10) !important;
  border-color:rgba(232,160,32,.34) !important;
}
/* Y la raya que separa el riel del panel: sobre blanco el oro claro no se
   ve, asi que va el de fondo claro tambien. */
:root[data-tema="oscuro"] .piel-cristal .side,
:root:not([data-tema="claro"]) .piel-cristal .side{
  border-right-color:rgba(232,160,32,.40) !important;
}

/* =========================================================================
   EL FONDO CLARO, BLANCO ENTERO                               23-sep-2026
   -------------------------------------------------------------------------
   Daniel: "el fondo es como mitad blanco y mitad gris, no se a que
   corresponde; es posible que sea 100% blanco? asi no se ve esa raya
   divisora — poquito, pero si se nota".

   No es una raya: son los dos velos del lienzo claro.

       radial-gradient(1100px 660px at 80% -14%, rgba(47,132,240,.07) ...)
       radial-gradient(860px 600px at 4% 108%,  rgba(47,132,240,.05) ...)

   Un 7% de azul sobre blanco es casi nada, pero donde el degradado termina
   hay un borde — suave, pero un borde— y el ojo lo lee como una division
   de la pantalla. En oscuro esos velos dan profundidad y ahi se quedan; en
   claro no aportan nada porque el blanco ya ES el fondo, y lo unico que
   producen es esa costura.

   La tarjeta lleva el diseño. El fondo solo tiene que no estorbar.
   ========================================================================= */
.piel-cristal{
  --pc-velo:none;
}
:root[data-tema="oscuro"] .piel-cristal{
  --pc-velo:
    radial-gradient(900px 520px at 42% -16%, rgba(47,132,240,.26) 0%, transparent 58%),
    radial-gradient(760px 620px at 82% 6%, rgba(28,99,190,.20) 0%, transparent 62%),
    radial-gradient(1000px 700px at 4% 104%, rgba(19,66,132,.24) 0%, transparent 64%);
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .piel-cristal{
    --pc-velo:
      radial-gradient(900px 520px at 42% -16%, rgba(47,132,240,.26) 0%, transparent 58%),
      radial-gradient(760px 620px at 82% 6%, rgba(28,99,190,.20) 0%, transparent 62%),
      radial-gradient(1000px 700px at 4% 104%, rgba(19,66,132,.24) 0%, transparent 64%);
  }
}

/* =========================================================================
   LOS ORBES SOLO TIENEN SENTIDO SOBRE FONDO OSCURO        23-sep-2026
   -------------------------------------------------------------------------
   Daniel, dos veces: "el fondo es como mitad blanco y mitad gris" y luego
   "porque cuando recargo me sale un fondo blanco con mitad gris".

   La primera vez mire el velo del lienzo y lo quite. No era eso — o no era
   solo eso. Reproduciendolo en produccion a 1900px se ve, y midiendolo
   salen tres capas que nadie habia mirado sobre blanco:

       .gd-orb-1   indigo  rgba(99,102,241,.30)   arriba a la izquierda
       .gd-orb-2   AMARILLO rgba(255,214,0,.24)   abajo a la derecha
       .gd-orb-3   cian    rgba(6,182,212,.20)    centro derecha

   Tres circulos de ~500px con blur(90px) al 60% de opacidad, moviendose
   en bucle. Sobre el lienzo oscuro son profundidad: es lo que hace que la
   maqueta de cristal parezca tener aire detras. Sobre blanco son una
   mancha gris-violeta a un lado y una crema al otro — y como se mueven,
   la mancha cambia de sitio en cada recarga. De ahi el "cuando recargo".

   Vienen de glassy.css, la maqueta original, que se diseño en oscuro. En
   claro no se apagaron nunca porque el tema claro llego despues.

   En claro se apagan. En oscuro se quedan igual, que ahi hacen su trabajo.
   ========================================================================= */
.piel-cristal .gd-ambient-orbs{display:none}
:root[data-tema="oscuro"] .piel-cristal .gd-ambient-orbs{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .piel-cristal .gd-ambient-orbs{display:block}
}

/* ===========================================================================
   EL CELULAR, CINCO ARREGLOS                                      1-oct-2026
   Daniel, con capturas del teléfono.
   =========================================================================== */
/* 1. La barra de arriba del celular es azul también en tema claro: el logo
      oscuro no se leía encima. Ahí va siempre el blanco. */
.piel-cristal .movil-top .mt-marca img,
:root[data-tema="claro"] .piel-cristal .movil-top .mt-marca img{content:url('img/financore-blanco.png')}

@media (max-width:620px){
  /* 2. Qué hago hoy: el texto de la tarea quedaba en una columna de una
        palabra porque los botones se quedaban al lado. Los botones bajan a
        su propia fila, a lo ancho. */
  .tarea .tarea-c{flex:1 1 calc(100% - 52px)}
  .tarea .tarea-acc{flex:1 1 100%;justify-content:stretch;margin-left:43px}
  .tarea .tarea-acc .btn{flex:1 1 auto;width:auto;margin-top:0}

  /* 4. Las cuatro pestañas del expediente caben sin cortar «Informes». */
  .tabs{display:flex;width:100%}
  .tabs .tab{flex:1 1 auto;justify-content:center;padding:9px 6px;font-size:13px;white-space:nowrap}
}
/* 3. Certificación: la píldora de minutos se estiraba a todo el ancho y el
      número grande quedaba encima. Vuelve a su tamaño. */
.cert-mod .bdg{align-self:flex-start}

/* 5. Informes: la tarjeta medía más que la pantalla (1fr no baja del ancho
      de sus botones) y «Compartir» se salía por la derecha. */
@media (max-width:860px){
  .grid2,.grid3,.grid4{grid-template-columns:minmax(0,1fr)}
}
.inf-acts{display:flex;gap:8px;flex-wrap:wrap}
.inf-acts > .btn{flex:1 1 auto}

/* LOS NUMEROS DE LOS PASOS, EN DORADO EN EL TEMA OSCURO (2-oct-2026, Daniel).
   "Por donde empezar", el orden de las herramientas, las tareas del dia y
   los pasos de Contenido: en oscuro iban azul sobre azul y no se leian.
   Mismo dorado y misma tinta que el numerito de la campana. */
:root[data-tema="oscuro"] .piel-cristal :is(.tool .rank, .palanca .pl-n, .tarea-n, .ig-num){
  background:#F5BC4A !important;color:#1A1405 !important;border-color:transparent !important;
  box-shadow:0 2px 10px rgba(245,188,74,.28) !important;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .piel-cristal :is(.tool .rank, .palanca .pl-n, .tarea-n, .ig-num){
    background:#F5BC4A !important;color:#1A1405 !important;border-color:transparent !important;
    box-shadow:0 2px 10px rgba(245,188,74,.28) !important;
  }
}

/* ===========================================================================
   LA ULTIMA PALABRA DEL PAPEL
   ---------------------------------------------------------------------------
   23-sep-2026. Daniel: "la app en negro sigue con los errores desde el
   principio; negro en azul, ya quedamos que eso no".

   Medido sobre los tres informes con el tema oscuro puesto: 95 textos por
   debajo del minimo en el informe tecnico y 57 en la nota de venta. Todos el
   mismo par -- tinta de papel #1E2A3A sobre el panel oscuro del tema,
   #182234. 1,10:1. Cada nombre de acreedor, cada saldo, cada fila de la tabla
   de disputas.

   DOS COSAS SE JUNTABAN, Y LAS DOS SE ARREGLAN AQUI.

   1. EL TEMA ENTRABA EN EL PAPEL. cristal.css dice `.rep .tw{background:#fff}`
      (0,2,0) y mas abajo `:root[data-tema="oscuro"] .tw{background:#182234}`
      (0,3,0). Gana el tema. El envoltorio de la tabla se volvia panel oscuro,
      la tinta seguia siendo la del papel, y salia negro sobre negro.

      El encabezado de tabla iba por el mismo camino con la tinta:
      `:root[data-tema="oscuro"] .piel-cristal :is(.tarj-num,.tarj-pie b,th,...)`
      mide (0,4,1) --porque `:is()` toma la especificidad de su argumento MAS
      fuerte, que ahi es `.tarj-pie b`-- y cualquier regla razonable del papel
      se queda por debajo. De ahi el prefijo repetido cinco veces: suma
      (0,5,0) y cierra la discusion. Es feo y es a proposito.

   2. LA REGLA DEL PAPEL ENTRABA EN LAS ISLAS. El informe no es todo blanco:
      lleva bloques oscuros por diseno --la cabecera azul, la llamada a la
      plataforma, el cierre, los avisos rojos, los numeros de paso--. La regla
      general les metia tinta de papel dentro. El titulo "Las disputas se
      procesan aqui" llevaba en 1,03:1 EN LOS DOS TEMAS desde que se escribio.

      El primer intento fue pintarlas yo de blanco. Mal: eso se llevaba por
      delante los matices que ya tenian --el dorado del rotulo de la cabecera,
      el azul palido del nombre del cliente-- y me obligaba a acertar el color
      de cada una. Lo correcto es NO ENTRAR: `:not(:is(...) *)` deja fuera
      todo lo que cuelgue de una isla, y cada isla sigue mandando en lo suyo
      con las reglas que ya tenia en style.css.

   La regla de verdad, la de siempre en esta casa: LA TINTA SIGUE A SU
   SUPERFICIE, no al tema ni a la pagina. El papel manda en el papel; dentro
   de una isla manda la isla.

   El informe se imprime y se entrega en mano: lo que el consultor ve en
   pantalla tiene que ser lo que sale por la impresora.
   =========================================================================== */
#papel-manda{}   /* marca que busca pruebas/papel-manda.test.mjs */

/* --- 1. El papel y sus superficies: blancas en los dos temas --- */
:is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato){background:#FFFFFF !important;color:#1E2A3A !important}
:is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato) .tw{
  background:#FFFFFF !important;border-color:#E7EAF0 !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
}
:is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato) :is(th,td){background:transparent !important;border-color:#E7EAF0 !important}
:is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato) tbody tr:nth-child(even) :is(th,td){background:transparent !important}

/* --- 2. La tinta del papel. No entra en las islas ni en lo que cuelga de
   ellas: ese `:not(:is(...) *)` es lo que hace que esto sea seguro. --- */
:is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato) :is(p,li,td,th,span,div,small,em,i,b,strong,h1,h2,h3,h4,h5):not(:is(.rhead,.cta,.cierre,.duele,.bloque,.paso-n,.af-n,.niv-p,.c-cab,.box)):not(:is(.rhead,.cta,.cierre,.duele,.bloque,.paso-n,.af-n,.niv-p,.c-cab,.box) *){color:#1E2A3A !important}
:is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato) :is(h1,h2,h3,h4,h5,b,strong):not(:is(.rhead,.cta,.cierre,.duele,.bloque,.paso-n,.af-n,.niv-p,.c-cab,.box)):not(:is(.rhead,.cta,.cierre,.duele,.bloque,.paso-n,.af-n,.niv-p,.c-cab,.box) *){color:#12203A !important}
:is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato) :is(.sub,.mut,small,.rfoot):not(:is(.rhead,.cta,.cierre,.duele,.bloque,.paso-n,.af-n,.niv-p,.c-cab,.box)):not(:is(.rhead,.cta,.cierre,.duele,.bloque,.paso-n,.af-n,.niv-p,.c-cab,.box) *){color:#4A5872 !important}

/* --- 3. Las islas oscuras.
   Solo hace falta devolverles SU PROPIO color, porque cristal.css trae un
   `:is(.rep,...) :is(...,div,...){color:inherit}` de (0,2,1) que le gana a
   `.rep .cta{color:#fff}` de (0,2,0) -- y por eso la llamada azul estaba
   invisible tambien en tema claro. Lo de dentro no se toca: hereda de aqui
   o conserva el suyo (el dorado del rotulo, el azul del nombre). --- */
:is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato) :is(.rhead,.cta,.cierre,.duele,.bloque,.paso-n,.af-n,.niv-p,.c-cab){color:#FFFFFF !important}
/* La cabecera azul del contrato es isla (24-sep-2026): el nombre del despacho
   y el titulo salian en tinta de papel sobre navy. Lema y subtitulo en el
   gris claro que les da style.css. */
:is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato) .c-cab :is(.c-lema,.c-sub){color:#C9D0E0 !important}
/* El boton de dentro de la llamada es blanco: ahi la letra vuelve a ser azul. */
:is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato) .cta a{color:#1565C0 !important}

/* --- 4. La caja clara es isla tambien, pero de papel: su tinta es la del
   informe, no blanca. --- */
:is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato) .box{color:#1E2A3A !important}
:is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato):is(.rep,.doc,.hoja,.contrato) .box :is(b,strong){color:#12203A !important;font-weight:800}

/* =========================================================================
   EL CAJON EN EL TELEFONO
   -------------------------------------------------------------------------
   25-sep-2026, auditoria: en 900px o menos /app no se podia usar. El riel
   seguia metido en la rejilla (316px, rotulos cortados), el contenido
   empezaba debajo de la pantalla y el velo se quedaba con todos los toques.
   Aqui, al final, porque este archivo fija top y alto del riel con
   !important para el escritorio y lo ultimo que carga es lo que gana.
   ========================================================================= */
@media(max-width:900px){
  .piel-cristal .side{
    position:fixed !important;top:0 !important;left:0;bottom:0;
    width:min(300px,86vw);height:100dvh !important;z-index:60;
    border-radius:0 20px 20px 0 !important;
    transform:translateX(-101%);
    transition:transform .26s cubic-bezier(.22,.8,.28,1);
  }
  :root[data-cajon="si"] .piel-cristal .side{transform:none}
  /* Los atajos del riel curvo se montarian sobre los rotulos: en el
     telefono sobran, la columna ya lleva los nombres. */
  .piel-cristal .fc-dock{display:none !important}
  .piel-cristal .side::before,.piel-cristal .side::after{display:none !important}
  .piel-cristal .side{padding-left:14px !important;flex-wrap:nowrap !important;overflow-y:auto !important}
  /* El riel ya no ocupa columna: flota encima. */
  .piel-cristal #app{display:block !important;padding-top:58px}
  .piel-cristal #view{height:calc(100dvh - 58px);border-radius:0 !important}
}

/* "Tu día" resalta en dorado tambien con la piel de cristal (Daniel, 30-sep-2026). */
.piel-cristal .nav-sep.nav-sep-dest,.piel-cristal .side .nav-sep.nav-sep-dest{color:#E8A020 !important;font-weight:800 !important;font-size:12.5px !important;opacity:1 !important}

/* =========================================================================
   IMPRIMIR TODAS LAS PAGINAS                                   30-sep-2026
   Daniel: "el PDF solo me da una sola pagina", en todos los informes.
   La consola de cristal tiene alto fijo (100dvh) y el scroll va dentro de
   #view, con overflow:hidden en el cuerpo: al imprimir, el navegador solo
   veia el trozo visible. Al imprimir se suelta todo para que el informe
   fluya en las paginas que necesite.
   ========================================================================= */
@media print{
  html, body.piel-cristal, .piel-cristal,
  .piel-cristal .glassy-dashboard-container, #marcoCristal,
  .piel-cristal .gd-glass-console, .piel-cristal .app, .piel-cristal #view{
    height:auto !important; max-height:none !important; min-height:0 !important;
    overflow:visible !important; position:static !important; display:block !important;
  }
  .piel-cristal .side, .piel-cristal .whoami, .piel-cristal .mt, .piel-cristal .ph{display:none !important}
}

/* ===========================================================================
   EL MENÚ EN PANTALLAS BAJAS                                      1-oct-2026
   ---------------------------------------------------------------------------
   A 768 px de alto el menú medía 735 y cabían 563: «Más herramientas» quedaba
   escondido bajo la tarjeta del usuario sin ninguna pista. Por debajo de 900
   px de alto los botones se aprietan (40 → 30 px) y, si aun así no cabe, sale
   «Más ↓» sobre un degradado (vigilarNavMas en app.js).
   =========================================================================== */
@media (max-height:900px){
  .piel-cristal .side #nav .nav-i{padding-top:5px !important;padding-bottom:5px !important}
  .piel-cristal .side #nav .nav-i.nav-gap{margin-top:3px}
  .piel-cristal .side #nav .nav-sep{margin-top:8px !important}
  .piel-cristal .side-logo{margin-bottom:8px !important}
}
.nav-mas{
  position:relative;z-index:3;flex:none;align-self:stretch;
  margin:-34px 4px 0;padding:14px 0 6px;border:0;cursor:pointer;
  font:700 12.5px/1 inherit;letter-spacing:.02em;color:#1C63BE;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.96) 55%);
}
.nav-mas[hidden]{display:none}
.nav-mas:hover{text-decoration:underline}

/* La ficha del menu (2-oct-2026, Daniel): el logo del despacho en el cuadro
   de la inicial, sobre blanco para que cualquier logo se lea, y el nombre
   de la empresa en negrita como el del usuario. */
.wa-ini.wa-ini-logo{background:#fff !important;padding:3px;overflow:hidden}
.wa-ini.wa-ini-logo img{width:100%;height:100%;object-fit:contain;display:block}
.whoami .wa-txt i.wa-org{font-weight:700 !important;display:block}
.piel-cristal .side .whoami .wa-txt i.wa-org{color:#12203A !important}