/* =====================================================================
   BOWLING HERO — CAPA DE MEJORA "ULTRA / DIRECTOR DEPORTIVO" (estilos)
   No modifica el juego (main.js): todo vive en #bh-layer sobre el <canvas>.
   Quita el <link> y el <script> del index.html y el juego queda igual.
   ===================================================================== */
:root {
    --bh-bg0: #1a0f06; --bh-bg1: #2a1608; --bh-wood: #c9892f;
    --bh-amber: #ffb347; --bh-amber2: #ff8c1a; --bh-teal: #19c6c6;
    --bh-ink: #fff4e2; --bh-good: #4ee08a; --bh-bad: #ff6b6b;
    --bh-pin: #fff7ee; --bh-line: rgba(255,179,71,.35);
}
#bh-layer {
    position: fixed; inset: 0; z-index: 9000; pointer-events: none;
    font-family: "tradegothic", "Montserrat", Arial, sans-serif;
    -webkit-tap-highlight-color: transparent; user-select: none;
}
#bh-layer * { box-sizing: border-box; }

/* ---- Lienzo de efectos (partículas/confeti) ---- */
#bh-fx { position: absolute; inset: 0; pointer-events: none; }
#bh-fx.bh-shake { animation: bh-shake .24s linear; }
@keyframes bh-shake {
    0%,100% { transform: translate(0,0); }
    20% { transform: translate(-5px,2px); } 40% { transform: translate(5px,-3px); }
    60% { transform: translate(-4px,-2px); } 80% { transform: translate(4px,3px); }
}

/* ---- Botón flotante (bola de bolos) ---- */
.bh-fab {
    position: absolute; right: calc(10px + env(safe-area-inset-right,0px));
    top: 42%; width: 70px; height: 70px; margin-top: -35px;
    border: none; padding: 0; border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #2a3550 0%, #0c1322 70%);
    box-shadow: 0 6px 18px rgba(0,0,0,.55), inset 0 2px 6px rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    cursor: grab; pointer-events: auto; touch-action: none;
    user-select: none; -webkit-user-select: none;
    transition: transform .12s ease;
}
.bh-fab::before {
    content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%;
    background: rgba(10,12,20,.85); top: 22px; left: 24px;
    box-shadow: 16px 4px 0 -1px rgba(10,12,20,.85), 8px 18px 0 -1px rgba(10,12,20,.85);
}
.bh-fab span { font-size: 26px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); position: relative; z-index: 1; }
.bh-fab:hover { transform: scale(1.07); }
.bh-fab:active { cursor: grabbing; transform: scale(.95); }
.bh-fab.bh-bot-on { box-shadow: 0 0 16px var(--bh-good), 0 0 6px var(--bh-good); animation: bh-fabpulse 1.4s infinite; }
@keyframes bh-fabpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@media (max-width: 620px) { .bh-fab { width: 58px; height: 58px; margin-top: -29px; } .bh-fab span { font-size: 22px; } .bh-fab::before { top: 18px; left: 19px; } }

/* ---- Fondo oscuro ---- */
.bh-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 4; }
.bh-backdrop.bh-open { opacity: 1; pointer-events: auto; }

