/* ═══════════════════════════════════════════════════════════════════════════
   lumavi-look.css — pone las páginas VIEJAS del equipo con el look de caso.html
   sin tocar su HTML ni su código: solo apariencia.
   Cada página lo carga DESPUÉS de su propio <style> y se marca con
     <html data-look="navhero">  → barra <nav> + encabezado .page-header / .hero
     <html data-look="top">      → barra oscura .top (con ← y título)
     <html data-look="topnav">   → barra .top-nav + pestañas .tabs
   Las páginas nuevas usan lumavi.css, no este archivo.
   Ya no hace falta subir el ?v= al cambiar esto: netlify.toml manda los .css con
   max-age=0, must-revalidate, así que el navegador los vuelve a pedir en cada carga.

   Fase 6 del rollout azul: los colores ya eran los del sistema, pero estaban escritos
   a mano en veinte sitios. Ahora salen de los mismos tokens que sitio.css y lumavi.css,
   así que cambiar el azul es cambiar un renglón. Estas páginas no cargan ninguna de las
   otras dos hojas, por eso los tokens se definen aquí también.
   ═══════════════════════════════════════════════════════════════════════════ */

/* SOLO los tokens que usa ESTE archivo, y ni uno más.
   Al principio se pusieron también --ink, --mid, --line y --field "por si acaso", y eso
   cambió 33 cosas en facturas.html sin querer: esas páginas viejas tienen reglas que
   piden var(--ink) y compañía, tokens que nunca existieron, así que el navegador las
   descartaba y el texto heredaba el azul marino. Al definirlos aquí, esas reglas
   dormidas se despertaron de golpe. Lección: en una hoja que se monta encima de
   páginas ajenas, cada token nuevo puede encender una regla que llevaba años muerta. */
html[data-look]{
  --navy:#0A233E;--navy2:#071A2F;--bg:#EEF1F4;--green-br:#8CC346;
  --sobre-navy:#C9D3DE;   /* texto secundario sobre el azul oscuro: 8,6:1 */
  --sobre-navy2:#AEBBC9;  /* el más tenue que seguimos usando sobre azul: 6,1:1 */
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Outfit',system-ui,sans-serif;
}

html[data-look] body{font-family:var(--sans);background:var(--bg);-webkit-font-smoothing:antialiased}

/* Mismo anillo de foco que el sitio y el portal (antes estas páginas usaban el del navegador). */
html[data-look] :focus-visible{outline:3px solid var(--green-br);outline-offset:2px}

/* ── navhero: <nav> fija + encabezado grande blanco → barra y encabezado azules ── */
html[data-look="navhero"] body > nav{background:var(--navy2)!important;border-bottom:none!important;box-shadow:none!important;backdrop-filter:none!important}
html[data-look="navhero"] body > nav .logo-name{color:#fff!important}
html[data-look="navhero"] body > nav .logo-sub{color:var(--sobre-navy2)!important}
html[data-look="navhero"] body > nav a,
html[data-look="navhero"] body > nav button{color:var(--sobre-navy)!important}
html[data-look="navhero"] body > nav a:hover,
html[data-look="navhero"] body > nav button:hover,
html[data-look="navhero"] body > nav .active{color:#fff!important}
html[data-look="navhero"] .page-header,
html[data-look="navhero"] .hero{background:var(--navy)!important;border-bottom:none!important;color:#fff}
html[data-look="navhero"] .page-header::before,
html[data-look="navhero"] .hero::before{display:none!important}
html[data-look="navhero"] .page-header h1,
html[data-look="navhero"] .hero h1{color:#fff!important;font-family:var(--serif);font-style:normal!important;font-weight:700}
html[data-look="navhero"] .page-header .ph-title{color:#fff!important;font-style:normal!important}
html[data-look="navhero"] .page-header .ph-title em,
html[data-look="navhero"] .page-header h1 em,
html[data-look="navhero"] .hero h1 em{color:#fff!important;font-style:normal!important}
html[data-look="navhero"] .ph-eyebrow,
html[data-look="navhero"] .hero-eyebrow{color:var(--sobre-navy2)!important}
html[data-look="navhero"] .ph-eyebrow::before,
html[data-look="navhero"] .hero-eyebrow::before{background:var(--green-br)!important}
html[data-look="navhero"] .ph-sub,
html[data-look="navhero"] .hero-sub,
html[data-look="navhero"] .hero p{color:var(--sobre-navy)!important;font-weight:400!important}

/* ── top: barra oscura con ← y título ── */
html[data-look="top"] .top{background:var(--navy2)!important;border-bottom:none!important}
html[data-look="top"] .top-title{font-family:var(--serif)!important;font-style:normal!important;font-weight:700;font-size:1.2rem!important;color:#fff}
html[data-look="top"] .back-btn{color:#fff!important;min-width:40px;min-height:40px;border-radius:10px}
html[data-look="top"] .back-btn:hover{background:rgba(255,255,255,.08)}

/* ── topnav: barra .top-nav + pestañas ── */
html[data-look="topnav"] .top-nav{background:var(--navy2)!important;border-bottom:none!important;color:#fff}
html[data-look="topnav"] .top-nav a,
html[data-look="topnav"] .top-nav button{color:var(--sobre-navy)}
html[data-look="topnav"] .top-nav a:hover{color:#fff}
html[data-look="topnav"] .hero h1 em{font-style:normal!important;color:#fff!important}

/* ── pestañas (top y topnav): subrayado verde como caso.html ── */
html[data-look] .tabs .tab.active,
html[data-look] .tabs .tab[aria-selected="true"]{color:var(--navy)!important;border-bottom-color:var(--green-br)!important}

/* ── teléfono: la barra de navhero no cabe con el nombre + los enlaces ── */
@media (max-width:640px){
  html[data-look="navhero"] body > nav .logo-lockup{display:none!important}
  html[data-look="navhero"] body > nav > div:last-child{gap:14px!important;overflow-x:auto;white-space:nowrap;margin-left:12px;scrollbar-width:none}
  html[data-look="navhero"] body > nav > div:last-child::-webkit-scrollbar{display:none}
  html[data-look="navhero"] .search-wrap{min-width:0}
  html[data-look="navhero"] .search-wrap .search-input{min-width:0;flex:1 1 auto}
}

/* ── teléfono: tablas anchas se desplazan dentro de su tarjeta, no la página ── */
@media (max-width:640px){
  html[data-look] table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
  html[data-look] td{overflow-wrap:anywhere}
}

/* ── Pantalla táctil: campos a 16 px. Con menos, iPhone hace zoom al entrar al campo
   y no vuelve (docs/REGLAS_DE_PULIDO.md §A). En escritorio no cambia nada. ── */
@media (pointer:coarse){
  /* :where() = especificidad cero: si la página ya fija un tamaño propio (p. ej. 1.05rem), ese gana;
     solo entra donde el campo se quedaba en los 13 px del navegador. */
  :where(html[data-look]) :where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea){font-size:16px}
}