/* Nebula Suite · temas. Las páginas usan variables (--fondo, --texto, --acento…);
   aquí se definen para el tema oscuro (carbón y arena) y el claro (papel), y el acento cambia
   según el formato (cada uno tiene su color) o «sistema» en menú y cuenta. */

html[data-tema="oscuro"]{
  color-scheme: dark;
  --fondo:#141311; --superficie:#1D1B18; --elevada:#262320; --borde:#3A352F;
  --texto:#F2EDE4; --apagado:#ABA294;
  --ok:#7DD8A0; --peligro:#FF8D7A; --aviso:#F4C35C;
  --velo:rgba(20,19,17,.92); --sobre-acento:#17140F; --borde-fuerte:#4D463D; --borde-punteado:#5E564B;
  --c-novedad:#FF7A8A; --c-informe:#FF9F6B; --c-remision:#F7BE55; --c-citatorio:#E3D163; --c-vacaciones:#B5DD6A; --c-entrevista:#6EDB9E; --c-cadena:#57D9BC; --c-lugar:#5CCDE3; --c-video:#7FB4F5; --c-inspeccion:#9FA8F5; --c-vehiculo:#C7A0F2; --c-rutas:#EC9FE0; --c-mapeo:#FF6A55; --c-comparativa:#FF91B8;
  --c-sistema:#E6D3B3;
  /* menú */
  --panel:#1D1B18; --oro:var(--acento); --oro-claro:var(--acento);
}
html[data-tema="claro"]{
  color-scheme: light;
  --fondo:#F6F3EE; --superficie:#FFFFFF; --elevada:#F0EBE3; --borde:#DFD7CB;
  --texto:#1F1B16; --apagado:#6B6257;
  --ok:#17845F; --peligro:#C23A31; --aviso:#9A5A00;
  --velo:rgba(246,243,238,.93); --sobre-acento:#FFFFFF; --borde-fuerte:#CBC1B2; --borde-punteado:#B7AB99;
  --c-novedad:#C42B54; --c-informe:#B4501A; --c-remision:#9C5D06; --c-citatorio:#746400; --c-vacaciones:#4C7A0C; --c-entrevista:#12804A; --c-cadena:#0B7D66; --c-lugar:#0A7088; --c-video:#2A5FC2; --c-inspeccion:#4A4FCB; --c-vehiculo:#7A3FC8; --c-rutas:#9A2C9A; --c-mapeo:#C2341F; --c-comparativa:#B22A6E;
  --c-sistema:#5B4A36;
  --panel:#FFFFFF; --oro:var(--acento); --oro-claro:var(--acento);
}
html[data-tema][data-grupo="novedad"]{ --acento:var(--c-novedad) }
html[data-tema][data-grupo="informe"]{ --acento:var(--c-informe) }
html[data-tema][data-grupo="remision"]{ --acento:var(--c-remision) }
html[data-tema][data-grupo="citatorio"]{ --acento:var(--c-citatorio) }
html[data-tema][data-grupo="vacaciones"]{ --acento:var(--c-vacaciones) }
html[data-tema][data-grupo="entrevista"]{ --acento:var(--c-entrevista) }
html[data-tema][data-grupo="cadena"]{ --acento:var(--c-cadena) }
html[data-tema][data-grupo="lugar"]{ --acento:var(--c-lugar) }
html[data-tema][data-grupo="video"]{ --acento:var(--c-video) }
html[data-tema][data-grupo="inspeccion"]{ --acento:var(--c-inspeccion) }
html[data-tema][data-grupo="vehiculo"]{ --acento:var(--c-vehiculo) }
html[data-tema][data-grupo="rutas"]{ --acento:var(--c-rutas) }
html[data-tema][data-grupo="mapeo"]{ --acento:var(--c-mapeo) }
html[data-tema][data-grupo="comparativa"]{ --acento:var(--c-comparativa) }
html[data-tema][data-grupo="sistema"]{ --acento:var(--c-sistema) }
html[data-tema]{ --acento-suave: color-mix(in srgb, var(--acento) 16%, transparent) }