/* ---- Panel con pestañas ---- */
.bh-panel {
    position: absolute; left: 50%; bottom: 0; width: min(460px,97vw);
    transform: translate(-50%,110%);
    background: linear-gradient(180deg,#241406 0%,#160c04 100%);
    border: 1px solid var(--bh-line); border-bottom: none; border-radius: 20px 20px 0 0;
    color: var(--bh-ink); pointer-events: auto; box-shadow: 0 -8px 32px rgba(0,0,0,.55);
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
    max-height: 92vh; display: flex; flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom,0px); z-index: 6;
}
.bh-panel.bh-open { transform: translate(-50%,0); }
.bh-phead { padding: 14px 18px 6px; display: flex; align-items: center; justify-content: space-between; }
.bh-phead h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: .5px; }
.bh-phead h2 span { color: var(--bh-amber); font-size: 12px; opacity: .85; }
.bh-globe { border: 1px solid var(--bh-line); background: rgba(255,255,255,.06); color: #fff; font-size: 18px; width: 38px; height: 38px; border-radius: 10px; cursor: pointer; }
.bh-globe:active { transform: scale(.92); }

/* ---- Selector de idiomas (modal buscable) ---- */
.bh-langmodal { position: absolute; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; pointer-events: auto; z-index: 10; }
.bh-langcard { width: min(440px,94vw); max-height: 86vh; background: linear-gradient(180deg,#241406,#160c04); border: 1px solid var(--bh-line); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; }
.bh-langtop { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.bh-langtop b { font-size: 15px; color: var(--bh-amber); }
.bh-langx { background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; }
.bh-langsearch { margin: 12px 16px; padding: 11px 14px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; color: #fff; font-size: 15px; font-family: inherit; }
.bh-langlist { overflow-y: auto; padding: 0 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bh-langit { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 1px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: 9px 11px; color: var(--bh-ink); cursor: pointer; }
.bh-langit:hover { background: rgba(255,140,26,.2); }
.bh-langit.bh-sel { background: rgba(255,140,26,.3); border-color: var(--bh-amber2); }
.bh-langit span { font-size: 13px; font-weight: 700; }
.bh-langit small { font-size: 10px; opacity: .55; }

/* pestañas */
.bh-tabs { display: flex; gap: 4px; padding: 0 10px; flex-wrap: wrap; }
.bh-tab {
    flex: 1; border: none; background: rgba(255,255,255,.04); color: #e8cfa6;
    border-radius: 9px 9px 0 0; padding: 9px 0; font-size: 17px; font-weight: 700; cursor: pointer;
    border-bottom: 2px solid transparent; min-width: 36px;
}
.bh-tab.bh-sel { background: rgba(255,140,26,.22); color: #fff; border-bottom-color: var(--bh-amber2); }

/* ---- cuerpo ---- */
.bh-body { padding: 14px 16px 18px; overflow-y: auto; }

/* ---- Slider ---- */
.bh-slider { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 130px; height: 6px; border-radius: 6px; background: #4a3115; outline: none; }
.bh-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--bh-amber2); cursor: pointer; border: 2px solid #fff; }
.bh-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--bh-amber2); cursor: pointer; border: 2px solid #fff; }

/* ---- Mapa de calor ---- */
.bh-heat { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; margin-bottom: 12px; }
.bh-hcell { aspect-ratio: 1/1; border-radius: 4px; background: rgba(255,255,255,.06); }
.bh-hcell.bh-h1 { background: #7a4a12; } .bh-hcell.bh-h2 { background: #d68a1e; } .bh-hcell.bh-h3 { background: var(--bh-amber); }

/* ---- Tienda ---- */
.bh-shopgrid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-bottom: 12px; }
.bh-shopit { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 11px; padding: 10px; text-align: center; cursor: pointer; }
.bh-shopit.bh-sel { border-color: var(--bh-amber); background: rgba(255,179,71,.12); }
.bh-shopit b { display: block; font-size: 13px; margin: 5px 0 2px; } .bh-shopit span { font-size: 11px; opacity: .7; }
.bh-swatch { height: 26px; border-radius: 50px; border: 1px solid rgba(255,255,255,.25); }
.bh-shopsec { font-size: 13px; font-weight: 800; color: var(--bh-amber); margin: 16px 2px 8px; text-transform: uppercase; letter-spacing: .5px; }

/* ---- Filas ---- */
.bh-row { display: flex; align-items: center; gap: 11px; padding: 11px; margin-bottom: 9px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; }
.bh-row.bh-danger { border-color: rgba(255,90,90,.4); }
.bh-ico { font-size: 22px; width: 28px; text-align: center; flex: 0 0 auto; }
.bh-txt { flex: 1 1 auto; min-width: 0; }
.bh-txt b { display: block; font-size: 14px; }
.bh-txt span { display: block; font-size: 11px; opacity: .68; margin-top: 2px; }

.bh-act { flex: 0 0 auto; border: none; border-radius: 9px; padding: 9px 14px; font-size: 13px;
    font-weight: 700; color: #2a1606; background: linear-gradient(160deg,var(--bh-amber),var(--bh-amber2)); cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.bh-act:active { transform: scale(.94); }
.bh-act:disabled { opacity: .5; filter: grayscale(.5); cursor: default; }
.bh-act.bh-ghost { background: rgba(255,255,255,.08); color: var(--bh-ink); border: 1px solid rgba(255,255,255,.18); }
.bh-row.bh-danger .bh-act { background: #c0392b; color: #fff; }

/* interruptor */
.bh-switch { flex: 0 0 auto; width: 52px; height: 30px; border-radius: 30px; background: #4a3115; position: relative; cursor: pointer; transition: background .2s ease; }
.bh-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .2s ease; }
.bh-switch.bh-on { background: var(--bh-good); }
.bh-switch.bh-on::after { left: 25px; }

/* segmentos */
.bh-lbl { font-size: 11px; opacity: .65; margin: 4px 2px 6px; text-transform: uppercase; letter-spacing: .5px; }
.bh-seg { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.bh-seg button { flex: 1; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); color: #e8cfa6; border-radius: 9px; padding: 8px 4px; font-size: 13px; font-weight: 700; cursor: pointer; min-width: 60px; }
.bh-seg button.bh-sel { background: var(--bh-amber2); color: #2a1606; border-color: var(--bh-amber2); }

/* ---- Perfil ---- */
.bh-input, .bh-select { flex: 0 0 auto; width: 140px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.18); color: #fff; border-radius: 8px; padding: 8px; font-size: 14px; font-family: inherit; }
.bh-select { width: 160px; }
.bh-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; margin-bottom: 12px; }
.bh-chip { font-size: 22px; padding: 7px 0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; cursor: pointer; }
.bh-chip.bh-sel { border-color: var(--bh-amber); background: rgba(255,179,71,.18); }
.bh-colors { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.bh-color { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.bh-color.bh-sel { border-color: #fff; transform: scale(1.1); }
.bh-idcard { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px; border: 2px solid; border-radius: 14px; background: rgba(255,255,255,.04); }
.bh-av { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 27px; color: #2a1606; }
.bh-idcard b { font-size: 16px; } .bh-idcard span { display: block; font-size: 11px; opacity: .72; }

/* ---- Stats / récords ---- */
.bh-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 14px; }
.bh-stat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 10px 6px; text-align: center; }
.bh-sico { font-size: 18px; } .bh-stat b { display: block; font-size: 18px; margin: 2px 0; } .bh-stat span { font-size: 10px; opacity: .62; }

/* ---- Medallas ---- */
.bh-ach { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.bh-badge { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 10px; text-align: center; opacity: .5; }
.bh-badge.bh-un { opacity: 1; border-color: rgba(255,179,71,.5); background: rgba(255,179,71,.08); }
.bh-bico { font-size: 26px; } .bh-badge b { display: block; font-size: 12px; margin-top: 4px; } .bh-badge span { display: block; font-size: 10px; opacity: .65; margin-top: 2px; }

/* ---- Retos / duelo ---- */
.bh-quest { background: rgba(255,140,26,.12); border: 1px solid rgba(255,179,71,.3); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.bh-quest.bh-done { background: rgba(78,224,138,.14); border-color: rgba(78,224,138,.5); }
.bh-quest.bh-duel { background: rgba(192,57,43,.12); border-color: rgba(255,120,100,.4); }
.bh-qhead { font-size: 13px; font-weight: 800; } .bh-qbody { font-size: 15px; margin: 6px 0; } .bh-qfoot { font-size: 12px; opacity: .82; }
.bh-vslist { margin-top: 8px; } .bh-vsrow { display: flex; justify-content: space-between; padding: 7px 10px; background: rgba(255,255,255,.04); border-radius: 8px; margin-bottom: 5px; font-size: 13px; }

/* ---- Caja de código / textarea ---- */
.bh-codebox { width: 100%; height: 70px; margin-top: 8px; background: rgba(0,0,0,.35); color: #ffd9a0; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; font-size: 10px; padding: 8px; word-break: break-all; resize: none; }

.bh-foot { text-align: center; font-size: 10px; opacity: .45; margin-top: 10px; }
.bh-hide { display: none !important; }

/* ===== CLUB HQ (barra de recursos + tablero + paneles a pantalla completa) ===== */
.bh-hqbar { position: absolute; top: calc(6px + env(safe-area-inset-top,0px)); left: 50%; transform: translateX(-50%);
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; pointer-events: auto; z-index: 2;
    background: rgba(26,15,6,.82); border: 1px solid var(--bh-line); border-radius: 22px; padding: 5px 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,.5); max-width: 94vw; }
.bh-hqr { font-size: 12px; font-weight: 700; color: var(--bh-ink); background: rgba(255,255,255,.07); padding: 4px 9px; border-radius: 13px; white-space: nowrap; }
.bh-hqopen { font-size: 12px; font-weight: 800; color: #2a1606; background: linear-gradient(160deg,var(--bh-amber),var(--bh-amber2)); border: none; border-radius: 13px; padding: 5px 12px; cursor: pointer; }
.bh-hqopen:active { transform: scale(.94); }

/* contenedor de pantalla completa (HQ y paneles) */
.bh-screen {
    position: absolute; inset: 0; z-index: 11; pointer-events: auto;
    background: radial-gradient(125% 95% at 50% 14%, #3a2008 0%, #1d1004 54%, #0b0702 100%);
    display: flex; flex-direction: column;
}
.bh-shdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 6px; }
.bh-stitle { font-size: 22px; font-weight: 800; color: var(--bh-ink); letter-spacing: .5px; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.bh-sx { width: 46px; height: 46px; border-radius: 11px; border: 2px solid rgba(255,200,130,.7);
    background: linear-gradient(160deg,var(--bh-amber),var(--bh-amber2)); color: #2a1606; font-size: 20px; font-weight: 800; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.bh-sx:active { transform: scale(.93); }
.bh-ssum { display: flex; gap: 8px; padding: 4px 16px 10px; justify-content: center; flex-wrap: wrap; }
.bh-sstat { min-width: 78px; text-align: center; background: rgba(255,255,255,.06); border: 1px solid var(--bh-line); border-radius: 11px; padding: 7px 12px; }
.bh-sstat b { display: block; font-size: 16px; } .bh-sstat span { font-size: 9px; opacity: .68; text-transform: uppercase; letter-spacing: .5px; }
.bh-sstat.bh-hot { background: rgba(78,224,138,.2); border-color: rgba(78,224,138,.5); } .bh-sstat.bh-hot b { color: var(--bh-good); }

/* tablero del HQ */
.bh-hqgrid { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 16px; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; }
.bh-hqrow { display: flex; gap: 11px; flex-wrap: wrap; justify-content: center; }
.bh-hqbtn { width: 92px; height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    background: rgba(40,22,8,.72); border: 2px solid var(--bh-line); border-radius: 14px; color: var(--bh-ink); cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,.4); transition: transform .12s, border-color .12s, box-shadow .12s; }
.bh-hqbtn:hover { transform: translateY(-3px); border-color: var(--bh-amber); box-shadow: 0 0 16px rgba(255,179,71,.4); }
.bh-hqbtn:active { transform: scale(.95); }
.bh-hqi { font-size: 28px; line-height: 1; }
.bh-hqlbl { font-size: 10.5px; font-weight: 800; letter-spacing: .3px; text-align: center; }
.bh-hqfoot { text-align: center; font-size: 11px; opacity: .5; padding: 10px; }

/* cuerpo de paneles genéricos */
.bh-pxbody { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px; }
.bh-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 13px; padding: 12px 14px; margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bh-card b { font-size: 15px; }
.bh-card p { width: 100%; margin: 0; font-size: 12px; opacity: .82; line-height: 1.45; }
.bh-card .bh-act { margin-left: auto; }
.bh-card.bh-hot { border-color: rgba(255,179,71,.45); background: rgba(255,179,71,.08); }
.bh-rankrow { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: rgba(255,255,255,.04); border-radius: 9px; margin-bottom: 6px; font-size: 13px; gap: 8px; }
.bh-rankrow.bh-sel { background: rgba(78,224,138,.16); border: 1px solid rgba(78,224,138,.5); }
.bh-chatbox { max-height: 46vh; overflow-y: auto; margin-bottom: 10px; }
.bh-chatmsg { padding: 8px 12px; background: rgba(255,255,255,.05); border-radius: 10px; margin-bottom: 6px; font-size: 13px; }

/* barras de progreso (forma física, moral, instalaciones, etc.) */
.bh-bar { flex: 1 1 100%; height: 9px; border-radius: 6px; background: rgba(0,0,0,.35); overflow: hidden; margin-top: 4px; }
.bh-barfill { height: 100%; border-radius: 6px; background: linear-gradient(90deg,var(--bh-amber2),var(--bh-amber)); transition: width .4s ease; }
.bh-barfill.bh-bf-good { background: linear-gradient(90deg,#1e9e5a,var(--bh-good)); }
.bh-barfill.bh-bf-bad { background: linear-gradient(90deg,#a02a2a,var(--bh-bad)); }
.bh-mini { font-size: 11px; opacity: .72; }
.bh-tag { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 6px; background: rgba(255,179,71,.16); color: var(--bh-amber); }
.bh-tag.bh-tg-good { background: rgba(78,224,138,.16); color: var(--bh-good); }
.bh-tag.bh-tg-bad { background: rgba(255,107,107,.16); color: var(--bh-bad); }

/* oil pattern canvas */
.bh-oilcv { width: 100%; height: 90px; border-radius: 10px; border: 1px solid var(--bh-line); background: #0a0a14; display: block; }

@media (max-width: 620px) {
    .bh-hqbtn { width: 74px; height: 70px; } .bh-hqi { font-size: 24px; } .bh-hqlbl { font-size: 9px; } .bh-hqr { font-size: 10px; padding: 3px 6px; }
    .bh-stitle { font-size: 18px; }
}
@media (max-width: 380px) {
    .bh-slider, .bh-input { width: 110px; } .bh-select { width: 128px; }
    .bh-grid { grid-template-columns: repeat(4,1fr); }
}

/* ---- Toast / Tip / HUD bot / Stats en vivo ---- */
.bh-toast { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%) translateY(10px);
    background: rgba(26,15,6,.96); color: var(--bh-ink); border: 1px solid var(--bh-line);
    padding: 10px 16px; border-radius: 10px; font-size: 13px; opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease; max-width: 90vw; text-align: center; z-index: 12; }
.bh-toast.bh-show { opacity: 1; transform: translateX(-50%) translateY(0); }

.bh-tip { position: absolute; left: 50%; bottom: 17%; transform: translateX(-50%) translateY(10px);
    background: rgba(20,11,4,.97); color: var(--bh-ink); border: 1px solid rgba(255,179,71,.5);
    padding: 12px 16px; border-radius: 12px; max-width: min(420px,92vw); opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease; text-align: center; z-index: 12; }
.bh-tip.bh-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.bh-tip b { display: block; color: var(--bh-amber); font-size: 13px; margin-bottom: 4px; }
.bh-tip span { font-size: 13px; line-height: 1.35; }

.bh-bot-hud { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom,0px)); transform: translateX(-50%);
    background: rgba(26,15,6,.88); border: 1px solid var(--bh-good); color: var(--bh-good); font-size: 12px; font-weight: 700;
    letter-spacing: .5px; padding: 5px 12px; border-radius: 20px; pointer-events: none; opacity: 0; transition: opacity .25s ease; z-index: 3; }
.bh-bot-hud.bh-show { opacity: 1; }

.bh-live { position: absolute; left: 50%; top: calc(52px + env(safe-area-inset-top,0px)); transform: translateX(-50%);
    background: rgba(26,15,6,.84); border: 1px solid var(--bh-line); color: var(--bh-ink); font-size: 12px; font-weight: 700;
    padding: 5px 14px; border-radius: 18px; pointer-events: none; opacity: 0; transition: opacity .25s ease; white-space: nowrap; z-index: 3; }
.bh-live.bh-show { opacity: 1; }
.bh-live .bh-strk { color: var(--bh-amber); }

/* ===== Temas visuales (data-theme en #bh-layer) ===== */
#bh-layer[data-theme="midnight"] { --bh-bg0: #060a16; --bh-bg1: #0b1226; --bh-amber: #6fb6ff; --bh-amber2: #2a7fff; --bh-line: rgba(111,182,255,.35); --bh-wood: #2a7fff; }
#bh-layer[data-theme="neon"] { --bh-bg0: #0a0612; --bh-bg1: #160a26; --bh-amber: #ff5fe6; --bh-amber2: #b32cff; --bh-teal: #2cffd6; --bh-line: rgba(255,95,230,.4); }
#bh-layer[data-theme="classic"] { --bh-bg0: #0f2233; --bh-bg1: #0a1622; --bh-amber: #6fe3ff; --bh-amber2: #1b8ad6; --bh-line: rgba(120,200,255,.35); }
#bh-layer[data-theme="light"] { --bh-bg0: #f1e7d6; --bh-bg1: #e7dcc7; --bh-ink: #2a1606; --bh-amber: #b9701a; --bh-amber2: #d6831e; --bh-line: rgba(120,80,30,.35); }
#bh-layer[data-theme="light"] .bh-panel, #bh-layer[data-theme="light"] .bh-screen { color: #2a1606; }
#bh-layer[data-theme="light"] .bh-row, #bh-layer[data-theme="light"] .bh-card { background: rgba(0,0,0,.05); }
#bh-layer[data-theme="contrast"] { --bh-bg0: #000; --bh-bg1: #000; --bh-ink: #fff; --bh-amber: #ffe600; --bh-amber2: #ffd000; --bh-line: rgba(255,230,0,.7); --bh-good: #00ff66; --bh-bad: #ff3b3b; }
#bh-layer[data-theme="contrast"] .bh-row, #bh-layer[data-theme="contrast"] .bh-card { border-color: rgba(255,230,0,.5); }

/* ===== Accesibilidad ===== */
#bh-layer.bh-reduce *, #bh-layer.bh-reduce { transition: none !important; animation: none !important; }
#bh-layer.bh-large { font-size: 118%; }
#bh-layer.bh-large .bh-hqlbl, #bh-layer.bh-large .bh-tab { font-size: 1.05em; }
#bh-layer.bh-cb { --bh-good: #2b7fff; --bh-bad: #ff8a00; --bh-amber: #ffd000; }
#bh-layer.bh-cb .bh-barfill.bh-bf-good { background: linear-gradient(90deg,#1a5fd0,#2b7fff); }
#bh-layer.bh-cb .bh-barfill.bh-bf-bad { background: linear-gradient(90deg,#c46a00,#ff8a00); }