/* ================================================================
   Underwing — BRIEFING en iPhone
   Capa para teléfonos (puntero táctil). iPad y escritorio no entran.

   HORIZONTAL (altura <= 500 px): la forma lógica de aprovechar la
   pantalla. Barra de apartados como RAÍL lateral izquierdo (como las
   apps nativas en apaisado): el contenido usa TODA la altura.
     - Raíl: puntuación de riesgo arriba, apartados con su estado,
       progreso y Firmar abajo. Respeta la muesca (safe-area-left).
     - Topbar fina a la derecha del raíl, con lo esencial.
     - Paneles densos: tarjetas en 2-3 columnas donde caben.
   VERTICAL: ajustes de densidad y safe-area.
   Se carga después de styles.css, bottombar.css y native_shell.css.
   ================================================================ */

@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {

    :root { --ib-rail: calc(62px + env(safe-area-inset-left, 0px)); }

    /* ── Hueco del raíl a la izquierda; nada reservado abajo ───────── */
    body.acm-bottombar {
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        padding-left: var(--ib-rail) !important;
        padding-right: env(safe-area-inset-right, 0px) !important;
    }

    /* ── RAÍL de apartados ─────────────────────────────────────────── */
    body.acm-bottombar #brief-tabs.brief-tabs {
        top: 0 !important; bottom: 0 !important; left: 0 !important; right: auto !important;
        width: var(--ib-rail) !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        padding: calc(env(safe-area-inset-top, 0px) + 6px) 5px calc(env(safe-area-inset-bottom, 0px) + 6px) calc(env(safe-area-inset-left, 0px) + 5px) !important;
        border-top: 0 !important;
        border-right: .5px solid var(--line) !important;
        box-shadow: none !important;
        background: color-mix(in srgb, var(--bg-2) 94%, transparent) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-width: none;
        transform: none !important;
    }
    body.acm-bottombar #brief-tabs.brief-tabs::-webkit-scrollbar { display: none; }

    /* Puntuación de riesgo: solo el anillo, centrado */
    body.acm-bottombar #brief-tabs .brief-tabs-row-hero {
        width: 100% !important; justify-content: center !important;
        padding: 0 0 4px !important; margin: 0 0 2px !important;
        border-bottom: .5px solid var(--line-soft) !important;
    }
    body.acm-bottombar #brief-tabs .brief-tab-hero {
        width: 50px !important; height: 44px !important; min-width: 0 !important; min-height: 0 !important;
        padding: 0 !important; margin: 0 !important;
        border-radius: 12px !important;
        display: grid !important; place-items: center !important;
        background: transparent !important; border: 0 !important; box-shadow: none !important;
    }
    body.acm-bottombar #brief-tabs .brief-tab-hero > span[data-i18n],
    body.acm-bottombar #brief-tabs .brief-tab-hero .hero-gauge-ico { display: none !important; }
    body.acm-bottombar #brief-tabs .brief-tab-hero .acm-mini-gauge { width: 38px !important; height: 38px !important; margin: 0 !important; }
    body.acm-bottombar #brief-tabs .brief-tab-hero .acm-mini-gauge svg { width: 38px !important; height: 38px !important; }
    body.acm-bottombar #brief-tabs .brief-tab-hero.active {
        background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
    }

    /* (bottombar.css oculta los <span> por debajo de 720 px: recuperar
       el anillo de riesgo, los puntos de estado y los contadores) */
    body.acm-bottombar #brief-tabs .brief-tab-hero > .acm-mini-gauge { display: inline-block !important; position: relative; }
    body.acm-bottombar #brief-tabs .brief-tab > .tab-sev-dot { display: inline-flex !important; }
    body.acm-bottombar #brief-tabs .brief-tab > .tab-badge { display: inline-block !important; }

    /* Apartados en columna */
    body.acm-bottombar #brief-tabs .brief-seg-wrap {
        flex: 0 0 auto !important;
        width: 100% !important;
        margin: 0 !important; padding: 0 !important;
        border: 0 !important; background: transparent !important; box-shadow: none !important;
        overflow: visible !important;
    }
    body.acm-bottombar #brief-tabs .brief-seg-edge,
    body.acm-bottombar #brief-tabs .brief-indicator,
    body.acm-bottombar #brief-tabs .brief-seg-guide { display: none !important; }
    body.acm-bottombar #brief-tabs .brief-tabs-row-main {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
        width: 100% !important;
        padding: 0 !important; margin: 0 !important;
        overflow: visible !important;
        background: transparent !important; border: 0 !important;
    }
    body.acm-bottombar #brief-tabs .brief-tabs-row-main .brief-tab {
        position: relative !important;
        flex: 0 0 auto !important;
        width: 50px !important; height: 32px !important; min-width: 0 !important; min-height: 0 !important; max-height: none !important;
        padding: 0 !important; margin: 0 !important;
        border-radius: 10px !important;
        display: grid !important; place-items: center !important;
        border: 0 !important; box-shadow: none !important;
        background: transparent !important;
        color: var(--text-2) !important;
        -webkit-tap-highlight-color: transparent;
    }
    body.acm-bottombar #brief-tabs .brief-tabs-row-main .brief-tab.hidden { display: none !important; }
    body.acm-bottombar #brief-tabs .brief-tabs-row-main .brief-tab > svg { width: 21px !important; height: 21px !important; }
    body.acm-bottombar #brief-tabs .brief-tabs-row-main .brief-tab > span[data-i18n] { display: none !important; }
    body.acm-bottombar #brief-tabs .brief-tabs-row-main .brief-tab::after { display: none !important; }
    body.acm-bottombar #brief-tabs .brief-tabs-row-main .brief-tab.active {
        background: var(--accent) !important;
        color: #fff !important;
    }
    body.acm-bottombar #brief-tabs .brief-tabs-row-main .brief-tab.bt-reviewed:not(.active) {
        background: color-mix(in srgb, var(--accent) 13%, transparent) !important;
        color: color-mix(in srgb, var(--accent) 75%, var(--text)) !important;
    }
    /* Estado (punto/rombo) arriba-izquierda, contador arriba-derecha */
    body.acm-bottombar #brief-tabs .brief-tab .tab-sev-dot {
        position: absolute !important; top: 3px !important; left: 4px !important;
        margin: 0 !important; transform: scale(.85);
    }
    body.acm-bottombar #brief-tabs .brief-tab .tab-badge {
        position: absolute !important; top: 1px !important; right: 1px !important;
        min-width: 15px !important; height: 15px !important; padding: 0 4px !important;
        font: 700 9.5px/15px var(--font-ui) !important;
        border-radius: 8px !important; margin: 0 !important;
        box-shadow: 0 0 0 1.5px var(--bg-2);
    }

    /* Progreso + Firmar al pie del raíl */
    body.acm-bottombar #brief-tabs #bt-review-count {
        margin: auto 0 0 !important; padding-top: 6px;
        font: 600 10.5px var(--font-num, monospace) !important;
        color: var(--text-3) !important; text-align: center;
    }
    body.acm-bottombar #brief-tabs #bt-review-count.done { color: var(--accent) !important; }
    body.acm-bottombar #brief-tabs #bt-sign {
        flex: none !important;
        width: 50px !important; height: 34px !important;
        padding: 0 !important; margin: 2px 0 0 !important;
        border-radius: 11px !important;
        display: grid !important; place-items: center !important;
    }
    body.acm-bottombar #brief-tabs #bt-sign > span { display: none !important; }
    body.acm-bottombar #brief-tabs #bt-sign .ti { font-size: 19px !important; }

    /* ── Topbar fina (a la derecha del raíl) ───────────────────────── */
    html.cap-iphone .topbar, body.acm-bottombar .topbar {
        top: 0 !important;
        min-height: 0 !important;
        height: 42px;
        padding: env(safe-area-inset-top, 0px) 10px 0 12px !important;
        gap: 8px !important;
    }
    body.acm-bottombar .topbar .brand-sub,
    body.acm-bottombar .topbar .bh-label,
    body.acm-bottombar .topbar .oi-text,
    body.acm-bottombar .topbar .oi-meta { display: none !important; }
    body.acm-bottombar .topbar .brand-title { font-size: 17px !important; }
    body.acm-bottombar .topbar .brand-mark, body.acm-bottombar .topbar .brand svg { width: 26px !important; height: 26px !important; }
    body.acm-bottombar .topbar .brand-home-btn { height: 30px !important; width: 34px !important; padding: 0 !important; justify-content: center; }
    body.acm-bottombar .topbar .topbar-right { gap: 6px !important; }
    body.acm-bottombar .topbar .topbar-right > *,
    body.acm-bottombar .topbar .topbar-right > * > button { height: 32px !important; min-height: 0 !important; }
    body.acm-bottombar .topbar {
        background: color-mix(in srgb, var(--bg) 90%, transparent) !important;
        -webkit-backdrop-filter: blur(18px) saturate(1.6) !important; backdrop-filter: blur(18px) saturate(1.6) !important;
        border-bottom: .5px solid var(--line) !important;
    }
    body.acm-bottombar .topbar .topbar-right > button:not(.cap-ai-btn):not(.lang-toggle):not(.offline-indicator) { width: 34px !important; padding: 0 !important; }
    body.acm-bottombar .topbar .utc-clock { padding: 0 9px !important; font-size: 14px !important; display: inline-flex !important; align-items: center; }
    body.acm-bottombar .topbar .offline-indicator { padding: 0 9px !important; }
    body.acm-bottombar .topbar .lang-toggle { padding: 0 8px !important; }

    /* ── Contenido del briefing ────────────────────────────────────── */
    body.acm-bottombar .main { padding-top: 6px !important; }
    body.acm-bottombar .brief-pane { scroll-margin-top: 50px !important; }
    body.acm-bottombar #card-briefing { margin: 0 8px 10px !important; }

    /* Mapa: alto completo bajo la topbar */
    html.cap-iphone body.acm-bottombar #route-map {
        height: calc(100vh - 54px) !important;
        height: calc(100dvh - 54px) !important;
    }


    /* ── Menos "cajas dentro de cajas": la tarjeta exterior desaparece ─ */
    body.acm-bottombar #card-briefing.card {
        margin: 0 !important;
        border: 0 !important; border-radius: 0 !important;
        background: transparent !important; box-shadow: none !important;
        padding: 0 10px !important;
    }
    body.acm-bottombar #card-briefing > .card-head { padding: 6px 4px !important; min-height: 0 !important; border: 0 !important; background: transparent !important; }
    body.acm-bottombar #card-briefing .briefing-sources { margin: 0 0 6px !important; }
    body.acm-bottombar .brief-panes { padding: 0 !important; }
    body.acm-bottombar .brief-pane { padding: 6px 2px 8px !important; }
    body.acm-bottombar #card-briefing > .card-foot { padding: 8px 4px 4px !important; border-top: .5px solid var(--line-soft) !important; }
    body.acm-bottombar .diff-banner, body.acm-bottombar .personal-minima-banner { margin-left: 0 !important; margin-right: 0 !important; }

    /* ── RISK: indicador y veredicto lado a lado (ahorra media pantalla) ─ */
    body.acm-bottombar .risk-panel { padding: 0 !important; }
    body.acm-bottombar .risk-hero-v2 {
        display: grid !important;
        grid-template-columns: 210px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 22px; row-gap: 8px;
        align-items: center;
        padding: 14px 20px !important;
    }
    body.acm-bottombar .risk-hero-v2 > .risk-hero-gauge-wrap { grid-row: 1 / span 2; grid-column: 1; width: auto !important; margin: 0 !important; }
    body.acm-bottombar .risk-hero-v2 > .risk-hero-info { grid-column: 2; grid-row: 1; align-self: end; margin: 0 !important; }
    body.acm-bottombar .risk-hero-v2 > .risk-hero-route { grid-column: 2; grid-row: 2; align-self: start; margin: 0 !important; text-align: left !important; }
    body.acm-bottombar .risk-hero-v2 .rhr-route { justify-content: flex-start !important; text-align: left !important; font-size: 1.15rem !important; }
    body.acm-bottombar .risk-hero-v2 .rhr-meta { text-align: left !important; }
    body.acm-bottombar .risk-hero-v2 .risk-hero-desc { font-size: .95rem !important; line-height: 1.45; }
    /* "Los números de este vuelo": 6 casillas = 3 + 3 */
    body.acm-bottombar .rb-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
    body.acm-bottombar .rb-tile { min-height: 0 !important; padding: 10px 12px !important; }

    /* ── AVISOS (SIGMET/GAMET/AIRMET/PIREP) en dos columnas ────────── */
    body.acm-bottombar .reports-pane .adv-acc {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important; align-items: start;
    }
    body.acm-bottombar .reports-pane .adv-acc > * { margin: 0 !important; min-width: 0; }

    /* ── AERÓDROMO: selector y "Procedimientos" en la misma fila ───── */
    /* (el JS fija display:flex !important en línea: se coloca el botón
       en absoluto, a la derecha de la fila de aeródromos) */
    body.acm-bottombar .aero-panel { position: relative !important; gap: 8px !important; }
    body.acm-bottombar .aero-panel > .aero-selector-row { padding-right: 150px !important; min-height: 40px; }
    body.acm-bottombar .aero-panel > .aero-actions-bar {
        position: absolute !important; top: 0; right: 0; z-index: 2;
        padding: 0 !important; margin: 0 !important;
        background: none !important; border: 0 !important; box-shadow: none !important;
    }
    body.acm-bottombar .aero-panel > .aero-actions-bar .btn { height: 36px !important; min-height: 0 !important; }
    body.acm-bottombar .aero-selector-row .aero-selector-label { display: none !important; }
    body.acm-bottombar .aero-selector-row .mv-selector { overflow-x: auto; scrollbar-width: none; max-width: 100%; }

    /* ── TRÁFICO: radar y cifras lado a lado ───────────────────────── */
    body.acm-bottombar .traffic-panel {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 14px !important; align-items: start;
    }
    body.acm-bottombar .traffic-panel .traffic-radar-col { width: auto !important; margin: 0 !important; }
    body.acm-bottombar .traffic-panel .radar-wrap {
        width: min(300px, calc(100dvh - 120px)) !important;
        height: min(300px, calc(100dvh - 120px)) !important;
        margin: 0 auto !important;
    }
    body.acm-bottombar .traffic-panel .radar-wrap > * { width: 100% !important; height: 100% !important; }
    body.acm-bottombar .traffic-panel .radar-legend { flex-wrap: wrap; gap: 4px 10px !important; justify-content: center; }
    body.acm-bottombar .traffic-panel .traffic-stats-col { margin: 0 !important; min-width: 0; }

    /* ── MAPA: leyenda de NOTAMs compacta para no tapar el mapa ────── */
    body.acm-bottombar #route-map .leaflet-control { margin: 8px !important; }
    body.acm-bottombar #route-map .leaflet-control-layers,
    body.acm-bottombar #route-map .leaflet-bottom.leaflet-left .leaflet-control { transform: scale(.82); transform-origin: bottom left; }
    body.acm-bottombar #route-map .leaflet-top.leaflet-right .leaflet-control { transform: scale(.86); transform-origin: top right; }


    /* ── METEO: sin la cabecera de marca (el raíl ya dice dónde estás) ─ */
    body.acm-bottombar .meteo-v13 .mv-head-v2 { padding: 0 !important; margin: 0 0 6px !important; min-height: 0 !important; display: block !important; }
    body.acm-bottombar .meteo-v13 .mv-head-brand { display: none !important; }
    body.acm-bottombar .meteo-v13 .mv-head-right { width: 100% !important; overflow-x: auto; scrollbar-width: none; }
    body.acm-bottombar .meteo-v13 .mv-head-right * { white-space: nowrap !important; }
    body.acm-bottombar .meteo-v13 .mv-head-right > * { flex-wrap: nowrap !important; }
    body.acm-bottombar .meteo-v13 .mv-head-right::-webkit-scrollbar { display: none; }

    /* Avisos emergentes y el estado de re-briefing, fuera del raíl */
    html.cap-native body.acm-bottombar .watch-status { bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* iPhone SE / mini en horizontal: raíl más apretado para que quepa entero */
@media (orientation: landscape) and (max-height: 384px) and (pointer: coarse) {
    body.acm-bottombar #brief-tabs .brief-tabs-row-main .brief-tab { height: 29px !important; }
    body.acm-bottombar #brief-tabs .brief-tab-hero { height: 40px !important; }
    body.acm-bottombar #brief-tabs .brief-tab-hero .acm-mini-gauge,
    body.acm-bottombar #brief-tabs .brief-tab-hero .acm-mini-gauge svg { width: 34px !important; height: 34px !important; }
    body.acm-bottombar #brief-tabs #bt-review-count { padding-top: 2px; }
}

/* Cartas a pantalla completa en horizontal: no meterse bajo la muesca */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
    .charts-layout.charts-fs {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* ================================================================
   MUESCA: el raíl va al lado CONTRARIO a la muesca / Dynamic Island,
   metido DENTRO del margen que iOS reserva en ese lado (allí solo hay
   esquinas redondeadas) y que antes quedaba vacío. En el lado de la
   muesca solo queda su margen obligatorio, y la topbar se extiende por
   encima (la isla está a media altura, no arriba).
   Resultado: ~60-70 pt más de ancho útil para el contenido.
   native_shell.js pone html.ib-notch-left / html.ib-notch-right.
   ================================================================ */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
    html.ib-notch-left  { --ib-rail: max(56px, env(safe-area-inset-right, 0px)); --ib-notch: env(safe-area-inset-left, 0px); }
    html.ib-notch-right { --ib-rail: max(56px, env(safe-area-inset-left, 0px));  --ib-notch: env(safe-area-inset-right, 0px); }

    /* Raíl compacto (cabe entero con margen para las esquinas redondeadas) */
    html.ib-notch-left  body.acm-bottombar #brief-tabs.brief-tabs,
    html.ib-notch-right body.acm-bottombar #brief-tabs.brief-tabs {
        width: var(--ib-rail) !important;
        padding: 12px 3px 17px !important;   /* abajo algo más: esquina redondeada */
        gap: 1px !important;
    }
    html.ib-notch-left  body.acm-bottombar #brief-tabs .brief-tabs-row-main .brief-tab,
    html.ib-notch-right body.acm-bottombar #brief-tabs .brief-tabs-row-main .brief-tab { height: 29px !important; width: 48px !important; }
    html.ib-notch-left  body.acm-bottombar #brief-tabs .brief-tab-hero,
    html.ib-notch-right body.acm-bottombar #brief-tabs .brief-tab-hero { height: 40px !important; width: 48px !important; }
    html.ib-notch-left  body.acm-bottombar #brief-tabs .brief-tab-hero .acm-mini-gauge,
    html.ib-notch-left  body.acm-bottombar #brief-tabs .brief-tab-hero .acm-mini-gauge svg,
    html.ib-notch-right body.acm-bottombar #brief-tabs .brief-tab-hero .acm-mini-gauge,
    html.ib-notch-right body.acm-bottombar #brief-tabs .brief-tab-hero .acm-mini-gauge svg { width: 34px !important; height: 34px !important; }
    html.ib-notch-left  body.acm-bottombar #brief-tabs #bt-review-count,
    html.ib-notch-right body.acm-bottombar #brief-tabs #bt-review-count { padding-top: 2px !important; }
    html.ib-notch-left  body.acm-bottombar #brief-tabs #bt-sign,
    html.ib-notch-right body.acm-bottombar #brief-tabs #bt-sign { height: 30px !important; width: 42px !important; }

    /* Muesca a la IZQUIERDA → raíl a la DERECHA */
    html.ib-notch-left body.acm-bottombar {
        padding-left: var(--ib-notch) !important;
        padding-right: var(--ib-rail) !important;
    }
    html.ib-notch-left body.acm-bottombar #brief-tabs.brief-tabs {
        left: auto !important; right: 0 !important;
        border-right: 0 !important;
        border-left: .5px solid var(--line) !important;
    }
    html.ib-notch-left body.acm-bottombar .topbar {
        margin-left: calc(-1 * var(--ib-notch)) !important;
        padding-left: 20px !important;
    }

    /* Muesca a la DERECHA → raíl a la IZQUIERDA */
    html.ib-notch-right body.acm-bottombar {
        padding-left: var(--ib-rail) !important;
        padding-right: var(--ib-notch) !important;
    }
    html.ib-notch-right body.acm-bottombar #brief-tabs.brief-tabs {
        left: 0 !important; right: auto !important;
    }
    html.ib-notch-right body.acm-bottombar .topbar {
        margin-right: calc(-1 * var(--ib-notch)) !important;
        padding-right: 20px !important;
    }

    /* Un poco menos de margen lateral en el contenido */
    html.ib-notch-left body.acm-bottombar #card-briefing.card,
    html.ib-notch-right body.acm-bottombar #card-briefing.card { padding: 0 6px !important; }
}