/*
 * estilo.css — La Bóveda.
 *
 * Vive fuera del HTML a propósito, y no por orden: es lo que permite una CSP sin
 * `'unsafe-inline'`. Con ella, «esta página no pide nada a terceros» deja de ser una promesa que
 * vigila un test y pasa a ser una regla que impone el navegador — la forma más fuerte de un
 * principio, la misma idea que los hooks del ecosistema.
 *
 * Tipografía del sistema: una plataforma cuya promesa central es que nadie te lee no puede
 * pedirle las letras a Google en cada visita.
 */

  /*
    Tipografía del sistema, y es una decisión, no un descuido: una plataforma cuya promesa central
    es que nadie te lee no puede pedirle las letras a Google en cada visita. Cero peticiones a
    terceros — ni fuentes, ni analítica, ni nada.
  */
  :root{
    --fondo:#08080C;
    --tinta:#E8E4F0;
    --tenue:#6C6A78;
    --violeta:#9D4EDD;
    --azul:#3A86FF;
    --ambar:#FFB703;
    --turquesa:#00F5D4;
    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{
    margin:0; background:var(--fondo); color:var(--tinta);
    font-family:var(--sans); font-size:16px; line-height:1.5;
    overflow:hidden; overscroll-behavior:none;
  }
    /* Tamaño explícito, no heredado de `inset`. Un canvas sin ancho y alto de CSS toma su tamaño
     INTRÍNSECO —los atributos width/height— y entonces medirlo para fijarlo lo hace crecer:
     el bucle que reventó el límite de área de WebKit el 2026-09-19. */
  #cielo{position:fixed; top:0; left:0; width:100vw; height:100dvh; display:block; touch-action:manipulation}

  .capa{
    position:fixed; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:flex-end;
    padding:24px max(20px, env(safe-area-inset-left)) max(28px, env(safe-area-inset-bottom));
    pointer-events:none;
  }
  .capa > *{pointer-events:auto}

  /* ── Marca y pulso ─────────────────────────────── */
  .marca{
    position:fixed; top:max(22px, env(safe-area-inset-top)); left:0; right:0;
    text-align:center; pointer-events:none;
  }
  .marca h1{
    margin:0; font-size:.78rem; font-weight:500;
    letter-spacing:.42em; text-indent:.42em; text-transform:uppercase;
    color:var(--tenue);
  }
  .pulso{
    margin-top:10px; font-size:.76rem; color:var(--tenue);
    font-variant-numeric:tabular-nums; letter-spacing:.02em;
    transition:opacity .6s ease;
  }
  .pulso b{color:var(--tinta); font-weight:500}

  /* ── Botón central ─────────────────────────────── */
  .transmitir{
    font:inherit; font-size:.8rem; letter-spacing:.22em; text-transform:uppercase;
    color:var(--tinta); background:rgba(232,228,240,.04);
    border:1px solid rgba(232,228,240,.22); border-radius:999px;
    padding:15px 34px; cursor:pointer;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    transition:border-color .4s ease, background .4s ease, transform .2s ease;
  }
  .transmitir:hover{border-color:rgba(232,228,240,.45); background:rgba(232,228,240,.08)}
  .transmitir:active{transform:scale(.97)}
  .transmitir:focus-visible{outline:2px solid var(--turquesa); outline-offset:3px}

  /* ── Paneles ───────────────────────────────────── */
  .panel{
    width:100%; max-width:34rem;
    /* Un panel más alto que la pantalla se comía su propio título en iPhone (660 px de alto
       útil). Se limita y se deja rodar por dentro: en móvil la primera línea es la que dice
       de qué va la pantalla, y perderla es perder la pantalla. */
    max-height:calc(100dvh - 96px); overflow-y:auto; overscroll-behavior:contain;
    background:rgba(10,10,15,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(232,228,240,.1); border-radius:18px;
    padding:22px; opacity:0; transform:translateY(14px);
    animation:entrar .5s cubic-bezier(.2,.7,.3,1) forwards;
  }
  @keyframes entrar{to{opacity:1; transform:none}}
  .panel h2{margin:0 0 4px; font-size:1.02rem; font-weight:600; letter-spacing:-.01em}
  .panel p.ayuda{margin:0 0 16px; font-size:.84rem; color:var(--tenue)}

  /* ── Frecuencias ───────────────────────────────── */
  .frecuencias{display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-bottom:14px}
  .frec{
    display:flex; align-items:center; gap:9px; text-align:left;
    font:inherit; font-size:.86rem; color:var(--tinta);
    background:rgba(232,228,240,.03); border:1px solid rgba(232,228,240,.1);
    border-radius:12px; padding:12px; cursor:pointer;
    transition:border-color .3s ease, background .3s ease;
  }
  .frec:hover{background:rgba(232,228,240,.07)}
  .frec[aria-pressed="true"]{border-color:currentColor; background:rgba(232,228,240,.09)}
  .frec .punto{
    width:9px; height:9px; border-radius:50%; background:currentColor;
    box-shadow:0 0 12px currentColor; flex:none;
  }
  .frec span{color:var(--tinta)}

  /* ── Campo de texto ────────────────────────────── */
  .campo{
    width:100%; background:rgba(232,228,240,.03);
    border:1px solid rgba(232,228,240,.12); border-radius:12px;
    color:var(--tinta); font:inherit; font-size:.95rem; padding:13px;
    resize:none; min-height:84px;
  }
  .campo::placeholder{color:#4C4A56}
  .campo:focus{outline:none; border-color:rgba(232,228,240,.3)}
  .pie{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px}
  .cuenta{font-size:.76rem; color:var(--tenue); font-variant-numeric:tabular-nums}
  .cuenta.pasado{color:var(--ambar)}

  .btn{
    font:inherit; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
    border-radius:999px; padding:11px 22px; cursor:pointer;
    background:var(--tinta); color:#08080C; border:1px solid transparent;
    transition:opacity .3s ease, transform .2s ease;
  }
  .btn:active{transform:scale(.97)}
  .btn[disabled]{opacity:.32; cursor:not-allowed}
  .btn.fantasma{background:transparent; color:var(--tenue); border-color:rgba(232,228,240,.16)}
  .btn.fantasma:hover{color:var(--tinta)}
  .btn:focus-visible{outline:2px solid var(--turquesa); outline-offset:3px}

  /* ── Cuidado ───────────────────────────────────── */
  .cuidado{
    display:flex; gap:11px; align-items:flex-start;
    border-left:2px solid var(--azul); padding:11px 0 11px 13px;
    margin-bottom:14px; font-size:.83rem; color:#B9B5C6;
  }
  .cuidado ul{margin:7px 0 0; padding-left:17px}

  /* ── Eco ───────────────────────────────────────── */
  .ecos{display:flex; flex-direction:column; gap:10px; max-height:46vh; overflow-y:auto; margin-bottom:14px}
  .eco{
    opacity:0; transform:translateY(8px);
    animation:entrar .7s cubic-bezier(.2,.7,.3,1) forwards;
    border-left:2px solid var(--freq, var(--tenue)); padding:3px 0 3px 13px;
  }
  .eco p{margin:0; font-size:.94rem; line-height:1.55}
  .eco footer{display:flex; align-items:center; gap:12px; margin-top:7px}
  .resonar{
    font:inherit; font-size:.73rem; letter-spacing:.12em; text-transform:uppercase;
    background:none; border:none; color:var(--tenue); cursor:pointer; padding:3px 0;
    transition:color .3s ease;
  }
  .resonar:hover{color:var(--tinta)}
  .resonar[disabled]{color:var(--freq, var(--turquesa)); cursor:default}
  .vacio{color:var(--tenue); font-size:.86rem; margin:0 0 14px}

  /* ── Cámara ────────────────────────────────────── */
  #camara{justify-content:space-between; padding-top:max(74px, env(safe-area-inset-top))}
  .sala-cab{text-align:center}
  .sala-cab h2{margin:0; font-size:.78rem; font-weight:500; letter-spacing:.26em;
               text-transform:uppercase; color:var(--tenue)}
  .mensajes{
    width:100%; max-width:34rem; flex:1; overflow-y:auto;
    display:flex; flex-direction:column; justify-content:flex-end; gap:9px; padding:18px 0;
  }
  .msg{opacity:0; animation:entrar .45s ease forwards; display:flex; gap:9px; align-items:baseline}
  .msg .v{font-size:.68rem; letter-spacing:.1em; color:var(--vc, var(--tenue)); flex:none;
          font-variant-numeric:tabular-nums}
  .msg p{margin:0; font-size:.95rem}
  .msg.propio p{color:#B9B5C6}
  .barra{display:flex; gap:9px; width:100%; max-width:34rem; align-items:center}
  .barra .campo{min-height:0; height:48px; padding:13px 14px; line-height:1.35; white-space:nowrap; overflow:hidden}
  .acciones{display:flex; gap:16px; margin-top:12px; justify-content:center}
  .enlace{
    font:inherit; font-size:.73rem; letter-spacing:.12em; text-transform:uppercase;
    background:none; border:none; color:var(--tenue); cursor:pointer; padding:4px;
  }
  .enlace:hover{color:var(--tinta)}
  .enlace.peligro:hover{color:#DE8570}

  /* ── Despedida: el instante en que la sala se deshace ───── */
  .despedida{
    position:fixed; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:10px;
    text-align:center; padding:0 32px; pointer-events:none;
    opacity:0; transition:opacity 1.1s ease;
  }
  .despedida.vista{opacity:1}
  .despedida strong{font-size:1.06rem; font-weight:500; color:var(--tinta)}
  .despedida span{font-size:.84rem; color:var(--tenue); max-width:24rem; text-wrap:pretty}

  /* ── Puerta de edad ─────────────────────────────────────── */
  .puerta h2{margin-bottom:12px}
  .puerta ul{margin:0 0 16px; padding-left:19px; font-size:.87rem; color:#B9B5C6}
  .puerta li{margin-bottom:7px; text-wrap:pretty}
  .puerta li b{color:var(--tinta); font-weight:600}
  .puerta .pie{margin-top:4px}

  .estrella-tocada{
    position:fixed; left:50%; transform:translateX(-50%);
    top:max(86px, calc(env(safe-area-inset-top) + 64px));
    max-width:min(30rem, calc(100% - 40px)); text-align:center;
    font-size:.95rem; color:var(--tinta); pointer-events:none;
    opacity:0; transition:opacity .5s ease; text-wrap:pretty;
  }
  .estrella-tocada.vista{opacity:1}

  [hidden]{display:none !important}
  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  }
  /* A una columna sólo por debajo de 360 px. A 393 —el iPhone más común— dos columnas caben
     de sobra y ahorran 120 px de alto, que es justo lo que hacía desbordar el panel. */
  @media (max-width:359px){
    .frecuencias{grid-template-columns:1fr}
  }
  @media (max-width:420px){
    .panel{border-radius:16px; padding:18px}
    .cuidado{font-size:.79rem; padding-left:11px}
  }

/* ── Utilidades de maquetación ───────────────────────────────────────────────
   Existen porque la CSP no admite `'unsafe-inline'`, y eso alcanza también a los atributos
   `style=` del marcado. Cuatro que quedaban en el HTML se aplicaban perfectamente en
   desarrollo y el navegador los RECHAZABA en producción (2026-09-19): el peor tipo de fallo,
   el que sólo existe desplegado. Aquí no vuelve a pasar.
   Lo que `app.js` hace con `el.style.propiedad = ...` sí está permitido: el CSSOM no es un
   atributo del marcado y la CSP no lo gobierna. */
.pie-derecha{justify-content:flex-end}
.par{display:flex; gap:9px}
.columna{width:100%; max-width:34rem}