/* Walkie de Javi (build 15, 03/11/2026). Pantalla completa de borde a borde: la carcasa llega al borde de los 4 lados, también bajo la isla y la barra de inicio. */
html.jw-abierto, html.jw-abierto body { overflow: hidden; overscroll-behavior: none }
.jw { --cas1:#e0242c; --cas2:#8a0f16; --filo:#d9a93a; --panelA:#15161a; --panelB:#202127; --tinta:#f3ece0; --acento:#ff6a5f; --btn1:#e8323a; --btn2:#a8141c; --btntxt:#fff;
  --lcdA:#a7d27a; --lcdB:#8fbd63; --lcdtxt:#17310d; --lcdoscuro:#0f2408; --salirtxt:#f3d27a; --perilla:#2a2a30;
  position:fixed; inset:0; z-index:2147483000; box-sizing:border-box; padding:11px; color:var(--tinta);
  background:linear-gradient(180deg,var(--cas1),var(--cas2)); font-family:inherit; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:manipulation }
.jw::before { content:""; position:absolute; inset:0; background:radial-gradient(120% 60% at 30% 0%,rgba(255,255,255,.22),transparent 55%); pointer-events:none }
.jw-carbono { position:relative; height:100%; box-sizing:border-box; border-radius:40px; border:2px solid var(--filo); overflow:hidden;
  background:repeating-linear-gradient(45deg,var(--panelA) 0 3px,var(--panelB) 3px 6px); box-shadow:0 0 0 2px rgba(0,0,0,.45) inset;
  display:flex; flex-direction:column; padding:calc(env(safe-area-inset-top,0px) + 6px) 12px calc(env(safe-area-inset-bottom,0px) + 8px) }
