/* BASE COMUN de las apps de Vale (contrato de base comun, 8 sep 2026):
   variables y paleta (oscuro, claro, fosforo), reset y tipografia, carga
   inicial, cabecera, contenido, botones, etiquetas, banner, pestanas, hoja
   modal y listas de acciones, cuadricula de opciones, campos, iconos,
   estado vacio, avisos, accesibilidad y zoom, velo de ocupado, calendario
   de semana y mes (js/calendario.js), conteos con semaforo y tablas del
   patron de Mi dia, y el tema fosforo con sus efectos y sonidos. Este
   archivo es IGUAL en todas las apps (la fuente es SER PRO APP); lo propio
   de cada app va en css/app.css, que se carga despues. Los colores de marca
   viven en las variables. */

:root {
  color-scheme: dark;

  /* Paleta de ALTO contraste: usuarios con vista cansada y daltonismo.
     Nada de grises tenues; los secundarios siguen leyendose de sobra. */
  --fondo:        #07090d;
  --superficie:   #0d1219;
  --superficie-2: #141b25;
  --tinta:        #eef4fa;
  --tinta-suave:  #b6c7d8;
  --tinta-tenue:  #95a8bb;
  --borde:        #2a3648;
  --borde-fuerte: #46586e;

  --primario:      #35e0f2;   /* cian electrico */
  --primario-vivo: #7deefb;
  --primario-tinta:#041418;   /* texto sobre cian */
  --primario-suave:#0c2830;
  --primario-borde: rgba(53, 224, 242, .5);

  --ok:      #3ce392;
  --aviso:   #ffc14d;
  --aviso-bg:#251a06;
  --peligro: #ff6e63;

  /* Esquinas afiladas en toda la app */
  --r-ch: 0;
  --r-md: 0;
  --r-gd: 0;

  --sombra-1: none;
  --sombra-2: 0 8px 28px rgba(0, 0, 0, .55);
  --sombra-3: 0 -8px 30px rgba(0, 0, 0, .6);
  --glow: 0 0 14px rgba(53, 224, 242, .3);

  --corte: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);

  --sup: env(safe-area-inset-top, 0px);
  --inf: env(safe-area-inset-bottom, 0px);

  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------- */
/* Tema claro (para sol directo en planta)                           */
/* Mismo lenguaje: esquinas afiladas, cortes, mono. El cian electrico */
/* pasa a teal oscuro porque sobre blanco no se lee.                  */
/* ---------------------------------------------------------------- */

:root[data-tema="claro"] {
  color-scheme: light;

  /* Alto contraste tambien en claro: tinta casi negra, secundarios oscuros,
     bordes marcados y teal profundo. Pensado para sol directo en planta. */
  --fondo:        #eef1f4;
  --superficie:   #ffffff;
  --superficie-2: #eef2f6;
  --tinta:        #10181f;
  --tinta-suave:  #33465a;
  --tinta-tenue:  #45586a;
  --borde:        #b7c2cd;
  --borde-fuerte: #7e93a6;

  --primario:      #045b6b;   /* teal profundo, legible sobre blanco */
  --primario-vivo: #087f94;
  --primario-tinta:#ffffff;
  --primario-suave:#d3edf2;
  --primario-borde: rgba(4, 91, 107, .55);

  --ok:      #0c6b3d;
  --aviso:   #7a4c04;
  --aviso-bg:#fdf3dd;
  --peligro: #b3261e;

  --sombra-1: none;
  --sombra-2: 0 8px 24px rgba(19, 28, 36, .16);
  --sombra-3: 0 -8px 26px rgba(19, 28, 36, .14);
  --glow: 0 0 0 3px rgba(8, 127, 148, .15);
}

:root[data-tema="claro"] #app { background: linear-gradient(180deg, var(--app-arriba, var(--fondo)) 0%, var(--fondo) 260px); }
:root[data-tema="claro"] .cabecera { background: rgba(255, 255, 255, .96); }
:root[data-tema="claro"] .fab { filter: drop-shadow(0 6px 16px rgba(19, 28, 36, .3)); }
:root[data-tema="claro"] .pestana--activa { text-shadow: none; }
:root[data-tema="claro"] .btn--peligro { color: #fff; }
:root[data-tema="claro"] .banner .btn { color: #fff; }
:root[data-tema="claro"] .aviso--error { background: #fdeae8; color: #7c150c; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body.sin-scroll { overflow: hidden; }

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 720px;
  margin: 0 auto;
  /* El color de arriba del degradado es de marca: cada app lo define en su
     app.css (--app-arriba, por tema); sin definir, plano con el fondo. */
  background: linear-gradient(180deg, var(--app-arriba, var(--fondo)) 0%, var(--fondo) 260px);
  position: relative;
  /* Nada ensancha la pagina: lo que se salga por la derecha se recorta en
     vez de dejar que el navegador scrollee de lado (Vale, 10 sep 2026:
     "hacia abajo cuando es necesario, hacia los lados NUNCA"). clip no
     crea contenedor de scroll (sticky sigue igual); un navegador viejo
     lo ignora y queda como antes. */
  overflow-x: clip;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 650; }
h1 { font-size: 1.3rem; letter-spacing: .01em; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1.02rem; }
h4 { font-size: .95rem; }
p  { margin: 0; }

button { font-family: inherit; font-size: inherit; }

/* ---------------------------------------------------------------- */
/* Carga inicial                                                     */
/* ---------------------------------------------------------------- */

.cargando {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2rem; height: 100%; color: var(--tinta-suave);
}
.cargando__marca {
  font-weight: 700; letter-spacing: .22em; text-transform: uppercase; font-size: .8rem;
}
.cargando__barra { width: 150px; height: 2px; background: var(--borde); overflow: hidden; }
.cargando__barra span {
  display: block; height: 100%; width: 40%; background: var(--primario);
  box-shadow: var(--glow);
  animation: deslizar 1.1s ease-in-out infinite;
}
@keyframes deslizar { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* ---------------------------------------------------------------- */
/* Cabecera                                                          */
/* ---------------------------------------------------------------- */

.cabecera {
  position: sticky; top: 0; z-index: 20;
  padding: calc(var(--sup) + .55rem) .75rem .55rem;
  background: rgba(11, 16, 23, .96);
  border-bottom: 1px solid var(--borde);
}
.cabecera::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--primario) 0%, transparent 45%);
}

.cabecera__fila { display: flex; align-items: center; gap: .5rem; min-height: 44px; }
/* Boton de accion al extremo derecho de la cabecera (p. ej. DIRECTORIO
   en Ventas), alineado con la flecha y el titulo. */
.cabecera__accion { margin-left: auto; flex: 0 0 auto; }

.org-select {
  flex: 1; min-width: 0; padding: .4rem .5rem;
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-ch);
  background: var(--superficie); color: var(--tinta); font: inherit; font-size: .86rem;
}
.org-select:disabled { opacity: .6; }
.crece { flex: 1; }
/* ---------------------------------------------------------------- */
/* Contenido                                                         */
/* ---------------------------------------------------------------- */

.contenido {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* overflow-y auto vuelve auto tambien el eje x: cualquier cosa mas ancha
     que la pantalla (un titulo que no se parte) hacia scrollear la pagina
     de lado sin que se notara (Vale, 10 sep 2026). Nunca. */
  overflow-x: hidden;
  padding: .75rem .75rem calc(5.5rem + var(--inf));
}
.contenido--conBarra { padding-bottom: calc(7.5rem + var(--inf)); }

.panel { display: flex; flex-direction: column; gap: .6rem; }

