/* ═══════════════════════════════════════════════════════════════════════════
   PRISMA · EL TEMA CLARO (2026-09-23, pedido de Luis)
   ───────────────────────────────────────────────────────────────────────────
   «Todas están en tema oscuro. Me gustaría que todas tuvieran una capa de tema claro, que
   cada usuario pueda elegir cuál quiere y que eso se recuerde. Y el tema claro tiene que
   cubrir el 100% de la aplicación: modales, mensajes, toda la apariencia.»

   ESTE ARCHIVO ES EL LIBRO DEL TEMA, y se copia igual a las seis apps que lo llevan: CIMA,
   ARIA, VIVERO, Golfito, RAÍCES y CAMPO. (CEPAS queda fuera por decisión de Luis; NIDO
   también: es una portada de fotografías a sangre, y ahí el claro es otro diseño.)

   ── CÓMO ESTÁ PENSADO ──────────────────────────────────────────────────────
   No se invierten colores. Cada color tiene un PAPEL y el papel se sostiene en los dos temas;
   lo que cambia es qué color lo cumple. Un token dice para qué sirve («lo que alerta»), no de
   qué color es, y por eso la misma regla sirve en oscuro y en claro sin escribirse dos veces.

   ── POR QUÉ ESTOS COLORES Y NO OTROS ───────────────────────────────────────
   Están MEDIDOS contra el fondo claro, no elegidos a ojo (WCAG: 4.5:1 para texto):
       ink    #1A2633 → 13.85:1   el texto que manda
       deep   #005565 →  7.62:1   el acento fuerte
       teal   #006D82 →  5.40:1   el acento
       ocre   #8A6A2F →  4.53:1   lo que espera
       rojo   #B3261E →  5.90:1   lo que alerta
       salvia #7D9B5B →  2.83:1   NO ALCANZA PARA TEXTO
   Ese último número es el hallazgo: en el tema oscuro salvia da 4,90:1 sobre tinta y sirve
   para texto, pero sobre un fondo claro NO. Y resulta que el libro de marca ya lo decía por
   otro camino —«salvia sólo relleno»—, así que la medición y la regla coinciden. Para el poco
   texto que hoy va en salvia, el claro usa un salvia oscurecido al 75% (#5D7444 → 4,69:1),
   que es el primero de la escala que alcanza.
   Ojo con el ocre: VIVERO venía usando #B8904F, que sobre claro da 2,66:1 y es ilegible. En
   claro se vuelve al ocre del libro.

   ── LA FOTOGRAFÍA NO TIENE TEMA ────────────────────────────────────────────
   Las cabeceras con foto a sangre y su velo se quedan exactamente como están en los dos temas,
   y el texto sobre ellas sigue en crema. Una fotografía del Arenal no es «clara» ni «oscura»:
   es lo que es, y lavarla para que combine sería estropear la única pieza que ya estaba bien.
   Lo que cambia es TODO lo demás: el lienzo, las tarjetas, las tablas, los modales, los avisos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── EL TEMA OSCURO: el de siempre, ahora dicho con tokens ───────────────────────────────── */
:root,
html[data-tema="oscuro"]{
  /* las superficies, de atrás hacia adelante */
  --pz-lienzo:       #141D27;   /* el fondo de la página */
  --pz-superficie:   #1A2633;   /* tarjetas, tablas, modales */
  --pz-superficie-2: #16222E;   /* lo que se apoya encima */
  --pz-hundido:      #101A24;   /* campos de texto, lo que recibe */
  --pz-velo:         rgba(10,16,22,.72);   /* el fondo detrás de un modal */

  /* los filetes */
  --pz-borde:        rgba(234,223,206,.12);
  --pz-borde-suave:  rgba(234,223,206,.07);
  --pz-borde-fuerte: rgba(234,223,206,.28);

  /* el texto, en tres voces */
  --pz-texto:        #FFFFFF;
  --pz-texto-2:      rgba(234,223,206,.72);
  --pz-texto-3:      rgba(234,223,206,.45);
  --pz-texto-sobre-acento: #FFFFFF;

  /* lo que significa cada color */
  --pz-acento:       #2A93A8;   /* teal aclarado: sobre tinta necesita subir para leerse */
  --pz-acento-fuerte:#006D82;
  --pz-acento-suave: rgba(42,147,168,.16);
  --pz-entra:        #7D9B5B;   /* salvia: lo que entra, lo que está al día */
  --pz-entra-suave:  rgba(125,155,91,.16);
  --pz-espera:       #B8904F;   /* ocre: lo pendiente */
  --pz-espera-suave: rgba(184,144,79,.16);
  --pz-alerta:       #B3261E;
  --pz-alerta-suave: rgba(179,38,30,.18);

  /* las sombras: en oscuro son profundas y casi negras */
  --pz-sombra:       0 18px 40px -26px rgba(6,12,18,.95);
  --pz-sombra-alta:  0 40px 90px -40px rgba(6,12,18,.98);

  color-scheme: dark;
}

