/* ── Base común al panel y a las pantallas ───────────────────────────────── */
@font-face{
  font-family:'Sora';
  src:url('vendor/sora-latin.woff2') format('woff2');
  font-weight:100 800; font-style:normal; font-display:swap;
}

:root{
  --negro:#06070A;
  --carbon:#0E1117;
  --carbon-alto:#151A22;
  --linea:rgba(255,255,255,.08);
  --ambar:#FFAA00;
  --ambar-claro:#FFD275;
  --ambar-hondo:#FF6A00;
  --verde:#22D07A;
  --rojo:#FF4757;
  --tenue:#79839A;
  --hueso:#EEF1F6;
}

*{box-sizing:border-box;margin:0;padding:0}

/* El atributo `hidden` del HTML esconde con display:none desde la hoja del
   navegador, así que CUALQUIER display propio lo anula sin avisar. Pasó: la
   hoja del recado, con su display:grid, se quedaba invisible pero encima de
   todo y se comía los toques del panel entero. */
[hidden]{display:none !important}

html,body{
  height:100%;
  background:var(--negro);
  color:var(--hueso);
  font-family:'Sora',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  user-select:none; -webkit-user-select:none;
  overscroll-behavior:none;
}

/* Punto de conexión, común a las dos caras */
.pulsoVida{
  display:inline-flex; align-items:center; gap:.55rem;
  flex:0 0 auto; white-space:nowrap;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tenue); font-weight:500;
}
.pulsoVida::before{
  content:''; width:8px; height:8px; border-radius:50%;
  background:var(--rojo); box-shadow:0 0 12px var(--rojo);
  transition:background .4s, box-shadow .4s;
}
.pulsoVida.vivo::before{
  background:var(--verde); box-shadow:0 0 14px var(--verde);
  animation:latido 2.4s ease-in-out infinite;
}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.35}}

/* ══ LA TELE DE PLANTA ═══════════════════════════════════════════════════ */
body.tele{overflow:hidden;cursor:none}

.escena{
  position:fixed; inset:0;
  display:grid; place-items:center;
  isolation:isolate;
}
/* Reposo y aviso comparten celda: se cruzan en el mismo sitio al relevarse */
.escena > *{grid-area:1/1}

/* Resplandor de fondo: respira despacio cuando hay aviso puesto */
.resplandor{
  position:fixed; inset:-20%;
  background:radial-gradient(ellipse 60% 55% at 50% 50%, rgba(255,140,0,.20), transparent 68%);
  opacity:0; transition:opacity 1.1s ease; z-index:0; pointer-events:none;
}
body.tele.hayAviso .resplandor{opacity:1; animation:respira 5.5s ease-in-out infinite}
@keyframes respira{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

/* Cintas diagonales de aviso, arriba y abajo */
.cinta{
  position:fixed; left:0; right:0; height:14px; z-index:3;
  background:repeating-linear-gradient(115deg,
    var(--ambar) 0 26px, transparent 26px 52px);
  opacity:0; transition:opacity .7s ease;
}
.cinta.arriba{top:0} .cinta.abajo{bottom:0}
body.tele.hayAviso .cinta{opacity:.85; animation:corre 1.8s linear infinite}
@keyframes corre{to{background-position:104px 0}}

/* ── Reposo: reloj ───────────────────────────────────────────────── */
#reposo{
  position:relative; z-index:2; text-align:center;
  transition:opacity .8s ease, transform .8s ease;
  animation:deriva 240s ease-in-out infinite; /* evita quemar el panel */
}
@keyframes deriva{
  0%,100%{transform:translate(0,0)} 25%{transform:translate(16px,-12px)}
  50%{transform:translate(-14px,10px)} 75%{transform:translate(10px,14px)}
}
body.tele.hayAviso #reposo{opacity:0; transform:scale(.9); pointer-events:none}

