/* ==========================================================================
   LORICA SMART CITY - ESTILOS BASE Y FAB (V27.1)
   Archivo: 00-base.css

   Cambios V27.1 (fase 2): escala única de capas (z-index), bloqueo de scroll
   y avisos del modal compartido (LORICA_NUEVO.UI.Modal).
   Cambios V27.2 (fase 3): estilos del recuadro de GPS común (UI.cajaGPS):
   colores de horario, rumbo diagonal, separadores, distancia y Reintentar.

   Cambios V27.0 (mismo diseño):
   - FIX modo horizontal recortado: la altura máxima usaba 85vh, que en celular
     mide la pantalla INCLUYENDO la barra del navegador, y no descontaba los
     53 px desde el borde ni el relleno del menú. La parte de arriba quedaba
     fuera de pantalla sin poder hacer scroll hasta ella. Ahora se usa el alto
     visible real (dvh), se descuentan las distancias y el menú hace scroll.
   - FIX celulares de 320 px: min-width 320px se salía por la derecha.
   - Respeta el notch en horizontal (safe-area).
   - La altura de cada fila ya no depende del line-height del tema.
   - Botón principal como <span role="button">.
   ========================================================================== */

/* 0. ESCALA DE CAPAS — única fuente para todos los módulos
   Los módulos aún no migrados usan valores sueltos entre 999900 y 9999999;
   Emergencias se ubica por encima de todos ellos a propósito: nunca debe
   quedar tapada. Al migrar cada módulo se pasará a --lorica-z-modal. */
:root {
    --lorica-z-fab: 9000;
    --lorica-z-modal: 10000;
    --lorica-z-emergencia: 10000000;
}

