/* ================================================================
   Underwing — Estilos de "sensación nativa" (solo dentro de la app).
   Se activan únicamente cuando <html> tiene la clase .cap-native, que
   añade native_shell.js al detectar Capacitor. En el navegador web
   normal estas reglas no aplican a nada.
   ================================================================ */

/* Quita el "rebote" de goma al arrastrar y el resaltado gris al tocar,
   que es lo que hace que se sienta como un navegador. */
html.cap-native,
html.cap-native body {
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
}

/* ── Layout SOLO dentro de la app (iPad/iPhone) ──────────────────────
   La web pública no lleva la clase .cap-native, por lo que nada de esto
   la afecta. */

/* Onboarding / registro a PANTALLA COMPLETA. El modal ya va fullscreen
   en táctil, pero un tope de 560px lo dejaba como una columna pegada a
   la izquierda en tablet. Lo quitamos dentro de la app. */
html.cap-native .pm-modal .ob-dialog {
    max-width: none !important;
}
/* El contenido del asistente se centra en una columna cómoda dentro de
   la hoja a pantalla completa (evita que los controles se estiren). */
html.cap-native .ob-head,
html.cap-native .ob-body,
html.cap-native .ob-foot {
    max-width: 680px;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    box-sizing: border-box;
}

/* Pie de fuentes/licencias: redundante dentro de la app (ya está en
   Perfil → "Fuentes de datos y licencias" y Términos/Privacidad se
   aceptan en el registro). La atribución del mapa (Leaflet/Esri) es
   un elemento aparte y NO se toca. */
html.cap-native .page-foot {
    display: none !important;
}

/* ── Barra inferior Brief/Logbook: fina y pegada al borde (solo app) ──
   En tablet dejaba de estar pegada (pastilla flotante de 420px con
   bordes redondeados). La devolvemos a ancho completo, sin flotar, y
   más fina para robar menos altura. */