#reloj{
  font-size:16vw; font-weight:200; line-height:1;
  letter-spacing:-.02em; color:#28303E;
  font-variant-numeric:tabular-nums;
}
#fecha{
  margin-top:1.4vh; font-size:1.9vh; font-weight:400;
  letter-spacing:.42em; text-transform:uppercase; color:#1D242F;
}
#quieto{
  margin-top:5vh; font-size:1.5vh; font-weight:500;
  letter-spacing:.5em; text-transform:uppercase; color:#161C25;
}

/* ── Aviso: lo que se ve al pulsar ───────────────────────────────── */
#aviso{
  position:relative; z-index:2; text-align:center;
  opacity:0; pointer-events:none;
}
body.tele.hayAviso #aviso{opacity:1}

.rotulo{
  font-size:6.4vh; font-weight:600; line-height:1;
  letter-spacing:.34em; text-indent:.34em;
  color:var(--ambar-claro);
  text-shadow:0 0 42px rgba(255,170,0,.45);
}
body.tele.hayAviso .rotulo{animation:entraRotulo .85s cubic-bezier(.16,1,.3,1) both}
@keyframes entraRotulo{
  from{opacity:0; letter-spacing:.9em; text-indent:.9em; transform:translateY(-3vh); filter:blur(14px)}
  to{opacity:1; letter-spacing:.34em; text-indent:.34em; transform:none; filter:blur(0)}
}

.numero{
  font-size:44vh; font-weight:800; line-height:.82;
  letter-spacing:-.04em; padding-left:.04em; margin-top:2.6vh;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(175deg, #FFF3D6 0%, var(--ambar) 42%, var(--ambar-hondo) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 70px rgba(255,140,0,.55));
}
body.tele.hayAviso .numero{animation:entraNumero 1.1s cubic-bezier(.14,.9,.24,1) both}
@keyframes entraNumero{
  0%{opacity:0; transform:scale(.52) translateY(5vh); filter:blur(48px) drop-shadow(0 0 0 transparent)}
  48%{opacity:1; filter:blur(0) drop-shadow(0 0 90px rgba(255,140,0,.75))}
  68%{transform:scale(1.045) translateY(0)}
  100%{opacity:1; transform:scale(1); filter:blur(0) drop-shadow(0 0 70px rgba(255,140,0,.55))}
}

/* Barrido de luz que cruza el número al aparecer */
.barrido{
  position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden;
}
body.tele.hayAviso .barrido::after{
  content:''; position:absolute; top:-60%; bottom:-60%; width:38%;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,240,200,.06) 38%,
    rgba(255,245,215,.20) 50%,
    rgba(255,240,200,.06) 62%, rgba(255,255,255,0) 100%);
  filter:blur(6px);
  transform:skewX(-14deg);
  animation:cruza 1.25s cubic-bezier(.4,0,.2,1) .18s both;
}
@keyframes cruza{from{left:-45%}to{left:125%}}

/* Anillos que salen del número al ritmo del gong */
.anillos{position:absolute; inset:0; display:grid; place-items:center; z-index:1; pointer-events:none}
.anillos i{
  position:absolute; width:36vh; height:36vh; border-radius:50%;
  border:3px solid rgba(255,170,0,.55); opacity:0;
}
body.tele.hayAviso .anillos i{animation:onda 2.4s cubic-bezier(.2,.6,.3,1) both}
body.tele.hayAviso .anillos i:nth-child(2){animation-delay:.42s}
body.tele.hayAviso .anillos i:nth-child(3){animation-delay:1.25s}
@keyframes onda{
  0%{transform:scale(.35); opacity:.75; border-width:6px}
  100%{transform:scale(3.2); opacity:0; border-width:1px}
}