/* ── EL TEMA CLARO ───────────────────────────────────────────────────────────────────────── */
html[data-tema="claro"]{
  /* El lienzo no es blanco: es el crema del libro lavado hasta donde un fondo entero lo
     aguanta. Blanco puro de pared a pared cansa la vista y deja las tarjetas sin dónde
     apoyarse; con el crema detrás, cada tarjeta blanca se levanta sola sin necesitar borde. */
  --pz-lienzo:       #F6F3ED;
  --pz-superficie:   #FFFFFF;
  --pz-superficie-2: #FBF9F5;
  --pz-hundido:      #EFEAE1;   /* crema de verdad: lo que recibe texto se hunde, no se eleva */
  --pz-velo:         rgba(26,38,51,.38);

  --pz-borde:        rgba(26,38,51,.12);
  --pz-borde-suave:  rgba(26,38,51,.07);
  --pz-borde-fuerte: rgba(26,38,51,.30);

  --pz-texto:        #1A2633;   /* la tinta de la marca, que acá es el texto y no el fondo */
  --pz-texto-2:      rgba(26,38,51,.66);
  --pz-texto-3:      rgba(26,38,51,.45);
  --pz-texto-sobre-acento: #FFFFFF;

  --pz-acento:       #006D82;   /* teal puro: sobre claro no hace falta aclararlo */
  --pz-acento-fuerte:#005565;   /* deep */
  --pz-acento-suave: rgba(0,109,130,.10);
  --pz-entra:        #5D7444;   /* salvia al 75%: el primero de la escala que sirve para texto */
  --pz-entra-relleno:#7D9B5B;   /* salvia entera, sólo donde es relleno y no texto */
  --pz-entra-suave:  rgba(125,155,91,.16);
  --pz-espera:       #8A6A2F;   /* el ocre del libro, no el #B8904F que no se lee en claro */
  --pz-espera-suave: rgba(138,106,47,.12);
  --pz-alerta:       #B3261E;
  --pz-alerta-suave: rgba(179,38,30,.10);

  /* En claro una sombra negra ensucia. Se usa la tinta, muy abierta y muy tenue. */
  --pz-sombra:       0 10px 30px -18px rgba(26,38,51,.20);
  --pz-sombra-alta:  0 30px 70px -35px rgba(26,38,51,.28);

  color-scheme: light;
}

/* En oscuro, salvia sí se lee, así que el token de relleno y el de texto son el mismo. */
:root, html[data-tema="oscuro"]{ --pz-entra-relleno: var(--pz-entra); }

/* ── PRENDER LA LUZ, PERO LIGERO ─────────────────────────────────────────────────────────────
   Luis: «el cambio es super lento, se pega, no es fluido, se siente feo».
   Tenía razón y el error era de peso, literal: yo había puesto la transición sobre TODOS los
   elementos y además sobre sus `::before` y `::after`, e incluía `background-image` y
   `box-shadow`. Animar un gradiente o una sombra obliga al navegador a repintar el elemento
   entero en cada cuadro; multiplicado por cientos de nodos, se ahoga. No era lento por la
   duración: era caro por lo que se animaba.
   Ahora viajan sólo los dos colores planos —el fondo y la letra—, que el navegador resuelve
   sin repintar geometría, y en 240ms, que es el tiempo de encender una luz y no el de una
   animación. Los gradientes, las sombras y los filetes cambian de golpe: nadie los mira
   durante ese cuarto de segundo, y son justamente los que costaban.  */