/* ---------------------------------------------------------------- */
/* Botones                                                           */
/* ---------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 48px; padding: 0 1.1rem;
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie-2); color: var(--tinta);
  font-weight: 600; cursor: pointer;
  transition: transform .08s ease, background .15s ease;
}
.btn:active { transform: scale(.975); }

.btn--primario {
  background: var(--primario); border-color: var(--primario);
  color: var(--primario-tinta); font-weight: 700;
  clip-path: var(--corte);
}
.btn--peligro  { background: var(--peligro); border-color: var(--peligro); color: #16060a; font-weight: 700; }
.btn--fantasma { background: transparent; border-color: var(--borde-fuerte); color: var(--tinta); }
.btn--pequeno  { min-height: 40px; padding: 0 .85rem; font-size: .88rem; }
.btn--bloque {
  width: 100%; border: 1px dashed var(--borde-fuerte);
  background: transparent; color: var(--primario); font-weight: 600;
}

.icono-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  border: none;
  background: transparent; color: var(--tinta);
  font-size: 1.15rem; cursor: pointer;
}
.icono-btn:active { background: var(--superficie-2); }
.icono-btn--claro { color: #fff; }
.icono-btn--mini  { width: 34px; height: 34px; font-size: 1.2rem; font-weight: 700; }
.icono-btn--tenue { color: var(--tinta-tenue); }

.enlace {
  border: none; background: none; padding: 0;
  color: var(--peligro); font-size: .78rem; font-weight: 600; cursor: pointer;
}

.fab {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(1rem + var(--inf)); z-index: 30;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 52px; padding: 0 1.5rem 0 1.15rem;
  border: none;
  background: var(--primario); color: var(--primario-tinta);
  font-weight: 700; font-size: .85rem;
  letter-spacing: .1em; text-transform: uppercase;
  clip-path: var(--corte);
  filter: drop-shadow(0 0 12px rgba(53, 224, 242, .35)) drop-shadow(0 6px 18px rgba(0, 0, 0, .5));
  cursor: pointer;
}
.fab:active { transform: translateX(-50%) scale(.97); }
.fab__mas { font-size: 1.35rem; line-height: 1; margin-top: -2px; }

/* ---------------------------------------------------------------- */
/* Etiquetas y adornos                                               */
/* ---------------------------------------------------------------- */

.pista { font-size: .84rem; color: var(--tinta-tenue); }
.parrafo { font-size: .92rem; color: var(--tinta-suave); margin-bottom: .8rem; }

.etiqueta {
  padding: .18rem .55rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  flex: 0 0 auto;
}
.etiqueta--abierto {
  background: var(--primario-suave); color: var(--primario);
  border: 1px solid var(--primario-borde);
}
.etiqueta--cerrado {
  background: transparent; color: var(--tinta-tenue);
  border: 1px solid var(--borde-fuerte);
}

.tag {
  display: inline-block; margin-left: .4rem; padding: .1rem .4rem;
  border: 1px solid var(--borde-fuerte);
  font-size: .7rem; font-weight: 600; color: var(--tinta-suave);
  font-family: var(--mono);
}
.tag--grande { margin: 0; font-size: .78rem; padding: .25rem .5rem; color: var(--primario); border-color: var(--primario-borde); }

