/* ============================================================================
 * bottombar.css — Barra de apartados anclada al PIE (fija, siempre visible).
 *
 * Una sola fila:  [Risk Briefing + score]  [Meteo NOTAMs AD Mapa Viento ...]
 *
 * Todas las reglas cuelgan de body.acm-bottombar, clase que pone bottombar.js.
 * ACTIVA POR DEFECTO. Interruptor de emergencia: ?bottombar=0 la apaga en ese
 * navegador (y ?bottombar=1 la reactiva) sin necesidad de redesplegar.
 * ========================================================================== */

body.acm-bottombar {
    /* Altura de la barra, medida en runtime por bottombar.js. */
    --acm-bar-h: 76px;
    /* El contenido no puede quedar debajo de la barra: reservamos su hueco
       + la safe-area del iPhone (barra de gestos). */
    padding-bottom: calc(var(--acm-bar-h) + env(safe-area-inset-bottom, 0px) + 8px);
}

/* ---- La barra: de sticky-arriba a fixed-abajo, y de 2 filas a 1 ---- */
body.acm-bottombar #brief-tabs.brief-tabs {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;                 /* por debajo de modales (9999) */

    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));

    background: color-mix(in srgb, var(--bg-2) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-top: 1px solid var(--line);
    border-bottom: 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .28);

    overflow: visible;
    transition: transform .18s ease;
}

/* Navegadores sin color-mix: fondo sólido de respaldo. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    body.acm-bottombar #brief-tabs.brief-tabs { background: var(--bg-2); }
}

/* ---- Risk Briefing: anclado a la IZQUIERDA, sin ocupar fila propia ---- */
body.acm-bottombar #brief-tabs .brief-tabs-row-hero {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    margin: 0;
    border-bottom: 0;             /* ya no separa dos filas */
    overflow: visible;
    justify-content: flex-start;
}

/* La guía "desliza o toca para cambiar" no cabe en una sola fila. */
body.acm-bottombar #brief-tabs .brief-seg-guide { display: none; }

/* ---- Cápsula de apartados: ocupa TODO el ancho restante ---- */
body.acm-bottombar #brief-tabs .brief-seg-wrap {
    flex: 1 1 auto;
    min-width: 0;                 /* imprescindible: si no, desborda el flex */
    width: auto;
    max-width: none;
    margin: 0;
}
body.acm-bottombar #brief-tabs .brief-tabs-row-main {
    justify-content: stretch;
    max-width: none;
    width: 100%;
    margin: 0;
}
/* Los 7 apartados se reparten el ancho a partes iguales. */
body.acm-bottombar #brief-tabs .brief-tabs-row-main .brief-tab {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding-left: 6px;
    padding-right: 6px;
}
/* Con poco ancho, el texto largo (SIGMET / PIREP) no debe romper la fila. */
body.acm-bottombar #brief-tabs .brief-tabs-row-main .brief-tab > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* El degradado/chevron de "hay más deslizando" sobra: ya cabe todo. */
body.acm-bottombar #brief-tabs .brief-seg-edge { display: none; }

/* ============================================================
   Risk Briefing con el MISMO lenguaje visual que los apartados
   (misma cápsula, mismo radio, mismo activo relleno), pero más
   ancho y con un mini-gauge que muestra el score real.
   ============================================================ */
body.acm-bottombar #brief-tabs .brief-tab-hero {
    flex: 0 0 auto;
    min-width: 168px;
    justify-content: flex-start;
    gap: 9px;
    margin: 0;
    padding: 4px 16px 4px 5px;
    font-size: .86rem;
    font-weight: 500;
    letter-spacing: 0;

    /* misma cápsula que .brief-tabs-row-main */
    border-radius: 13px;
    border: 1px solid var(--line);
    background: var(--bg-3);
    color: var(--text-2);
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
body.acm-bottombar #brief-tabs .brief-tab-hero:hover {
    background: color-mix(in srgb, var(--text) 7%, var(--bg-3));
    border-color: var(--line);
    color: var(--text);
    transform: none;
}
/* Activo: relleno, igual que la pastilla del segmentado. */
body.acm-bottombar #brief-tabs .brief-tab-hero.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
/* El arco decorativo original sobra: lo sustituye el mini-gauge real. */
body.acm-bottombar #brief-tabs .brief-tab-hero > svg.hero-gauge-ico { display: none; }

/* ---- Mini-gauge de riesgo (lo inyecta bottombar.js) ---- */
body.acm-bottombar .acm-mini-gauge {
    position: relative;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: inline-flex;
}
body.acm-bottombar .acm-mini-gauge svg {
    width: 30px;
    height: 30px;
    transform: rotate(-90deg);    /* empieza a las 12 en punto */
}
body.acm-bottombar .acm-mg-track { stroke: color-mix(in srgb, var(--text) 16%, transparent); }
body.acm-bottombar .acm-mg-arc   { transition: stroke-dashoffset .6s cubic-bezier(.32,.72,0,1), stroke .3s ease; }
body.acm-bottombar .acm-mg-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 10.5px var(--font-num, var(--font-ui, system-ui));
    color: var(--text);
    letter-spacing: -.02em;
}
/* Sobre el relleno del activo, el número y la pista deben verse. */
body.acm-bottombar #brief-tabs .brief-tab-hero.active .acm-mg-num  { color: #fff; }
body.acm-bottombar #brief-tabs .brief-tab-hero.active .acm-mg-track { stroke: rgba(255, 255, 255, .28); }

/* En pantallas estrechas el móvil no da para 168px + 7 apartados:
   el Risk encoge a solo el gauge y el texto desaparece. */
@media (max-width: 720px) {
    body.acm-bottombar #brief-tabs .brief-tab-hero {
        min-width: 0;
        padding: 4px 6px;
    }
    body.acm-bottombar #brief-tabs .brief-tab-hero > span { display: none; }
    body.acm-bottombar #brief-tabs .brief-tabs-row-main .brief-tab > span { display: none; }
}

/* ---- El FAB del copiloto no puede quedar tapado por la barra ---- */
body.acm-bottombar .ai-fab {
    bottom: calc(var(--acm-bar-h) + env(safe-area-inset-bottom, 0px) + 14px);
}

/* ---- Teclado abierto en móvil: la barra fija estorba y algunos
        navegadores la empujan mal. La escondemos mientras se escribe. ---- */
body.acm-bottombar.acm-kbd #brief-tabs.brief-tabs {
    transform: translateY(110%);
}

/* ---- Al imprimir, la barra no debe salir flotando ---- */
@media print {
    body.acm-bottombar { padding-bottom: 0; }
    body.acm-bottombar #brief-tabs.brief-tabs { display: none; }
}

/* ---- Interruptor de preview (solo visible con el flag) ---- */
.acm-bb-toggle {
    position: fixed;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 950;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg-3);
    color: var(--text-2);
    font: 600 .72rem var(--font-ui, system-ui, sans-serif);
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.acm-bb-toggle:hover { color: var(--text); border-color: var(--line-strong, var(--line)); }
.acm-bb-toggle b { color: var(--accent); font-weight: 700; }