/* Reloj pequeño y barra de vida del aviso */
.piePantalla{
  position:fixed; left:0; right:0; bottom:0; z-index:5;
  padding:0 3.5vw 3.6vh; display:flex; align-items:flex-end;
  justify-content:space-between; gap:2rem;
  opacity:0; transition:opacity .8s ease;
}
body.tele.hayAviso .piePantalla{opacity:1}
.piePantalla b{font-size:2.4vh; font-weight:600; color:var(--ambar-claro); letter-spacing:.1em}
.piePantalla span{font-size:1.5vh; font-weight:400; letter-spacing:.3em; text-transform:uppercase; color:#5A6478}

#vida{
  position:fixed; left:0; bottom:16px; height:5px; z-index:6;
  background:linear-gradient(90deg, var(--ambar-hondo), var(--ambar-claro));
  box-shadow:0 0 22px rgba(255,170,0,.7);
  width:0;
}
body.tele.hayAviso #vida{animation:seAgota var(--duracion,600s) linear both}
@keyframes seAgota{from{width:100%}to{width:0}}

.estadoTele{position:fixed; top:2.6vh; right:3vw; z-index:7; opacity:.5}

/* ── El recado escrito a mano ───────────────────────────────────── */
/* Un solo elemento que cambia de sitio y de tamaño: manda en la pantalla
   cuando no hay nada más, y se aparta abajo cuando entra un cambio de mesa. */
#recado{
  /* Centrado con left/right a 0 y margen automático, NO con left:50%: con
     left:50% el ancho disponible es solo media pantalla y el texto se partía
     en tres líneas teniendo sitio de sobra. */
  position:fixed; left:0; right:0; z-index:5;
  width:fit-content; margin-inline:auto;
  max-width:86vw; text-align:center; text-wrap:balance;
  font-weight:600; line-height:1.25; color:var(--ambar-claro);
  border:1px solid rgba(255,170,0,.34); border-radius:1.5em;
  background:rgba(255,140,0,.07);
  opacity:0; pointer-events:none;
  bottom:14vh; font-size:4.4vh; padding:1.7vh 3.4vw;
  transform:translateY(2vh);
  transition:opacity .7s ease, font-size .6s ease, bottom .6s ease,
             padding .6s ease, transform .6s ease, color .6s ease,
             border-color .6s ease, background .6s ease;
}
body.tele.hayRecado #recado{opacity:1; transform:translateY(0)}

/* Sin cambio de mesa, el recado ES la pantalla: a toda plana y enorme, que se
   lea desde el fondo de la nave igual que el número de una mesa. El reloj se
   encoge y se va arriba para dejarle todo el sitio. */
body.tele.hayRecado:not(.hayAviso) #recado{
  top:0; bottom:0; height:100%;
  width:auto; max-width:none; margin:0;
  display:flex; align-items:center; justify-content:center;
  padding:16vh 5vw 9vh;
  font-size:var(--tamRecado, 10vh); font-weight:700; line-height:1.12;
  letter-spacing:-.01em;
  border:none; border-radius:0; background:none;
  color:var(--ambar-claro);
  text-shadow:0 0 60px rgba(255,170,0,.3);
  transform:none;
}
body.tele.hayRecado:not(.hayAviso) #reloj{font-size:6.4vh; font-weight:300}
body.tele.hayRecado:not(.hayAviso) #fecha{font-size:1.5vh}
body.tele.hayRecado:not(.hayAviso) #quieto{display:none}
body.tele.hayRecado:not(.hayAviso) .escena{place-items:start center; padding-top:4.5vh}

/* Con un cambio de mesa puesto, el recado cede el sitio */
body.tele.hayAviso #recado{
  bottom:3.4vh; font-size:2.3vh; padding:.6vh 1.6vw;
  color:#8C93A4; border-color:transparent; background:none;
  font-weight:500;
}

/* Marca de que esta tele está muda, para saberlo desde abajo */
.muda{
  display:inline-flex; align-items:center; gap:.4rem; margin-right:1.1rem;
  font-size:.72rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:#6A5330;
}
.muda svg{width:14px; height:14px; overflow:visible}
.muda path{fill:currentColor}
.muda .aspa{fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round}
.estadoTele{display:flex; align-items:center}

