/* Sofá — sala oscura. Negro puro, blanco puro, una familia (Funnel Display).
   Elemento firma: «el hilo», la línea de sincronía de la barra superior. */
@font-face { font-family: "Funnel"; src: url("/static/fonts/FunnelDisplay-var.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }

:root {
  --negro: #000;
  --blanco: #fff;
  --humo: #9c9c9c;
  --carbon: #161616;
  --linea: #2a2a2a;
  --rojo: #ff3b30;
  --font: "Funnel", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
  --rail: 300px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--negro); color: var(--blanco); font-family: var(--font); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum"; }
a { color: var(--blanco); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: transparent; padding: 0; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--blanco); outline-offset: 3px; }
.hidden { display: none !important; }
.humo { color: var(--humo); }
.grow { flex: 1; }
.row { display: flex; align-items: center; gap: 12px; }
svg.i { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Botones: pastilla blanca (acción principal), contorno (secundaria), redondo (llamada) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 600; white-space: nowrap; transition: transform .12s var(--ease), background .15s, color .15s, border-color .15s; }
.btn:active { transform: scale(.96); }
.btn.primary { background: var(--blanco); color: var(--negro); }
.btn.primary:hover { background: #e6e6e6; }
.btn.ghost { border: 1px solid var(--linea); color: var(--blanco); }
.btn.ghost:hover { border-color: var(--blanco); }
.btn.sm { height: 34px; padding: 0 14px; font-size: 14px; font-weight: 500; }
.btn[disabled] { opacity: .4; cursor: default; transform: none; }
.round { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--linea); color: var(--blanco); transition: transform .12s var(--ease), background .15s, border-color .15s; position: relative; }
.round:hover { border-color: var(--blanco); }
.round:active { transform: scale(.92); }
.round.on { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }
.round.on::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--blanco); animation: ring 1.6s var(--ease) infinite; }
@keyframes ring { from { transform: scale(1); opacity: .7; } to { transform: scale(1.5); opacity: 0; } }

input.field { width: 100%; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--carbon); border: 1px solid transparent; color: var(--blanco); outline: 0; transition: border-color .15s; }
input.field::placeholder { color: var(--humo); }
input.field:focus { border-color: var(--blanco); }

/* Marca */
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.marca svg.i { width: 24px; height: 24px; }

