/* ═══════════ TEMA LIQUID GLASS · estilo Apple en oscuro (20/10/2026) ═══════════
   Se carga EL ÚLTIMO: pisa el aspecto del «TEMA 2026» y de cada css/*.css sin tocar clases, ids ni lógica.
   Si algo se ve raro, se arregla aquí y no en las reglas antiguas.

   Cristal translúcido (desenfoque + saturación), borde especular arriba, sombras profundas y suaves, letra del
   sistema de Apple y el ámbar de la marca como luz, no como pintura. Sin animaciones que no paran. */

:root{
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Poppins',system-ui,'Segoe UI',sans-serif;
  --ink:#0b0b0e;
  --ink-2:rgba(255,255,255,.06);
  --ink-3:rgba(255,255,255,.09);
  --panel:rgba(28,28,32,.62);
  --panel-2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --paper:#f5f5f7;
  --muted:#a1a1a6;
  /* estados estilo iOS */
  --green:#30d158;
  --red:#ff453a;
  --amarillo:#ffd60a;
  --amber:#ff9f43;
  --naranja-claro:#ffb36b;
  --naranja-2:#ff7a1a;
  --r:20px;
  --vidrio:rgba(28,28,32,.62);
  --vidrio-fuerte:rgba(22,22,26,.74);
  --vidrio-suave:rgba(255,255,255,.055);
  --desenfoque:blur(24px) saturate(180%);
  --especular:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.035);
  --sombra:0 24px 60px -28px rgba(0,0,0,.85),0 2px 10px -4px rgba(0,0,0,.4);
  --curva:cubic-bezier(.22,1,.36,1);
  --brillo:0 0 0 1px rgba(255,159,67,.45),0 18px 44px -22px rgba(255,122,26,.55);
  --acento:linear-gradient(135deg,#ffb36b 0%,#ff8a2b 55%,#ff6a00 100%);
}

