/* ============================================================
   TEMA CLARO (propuesta 22/10/2026)
   La "piel clara" de la identidad de Oltra: fondo blanco, bloques
   #f6f8fa, bordes #d0d7de, titulares #051022, un solo acento azul,
   cero neón. Se carga DESPUÉS de styles.css y app-demo.css.
   ============================================================ */
:root{
  --carbon:#ffffff;
  --steel-deep:#f6f8fa;
  --steel:#eef1f4;
  --steel-line:#d0d7de;

  --white:#051022;
  --ink:#0b1526;
  --muted:#57606a;
  --subtle:#6e7781;
  --body:#2f363d;

  --blue:#0969da;
  --purple:#8250df;
  --pink:#bf3989;
  --green:#1a7f37;
  --green-bright:#1a7f37;
  --danger:#cf222e;
  --danger-soft:#cf222e;
  --warning:#9a6700;

  --focus-ring:rgba(9,105,218,.4);
  --sh-md:0 1px 3px rgba(31,35,40,.08), 0 1px 2px rgba(31,35,40,.04);
  --sh-lg:0 8px 24px rgba(31,35,40,.10);
  --sh-xl:0 16px 40px rgba(31,35,40,.12);
  --ring:inset 0 0 0 1px rgba(31,35,40,.04);
}
html{color-scheme:light}