/* ---------- Landing ---------- */
.page { max-width: 1040px; margin: 0 auto; padding: 28px 24px 60px; }
.top { display: flex; align-items: center; justify-content: space-between; }
.top nav { display: flex; gap: 22px; font-size: 15px; color: var(--humo); }
.top nav a { color: var(--humo); } .top nav a:hover { color: var(--blanco); }
.hero { padding: 96px 0 56px; max-width: 760px; }
.hero h1 { font-size: clamp(44px, 7.4vw, 84px); line-height: .98; letter-spacing: -.035em; font-weight: 700; margin: 0 0 24px; }
.hero p { font-size: clamp(18px, 2vw, 22px); color: var(--humo); line-height: 1.4; margin: 0 0 36px; max-width: 34ch; }
.hero .acciones { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero form { display: flex; gap: 8px; flex: 1; min-width: 280px; max-width: 460px; }
.hero .btn.primary { height: 52px; padding: 0 26px; font-size: 17px; }
.hero input.field, .hero form .btn { height: 52px; }
.err { color: var(--rojo); font-size: 14px; min-height: 20px; margin: 10px 0 0; }

/* Demo del hilo: dos cabezas de lectura que se juntan en una sola línea (una vez, al cargar) */
.demo { margin: 0 0 40px; height: 64px; position: relative; max-width: 760px; }
.demo .l { position: absolute; left: 0; right: 0; height: 1px; background: var(--linea); }
.demo .l.a { top: 18px; } .demo .l.b { top: 46px; }
.demo .p { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--blanco); margin-top: -4.5px; }
.demo .p.a { top: 18px; left: 22%; animation: pa 2.4s var(--ease) 1 forwards; }
.demo .p.b { top: 46px; left: 58%; animation: pb 2.4s var(--ease) 1 forwards; }
.demo .l.a { animation: la 2.4s var(--ease) 1 forwards; } .demo .l.b { animation: lb 2.4s var(--ease) 1 forwards; }
.demo .l.c { top: 32px; background: var(--blanco); transform: scaleX(0); transform-origin: 40% 50%; animation: lc 2.4s var(--ease) 1 forwards; }
.demo .tag { position: absolute; top: 32px; left: 40%; transform: translate(-50%, 14px); font-size: 13px; color: var(--humo); opacity: 0; animation: tag 2.4s var(--ease) 1 forwards; white-space: nowrap; }
@keyframes pa { 0%,35% { left: 22%; top: 18px; } 70%,100% { left: 40%; top: 32px; } }
@keyframes pb { 0%,35% { left: 58%; top: 46px; } 70%,100% { left: 40%; top: 32px; } }
@keyframes la { 0%,35% { opacity: 1; } 70%,100% { opacity: 0; } }
@keyframes lb { 0%,35% { opacity: 1; } 70%,100% { opacity: 0; } }
@keyframes lc { 0%,55% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes tag { 0%,75% { opacity: 0; transform: translate(-50%, 18px); } 100% { opacity: 1; transform: translate(-50%, 14px); } }

.como { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 40px 0; border-top: 1px solid var(--linea); }
.como h2 { font-size: 22px; margin: 0 0 14px; font-weight: 600; letter-spacing: -.01em; }
.como ol { margin: 0; padding-left: 22px; color: var(--humo); display: grid; gap: 8px; }
.como ol li::marker { color: var(--blanco); font-weight: 600; }
.como p { color: var(--humo); margin: 0 0 12px; }
.pie { display: flex; gap: 22px; color: var(--humo); font-size: 14px; padding-top: 40px; border-top: 1px solid var(--linea); }
.pie a { color: var(--humo); }
@media (max-width: 720px) { .como { grid-template-columns: 1fr; gap: 28px; } .hero { padding: 56px 0 36px; } .page { padding: 20px 18px 40px; } }

/* ---------- Sala ---------- */
.sala { height: 100vh; height: 100dvh; display: grid; grid-template-rows: 56px 1fr; }
.barra { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 0 16px; position: relative; }
.barra .marca span { display: none; }
@media (min-width: 720px) { .barra .marca span { display: inline; } }
.estado { display: flex; align-items: center; gap: 12px; min-width: 0; }
.estado .txt { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.estado .tc { font-size: 15px; color: var(--humo); font-variant-numeric: tabular-nums; }
.estado .titulo { color: var(--humo); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.acciones-barra { display: flex; align-items: center; gap: 8px; }
.cuenta { font-size: 14px; color: var(--humo); padding: 0 6px; }

/* El hilo: línea de sincronía bajo la barra */
.hilo { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--linea); overflow: hidden; }
.hilo::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: var(--blanco); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease), opacity .3s; opacity: 0; }
.hilo::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--blanco); left: 50%; margin-left: -4px; opacity: 0; transition: opacity .3s, left .6s var(--ease); }
body[data-sync="ok"] .hilo::before { transform: scaleX(1); opacity: 1; }
body[data-sync="ok"] .hilo::after { opacity: 1; }
body[data-sync="adjust"] .hilo::before { transform: scaleX(1); opacity: .35; }
body[data-sync="adjust"] .hilo::after { opacity: 1; animation: deriva 1.2s var(--ease) infinite alternate; }
body[data-sync="wait"] .hilo::before { transform: scaleX(1); opacity: 1; background: repeating-linear-gradient(90deg, var(--blanco) 0 10px, transparent 10px 20px); animation: marcha 1s linear infinite; }
body[data-sync="wait"] .hilo::after { opacity: 0; }
body[data-sync="pause"] .hilo::before { transform: scaleX(1); opacity: .5; }
body[data-sync="pause"] .hilo::after { opacity: 1; }
body[data-sync="off"] .hilo::before { transform: scaleX(0); }
body[data-sync="bad"] .hilo::before { transform: scaleX(1); opacity: 1; background: var(--rojo); }
@keyframes deriva { from { left: 44%; } to { left: 56%; } }
@keyframes marcha { from { background-position: 0 0; } to { background-position: 20px 0; } }

