/* Analógico a Digital — capa "papel emitido" (6D)

   Encargo de David (2026-09-28): el papel quedó correcto pero tenue; lo digital tiene que
   pesar más, con su marca y sin volver al negro. Esta hoja se carga DESPUÉS de styles.css
   y no cambia estructura: solo materia, luz y profundidad.

   La idea: el papel sigue siendo el suelo (80 %), y sobre él se abren ventanas de vidrio
   petróleo donde vive lo que está corriendo (15 %). La llama sigue siendo señal (5 %).

   Seis capas, de abajo hacia arriba — de ahí el "6D":
     1. Papel      #FCF6EC, nunca blanco puro.
     2. Retícula   milimetrada, la del tablero, emitida en petróleo.
     3. Vidrio     ventanas en petróleo hondo (#0A2E30 → #0E4F52), no en negro.
     4. Luz        fósforo #46D6C6 e índigo #7C8CFF, los dos del registro instrumento (§9.6).
     5. Movimiento barrido de escáner, borde holográfico que gira, traza que respira.
     6. Respuesta  la luz sigue al puntero y la tarjeta se inclina hacia él (efectos-6d.js).

   Combinaciones nuevas, todas hechas SOLO con tonos que ya están en el sistema visual:
     · Aurora de pozo   petróleo → teal → fósforo → índigo (filetes, bordes, barras).
     · Aurora profunda  petróleo → teal → índigo (texto y cifras sobre papel: contraste AA).
     · Vidrio petróleo  la ventana: petróleo hondo con dos halos, fósforo e índigo.
     · Borde holográfico la aurora de pozo girando en el filo de lo que importa.

   Lo que no cambia: Archivo e IBM Plex Mono; ningún símbolo radial de ocho puntas; la
   llama no es "el color de la marca" y nunca va en texto bajo 24 px; en escala de grises
   todo se sigue entendiendo, porque la jerarquía la lleva el valor, no el matiz. */