/* sombras más ligeras en el tema claro */
html[data-tema="claro"] .brindis{ box-shadow:0 8px 24px rgba(45,35,20,.16) }

/* texto de ejemplo en los campos: del tema (el gris del navegador casi no se lee en oscuro) */
html[data-tema] ::placeholder{color:var(--apagado); opacity:.9}
/* «Limpiar» en tema claro: un rojo un poco más oscuro para que se lea bien sobre su fondo */
html[data-tema="claro"] .accion.terciaria{color:color-mix(in srgb, var(--peligro) 80%, #000)}

/* ---------- computadora ----------
   El encabezado y la barra de botones ocupan todo el ancho, pero su contenido se
   alinea con la columna del formulario (antes el título quedaba pegado a la
   orilla y la barra flotaba a media pantalla). En pantallas grandes los
   formatos se ensanchan para aprovechar el espacio. Rutas tiene su propio diseño. */
:root{--ancho-pagina:720px}
@media (min-width:1200px){
  html[data-tema]:not([data-grupo="sistema"]):not([data-grupo="comparativa"]):not([data-grupo="rutas"]):not([data-grupo="mapeo"]){--ancho-pagina:880px}
  html[data-tema]:not([data-grupo="sistema"]):not([data-grupo="comparativa"]):not([data-grupo="rutas"]):not([data-grupo="mapeo"]) body > main{max-width:var(--ancho-pagina)}
}
@media (min-width:760px){
  html[data-tema]:not([data-grupo="rutas"]):not([data-grupo="mapeo"]) body > header,
  html[data-tema]:not([data-grupo="rutas"]):not([data-grupo="mapeo"]) body > .barra{
    --lado:max(16px, calc((100% - var(--ancho-pagina)) / 2 + 14px));
    padding-left:var(--lado); padding-right:var(--lado);
  }
  html[data-tema]:not([data-grupo="rutas"]):not([data-grupo="mapeo"]) body > .barra{max-width:none}
  html[data-tema]:not([data-grupo="rutas"]):not([data-grupo="mapeo"]) body > header .volver{right:var(--lado)}
}

/* con la guía visual al lado (guia.js): el formulario se recorre a la izquierda y la hoja ocupa la derecha */
@media (min-width:1100px){
  html[data-tema] body.nv-guia-con-lado{--col-izq:max(24px, calc(50vw - 660px))}
  html[data-tema]:not([data-grupo="sistema"]):not([data-grupo="comparativa"]):not([data-grupo="rutas"]):not([data-grupo="mapeo"]) body.nv-guia-con-lado > main{max-width:640px; margin-left:var(--col-izq); margin-right:0}
  html[data-tema]:not([data-grupo="rutas"]):not([data-grupo="mapeo"]) body.nv-guia-con-lado > header{padding-left:calc(var(--col-izq) + 14px); --lado:24px; padding-right:24px}
  html[data-tema]:not([data-grupo="rutas"]):not([data-grupo="mapeo"]) body.nv-guia-con-lado > .barra{left:var(--col-izq); right:auto; width:640px; margin:0;
    padding-left:14px; padding-right:14px; border:1px solid var(--borde); border-bottom:none; border-radius:16px 16px 0 0}
}

/* ---------- avisos del administrador (tarjeta compartida: menú y panel) ---------- */
.nv-aviso{--tono:var(--c-sistema); display:flex; gap:12px; align-items:flex-start; text-align:left}
.nv-aviso[data-tipo="actualizacion"]{--tono:var(--c-cadena)}
.nv-aviso[data-tipo="importante"]{--tono:var(--c-novedad)}
.nv-aviso[data-tipo="enlace"]{--tono:var(--c-video)}
.nv-aviso[data-tipo="mensaje"]{--tono:var(--c-entrevista)}
.nv-ico{flex:none; width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--tono) 18%, transparent); color:var(--tono);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--tono) 35%, transparent) inset}
.nv-ico svg{width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.nv-cuerpo{flex:1; min-width:0}
.nv-etiqueta{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--tono)}
.nv-nuevo{font-style:normal; font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:999px; background:var(--tono); color:var(--sobre-acento)}
.nv-titulo{display:block; font-size:16px; line-height:1.3; margin:2px 0 0; color:var(--texto); overflow-wrap:anywhere}
.nv-texto{margin:6px 0 0; font-size:14.5px; line-height:1.5; color:var(--texto); white-space:pre-line; overflow-wrap:anywhere}
.nv-texto a{color:var(--tono); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.nv-boton{display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:8px 14px; border-radius:999px;
  background:var(--tono); color:var(--sobre-acento); font-size:14px; font-weight:700; text-decoration:none}
.nv-boton svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.nv-boton:hover{filter:brightness(1.08)}

/* ---------- chat (usuario y panel) ---------- */
.nv-chat{display:flex; flex-direction:column; gap:8px; padding:4px 2px}
.nv-dia{align-self:center; font-size:11.5px; color:var(--apagado); padding:2px 10px; border-radius:999px; background:var(--elevada); margin:6px 0 2px}
.nv-msj{max-width:84%; padding:9px 12px 6px; border-radius:16px; font-size:14.5px; line-height:1.45; white-space:pre-line; overflow-wrap:anywhere;
  background:var(--elevada); color:var(--texto); border:1px solid var(--borde); border-bottom-left-radius:5px; align-self:flex-start}
.nv-msj.mio{align-self:flex-end; background:color-mix(in srgb, var(--c-sistema) 22%, var(--superficie)); border-color:color-mix(in srgb, var(--c-sistema) 40%, transparent);
  border-bottom-left-radius:16px; border-bottom-right-radius:5px}
.nv-msj a{color:inherit; font-weight:600; text-decoration:underline}
.nv-msj .sobre{display:block; font-size:12px; color:var(--apagado); margin-bottom:3px; white-space:normal}
.nv-msj time{display:block; text-align:right; font-size:11px; color:var(--apagado); margin-top:2px}
.nv-escribir{display:flex; gap:8px; align-items:flex-end}
.nv-escribir textarea{flex:1; min-height:44px; max-height:140px; resize:none; padding:11px 12px; border-radius:14px; border:1px solid var(--borde);
  background:var(--elevada); color:var(--texto); font:inherit; font-size:16px; line-height:1.4; outline:none}
.nv-escribir textarea:focus{border-color:var(--c-sistema)}
.nv-escribir button{flex:none; width:46px; height:46px; border-radius:50%; border:none; background:var(--c-sistema); color:var(--sobre-acento); cursor:pointer;
  display:grid; place-items:center}
.nv-escribir button:disabled{opacity:.5}
.nv-escribir button svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.nv-respondiendo{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--apagado); padding:6px 10px; border-left:3px solid var(--c-sistema);
  background:var(--elevada); border-radius:8px; margin-bottom:6px}