/* Portada de activación del sonido */
#activar{
  position:fixed; inset:0; z-index:20; display:grid; place-items:center;
  background:radial-gradient(ellipse at center, #101520, var(--negro) 70%);
  cursor:pointer; text-align:center; padding:2rem;
}
#activar h1{font-size:clamp(2rem,5vw,4rem); font-weight:700; letter-spacing:-.02em}
#activar p{margin-top:1.2rem; color:var(--tenue); font-size:clamp(.95rem,1.6vw,1.3rem); font-weight:400; line-height:1.6}
#activar .toque{
  margin-top:3rem; display:inline-block; padding:1.2rem 3rem; border-radius:100px;
  border:2px solid var(--ambar); color:var(--ambar); font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; font-size:.9rem;
  animation:respiraBoton 2.6s ease-in-out infinite;
}
@keyframes respiraBoton{
  0%,100%{box-shadow:0 0 0 0 rgba(255,170,0,.35)}
  50%{box-shadow:0 0 0 22px rgba(255,170,0,0)}
}

/* ══ EL PANEL DEL IPAD ═══════════════════════════════════════════════════ */
body.panel{
  --lado:clamp(92px, min(16.2vw, 12.5vh), 148px);
  --anchoUtil:calc(6 * var(--lado) + 5 * .85rem + 2.8rem);
  display:flex; flex-direction:column; height:100dvh; overflow:hidden;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255,140,0,.09), transparent 60%),
    var(--negro);
}

/* ── Acceso ──────────────────────────────────────────────────────── */
#acceso{
  position:fixed; inset:0; z-index:30; display:grid; place-items:center;
  background:radial-gradient(ellipse at 50% 30%, #10141C, var(--negro) 72%);
  padding:2rem;
}
#acceso .caja{width:min(360px,86vw); text-align:center}
#acceso h1{font-size:1.45rem; font-weight:700; letter-spacing:-.01em}
#acceso h1 em{font-style:normal; color:var(--ambar)}
#acceso p{margin-top:.6rem; color:var(--tenue); font-size:.88rem; font-weight:400}

