/* ================================================================
   Underwing · iphone_form.css — pantalla "Brief" (formulario del plan)
   como pantalla de APP FIJA en iPhone, no como una web que se desplaza.

   Solo con html.cap-iphone.ibf-form (native_shell.js la pone mientras
   se ve el formulario: sin briefing abierto, sin logbook ni mapa).
     · La página NO se desplaza ni rebota: barra superior, formulario y
       barra inferior quedan fijos.
     · El formulario ocupa el hueco entre ambas barras; si algo no cabe
       (p. ej. "Detalles del plan" abierto) se desplaza SOLO esa zona.
     · "Solicitar briefing" y las acciones van en un dock fijo encima de
       la barra inferior, siempre al alcance del pulgar.
   iPad, web y la vista del briefing no cambian.
   ================================================================ */

/* ── Página bloqueada: nada de scroll ni rebote de la web ── */
html.cap-iphone.ibf-form,
html.cap-iphone.ibf-form body {
    height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
}
html.cap-iphone.ibf-form body { position: fixed; inset: 0; width: 100%; }

/* ── Barra superior: sin lo que ya está en la barra inferior ── */
html.cap-iphone.ibf-form #topbar-logbook { display: none !important; }
html.cap-iphone.ibf-form .topbar-right { gap: 6px !important; }
html.cap-iphone.ibf-form .offline-indicator .oi-text,
html.cap-iphone.ibf-form .offline-indicator .oi-meta { display: none !important; }
html.cap-iphone.ibf-form .offline-indicator { padding: 6px !important; }
html.cap-iphone.ibf-form .lang-toggle .lang-current { display: none !important; }
html.cap-iphone.ibf-form .lang-toggle { padding-left: 8px !important; padding-right: 8px !important; }

/* ── El formulario: una pantalla entre las dos barras ── */
html.cap-iphone.ibf-form #card-input {
    position: fixed !important;
    left: 0; right: 0;
    top: var(--ibf-top, 64px);
    bottom: var(--ibf-nav, 56px);
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--bg-card, var(--bg-2)) !important;
    display: flex !important;
    flex-direction: column;
    z-index: 5;
    animation: none !important;
    transform: none !important;
}

/* Cabecera: solo el selector Manual · Pegar FPL · Foto, a todo el ancho */
html.cap-iphone.ibf-form #card-input-head {
    flex: none;
    display: block !important;
    padding: 10px 14px 6px !important;
    border: 0 !important;
}
html.cap-iphone.ibf-form #card-input-head .card-head-left,
html.cap-iphone.ibf-form #card-head-logbook,
html.cap-iphone.ibf-form #card-input-toggle { display: none !important; }
html.cap-iphone.ibf-form #card-input-head .tabs {
    display: flex !important;
    width: 100%;
    box-sizing: border-box;
}
html.cap-iphone.ibf-form #card-input-head .tabs .tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 4px !important;
    font-size: 13px !important;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
}

/* Zona central: la única que se desplaza (y sin arrastrar la página) */
html.cap-iphone.ibf-form #card-input > .tab-panel.active {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 6px 14px 14px !important;
}
html.cap-iphone.ibf-form #card-input > .tab-panel:not(.active) { display: none !important; }

/* Ruta DEP → DEST: tarjeta compacta */
html.cap-iphone.ibf-form #route-hero { margin: 2px 0 12px !important; padding: 10px 14px !important; }

/* Esenciales en rejilla 2 × 2: Salida | Destino · Fecha | FL */
html.cap-iphone.ibf-form .fpl-essential {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 10px !important;
}
html.cap-iphone.ibf-form .fpl-essential .field { min-width: 0; }
html.cap-iphone.ibf-form .fpl-essential .field-label {
    font-size: 11px !important;
    letter-spacing: .06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.cap-iphone.ibf-form .fpl-essential input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 17px !important;            /* >= 16 px: iOS no hace zoom al enfocar */
    padding: 10px 12px !important;
}
html.cap-iphone.ibf-form .fpl-essential input[type="date"] { font-size: 16px !important; padding: 9px 10px !important; }
html.cap-iphone.ibf-form .fpl-details { margin-top: 12px !important; }
html.cap-iphone.ibf-form .fpl-details-body input,
html.cap-iphone.ibf-form .fpl-details-body select { font-size: 16px !important; }

/* ── Dock de acciones fijo, encima de la barra inferior ── */
html.cap-iphone.ibf-form #card-input > .card-foot {
    flex: none;
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px 4px !important;
    padding: 10px 14px 8px !important;
    border-top: .5px solid var(--line) !important;
    background: var(--bg-card, var(--bg-2)) !important;
}
html.cap-iphone.ibf-form #btn-briefing {
    flex: 1 0 100%;
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 16px !important;
    border-radius: 12px !important;
}
/* Secundarias: icono + etiqueta corta, en una sola fila */
html.cap-iphone.ibf-form #btn-clear,
html.cap-iphone.ibf-form #btn-program,
html.cap-iphone.ibf-form #btn-favs,
html.cap-iphone.ibf-form #btn-recent-briefs {
    display: flex !important;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 44px;
    padding: 4px 2px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: none !important;
    color: var(--text-2) !important;
    font-size: 11px !important;
    line-height: 1.1;
    text-align: center;
    box-shadow: none !important;
}
html.cap-iphone.ibf-form #btn-clear i,
html.cap-iphone.ibf-form #btn-program i,
html.cap-iphone.ibf-form #btn-favs i,
html.cap-iphone.ibf-form #btn-recent-briefs i { font-size: 20px !important; margin: 0 !important; }
html.cap-iphone.ibf-form #btn-clear span,
html.cap-iphone.ibf-form #btn-program span,
html.cap-iphone.ibf-form #btn-favs .favs-btn-label,
html.cap-iphone.ibf-form #btn-recent-briefs span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html.cap-iphone.ibf-form #btn-favs[hidden],
html.cap-iphone.ibf-form #btn-recent-briefs[hidden] { display: none !important; }
/* El grupo de favoritas se "deshace" para que sus botones entren en la rejilla */
html.cap-iphone.ibf-form #card-input .favs-group { display: contents !important; }
html.cap-iphone.ibf-form #rh-fav {
    flex: 0 0 44px;
    min-height: 44px;
    border: 0 !important;
    background: none !important;
    font-size: 22px !important;
    color: var(--text-2);
    padding: 0 !important;
}
html.cap-iphone.ibf-form #btn-favs .favs-pop { bottom: calc(100% + 8px); top: auto !important; right: 0; left: auto; }
html.cap-iphone.ibf-form #route-hint { display: none !important; }
html.cap-iphone.ibf-form #sched-status:empty { display: none !important; }
html.cap-iphone.ibf-form #sched-status { flex: 1 0 100%; order: 10; text-align: center; font-size: 12px !important; }