html.cap-native .app-nav {
    left: 0; right: 0; bottom: 0;
    max-width: none;
    margin: 0;
    border-radius: 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    padding-top: 2px;
    padding-bottom: calc(1px + env(safe-area-inset-bottom, 0px));
}
html.cap-native .app-nav-item {
    padding-top: 1px;
    padding-bottom: 1px;
    gap: 0;
}
html.cap-native .app-nav-item i { font-size: 19px; }
html.cap-native .app-nav-item .ann-l { font-size: 10px; line-height: 1.1; }
/* El contenido reserva menos hueco porque la barra es más baja. */
html.cap-native body.has-app-nav .main {
    padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── Fuera el "lienzo gris": zona de trabajo blanca a pantalla completa ──
   El fondo de página (gris frío) se iguala a la superficie de tarjeta, y
   se recorta el margen exterior de .main para aprovechar el ancho. Las
   tarjetas conservan su borde/sombra sutil, así siguen leyéndose. */
html.cap-native body { background: var(--bg-card) !important; }
html.cap-native .main {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 6px !important;
}

/* ── Plan de vuelo (tarjeta 1) COMPACTO en la app ────────────────────
   Reduce el ritmo vertical de la primera pantalla (pestañas, banner de
   ruta, campos y pie) para que quepa sin scroll. Acotado a .card-input
   dentro de la app: no afecta a otras tarjetas ni a la web. */
html.cap-native .main { gap: 10px; }
html.cap-native .card-input .card-head { padding: 5px 14px; }
html.cap-native .card-input .card-head h2 { font-size: .95rem; }
html.cap-native .card-input .tabs .tab { padding: 5px 12px; }
html.cap-native .card-input .route-hero { padding: 5px 12px; margin-bottom: 6px; }
html.cap-native .card-input .route-hero .rh-icao { font-size: 1rem; }
html.cap-native .card-input .grid-form { gap: 8px; }
html.cap-native .card-input .field { gap: 2px; }
html.cap-native .card-input .field input,
html.cap-native .card-input .field select,
html.cap-native .card-input textarea { padding: 7px 10px; }
html.cap-native .card-input .fpl-details-toggle { padding-top: 6px; padding-bottom: 6px; }
html.cap-native .card-input .card-foot { padding: 5px 14px; }
html.cap-native .card-input .card-foot .btn { padding-top: 7px !important; padding-bottom: 7px !important; }

/* ── Meteo: tarjetas compactas (solo app) ───────────────────────────
   Las tiles Viento/Visibilidad/Techo/Temp tenían min-height:132px y
   quedaban medio vacías. Las dejamos ajustadas al contenido. */
html.cap-native .mv-stat { min-height: 0 !important; padding: 6px 9px !important; gap: 1px !important; }
html.cap-native .mv-stat-val { font-size: 1.35rem !important; margin-top: 2px !important; }
html.cap-native .mv-stat-sub, html.cap-native .mv-stat-extra { margin-top: 1px !important; line-height: 1.25 !important; }
/* Al saltar a una sección del briefing, hueco para la barra superior fija. */
html.cap-native .brief-pane { scroll-margin-top: 74px; }
html.cap-native .mv-stats-col { gap: 6px !important; }

/* Texto redundante bajo las micro-cards de pista ("config. típica AIP",
   etc.): ya aparece en la etiqueta de la propia pista. Se oculta en la app. */
html.cap-native .mv-microcard-sub { display: none !important; }

/* ── Pie de acciones del briefing: sin Compartir/Imprimir y más fino (app) ── */
html.cap-native #btn-share,
html.cap-native #btn-print { display: none !important; }
html.cap-native #btn-refresh,
html.cap-native #btn-watch,
html.cap-native #btn-back {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
html.cap-native .card-foot:has(#btn-refresh) {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* ── Aeródromo: selector pegado arriba; "Procedimientos" flota en la esquina ── */
html.cap-native .brief-pane { position: relative; }
html.cap-native .aero-actions-bar {
    position: absolute;
    top: 0; right: 0;
    margin: 0 !important;
    z-index: 3;
}
html.cap-native .aero-selector-row {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ── Meteo: fuera la fila de tarjetas de aeródromo duplicada (ya está el
      selector de pastillas arriba). Solo en la app. ── */
html.cap-native .mv-ads-row { display: none !important; }


/* ── Logbook: barra de acciones FLOTANTE sobre los datos (solo app) ──
   Quita la "barra" (línea + franja) y deja Más/Importar/Exportar/+Vuelo
   flotando; la lista se ve por detrás. Los huecos entre botones dejan
   pasar el toque para poder desplazar la lista. */
html.cap-native #logbook-viewer-modal .pm-foot.lbv-foot {
    position: absolute;
    left: 0; right: 0; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
    padding: 8px 14px 0;
}
html.cap-native #logbook-viewer-modal .pm-foot.lbv-foot .lbv-more-wrap,
html.cap-native #logbook-viewer-modal .pm-foot.lbv-foot .lbv-fabs,
html.cap-native #logbook-viewer-modal .pm-foot.lbv-foot .lbv-fab {
    pointer-events: auto;
}
/* Hueco al final de la lista para que las últimas filas no queden tapadas. */
html.cap-native #logbook-viewer-modal #lbv-body {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Logbook abierto: fuera la barra blanca Brief/Logbook (redundante con el
   botón de arriba y la propia X del logbook) y sin franja reservada. */
html.cap-native body.lbv-open .app-nav { display: none !important; }
html.cap-native body.lbv-open .logbook-viewer-dialog { padding-bottom: 0 !important; }

/* ── Etiqueta de re-briefing: fina y por encima de la barra de pestañas ──
   (solo app). Antes quedaba tapada por la barra inferior y era muy alta. */
html.cap-native .watch-status {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    right: 10px;
    width: auto;
    max-width: calc(100vw - 20px);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
html.cap-native .watch-status-head {
    padding: 4px 8px 4px 10px;
    background: transparent;
    border-bottom: 0;
    gap: 6px;
}
html.cap-native .watch-status-title { font-size: .76rem; font-weight: 600; }
html.cap-native .watch-pulse { width: 7px; height: 7px; }
html.cap-native .watch-status-toggle,
html.cap-native .watch-status-close { width: 22px; height: 22px; font-size: .8rem; }
html.cap-native .watch-status-body { max-height: 40vh; }

/* ── Botón IA en el top bar (verde suave), sustituye al FAB flotante — app ── */
html.cap-native #ai-fab { display: none !important; }
html.cap-native .cap-ai-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 32px; padding: 0 12px;
    margin-left: 2px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    color: color-mix(in srgb, var(--accent) 82%, var(--text));
    font-family: var(--font-ui, system-ui, sans-serif);
    font-weight: 700; font-size: .72rem; letter-spacing: .06em; line-height: 1;
    cursor: pointer; flex: 0 0 auto;
    -webkit-appearance: none;
}
html.cap-native .cap-ai-btn:active { background: color-mix(in srgb, var(--accent) 20%, transparent); }
html.cap-native .cap-ai-btn[hidden] { display: none !important; }

