/* ==========================================================
   SoftBOX — tema claro / oscuro
   Se carga después de softbox.css en todo SoftBOX (admin, consulta, web).
   · Tokens de rol que usan las hojas de cada sitio (--borde, --linea, --boton…):
     en claro valen exactamente lo mismo que los valores fijos de antes.
   · Modo oscuro: html[data-tema="oscuro"], grises neutros puros, ámbar como único acento.
     La elección la guarda assets/js/tema.js en el equipo (localStorage "sb_tema").
   · Al imprimir siempre sale claro.
   ========================================================== */

:root {
  --borde: #cfcfcf;
  --borde-hover: #9e9e9e;
  --borde-foco: #8f8f8f;
  --linea: #efefef;
  --boton: #fafafa;
  --boton-hover: #ffffff;
  --boton-press: #f1f1f1;
  --campo-foco: #ffffff;
  --campo-error: #fdf7f6;
  --fila-hover: #f9f9f9;
  --gris-barra: #e6e6e6;
  --pista: #dadada;
  --perilla: #ffffff;
  --velo: rgba(0, 0, 0, .05);
  --velo-fuerte: rgba(0, 0, 0, .09);
  --velo-claro: rgba(255, 255, 255, .8);
  --sobre-dark: #ffffff;       /* texto o tilde sobre --dark (controles marcados) */
}

@media screen {
  html[data-tema="oscuro"] {
    color-scheme: dark;
    /* superficies: más claras cuanto más arriba están */
    --chassis: #0b0b0b;
    --canvas: #141414;
    --content: #181818;
    --surface: #202020;
    --surface-2: #262626;
    --field: #151515;
    --line: #2c2c2c;
    /* texto */
    --ink: #ececec;
    --ink-2: #a8a8a8;
    --ink-3: #7e7e7e;
    --on-chassis: #ededed;
    /* marca y estados (legibles sobre oscuro) */
    --amber-ink: #ffc04d;
    --amber-soft: rgba(255, 176, 0, .14);
    --success: #4cc08a;
    --success-soft: rgba(76, 192, 138, .14);
    --danger: #f06f5c;
    --danger-soft: rgba(240, 111, 92, .14);
    --disabled: #2a2a2a;
    --disabled-ink: #6c6c6c;
    /* controles marcados: claros con tilde oscuro */
    --dark: #ececec;
    --sobre-dark: #141414;
    /* roles */
    --borde: #383838;
    --borde-hover: #555555;
    --borde-foco: #6c6c6c;
    --linea: #2a2a2a;
    --boton: #2a2a2a;
    --boton-hover: #333333;
    --boton-press: #242424;
    --campo-foco: #1c1c1c;
    --campo-error: rgba(240, 111, 92, .08);
    --fila-hover: #252525;
    --gris-barra: #303030;
    --pista: #3a3a3a;
    --perilla: #111111;
    --velo: rgba(255, 255, 255, .06);
    --velo-fuerte: rgba(255, 255, 255, .1);
    --velo-claro: rgba(20, 20, 20, .8);
    /* sombras: sobre oscuro la sombra se nota menos, se refuerza */
    --sh-card: 0 1px 2px rgba(0, 0, 0, .35), 2px 6px 16px rgba(0, 0, 0, .28);
    --sh-card-hover: 0 2px 4px rgba(0, 0, 0, .4), 6px 18px 40px rgba(0, 0, 0, .45);
    --sh-float: 4px 10px 20px rgba(0, 0, 0, .45), 12px 28px 60px rgba(0, 0, 0, .55);
  }

  /* logo: en oscuro siempre la versión de fondo negro (BOX blanco) */
  html[data-tema="oscuro"] .marca__img--claro,
  html[data-tema="oscuro"] .logo__img--claro { display: none !important; }
  html[data-tema="oscuro"] .marca__img--oscuro,
  html[data-tema="oscuro"] .logo__img--oscuro { display: block !important; }

  /* mapa de OpenStreetMap pasado a oscuro (el satélite queda como está) */
  html[data-tema="oscuro"] .capa-mapa { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.5); }

  /* tildes de las listas de la web: caja clara, tilde oscuro */
  html[data-tema="oscuro"] .tildes li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  }
}