.contador { font-size: .78rem; color: var(--tinta-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }

.chip-equipo {
  padding: .12rem .45rem;
  background: var(--primario-suave); color: var(--primario);
  border: 1px solid var(--primario-borde);
  font-size: .7rem; font-weight: 650;
  max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: -.3rem 0 .9rem; }
.chip {
  padding: .3rem .6rem; border: 1px solid var(--borde-fuerte);
  background: var(--superficie); color: var(--tinta-suave);
  font-size: .8rem; cursor: pointer;
}
.chip:active { background: var(--primario-suave); border-color: var(--primario); color: var(--primario); }

.tipo-chip {
  display: inline-block; margin-bottom: .3rem;
  padding: .14rem .5rem;
  background: transparent; color: var(--primario);
  border: 1px solid var(--primario-borde);
  font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

.estado {
  font-size: .74rem; color: var(--tinta-tenue);
  opacity: 0; transition: opacity .2s ease; flex: 0 0 auto;
}
.estado--activo { opacity: 1; }

.version-pie {
  margin: 1.4rem 0 .3rem; text-align: center;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
  color: var(--tinta-tenue);
}

/* ---------------------------------------------------------------- */
/* Banner                                                            */
/* ---------------------------------------------------------------- */

.banner {
  display: flex; align-items: center; gap: .75rem;
  padding: .8rem; margin-bottom: .7rem;
  background: var(--aviso-bg); color: var(--aviso);
  border: 1px solid rgba(242, 182, 60, .35);
  border-left: 3px solid var(--aviso);
}
.banner strong { display: block; font-size: .9rem; }
.banner p { font-size: .8rem; opacity: .9; margin-top: .15rem; }
.banner .btn { flex: 0 0 auto; background: var(--aviso); border-color: var(--aviso); color: #1c1204; font-weight: 700; }
/* Banner con DOS botones (el del actualizador del cascaron: Actualizar y
   Despues): en una pantalla angosta el texto quedaria en una columna flaca
   y se partiria en cuatro lineas. Los botones bajan a su propio renglon, a
   la derecha, y el texto ocupa el primero completo (regla que Fenix tuvo
   que ponerse en su portada; general desde el 9 sep 2026, SER PRO fila 13). */
.banner:has(.btn + .btn) { flex-wrap: wrap; row-gap: .4rem; }
.banner:has(.btn + .btn) > div { flex: 1 1 100%; }
.banner:has(.btn + .btn) > .btn:first-of-type { margin-left: auto; }
/* Variante VERDE (buenas noticias, pedido de Vale): misma familia del
   semaforo de la casa, colores fijos en ambos temas como los chips. */
.banner--exito {
  background: #5cbd8d4d; color: #2f7a58;
  border-color: #2f7a5888; border-left-color: #2f7a58;
}
.banner--exito strong { color: #2f7a58; }
.banner--exito .btn { background: #2f7a58; border-color: #2f7a58; color: #fff; }

/* ---------------------------------------------------------------- */
/* Pestañas                                                          */
/* ---------------------------------------------------------------- */

.pestanas {
  display: flex; gap: .25rem;
  padding: .5rem .75rem 0;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 15;
}
.pestana {
  flex: 1; min-height: 44px; padding: 0 .5rem;
  border: none; border-bottom: 2px solid transparent;
  background: transparent; color: var(--tinta-suave);
  font-weight: 650; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}
.pestana--activa {
  color: var(--primario); border-bottom-color: var(--primario);
  text-shadow: 0 0 12px rgba(53, 224, 242, .4);
}

/* ---------------------------------------------------------------- */
/* Hoja modal                                                        */
/* ---------------------------------------------------------------- */

.hoja-fondo {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(2, 4, 7, 0);
  transition: background .24s ease;
}
.hoja-fondo--visible { background: rgba(2, 4, 7, .68); }

.hoja {
  /* Altura maxima en % del fondo (inset 0 = la pantalla), NUNCA en vh: con
     el zoom de interfaz (110/125/150) los vh no se compensan y una hoja
     de 92vh media 138% de la pantalla, anclada abajo: el titulo quedaba
     fuera, arriba, sin forma de llegar a el (Vale, 9 sep 2026, tambien
     en Fenix). Mismo remedio que ya tenia .hoja--completa. */
  width: 100%; max-width: 720px; max-height: 92%;
  display: flex; flex-direction: column;
  padding: .4rem .9rem calc(1rem + var(--inf));
  background: var(--superficie);
  border-top: 1px solid var(--primario-borde);
  box-shadow: var(--sombra-3);
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.32, .72, 0, 1);
}
/* Hoja a PANTALLA COMPLETA (altura: 'completa'): para contenido que se
   quiere ver entero, p. ej. la oportunidad de venta. Respeta la barra de
   estado (y la del Test Mode) via --sup. */
.hoja--completa {
  /* 100% del fondo (inset 0 = la pantalla entera): exacto con cualquier
     zoom de interfaz y version del motor. Los dvh dentro de un zoom
     cambiaron de significado entre versiones del WebView y la hoja
     quedaba corta, dejando un hueco arriba del titulo. */
  height: 100%;
  max-height: none;
  border-radius: 0;
  padding-top: calc(var(--sup) + .4rem);
}
/* En pantalla completa no hay "asa" que jalar: el contenido va arriba. */
.hoja--completa .hoja__asa { display: none; }

/* Franja TEAL bajo la barra de estado: Android 15 (edge-to-edge) ya no
   deja pintarla desde el plugin, asi que la pinta la app. Usa el inset
   crudo (no --sup, que el Test Mode infla) y va sobre todo lo demas en
   esa zona; los iconos del sistema van claros (StatusBar style DARK).
   Va a inset COMPLETO: esa es la barra real del sistema (en telefonos
   con camara es alta y el reloj queda centrado — normal); recortarla
   a "donde terminan las letras" se probo en v4.85 y se descarto por
   inconsistente entre celulares. */
body::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--barra, var(--primario));   /* color de marca: lo define cada app en su app.css */
  z-index: 100; pointer-events: none;
}
.hoja--visible { transform: translateY(0); }

.hoja__asa {
  width: 44px; height: 3px; margin: .35rem auto .55rem;
  background: var(--borde-fuerte);
}
.hoja__titulo { display: flex; align-items: center; gap: .5rem; margin: 0 -.4rem .6rem 0; }
.hoja__titulo h2 { flex: 1; }
/* min-height 0: el cuerpo cede y se desplaza dentro de la hoja en vez de
   estirarla mas alla de su altura maxima (motores viejos). */
.hoja__cuerpo { min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.hoja__acciones {
  /* wrap: con TRES botones (Restaurar / Compartir / Respaldar en la hoja de
     Almacenamiento) no caben en un telefono angosto y el tercero se salia,
     recortado por el overflow-x del cuerpo: se veia "Respalda". Con dos
     botones, que es lo normal, no cambia nada. */
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: 1.1rem; padding: .3rem 0 .2rem;
  /* Pegajosos al fondo visible de la hoja: aunque el formulario sea largo o
     el teclado achique la pantalla, Cancelar/Crear siempre estan a la mano. */
  position: sticky; bottom: 0;
  background: var(--superficie);
}
.hoja__acciones .btn--primario, .hoja__acciones .btn--fantasma { flex: 1; }

.lista-acciones { display: flex; flex-direction: column; gap: .2rem; }
.galeria__papelera { width: 100%; margin-top: .9rem; }

/* Asistente de alta de servicio (paso a paso, a botones) */
.asistente { display: flex; flex-direction: column; gap: .7rem; padding-bottom: .4rem; }

.asistente__cab { display: flex; flex-direction: column; gap: .2rem; }
.asistente__fila { display: flex; align-items: center; gap: .3rem; margin-left: -.5rem; }
.asistente__fila > .crece { margin-left: .5rem; }
.asistente__paso {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
  color: var(--primario);
}
.asistente__titulo { font-size: 1.15rem; }
.asistente__miga {
  font-size: .76rem; color: var(--tinta-suave);
  font-family: var(--mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.asistente__nuevo {
  width: 100%; min-height: 52px; padding: 0 .9rem;
  border: 1.5px dashed var(--primario-borde);
  background: transparent; color: var(--primario);
  font-weight: 650; text-align: left; cursor: pointer;
}
.asistente__nuevo:active { background: var(--primario-suave); }

.asistente__rejilla {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem;
}
.asistente__op {
  min-height: 64px; padding: .5rem .65rem;
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie-2); color: var(--tinta);
  font-weight: 650; font-size: .95rem; text-align: left; cursor: pointer;
  overflow-wrap: anywhere;
}
.asistente__op:active {
  background: var(--primario-suave); border-color: var(--primario); color: var(--primario);
}

.asistente__omitir {
  align-self: flex-end;
  border: none; background: transparent; padding: .5rem .2rem;
  color: var(--tinta-tenue); font-weight: 600; font-size: .88rem; cursor: pointer;
}
.asistente__omitir:active { color: var(--primario); }

/* ---------------------------------------------------------------- */
/* Campos                                                            */
/* ---------------------------------------------------------------- */

.campo { display: block; margin-bottom: .8rem; }
.campo__etiqueta {
  display: block; margin-bottom: .3rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-tenue);
}
.campo__entrada {
  display: block; width: 100%; min-height: 50px; padding: .7rem .75rem;
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie-2); color: var(--tinta);
  font-family: inherit; font-size: 1rem;
}
.campo__entrada:focus {
  outline: none; border-color: var(--primario);
  box-shadow: 0 0 0 1px var(--primario), var(--glow);
}
.campo__entrada--area { min-height: auto; resize: vertical; line-height: 1.5; }

/* Lista desplegable de opciones guardadas (bajo el campo, en el flujo) */
.despliegue {
  margin-top: .25rem;
  border: 1px solid var(--borde-fuerte);
  border-left: 2px solid var(--primario);
  background: var(--superficie-2);
  max-height: 208px; overflow-y: auto;
}
.despliegue__op {
  display: block; width: 100%; min-height: 46px; padding: .55rem .7rem;
  border: none; border-bottom: 1px solid var(--borde);
  background: transparent; color: var(--tinta);
  font-size: .95rem; text-align: left; cursor: pointer;
}
.despliegue__op:last-child { border-bottom: none; }
.despliegue__op:active { background: var(--primario-suave); color: var(--primario); }

.segmentado {
  display: flex; gap: .25rem; padding: .25rem;
  background: var(--superficie-2); border: 1px solid var(--borde);
}
.segmentado__op {
  flex: 1; min-height: 42px; border: none;
  background: transparent; color: var(--tinta-suave); font-weight: 600; cursor: pointer;
}
.segmentado__op--activa { background: var(--primario-suave); color: var(--primario); box-shadow: inset 0 0 0 1px var(--primario-borde); }

/* Opciones destacadas (p. ej. "¿Que tabla es?"): mayusculas y negritas. */
.opcion-fuerte { text-transform: uppercase; font-weight: 750; }
/* Iconos SVG (compartir/descargar al estilo Android) */
.icono-svg { display: inline-flex; width: 1.05em; height: 1.05em; vertical-align: -.12em; flex: 0 0 auto; }
.icono-svg svg { width: 100%; height: 100%; }
.icono-btn .icono-svg { width: 1.3em; height: 1.3em; }
/* Engrane animado de configuracion, iconoEngrane() de ui.js (Vale, 10 sep
   2026: "usa ese icono para configuracion, que la animacion se vea cada 3
   segundos"): icons/engrane.webp ya trae la animacion y la pausa de 3 s.
   Desde el 11 sep 2026 son tres engranes de colores (azul, naranja y gris)
   que se ven tal cual en claro y en oscuro (el filtro que lo invertia en
   oscuro era para la llave negra del engrane anterior). Fosforo: una sola
   tinta, la del fosforo elegido, como los demas iconos: la imagen hace de
   mascara sobre currentColor. */
.icono-engrane img { display: block; width: 100%; height: 100%; }
:root[data-tema="fosforo"] .icono-engrane {
  background: currentColor;
  -webkit-mask: url('../icons/engrane.webp') center / contain no-repeat;
  mask: url('../icons/engrane.webp') center / contain no-repeat;
}
:root[data-tema="fosforo"] .icono-engrane img { visibility: hidden; }

/* ---------------------------------------------------------------- */
/* Estado vacio                                                      */
/* ---------------------------------------------------------------- */

.vacio { padding: 2.6rem 1.4rem; text-align: center; color: var(--tinta-suave); }
.vacio__icono { font-size: 2.4rem; margin-bottom: .5rem; opacity: .45; }
.vacio h3 { margin-bottom: .35rem; color: var(--tinta); }
.vacio p { font-size: .88rem; max-width: 30ch; margin: 0 auto; }

/* ---------------------------------------------------------------- */
/* Avisos                                                            */
/* ---------------------------------------------------------------- */

/* Ligeramente abajo del centro: no tapan botones (abajo) ni titulo (arriba) */
.avisos {
  position: fixed; left: 50%; top: 58%;
  transform: translate(-50%, -50%); z-index: 90;
  display: flex; flex-direction: column; gap: .4rem;
  width: min(92vw, 460px); pointer-events: none;
}
.aviso {
  padding: .8em 1em;   /* en em: crece junto con la letra en zoom grande */
  background: var(--superficie-2); color: var(--tinta);
  border: 1px solid var(--borde-fuerte);
  border-left: 3px solid var(--primario);
  font-size: .88rem; box-shadow: var(--sombra-2);
  opacity: 0; transform: translateY(-12px);   /* entra desde arriba */
  transition: opacity .22s ease, transform .22s ease;
}
.aviso--visible { opacity: 1; transform: translateY(0); }
.aviso--ok    { border-left-color: var(--ok); }
.aviso--error { border-left-color: var(--peligro); background: #1d0e0d; color: #ffd9d5; }

/* ---------------------------------------------------------------- */
/* Accesibilidad                                                     */
/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }

/* Zoom de interfaz (110/125/150%): todo mas grande SALVO las fotos (son
   fluidas: conservan su tamaño en pantalla) y las pantallas de foto
   (visor y editor: ahi mandan la imagen y el gesto fino). El tope de alto
   de las fotos de la linea de tiempo se compensa por nivel (260px fisicos). */
/* En el editor de fotos escalan SOLO las barras de controles: la zona de la
   foto queda 1:1 para no alterar los gestos finos de recorte y formas.
   Los avisos escalan por tamaño de letra (no con zoom: su ancho en vw se
   descentra y se corta). */
/* OJO: dentro de un subtree con zoom, los PORCENTAJES de alto se
   re-resuelven bien (100% llena exacto), pero los vh NO se compensan:
   100vh renderiza 110/125/150% de la pantalla. Por eso la portada usa
   flex:1 (nunca min-height:100vh, que era lo que la hacia scrollear). */
:root[data-zoomui="110"] #app,
:root[data-zoomui="110"] .hoja-fondo,
:root[data-zoomui="110"] .editor-previa,
:root[data-zoomui="110"] .editor__barra,
:root[data-zoomui="110"] .editor__controles,
:root[data-zoomui="110"] .editor__modos { zoom: 1.1; }
:root[data-zoomui="110"] .tarjeta__foto img { max-height: 236px; }
:root[data-zoomui="110"] .aviso { font-size: .97rem; }

:root[data-zoomui="125"] #app,
:root[data-zoomui="125"] .hoja-fondo,
:root[data-zoomui="125"] .editor-previa,
:root[data-zoomui="125"] .editor__barra,
:root[data-zoomui="125"] .editor__controles,
:root[data-zoomui="125"] .editor__modos { zoom: 1.25; }
:root[data-zoomui="125"] .tarjeta__foto img { max-height: 208px; }
:root[data-zoomui="125"] .aviso { font-size: 1.1rem; }

:root[data-zoomui="150"] #app,
:root[data-zoomui="150"] .hoja-fondo,
:root[data-zoomui="150"] .editor-previa,
:root[data-zoomui="150"] .editor__barra,
:root[data-zoomui="150"] .editor__controles,
:root[data-zoomui="150"] .editor__modos { zoom: 1.5; }
:root[data-zoomui="150"] .tarjeta__foto img { max-height: 173px; }
:root[data-zoomui="150"] .aviso { font-size: 1.32rem; }

/* Velo de ocupado: siempre oscuro, encima de cualquier capa (menos avisos) */
.velo {
  position: fixed; inset: 0; z-index: 85;
  display: grid; place-items: center;
  background: rgba(4, 6, 10, .62);
}
.velo__caja {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem 1.4rem;
  background: #0d1219; border: 1px solid #46586e; color: #eef4fa;
  font-size: 1rem; font-weight: 600;
}
.velo__giro {
  width: 24px; height: 24px; flex: 0 0 auto;
  border: 3px solid #46586e; border-top-color: #35e0f2;
  border-radius: 50%;
  animation: velogiro .8s linear infinite;
}
@keyframes velogiro { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- */
/* Calendario: semana y mes, un color por dia (js/calendario.js)     */
/* ---------------------------------------------------------------- */

.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin: .7rem 0 .5rem; }
.cal-titulo {
  flex: 1; text-align: center;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .88rem;
  font-variant-numeric: tabular-nums;
}
.cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.cal-cab {
  text-align: center; padding-bottom: .15rem;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; color: var(--tinta-tenue);
}
/* Cada dia en su cuadro con el corte de la casa. Los colores del semaforo
   van FIJOS en ambos temas, con el numero en negro. */
.cal-dia {
  aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem;
  padding: 0;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta);
  font: inherit; font-size: .92rem; font-weight: 700; font-variant-numeric: tabular-nums;
  cursor: pointer;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px);
}
.cal-dia small { font-family: var(--mono); font-size: .58rem; font-weight: 500; letter-spacing: .04em; }
.cal-dia--semana { aspect-ratio: auto; min-height: 64px; gap: .15rem; }
.cal-dia--verde { background: #5cbd8d; border-color: #2f7a58; color: #000; }
.cal-dia--ambar { background: #e2c159; border-color: #8a7524; color: #000; }
.cal-dia--rojo  { background: #e26e6e; border-color: #b04a4a; color: #000; }
.cal-dia--hoy   { border: 2px solid var(--primario); color: var(--primario); }
.cal-dia--omitido {
  background: repeating-linear-gradient(45deg, var(--superficie-2) 0 4px, var(--superficie) 4px 8px);
  color: var(--tinta-tenue);
}
.cal-dia--vacio  { opacity: .35; cursor: default; }
.cal-dia--futuro { opacity: .25; cursor: default; }
.cal-dia--fuera  { visibility: hidden; }
/* Hoy, aunque ya tenga color, lleva su anillo. */
.cal-dia--esHoy { box-shadow: inset 0 0 0 2px var(--primario); }
.cal-leyenda {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem;
  margin-top: .9rem; font-size: .76rem; color: var(--tinta-suave);
}
.cal-leyenda i {
  display: inline-block; width: .85rem; height: .85rem; margin-right: .3rem;
  vertical-align: -.12rem; border: 1px solid var(--borde-fuerte);
}
.cal-leyenda__verde { background: #5cbd8d; border-color: #2f7a58 !important; }
.cal-leyenda__ambar { background: #e2c159; border-color: #8a7524 !important; }
.cal-leyenda__rojo  { background: #e26e6e; border-color: #b04a4a !important; }
.cal-leyenda__hoy   { border: 2px solid var(--primario) !important; }
.cal-leyenda__omitido { background: repeating-linear-gradient(45deg, var(--superficie-2) 0 3px, var(--superficie) 3px 6px); }

/* ---------------------------------------------------------------- */
/* Conteos con semaforo y tablas del patron de "Mi dia" (SER PRO) y  */
/* de Hoy e Historial (Fenix). Pasaron de app.css a la base el 9 sep */
/* 2026 (SER PRO fila 12). El titulo grande es propio de cada app    */
/* (.venta-grupo--grande en SER PRO, .grupo--grande en Fenix).       */
/* ---------------------------------------------------------------- */

/* El dato de un titulo de grupo ("3 de 5 · 60%") y su nota chica. */
.sem-dato { color: var(--tinta-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sem-dato__nota { margin-left: .45rem; font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--tinta-suave); }
/* Semaforo de la casa junto a un porcentaje: circulo con los colores FIJOS
   de los chips (misma regla en las apps: mas de 90 verde, 50 a 90 ambar,
   menos de 50 rojo), iguales en los tres temas. */
.semaforo { display: inline-block; width: .95rem; height: .95rem; margin-left: .4rem; border-radius: 50%; border: 1px solid; vertical-align: -.12rem; flex: none; }
.semaforo--verde { background: #5cbd8d; border-color: #2f7a58; }
.semaforo--ambar { background: #e2c159; border-color: #8a7524; }
.semaforo--rojo  { background: #e26e6e; border-color: #b04a4a; }
/* Tabla de la casa (.act-tabla): renglones de grupo, casilla, texto y
   quien. La usan el selector de actividades de Mi dia y las tablas de la
   semana; va dentro de .act-tabla-marco para desplazarse de lado. */
.act-tabla-marco { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--borde); border-radius: 8px; margin: .4rem 0 .6rem; }
.act-tabla { border-collapse: collapse; width: 100%; font-size: .86rem; }
.act-tabla th, .act-tabla td { padding: .45rem .4rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.act-tabla tbody tr:last-child td { border-bottom: none; }
.act-tabla thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suave); background: var(--superficie-2); }
.act-tabla__grupo th { background: var(--superficie-2); color: var(--primario); font-size: .78rem; }
.act-tabla__fila { cursor: pointer; }
.act-tabla__fila:active { background: var(--superficie-2); }
.act-tabla__casilla { width: 30px; padding-right: 0; }
.act-tabla__casilla .act-casilla { margin: 0; }
.act-tabla__que { overflow-wrap: anywhere; }
.act-tabla__tipo { font-size: .76rem; color: var(--tinta-suave); margin-top: .1rem; }
.act-tabla__quien { white-space: nowrap; color: var(--tinta-suave); font-size: .8rem; width: 1%; }
/* La semana en tabla (dia, completadas, %): el renglon de hoy en negritas,
   el porcentaje con su semaforo, y hecha o pendiente. */
.sem-tabla__hoy td { font-weight: 700; }
.sem-tabla__num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sem-tabla__pct { white-space: nowrap; width: 1%; font-variant-numeric: tabular-nums; font-weight: 700; }
.sem-tabla__pct .semaforo { width: .8rem; height: .8rem; margin-left: .35rem; }
.sem-tabla__ok { color: var(--ok); font-weight: 700; white-space: nowrap; }
.sem-tabla__pend { color: var(--tinta-tenue); }

/* ---------------------------------------------------------------- */
/* Pendientes (js/vistas/pendientes.js, pieza IGUAL) y las piezas de */
/* la casa que usa: el cuadro con palomita (.dia-*), la casilla de   */
/* la tabla, el titulo de grupo (.venta-grupo) y el boton grande     */
/* (.venta-btn). Pasaron de app.css a la base el 11 sep 2026 (SER    */
/* PRO fila 15) con el mismo nombre y los mismos valores; van        */
/* despues de .btn para ganarle. Las variantes de cada app se quedan */
/* en su app.css.                                                    */
/* ---------------------------------------------------------------- */

/* Dato chico a la derecha de la cabecera (p. ej. "3 por hacer"). */
.diario-fecha { margin-left: auto; font-size: .82rem; color: var(--tinta-tenue); font-variant-numeric: tabular-nums; }
/* Cada renglon en su CUADRO con el corte de la casa (regla de Vale,
   1 sep 2026). */
.dia-fila {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; margin-bottom: .45rem;
  background: var(--superficie);
  border: 1px solid var(--tinta);
  border-left: 3px solid var(--primario-vivo, var(--primario));
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  font-size: .9rem;
}
.dia-check {
  width: 2.1rem; height: 2.1rem; flex: none;
  border-radius: 50%; border: 2px solid var(--borde-fuerte);
  background: none; color: #fff; font-size: 1.05rem; line-height: 1;
}
.dia-check--si { background: var(--ok); border-color: var(--ok); }
.dia-check:disabled { opacity: .85; }
.dia-texto { flex: 1; min-width: 0; overflow-wrap: break-word; display: flex; flex-direction: column; gap: .15rem; }
.dia-texto--hecha { text-decoration: line-through; color: var(--tinta-tenue); }
/* Nota chica bajo el texto (p. ej. "hecho a las 10:30"). */
.dia-objetivo { font-size: .8rem; color: var(--tinta-suave); }
.dia-editar, .dia-borrar { flex: none; }
/* Casilla de la tabla de la casa y el boton de abajo de su hoja. */
.act-casilla { width: 22px; height: 22px; margin: .15rem .1rem 0 0; flex: none; accent-color: var(--primario); }
.act-agregar { width: 100%; }
/* Boton grande bajo cada grupo. */
.venta-btn { width: 100%; margin-top: .7rem; }
/* Titulo de grupo con su dato a la derecha. El dato baja a su propia
   linea si no cabe junto al titulo, y ahi se parte si hace falta: .sem-dato
   viene con nowrap y con la letra grande ensanchaba la pagina, que se
   desplazaba de lado (Vale, 10 sep 2026: "hacia los lados, NUNCA"). */
.venta-grupo {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  margin: 1rem 0 .45rem; padding-bottom: .25rem;
  border-bottom: 2px solid var(--borde-fuerte);
  font-size: .85rem; letter-spacing: .04em;
  flex-wrap: wrap;
}
.venta-grupo .sem-dato { white-space: normal; margin-left: auto; text-align: right; }
/* Cada SECCION de una pagina en su MARCO (SER PRO, Vale, 28 sep 2026: "cada
   seccion ... quiero que esten dentro de un area que las distinga, como un
   marco o rectangulo detras para definir los limites de esa seccion", en
   todas las paginas): section.seccion guarda su titulo (.venta-grupo) y todo
   lo suyo. El primero (7.15: un gris al 7 % con borde fino) no se notaba
   (Vale, el mismo dia: "no me gusta como es que se diferencian las secciones
   en la app, porque la verdad no se nota"). Desde la 7.17 SE NOTA: borde de
   2 px del color del marco (--marco: el primario, un tono mas profundo), el
   titulo como BARRA LLENA de ese color arriba del marco (como la barra de
   titulo de una ventana), fondo un poco mas oscuro
   que la pagina (gris al 10 %: se nota en los tres temas sin variables
   nuevas), el corte de la casa en la esquina y mas aire entre un marco y el
   siguiente (y arriba, para que un boton primario que vaya antes, como
   NUEVO PENDIENTE, no se pegue a la barra). Las tarjetas quedan encima, en
   su color de siempre. */
/* El color del marco y de su barra (--marco): el primario un tono mas
   profundo, para que la barra no se confunda con un boton primario (NUEVO
   PENDIENTE va justo arriba de EN CURSO) y en los temas oscuros no
   deslumbre. Donde el navegador no sabe mezclar colores, el primario tal
   cual. Va en :root (sale del primario de cada tema) para que lo use tambien
   lo que lleva una barra igual fuera de un marco (en SER PRO, la barra del
   departamento de la cabecera). */
:root { --marco: var(--primario); }
@supports (color: color-mix(in srgb, red, blue)) {
  :root { --marco: color-mix(in srgb, var(--primario) 70%, #000); }
}
.seccion {
  margin: .9rem 0 1.3rem; padding: 0 .7rem .75rem;
  background: linear-gradient(rgba(127, 127, 127, .1), rgba(127, 127, 127, .1)), var(--fondo);
  border: 2px solid var(--marco);
  border-radius: var(--r-md);
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px);
}
/* La barra de titulo: de orilla a orilla del marco, con la letra grande y
   con peso en TODAS las paginas (la misma barra en toda la app); el texto y
   su dato en el color que va sobre el primario (el de los botones
   primarios), sin el resplandor de fosforo, y el semaforo con un aro para
   que no se pierda sobre la barra. El dato, mas chico que el titulo. */
.seccion > .venta-grupo:first-child {
  align-items: center; gap: .15rem .4rem;
  margin: 0 -.7rem .75rem; padding: .5rem .65rem .5rem .9rem;
  background: var(--marco); color: var(--primario-tinta);
  border: 0; text-shadow: none;
  font-size: 1.15rem; font-weight: 800; letter-spacing: .05em;
}
.seccion > .venta-grupo:first-child .sem-dato { color: inherit; font-size: .9rem; font-weight: 700; letter-spacing: .04em; }
.seccion > .venta-grupo:first-child .sem-dato__nota { color: inherit; }
.seccion > .venta-grupo:first-child .semaforo { box-shadow: 0 0 0 2px var(--primario-tinta); }
.seccion > :last-child { margin-bottom: 0; }
/* Un GRUPO CON TITULO DENTRO de una seccion, en su propio cuadro (7.17; Vale:
   "En Departamento ni siquiera se diferencia las secciones, todo esta detras
   del mismo cuadro"): las tareas de cada colaborador, ASIGNADAS A MI, los
   grupos de Asignar semana. Mas ligero que el marco, para que se lea quien
   va dentro de quien: fondo de la pagina, borde fino con filete izquierdo
   del color primario y el titulo como banda SUAVE (la de los titulos del
   inventario de la 7.11). */
.subseccion {
  margin: .75rem 0; padding: 0 .55rem .55rem;
  background: var(--fondo);
  border: 1px solid var(--primario-borde); border-left: 4px solid var(--primario);
}
.subseccion > :first-child {
  align-items: center;
  margin: 0 -.55rem .55rem; padding: .4rem .65rem;
  /* Banda LLENA, del color de la barra del marco y un poco mas delgada
     (7.44; Vale, 29 sep 2026, al ver la banda suave: "no me gusta porque no
     se contrasta el texto y el color. Y aparte el color es como muy claro";
     eligio la A entre tres dibujadas). En fosforo se queda la banda suave,
     que ahi si se ve bien (abajo). */
  background: var(--marco); color: var(--primario-tinta);
  border: 0; text-shadow: none;
  font-size: .9rem; font-weight: 700;
}
.subseccion > :first-child .sem-dato { color: inherit; }
:root[data-tema="fosforo"] .subseccion > :first-child {
  background: var(--primario-suave); color: var(--primario);
  border-bottom: 1px solid var(--primario-borde);
}
.subseccion > :last-child { margin-bottom: 0; }
/* Leyenda fija arriba de la lista (la da la app en params.leyenda). */
/* Leyenda de Pendientes: desde el 17 sep 2026 va dentro de la cabecera (que
   es fija), no en el contenido, para que no se pierda al bajar por la lista.
   Por eso su margen de abajo se va: la cabecera ya tiene su relleno. */
.pend-leyenda { margin: .35rem 0 0; font-weight: 700; letter-spacing: .02em; text-align: center; line-height: 1.35; }

/* ---------------------------------------------------------------- */
/* Tema "Fosforo": monitor de tubo, al estilo de los terminales de    */
/* videojuego que le gustan a Vale. Inspirado, sin marcas ni arte     */
/* ajeno: solo paleta, tipografia y efecto de pantalla. Cuatro colores */
/* (verde, ambar, azul, blanco): cada bloque define su paleta y        */
/* --fos-rgb, que alimenta resplandores, barrido y logo. Fuente Share  */
/* Tech Mono (licencia OFL), empacada en fonts/.                       */
/* ---------------------------------------------------------------- */
@font-face {
  font-family: 'STMono';
  src: url('../fonts/share-tech-mono.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
:root[data-tema="fosforo"] {
  color-scheme: dark;
  --sombra-2: 0 8px 28px rgba(0, 0, 0, .7);
  --sombra-3: 0 -8px 30px rgba(0, 0, 0, .7);
  --mono: 'STMono', ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --fuente: 'STMono', ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}
:root[data-tema="fosforo"]:not([data-fosforo]), :root[data-tema="fosforo"][data-fosforo="verde"] {
  --fos-rgb: 61, 255, 134;
  --fondo:        #020905;
  --superficie:   #05130a;
  --superficie-2: #082011;
  --tinta:        #3dff86;
  --tinta-suave:  #33d46f;
  --tinta-tenue:  #28a657;
  --borde:        #15592f;
  --borde-fuerte: #228c4a;
  --primario:      #54ff95;
  --primario-vivo: #94ffbc;
  --primario-tinta:#05140b;
  --primario-suave:#0b2e18;
  --primario-borde: rgba(61, 255, 134, .55);
  --ok:      #3dff86;
  --aviso:   #ffb000;
  --aviso-bg:#2a1e00;
  --peligro: #ff7a4d;
  --glow: 0 0 12px rgba(61, 255, 134, .35);
}
:root[data-tema="fosforo"][data-fosforo="ambar"] {
  --fos-rgb: 255, 176, 0;
  --fondo:        #090600;
  --superficie:   #130d00;
  --superficie-2: #201600;
  --tinta:        #ffb000;
  --tinta-suave:  #d49200;
  --tinta-tenue:  #a67200;
  --borde:        #593e00;
  --borde-fuerte: #8c6100;
  --primario:      #ffb91f;
  --primario-vivo: #ffd473;
  --primario-tinta:#140e00;
  --primario-suave:#2e2000;
  --primario-borde: rgba(255, 176, 0, .55);
  --ok:      #ffb000;
  --aviso:   #ffe3a3;
  --aviso-bg:#2a1c00;
  --peligro: #ff5c5c;
  --glow: 0 0 12px rgba(255, 176, 0, .35);
}
:root[data-tema="fosforo"][data-fosforo="azul"] {
  --fos-rgb: 77, 210, 255;
  --fondo:        #030709;
  --superficie:   #061013;
  --superficie-2: #0a1a20;
  --tinta:        #4dd2ff;
  --tinta-suave:  #40aed4;
  --tinta-tenue:  #3288a6;
  --borde:        #1b4a59;
  --borde-fuerte: #2a748c;
  --primario:      #62d7ff;
  --primario-vivo: #9de6ff;
  --primario-tinta:#061114;
  --primario-suave:#0e262e;
  --primario-borde: rgba(77, 210, 255, .55);
  --ok:      #4dd2ff;
  --aviso:   #ffb000;
  --aviso-bg:#241a00;
  --peligro: #ff7a4d;
  --glow: 0 0 12px rgba(77, 210, 255, .35);
}
:root[data-tema="fosforo"][data-fosforo="blanco"] {
  --fos-rgb: 232, 244, 248;
  --fondo:        #080909;
  --superficie:   #111213;
  --superficie-2: #1d1e1f;
  --tinta:        #e8f4f8;
  --tinta-suave:  #c1cbce;
  --tinta-tenue:  #979fa1;
  --borde:        #515557;
  --borde-fuerte: #808688;
  --primario:      #ebf5f9;
  --primario-vivo: #f2f9fb;
  --primario-tinta:#131414;
  --primario-suave:#2a2c2d;
  --primario-borde: rgba(232, 244, 248, .55);
  --ok:      #e8f4f8;
  --aviso:   #ffb000;
  --aviso-bg:#241a00;
  --peligro: #ff7a4d;
  --glow: 0 0 12px rgba(232, 244, 248, .35);
}

/* Resplandor del fosforo en el texto, sin perder legibilidad. */
:root[data-tema="fosforo"] body { text-shadow: 0 0 1px rgba(var(--fos-rgb), .25), 0 0 7px rgba(var(--fos-rgb), .18); }
:root[data-tema="fosforo"] body::before { background: var(--fondo); }   /* franja de la barra de estado */
/* Lineas de barrido y viñeta del tubo, encima de todo, sin estorbar al dedo;
   la capa entera parpadea a saltos, como el tubo cuando le baja el voltaje. */
@keyframes fosforo-pantalla {
  0%, 100% { background-color: transparent; }
  3.1%  { background-color: rgba(0, 0, 0, .14); }
  3.4%  { background-color: transparent; }
  19%   { background-color: rgba(0, 0, 0, .06); }
  19.3% { background-color: transparent; }
  37.5% { background-color: rgba(0, 0, 0, .2); }
  37.9% { background-color: transparent; }
  61%   { background-color: rgba(0, 0, 0, .08); }
  61.3% { background-color: transparent; }
  83.4% { background-color: rgba(0, 0, 0, .12); }
  83.7% { background-color: transparent; }
}
:root[data-tema="fosforo"] body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9000;
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .5) 100%);
  animation: fosforo-pantalla 11s steps(1, end) infinite;
}
/* La banda de barrido que baja por la pantalla (elemento propio; se anima
   con transform para no repintar). */
@keyframes fosforo-rodar {
  from { transform: translateY(-20vh); }
  to   { transform: translateY(110vh); }
}
#fosforo-banda {
  position: fixed; left: 0; right: 0; top: 0; height: 16vh;
  pointer-events: none; z-index: 8999;
  background: linear-gradient(to bottom, transparent, rgba(var(--fos-rgb), .07) 50%, transparent);
  animation: fosforo-rodar 9s linear infinite;
  will-change: transform;
}
:root:not([data-tema="fosforo"]) #fosforo-banda { display: none; }
/* Cambio de pantalla: el tubo enciende la pantalla nueva (linea que se abre y destello). */
@keyframes fosforo-cambio {
  0%   { opacity: 0; transform: scaleY(.04); filter: brightness(2); }
  30%  { opacity: 1; transform: scaleY(1.02); filter: brightness(1.5); }
  55%  { transform: none; filter: brightness(1.12); }
  100% { filter: none; }
}
:root[data-tema="fosforo"] #app.pantalla-entra { animation: fosforo-cambio .3s ease-out; transform-origin: 50% 50%; }
/* Encendido de la pantalla (tema.js encenderPantalla). #app queda oculto desde
   antes del primer pintado hasta que arranca el sonido de abrir. Entonces,
   sobre una capa negra encima de todo (#encendido): un punto a media pantalla
   se vuelve una linea blanca con halo del color del fosforo, cruza la
   pantalla y parpadea; la cortina negra (dos paneles) se abre desde el centro
   con un destello; y la imagen entra deslumbrada, un poco estirada, y se
   asienta con dos parpadeos. Todo dura lo que el sonido (--encendido-ms). */
:root[data-tema="fosforo"][data-encendiendo] #app { visibility: hidden; }
#encendido { position: fixed; inset: 0; z-index: 9500; pointer-events: none; overflow: hidden; }
.encendido__panel { position: absolute; left: 0; right: 0; height: 50%; background: #000; }
.encendido__panel--arriba { top: 0; transform-origin: 50% 0; }
.encendido__panel--abajo { bottom: 0; transform-origin: 50% 100%; }
.encendido__linea {
  position: absolute; left: 50%; top: 50%; width: 0; height: 3px; opacity: 0;
  transform: translate(-50%, -50%); border-radius: 3px; background: #fff;
  box-shadow: 0 0 6px 2px #fff, 0 0 18px 6px rgba(var(--fos-rgb), .9), 0 0 70px 24px rgba(var(--fos-rgb), .55);
}
.encendido__destello { position: absolute; inset: 0; opacity: 0; background: rgba(var(--fos-rgb), .6); mix-blend-mode: screen; }
.encendido--activo .encendido__panel  { animation: encendido-panel var(--encendido-ms, 1.2s) cubic-bezier(.75, 0, .25, 1) both; }
.encendido--activo .encendido__linea  { animation: encendido-linea var(--encendido-ms, 1.2s) linear both; }
.encendido--activo .encendido__destello { animation: encendido-destello var(--encendido-ms, 1.2s) linear both; }
@keyframes encendido-panel {
  0%, 42%   { transform: scaleY(1); }
  78%, 100% { transform: scaleY(0); }
}
@keyframes encendido-linea {
  0%   { width: 0; height: 3px; opacity: 0; }
  4%   { width: 8px; opacity: 1; }
  24%  { width: 100%; opacity: 1; }
  28%  { opacity: .45; }
  31%  { opacity: 1; }
  35%  { opacity: .6; }
  38%  { opacity: 1; height: 3px; }
  44%  { opacity: 1; height: 9px; }
  62%  { opacity: 0; height: 48px; }
  100% { width: 100%; opacity: 0; height: 48px; }
}
@keyframes encendido-destello {
  0%, 40% { opacity: 0; }
  46%     { opacity: .95; }
  72%     { opacity: 0; }
  100%    { opacity: 0; }
}
@keyframes fosforo-encender {
  0%, 40% { transform: scaleY(1.08) scaleX(1.02); filter: brightness(3.2) contrast(1.3) saturate(1.4); }
  62%  { transform: scaleY(1.03) scaleX(1);       filter: brightness(1.9) contrast(1.15); }
  76%  { transform: none;                         filter: brightness(1.15); }
  81%  { transform: none;                         filter: brightness(.5); }
  86%  { transform: translateX(-3px);             filter: brightness(1.3); }
  90%  { transform: none;                         filter: brightness(.85); }
  95%  { transform: none;                         filter: brightness(1.08); }
  100% { transform: none;                         filter: brightness(1); }
}
:root[data-tema="fosforo"] #app.pantalla-enciende { animation: fosforo-encender var(--encendido-ms, 1.2s) linear both; transform-origin: 50% 50%; }
/* Fallas del tubo que acompañan a la estatica de fondo (una por sonido; tema.js
   pone data-fosforo-fx en <html> mientras suena), a saltos secos (steps):
   parpadeo de voltaje, salto vertical, rasgado horizontal y grano de estatica.
   (El apagon, la imagen colapsada a una linea, se quito el 8 sep 2026.) */
@keyframes fx-parpadeo {
  0%, 100% { filter: none; transform: none; }
  4%  { filter: brightness(2.6) contrast(1.3); }
  8%  { filter: brightness(.12); }
  12% { filter: brightness(1.9); transform: translateY(-3px); }
  16% { filter: brightness(.3); transform: none; }
  24% { filter: brightness(1.6); }
  30% { filter: brightness(.5); transform: translateY(2px); }
  36% { filter: brightness(2.1); transform: none; }
  42% { filter: brightness(.2); }
  50% { filter: brightness(1.3); }
  58% { filter: brightness(.7); }
  66% { filter: brightness(1.8); transform: translateY(-2px); }
  72% { filter: brightness(.4); transform: none; }
  82% { filter: brightness(1.25); }
  90% { filter: brightness(.85); }
}
@keyframes fx-salto {
  0%, 100% { transform: none; filter: none; }
  5%  { transform: translateY(-38px); filter: brightness(1.4); }
  11% { transform: translateY(26px) scaleY(.96); }
  17% { transform: translateY(-64px); filter: brightness(.7); }
  24% { transform: translateY(12px); filter: none; }
  31% { transform: translateY(88px) scaleY(1.04); filter: brightness(1.3); }
  38% { transform: translateY(-30px); }
  46% { transform: translateY(54px); filter: brightness(.6); }
  54% { transform: translateY(-16px); filter: none; }
  63% { transform: translateY(34px); }
  72% { transform: translateY(-8px); filter: brightness(1.15); }
  82% { transform: translateY(14px); }
  91% { transform: translateY(-4px); filter: none; }
}
@keyframes fx-rasgado {
  0%, 100% { transform: none; filter: none; }
  6%  { transform: translateX(-26px) skewX(-16deg); filter: brightness(1.5); }
  13% { transform: translateX(32px) skewX(12deg); }
  20% { transform: translateX(-14px) skewX(-6deg) scaleX(1.03); filter: brightness(.7); }
  28% { transform: translateX(38px) skewX(18deg); filter: brightness(1.3); }
  36% { transform: translateX(-30px) skewX(-11deg); }
  45% { transform: translateX(18px) skewX(7deg); filter: brightness(.8); }
  55% { transform: translateX(-22px) skewX(-13deg); filter: brightness(1.4); }
  66% { transform: translateX(10px) skewX(4deg); filter: none; }
  78% { transform: translateX(-6px) skewX(-2deg); }
  90% { transform: translateX(3px); }
}
:root[data-tema="fosforo"][data-fosforo-fx] #app { transform-origin: 50% 50%; }
:root[data-tema="fosforo"][data-fosforo-fx="parpadeo"] #app { animation: fx-parpadeo 1.2s steps(1, end); }
:root[data-tema="fosforo"][data-fosforo-fx="salto"] #app    { animation: fx-salto 1.1s steps(1, end); }
:root[data-tema="fosforo"][data-fosforo-fx="rasgado"] #app  { animation: fx-rasgado .9s steps(1, end); }
/* Nieve: el grano de la capa de barrido brinca y la imagen tiembla y chisporrotea. */
@keyframes fx-nieve {
  0%   { background-position: 0 0, 0 0, 0 0; }
  10%  { background-position: 0 -41px, 17px 0, 0 0; }
  20%  { background-position: 0 -83px, -11px 0, 0 0; }
  30%  { background-position: 0 -29px, 23px 0, 0 0; }
  40%  { background-position: 0 -67px, -5px 0, 0 0; }
  50%  { background-position: 0 -97px, 9px 0, 0 0; }
  60%  { background-position: 0 -13px, -19px 0, 0 0; }
  70%  { background-position: 0 -59px, 31px 0, 0 0; }
  80%  { background-position: 0 -23px, -27px 0, 0 0; }
  90%  { background-position: 0 -71px, 13px 0, 0 0; }
  100% { background-position: 0 -37px, -3px 0, 0 0; }
}
:root[data-tema="fosforo"][data-fosforo-fx="nieve"] body::after {
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .2) 0 2px, transparent 2px 5px, rgba(0, 0, 0, .55) 5px 6px, transparent 6px 9px),
    repeating-linear-gradient(90deg, rgba(var(--fos-rgb), .22) 0 3px, transparent 3px 7px, rgba(255, 255, 255, .12) 7px 8px, transparent 8px 13px),
    radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .5) 100%);
  animation: fx-nieve 1s steps(1, end);
}
@keyframes fx-nieve-app {
  0%, 100% { transform: none; filter: none; }
  10% { transform: translateX(-5px); filter: brightness(1.4) contrast(1.25); }
  20% { transform: translate(4px, 2px); filter: brightness(.7); }
  30% { transform: translateX(-3px); filter: brightness(1.25) contrast(1.35); }
  40% { transform: translate(6px, -2px); filter: brightness(.8); }
  50% { transform: translateX(-6px); filter: brightness(1.5) contrast(1.2); }
  60% { transform: translate(2px, 3px); filter: brightness(.65); }
  70% { transform: translateX(-4px); filter: brightness(1.3); }
  80% { transform: translate(5px, -1px); filter: brightness(.85) contrast(1.3); }
  90% { transform: translateX(-2px); filter: brightness(1.15); }
}
:root[data-tema="fosforo"][data-fosforo-fx="nieve"] #app { animation: fx-nieve-app 1s steps(1, end); }

:root[data-tema="fosforo"] #app { background: var(--fondo); }
:root[data-tema="fosforo"] .cabecera { background: var(--fondo); border-bottom: 1px solid var(--borde-fuerte); }
:root[data-tema="fosforo"] h1, :root[data-tema="fosforo"] h2, :root[data-tema="fosforo"] h3 { text-transform: uppercase; letter-spacing: .06em; }
:root[data-tema="fosforo"] .btn--primario { box-shadow: var(--glow); }
:root[data-tema="fosforo"] .btn,
:root[data-tema="fosforo"] .menu__boton,
:root[data-tema="fosforo"] .tarjeta,
:root[data-tema="fosforo"] .banner,
:root[data-tema="fosforo"] .chip { border-radius: 0; }
:root[data-tema="fosforo"] .pestana--activa { text-shadow: 0 0 8px rgba(var(--fos-rgb), .6); }


/* Selector de tema: casilla del sonido */
.campo-check { display: flex; align-items: center; gap: .55rem; margin: .7rem 0 .2rem; cursor: pointer; }
.campo-check input { width: 20px; height: 20px; accent-color: var(--primario); }
.campo-check--sub { margin: .25rem 0 .1rem 1.7rem; }

/* Si el telefono pide menos movimiento, nada parpadea ni se mueve. */
@media (prefers-reduced-motion: reduce) {
  :root[data-tema="fosforo"] .menu__logo,
  :root[data-tema="fosforo"] body::after,
  :root[data-tema="fosforo"] #app.pantalla-entra,
  #fosforo-banda { animation: none; }
}

/* Configuracion → Tema → Sonidos: cada renglon con sus botones ▶ */
.sonido-fila { display: flex; align-items: center; gap: .5rem; }
.sonido-fila > .campo-check, .sonido-fila > .campo { flex: 1; min-width: 0; }
.sonido-fila__oir { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .2rem; flex: 0 0 auto; max-width: 42%; }
.sonido-fila__vacio { display: inline-block; width: 34px; text-align: center; color: var(--tinta-tenue); }
/* Renglones con varios ▶ (seleccion, estatica): los botones van debajo, a la derecha. */
.sonido-fila--ancha { flex-wrap: wrap; }
.sonido-fila--ancha > .campo-check, .sonido-fila--ancha > .campo { flex-basis: 100%; }
.sonido-fila--ancha > .sonido-fila__oir { max-width: none; margin-left: auto; margin-right: .3rem; margin-top: -.2rem; margin-bottom: .4rem; }
/* Un renglon por accion en "Ajustar sonidos": etiqueta, la lista con todos los archivos y ▶ */
.sonido-fila--eleccion { align-items: flex-end; }
.sonido-fila--eleccion .org-select { display: block; width: 100%; }
.sonido-fila--eleccion > .sonido-fila__oir { margin-bottom: calc(.8rem + 2px); }
/* Efectos del fosforo al VER fotos y tablas: apagados por defecto
   (data-fosforo-medios="no"): mientras esta abierto el visor de fotos, el
   editor, la galeria o la vista de una tabla, la capa de barrido y la banda
   se ocultan y la imagen se ve limpia. */
:root[data-tema="fosforo"][data-fosforo-medios="no"]:has(.visor, .editor, .galeria-rejilla, #app[data-vista="tabla"]) body::after,
:root[data-tema="fosforo"][data-fosforo-medios="no"]:has(.visor, .editor, .galeria-rejilla, #app[data-vista="tabla"]) #fosforo-banda { display: none; }

/* ---------------------------------------------------------------- */
/* Diseño de PC (pieza IGUAL "Diseño de PC", 15 sep 2026)             */
/* ---------------------------------------------------------------- */
/* Todo bajo :root[data-diseno="pc"], que pone tema.js (o el script del
   head de index.html) solo cuando la marca trae MARCA.modoPC y toca PC.
   En telefono y en el APK no cambia ni un pixel. Aqui solo piezas de la
   base: el ancho de la app y las hojas como ventana de dialogo al centro;
   lo de cada pantalla propia va en su app.css bajo el mismo selector.
   Alturas en % del fondo, nunca en vh (regla de la 6.06). */
:root[data-diseno="pc"] #app { max-width: 1100px; }

/* La hoja: ventana al centro, con borde y esquinas, que aparece con un
   fundido corto en vez de subir desde abajo. Sin asa: no hay que jalarla. */
:root[data-diseno="pc"] .hoja-fondo { align-items: center; }
:root[data-diseno="pc"] .hoja {
  max-width: 760px; max-height: 90%;
  padding: .7rem 1.1rem 1rem;
  border: 1px solid var(--primario-borde);
  border-radius: 14px;
  opacity: 0;
  transform: translateY(18px) scale(.98);
  transition: transform .22s cubic-bezier(.32, .72, 0, 1), opacity .18s ease;
}
:root[data-diseno="pc"] .hoja--visible { opacity: 1; transform: none; }
:root[data-diseno="pc"] .hoja__asa { display: none; }
/* En fosforo la ventana va con esquinas rectas, como sus banners y chips. */
:root[data-tema="fosforo"][data-diseno="pc"] .hoja,
:root[data-tema="fosforo"][data-diseno="pc"] .hoja--completa { border-radius: 0; }
/* La hoja completa (altura: 'completa') tambien es ventana: mas ancha y
   casi toda la pantalla, sin pegarse a los bordes ni a la barra de estado. */
:root[data-diseno="pc"] .hoja--completa {
  height: 92%; max-height: 92%; max-width: 900px;
  border-radius: 14px; padding-top: .7rem;
}

/* ---------------------------------------------------------------- */
/* Raton: sombreado al pasar (fila 23 del modo PC, 15 sep 2026)       */
/* ---------------------------------------------------------------- */
/* Solo donde hay raton de verdad (hover: hover), SIN atarlo al modo PC:
   sirve en cualquier PC aunque este en Telefono, y en los telefonos no se
   queda pegado. Mientras se presiona manda el :active de cada pieza
   (:not(:active)). Cada regla espeja el :active de esa pieza. */
@media (hover: hover) {
  .btn:not(:disabled):hover:not(:active) { filter: brightness(1.06); }
  .icono-btn:hover:not(:active) { background: var(--superficie-2); }
  .fab:hover:not(:active) { filter: brightness(1.06); }
  .chip:hover:not(:active) { border-color: var(--primario); color: var(--primario); }
  .asistente__nuevo:hover:not(:active),
  .despliegue__op:hover:not(:active) { background: var(--primario-suave); }
  .asistente__op:hover:not(:active) {
    background: var(--primario-suave); border-color: var(--primario); color: var(--primario);
  }
  .asistente__omitir:hover:not(:active) { color: var(--primario); }
  .act-tabla__fila:hover:not(:active) { background: var(--superficie-2); }
}