@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root{
  --f-fosforo:#46D6C6; --f-indigo:#7C8CFF; --f-teal:#008C82; --f-indigo-tinta:#4B5FB0;
  --f-hondo:#0A2E30; --f-petroleo:#0E4F52; --f-noche:#07191B;
  --aurora:linear-gradient(115deg,#0E4F52 0%,#008C82 34%,#46D6C6 62%,#7C8CFF 100%);
  --aurora-profunda:linear-gradient(100deg,#0E4F52 0%,#008C82 48%,#4B5FB0 100%);
  --aurora-filo:linear-gradient(135deg,rgba(14,79,82,.55),rgba(0,140,130,.35) 40%,rgba(124,140,255,.45) 75%,rgba(14,79,82,.25));
  --holo:conic-gradient(from var(--giro),#46D6C6,#7C8CFF,#0E4F52,#008C82,#46D6C6);
  --prof-1:0 1px 0 rgba(255,255,255,.7) inset,0 1px 2px rgba(12,15,20,.06),0 10px 28px -14px rgba(14,79,82,.42);
  --prof-2:0 1px 0 rgba(255,255,255,.7) inset,0 2px 4px rgba(12,15,20,.06),0 22px 44px -18px rgba(14,79,82,.5),0 8px 30px -20px rgba(75,95,176,.45);
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .3 0 0 0 0 .32 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 1 · 2 · atmósfera: papel, retícula, y luz que entra por los bordes ---------- */
body{
  background-color:#F2EADC;
  background-image:
    var(--grano),
    radial-gradient(60vmax 50vmax at 8% -10%,rgba(70,214,198,.20),transparent 60%),
    radial-gradient(55vmax 45vmax at 105% 18%,rgba(124,140,255,.16),transparent 62%),
    radial-gradient(50vmax 40vmax at 60% 115%,rgba(0,140,130,.14),transparent 60%),
    linear-gradient(rgba(14,79,82,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(14,79,82,.10) 1px,transparent 1px),
    linear-gradient(rgba(14,79,82,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(14,79,82,.05) 1px,transparent 1px);
  background-size:140px 140px,auto,auto,auto,120px 120px,120px 120px,24px 24px,24px 24px;
  background-attachment:fixed;
}
/* Sin backdrop-filter aquí: volvería a #app el bloque contenedor de lo fijo, y el menú
   lateral y la barra de abajo se descolocan. */
#app{background:color-mix(in srgb,#FCF6EC 88%,transparent);
  box-shadow:0 0 0 1px rgba(14,79,82,.12),0 30px 80px -40px rgba(14,79,82,.35)}

/* La barra de arriba: papel esmerilado con un filo de aurora debajo. */
.appbar{background:color-mix(in srgb,#FCF6EC 78%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,#008C82 20%,#46D6C6 50%,#7C8CFF 80%,transparent) 1}

/* ---------- 3 · 4 · vidrio petróleo: las ventanas donde vive lo que corre ---------- */
/* Dentro del vidrio se redefinen los tokens: los componentes ya leen variables, así que
   el mismo HTML se vuelve emitido sin tocar una línea de app.js. */
.hero,.tablero,#onb .visor,.visor,.plan-op[aria-pressed="true"],.vidrio{
  --crudo:#F2F5F7; --tinta:#B9C7D2; --tenue:#8FA3B3;
  --petroleo:#46D6C6; --petroleo-claro:rgba(70,214,198,.12); --petroleo-vidrio:rgba(70,214,198,.10);
  --papel:#0A2E30; --papel-alto:rgba(255,255,255,.04); --papel-hondo:rgba(0,0,0,.18);
  --filete:rgba(70,214,198,.22); --filete-sutil:rgba(70,214,198,.14);
  --llama-oscura:#FFA36E; --llama-tenue:rgba(255,106,43,.16);
  color:var(--crudo);
}
.hero,.tablero,.plan-op[aria-pressed="true"],.vidrio{
  position:relative;isolation:isolate;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(70,214,198,.26),transparent 55%),
    radial-gradient(90% 80% at 100% 100%,rgba(124,140,255,.24),transparent 60%),
    linear-gradient(160deg,#0E4F52 0%,#0A2E30 55%,#07191B 100%) !important;
  border:1px solid rgba(70,214,198,.35) !important;
  box-shadow:0 0 0 1px rgba(124,140,255,.10),0 24px 50px -22px rgba(14,79,82,.75),0 10px 40px -24px rgba(124,140,255,.6),0 1px 0 rgba(255,255,255,.12) inset !important;
}
/* Retícula de fósforo dentro del vidrio y un barrido de escáner cada seis segundos. */
.hero::before,.tablero::before,.plan-op[aria-pressed="true"]::before,.vidrio::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(rgba(70,214,198,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(70,214,198,.08) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.25));mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.25));
}
.hero::after,.tablero::after,.vidrio::after{
  content:"";position:absolute;left:0;right:0;top:-40%;height:40%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(70,214,198,.10) 70%,rgba(70,214,198,.28) 98%,transparent);
  animation:barrido 6.5s cubic-bezier(.5,0,.5,1) infinite;mix-blend-mode:screen;
}
@keyframes barrido{0%{transform:translateY(0)}55%,100%{transform:translateY(360%)}}
.hero h1,.hero h2,.tablero h2{color:#F2F5F7;text-shadow:0 0 22px rgba(70,214,198,.35)}
.hero .mono,.tablero .mono{color:#46D6C6}
.hero .arte{filter:saturate(1.25) contrast(1.05)}

/* ---------- borde holográfico: la aurora girando en el filo de lo que importa ---------- */
.holo::after,.plan-op[aria-pressed="true"]::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:var(--holo);animation:gira 7s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@keyframes gira{to{--giro:360deg}}

/* ---------- tarjetas de papel: filo de aurora, profundidad de color, luz que sigue ---------- */
.tarjeta,.tarjeta-toque,.opcion,.rec,.lec,.post,.autom,.kpi,.contacto,.modulo,.caja{
  --mx:-400px; --my:-400px;
  background:
    radial-gradient(260px circle at var(--mx) var(--my),rgba(70,214,198,.16),rgba(124,140,255,.06) 45%,transparent 70%) padding-box,
    linear-gradient(180deg,#FFFBF4,#FAF2E6) padding-box,
    var(--aurora-filo) border-box;
  border:1px solid transparent;
  box-shadow:var(--prof-1);
  transition:transform .35s var(--curva),box-shadow .35s var(--curva);
  transform-style:preserve-3d;
}
.tarjeta.hondo{background:
    radial-gradient(260px circle at var(--mx) var(--my),rgba(70,214,198,.14),transparent 70%) padding-box,
    linear-gradient(180deg,#F7EEE1,#F2E8DA) padding-box,var(--aurora-filo) border-box}
@media (hover:hover){
  .tarjeta:hover,.tarjeta-toque:hover,.opcion:not([disabled]):hover,.rec:hover,.lec:hover,.post:hover,.autom:hover{box-shadow:var(--prof-2)}
}
.opcion[disabled]{opacity:.8}

/* Cifras sobre papel en aurora profunda: se leen como dato emitido y pasan AA. */
.kpi b,.plan-precio b,.medidor .g,.num.grande{
  background:var(--aurora-profunda);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .kpi b,.tablero .medidor .g,.plan-op[aria-pressed="true"] .plan-precio b{
  background:linear-gradient(100deg,#F2F5F7,#46D6C6 60%,#7C8CFF);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Titulares: masa en Crudo; la palabra de señal en llama, con su halo (solo es grande). */
h1 .senal,h2 .senal{color:#EA632B;text-shadow:0 0 18px rgba(234,99,43,.35),0 0 2px rgba(234,99,43,.4)}
h1{letter-spacing:-.02em}
/* Bajo los h1 de cada vista, un filete corto de aurora: la firma del registro. */
.vista>h1:first-child::after,.vista>.entre:first-child h1::after,#onb h1::after,.cab-acceso h1::after{
  content:"";display:block;width:56px;height:3px;margin-top:10px;border-radius:3px;
  background:var(--aurora);box-shadow:0 0 14px rgba(70,214,198,.55)}

/* ---------- botones: crudo con destello de aurora ---------- */
.btn{
  background:
    linear-gradient(115deg,transparent 30%,rgba(70,214,198,.35) 48%,rgba(124,140,255,.30) 56%,transparent 72%) -220% 0/220% 100% no-repeat,
    linear-gradient(180deg,#14303A,#0C0F14) !important;
  color:#F2F5F7 !important;border:1px solid rgba(70,214,198,.35) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 10px 26px -10px rgba(14,79,82,.7),0 0 0 1px rgba(124,140,255,.12);
  transition:background-position .7s var(--curva),transform .14s var(--curva),box-shadow .25s;
}
.btn:hover{background-position:220% 0,0 0;box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 14px 30px -10px rgba(14,79,82,.8),0 0 22px -4px rgba(70,214,198,.55)}
.btn.sec{background:linear-gradient(180deg,#FFFBF4,#F5EDE0) padding-box,var(--aurora-filo) border-box !important;
  color:#0C0F14 !important;border:1px solid transparent !important;box-shadow:var(--prof-1)}
.btn.sec:hover{box-shadow:var(--prof-2)}
.btn.llama{background:linear-gradient(180deg,#FF8348,#EA632B) !important;color:#1A0B04 !important;border-color:transparent !important;
  box-shadow:0 0 0 1px rgba(234,99,43,.3),0 12px 28px -8px rgba(234,99,43,.55)}

/* ---------- barras y medidores: la aurora corre por dentro ---------- */
.barra{background:rgba(14,79,82,.08);border:1px solid rgba(14,79,82,.16)}
.barra i{background:var(--aurora);background-size:200% 100%;box-shadow:0 0 14px rgba(70,214,198,.6);
  animation:corre 3.2s linear infinite}
@keyframes corre{to{background-position:-200% 0}}

/* ---------- etiquetas ---------- */
.etq{background:rgba(14,79,82,.06);border-color:rgba(14,79,82,.22);color:#0E4F52}
.etq.solida{background:var(--aurora);color:#04191A;border-color:transparent;box-shadow:0 0 14px -2px rgba(70,214,198,.6)}
.plan-reco{background:var(--aurora);color:#04191A;border-color:transparent;box-shadow:0 0 16px -2px rgba(70,214,198,.7)}
.plan-op[aria-pressed="true"] .plan-it::before{border-color:#46D6C6}
.plan-op[aria-pressed="true"] .plan-it.nuevo{color:#F2F5F7}

/* ---------- campos ---------- */
input:focus,select:focus,textarea:focus{border-color:#008C82;box-shadow:0 0 0 3px rgba(70,214,198,.22),0 0 18px -4px rgba(124,140,255,.5)}

/* ---------- navegación: esmerilada, con el indicador en aurora ---------- */
.tabbar{background:color-mix(in srgb,#FCF6EC 72%,transparent)}
.tabbar::before{background:var(--aurora);box-shadow:0 0 16px rgba(70,214,198,.8)}
.tabbar button[aria-selected="true"] svg{stroke:#008C82;filter:drop-shadow(0 0 6px rgba(70,214,198,.6))}
.punto{background:#EA632B;box-shadow:0 0 8px rgba(234,99,43,.7)}
@media (min-width:960px){
  .tabbar{background:linear-gradient(180deg,rgba(252,246,236,.78),rgba(242,234,220,.7));
    border-right:1px solid transparent;border-image:linear-gradient(180deg,transparent,#008C82 25%,#7C8CFF 75%,transparent) 1}
  .tabbar button[aria-selected="true"]{background:linear-gradient(90deg,rgba(70,214,198,.18),rgba(124,140,255,.10));
    box-shadow:inset 2px 0 0 #008C82}
}

/* ---------- imagen editorial: ventana con reflejo ---------- */
.visor{border:1px solid rgba(70,214,198,.35);box-shadow:0 24px 50px -24px rgba(14,79,82,.7),0 0 0 1px rgba(124,140,255,.12)}
.visor::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.14),transparent 35%),linear-gradient(0deg,rgba(7,25,27,.55),transparent 45%)}
.visor img{transform:translate3d(var(--px,0),var(--py,0),0) scale(1.06);transition:transform .6s var(--curva)}

/* ---------- pantallas de entrada ---------- */
/* Pantallas completas: la misma atmósfera del cuerpo, opaca, para que no se vea la app
   que está detrás. */
#onb,#acceso{background-color:#F7F0E4;
  background-image:
    radial-gradient(70vmax 50vmax at 0% -10%,rgba(70,214,198,.22),transparent 60%),
    radial-gradient(60vmax 45vmax at 110% 30%,rgba(124,140,255,.18),transparent 62%),
    linear-gradient(rgba(14,79,82,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(14,79,82,.07) 1px,transparent 1px);
  background-size:auto,auto,24px 24px,24px 24px}
:root[data-theme="dark"] #onb,:root[data-theme="dark"] #acceso{background-color:#0C0F14}
/* En pantallas anchas la columna de entrada queda al centro: lo de alrededor se tapa con
   una sombra de extensión total, para que no se asome la app que espera detrás. */
#onb,#acceso{box-shadow:0 0 0 100vmax #EFE6D7,0 0 0 1px rgba(14,79,82,.14),0 30px 90px -30px rgba(14,79,82,.45)}
:root[data-theme="dark"] #onb,:root[data-theme="dark"] #acceso{box-shadow:0 0 0 100vmax #080A0E}

/* ---------- el pulso de lo que corre de verdad ---------- */
.vivo{box-shadow:0 0 0 0 rgba(70,214,198,.6);animation:late 2.2s ease-out infinite}
@keyframes late{0%{box-shadow:0 0 0 0 rgba(70,214,198,.55)}100%{box-shadow:0 0 0 12px rgba(70,214,198,0)}}

/* ---------- tema oscuro: las mismas combinaciones, sin papel ---------- */
:root[data-theme="dark"] body{background-color:#080A0E;
  background-image:var(--grano),
    radial-gradient(60vmax 50vmax at 8% -10%,rgba(70,214,198,.16),transparent 60%),
    radial-gradient(55vmax 45vmax at 105% 18%,rgba(124,140,255,.14),transparent 62%),
    linear-gradient(rgba(70,214,198,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(70,214,198,.06) 1px,transparent 1px);
  background-size:140px 140px,auto,auto,24px 24px,24px 24px}
:root[data-theme="dark"] #app{background:color-mix(in srgb,#0C0F14 88%,transparent)}
:root[data-theme="dark"] .appbar,:root[data-theme="dark"] .tabbar{background:color-mix(in srgb,#0C0F14 78%,transparent)}
:root[data-theme="dark"] :is(.tarjeta,.tarjeta-toque,.opcion,.rec,.lec,.post,.autom,.kpi,.contacto,.modulo,.caja){
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(70,214,198,.14),transparent 70%) padding-box,
    linear-gradient(180deg,#161C28,#111621) padding-box,var(--aurora-filo) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 16px 36px -18px rgba(0,0,0,.8)}
:root[data-theme="dark"] .kpi b,:root[data-theme="dark"] .plan-precio b,:root[data-theme="dark"] .medidor .g{
  background:linear-gradient(100deg,#F2F5F7,#46D6C6 60%,#7C8CFF);-webkit-background-clip:text;background-clip:text}
:root[data-theme="dark"] .btn.sec{background:linear-gradient(180deg,#161C28,#111621) padding-box,var(--aurora-filo) border-box !important;color:#F2F5F7 !important}

/* ---------- quien pidió menos movimiento, lo tiene ---------- */
@media (prefers-reduced-motion:reduce){
  .hero::after,.tablero::after,.vidrio::after,.holo::after,.barra i,.vivo{animation:none}
  .tarjeta,.tarjeta-toque,.opcion,.rec,.lec,.post,.autom,.visor img{transition:none;transform:none!important}
}