/* ── Menú Perfil por ENCIMA de la barra inferior del briefing (solo app) ──
   La barra de apartados del brief (#brief-tabs, modo bottombar) va a
   z-index:900. La .topbar tiene z-index:100 y, con backdrop-filter, crea su
   propio contexto de apilamiento, así que el menú del perfil (hijo de la
   topbar) quedaba DETRÁS de esa barra y sus últimas opciones (contacto…) se
   ocultaban. Subimos la topbar por encima de la barra del brief (y por
   debajo de los modales, 9999). Además acotamos la altura del menú a la
   zona visible para que, con scroll, se llegue a todas las opciones. */
html.cap-native .topbar { z-index: 1000; }
html.cap-native .profile-menu {
    max-height: calc(100vh - 96px - env(safe-area-inset-bottom, 0px));
}

/* ── Mapa del logbook a pantalla completa por CSS (solo app) ──────────
   En iOS/WKWebView la Fullscreen API no funciona con <div> (solo <video>)
   y lanzaba "Fullscreen request aborted". Aquí el boton del mapa activa la
   clase .lbv-map-fs y lo hacemos ocupar todo el viewport con position:fixed. */
html.cap-native #lbv-map.lbv-map-fs {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 100000 !important;
}
/* Neutraliza cualquier transform de ancestros (romperia el position:fixed). */
html.cap-native body.lbv-mapfs-open .lbv3 { transform: none !important; animation: none !important; }


/* ═══════════════════════════════════════════════════════════════════
   iPhone (~6.1") — APAISADO (horizontal). Máximo aprovechamiento de la
   poca altura. Solo con html.cap-iphone (app nativa en iPhone; iPad y
   web NO la llevan). La clase la añade native_shell.js (iOS + lado menor
   de pantalla < 500 pt). iPad se queda EXACTAMENTE como estaba.
   ═══════════════════════════════════════════════════════════════════ */

/* — Pestañas del briefing: SOLO iconos (las etiquetas ya se conocen de
     iPad/web). Barra más fina => más altura para el contenido. */
html.cap-iphone .brief-seg-guide { display: none !important; }
html.cap-iphone #brief-tabs .brief-tab span[data-i18n] { display: none !important; }

/* — Topbar más fina (subtítulo fuera). */
html.cap-iphone .topbar { padding-top: max(env(safe-area-inset-top), 2px) !important; padding-bottom: 3px !important; min-height: 0 !important; }
html.cap-iphone .brand-sub, html.cap-iphone .topbar-sub, html.cap-iphone .brand-tagline { display: none !important; }

/* — Densidad general: recuperar altura útil. */
html.cap-iphone .tab-panel { padding: 8px 12px 10px !important; }
html.cap-iphone .card { margin-bottom: 8px !important; border-radius: 12px; }
html.cap-iphone .card-head { padding: 8px 12px !important; }
html.cap-iphone .briefing-sources { margin: 6px 0 !important; gap: 5px !important; }
/* al cambiar de pestaña el panel se lleva bajo la topbar: deja hueco. */
html.cap-iphone .brief-pane { scroll-margin-top: 48px; }

/* — MAPA DE RUTA a (casi) pantalla completa: el mapa ocupa el área útil
     y las subpestañas Ruta/Salida/Destino flotan sobre él como botones,
     para moverse sin salir del mapa. La barra de pestañas inferior sigue
     visible para cambiar de apartado. */
html.cap-iphone .brief-pane[data-bp="map"] { padding: 0 !important; }
html.cap-iphone .map-layout { display: block !important; height: auto !important; }
html.cap-iphone .map-main { position: relative !important; margin: 0 !important; }
html.cap-iphone #route-map {
    height: calc(100vh - 128px) !important;
    height: calc(100dvh - 128px) !important;   /* iOS: viewport dinámico */
    min-height: 0 !important; border-radius: 0 !important; border: 0 !important;
}
html.cap-iphone #map-sidebar { position: static !important; width: auto !important; }
html.cap-iphone #map-subtabs {
    position: absolute !important; top: 8px; left: 50%; transform: translateX(-50%);
    z-index: 600; display: flex !important; flex-direction: row !important; gap: 4px;
    background: var(--bg-card); border: 1px solid var(--line); border-radius: 11px;
    padding: 3px; box-shadow: 0 2px 10px rgba(0,0,0,.3); width: auto !important;
}
html.cap-iphone #map-subtabs .map-subtab { flex: 0 0 auto !important; padding: 6px 12px !important; white-space: nowrap; }
/* La info lateral del mapa se oculta en iPhone para maximizar el mapa
   (los detalles están en Aeródromo / NOTAMs). */
html.cap-iphone #map-sidebar-content { display: none !important; }

html.cap-iphone .route-map-expand { display: none !important; }