.puntos{display:flex; justify-content:center; gap:.9rem; margin:2.4rem 0 2rem}
.puntos i{
  width:14px; height:14px; border-radius:50%;
  border:2px solid #2A323F; transition:.25s;
}
.puntos i.lleno{background:var(--ambar); border-color:var(--ambar); box-shadow:0 0 14px rgba(255,170,0,.6); transform:scale(1.1)}
#acceso.mal .puntos{animation:niega .45s}
@keyframes niega{0%,100%{transform:translateX(0)}20%{transform:translateX(-11px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}

.teclado{display:grid; grid-template-columns:repeat(3,1fr); gap:.85rem}
.teclado button{
  aspect-ratio:1.45; border-radius:18px; border:1px solid var(--linea);
  background:var(--carbon-alto); color:var(--hueso);
  font-family:inherit; font-size:1.5rem; font-weight:500; cursor:pointer;
  transition:transform .1s, background .18s;
}
.teclado button:active{transform:scale(.92); background:#1D242F}
.teclado button.vacia{background:none; border:none}
.teclado button.borrar{font-size:1.1rem; color:var(--tenue)}

/* ── Cabecera ────────────────────────────────────────────────────── */
.cabecera{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.15rem 1.4rem .9rem; flex:0 0 auto;
}
.cabecera .marca{display:flex; align-items:center; gap:.7rem; min-width:0}
.cabecera .marca > div{min-width:0}
.cabecera .marca b{
  font-size:.95rem; font-weight:700; letter-spacing:.02em;
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cabecera .marca s{
  text-decoration:none; display:block; font-size:.68rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--tenue); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chispa{
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(145deg, var(--ambar), var(--ambar-hondo));
  color:#0A0A0A; font-weight:800; font-size:1rem; flex:0 0 auto;
}

/* ── Fila de acciones: voz aquí, voz en las teles, recado ───────── */
.acciones{
  display:flex; gap:.7rem; flex:0 0 auto;
  width:100%; max-width:var(--anchoUtil); margin-inline:auto;
  padding:0 1.4rem 1.1rem;
}

.accion{
  flex:1 1 0; min-width:0;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4rem; padding:.75rem .4rem; border-radius:17px; cursor:pointer;
  border:1px solid var(--linea); background:var(--carbon-alto);
  color:var(--tenue); font-family:inherit;
  transition:color .3s, border-color .3s, background .3s, transform .1s, opacity .3s;
  touch-action:manipulation;
}
.accion:active{transform:scale(.95)}
.accion[disabled]{opacity:.38; cursor:default}
.accion[disabled]:active{transform:none}
.accion.activo{
  color:var(--ambar); border-color:rgba(255,170,0,.45);
  background:rgba(255,140,0,.12);
}
.accion span{
  font-size:.62rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.accion svg{width:21px; height:21px; flex:0 0 auto; overflow:visible}
.accion .cuerpo{fill:currentColor}
.accion .marco,
.accion .reng,
.accion .onda,
.accion .mudo{fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.accion .reng{opacity:.6}
.accion .onda{opacity:0; transition:opacity .3s}
.accion.activo .onda{opacity:1}
.accion .mudo{opacity:.9; transition:opacity .3s}
.accion.activo .mudo{opacity:0}

/* ── Lo que hay ahora en las pantallas ───────────────────────────── */
.enAntena{
  margin:0 1.4rem 1.1rem; padding:1.1rem 1.3rem; border-radius:22px; flex:0 0 auto;
  border:1px solid var(--linea); background:var(--carbon);
  display:flex; align-items:center; gap:1.2rem;
  transition:border-color .5s, background .5s;
}
.enAntena.activa{
  border-color:rgba(255,170,0,.45);
  background:linear-gradient(120deg, rgba(255,140,0,.13), rgba(255,140,0,.04));
  box-shadow:0 0 44px rgba(255,140,0,.10);
}
.enAntena .cifra{
  width:70px; height:70px; flex:0 0 auto; border-radius:20px; display:grid; place-items:center;
  background:#131922; color:#39414F; font-size:2.1rem; font-weight:800;
  font-variant-numeric:tabular-nums; transition:.5s;
}
.enAntena.activa .cifra{
  background:linear-gradient(145deg, var(--ambar-claro), var(--ambar-hondo));
  color:#120B00; box-shadow:0 0 34px rgba(255,170,0,.45);
  animation:asoma .6s cubic-bezier(.16,1,.3,1) both;
}
@keyframes asoma{from{transform:scale(.6) rotate(-8deg); opacity:0}to{transform:none; opacity:1}}
.enAntena .texto{flex:1; min-width:0}
.enAntena .texto b{display:block; font-size:1.02rem; font-weight:600; letter-spacing:-.01em}
.enAntena .texto s{
  text-decoration:none; display:block; margin-top:.2rem;
  font-size:.76rem; font-weight:400; color:var(--tenue);
  font-variant-numeric:tabular-nums;
}
.enAntena .mandos{display:flex; gap:.55rem; flex:0 0 auto}
.enAntena .mandos button{
  padding:.7rem 1rem; border-radius:14px; border:1px solid var(--linea);
  background:#161C26; color:var(--hueso); font-family:inherit;
  font-size:.76rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; transition:transform .1s, opacity .3s;
}
.enAntena .mandos button:active{transform:scale(.94)}
.enAntena:not(.activa) .mandos{display:none}

/* ── La rejilla de mesas ─────────────────────────────────────────── */
.rejilla{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:grid; gap:.85rem;
  /* El lado lo manda el ancho o el alto, lo que apriete más: así las treinta
     mesas caben de un vistazo en el iPad, de pie y tumbado. */
  grid-template-columns:repeat(auto-fit, var(--lado));
  grid-auto-rows:var(--lado);
  /* Seis columnas como mucho: tumbado, el iPad las estiraría a nueve y los
     botones se quedarían pequeños para pulsarlos con guantes. */
  width:100%; max-width:var(--anchoUtil); margin-inline:auto;
  justify-content:center; align-content:safe center;
  padding:0 1.4rem calc(1.6rem + env(safe-area-inset-bottom));
}

.mesa{
  position:relative; border-radius:20px; cursor:pointer;
  border:1px solid var(--linea);
  background:linear-gradient(160deg, var(--carbon-alto), #0C1015);
  color:var(--hueso); font-family:inherit;
  font-size:clamp(1.6rem, 4.6vw, 2.5rem); font-weight:700;
  font-variant-numeric:tabular-nums;
  display:grid; place-items:center; overflow:hidden;
  transition:transform .12s cubic-bezier(.3,1.4,.5,1), border-color .3s, background .3s;
  touch-action:manipulation;
  scroll-margin:.85rem;  /* aire al traer a la vista la mesa encendida */
}
.mesa span{position:relative; z-index:2}
.mesa small{
  position:absolute; top:.6rem; left:0; right:0; z-index:2;
  font-size:.54rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:#39414F; transition:color .3s;
}
.mesa:active{transform:scale(.92)}

.mesa.puesta{
  background:linear-gradient(150deg, var(--ambar-claro), var(--ambar-hondo));
  border-color:transparent; color:#140C00;
  box-shadow:0 0 38px rgba(255,140,0,.42);
}
.mesa.puesta small{color:rgba(20,12,0,.5)}

/* Los 3 segundos de margen: el botón se rellena mientras puedes deshacer */
.mesa.contando{border-color:var(--ambar); color:var(--ambar-claro)}
.mesa.contando::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(150deg, var(--ambar-claro), var(--ambar-hondo));
  transform-origin:bottom; animation:sube var(--espera,3s) linear both;
}
@keyframes sube{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ── Barra de deshacer ───────────────────────────────────────────── */
#deshacer{
  position:fixed; left:0; right:0; bottom:0; z-index:25;
  padding:1rem 1.4rem calc(1rem + env(safe-area-inset-bottom));
  background:linear-gradient(100deg, var(--ambar-hondo), var(--ambar));
  color:#150C00; display:flex; align-items:center; gap:1rem;
  transform:translateY(110%); transition:transform .38s cubic-bezier(.16,1,.3,1);
  box-shadow:0 -18px 50px rgba(0,0,0,.5);
}
#deshacer.fuera{transform:translateY(0)}
#deshacer b{font-size:1.02rem; font-weight:700; flex:1; letter-spacing:-.01em}
#deshacer button{
  padding:.85rem 1.5rem; border-radius:14px; border:none;
  background:rgba(0,0,0,.82); color:#fff; font-family:inherit;
  font-size:.82rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer;
}
#deshacer button:active{transform:scale(.94)}
#deshacer i{
  position:absolute; left:0; top:0; height:3px; background:rgba(0,0,0,.4);
}
#deshacer.fuera i{animation:sePasa var(--espera,3s) linear both}
@keyframes sePasa{from{width:100%}to{width:0}}

/* ── Hoja para escribir el recado ───────────────────────────────── */
#hojaRecado{
  position:fixed; inset:0; z-index:28;
  display:grid; place-items:end center;
  /* Sin desenfoque del fondo: compone mal en algunos navegadores y aquí
     no aporta nada que no consiga un velo más oscuro. */
  background:rgba(3,4,6,.86);
  opacity:0; transition:opacity .28s ease;
}
#hojaRecado.abierta{opacity:1}

.hoja{
  width:min(540px, 100%);
  background:var(--carbon); border:1px solid var(--linea); border-bottom:none;
  border-radius:26px 26px 0 0;
  padding:1.6rem 1.4rem calc(1.5rem + env(safe-area-inset-bottom));
  transform:translateY(102%); transition:transform .34s cubic-bezier(.16,1,.3,1);
  box-shadow:0 -24px 60px rgba(0,0,0,.6);
}
#hojaRecado.abierta .hoja{transform:none}

.hoja h2{font-size:1.12rem; font-weight:700; letter-spacing:-.01em}
.hoja .ayuda{margin-top:.4rem; font-size:.8rem; font-weight:400; color:var(--tenue); line-height:1.5}

.hoja textarea{
  width:100%; margin-top:1.2rem; padding:1rem 1.1rem;
  border-radius:16px; border:1px solid var(--linea); background:#0B0E13;
  color:var(--hueso); font-family:inherit; font-size:1.05rem; font-weight:500;
  line-height:1.45; resize:none; outline:none;
  transition:border-color .25s;
}
.hoja textarea:focus{border-color:rgba(255,170,0,.55)}
.hoja textarea::placeholder{color:#3A4453}

.hoja .cuenta{
  margin-top:.45rem; text-align:right; font-size:.68rem; color:var(--tenue);
  font-variant-numeric:tabular-nums;
}

.sugerencias{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem}
.sugerencias:empty{display:none}
.sugerencias button{
  max-width:100%; padding:.5rem .85rem; border-radius:100px; cursor:pointer;
  border:1px solid var(--linea); background:#141A23; color:var(--tenue);
  font-family:inherit; font-size:.76rem; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sugerencias button:active{transform:scale(.95)}

.botonesHoja{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem}
.botonesHoja button{
  flex:1 1 auto; padding:.95rem 1rem; border-radius:15px; cursor:pointer;
  font-family:inherit; font-size:.78rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--linea);
  transition:transform .1s;
}
.botonesHoja button:active{transform:scale(.96)}
.botonesHoja .suave{background:#161C26; color:var(--hueso)}
.botonesHoja .fuerte{
  flex:1 1 100%; order:-1; border-color:transparent; color:#150C00;
  background:linear-gradient(100deg, var(--ambar-hondo), var(--ambar));
}
.botonesHoja button[hidden]{display:none}

@media (min-width:561px){
  #hojaRecado{place-items:center}
  .hoja{
    border-radius:26px; border-bottom:1px solid var(--linea);
    transform:translateY(24px) scale(.97);
    padding-bottom:1.6rem;
  }
  .botonesHoja .fuerte{flex:1 1 auto; order:0}
}

/* Aviso volante cuando algo va mal */
#nota{
  position:fixed; left:50%; bottom:5.5rem; transform:translate(-50%,20px); z-index:26;
  padding:.8rem 1.3rem; border-radius:100px; background:var(--carbon-alto);
  border:1px solid var(--linea); font-size:.82rem; font-weight:500;
  opacity:0; transition:.3s; pointer-events:none; white-space:nowrap;
}
#nota.vista{opacity:1; transform:translate(-50%,0)}

/* El listón está en 560 y no en 430: un iPhone grande mide 440 de ancho y se
   quedaba fuera de todos los ajustes del móvil. */
@media (max-width:560px){
  .cabecera{padding:1rem 1.1rem .8rem}
  .cabecera .marca s{display:none}
  .acciones{gap:.5rem; padding:0 1.1rem .9rem}
  .accion{padding:.7rem .3rem; border-radius:15px}
  .accion span{font-size:.56rem; letter-spacing:.06em}
  .accion svg{width:19px; height:19px}
  .enAntena{gap:.9rem; padding:.9rem 1rem; flex-wrap:wrap}
  .enAntena .texto{flex:1 1 55%}
  .enAntena .mandos{flex:1 1 100%}
  .enAntena .mandos button{flex:1}
  .enAntena .cifra{width:56px; height:56px; font-size:1.7rem; border-radius:16px}
  .enAntena .mandos button{padding:.6rem .75rem; font-size:.68rem}
}