.cuerpo { display: grid; grid-template-columns: 1fr var(--rail); min-height: 0; }
.escena { display: grid; grid-template-rows: 1fr auto; min-width: 0; min-height: 0; }
.pantalla { background: var(--negro); display: flex; align-items: center; justify-content: center; position: relative; min-height: 220px; overflow: hidden; }
.pantalla video, .pantalla iframe, .pantalla #yt { width: 100%; height: 100%; border: 0; background: var(--negro); }
.vacio { text-align: left; padding: 32px; max-width: 560px; width: 100%; }
.vacio h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 12px; font-weight: 700; }
.vacio p { color: var(--humo); margin: 0 0 18px; max-width: 46ch; }
.vacio .grande { font-size: clamp(56px, 9vw, 112px); line-height: 1; letter-spacing: -.04em; font-weight: 700; font-variant-numeric: tabular-nums; margin: 6px 0 14px; }
.vacio .grande small { display: block; font-size: 16px; letter-spacing: 0; color: var(--humo); font-weight: 500; margin-top: 8px; }
.vacio .fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pon { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--linea); align-items: center; }
.pon form { display: flex; gap: 8px; flex: 1; min-width: 0; }
.pon .nota { color: var(--humo); font-size: 14px; white-space: nowrap; }
@media (max-width: 1000px) { .pon .nota { display: none; } }

.riel { display: grid; grid-template-rows: auto 1fr auto; border-left: 1px solid var(--linea); min-height: 0; }
.caras { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; }
.cara { position: relative; aspect-ratio: 1; background: var(--carbon); border-radius: 12px; overflow: hidden; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .2s; }
.cara.habla { outline-color: var(--blanco); }
.cara.habla::before { content: ""; position: absolute; inset: 0; border-radius: 12px; border: 2px solid var(--blanco); animation: ring 1.4s var(--ease) infinite; pointer-events: none; z-index: 2; }
.cara video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cara .inicial { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; color: var(--blanco); letter-spacing: -.03em; }
.cara .nombre { position: absolute; left: 8px; right: 8px; bottom: 8px; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.cara .nombre svg.i { width: 14px; height: 14px; }
.cara .fuera { position: absolute; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--humo); }
.cara .otro { position: absolute; top: 8px; left: 8px; font-size: 12px; background: var(--blanco); color: var(--negro); padding: 2px 8px; border-radius: 999px; font-weight: 600; }

