/* IntelFront / Capacitor 1.2.0
 * La superficie llega a los bordes; solo los controles respetan las áreas seguras.
 * El contenedor reserva área segura + 12px antes del iframe. El navegador de escritorio no se modifica.
 */
html.intelfront-native {
    --intel-safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
    --intel-safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
    --intel-safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
    --intel-safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
    --intel-tab-height: 52px;
    --intel-content-gap: 12px;
    background: #0b1220;
    color-scheme: light;
}
html.intelfront-native,
html.intelfront-native body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none;
}
html.intelfront-native body {
    background: #0b1220 !important;
}
html.intelfront-native #root {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--pwa-app-width, 100%) !important;
    height: var(--pwa-app-height, 100dvh) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #0b1220;
}
html.intelfront-native.pwa-shell #content.content {
    position: absolute !important;
    inset: calc(var(--intel-safe-top) + var(--intel-content-gap)) var(--intel-safe-right) calc(var(--intel-tab-height) + var(--intel-safe-bottom)) var(--intel-safe-left) !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}
html.intelfront-native #contenido_todo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Fondo continuo oscuro detrás de la hora. El iframe comienza en el área segura. */
html.intelfront-native.pwa-shell body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--intel-safe-top) + var(--intel-content-gap));
    background: #0b1220;
    pointer-events: none;
    z-index: 100;
}
html.intelfront-native .pwa-bottom-nav {
    position: absolute !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(var(--intel-tab-height) + var(--intel-safe-bottom)) !important;
    min-height: 0 !important;
    box-sizing: border-box;
    padding: 1px max(6px, var(--intel-safe-right)) var(--intel-safe-bottom) max(6px, var(--intel-safe-left)) !important;
    background: #0b1220 !important;
    border-top: 1px solid #263245 !important;
}
html.intelfront-native .pwa-bottom-nav__item {
    min-height: 48px !important;
    height: 100%;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    color: #b6c2d2;
}
html.intelfront-native .pwa-bottom-nav__item.is-active {
    color: #f1f5f9;
    background: #172d4a;
}
html.intelfront-native #mainnav-container {
    position: absolute !important;
    top: 0 !important;
    bottom: calc(var(--intel-tab-height) + var(--intel-safe-bottom)) !important;
}
html.intelfront-native #mainnav-container .mainnav__inner {
    box-sizing: border-box;
    padding-top: var(--intel-safe-top) !important;
    padding-left: var(--intel-safe-left) !important;
}
/* El drawer anterior tenía descendientes con pointer-events: auto incluso cerrado.
 * visibility + inert impiden que intercepte toques fuera de su estado abierto. */
html.pwa-mobile #mainnav-container {
    visibility: hidden !important;
}
html.pwa-mobile.pwa-menu-open #mainnav-container {
    visibility: visible !important;
}
html.pwa-mobile #mainnav-container .mainnav__inner {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
}
html.pwa-mobile #mainnav-container .mainnav__top-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
html.pwa-mobile #mainnav-container .mainnav__bottom-content {
    flex: 0 0 auto;
}
html.pwa-mobile #root.mn--min #mainnav-container .mininav-content.show {
    display: block !important;
}
/* El login sí debe poder desplazarse al abrir el teclado, sobre todo en horizontal. */
html.intelfront-native #root.front-container #content {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
html.intelfront-native #root.front-container .content__boxed {
    box-sizing: border-box;
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: max(18px, var(--intel-safe-top)) max(16px, var(--intel-safe-right)) max(18px, var(--intel-safe-bottom)) max(16px, var(--intel-safe-left)) !important;
    background: #0b1220;
}
html.intelfront-native #root.front-container .content__wrap {
    flex: 0 0 auto;
    width: min(100%, 430px);
    margin-top: auto;
    margin-bottom: auto;
}
.intel-native-offline[hidden] { display: none !important; }
html.intelfront-native .intel-native-offline {
    position: fixed;
    top: calc(var(--intel-safe-top) + 8px);
    left: max(12px, var(--intel-safe-left));
    right: max(12px, var(--intel-safe-right));
    z-index: 1250;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 580px;
    margin: 0 auto;
    padding: 12px;
    border: 1px solid #7b652b;
    border-radius: 12px;
    color: #fff6d7;
    background: #392f1b;
    font: 500 13px/1.4 system-ui, sans-serif;
}
html.intelfront-native .intel-native-offline button {
    padding: 8px 10px;
    border: 1px solid #ac9660;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
@media (orientation: landscape) and (max-height: 600px) {
    html.intelfront-native { --intel-tab-height: 50px; --intel-content-gap: 8px; }
}