/* La barra inferior queda fija y visible encima de todo */
html.cap-iphone.ibf-form .app-nav { z-index: 60; }

/* ── iPhone en horizontal: poca altura → cabecera y dock más finos ── */
@media (orientation: landscape) {
    html.cap-iphone.ibf-form #card-input-head { padding: 6px 14px 4px !important; }
    html.cap-iphone.ibf-form #card-input-head .tabs .tab { padding: 5px 4px !important; }
    html.cap-iphone.ibf-form #card-input > .tab-panel.active { padding: 4px 14px 10px !important; }
    html.cap-iphone.ibf-form #route-hero { display: none !important; }
    html.cap-iphone.ibf-form .fpl-essential { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    html.cap-iphone.ibf-form #card-input {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
    html.cap-iphone.ibf-form #card-input > .card-foot { flex-wrap: nowrap; align-items: center; padding: 6px 14px 6px !important; }
    html.cap-iphone.ibf-form #btn-briefing { flex: 2 0 0; width: auto; min-height: 42px; }
}

/* Etiquetas cortas en el selector (el texto completo sigue para VoiceOver) */
html.cap-iphone.ibf-form #card-input-head .tab[data-tab="paste"],
html.cap-iphone.ibf-form #card-input-head .tab[data-tab="upload"] { font-size: 0 !important; }
html.cap-iphone.ibf-form #card-input-head .tab[data-tab="paste"]::after,
html.cap-iphone.ibf-form #card-input-head .tab[data-tab="upload"]::after { font-size: 13px; }
html.cap-iphone.ibf-form #card-input-head .tab[data-tab="paste"]::after { content: "Pegar FPL"; }
html.cap-iphone.ibf-form #card-input-head .tab[data-tab="upload"]::after { content: "Foto o PDF"; }
html[lang="en"].cap-iphone.ibf-form #card-input-head .tab[data-tab="paste"]::after { content: "Paste FPL"; }
html[lang="en"].cap-iphone.ibf-form #card-input-head .tab[data-tab="upload"]::after { content: "Photo or PDF"; }

/* "Detalles del plan" abiertos: también en dos columnas (la ruta, a todo el ancho) */
html.cap-iphone.ibf-form .fpl-details-body:not(.hidden) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 10px;
}
html.cap-iphone.ibf-form .fpl-details-body .field { min-width: 0; }
html.cap-iphone.ibf-form .fpl-details-body .field-wide { grid-column: 1 / -1; }
html.cap-iphone.ibf-form .fpl-details-body input,
html.cap-iphone.ibf-form .fpl-details-body select { width: 100%; min-width: 0; box-sizing: border-box; }
@media (orientation: landscape) {
    html.cap-iphone.ibf-form .fpl-details-body:not(.hidden) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ═════════════════ Ajustes vistos en iPhone real ═════════════════ */

/* Fecha: en iOS el <input type="date"> tiene un ancho mínimo propio y se
   salía de su casilla, montándose sobre "FL crucero". Se anula ese ancho,
   se alinea a la izquierda y todas las casillas esenciales miden lo mismo. */
html.ibf-form .fpl-essential .field { overflow: hidden; }
html.ibf-form .fpl-essential input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    min-width: 0 !important;
    max-width: 100%;
    text-align: left;
}
html.ibf-form .fpl-essential input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
html.ibf-form .fpl-essential input[type="date"]::-webkit-calendar-picker-indicator { margin: 0; }
html.cap-iphone.ibf-form .fpl-essential input { height: 48px; line-height: normal; }
html.cap-native:not(.cap-iphone).ibf-form .fpl-essential input { height: 54px; line-height: normal; }

/* Dock del iPhone: etiquetas cortas para que ninguna se corte con "…" */
html.cap-iphone.ibf-form #btn-program span,
html.cap-iphone.ibf-form #btn-favs .favs-btn-label { font-size: 0 !important; }
html.cap-iphone.ibf-form #btn-program span::after,
html.cap-iphone.ibf-form #btn-favs .favs-btn-label::after { font-size: 11px; }
html.cap-iphone.ibf-form #btn-program span::after { content: "Programar"; }
html.cap-iphone.ibf-form #btn-favs .favs-btn-label::after { content: "Favoritos"; }
html[lang="en"].cap-iphone.ibf-form #btn-program span::after { content: "Schedule"; }
html[lang="en"].cap-iphone.ibf-form #btn-favs .favs-btn-label::after { content: "Favorites"; }
html.cap-iphone.ibf-form #btn-favs > .ti { color: #e8b10c; }
html.cap-iphone.ibf-form #btn-recent-briefs { font-weight: 400 !important; font-family: inherit !important; color: var(--text-2) !important; }