/* Cambio de tema: una sola foto de la pantalla que se funde con la nueva (View Transitions).
   Todo cambia a la vez, incluida la página dentro del panel: nada se adelanta ni se traba. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

/* Cambio de página: al pasar de una página de SoftBOX a otra, la vieja se funde con la nueva
   (mismo fundido que el tema) en vez de cortar en blanco. Los elementos con nombre propio
   (la cabecera) se quedan quietos y se funden en el mismo tiempo, así nada se adelanta. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; types: pagina; }
}
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}
::view-transition-old(root) { animation-name: tema-sale; }
::view-transition-new(root) { animation-name: tema-entra; mix-blend-mode: normal; }
@keyframes tema-sale { from { opacity: 1; } to { opacity: 0; } }
@keyframes tema-entra { from { opacity: 0; } to { opacity: 1; } }

/* Cambio de tema (20/10/2026): el tema nuevo se derrama desde el botón sol/luna como un líquido,
   con borde nítido pero sin forma fija (ondula mientras avanza), hasta cubrir toda la pantalla.
   La forma la dibuja tema.js (clip-path animado sobre la foto nueva). Durante el cambio nada tiene
   nombre propio (todo va en una sola foto, cabecera incluida) y la pantalla vieja queda quieta debajo. */
html.tema-vt *, html.tema-vt *::before, html.tema-vt *::after { view-transition-name: none !important; }
html.tema-vt::view-transition-group(root) { animation: none; }
html.tema-vt::view-transition-old(root) { animation: none; }
html.tema-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* Cambio de página (20/10/2026, sistema de movimiento): la página que se va se hunde apenas y se
   apaga rápido (0,22 s, salida); la nueva aparece encima (0,35 s, entrada) y su contenido salta
   desde el fondo con el pop de cada página. La cabecera tiene nombre propio y queda quieta.
   Solo en cambios de página (tipo "pagina"); el cambio de tema sigue siendo el fundido parejo. */