.nv-respondiendo[hidden]{display:none}
.nv-respondiendo span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nv-respondiendo button{border:none; background:none; color:var(--apagado); font-size:15px; cursor:pointer; padding:0 4px}

/* ---------- guía visual de formatos (guia.js) ---------- */
.nv-hoja{position:relative; width:100%; aspect-ratio:612/792; background:#fff; --u:1px; color:#111; user-select:none; -webkit-user-select:none}
.nv-hoja img{position:absolute; inset:0; width:100%; height:100%; display:block}
.nv-hoja-capa{position:absolute; inset:0}
.nv-hoja-capa:first-of-type{pointer-events:none}
.nv-hoja-texto{position:absolute; display:flex; justify-content:center; align-items:flex-start; text-align:center; overflow:hidden;
  padding:calc(var(--u) * 1.5) calc(var(--u) * 2.5); box-sizing:border-box; font-family:Arial,Helvetica,sans-serif; line-height:1.12;
  color:#111; white-space:pre-line; overflow-wrap:anywhere; pointer-events:none}
.nv-hoja-texto.cancelado{background:linear-gradient(to top right, transparent calc(50% - .6px), rgba(17,17,17,.55) 50%, transparent calc(50% + .6px))}
.nv-hoja-toque{position:absolute; border:0; padding:0; margin:0; background:transparent; border-radius:2px; cursor:pointer}
.nv-hoja-toque:hover{background:color-mix(in srgb, var(--acento) 14%, transparent); outline:1px dashed var(--acento)}
@keyframes nv-latido-guia{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--acento) 60%, transparent)}70%{box-shadow:0 0 0 calc(var(--u) * 7) transparent}100%{box-shadow:0 0 0 0 transparent}}
.nv-hoja-marca{position:absolute; pointer-events:none; border:2px solid color-mix(in srgb, var(--acento) 80%, #000); border-radius:3px;
  background:color-mix(in srgb, var(--acento) 18%, transparent); animation:nv-latido-guia 1.6s ease-out infinite;
  transition:left .3s ease, top .3s ease, width .3s ease, height .3s ease}
.nv-hoja-marca[hidden]{display:none}
.nv-hoja-marca.otra{animation:none; border-style:dashed; background:color-mix(in srgb, var(--acento) 10%, transparent)}
.nv-hoja-marcas{pointer-events:none}
.nv-hoja-texto.enlinea{display:block; white-space:nowrap; text-overflow:ellipsis; padding:0 calc(var(--u) * .4); text-align:left; line-height:1.05}
.nv-hoja-texto.parrafo{display:block; text-align:justify; padding:0 calc(var(--u) * .4); line-height:1.18}
.nv-hoja-texto.celda.medio-no{align-items:flex-start}

/* botón «Guía» del encabezado y «Ver cómo va» de la barra (todos los formatos) */
.btn-guia{position:absolute; top:calc(14px + env(safe-area-inset-top)); right:calc(var(--lado, 16px) + 70px); display:inline-flex; align-items:center; gap:6px;
  color:var(--acento); background:transparent; border:1px solid color-mix(in srgb, var(--acento) 55%, transparent); border-radius:999px;
  padding:4px 11px 4px 9px; font:inherit; font-size:13px; font-weight:600; cursor:pointer}
.btn-guia svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.btn-guia[aria-pressed="true"]{background:var(--acento); color:var(--sobre-acento,#1A1408); border-color:var(--acento)}
.btn-guia[hidden]{display:none}
header .btn-guia ~ h1{padding-right:150px}       /* que el título no quede debajo de «Guía» y «Menú» */
button.accion.vista{flex:none; display:inline-flex; align-items:center; justify-content:center; gap:7px; background:var(--acento-suave);
  color:var(--acento); border-color:color-mix(in srgb, var(--acento) 55%, transparent)}
button.accion.vista svg{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
button.accion.vista:hover,button.accion.vista:focus-visible{border-color:var(--acento)}
@media (max-width:420px){ .barra{gap:8px} .barra button.accion{font-size:14px; padding-left:10px; padding-right:10px} .barra .terciaria .t{display:none} }
@media (prefers-reduced-motion:reduce){.nv-hoja-marca{animation:none; transition:none}}

.nv-guia-panel{position:sticky; z-index:29; margin:0; padding:10px 14px 10px; background:var(--velo); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--borde)}
.nv-guia-panel[hidden]{display:none}
.nv-guia-panel > *{max-width:692px; margin-left:auto; margin-right:auto}
.nv-guia-titulo{display:flex; align-items:baseline; gap:4px; font-size:12.5px; color:var(--apagado); margin-bottom:7px; min-width:0}
.nv-guia-titulo b{flex:1; min-width:0; color:var(--acento); font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nv-guia-hoja-n{flex:none; font-size:12px; color:var(--apagado)}
.nv-guia-ventana{position:relative; height:140px; overflow:hidden; border-radius:12px; border:1px solid var(--borde); background:#fff; cursor:zoom-in}
.nv-guia-panel.compacta .nv-guia-ventana{height:100px}
.nv-guia-panel.compacta .nv-guia-botones{display:none}
.nv-guia-ventana .nv-hoja{position:absolute; left:0; top:0; transform-origin:0 0; transition:transform .32s cubic-bezier(.2,.8,.2,1), width .32s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.nv-guia-ventana .nv-hoja{transition:none}}
.nv-guia-nota{margin:7px 0 0; font-size:12px; color:var(--apagado)}
.nv-guia-nota[hidden]{display:none}
.nv-guia-botones{display:flex; align-items:center; gap:10px; margin-top:8px}
.nv-guia-chip{flex:none; background:var(--elevada); color:var(--texto); border:1px solid var(--borde); border-radius:999px; padding:6px 12px; font:inherit; font-size:12.5px; cursor:pointer}
.nv-guia-chip:hover,.nv-guia-chip:focus-visible{border-color:var(--acento)}
.nv-guia-pista{margin:0; font-size:11.5px; color:var(--apagado); line-height:1.4}

.nv-guia-velo{position:fixed; inset:0; z-index:70; background:rgba(10,9,7,.72); display:flex; align-items:flex-end; justify-content:center}
.nv-guia-velo[hidden]{display:none}
html.nv-guia-sin-scroll, html.nv-guia-sin-scroll body{overflow:hidden}
.nv-guia-completa{width:100%; max-width:860px; max-height:94vh; max-height:94dvh; display:flex; flex-direction:column; background:var(--superficie);
  border:1px solid var(--borde); border-bottom:none; border-radius:18px 18px 0 0; box-shadow:0 -18px 50px rgba(0,0,0,.45)}
.nv-guia-cab{display:flex; align-items:center; gap:10px; padding:14px 16px 8px}
.nv-guia-cab > :first-child{flex:1; min-width:0; font-size:15px}
.nv-guia-cab > div{display:flex; align-items:baseline; gap:8px}
.nv-guia-cab > div b{font-size:16px}
.nv-guia-cerrar{flex:none; background:var(--elevada); color:var(--texto); border:1px solid var(--borde); border-radius:999px; padding:7px 14px; font:inherit; font-size:13.5px; cursor:pointer}
.nv-guia-pestanas{display:flex; gap:6px; padding:0 16px 10px}
.nv-guia-pestana{background:transparent; color:var(--apagado); border:1px solid var(--borde); border-radius:999px; padding:5px 12px; font:inherit; font-size:12.5px; cursor:pointer}
.nv-guia-pestana[aria-pressed="true"]{background:var(--acento); border-color:var(--acento); color:var(--sobre-acento); font-weight:600}
.nv-guia-cuerpo{flex:1; min-height:0; overflow:auto; padding:0 16px 16px; -webkit-overflow-scrolling:touch}
.nv-guia-cuerpo > .nv-hoja{border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,.35)}

.nv-guia-lado{position:fixed; z-index:20; display:flex; flex-direction:column; gap:8px}
.nv-guia-lado[hidden]{display:none}
.nv-guia-lado .nv-guia-titulo{margin:0}
.nv-guia-lado .nv-guia-pestanas{padding:0}
.nv-guia-marco .nv-hoja{border-radius:6px; box-shadow:0 14px 40px rgba(0,0,0,.4)}
.nv-guia-lado .nv-guia-nota{margin:0}

.nv-previa-cuerpo{display:flex; flex-direction:column; align-items:center; gap:14px; padding-top:4px}
.nv-previa-marco{margin:0; display:flex; flex-direction:column; align-items:center; gap:6px}
.nv-previa-marco figcaption{font-size:12px; color:var(--apagado)}
.nv-previa-hoja{display:block; max-width:100%; height:auto; background:#fff; border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,.35)}
.nv-previa-estado{display:flex; flex-direction:column; align-items:center; gap:14px; padding:48px 16px; color:var(--apagado); font-size:14.5px; text-align:center}
@keyframes nv-giro{to{transform:rotate(360deg)}}
.nv-previa-giro{width:30px; height:30px; border-radius:50%; border:3px solid var(--borde); border-top-color:var(--acento); animation:nv-giro .9s linear infinite}
.nv-previa-nota{padding:8px 16px 0}
.nv-previa-pie{display:flex; gap:10px; padding:12px 16px calc(16px + env(safe-area-inset-bottom))}
.nv-previa-pie button{flex:1; border-radius:12px; padding:13px 12px; font:inherit; font-size:15px; font-weight:600; cursor:pointer}
.nv-previa-seguir{background:transparent; color:var(--texto); border:1px solid var(--borde)}
.nv-previa-bajar{background:var(--acento); color:var(--sobre-acento); border:1px solid var(--acento)}

/* ---------- «Cargando» al cambiar de sección (tema.js) ---------- */
.nv-cargando{--planeta:var(--c-sistema); position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:24px; text-align:center; background:var(--velo); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, visibility 0s linear .2s}
.nv-cargando.visible{opacity:1; visibility:visible; pointer-events:auto; transition:opacity .25s ease, visibility 0s linear 0s}
/* al llegar a una sección: la página se queda tapada hasta que está armada; el planeta
   solo se asoma si eso pasa de 0.2 s (si arma rápido no se ve nada) */
html.nv-llegando body{visibility:hidden}
html.nv-llegando .nv-cargando{visibility:visible}
.nv-cargando.visible.llegada{background:var(--fondo); backdrop-filter:none; -webkit-backdrop-filter:none;
  transition:opacity .25s ease .2s, visibility 0s linear 0s}

/* línea de progreso arriba, del color de la sección a la que se va */
.nv-progreso{--planeta:var(--c-sistema); position:fixed; z-index:201; left:0; right:0; top:env(safe-area-inset-top, 0px); height:3px;
  pointer-events:none; transform-origin:0 50%; transform:scaleX(0); background:var(--planeta);
  box-shadow:0 0 10px color-mix(in srgb, var(--planeta) 60%, transparent)}
.nv-progreso.corre{transform:scaleX(.88); transition:transform 7s cubic-bezier(.08,.75,.2,1)}

/* el enlace tocado mientras se abre su sección */
a.nv-abriendo{cursor:progress}
html.nv-navegando a:not(.nv-abriendo){cursor:progress}

/* Word / PDF / Ver mientras trabajan: giro en el botón; los demás de la barra, quietos */
.barra button.accion.nv-trabajando{position:relative; color:transparent !important; cursor:progress; opacity:1}
.barra button.accion.nv-trabajando > *{visibility:hidden}
.barra button.accion.nv-trabajando::after{content:""; position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px;
  border-radius:50%; border:2.5px solid color-mix(in srgb, var(--nv-giro, currentColor) 30%, transparent);
  border-top-color:var(--nv-giro, currentColor); animation:nv-gira .7s linear infinite}
.barra.nv-ocupada button.accion:not(.nv-trabajando){opacity:.45; pointer-events:none; transition:opacity .2s}
@keyframes nv-gira{to{transform:rotate(360deg)}}
.nv-cargando.tarda{cursor:pointer}
.nv-cargando-titulo{margin-top:14px; font-size:16px; font-weight:700; color:var(--texto); letter-spacing:.01em}
.nv-cargando-titulo::after{content:""; display:inline-block; width:1.2em; text-align:left; animation:nv-puntos 1.4s steps(4) infinite}
@keyframes nv-puntos{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.nv-cargando-texto{margin:0; max-width:300px; font-size:13.5px; color:var(--apagado); line-height:1.45}
.nv-sistema{--r:68px; --ry:20px; position:relative; width:176px; height:110px; display:grid; place-items:center; transform:rotate(-14deg)}
.nv-planeta{position:relative; z-index:2; width:62px; height:62px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--planeta) 35%, #fff) 0%, var(--planeta) 48%, color-mix(in srgb, var(--planeta) 45%, #000) 100%);
  box-shadow:0 0 28px color-mix(in srgb, var(--planeta) 45%, transparent), inset -6px -7px 12px rgba(0,0,0,.28)}
.nv-anillo{position:absolute; width:calc(var(--r) * 2); height:calc(var(--ry) * 2); border-radius:50%;
  border:1px solid color-mix(in srgb, var(--texto) 22%, transparent); z-index:1}
.nv-orbita-luna{position:absolute; inset:0; display:grid; place-items:center; z-index:3; animation:nv-luna-z 2.4s steps(1, end) infinite}
.nv-luna-x{animation:nv-luna-x 1.2s ease-in-out infinite alternate}
.nv-luna{width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff, #D9D2C5 60%, #A39A8C);
  box-shadow:0 0 8px rgba(255,255,255,.5); animation:nv-luna-y 1.2s ease-in-out -0.6s infinite alternate}
/* la luna da la vuelta en elipse: X e Y desfasadas un cuarto de vuelta; pasa por detrás del planeta la mitad del tiempo */
@keyframes nv-luna-x{from{transform:translateX(calc(var(--r) * -1))}to{transform:translateX(var(--r))}}
@keyframes nv-luna-y{from{transform:translateY(calc(var(--ry) * -1)) scale(.8)}to{transform:translateY(var(--ry)) scale(1.1)}}
@keyframes nv-luna-z{0%{z-index:3}50%{z-index:1}}
html[data-tema="claro"] .nv-luna{box-shadow:0 0 0 1px rgba(60,45,25,.18), 0 2px 6px rgba(60,45,25,.25)}
@media (prefers-reduced-motion:reduce){
  .nv-orbita-luna,.nv-luna-x,.nv-luna,.nv-cargando-titulo::after{animation:none}
  .nv-progreso.corre{transition:none}
  .nv-luna-x{transform:translateX(var(--r))}
}

/* ---------- Aviso de versión nueva (tema.js) ---------- */
.nv-version{
  position:fixed; z-index:9000; left:50%; transform:translateX(-50%);
  top:calc(10px + env(safe-area-inset-top)); width:max-content; max-width:calc(100vw - 24px);
  display:flex; align-items:center; gap:8px;
  background:var(--elevada,#262320); color:var(--texto,#F2EDE4); border:1px solid var(--borde,#3A352F);
  border-radius:14px; padding:8px 8px 8px 14px; font-size:14px; line-height:1.3;
  box-shadow:0 10px 30px rgba(0,0,0,.35); animation:nv-version-entra .25s ease-out;
}
.nv-version span{font-weight:600; white-space:nowrap}
.nv-version button{font:inherit; font-size:13.5px; font-weight:600; border-radius:10px; padding:8px 12px; cursor:pointer; min-height:36px}
.nv-version-si{background:var(--acento,#E6D3B3); color:var(--sobre-acento,#17140F); border:1px solid var(--acento,#E6D3B3)}
.nv-version-no{min-width:36px; padding:8px 0!important; background:transparent; color:var(--apagado,#ABA294); border:1px solid var(--borde,#3A352F)}
@keyframes nv-version-entra{from{opacity:0; transform:translate(-50%,-8px)}}
@media print{.nv-version{display:none}}


/* ---------- llegada al menú después de la intro de «Entrar» (tema.js) ---------- */
/* el destello del salto se disipa como luz (en «screen» aclara en vez de velar en gris) */
html.nv-intro::after{content:""; position:fixed; inset:-10%; z-index:9999; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 46%, #FFFFFF 0%, #FFF8EC 35%, rgba(255,239,214,.96) 70%, rgba(214,200,255,.9) 100%);
  animation:nv-intro-disipa .85s cubic-bezier(.3,.6,.2,1) .06s forwards}
@keyframes nv-intro-disipa{to{opacity:0; transform:scale(1.25); visibility:hidden}}
@media (prefers-reduced-motion:reduce){ html.nv-intro::after{display:none} }