/* ---- fuera el neón ---- */
.halo,.haz{display:none}
.gradiente{background:none;-webkit-text-fill-color:var(--blue);color:var(--blue)}
.etiqueta::before{box-shadow:none;animation:none}
.sellos li::before,.sectores li::before{box-shadow:none}
.saltar{color:#fff}

/* ---- cinta, cabecera y menú ---- */
.cinta{background:#051022;color:#e6edf3;border-bottom:0}
.cabecera{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px)}
.cabecera.pegada{box-shadow:0 1px 0 var(--steel-line)}
.nav a{color:var(--muted)}
.nav a.activo::after{background:var(--blue)}
.menu-movil{background:rgba(255,255,255,.98)}

/* ---- barra de cristal (estilo Apple): la cabecera pasa a ser una píldora
   flotante. Mismo HTML en todas las páginas; sólo cambia la piel. ---- */
.cabecera{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  padding-bottom:.6rem;pointer-events:none}
.cabecera.pegada{box-shadow:none;border-bottom-color:transparent}
.cabecera > *{pointer-events:auto}
.cabecera__fila{
  width:calc(100% - 2rem);max-width:1100px;height:58px;margin:.6rem auto 0;
  padding:0 .6rem 0 1.25rem;border-radius:999px;
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(31,35,40,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 8px 28px rgba(31,35,40,.10);
  transition:box-shadow .25s var(--ease), background .25s var(--ease);
}
.cabecera.pegada .cabecera__fila{background:rgba(255,255,255,.78);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 12px 34px rgba(31,35,40,.14)}
.logo__img{height:34px;width:auto}
.nav{gap:.25rem}
.nav a{padding:.4rem .8rem;border-radius:999px;transition:color .18s, background .18s}
.nav a:hover{background:rgba(31,35,40,.06)}
.nav a.activo{background:rgba(31,35,40,.07)}
.nav a.activo::after{display:none}
.cabecera__fila > .boton{border-radius:999px}
.menu-btn{border-radius:999px}
.menu-movil{margin:.4rem 1rem 0;border:1px solid rgba(31,35,40,.08);border-radius:1.25rem;
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);box-shadow:0 12px 34px rgba(31,35,40,.14)}
@media (prefers-reduced-transparency:reduce){
  .cabecera__fila,.menu-movil{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---- botones ---- */
.boton--primario{background:#1f883d;color:#fff;border-color:#1a7f37;
  box-shadow:0 1px 0 rgba(31,35,40,.1), inset 0 1px 0 rgba(255,255,255,.12)}
.boton--primario:hover{background:#1a7f37;box-shadow:0 8px 20px rgba(31,136,61,.22)}
.menu-movil .boton--primario{color:#fff}
.boton--fantasma{background:#fff}
.boton--fantasma:hover{border-color:var(--blue);color:var(--blue)}

/* ---- portada y secciones ---- */
.hero,.portada{background:linear-gradient(180deg,#f6f8fa 0%,#ffffff 85%);border-bottom:1px solid var(--steel-line)}
.seccion--alt{background:#f6f8fa}

/* ---- tarjetas: blancas, borde fino y sombra neutra ---- */
.tarjeta,.seccion--alt .tarjeta{background:#fff;box-shadow:var(--sh-md)}
.tarjeta--brillo:hover,.tarjeta--brillo.morado:hover,.tarjeta--brillo.verde:hover{
  border-color:rgba(9,105,218,.45);box-shadow:var(--sh-lg)}
.icono{background:#f6f8fa}

/* los colores escritos a mano en el HTML (enlaces e iconos) pasan a la paleta clara */
[style*="color:#58a6ff"]{color:var(--blue)!important}
[style*="color:#bc8cff"]{color:var(--purple)!important}
[style*="color:#56d364"]{color:var(--green)!important}
[style*="color:#8b949e"]{color:var(--muted)!important}

/* ---- piezas sueltas ---- */
.sectores li{background:#fff}
.sectores li:hover{border-color:var(--blue);color:var(--blue)}
.aviso{background:#f1f8ff;border-color:rgba(9,105,218,.25);box-shadow:none}
.faq details,.seccion--alt .faq details{background:#fff}
.faq details[open]{border-color:rgba(9,105,218,.45);box-shadow:var(--sh-md)}
.formulario,.seccion--alt .formulario{background:#fff;box-shadow:var(--sh-lg)}
.campo input,.campo select,.campo textarea,
.seccion--alt .campo input,.seccion--alt .campo select,.seccion--alt .campo textarea{background:#fff;color:var(--ink)}
.tabla__envoltorio,.manten{background:#fff;box-shadow:var(--sh-md)}
.manten{border-color:var(--steel-line)}
.cierre{background:#f6f8fa}
.pie{background:#f6f8fa}
.escalon--destacado{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue), var(--sh-lg)}
.escalon__chapa{background:var(--blue);color:#fff;border-color:var(--blue)}
.puente{background:#fff;border-color:var(--steel-line);box-shadow:var(--sh-md)}
.puente:hover{border-color:var(--blue);box-shadow:var(--sh-lg)}
.manifiesto{border-color:var(--steel-line)}

/* ---- la pantalla de ejemplo de la portada, también en claro ---- */
.app{background:#fff;border-color:#d0d7de;color:#1f2328;box-shadow:0 24px 60px -24px rgba(31,35,40,.28), 0 0 0 1px rgba(31,35,40,.03)}
.app__barra{background:#f6f8fa;border-color:#d0d7de}
.app__titulo{color:#57606a}
.app__estado{color:#1a7f37;background:#dafbe1;border-color:#aceebb}
.app__estado i{background:#1a7f37}
.app__nav{background:#fff;border-color:#d8dee4}
.app__tab{color:#57606a}
.app__tab--on{color:#1f2328;background:#f6f8fa;box-shadow:inset 0 -2px 0 #0969da}
.app__usuario{color:#57606a}
.app__usuario span{background:#0969da}
.app__menu{background:#f6f8fa;border-color:#d8dee4}
.app__menu span{color:#57606a}
.app__menu span.on{color:#1f2328;background:#fff;box-shadow:inset 2px 0 0 #0969da, 0 1px 2px rgba(31,35,40,.06)}
.app__menu small{color:#8c959f}
.app__lista h5{color:#1f2328}
.app__lista h5 span{color:#57606a}
.app__fila{background:#fff;border-color:#d8dee4;color:#1f2328}
.app__fila.sel{background:#ddf4ff;border-color:#54aeff}
.app__fila code,.app__fila span small{color:#57606a}
.app__check{border-color:#afb8c1}
.app__fila.sel .app__check{background:#0969da;border-color:#0969da}
.app__barra-sel{border-color:#d0d7de;color:#57606a;background:#f6f8fa}
.app__barra-sel b{color:#1f2328}
.app__b--azul{background:#0969da}
.app__b--verde{background:#1f883d}
.app__capa{background:rgba(255,255,255,.92)}
.app__factura,.app__hecho{background:#fff;border-color:#d0d7de;box-shadow:0 16px 40px rgba(31,35,40,.16)}
.app__hecho{border-color:#aceebb}
.app__factura header b{color:#1f2328}
.app__factura p.cli,.app__factura .tot td{color:#57606a}
.app__factura td{color:#1f2328;border-color:#d8dee4}
.app__factura .tot.fin td{color:#051022}
.app__factura header span{color:#9a6700;background:#fff8c5;border-color:#d4a72c}
.app__hecho h4{color:#57606a}
.app__hecho .ok{color:#1a7f37}
.app__hecho li{color:#1f2328}
.app__hecho li small{color:#57606a}
.app__hecho li i{background:#dafbe1;color:#1a7f37}
.app__cursor path{fill:#1f2328;stroke:#fff}
.app__pasos span{color:#57606a;border-color:#d0d7de;background:#fff}
.app__pasos span b{background:#eef1f4}
.app__pasos span.on{color:#0b1526;border-color:#0969da;background:#ddf4ff}
.app__pasos span.on b{background:#0969da;color:#fff}

/* ---- tarjetas más distinguidas (22/10/2026, pedido por Raz) ----
   franja de color arriba, icono teñido y sombra con más cuerpo */
.tarjeta{position:relative;overflow:hidden;border-color:#d8dee4;
  box-shadow:0 1px 2px rgba(31,35,40,.06), 0 6px 18px -6px rgba(31,35,40,.12)}
.tarjeta::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--blue)}
.tarjeta.morado::before{background:var(--purple)}
.tarjeta.verde::before{background:var(--green)}
.tarjeta .icono{background:#ddf4ff;border-color:#b6e3ff;color:var(--blue)}
.tarjeta.morado .icono{background:#fbefff;border-color:#ecd8ff;color:var(--purple)}
.tarjeta.verde .icono{background:#dafbe1;border-color:#aceebb;color:var(--green)}
.tarjeta h3{color:#051022}
.tarjeta--brillo:hover,.tarjeta--brillo.morado:hover,.tarjeta--brillo.verde:hover{
  transform:translateY(-3px);border-color:#d0d7de;
  box-shadow:0 2px 4px rgba(31,35,40,.06), 0 16px 36px -10px rgba(31,35,40,.22)}
/* las de precios ya llevan su chapa: franja más fina */
.escalon::before{height:3px}

/* ---- vídeo de todas las pestañas, en claro ---- */
.vista__tit{color:#1f2328}
.vista__tit span,.app__leyenda{color:#57606a}
.kpi,.grafica,.stock__fila,.asiento,.modelo > div,.escaner__res li{background:#fff;border-color:#d8dee4;color:#1f2328}
.kpi small,.grafica small,.stock__fila small,.asiento code,.modelo small,.escaner__doc small,.escaner__res li,.modelo__pie small{color:#57606a}
.kpi b,.stock__fila b,.asiento b,.modelo b,.escaner__doc b,.escaner__res b{color:#051022}
.kpi em,.escaner__res b.ok,.modelo__pie small.ok{color:#1a7f37}
.kpi:nth-child(n+2) em{color:#57606a}
.grafica__barras i{background:linear-gradient(180deg,#54aeff,#0969da)}
.escaner{border-color:#d0d7de;background:#f6f8fa}
.escaner.leyendo{border-color:#0969da;background:#f1f8ff}
.escaner.listo{border-color:#4ac26b;background:#fff}
.escaner__barra{background:#eaeef2}
.escaner__barra i{background:#0969da}
.escaner.listo .escaner__barra i{background:#1f883d}
.stock__fila--bajo b,.stock__fila em{color:#cf222e}
.stock__fila--bajo.alerta{background:#ffebe9;border-color:#ff8182}
.asiento--nuevo.ver{border-color:#54aeff;background:#f1f8ff}
.modelo__res{background:#f1f8ff!important;border-color:#54aeff!important}
.modelo__res b{color:#0969da}
/* las tarjetas de precios no recortan la chapa «El más elegido» */
.escalon{overflow:visible}
.escalon::before{border-top-left-radius:inherit;border-top-right-radius:inherit}

/* ---- cristal: tarjetas translúcidas sobre manchas de color suaves ----
   En la piel clara los halos estaban apagados; vuelven, más tenues, porque el
   cristal sólo se nota si hay algo de color detrás que se desenfoque. */
.halo{display:block}
.halo--azul{background:radial-gradient(circle,rgba(9,105,218,.20) 0%,rgba(9,105,218,0) 70%)}
.halo--morado{background:radial-gradient(circle,rgba(130,80,223,.20) 0%,rgba(130,80,223,0) 70%)}
.halo--verde{background:radial-gradient(circle,rgba(26,127,55,.16) 0%,rgba(26,127,55,0) 70%)}
.halo--rosa{background:radial-gradient(circle,rgba(191,57,137,.14) 0%,rgba(191,57,137,0) 70%)}
.seccion--alt .tarjeta,.seccion--alt .faq details,.seccion--alt .formulario{
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  border-color:rgba(255,255,255,.75);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 30px -8px rgba(31,35,40,.16)}
.seccion--alt .tarjeta--brillo:hover{background:rgba(255,255,255,.78)}
.cinta-one{background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@media (prefers-reduced-transparency:reduce){
  .seccion--alt .tarjeta,.seccion--alt .faq details,.seccion--alt .formulario,.cinta-one{
    background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}