/* Bloqueo del scroll de la página mientras hay un modal abierto (también en iPhone) */
html.lorica-scroll-bloqueado,
html.lorica-scroll-bloqueado body {
    overflow: hidden !important;
}
html.lorica-scroll-bloqueado body {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

/* Aviso breve dentro de un modal (antes cada módulo tenía su propio "toast") */
.lorica-modal-aviso-ia {
    position: absolute !important;
    bottom: 90px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #1c1c1e !important;
    color: #fff !important;
    padding: 8px 14px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    max-width: 90% !important;
    text-align: center !important;
}
.lorica-modal-aviso-ia.visible { opacity: 1 !important; }

/* Recuadro de GPS común (UI.cajaGPS) — lo usan Ofertas y, al migrar,
   Comercios, Turismo, Puntos Smart y Transporte */
.lorica-h-abierto { color: #34C759 !important; }
.lorica-h-pronto  { color: #F39C12 !important; }
.lorica-h-cerrado { color: #FF3B30 !important; }
i.lorica-h-abierto, i.lorica-h-pronto, i.lorica-h-cerrado { font-size: 13px !important; }
.lorica-h-txt { font-weight: bold !important; margin-left: 4px !important; }
.lorica-sep { color: #D1D1D6 !important; margin: 0 4px !important; }
.lorica-barrio { color: #444 !important; }
.lorica-dist { color: #444 !important; font-weight: 900 !important; margin: 0 4px !important; }
.lorica-tiempo { margin-left: 4px !important; }
.lorica-rot-45 { display: inline-block !important; transform: rotate(45deg) !important; }
.lorica-reintentar { color: #0f2c59 !important; font-weight: 800 !important; text-decoration: underline !important; cursor: pointer !important; margin-left: 4px !important; }
.lorica-reintentar:focus-visible { outline: 2px solid #007AFF !important; outline-offset: 2px !important; }

/* 1. RESET BASE COMPARTIDO (lo usan los modales de los módulos) */
.l-overlay,
.l-tarjeta {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.l-tarjeta button,
.l-tarjeta a {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    text-decoration: none !important;
}

.l-overlay {
    touch-action: none !important;
}

/* NOTA: sin max-height/overflow en .l-tarjeta — cada modal maneja su scroll. */

/* 2. CONTENEDOR FAB */
.lorica-fab-container-ia {
    position: fixed;
    bottom: 53px;
    left: -1px;
    left: calc(-1px + env(safe-area-inset-left, 0px));
    z-index: 9000;
    z-index: var(--lorica-z-fab, 9000);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.lorica-fab-container-ia,
.lorica-fab-container-ia * {
    box-sizing: border-box;
}

/* 3. BOTÓN FLOTANTE PRINCIPAL */
.lorica-fab-dot-ia {
    background: transparent !important;
    border: none !important;
    width: 38px;
    height: 40px;
    min-height: 44px !important;
    min-width: 44px !important;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.lorica-fab-dot-ia i {
    font-size: 19px !important;
    color: rgba(122, 122, 122, 0.3) !important;
    transition: 0.3s ease;
}

.lorica-fab-container-ia.activo .lorica-fab-dot-ia i {
    color: #007AFF !important;
}

.lorica-fab-dot-ia.expandido {
    width: auto !important;
    padding: 0 44px 0 18px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

#textoBotonInteligenteIA {
    display: none;
}
.lorica-fab-dot-ia.expandido #textoBotonInteligenteIA {
    display: block;
    white-space: nowrap;
}

/* 4. MENÚ DESPLEGABLE (2 columnas) */
.lorica-fab-menu-ia {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 10px;
    position: absolute;
    bottom: 60px;
    left: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    background: rgba(255, 255, 255, 0.85);
    /* Sombra arriba/abajo SOLO cuando hay más ítems por ver con scroll */
    background:
        linear-gradient(rgba(255,255,255,0.95) 40%, rgba(255,255,255,0)) center top / 100% 24px no-repeat local,
        linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.95) 60%) center bottom / 100% 24px no-repeat local,
        radial-gradient(farthest-side at 50% 0, rgba(15,44,89,0.22), rgba(15,44,89,0)) center top / 100% 10px no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, rgba(15,44,89,0.22), rgba(15,44,89,0)) center bottom / 100% 10px no-repeat scroll,
        rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 15px 12px;

    /* Ancho: 340 px o lo que quepa (antes min-width 320 se salía en celulares de 320 px) */
    width: 340px;
    width: min(340px, calc(100vw - 12px));

    /* Alto: nunca más que el espacio visible sobre el botón (53 + 60 px) */
    max-height: calc(100vh - 125px);
    max-height: calc(100dvh - 125px - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.lorica-fab-container-ia.activo .lorica-fab-menu-ia {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
    .lorica-fab-menu-ia {
        transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        will-change: opacity, transform;
    }
    .lorica-fab-container-ia:not(.activo) .lorica-fab-menu-ia {
        will-change: auto;
    }
    /* Al abrir, visible de inmediato (si no, el foco por teclado no entra) */
    .lorica-fab-container-ia.activo .lorica-fab-menu-ia {
        transition-property: opacity, transform, visibility;
        transition-duration: 0.3s, 0.3s, 0s;
    }
}

/* 5. ÍTEMS DEL MENÚ */
.lorica-fab-item-ia {
    text-decoration: none !important;
    display: flex !important;
    align-items: center;
    margin: 0 !important;
    padding: 0;
    min-height: 32px;
    line-height: 1.2 !important;     /* independiente del tema: filas de alto estable */
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;   /* no 'all': heredaba la visibilidad y bloqueaba el foco */
    width: 100%;
    min-width: 0;
    touch-action: manipulation;
}

.lorica-fab-item-ia i {
    font-size: 16px !important;
    color: #0f2c59 !important;
    width: 35px;
    flex: 0 0 35px;
    text-align: center;
}

.lorica-fab-label-ia {
    font-size: 11px;
    font-weight: 800;
    color: #0f2c59;
    font-family: inherit;
    margin-left: 5px;
}

.lorica-fab-item-ia .lorica-fab-label-ia {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lorica-fab-item-ia:hover i,
.lorica-fab-item-ia:active i {
    color: #1DA1F2 !important;
}

/* 6. ACCESIBILIDAD - FOCO POR TECLADO */
.lorica-fab-dot-ia:focus-visible {
    outline: 2px solid #007AFF !important;
    outline-offset: 2px !important;
    border-radius: 6px !important;
}

.lorica-fab-item-ia:focus-visible {
    outline: 2px solid #007AFF !important;
    outline-offset: 1px !important;
    background: rgba(0, 122, 255, 0.08) !important;
    border-radius: 4px !important;
}

/* 7. MODO HORIZONTAL (LANDSCAPE EN MÓVIL) */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .lorica-fab-menu-ia {
        bottom: 0 !important;                          /* alineado con el botón */
        top: auto !important;
        left: 210px !important;                        /* al lado del botón expandido */
        transform: translateY(15px) !important;
        gap: 6px 15px !important;
        padding: 10px 12px !important;
        width: 340px !important;
        width: min(340px, calc(100vw - 222px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))) !important;

        /* Alto visible real menos los 53 px del contenedor y un margen */
        max-height: calc(100vh - 63px) !important;
        max-height: calc(100dvh - 63px - env(safe-area-inset-top, 0px)) !important;
        overflow-y: auto !important;
    }

    .lorica-fab-container-ia.activo .lorica-fab-menu-ia {
        transform: translateY(0) !important;
    }

    .lorica-fab-item-ia {
        min-height: 26px;   /* 8 filas caben en la mayoría de teléfonos en horizontal */
    }

    /* Oculta imágenes de módulos adicionales para que quepan en landscape */
    .c-img-wrap-ia,
    .t-img-wrap-ia,
    .ps-img-wrap-ia {
        display: none !important;
    }

    .c-content-scroll-ia,
    .t-content-scroll-ia,
    .ps-content-scroll-ia {
        max-height: 45vh !important;
    }
}