/* ── fondo: luz cálida y fría muy suaves, quietas, para que el cristal tenga qué desenfocar ── */
html{scroll-behavior:smooth;scrollbar-color:rgba(255,255,255,.18) transparent}
body{background:var(--ink);font-family:var(--sans);letter-spacing:-.003em;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
body::before{background:
  radial-gradient(900px 620px at 88% -8%,rgba(255,138,43,.16),transparent 62%),
  radial-gradient(760px 560px at -6% 32%,rgba(94,92,230,.12),transparent 64%),
  radial-gradient(820px 620px at 60% 112%,rgba(255,106,0,.09),transparent 60%),
  linear-gradient(180deg,#0d0d11 0%,#09090c 100%)}
::selection{background:rgba(255,159,67,.35);color:#fff}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border:3px solid transparent;background-clip:padding-box;border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28);background-clip:padding-box}
h1,h2,h3,h4,.modal h3,.panel h3{letter-spacing:-.018em}
h1 em,.panel h3 em{color:var(--amber)}

/* ── superficies de cristal ── */
.panel,.stat,.card,.modal,.lockcard,.ini-bloque,.lanzador-card,.tarjeta-vincular-box,.tunel-panel,.tunel-tienda,
.tunel-paso button,.videos-paso,.virales-tarjeta,.guia-tarjeta,.guia-indice-item,.fases-tarjeta,.c2-card,
.social-card,.brand-account-card,.descubrir-box,.gal-tarjeta,.paginas-card,.infopanel,.tablewrap,.contenido-nav,.ed-tarjeta{
  background:var(--vidrio);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:var(--desenfoque);backdrop-filter:var(--desenfoque);
  box-shadow:var(--especular),var(--sombra);
  transition:transform .45s var(--curva),border-color .3s var(--curva),box-shadow .45s var(--curva),background .3s var(--curva)}
.panel,.tunel-panel,.guia-tarjeta,.videos-paso,.virales-tarjeta,.ini-bloque{border-radius:22px}
.modal{background:var(--vidrio-fuerte);border-radius:26px}
.overlay{background:rgba(6,6,9,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* lo que se puede pulsar se levanta un poco y se ilumina el borde, sin saltos */
.card:hover,.lanzador-card:hover,.guia-indice-item:hover,.tunel-tienda:hover:not([disabled]){
  transform:translateY(-3px);border-color:rgba(255,159,67,.42);
  box-shadow:var(--especular),0 0 0 1px rgba(255,159,67,.18),0 26px 60px -26px rgba(255,122,26,.45)}
.lanzador-card{border-radius:24px}
.lanzador-card:hover{background:rgba(40,40,46,.66)}
.lanzador-ico{background:rgba(255,159,67,.12);border:1px solid rgba(255,159,67,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.lanzador-card:hover .lanzador-ico{background:var(--acento);color:#1c0e02;transform:scale(1.06)}

/* ── estructura: menú lateral y cabecera de cristal ── */
.lateral{background:rgba(20,20,24,.58);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border-right:1px solid rgba(255,255,255,.08);box-shadow:inset -1px 0 0 rgba(255,255,255,.03)}
.logo-icono{border:1px solid rgba(255,159,67,.5);background:rgba(255,159,67,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.lateral-grupo{font-size:11px;font-weight:600;letter-spacing:.02em;color:#86868b}
.lateral .tab{color:#d1d1d6;border-radius:12px;transition:background .3s var(--curva),color .3s var(--curva),transform .35s var(--curva)}
.lateral .tab:hover{background:rgba(255,255,255,.07);transform:none}
/* pestaña activa: cristal ámbar iluminado, sin olas ni latido */
.lateral .tab.on{animation:none;background:var(--acento);color:#1c0e02;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 26px -12px rgba(255,106,0,.75)}
.lateral .tab.on::after{display:none}
.lateral-pie #lockBtn{border-radius:12px}
.lateral .tab .badge-modificar{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:auto}
.eyebrow{color:var(--amber);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0}
header.top{background:rgba(11,11,14,.55);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.06)}
.icono-redondo,.btn-top-dropi,.count{background:var(--vidrio-suave);border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.icono-redondo:hover,.btn-top-dropi:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,159,67,.35)}
.btn-colapsar-lateral{background:var(--vidrio-suave);border-color:rgba(255,255,255,.1)}

/* ── botones ── */
.btn{border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--paper);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  transition:transform .3s var(--curva),background .25s var(--curva),border-color .25s var(--curva),box-shadow .3s var(--curva)}
.btn:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.2)}
.btn.primary{background:var(--acento);border-color:rgba(255,255,255,.18);color:#1c0e02;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 22px -12px rgba(255,106,0,.8)}
.btn.primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 4px rgba(255,159,67,.16),0 14px 30px -12px rgba(255,106,0,.85)}
.btn.ghost{background:transparent;box-shadow:none}
.btn.ghost:hover{background:rgba(255,159,67,.08);border-color:rgba(255,159,67,.45);color:var(--naranja-claro)}
.btn.danger,.btn.small.danger{color:#ffb4ae;border-color:rgba(255,69,58,.4);background:rgba(255,69,58,.1)}
.btn:active,.icono-redondo:active,.lanzador-card:active{transform:scale(.97)}
.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ── campos de cristal pulido ── */
input,textarea,select,.tunel input,.tunel select,.tunel textarea{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  color:var(--paper);border-radius:12px;box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
  transition:border-color .25s var(--curva),box-shadow .25s var(--curva),background .25s var(--curva)}
input:focus,textarea:focus,select:focus,.tunel input:focus,.tunel select:focus,.tunel textarea:focus{outline:none;
  background:rgba(255,255,255,.08);border-color:rgba(255,159,67,.7);box-shadow:0 0 0 4px rgba(255,159,67,.16)}
input::placeholder,textarea::placeholder{color:#7c7c82}
select option{background:#1c1c20;color:var(--paper)}
input[type=checkbox],input[type=radio]{accent-color:var(--amber)}
label{letter-spacing:.01em}
#search{border:1px solid rgba(255,255,255,.14);background-color:rgba(255,255,255,.06)}
#search:focus{border-color:rgba(255,159,67,.7)}

/* ── insignias y estados con los colores de iOS ── */
.tunel-insignia.ok,.gal-badge.ok{background:rgba(48,209,88,.14);color:#7ee2a0;border-color:rgba(48,209,88,.3)}
.tunel-insignia.pend{background:rgba(255,159,10,.14);color:#ffcf7a;border-color:rgba(255,159,10,.3)}
.tunel-insignia.error,.tunel-insignia.mal{background:rgba(255,69,58,.14);color:#ffaba5;border-color:rgba(255,69,58,.32)}
.tunel-faltan{background:rgba(255,69,58,.08);border-color:rgba(255,69,58,.3)}
.tunel-listo{background:rgba(48,209,88,.1);border-color:rgba(48,209,88,.3)}
.tunel-paso.hecho .tunel-paso-c{background:var(--green);border-color:var(--green);color:#04210d}
.tunel-tienda.on,.tunel-paso.actual button{border-color:rgba(255,159,67,.65);box-shadow:var(--especular),var(--brillo)}
.tunel-asignar{background:rgba(255,159,67,.07);border-color:rgba(255,159,67,.3);
  -webkit-backdrop-filter:var(--desenfoque);backdrop-filter:var(--desenfoque)}

/* ── tablas, código y textos largos ── */
table{border-collapse:separate;border-spacing:0}
thead th{background:rgba(255,255,255,.04)}
tbody tr:hover{background:rgba(255,159,67,.05)}
pre,.tunel textarea[readonly],.guia-radiografia{background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.08);border-radius:14px}
details > summary{transition:color .25s var(--curva)}
details > summary:hover{color:var(--paper)}

/* ── pantalla de entrar: una tarjeta de cristal sobre luz quieta (sin el sonar) ── */
#lock::before,#lock::after{animation:none;border:0;box-shadow:none;opacity:1;width:720px;height:720px;margin:-360px 0 0 -360px;
  background:radial-gradient(closest-side,rgba(255,138,43,.18) 0%,rgba(255,106,0,.06) 45%,transparent 100%)}
#lock::after{transform:translate(160px,-120px);background:radial-gradient(closest-side,rgba(94,92,230,.13) 0%,transparent 100%)}
.lockcard{border-radius:28px;background:rgba(26,26,30,.6);
  box-shadow:var(--especular),0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,159,67,.12)}
.mark{border-color:rgba(255,159,67,.6);background:rgba(255,159,67,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}

/* ── el efecto al pulsar: un brillo suave y corto, no una onda ── */
.onda{background:radial-gradient(circle,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 45%,transparent 70%);
  animation:onda .45s var(--curva) forwards}
.btn.primary .onda,.lateral .tab.on .onda{background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 65%)}
.principal > div[id^="vista"]{animation:vista-entra .5s var(--curva) both}
@keyframes vista-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── móvil: menos desenfoque (va más fluido) y sin sombras enormes ── */
@media(max-width:980px){
  .lateral{background:rgba(16,16,20,.82)}
  .panel,.card,.tunel-panel,.lanzador-card,.guia-tarjeta,.videos-paso,.virales-tarjeta{
    -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
}
@media(max-width:560px){
  .panel,.tunel-panel,.guia-tarjeta,.lanzador-card{border-radius:18px}
}

/* ── sin desenfoque (navegador antiguo o «reducir transparencia»): superficies opacas, todo legible ── */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--vidrio:#1c1c20;--vidrio-fuerte:#18181b}
}
@media(prefers-reduced-transparency:reduce){
  :root{--vidrio:#1c1c20;--vidrio-fuerte:#18181b}
  .lateral,header.top{background:#141417}
}

/* ── pantalla de entrar: el respaldo del botón de Google (20/10) ── */
#btnGoogleRespaldo{margin-top:12px;min-height:46px;font-size:14.5px;border-radius:999px}
#btnGoogleRespaldo[hidden],.google-respaldo-nota[hidden]{display:none!important}
.google-respaldo-nota{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
#googleSignInBtn{position:relative;z-index:2}
#btnModoLocalWrap[hidden],#accesoManualDetails[hidden]{display:none!important}