/* Transiciones entre paginas (View Transitions API, cross-document).
   Vive en un CSS render-blocking -- NO inyectado por JS -- porque el opt-in
   `@view-transition` tiene que estar presente en el primer render de la
   pagina nueva; inyectado desde nlt-shared.js (defer) llegaba despues del
   primer paint y la transicion se perdia. Header, sidebar y fondo liquido se
   quedan fijos; solo el contenido hace fundido. Navegadores sin soporte lo
   ignoran por completo. */
/* @view-transition lo activa assets/js/nlt-perf.js solo en equipos fuertes (en WebKit/equipos justos retrasa cada navegación) */
header.nav-blur { view-transition-name: nlt-header; }
#sidebar { view-transition-name: nlt-sidebar; }
#nlt-liquid-bg { view-transition-name: nlt-bg; }
::view-transition-group(nlt-header),
::view-transition-group(nlt-sidebar),
::view-transition-group(nlt-bg) { animation-duration: 0s; }
::view-transition-old(root) { animation: nlt-vt-out 0.22s ease both; }
::view-transition-new(root) { animation: nlt-vt-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes nlt-vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes nlt-vt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Tipografia de display (Geist) -- la hoja de fuentes se pide en el <head> de cada pagina. */
h1, h2, .nlt-display { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-feature-settings: 'ss01', 'cv11'; text-wrap: balance; }
h3 { font-family: 'Geist', 'Inter', system-ui, sans-serif; }

/* position: sticky (secciones scroll-scrub) deja de funcionar si <body> es un contenedor de scroll:
   varias paginas ponen `body { overflow-x: hidden }` (fix de overflow horizontal en movil). `clip` recorta igual
   pero NO crea contenedor de scroll, asi que el sticky sigue anclado al viewport. */
body { overflow-x: clip !important; }

/* Borde de luz giratorio (plan destacado, tarjetas premium). Envolver la tarjeta:
   <div class="nlt-glowborder"><div class="glass-card ...">...</div></div> */
@property --nlt-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.nlt-glowborder { position: relative; display: flex; padding: 1px; border-radius: 25px; isolation: isolate;
    background: conic-gradient(from var(--nlt-ang), rgba(67,120,255,.95), rgba(168,85,247,.5) 25%, rgba(34,211,238,.85) 50%, rgba(67,120,255,.12) 70%, rgba(67,120,255,.95));
    animation: nlt-glowspin 8s linear infinite; }
.nlt-glowborder::before { content: ''; position: absolute; inset: -10px; z-index: -1; border-radius: 34px; pointer-events: none; filter: blur(22px); opacity: .28;
    background: conic-gradient(from var(--nlt-ang), rgba(67,120,255,.9), rgba(168,85,247,.5) 25%, rgba(34,211,238,.8) 50%, rgba(67,120,255,.1) 70%, rgba(67,120,255,.9)); }
.nlt-glowborder > .glass-card { flex: 1; border: 0; border-radius: 24px; background: linear-gradient(180deg, rgba(14,18,28,.97), rgba(8,10,16,.99)); }
@keyframes nlt-glowspin { to { --nlt-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .nlt-glowborder { animation: none; } }
/* Movil: el giro repinta el degradado y su halo desenfocado en cada frame -- queda fijo. */
@media (hover: none), (pointer: coarse) { .nlt-glowborder { animation: none; --nlt-ang: 30deg; } }

/* Chips de filtro (periodo de facturacion, etc.) */
.nlt-chips { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.nlt-chip { border: 0; cursor: pointer; padding: 7px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #9ca3af; background: transparent; transition: background .25s ease, color .25s ease; }
.nlt-chip:hover { color: #fff; }
.nlt-chip.on { color: #fff; background: rgba(67,120,255,.28); box-shadow: inset 0 0 0 1px rgba(67,120,255,.5); }

/* Acordeon suave (details animados por JS) */
details[data-acc] > summary { cursor: pointer; list-style: none; } details[data-acc] > summary::-webkit-details-marker { display: none; }
details[data-acc] .faq-icon, details[data-acc] > summary > i { transition: transform .35s cubic-bezier(.16,1,.3,1); }
details[data-acc][open] .faq-icon, details[data-acc][open] > summary > i { transform: rotate(45deg); }

/* Enfoque visible para teclado (accesibilidad) + enlace "saltar al contenido" */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #78a0ff; outline-offset: 3px; border-radius: 8px; }
.nlt-skip { position: fixed; left: 16px; top: -60px; z-index: 300; padding: 10px 16px; border-radius: 12px; background: #4378ff; color: #fff; font-size: 13px; font-weight: 700; transition: top .2s ease; }
.nlt-skip:focus { top: 16px; }

/* Contraste AA (WCAG 2.1) sobre el fondo oscuro: texto blanco sobre el azul de marca pasaba de 3.9:1 a 4.8:1 y los
   grises de apoyo (500/600) de 4.1:1 / 2.6:1 a >= 4.5:1. Cambio deliberadamente minimo de tono. */
.bg-nlt-accent { background-color: #3a68ee; }
.text-gray-500 { color: #7d8797; }
.text-gray-600 { color: #6f7a8b; }
::placeholder { color: #7d8797; opacity: 1; }
.cal-filter-pill.active { background-color: #3a68ee !important; }


/* ── Móvil: sin zoom ni desplazamiento raros en todo el ecosistema ──
   · iOS acerca (zoom) la pantalla al enfocar un campo con letra menor de 16 px y no vuelve sola: en pantallas táctiles/chicas todo campo
     de texto lleva 16 px.
   · `text-size-adjust` evita que Safari/Chrome agranden textos solos (al girar el teléfono, en bloques anchos).
   · `touch-action: manipulation` quita el zoom por doble toque en botones, enlaces y campos (el pellizco con dos dedos sigue funcionando).
   · `overscroll-behavior-x: none` evita el "rebote" lateral de la página; las animaciones de scroll (canvas) nunca pasan del ancho de la pantalla.
   · el <meta viewport> de cada página lleva minimum-scale=1: iOS no encoge la página para "hacer caber" un elemento ancho. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior-x: none; }
a, button, input, select, textarea, label, summary, [role="button"], [role="tab"] { touch-action: manipulation; }
canvas[data-seq] { max-width: 100%; height: auto; }
@media (max-width: 1023px), (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]), select, textarea { font-size: 16px !important; }
}