/* QUÉ VIAJA Y QUÉ NO. La versión anterior le ponía transición también a `p` y `span`, que en
   una pantalla de reportes son cientos de elementos: el navegador tenía que interpolar el color
   de cada uno, cuadro por cuadro. Eso no se ve —el ojo registra el cambio de las SUPERFICIES,
   no el de cada línea de texto— y era lo que hacía que el cambio se sintiera pesado.
   Viajan las superficies grandes: el fondo de la página, el del contenido, el del menú y el de
   las tarjetas. El texto cambia de golpe debajo, y no se nota, porque a 240ms el fondo todavía
   está llegando. */
html.pz-encendiendo,
html.pz-encendiendo body,
html.pz-encendiendo main,
html.pz-encendiendo #main-sidebar,
html.pz-encendiendo #main-app,
html.pz-encendiendo .fin-kpi,
html.pz-encendiendo .fin-tarjeta,
html.pz-encendiendo [class*="view-"]{
  transition:background-color .24s ease, color .24s ease !important;
  transition-delay:0s !important; }

/* Quien pidió menos movimiento no ve el viaje: el color cambia y ya. */
@media (prefers-reduced-motion:reduce){
  html.pz-encendiendo, html.pz-encendiendo *{ transition:none !important; }
}

/* ── EL BOTÓN DEL TEMA: EL CÍRCULO DE CIMA ───────────────────────────────────────────────────
   Las medidas no son nuevas: son exactamente las de `#accesos-rapidos button` en CIMA —2,1rem,
   fondo transparente, filete de crema al 16%, ícono de 16px—, porque Luis pidió que fueran «de
   hecho iguales para que calce ahí». Repetir la medida en vez de inventar una parecida es lo
   que hace que, puesto al lado de los otros, no se note cuál llegó después.
   Un solo botón que alterna, y el rótulo vive en el `title`: en una fila de círculos, una
   palabra al lado rompería la fila. */
.pz-tema-btn{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:2.1rem; height:2.1rem; padding:0; margin:0; flex:none;
  background:transparent;
  border:1px solid rgba(234,223,206,.16);
  border-radius:999px;
  color:#EADFCE;
  cursor:pointer; outline:none; box-shadow:none;
  transition:border-color .25s ease, background-color .25s ease; }
.pz-tema-btn:hover{ border-color:rgba(234,223,206,.70); }
.pz-tema-btn:focus-visible{ outline:2px solid var(--pz-acento); outline-offset:2px; }
.pz-tema-btn .material-icons-outlined{ font-size:16px; line-height:1; color:#EADFCE; }

/* La fila que se crea bajo el nombre cuando la app no tiene una propia. Nace centrada y con el
   mismo aire que usa CIMA entre el nombre y sus accesos, para que el día que aparezca un
   segundo botón entre al lado sin tocar nada. */
.pz-accesos{
  display:flex; align-items:center; justify-content:center;
  gap:.6rem; margin-top:.9rem; }

/* SOBRE LA FOTOGRAFÍA el círculo necesita su propio fondo, igual que en CIMA: un filete solo
   no se sostiene contra el follaje. Es la misma tinta hundida de `#barra-lateral
   #accesos-rapidos button`. */
html.riel-con-banda .pz-accesos .pz-tema-btn,
#barra-lateral .pz-tema-btn{
  background:rgba(13,23,32,.62);
  border-color:rgba(234,223,206,.34); }
html.riel-con-banda .pz-accesos .pz-tema-btn:hover,
#barra-lateral .pz-tema-btn:hover{
  background:rgba(13,23,32,.75); border-color:#EADFCE; }
html.riel-con-banda .pz-accesos .pz-tema-btn .material-icons-outlined{ color:#FFFFFF; }

/* Con el riel angosto la fila sigue centrada y el círculo crece igual que los de CIMA. */
body.riel-angosto .pz-accesos{ gap:.45rem; margin-top:1rem; }
body.riel-angosto .pz-tema-btn{ width:2.3rem; height:2.3rem; }

/* Si una app todavía no tiene dónde ponerlo, flota abajo a la izquierda en vez de perderse. */
.pz-tema-btn--suelto{
  position:fixed; left:1rem; bottom:1rem; z-index:60;
  background:var(--pz-superficie); box-shadow:var(--pz-sombra); }

@media (prefers-reduced-motion:reduce){ .pz-tema-btn{ transition:none; } }