/* Complemento exclusivo del simulacro incendio. Sin selectores globales. */
.hf-player { --hf-paper:#f4f0e6; --hf-ink:#122e35; --hf-accent:#ffb56b; margin:20px 0 28px; border:1px solid #34505a; background:#10262d; color:var(--hf-paper); border-radius:16px; overflow:hidden; }
.hf-player *, .hf-brief * { box-sizing:border-box; }
.hf-player button, .hf-player input { font:inherit; }
.hf-player button { cursor:pointer; }
.hf-player button:focus-visible, .hf-player input:focus-visible, .hf-player summary:focus-visible { outline:3px solid #ffd38f; outline-offset:3px; }
.hf-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 20px; border-bottom:1px solid #365059; flex-wrap:wrap; }
.hf-bar strong { color:#fff; font-size:.94rem; }
.hf-bar small { display:block; color:#c4d1d2; margin-top:3px; font-size:.78rem; }
.hf-controls { display:flex; flex-wrap:wrap; gap:8px; }
.hf-controls button,.hf-tabs button,.hf-tools button,.hf-keypad button,.hf-inline-button { min-height:44px; padding:8px 13px; color:#f7f4ec; background:#203c44; border:1px solid #5d747c; border-radius:7px; font-weight:700; }
.hf-controls button[aria-pressed="true"],.hf-tabs button[aria-pressed="true"] { color:#14282e; background:#ffbf7e; border-color:#ffbf7e; }
.hf-controls button:disabled { opacity:.65; cursor:default; }
.hf-main { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(270px,1fr); }
.hf-stage { position:relative; height:520px; min-height:310px; background:#08171c; overflow:hidden; }
.hf-photo-wrap { position:absolute; inset:0; margin:auto; width:100%; height:100%; }
.hf-photo { position:absolute; width:100%; height:100%; object-fit:contain; filter:brightness(.66) saturate(.72); }
.hf-stage.hf-day .hf-photo { filter:none; }
.hf-stage canvas { position:absolute; pointer-events:none; }
.hf-vignette { position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 80px 12px #0006; }
.hf-badge { position:absolute; top:13px; left:13px; z-index:3; max-width:calc(100% - 26px); padding:7px 10px; background:#10262de8; color:#f4e9d9; border:1px solid #739097; border-radius:5px; font-size:.66rem; font-weight:800; letter-spacing:.045em; }
.hf-scene-caption { position:absolute; bottom:12px; left:13px; right:13px; z-index:3; background:#0c212bea; color:white; padding:10px 13px; border-left:3px solid #ffbf7e; font-size:.83rem; }
.hf-hotspot { position:absolute; z-index:4; min-width:44px; min-height:44px; padding:6px 9px; border:2px solid #ffe1b1; border-radius:7px; background:#173b46ed; color:#fff; box-shadow:0 2px 10px #0008; transform:translate(-50%,-50%); font-size:.78rem!important; font-weight:800!important; }
.hf-hotspot:hover { background:#385862; }
.hf-info { padding:23px 25px; border-left:1px solid #34505a; display:flex; flex-direction:column; align-items:flex-start; gap:13px; }
.hf-info .hf-kicker { color:#ffbf7e; font-size:.73rem; font-weight:850; letter-spacing:.12em; }
.hf-info h2,.hf-info h3 { color:#fff; margin:0; line-height:1.16; font-size:clamp(1.4rem,2.7vw,2.1rem); }
.hf-info p { color:#e1e7e6; font-size:.94rem; line-height:1.55; margin:0; }
.hf-status { align-self:stretch; background:#203e46; border-left:3px solid #ffbf7e; padding:12px 14px; }
.hf-status strong { display:block; color:#ffcf94; font-size:.8rem; margin-bottom:4px; }
.hf-status p { font-size:.87rem; }
.hf-tabs { display:flex; flex-wrap:wrap; padding:12px 16px; gap:8px; border-top:1px solid #34505a; }
.hf-tabs button { font-size:.79rem; flex:1 1 auto; }
.hf-tools { display:flex; flex-wrap:wrap; gap:8px; width:100%; }
.hf-tools button { font-size:.83rem; }
.hf-note { color:#b8cccc!important; font-size:.77rem!important; }
.hf-detail { width:100%; padding:12px; background:#1b343d; border:1px solid #5a767d; border-radius:7px; }
.hf-detail[hidden],.hf-player [hidden],.hf-brief [hidden] { display:none!important; }
.hf-detail h3 { font-size:1rem; margin:0 0 8px; }
.hf-detail p { font-size:.85rem; }
.hf-phone-display { display:block; color:#172e34; background:#eff4eb; min-height:49px; padding:8px 12px; font-size:1.5rem; font-weight:850; letter-spacing:.13em; border-radius:5px; margin:8px 0; }
.hf-keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.hf-keypad button { min-height:44px; }
.hf-keypad .hf-dial { grid-column:span 2; background:#eab37c; color:#112a30; border-color:#eab37c; }
.hf-radio { margin-top:10px!important; padding:9px; background:#112930; border-radius:5px; }
.hf-map { display:flex; flex-direction:column; gap:6px; margin-top:12px; padding-left:14px; border-left:2px solid #7b949b; }
.hf-map span { font-size:.82rem; color:#e7ebe9; }
.hf-map strong { color:#ffcc92; }
.hf-volume { display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:#e1e7e6; font-size:.8rem; width:100%; }
.hf-volume input { max-width:155px; accent-color:#ffbf7e; }
.hf-feedback { margin:15px 0; padding:17px; border:1px solid #d5c6ac; border-left:4px solid #a05c20; background:#fff9ed; color:#19343b; border-radius:7px; }
.hf-feedback strong { color:#814008; display:block; margin-bottom:5px; }
.hf-feedback p { margin:6px 0 0; line-height:1.55; }
.hf-feedback small { display:block; margin-top:9px; }
.hf-brief { margin:0; align-self:start; background:#10262d; border-radius:14px; overflow:hidden; color:#f4f0e6; }
.hf-brief img { width:100%; max-height:360px; display:block; object-fit:cover; object-position:50% 39%; }
.hf-brief figcaption { padding:17px 20px; font-size:.86rem; line-height:1.5; }
.hf-brief strong { display:block; color:#ffd099; margin-bottom:5px; }
.hf-brief .hf-player { margin:0; border:0; border-radius:0; }
.hf-brief .hf-main { grid-template-columns:1fr; }
.hf-brief .hf-stage { height:350px; }
.hf-brief .hf-photo { max-height:none; object-fit:contain; object-position:center; }
.hf-brief .hf-info { border-left:0; border-top:1px solid #34505a; padding:17px; }
.hf-brief .hf-info h2 { font-size:1.45rem; }
.hf-brief .hf-tabs { display:none; }
.hf-intro-meter { display:block; height:5px; width:100%; border:0; accent-color:#ffbc79; }
.hf-compact-brief { margin-top:12px; }
.hf-compact-brief img { max-height:200px; }
@media(max-width:720px){ .hf-main { grid-template-columns:1fr; } .hf-stage { height:430px; } .hf-info { border-left:0; border-top:1px solid #34505a; padding:18px; } .hf-bar { padding:12px 14px; } .hf-controls button { padding:7px 10px; font-size:.79rem; } .hf-tabs { padding:10px; } .hf-tabs button { flex:1 1 28%; } }
@media(max-width:380px){ .hf-stage { height:390px; } .hf-info h2 { font-size:1.35rem; } }
@media(prefers-reduced-motion:reduce){ .hf-player *, .hf-brief * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
