/* Simulador de radio VHF (/radio-vhf). Radio genérica con la disposición de una VHF fija Clase D con DSC. */
.vhf-page{padding-top:16px;padding-bottom:8px}
.vhf-warning{background:#fff7ed;border-left:4px solid #f59e0b;padding:10px 14px;border-radius:0 8px 8px 0;font-size:.92rem;color:#7c2d12;margin:0 0 16px}
.vhf-wrap{max-width:820px;margin:0 auto}

/* Cuerpo: negro con bisel y pomos del soporte a los lados */
.vhf-radio{position:relative;padding:0 26px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.vhf-bracket{position:absolute;top:50%;width:34px;height:96px;margin-top:-48px;border-radius:12px;background:linear-gradient(180deg,#2a2d31,#0e0f11);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 10px rgba(0,0,0,.5)}
.vhf-bracket::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:repeating-conic-gradient(#3a3d42 0 8deg,#1c1e21 8deg 16deg);box-shadow:0 0 0 2px #0b0c0d}
.vhf-bracket--l{left:0}.vhf-bracket--r{right:0}
.vhf-face{position:relative;display:flex;gap:16px;align-items:stretch;padding:16px 18px 18px;border-radius:26px;
  background:linear-gradient(180deg,#34373b 0%,#1d1f22 16%,#141618 70%,#0e0f11 100%);
  box-shadow:inset 0 0 0 3px #26292d,inset 0 2px 0 4px rgba(255,255,255,.06),inset 0 -6px 12px rgba(0,0,0,.6),0 16px 34px rgba(0,0,0,.4)}
.vhf-speaker{flex:0 0 17%;display:flex;justify-content:space-evenly;align-items:stretch;padding:14px 10px;border-radius:14px;background:#0b0c0e;box-shadow:inset 0 3px 8px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.05)}
.vhf-speaker i{width:9px;border-radius:5px;background:linear-gradient(90deg,#000,#1b1d20 60%,#26292d);box-shadow:inset 0 2px 4px rgba(0,0,0,.9)}
.vhf-center{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.vhf-model{font:800 .66rem/1 system-ui,sans-serif;letter-spacing:.2em;color:#c9ced6;text-align:center}
.vhf-model b{color:#e11d48;letter-spacing:.12em}

/* Pantalla LCD ámbar con segmentos apagados («88» al fondo) */
.vhf-lcd{position:relative;min-height:124px;border-radius:6px;padding:8px 12px 7px;
  background:radial-gradient(120% 90% at 50% 30%,#ffc97a,#f0a64a 70%,#d98a34);color:#2b1903;
  font-family:"JetBrains Mono",ui-monospace,monospace;box-shadow:inset 0 3px 10px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.4),0 0 0 4px #050505,0 0 0 6px #2a2d31}
.vhf-lcd::after{content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.22),transparent 40%)}
.vhf-lcd.off{background:#3a3428;color:#7d745f}
.vhf-lcd-off{font-size:.85rem;padding-top:44px;text-align:center}
.vhf-lcd .row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.vhf-lcd .chbox{position:relative;line-height:.92}
.vhf-lcd .ch,.vhf-lcd .ghost{font-size:3.6rem;font-weight:800;letter-spacing:-.05em;font-style:italic}
.vhf-lcd .ghost{position:absolute;left:0;top:0;color:rgba(43,25,3,.09)}
.vhf-lcd .ch{position:relative}
.vhf-lcd .tags{display:grid;grid-template-columns:auto auto;gap:2px 8px;font-size:.72rem;font-weight:800;text-align:right}
.vhf-lcd .tags .dim{opacity:.12}
.vhf-lcd .desc{font-size:.8rem;font-weight:700;margin-top:2px;min-height:1.1em;text-transform:uppercase;letter-spacing:.04em}
.vhf-lcd .pos{font-size:.74rem;margin-top:3px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-weight:700}
.vhf-lcd .tx{background:#2b1903;color:#ffc97a;padding:0 4px;border-radius:2px}
.vhf-lcd .menu{font-size:.86rem;line-height:1.45}
.vhf-lcd .menu .sel{background:#2b1903;color:#ffc97a;padding:0 4px}
.vhf-lcd.alarm{animation:vhf-alarm 1s steps(2) infinite}
@keyframes vhf-alarm{50%{background:radial-gradient(120% 90% at 50% 30%,#ff9d7a,#e2543b 75%)}}

/* Teclas crema con la segunda función serigrafiada encima */
.vhf-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 10px}
.vhf-kw{display:flex;flex-direction:column;align-items:stretch;gap:2px}
.vhf-kw .lbl{font:800 .6rem/1 system-ui,sans-serif;color:#e5e7eb;text-align:center;letter-spacing:.08em;min-height:.6rem}
.vhf-key{min-height:42px;border:0;border-radius:9px;background:linear-gradient(180deg,#fbf7ec,#e3dccb 60%,#cfc6b1);color:#1f2933;font:800 .86rem/1 system-ui,sans-serif;
  box-shadow:0 3px 0 #6f6858,0 4px 6px rgba(0,0,0,.5),inset 0 1px 0 #fff;cursor:pointer;touch-action:manipulation}
.vhf-key--16{background:linear-gradient(180deg,#d6efff,#9fd2f4 60%,#79b9e6);box-shadow:0 3px 0 #3d6f93,0 4px 6px rgba(0,0,0,.5),inset 0 1px 0 #fff}
.vhf-key:active,.vhf-key.press{transform:translateY(2px);box-shadow:0 1px 0 #6f6858,0 2px 3px rgba(0,0,0,.5)}
.vhf-key:focus-visible,.vhf-knob:focus-visible,.vhf-ptt:focus-visible,.vhf-cover:focus-visible,.vhf-distress-btn:focus-visible,.vhf-mkey:focus-visible{outline:3px solid #60a5fa;outline-offset:2px}

/* Derecha: mandos moleteados y DISTRESS con tapa */
.vhf-right{flex:0 0 112px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px}
.vhf-knob-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;color:#e5e7eb;font:800 .62rem/1 system-ui,sans-serif;letter-spacing:.12em}
.vhf-knob-wrap small{font-size:.55rem;color:#9ca3af;margin-top:-2px}
.vhf-knob{width:64px;height:64px;border-radius:50%;position:relative;cursor:grab;touch-action:none;
  background:radial-gradient(circle at 40% 35%,#5d636b 0 24%,#2a2e33 25% 52%,transparent 53%),repeating-conic-gradient(#3b4047 0 6deg,#15181b 6deg 12deg);
  box-shadow:0 5px 12px rgba(0,0,0,.7),0 0 0 3px #0b0c0e}
.vhf-knob i{position:absolute;left:50%;top:5px;width:4px;height:14px;margin-left:-2px;background:#f3f4f6;border-radius:2px;transform-origin:2px 27px}
.vhf-knob-btns{display:flex;gap:6px;margin-top:2px}
.vhf-knob-btns button{width:30px;height:26px;border:0;border-radius:6px;background:#2f3338;color:#e5e7eb;font-weight:800;cursor:pointer;touch-action:manipulation}
.vhf-distress{position:relative;width:84px;height:70px}
.vhf-distress-btn{position:absolute;left:10px;right:10px;top:12px;bottom:6px;border:0;border-radius:6px;background:linear-gradient(180deg,#f04444,#b51515);color:#fff;
  font:900 .62rem/1 system-ui,sans-serif;letter-spacing:.06em;box-shadow:0 3px 0 #6b0f0f,inset 0 1px 0 rgba(255,255,255,.35);cursor:pointer;touch-action:none}
.vhf-cover{position:absolute;left:4px;right:4px;top:4px;bottom:0;z-index:2;border:0;border-radius:8px;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,90,90,.55),rgba(200,20,20,.55));box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 2px 6px rgba(0,0,0,.5);
  transform-origin:50% 4px;transition:transform .28s cubic-bezier(.3,1.4,.6,1)}
.vhf-cover span{position:absolute;left:12%;right:12%;top:2px;height:5px;border-radius:3px;background:rgba(0,0,0,.45)}
.vhf-cover[aria-pressed="true"]{transform:perspective(240px) rotateX(-82deg)}
.vhf-distress .ring{position:absolute;inset:6px 6px 2px;border-radius:10px;border:3px solid #fff;pointer-events:none;opacity:0}
.vhf-distress.hold .ring{opacity:1;animation:vhf-hold 3s linear forwards}
@keyframes vhf-hold{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* Micrófono de mano */
.vhf-mic-row{display:flex;align-items:center;justify-content:center;gap:16px;margin:18px 0 8px;flex-wrap:wrap}
.vhf-mic{display:flex;align-items:stretch;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.vhf-ptt{width:44px;border:0;border-radius:14px 0 0 14px;background:linear-gradient(90deg,#141618,#2b2f34);color:#cbd5e1;font:900 .7rem/1 system-ui,sans-serif;
  writing-mode:vertical-rl;letter-spacing:.2em;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;box-shadow:inset -2px 0 0 #000}
.vhf-ptt.tx{background:linear-gradient(90deg,#7f1d1d,#dc2626);color:#fff;box-shadow:0 0 0 4px rgba(239,68,68,.35)}
.vhf-mic-body{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 16px;border-radius:0 34px 34px 0;background:linear-gradient(180deg,#3a3e44,#1c1f22 60%,#141618)}
.vhf-mic-grill{width:120px;height:56px;border-radius:28px;background:radial-gradient(circle,#0c0d0f 1.6px,transparent 2px) 0 0/7px 7px,#2a2e33;box-shadow:inset 0 2px 6px rgba(0,0,0,.8)}
.vhf-mic-keys{display:flex;gap:6px}
.vhf-mkey{min-width:42px;height:30px;border:0;border-radius:7px;background:linear-gradient(180deg,#4a4f56,#2d3136);color:#e5e7eb;font:800 .7rem/1 system-ui,sans-serif;box-shadow:0 2px 0 #0b0c0e;cursor:pointer;touch-action:manipulation}
.vhf-mic-hint{color:#9ca3af;font-size:.72rem;text-align:center}
.vhf-sound{font-size:.9rem;color:#374151;display:flex;align-items:center;gap:6px}

/* Lo que se oye (subtítulos) */
.vhf-rx{min-height:0;margin:0 0 12px}
.vhf-rx .msg{background:#0f172a;color:#e2e8f0;border-radius:10px;padding:10px 14px;margin-top:8px;font-size:.92rem;line-height:1.45}
.vhf-rx .msg b{color:#fbbf24}
.vhf-rx .msg.err{background:#7f1d1d}
.vhf-rx .msg.ok{background:#14532d}

/* Ejercicios */
.vhf-panel{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:12px 14px;margin-bottom:22px}
.vhf-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.vhf-tabs button{border:1px solid #d1d5db;background:#f8fafc;border-radius:999px;padding:7px 12px;font-weight:700;font-size:.85rem;cursor:pointer;color:#1f2937}
.vhf-tabs button[aria-selected="true"]{background:#0f172a;color:#fff;border-color:#0f172a}
.vhf-tabs button.done::after{content:" ✓";color:#22c55e}
.vhf-mod h3{margin:4px 0 6px;font-size:1.05rem}
.vhf-mod ol{padding-left:1.3em;margin:6px 0}
.vhf-mod li{margin:6px 0;line-height:1.45}
.vhf-mod li.ok{color:#15803d}
.vhf-mod li.ok::marker{content:"✓  "}
.vhf-mod .q{font-weight:700;margin:8px 0}
.vhf-mod .hint{color:#64748b;font-size:.88rem}
.vhf-mod input[type=text]{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px;font-size:1rem}
.vhf-mod .btn{display:inline-block;margin-top:8px;padding:9px 16px;border:0;border-radius:8px;background:#2563eb;color:#fff;font-weight:700;cursor:pointer}
.vhf-mod .btn.sec{background:#e2e8f0;color:#0f172a}
.vhf-mod .res{margin-top:8px;font-weight:700}
.vhf-mod .res.ok{color:#15803d}.vhf-mod .res.err{color:#b91c1c}
.vhf-mod .chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.vhf-mod .chips button{border:1px solid #cbd5e1;background:#f8fafc;border-radius:8px;padding:6px 10px;font-size:.85rem;cursor:pointer}
.vhf-mod .chips button.used{opacity:.35}
.vhf-mod .built{min-height:44px;border:2px dashed #cbd5e1;border-radius:8px;padding:8px;font-size:.9rem;line-height:1.6}

@media(max-width:640px){
  .vhf-radio{padding:0 8px}
  .vhf-bracket{display:none}
  .vhf-face{flex-wrap:wrap;padding:12px;gap:10px;border-radius:20px}
  .vhf-speaker{display:none}
  .vhf-right{flex:1 1 100%;flex-direction:row;justify-content:space-around;align-items:center}
  .vhf-lcd .ch,.vhf-lcd .ghost{font-size:3rem}
  .vhf-keys{gap:4px 6px}
}
@media (prefers-reduced-motion: reduce){.vhf-lcd.alarm{animation:none;outline:4px solid #dc2626}.vhf-cover{transition:none}}
/* Retoques de contraste */
.vhf-knob-wrap > span{color:#e5e7eb}
.vhf-knob-wrap small{margin-top:3px;color:#cbd5e1}
.vhf-ptt{color:#f1f5f9;background:repeating-linear-gradient(0deg,#2b2f34 0 3px,#1c1f22 3px 6px)}
.vhf-ptt span{background:#0b0c0e;padding:8px 3px;border-radius:6px}

/* ═══ Colores como la radio de la foto: gris antracita, marco más claro, teclas gris claro, LCD naranja ═══ */
.vhf-face{background:linear-gradient(180deg,#5b5e63 0%,#45484d 12%,#3a3d41 55%,#2f3236 100%);
  box-shadow:inset 0 0 0 4px #6a6d72,inset 0 0 0 6px #2a2c2f,inset 0 3px 0 6px rgba(255,255,255,.08),inset 0 -6px 14px rgba(0,0,0,.45),0 16px 34px rgba(0,0,0,.35)}
.vhf-speaker{background:#4a4d52;box-shadow:inset 0 2px 6px rgba(0,0,0,.55)}
.vhf-speaker i{width:10px;background:linear-gradient(90deg,#141517,#232528 60%,#2c2e31)}
.vhf-bracket{background:linear-gradient(180deg,#4b4e53,#2a2c2f)}
.vhf-model{color:#e5e7eb}
.vhf-model b{color:#e5e7eb}
.vhf-lcd{background:radial-gradient(120% 90% at 50% 30%,#ffb85a,#f59a2e 70%,#e0811c)}
.vhf-key{background:linear-gradient(180deg,#ffffff,#e9ebee 55%,#d3d7dc);box-shadow:0 3px 0 #7c838c,0 4px 6px rgba(0,0,0,.45),inset 0 1px 0 #fff}
.vhf-key--16{background:linear-gradient(180deg,#e3f3ff,#b5ddf7 55%,#8cc6ec);box-shadow:0 3px 0 #4f7fa3,0 4px 6px rgba(0,0,0,.45),inset 0 1px 0 #fff}
.vhf-kw .lbl{color:#f8fafc}
.vhf-knob{background:radial-gradient(circle at 40% 35%,#6a6e74 0 22%,#2d3034 23% 50%,transparent 51%),repeating-conic-gradient(#43474d 0 6deg,#1e2023 6deg 12deg)}
.vhf-brand{font:italic 900 .78rem/1 "Arial Black",system-ui,sans-serif;letter-spacing:.02em;color:#f1f5f9;opacity:.92}
.vhf-mic-body{background:linear-gradient(180deg,#55585d,#3a3d41 60%,#2f3236)}
.vhf-mic-grill{background:radial-gradient(circle,#141517 1.6px,transparent 2px) 0 0/7px 7px,#45484d}
@media(max-width:640px){.vhf-brand{display:none}}
.vhf-knob-btns button{background:#63676d;box-shadow:0 2px 0 #26282b}

/* ═══ Radio dibujada calcando la foto (SVG) con los mandos encima, en las mismas posiciones ═══ */
.vhf-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:4px}
.vhf-radio{position:relative;width:100%;aspect-ratio:505/235;padding:0;container-type:inline-size;min-width:600px}
.vhf-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.vhf-radio > .vhf-lcd,.vhf-radio > .vhf-key,.vhf-radio > .vhf-knob,.vhf-radio > .vhf-distress{position:absolute;margin:0}
/* Pantalla: ámbar de la foto, letras a escala de la radio */
.vhf-radio > .vhf-lcd{min-height:0;border-radius:.4cqw;padding:.5cqw 1cqw .4cqw;box-shadow:inset 0 .4cqw 1cqw rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.35);
  background:linear-gradient(180deg,#f6b44f,#eea33c 60%,#e2932c);color:#2a1702;overflow:hidden}
.vhf-radio > .vhf-lcd.off{background:#4a3f2e;color:#8b7e64}
.vhf-radio .vhf-lcd-off{font-size:1.9cqw;padding-top:4.2cqw}
.vhf-radio .vhf-lcd .ch,.vhf-radio .vhf-lcd .ghost{font-size:10.6cqw;letter-spacing:-.06em;line-height:.86}
.vhf-radio .vhf-lcd .tags{font-size:1.75cqw;gap:.1cqw .9cqw}
.vhf-radio .vhf-lcd .desc{font-size:1.75cqw;margin-top:0}
.vhf-radio .vhf-lcd .pos{font-size:1.7cqw;margin-top:.1cqw}
.vhf-radio .vhf-lcd .menu{font-size:1.9cqw}
.vhf-radio .vhf-lcd .row{gap:.8cqw}
/* Teclas: crema con el borde redondeado y la letra azul grisácea de la foto; la del 16, azul */
.vhf-radio > .vhf-key{min-height:0;padding:0;border-radius:1.7cqw;font:700 2.15cqw/1 Arial,Helvetica,sans-serif;color:#9fb3c6;letter-spacing:.02em;
  background:linear-gradient(180deg,#fffaf0,#f3ead7 55%,#e4d8bf);box-shadow:0 .35cqw 0 #8c8370,0 .5cqw .8cqw rgba(0,0,0,.45),inset 0 .15cqw 0 #fff}
.vhf-radio > .vhf-key--arrow{color:#7fa6c8;font-size:2.4cqw}
.vhf-radio > .vhf-key--16{color:#fff;font-size:2.7cqw;font-style:italic;background:linear-gradient(180deg,#c4e3f7,#93c6e9 55%,#77b1dc);box-shadow:0 .35cqw 0 #4c7899,0 .5cqw .8cqw rgba(0,0,0,.45),inset 0 .15cqw 0 #e8f6ff;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.vhf-radio > .vhf-key:active,.vhf-radio > .vhf-key.press{transform:translateY(.3cqw);box-shadow:0 .08cqw 0 #8c8370,0 .2cqw .3cqw rgba(0,0,0,.45)}
/* Mandos: moleteado fino, tapa central algo más clara, marca blanca */
.vhf-radio > .vhf-knob{width:auto;border-radius:50%;box-shadow:0 .7cqw 1.4cqw rgba(0,0,0,.6),0 0 0 .35cqw #121314;
  background:radial-gradient(circle at 42% 36%,#6c7076 0 20%,#3a3d42 34%,#2a2c30 52%,transparent 53%),repeating-conic-gradient(#4a4e54 0 5deg,#1b1d20 5deg 10deg)}
.vhf-radio > .vhf-knob i{top:7%;height:22%;width:6%;margin-left:-3%;border-radius:1cqw;transform-origin:50% 195%}
/* DISTRESS: botón rojo con la tapa roja translúcida con bisagra arriba */
.vhf-radio > .vhf-distress{width:auto;height:auto}
.vhf-radio .vhf-distress-btn{left:12%;right:12%;top:20%;bottom:12%;border-radius:.6cqw;font:900 1.35cqw/1 Arial,Helvetica,sans-serif;letter-spacing:.02em;
  background:linear-gradient(180deg,#e43a2f,#b8150f);box-shadow:0 .3cqw 0 #5c0b08,inset 0 .15cqw 0 rgba(255,255,255,.35)}
.vhf-radio .vhf-cover{left:4%;right:4%;top:4%;bottom:2%;border-radius:.9cqw;background:linear-gradient(180deg,rgba(235,60,50,.62),rgba(190,25,20,.55));
  box-shadow:inset 0 0 0 .25cqw rgba(255,255,255,.35),0 .3cqw .8cqw rgba(0,0,0,.5)}
.vhf-radio .vhf-cover span{height:.9cqw;top:.3cqw}
/* Botones −/+ para VOL y SQL debajo (en táctil girar un mando pequeño es incómodo) */
.vhf-knob-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;margin:10px 0 0;font:800 .72rem/1 system-ui,sans-serif;color:#475569;letter-spacing:.1em}
.vhf-knob-row button{width:38px;height:34px;border:0;border-radius:8px;background:#334155;color:#fff;font-size:1.1rem;font-weight:800;cursor:pointer;touch-action:manipulation}
.vhf-knob-row span{margin-left:8px}
.vhf-rotate-hint{flex-basis:100%;text-align:center;font:500 .78rem/1.3 system-ui,sans-serif;color:#64748b;letter-spacing:0;display:none}
@media(max-width:640px) and (orientation:portrait){.vhf-rotate-hint{display:block}}
.vhf-radio > .vhf-key{font-size:1.7cqw;font-weight:700}
.vhf-radio > .vhf-key--16{font-size:2.3cqw}
.vhf-radio > .vhf-key--arrow{font-size:2cqw}
.vhf-radio .vhf-lcd .ch{font-style:normal;font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif;font-weight:700;letter-spacing:-.02em}
.vhf-radio .vhf-lcd .ghost{font-style:normal;font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif;font-weight:700;letter-spacing:-.02em;color:rgba(43,25,3,.06)}
.vhf-radio .vhf-distress-btn{font-size:1.15cqw}
/* Legibilidad: letra de las teclas algo más oscura que en la foto */
.vhf-radio > .vhf-key{color:#5f7a94}
.vhf-radio > .vhf-key--arrow{color:#4f7aa3}
/* Móvil: radio más grande (teclas ≥ 44 px de ancho) y se desliza para ver el altavoz */
@media(max-width:640px) and (orientation:portrait){.vhf-radio{min-width:0}}

/* ═══ Móvil: misma radio reorganizada como panel (la foto completa no cabe a un tamaño que se pueda tocar) ═══ */
@media(max-width:640px) and (orientation:portrait){
  .vhf-scroll{overflow:visible;margin:0;padding:0}
  .vhf-radio{min-width:0!important;aspect-ratio:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:10px 8px;padding:16px 14px 18px;border-radius:24px;
    background:linear-gradient(180deg,#55585d,#3d4044 40%,#323438);box-shadow:inset 0 0 0 3px #8d9095,inset 0 0 0 5px #2a2c2f,0 12px 28px rgba(0,0,0,.35);container-type:normal}
  .vhf-svg{display:none}
  .vhf-radio > .vhf-lcd,.vhf-radio > .vhf-key,.vhf-radio > .vhf-knob,.vhf-radio > .vhf-distress{position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important}
  .vhf-radio > .vhf-lcd{grid-column:1/-1;min-height:132px;padding:8px 12px;border-radius:8px;box-shadow:inset 0 3px 8px rgba(0,0,0,.35),0 0 0 6px #151617,0 0 0 8px #2a2c2f;margin:4px 4px 10px}
  .vhf-radio .vhf-lcd-off{font-size:.9rem;padding-top:46px}
  .vhf-radio .vhf-lcd .ch,.vhf-radio .vhf-lcd .ghost{font-size:4.4rem}
  .vhf-radio .vhf-lcd .tags,.vhf-radio .vhf-lcd .desc{font-size:.78rem}
  .vhf-radio .vhf-lcd .pos{font-size:.74rem}
  .vhf-radio .vhf-lcd .menu{font-size:.86rem}
  .vhf-radio > .vhf-key{height:48px!important;border-radius:12px;font-size:.92rem;box-shadow:0 3px 0 #8c8370,0 4px 6px rgba(0,0,0,.45),inset 0 1px 0 #fff}
  .vhf-radio > .vhf-key--16{font-size:1.15rem}
  .vhf-radio > .vhf-key--arrow{font-size:1rem}
  .vhf-radio > .vhf-key:active,.vhf-radio > .vhf-key.press{transform:translateY(2px)}
  .vhf-radio > .vhf-knob{width:66px!important;height:66px!important;justify-self:center;margin:14px 0 22px;box-shadow:0 5px 12px rgba(0,0,0,.6),0 0 0 3px #121314}
  .vhf-radio > .vhf-knob::after{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);font:800 .7rem/1 Arial,sans-serif;color:#f3f4f6;letter-spacing:.08em}
  #vhf-vol::after{content:"VOL"}#vhf-sql::after{content:"SQL"}
  .vhf-radio > .vhf-distress{grid-column:3/5;height:86px!important;margin:8px 10px 0;border-radius:10px;background:#1d1e20}
  .vhf-radio .vhf-distress-btn{font-size:.72rem;letter-spacing:.04em}
  .vhf-rotate-hint{display:none!important}
}
/* Móvil: la radio entera a la vista al entrar (antes solo asomaba la pantalla) */
@media(max-width:640px) and (orientation:portrait){
  body:has(.vhf-page) .detail-header{padding-top:10px!important;padding-bottom:6px!important}
  body:has(.vhf-page) .detail-title{font-size:1.3rem!important;line-height:1.2;margin:4px 0 0!important}
  body:has(.vhf-page) .detail-subtitle,body:has(.vhf-page) .detail-breadcrumb{display:none!important}
  .vhf-page{padding-top:8px}
  .vhf-warning{font-size:.78rem;line-height:1.35;padding:6px 10px;margin:0 0 10px}
  .vhf-radio{padding:12px 12px 14px;gap:8px 7px}
  .vhf-radio > .vhf-lcd{min-height:104px;margin:2px 2px 6px}
  .vhf-radio .vhf-lcd .ch,.vhf-radio .vhf-lcd .ghost{font-size:3.5rem}
  .vhf-radio .vhf-lcd-off{padding-top:34px}
  .vhf-radio > .vhf-key{height:44px!important}
  .vhf-radio > .vhf-knob{width:58px!important;height:58px!important;margin:8px 0 20px}
  .vhf-radio > .vhf-distress{height:74px!important;margin:6px 8px 0}
}

/* Móvil girado (horizontal): la radio original, como la foto, ocupando la pantalla */
@media (orientation:landscape) and (max-height:520px){
  .vhf-scroll{overflow:visible;margin:0;padding:0}
  .vhf-radio{min-width:0!important;width:min(100%, calc((100svh - 12px) * 505 / 235));margin:0 auto}
  .vhf-rotate-hint{display:none!important}
}
/* En vertical, una pista para ver la radio original */
.vhf-turn{display:none}
@media(max-width:640px) and (orientation:portrait){.vhf-turn{display:block;text-align:center;font-size:.8rem;color:#64748b;margin:8px 0 0}}

/* ═══ Micrófono de mano realista ═══ */
.vhf-mic-row{display:flex;align-items:center;justify-content:center;gap:22px;margin:18px 0 10px;flex-wrap:wrap}
.vhf-mic2{position:relative;width:132px;padding-top:62px;filter:drop-shadow(0 10px 16px rgba(0,0,0,.35))}
.vhf-cord{position:absolute;left:50%;top:0;width:44px;height:66px;transform:translateX(-50%)}
.vhf-mic2-body{position:relative;height:236px;border-radius:40px 40px 34px 34px;padding:16px 14px 18px;
  background:linear-gradient(90deg,#2a2c2f 0%,#4a4d52 22%,#55585d 50%,#45484d 78%,#26282b 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.12),inset 0 -6px 12px rgba(0,0,0,.4)}
.vhf-mic2-body::before{content:"";position:absolute;left:50%;top:-8px;width:30px;height:14px;margin-left:-15px;border-radius:6px 6px 3px 3px;background:#1f2124}
.vhf-mic2-grill{height:96px;border-radius:30px 30px 14px 14px;background:repeating-linear-gradient(180deg,#141517 0 4px,#3b3e42 4px 7px);box-shadow:inset 0 2px 6px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.08)}
.vhf-mic2-brand{margin:10px 0 12px;text-align:center;font:italic 900 .58rem/1 "Arial Black",Arial,sans-serif;color:#e5e7eb;letter-spacing:.02em}
.vhf-mic2-keys{display:grid;grid-template-columns:1fr;justify-items:center;gap:7px}
.vhf-mic2 .vhf-mkey{min-width:0;border:0;cursor:pointer;touch-action:manipulation;color:#e5e7eb;font:800 .7rem/1 Arial,sans-serif;
  background:radial-gradient(circle at 40% 30%,#4b4f55,#1e2023 70%);box-shadow:0 2px 0 #0d0e10,inset 0 1px 0 rgba(255,255,255,.18)}
.vhf-mic2 .vhf-mkey--rnd{width:44px;height:30px;border-radius:15px}
.vhf-mic2 .vhf-mkey--hl{width:56px;height:24px;border-radius:12px;font-size:.62rem;background:linear-gradient(180deg,#3a3d42,#212327)}
.vhf-mic2 .vhf-mkey:active{transform:translateY(1px);box-shadow:0 1px 0 #0d0e10}
/* PTT: tecla larga de goma en el lateral izquierdo */
.vhf-mic2 .vhf-ptt{position:absolute;left:-16px;top:58px;width:22px;height:118px;border:0;padding:0;border-radius:10px 4px 4px 10px;cursor:pointer;touch-action:none;
  background:repeating-linear-gradient(180deg,#2c2f33 0 5px,#1a1c1f 5px 8px);box-shadow:-2px 2px 4px rgba(0,0,0,.5),inset 1px 0 0 rgba(255,255,255,.15);color:transparent}
.vhf-mic2 .vhf-ptt span{position:absolute;left:-30px;top:50%;transform:translateY(-50%) rotate(-90deg);font:800 .66rem/1 Arial,sans-serif;color:#64748b;letter-spacing:.12em;padding:0;background:none}
.vhf-mic2 .vhf-ptt.tx{background:repeating-linear-gradient(180deg,#991b1b 0 5px,#7f1d1d 5px 8px);left:-12px;box-shadow:0 0 0 3px rgba(220,38,38,.35)}
.vhf-mic2 .vhf-ptt.tx span{color:#dc2626}
.vhf-mic-side{max-width:260px;display:flex;flex-direction:column;gap:10px}
.vhf-mic-side .vhf-mic-hint{color:#475569;font-size:.85rem;text-align:left}

/* ═══ Móvil girado: radio y micro a pantalla completa ═══ */
body.vhf-full{overflow:hidden}
body.vhf-full .vhf-scroll{position:fixed;z-index:3000;inset:0 150px 0 0;background:#e9eaec;display:flex;align-items:center;justify-content:center;margin:0;padding:6px}
body.vhf-full .vhf-radio{width:min(100%,calc((100svh - 12px) * 505 / 235))!important;min-width:0!important}
body.vhf-full .vhf-mic-row{position:fixed;z-index:3000;top:0;right:0;bottom:0;width:150px;margin:0;background:#e9eaec;flex-direction:column;justify-content:center;gap:4px}
body.vhf-full .vhf-mic2{transform:scale(.78);transform-origin:center}
body.vhf-full .vhf-mic-side{display:none}
body.vhf-full .vhf-rx{position:fixed;z-index:3001;top:6px;left:50%;transform:translateX(-50%);width:min(70vw,560px);margin:0;pointer-events:none}
body.vhf-full .vhf-rx .msg{display:none;font-size:.8rem;padding:6px 10px;opacity:.95}
body.vhf-full .vhf-rx .msg:last-child{display:block}
body.vhf-full .vhf-knob-row,body.vhf-full .vhf-turn{display:none}
/* Teclas del micro con su tamaño (una regla general del móvil les daba 44 px de alto y se salían del cuerpo) */
.vhf-mic2 .vhf-mic2-keys{grid-template-columns:1fr 1fr;gap:8px 10px;padding:0 4px}
.vhf-mic2 .vhf-mkey{min-height:0!important;min-width:0!important;padding:0!important}
.vhf-mic2 .vhf-mkey--rnd{width:100%!important;height:30px!important}
.vhf-mic2 .vhf-mkey--hl{grid-column:1/-1;justify-self:center;width:62px!important;height:24px!important}
.vhf-mic2 .vhf-mkey--rnd[data-k="up"]{order:1}.vhf-mic2 .vhf-mkey--rnd[data-k="down"]{order:2}.vhf-mic2 .vhf-mkey--hl{order:3}
/* PTT más grande en el lateral del micro y botón «Mantén para hablar» al lado */
.vhf-mic2 .vhf-ptt{left:-22px;top:52px;width:30px;height:140px;border-radius:12px 5px 5px 12px}
.vhf-mic2 .vhf-ptt span{left:-34px}
.vhf-mic2-brand{height:6px;margin:10px 0}
.vhf-ptt-big{display:flex;align-items:center;justify-content:center;gap:8px;min-height:64px;padding:10px 18px;border:0;border-radius:16px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;
  background:linear-gradient(180deg,#334155,#1e293b);color:#fff;font:800 1rem/1.1 system-ui,sans-serif;box-shadow:0 4px 0 #0f172a,0 8px 18px rgba(15,23,42,.3)}
.vhf-ptt-big .ico{font-size:1.4rem}
.vhf-ptt-big small{font-size:.7rem;font-weight:800;letter-spacing:.1em;opacity:.7;margin-left:4px}
.vhf-ptt-big.tx{background:linear-gradient(180deg,#dc2626,#991b1b);box-shadow:0 1px 0 #7f1d1d,0 0 0 4px rgba(220,38,38,.3);transform:translateY(3px)}
body.vhf-full .vhf-mic-side{display:flex;width:136px}
body.vhf-full .vhf-mic-side .vhf-mic-hint,body.vhf-full .vhf-mic-side .vhf-sound{display:none}
body.vhf-full .vhf-ptt-big{min-height:52px;padding:8px;font-size:.8rem;flex-direction:column;gap:2px}
body.vhf-full .vhf-mic2{transform:scale(.6);margin:-60px 0 -50px}
/* Cartel flotante de avisos (móvil en vertical) */
.vhf-toast{position:fixed;z-index:2600;left:10px;right:10px;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:12px 14px;border-radius:12px;background:#0f172a;color:#e2e8f0;font-size:.92rem;line-height:1.4;
  box-shadow:0 10px 26px rgba(0,0,0,.35);transform:translateY(140%);transition:transform .25s ease;pointer-events:none}
.vhf-toast.show{transform:none}
.vhf-toast b{color:#fbbf24}
.vhf-toast.err{background:#7f1d1d}.vhf-toast.ok{background:#14532d}
/* iPhone girado: Safari agrandaba la letra solo (autoajuste de texto) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Girado: el aviso abajo, pequeño y sin tapar la pantalla de la radio; se oculta solo */
body.vhf-full .vhf-rx{top:auto;bottom:4px;left:8px;transform:none;width:calc(100vw - 170px)}
body.vhf-full .vhf-rx .msg{font-size:.72rem!important;line-height:1.3;padding:5px 9px;border-radius:8px;transition:opacity .4s}
body.vhf-full .vhf-rx.fade .msg{opacity:0}
/* Menú de la pantalla (naturaleza del DISTRESS) que cabe entero */
.vhf-radio .vhf-lcd .menu{font-size:1.6cqw;line-height:1.28}
.vhf-radio .vhf-lcd .menu small{font-size:.85em}
body.vhf-full .vhf-scroll,body.vhf-full .vhf-mic-row{height:100dvh}
/* Panel del móvil: el mando VOL también enciende */
@media(max-width:640px) and (orientation:portrait){#vhf-vol::after{content:"VOL · ON/OFF";white-space:nowrap}}
/* Panel vertical: menú legible y pantalla de alto fijo (al encender no se mueven los mandos) */
@media(max-width:640px) and (orientation:portrait){
  .vhf-radio > .vhf-lcd{height:150px!important;min-height:0;overflow:hidden}
  .vhf-radio .vhf-lcd .menu{font-size:.9rem;line-height:1.35}
  .vhf-radio .vhf-lcd-off{padding-top:52px}
}
/* Cartel «Gira el móvil» más visible */
@media(max-width:640px) and (orientation:portrait){
  .vhf-turn{display:flex!important;align-items:center;justify-content:center;gap:10px;margin:12px 0 4px;padding:10px 14px;border-radius:12px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;font-size:.92rem;font-weight:700}
  .vhf-turn::before{content:"📱";display:inline-block;font-size:1.3rem;animation:vhf-turn 2.4s ease-in-out infinite}
}
@keyframes vhf-turn{0%,30%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion: reduce){.vhf-turn::before{animation:none}}
/* Girado: zoom a la zona que se usa (pantalla, teclas, mandos y DISTRESS); el altavoz y los pomos quedan fuera.
   Recorte en unidades de la foto: x 160–470, y 147–337 (190 de alto) */
body.vhf-full::before{content:"";position:fixed;inset:0;z-index:2999;background:#e9eaec}
body.vhf-full .vhf-scroll{--s:min(calc((100dvh - 6px) / 190), calc((100vw - 156px) / 310));inset:auto;display:block;padding:0;background:none;overflow:hidden;
  width:calc(310 * var(--s));height:calc(190 * var(--s));left:calc((100vw - 150px - 310 * var(--s)) / 2);top:calc((100dvh - 190 * var(--s)) / 2);border-radius:calc(24 * var(--s))}
body.vhf-full .vhf-radio{width:calc(505 * var(--s))!important;margin-left:calc(-155 * var(--s));margin-top:calc(-22 * var(--s))}
body.vhf-full .vhf-rx{top:4px;bottom:auto;left:8px;width:calc(100vw - 170px)}
/* Girado (Safari no recortaba bien con overflow+border-radius): sin recorte; lo que sobra queda fuera de pantalla o bajo la columna del micro */
body.vhf-full .vhf-scroll{overflow:visible!important;border-radius:0!important}
body.vhf-full .vhf-mic-row{z-index:3002;background:#e9eaec;padding-right:env(safe-area-inset-right,0px);width:calc(150px + env(safe-area-inset-right,0px))}
body.vhf-full .vhf-rx{z-index:3003}
/* Bloque plegado «Prácticas de radio del PER» */
.vhf-prac{margin:18px 0;border:1px solid #dbe3ee;border-radius:12px;background:#f8fafc}
.vhf-prac summary{cursor:pointer;padding:12px 16px;font-weight:800;color:#0f172a;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.vhf-prac summary::-webkit-details-marker{display:none}
.vhf-prac summary::after{content:"+";font-size:1.3rem;line-height:1;color:#2563eb}
.vhf-prac[open] summary::after{content:"−"}
.vhf-prac > div{padding:0 16px 12px;font-size:.95rem}
.vhf-prac ul{margin:6px 0 10px;padding-left:1.2em}.vhf-prac li{margin:4px 0}
.vhf-prac em{color:#64748b;font-style:normal;font-size:.85em}
.vhf-src{font-size:.8rem;color:#64748b}