.charla { display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--linea); }
.charla .log { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; scrollbar-width: thin; scrollbar-color: var(--linea) transparent; }
.charla .m { animation: entra .25s var(--ease); line-height: 1.35; overflow-wrap: anywhere; }
.charla .m b { font-weight: 600; margin-right: 6px; }
.charla .m span { color: #d6d6d6; }
.charla .m.sys { color: var(--humo); font-size: 14px; }
.charla form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--linea); }
.charla form .btn { padding: 0 16px; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.llamada { display: flex; gap: 12px; padding: 12px; align-items: center; justify-content: center; border-top: 1px solid var(--linea); flex-wrap: wrap; }
.llamada .ptt { width: 100%; text-align: center; font-size: 13px; color: var(--humo); }
kbd { font-family: inherit; border: 1px solid var(--linea); border-radius: 6px; padding: 0 6px; font-size: 12px; color: var(--blanco); }

.aviso { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 0); background: var(--blanco); color: var(--negro); padding: 12px 16px; border-radius: 999px; display: flex; gap: 12px; align-items: center; z-index: 50; max-width: 92vw; font-weight: 500; animation: sube .3s var(--ease); }
.aviso button { color: var(--negro); font-weight: 700; border-left: 1px solid rgba(0,0,0,.15); padding-left: 12px; }
@keyframes sube { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toca { position: fixed; inset: auto 0 0 0; background: var(--blanco); color: var(--negro); padding: 14px; text-align: center; font-weight: 600; cursor: pointer; z-index: 55; }

/* Entrada */
.entrada { position: fixed; inset: 0; background: var(--negro); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 24px; }
.entrada .caja { width: 100%; max-width: 420px; animation: entra .4s var(--ease); }
.entrada h2 { font-size: 40px; letter-spacing: -.035em; line-height: 1; margin: 0 0 8px; }
.entrada p { color: var(--humo); margin: 0 0 24px; }
.entrada label { display: block; font-size: 14px; color: var(--humo); margin: 0 0 8px; }
.entrada .aviso-datos { font-size: 13px; color: var(--humo); margin: 16px 0 20px; line-height: 1.45; }
.entrada .btn { width: 100%; height: 52px; font-size: 17px; }

/* ---------- Overlay (dentro de Netflix, Max, Prime, YouTube) ---------- */
body.overlay .sala { grid-template-rows: 40px 1fr; }
body.overlay .barra { padding: 0 10px; gap: 10px; }
body.overlay .barra .marca span, body.overlay .barra .titulo, body.overlay .cuenta { display: none; }
body.overlay .cuerpo { grid-template-columns: 1fr; }
body.overlay .escena { display: none; }
body.overlay .riel { border-left: 0; }
body.overlay .caras { gap: 4px; padding: 6px; }
body.overlay .cara { aspect-ratio: 16/9; border-radius: 8px; }
body.overlay .cara .inicial { font-size: 28px; }
body.overlay .charla .log { font-size: 14px; padding: 8px 10px; }
body.overlay .llamada { padding: 8px; gap: 8px; }
body.overlay .llamada .ptt { display: none; }
body.overlay .round { width: 40px; height: 40px; }
body.overlay .entrada { padding: 12px; }
body.overlay .entrada h2 { font-size: 28px; }
body.overlay .entrada .aviso-datos { display: none; }

/* Móvil */
@media (max-width: 860px) {
  .cuerpo { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .riel { border-left: 0; border-top: 1px solid var(--linea); grid-template-rows: auto 1fr auto; }
  .caras { grid-template-columns: repeat(4, 1fr); }
  .pantalla { min-height: 200px; max-height: 42vh; }
  .estado .titulo { display: none; }
}

/* Texto largo (instalar, privacidad) */
.texto { max-width: 680px; }
.texto h1 { font-size: clamp(36px, 6vw, 60px); letter-spacing: -.035em; line-height: 1; margin: 48px 0 20px; }
.texto h2 { font-size: 22px; letter-spacing: -.01em; margin: 40px 0 12px; }
.texto p, .texto li { color: #d6d6d6; line-height: 1.55; }
.texto ol, .texto ul { padding-left: 22px; } .texto li { margin: 6px 0; }
.texto li::marker { color: var(--blanco); }
.texto code { background: var(--carbon); padding: 2px 8px; border-radius: 6px; font-size: 14px; }
.texto strong { color: var(--blanco); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .demo .p.a, .demo .p.b { left: 40%; top: 32px; } .demo .l.a, .demo .l.b { opacity: 0; } .demo .l.c { transform: none; } .demo .tag { opacity: 1; }
}

/* ---------- v2: menú, vistas, moderación, panel ---------- */
.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; background: var(--negro); border: 1px solid var(--linea); border-radius: 14px; padding: 6px; z-index: 70; box-shadow: 0 16px 40px rgba(0,0,0,.6); animation: entra .18s var(--ease); }
.menu .sec { font-size: 12px; color: var(--humo); padding: 8px 12px 4px; }
.menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; text-align: left; color: var(--blanco); }
.menu button:hover { background: var(--carbon); }
.menu button[aria-checked="true"]::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--blanco); }
.menu button[disabled] { opacity: .4; cursor: default; }
.menu hr { border: 0; border-top: 1px solid var(--linea); margin: 6px 0; }
.menu .danger { color: #ff8a80; }
.estado .pillx { font-size: 12px; color: var(--humo); border: 1px solid var(--linea); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }

/* tiles: corona, menú, ocultar */
.cara .nombre svg.i.corona { width: 13px; height: 13px; }
.cara .mas { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.55); color: var(--blanco); display: none; align-items: center; justify-content: center; z-index: 3; }
.cara .mas svg.i { width: 16px; height: 16px; }
.cara:hover .mas, .cara:focus-within .mas { display: inline-flex; }
.cara .tmenu { position: absolute; inset: auto 6px 6px 6px; background: var(--negro); border: 1px solid var(--linea); border-radius: 10px; padding: 4px; z-index: 4; display: grid; gap: 2px; animation: entra .15s var(--ease); }
.cara .tmenu button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; font-size: 13px; font-weight: 500; text-align: left; color: var(--blanco); }
.cara .tmenu button:hover { background: var(--carbon); }
.cara .tmenu button.danger { color: #ff8a80; }
.cara .tmenu button.confirm { background: var(--blanco); color: var(--negro); }
body[data-hideself="1"] .cara.yo { display: none; }

/* solo rostros */
body[data-layout="faces"] .cuerpo { grid-template-columns: 1fr; }
body[data-layout="faces"] .escena { display: none; }
body[data-layout="faces"] .riel { border-left: 0; grid-template-rows: auto 1fr auto; }
body[data-layout="faces"] .caras { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 8px; padding: 10px; align-content: center; height: 100%; }
body[data-layout="faces"] .caras.n1 .cara { max-width: 720px; margin: 0 auto; width: 100%; }
body[data-layout="faces"] .cara { aspect-ratio: 4/3; max-height: calc(100vh - 160px); width: 100%; }
body[data-layout="faces"] .charla { display: none; }
body[data-layout="faces"].chat-open .charla { display: flex; }

/* cine: reproductor a pantalla completa, caras pequeñas encima, chat como panel emergente */
body[data-layout="cinema"] .cuerpo { grid-template-columns: 1fr; position: relative; }
body[data-layout="cinema"] .riel { position: absolute; right: 12px; bottom: 76px; width: auto; max-width: 60vw; background: transparent; border: 0; grid-template-rows: auto; z-index: 5; }
body[data-layout="cinema"] .caras { display: flex; gap: 6px; padding: 0; }
body[data-layout="cinema"] .cara { width: 120px; height: 90px; aspect-ratio: auto; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
body[data-layout="cinema"] .charla { position: absolute; right: 0; bottom: 100%; margin-bottom: 8px; width: 300px; height: 340px; background: var(--negro); border: 1px solid var(--linea); border-radius: 14px; display: none; }
body[data-layout="cinema"].chat-open .charla { display: flex; }
body[data-layout="cinema"] .llamada { display: none; }
body[data-layout="cinema"] .pon .chat-toggle { display: inline-flex; }
.pon .chat-toggle { display: none; }
.pon .chat-toggle .n { min-width: 18px; height: 18px; border-radius: 999px; background: var(--blanco); color: var(--negro); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.pon .chat-toggle .n:empty { display: none; }
body[data-layout="cinema"] .pon .mini-call { display: inline-flex; gap: 8px; }
.pon .mini-call { display: none; }

/* flotante (Document PiP): el body del PiP */
body.pip { background: var(--negro); margin: 0; }
body.pip .pipwrap { display: grid; grid-template-rows: 1fr auto; height: 100vh; }
body.pip .caras { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; align-content: center; }
body.pip .caras.n1 { grid-template-columns: 1fr; }
body.pip .cara { aspect-ratio: 4/3; }
body.pip .llamada { border: 0; padding: 8px; }
body.pip .llamada .ptt { display: none; }
body[data-layout="float"] .caras:empty::after { content: "Las cámaras están en la ventana flotante"; color: var(--humo); font-size: 13px; padding: 12px; grid-column: 1/-1; }

/* panel lateral (iframe en la extensión) */
body.panel { background: var(--negro); }
body.panel .sala { grid-template-rows: 48px 1fr; }
body.panel .barra { padding: 0 12px; gap: 10px; }
body.panel .barra .marca span, body.panel .barra .titulo, body.panel .cuenta { display: none; }
body.panel .cuerpo { grid-template-columns: 1fr; }
body.panel .escena { display: none; }
body.panel .riel { border-left: 0; grid-template-rows: auto auto 1fr auto; }
body.panel .caras.n1 { grid-template-columns: 1fr; }
body.panel .caras.n1 .cara { aspect-ratio: 16/10; }
body.panel .siteline { display: flex; }
body.overlay .siteline { display: flex; }
.siteline { display: none; flex-direction: column; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--linea); font-size: 13px; }
.siteline .l1 { display: flex; align-items: center; gap: 8px; color: var(--humo); }
.siteline .l1 b { color: var(--blanco); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.siteline .servicios { display: flex; flex-wrap: wrap; gap: 6px; }
.servicios button { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linea); font-size: 13px; font-weight: 600; color: var(--blanco); transition: border-color .15s, background .15s; }
.servicios button:hover { border-color: var(--blanco); }
.servicios button.primary { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }

/* home del panel y estado aparcado */
.home { position: fixed; inset: 0; background: var(--negro); padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; z-index: 58; overflow-y: auto; }
.home h2 { font-size: 30px; letter-spacing: -.03em; line-height: 1; margin: 12px 0 4px; }
.home p { color: var(--humo); margin: 0; font-size: 14px; }
.home .servicios { gap: 8px; }
.home .servicios button { height: 40px; }
.home form { display: flex; gap: 8px; }
.home .btn { height: 44px; }
.home .sep { border-top: 1px solid var(--linea); }
.parked { position: fixed; inset: 0; background: var(--negro); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 24px; z-index: 58; }
.parked h2 { font-size: 26px; letter-spacing: -.03em; margin: 0; }
.parked p { color: var(--humo); margin: 0 0 8px; }

body.overlay[data-compact="1"] .charla, body.overlay[data-compact="1"] .siteline { display: none; }
body.overlay[data-compact="1"] .riel { grid-template-rows: 1fr auto; }