html:active-view-transition-type(pagina)::view-transition-old(root) {
  animation: pag-vt-sale .22s cubic-bezier(.4, 0, 1, 1) both;
}
html:active-view-transition-type(pagina)::view-transition-new(root) {
  animation: pag-vt-entra .35s cubic-bezier(.16, 1, .3, 1) .06s both;
}
html:active-view-transition-type(pagina)::view-transition-group(*) { animation-duration: .45s; }
@keyframes pag-vt-sale { to { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes pag-vt-entra { from { opacity: 0; } }

/* La cabecera nunca parpadea al cambiar de página: si es la misma, no hay fundido; se muestra
   directamente la nueva (todas sus piezas quedan quietas). */
html:active-view-transition-type(pagina):not(:active-view-transition-type(cabecera-cambia))::view-transition-old(cabecera),
html:active-view-transition-type(pagina):not(:active-view-transition-type(cabecera-cambia))::view-transition-old(cab-logo),
html:active-view-transition-type(pagina):not(:active-view-transition-type(cabecera-cambia))::view-transition-old(cab-tema),
html:active-view-transition-type(pagina):not(:active-view-transition-type(cabecera-cambia))::view-transition-old(cab-idioma),
html:active-view-transition-type(pagina):not(:active-view-transition-type(cabecera-cambia))::view-transition-old(cab-acciones),
html:active-view-transition-type(pagina):not(:active-view-transition-type(cabecera-cambia))::view-transition-old(cab-quien),
html:active-view-transition-type(pagina):not(:active-view-transition-type(cabecera-cambia))::view-transition-old(cab-bascula) { animation: none; opacity: 0; }
html:active-view-transition-type(pagina):not(:active-view-transition-type(cabecera-cambia))::view-transition-new(cabecera),
html:active-view-transition-type(pagina):not(:active-view-transition-type(cabecera-cambia))::view-transition-new(cab-logo),
html:active-view-transition-type(pagina):not(:active-view-transition-type(cabecera-cambia))::view-transition-new(cab-tema),
html:active-view-transition-type(pagina):not(:active-view-transition-type(cabecera-cambia))::view-transition-new(cab-idioma),
html:active-view-transition-type(pagina):not(:active-view-transition-type(cabecera-cambia))::view-transition-new(cab-acciones),
html:active-view-transition-type(pagina):not(:active-view-transition-type(cabecera-cambia))::view-transition-new(cab-quien),
html:active-view-transition-type(pagina):not(:active-view-transition-type(cabecera-cambia))::view-transition-new(cab-bascula) { animation: none; opacity: 1; }

/* Cuando la cabecera cambia de contenido (entrar o salir del sistema de consulta): el fondo, el
   logo, el sol/luna y el idioma quedan quietos; lo del medio se va hacia arriba y lo nuevo salta
   desde abajo, en cadena (sin fundido cruzado). */
html:active-view-transition-type(cabecera-cambia)::view-transition-old(cabecera),
html:active-view-transition-type(cabecera-cambia)::view-transition-old(cab-logo),
html:active-view-transition-type(cabecera-cambia)::view-transition-old(cab-tema),
html:active-view-transition-type(cabecera-cambia)::view-transition-old(cab-idioma) { animation: none; opacity: 0; }
html:active-view-transition-type(cabecera-cambia)::view-transition-new(cabecera),
html:active-view-transition-type(cabecera-cambia)::view-transition-new(cab-logo),
html:active-view-transition-type(cabecera-cambia)::view-transition-new(cab-tema),
html:active-view-transition-type(cabecera-cambia)::view-transition-new(cab-idioma) { animation: none; opacity: 1; }
html:active-view-transition-type(cabecera-cambia)::view-transition-group(cab-acciones),
html:active-view-transition-type(cabecera-cambia)::view-transition-group(cab-quien),
html:active-view-transition-type(cabecera-cambia)::view-transition-group(cab-bascula) { animation-duration: .45s; animation-timing-function: cubic-bezier(.16,1,.3,1); }
/* las imágenes no se estiran mientras el grupo cambia de ancho: cada una conserva su tamaño */
html:active-view-transition-type(cabecera-cambia)::view-transition-old(cab-acciones),
html:active-view-transition-type(cabecera-cambia)::view-transition-new(cab-acciones),
html:active-view-transition-type(cabecera-cambia)::view-transition-old(cab-quien),
html:active-view-transition-type(cabecera-cambia)::view-transition-new(cab-quien),
html:active-view-transition-type(cabecera-cambia)::view-transition-old(cab-bascula),
html:active-view-transition-type(cabecera-cambia)::view-transition-new(cab-bascula) { width: auto; height: 100%; object-fit: none; }
html:active-view-transition-type(cabecera-cambia)::view-transition-old(cab-acciones),
html:active-view-transition-type(cabecera-cambia)::view-transition-new(cab-acciones) { left: auto; right: 0; }
html:active-view-transition-type(cabecera-cambia)::view-transition-old(cab-acciones),
html:active-view-transition-type(cabecera-cambia)::view-transition-old(cab-quien),
html:active-view-transition-type(cabecera-cambia)::view-transition-old(cab-bascula) { animation: cab-sale .2s cubic-bezier(.4,0,1,1) both; }
html:active-view-transition-type(cabecera-cambia)::view-transition-new(cab-acciones),
html:active-view-transition-type(cabecera-cambia)::view-transition-new(cab-quien),
html:active-view-transition-type(cabecera-cambia)::view-transition-new(cab-bascula) { animation: cab-entra .5s cubic-bezier(.34,1.4,.55,1) .14s both; }
html:active-view-transition-type(cabecera-cambia)::view-transition-new(cab-bascula) { animation-delay: .16s; }
html:active-view-transition-type(cabecera-cambia)::view-transition-new(cab-acciones) { animation-delay: .2s; }
@keyframes cab-sale { to { opacity: 0; transform: translateY(-10px); } }
@keyframes cab-entra { 0% { opacity: 0; transform: translateY(12px) scale(.92); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }

/* Esquinas del sistema de consulta: crecen desde la cabecera hacia abajo al entrar y se
   recogen hacia arriba al salir, durante el mismo cambio de página. */
html:active-view-transition-type(cabecera-cambia)::view-transition-old(esq-izq), html:active-view-transition-type(cabecera-cambia)::view-transition-new(esq-izq) { transform-origin: 0 0; }
html:active-view-transition-type(cabecera-cambia)::view-transition-old(esq-der), html:active-view-transition-type(cabecera-cambia)::view-transition-new(esq-der) { transform-origin: 100% 0; }
html:active-view-transition-type(cabecera-cambia)::view-transition-new(esq-izq), html:active-view-transition-type(cabecera-cambia)::view-transition-new(esq-der) { animation: esq-crece .55s cubic-bezier(.16,1,.3,1) .1s both; }
html:active-view-transition-type(cabecera-cambia)::view-transition-old(esq-izq), html:active-view-transition-type(cabecera-cambia)::view-transition-old(esq-der) { animation: esq-recoge .3s cubic-bezier(.4,0,1,1) both; }
html:active-view-transition-type(pagina):not(:active-view-transition-type(cabecera-cambia))::view-transition-old(esq-izq), html:active-view-transition-type(pagina):not(:active-view-transition-type(cabecera-cambia))::view-transition-old(esq-der) { animation: none; opacity: 0; }
html:active-view-transition-type(pagina):not(:active-view-transition-type(cabecera-cambia))::view-transition-new(esq-izq), html:active-view-transition-type(pagina):not(:active-view-transition-type(cabecera-cambia))::view-transition-new(esq-der) { animation: none; opacity: 1; }
@keyframes esq-crece { from { transform: scale(0); } }
@keyframes esq-recoge { to { transform: scale(0); } }

/* Al entrar o salir del sistema de consulta la página no se hunde ni se achica (despegaba el panel
   de la cabecera y de los costados): solo se desvanece, y las esquinas hacen el movimiento. */
html:active-view-transition-type(cabecera-cambia)::view-transition-old(root) { animation: pag-vt-funde .25s cubic-bezier(.4,0,1,1) both; }
@keyframes pag-vt-funde { to { opacity: 0; } }

/* Respaldo para cambios de página donde el navegador no funde solo (Firefox) o que van a otro
   sitio: la página se hunde y se apaga al irse, y la nueva aparece y salta (assets/js/transiciones.js). */
/* Todas las páginas reservan el lugar de la barra de desplazamiento (la tengan o no): así la
   cabecera mide lo mismo en todas y no se corre al pasar de una página que scrollea a otra que no. */
html { background-color: var(--canvas); scrollbar-gutter: stable; }
html.pag-entra body > :not(.cabecera) { animation: pagEntra .35s cubic-bezier(.16,1,.3,1) both; }
html.pag-sale body > :not(.cabecera) { opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .22s cubic-bezier(.4,0,1,1), transform .22s cubic-bezier(.4,0,1,1); }
@keyframes pagEntra { from { opacity: 0; } to { opacity: 1; } }



/* ---------- Botón sol / luna ---------- */
.tema-boton {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #9a9a9a;              /* sobre el chasis negro */
  cursor: pointer;
  transition: background-color .3s cubic-bezier(.16,1,.3,1), color .3s cubic-bezier(.16,1,.3,1), transform .2s cubic-bezier(.16,1,.3,1);
}
.tema-boton:hover { background: #1b1b1b; color: #e6e6e6; }
.tema-boton:active { transform: scale(.92); }
.tema-boton svg {
  position: absolute;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}
/* en claro se ofrece la luna (pasar a oscuro); en oscuro, el sol */
.tema-boton .tema-boton__sol { opacity: 0; transform: rotate(-90deg) scale(.6); }
html[data-tema="oscuro"] .tema-boton .tema-boton__sol { opacity: 1; transform: none; }
html[data-tema="oscuro"] .tema-boton .tema-boton__luna { opacity: 0; transform: rotate(90deg) scale(.6); }

/* sobre fondo claro (pantallas de ingreso), arriba a la derecha */
.tema-boton--flotante {
  position: fixed;
  z-index: 60;
  top: 16px;
  right: 16px;
  color: var(--ink-2);
  background-color: var(--surface);
  box-shadow: var(--sh-card);
}
.tema-boton--flotante:hover { background-color: var(--surface); color: var(--ink); }

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