.jw-top { display:flex; align-items:center; gap:10px; flex:none; min-height:56px }
.jw-salir, .jw-colgar { min-height:46px; min-width:88px; padding:0 14px; border-radius:23px; font:700 15px/1 inherit; letter-spacing:.04em; border:1.5px solid var(--filo); white-space:nowrap; cursor:pointer }
.jw-salir { background:#101012; color:var(--salirtxt); display:flex; align-items:center; gap:6px }
.jw-salir span { font-size:24px; line-height:1; color:var(--filo); margin-top:-3px }
.jw-colgar { background:linear-gradient(180deg,var(--btn1),var(--btn2)); color:var(--btntxt); border-color:rgba(255,255,255,.35); flex:none; margin-left:auto }
.jw-colgar:disabled { opacity:.4 }
.jw-rejilla { flex:1 1 auto; min-width:44px; height:46px; border-radius:10px; border:1px solid var(--filo); background:radial-gradient(circle,#6b5230 1.6px,transparent 2px) 0 0/9px 9px, #17130d; opacity:.9 }
.jw-lcd { flex:none; margin-top:14px; border-radius:20px; border:2px solid var(--filo); background:linear-gradient(180deg,var(--lcdA),var(--lcdB)); color:var(--lcdtxt); padding:12px 12px 10px; font-family:ui-monospace,"SF Mono",Menlo,monospace; min-height:176px; box-shadow:0 0 0 3px #0b0b0d }
.jw-l1 { display:flex; justify-content:space-between; font-size:12px; font-weight:700; letter-spacing:.05em; padding-bottom:7px; border-bottom:1px solid rgba(0,0,0,.35) }
.jw-habla { margin-top:8px; background:var(--lcdoscuro); color:#c9f58a; border-radius:8px; padding:7px 10px; display:flex; justify-content:space-between; align-items:center; min-height:34px; gap:8px }
.jw-habla small { font-size:11px; font-weight:700; letter-spacing:.04em } .jw-habla b { font-size:20px; letter-spacing:.03em; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.jw-miembros { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px 4px; margin-top:12px; padding-top:16px }
.jw-m { position:relative; min-width:0; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; font-weight:700; transition:opacity .2s }
.jw-ini { width:46px; height:46px; border-radius:50%; border:2px solid var(--lcdoscuro); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800 }
.jw-m small { font-size:12px; font-weight:800; line-height:1.15; max-width:100%; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
/* El que habla se ILUMINA (círculo y nombre con halo que pulsa); los demás quedan apagados mientras alguien habla. */
.jw-alguien .jw-m:not(.jw-hab) { opacity:.38 }
.jw-hab .jw-ini { background:#0f2408; color:#e9ff9c; border-color:#e9ff9c; text-shadow:0 0 8px #d6ff6b; animation:jw-pulso 1.1s ease-in-out infinite }
.jw-hab small { color:#0f2408; background:#e9ff9c; border-radius:7px; padding:1px 6px; box-shadow:0 0 10px 2px rgba(233,255,156,.9); animation:jw-brillo 1.1s ease-in-out infinite }
@keyframes jw-pulso { 0%,100% { box-shadow:0 0 0 2px rgba(233,255,156,.55), 0 0 10px 3px rgba(214,255,107,.55) } 50% { box-shadow:0 0 0 5px rgba(233,255,156,.3), 0 0 22px 9px rgba(214,255,107,.95) } }
@keyframes jw-brillo { 0%,100% { box-shadow:0 0 6px 1px rgba(233,255,156,.6) } 50% { box-shadow:0 0 14px 4px rgba(233,255,156,1) } }
@media (prefers-reduced-motion:reduce) { .jw-hab .jw-ini, .jw-hab small { animation:none } }
.jw-m em { position:absolute; top:-15px; left:50%; transform:translateX(-50%); background:#0b0b0d; color:#c9f58a; font-style:normal; font-size:10px; font-weight:800; padding:2px 8px; border-radius:10px }
.jw-m:not(.jw-conectado):not(.jw-inv) .jw-ini { border-style:dashed; opacity:.6 } .jw-m:not(.jw-conectado):not(.jw-inv) small { opacity:.6 }
.jw-inv { opacity:.55 } .jw-on { position:absolute; top:32px; left:50%; margin-left:13px; width:11px; height:11px; border-radius:50%; background:#1f8a2e; border:2px solid var(--lcdB) }
.jw-vacio { font-size:13px; margin:14px 4px; text-align:center }
.jw-sin .jw-miembros { display:flex; flex-direction:column; gap:6px; padding-top:6px; max-height:130px; overflow-y:auto }
.jw-fila { display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; min-height:46px; padding:8px 12px; border-radius:10px; border:1px solid rgba(0,0,0,.4); background:rgba(0,0,0,.12); color:inherit; text-align:left; font:inherit; cursor:pointer }
.jw-fila b { font-size:14px } .jw-fila span { font-size:12px; opacity:.85; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.jw-fila-inv { background:var(--lcdoscuro); color:#c9f58a }
.jw-pozo { flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; padding:14px 0 }
.jw-hablar { width:min(calc(100vw - 92px), calc(100vh - 430px), 320px); width:min(calc(100vw - 92px), calc(100dvh - 430px), 320px); aspect-ratio:1; border-radius:50%; border:0; padding:0; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; touch-action:none;
  background:radial-gradient(circle at 35% 28%,#ff9d92 0,#ff6a5f 28%,#c4202a 70%,#8f121a 100%); box-shadow:0 0 0 14px #060607, 0 0 0 17px var(--filo), 0 14px 30px rgba(0,0,0,.6), inset 0 -8px 20px rgba(0,0,0,.35) }
.jw-hablar svg { width:46px; height:68px; fill:#fff; stroke:#fff; margin-bottom:4px } .jw-hablar b { font-size:34px; letter-spacing:.03em; line-height:1 } .jw-hablar small { font-size:13px; opacity:.85 }
.jw-hablar.jw-en { background:radial-gradient(circle at 35% 28%,#fff1a8 0,#ffd23f 30%,#d98a00 80%); color:#2b1700 } .jw-hablar.jw-en svg { fill:#2b1700; stroke:#2b1700 }
.jw-hablar.jw-ocupado { filter:grayscale(.85) brightness(.7) } .jw-hablar:disabled { filter:grayscale(.8) brightness(.55); cursor:default }
.jw-pie { position:relative; flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0 22px }
.jw-perilla { flex:none; width:58px; height:58px; border-radius:50%; border:2px solid #000; background:radial-gradient(circle at 40% 35%,#55555e,var(--perilla) 60%,#101012); box-shadow:0 0 0 3px #0b0b0d, 0 0 0 4px var(--filo); position:relative; cursor:pointer }
.jw-perilla i { position:absolute; inset:0; transition:transform .15s } .jw-perilla i::after { content:""; position:absolute; left:50%; top:6px; width:3px; height:18px; margin-left:-1.5px; background:#f2c14e; border-radius:2px }
.jw-et { position:absolute; bottom:0; font-size:11px; font-weight:800; letter-spacing:.05em } .jw-et-vol { left:22px } .jw-et-ch { right:22px }
.jw-agregar { flex:1 1 auto; min-height:62px; border-radius:16px; border:2px solid #000; box-shadow:0 0 0 3px #0b0b0d,0 0 0 4px var(--filo); background:linear-gradient(180deg,var(--btn1),var(--btn2)); color:var(--btntxt); display:flex; align-items:center; justify-content:center; gap:12px; cursor:pointer; margin:0 6px }
.jw-agregar b { font-size:30px; line-height:1; font-weight:600 } .jw-agregar span { font-size:14px; font-weight:800; line-height:1.15; text-align:left; letter-spacing:.04em } .jw-agregar:disabled { filter:grayscale(.7) brightness(.6) }
.jw-aviso { position:absolute; left:16px; right:16px; bottom:98px; padding:10px 14px; border-radius:12px; background:rgba(0,0,0,.88); color:#fff; font-size:14px; text-align:center; border:1px solid var(--filo); z-index:3 }
.jw-hoja { position:absolute; inset:0; z-index:5; display:flex; align-items:flex-end } .jw-hoja[hidden] { display:none }
.jw-hoja-f { position:absolute; inset:0; background:rgba(0,0,0,.6) }
.jw-hoja-c { position:relative; width:100%; max-height:78%; overflow:auto; background:#16161a; color:#f2f2f2; border-top:2px solid var(--filo); border-radius:22px 22px 0 0; padding:16px 16px calc(18px + env(safe-area-inset-bottom,0px)); box-sizing:border-box }
.jw-hoja-c h3 { margin:0 0 6px; font-size:19px } .jw-p { color:#b8b8c0; font-size:14px; margin:4px 0 10px }
.jw-q { width:100%; box-sizing:border-box; min-height:46px; border-radius:12px; border:1px solid #3a3a44; background:#0f0f12; color:#f2f2f2; padding:8px 12px; font-size:16px; margin:4px 0 8px }
.jw-lista .jw-fila, .jw-hoja-c .jw-fila { background:#202026; color:#f2f2f2; border-color:#34343c; margin-bottom:6px } .jw-hoja-c .jw-fila-inv { background:#2d2412; color:#f5d98a } .jw-hoja-c .jw-fila:disabled { opacity:.45 }
.jw-gr { display:block; width:100%; min-height:50px; margin-top:8px; border-radius:12px; border:1px solid #3a3a44; background:#25252c; color:#f2f2f2; font-size:16px; font-weight:700 } .jw-si { background:linear-gradient(180deg,var(--btn1),var(--btn2)); border-color:var(--filo) }
.jw-hoja-x { display:block; width:100%; min-height:46px; margin-top:10px; border-radius:12px; border:1px solid #3a3a44; background:transparent; color:#b8b8c0; font-size:15px }
.jw-banner { position:fixed; left:12px; right:12px; top:calc(env(safe-area-inset-top,0px) + 8px); z-index:2147482000; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; background:#1a0e10; border:1.5px solid #d9a93a; color:#f2f2f2; font-size:15px; box-shadow:0 8px 24px rgba(0,0,0,.6) }
.jw-banner span { flex:1 } .jw-banner button { min-height:44px; min-width:44px; padding:0 14px; border-radius:12px; border:1px solid #d9a93a; background:#a8141c; color:#fff; font-weight:700 } .jw-banner button:last-child { background:transparent; color:#b8b8c0; border-color:#3a3a44 }
/* ---- 6 temas (el material llena toda la pantalla, sin marco ni banda negra) ---- */
.jw-retro_cromo { --cas1:#d9dbe0; --cas2:#8b8e96; --filo:#f4f4f6; --panelA:#2a2d33; --panelB:#3a3e46; --btn1:#6a6f79; --btn2:#2f3239; --acento:#cfd2d8; --salirtxt:#f4f4f6; --lcdA:#b8c89a; --lcdB:#9db27e }
.jw-negro_oro { --cas1:#111; --cas2:#050505; --filo:#e6b845; --panelA:#0d0d0f; --panelB:#17171a; --btn1:#d9a93a; --btn2:#8a6516; --btntxt:#150e00; --lcdA:#d7c27a; --lcdB:#bfa75a; --lcdtxt:#2a2000; --lcdoscuro:#241a02 }
.jw-tactico { --cas1:#59623c; --cas2:#2f3720; --filo:#b7a56a; --panelA:#1c2013; --panelB:#272d1b; --btn1:#6f7b45; --btn2:#3d4726; --lcdA:#9fc07a; --lcdB:#87a868 }
.jw-azul_noche { --cas1:#1f3f8f; --cas2:#0b1a45; --filo:#8fb4ff; --panelA:#0c1224; --panelB:#141c35; --btn1:#2f63d9; --btn2:#173b8f; --salirtxt:#cfe0ff; --lcdA:#8fd0c8; --lcdB:#74b8b0; --lcdtxt:#06312c }
.jw-nogal_laton { --cas1:#7a4a26; --cas2:#3f2411; --filo:#d3a85a; --panelA:#1c130c; --panelB:#2a1d12; --btn1:#b5792f; --btn2:#6e4413; --lcdA:#cbd08c; --lcdB:#b3b872; --lcdtxt:#2c2b0b }
@media (max-height:700px) { .jw-lcd { min-height:150px } .jw-hablar { width:min(calc(100vw - 92px),calc(100dvh - 410px)) } .jw-perilla { width:50px; height:50px } .jw-agregar { min-height:54px } }

/* Ajustes › Walkie */
.jw-aj { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0 }
.jw-aj-t { min-height:46px; border-radius:12px; border:1px solid #3a3a44; background:#202026; color:#f2f2f2; font:600 14px/1.2 inherit; padding:6px 8px }
.jw-aj-en { border-color:#d9a93a; background:#2d2412; color:#f5d98a }

/* Repique con la app abierta (04/11/2026): se ve como llamada entrante, no como aviso. */
.jw-banner.jw-llama { z-index:2147483500; flex-wrap:wrap; animation:jwRepique 1.2s ease-in-out infinite }
.jw-banner.jw-llama span { flex:1 1 100%; font-weight:700; font-size:16px }
.jw-banner.jw-llama button { flex:1 1 0; min-height:48px; font-size:16px }
.jw-banner.jw-llama .jw-ok { background:#1f9d55; border-color:#7be0a4 }
.jw-banner.jw-llama button:last-child { background:#a8141c; color:#fff; border-color:#d9a93a }
@keyframes jwRepique { 0%,100% { box-shadow:0 8px 24px rgba(0,0,0,.6) } 50% { box-shadow:0 8px 24px rgba(0,0,0,.6),0 0 0 4px rgba(217,169,58,.55) } }
@media (prefers-reduced-motion:reduce) { .jw-banner.jw-llama { animation:none } }

/* estado de cada contacto: EN LÍNEA (verde, punto vivo) · SALIÓ DEL CANAL / CERRÓ LA APP / NO ESTÁ EN LÍNEA (gris) */
.jw-m .jw-st { max-width:100%; font-size:9.5px; line-height:1.2; padding:3px 5px; border-radius:8px; opacity:1; display:flex; flex-direction:column; gap:1px }
.jw-m .jw-st b { font-weight:800; letter-spacing:.02em } .jw-m .jw-st span { font-weight:600; font-size:9px }
.jw-m .jw-st-on { background:#0f2408; color:#c9f58a }
.jw-m .jw-st-off { background:#5b5f55; color:#f2f2f2 }
.jw-conectado .jw-ini { border-color:#1f8a2e; border-style:solid }
.jw-on { animation:jw-vivo 1.6s ease-in-out infinite }
@keyframes jw-vivo { 0%,100% { box-shadow:0 0 0 0 rgba(31,138,46,.55) } 50% { box-shadow:0 0 0 5px rgba(31,138,46,0) } }
@media (prefers-reduced-motion:reduce) { .jw-on { animation:none } }