/* ==========================================================================
   LORICA SMART CITY - SISTEMA DE EMERGENCIA (V27.2)
   Archivo: 01-emergencias-ia.css

   Cambios V27.2:
   - FIX aura roja pulsante: nunca se veía porque la tarjeta declaraba borde y
     sombra con !important (le gana a cualquier animación). Ahora el color del
     borde y la sombra van sin !important. Se mantiene prefers-reduced-motion.

   Cambios V27.1 (mismo diseño visual):
   - Botones como <span role="button">: los selectores ya no dependen de <button>.
   - Los 27 estilos en línea del JS pasaron a clases aquí. El modo horizontal ya
     no depende de encontrar textos exactos como style*="background:#F4F5F7".
   - Altura máxima con el alto VISIBLE real (dvh) también en vertical, con scroll
     interno: nunca se corta.
   - Horizontal en dos columnas (botones | aviso legal): todo cabe sin scroll en
     la mayoría de teléfonos.
   - Capas desde la escala común (--lorica-z-emergencia en 00-base.css).
   - Nuevos: estados Luz/SOS por clase, cuenta regresiva de la sacudida,
     indicador de GPS con error y Reintentar, atribución OSM.
   - Se conserva la protección para epilepsia (prefers-reduced-motion).
   ========================================================================== */

#lorica-overlay-emergencia-ia {
    position: fixed !important; inset: 0 !important;
    background: rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important;
    z-index: 10000000 !important;
    z-index: var(--lorica-z-emergencia, 10000000) !important;
}

#lorica-tarjeta-emergencia-ia {
    position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;
    width: 94% !important; max-width: 400px !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important; overscroll-behavior: contain !important;
    background: #fff !important; padding: 14px 16px !important; border-radius: 20px !important;
    /* Sin !important en color de borde y sombra: así el aura sí se anima */
    border-width: 1.5px !important; border-style: solid !important; border-color: #FF3B30;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    z-index: 10000005 !important;
    z-index: calc(var(--lorica-z-emergencia, 10000000) + 5) !important;
    box-sizing: border-box !important; font-family: inherit !important; outline: none !important;
    transition: border-color 0.3s ease;
}
#lorica-tarjeta-emergencia-ia *, #em-cuenta-ia * { box-sizing: border-box !important; }

#lorica-tarjeta-emergencia-ia [role="button"],
#lorica-tarjeta-emergencia-ia a,
#em-cuenta-ia [role="button"] {
    outline: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent !important;
    text-decoration: none !important; font-family: inherit !important; user-select: none !important; -webkit-user-select: none !important;
}
#lorica-tarjeta-emergencia-ia [role="button"]:focus-visible,
#em-cuenta-ia [role="button"]:focus-visible {
    outline: 2px solid #007AFF !important; outline-offset: 2px !important;
}

@keyframes auraEmergenciaIA {
    0%   { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 15px rgba(255, 59, 48, 0.4); border-color: #FF3B30; }
    50%  { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 30px rgba(255, 59, 48, 0.8); border-color: #FF6961; }
    100% { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 15px rgba(255, 59, 48, 0.4); border-color: #FF3B30; }
}
@keyframes fadeInEMIA { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* PROTECCIÓN MÉDICA: aura y animaciones solo si no se pidió reducir movimiento */
@media (prefers-reduced-motion: no-preference) {
    .em-borde-activo-ia { animation: auraEmergenciaIA 1.5s infinite; }
    .em-vista-ia { animation: fadeInEMIA 0.3s ease !important; }
}
@media (prefers-reduced-motion: reduce) {
    .em-borde-activo-ia {
        animation: none !important;
        border-color: #FF3B30 !important;
        box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 20px rgba(255, 59, 48, 0.5) !important;
    }
}

/* CABECERA (3 columnas) */
.em-header-ia { display: grid !important; grid-template-columns: 36px 1fr 36px !important; align-items: center !important; margin-bottom: 12px !important; padding-bottom: 6px !important; border-bottom: 1px solid #E5E5EA !important; }
.em-btn-close-ia, .em-btn-audio-ia { cursor: pointer !important; color: #6c6c70 !important; font-size: 18px !important; padding: 0 !important; transition: color 0.2s !important; background: transparent !important; border: none !important; width: 36px !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; }
.em-btn-close-ia:hover, .em-btn-audio-ia:hover { color: #0f2c59 !important; }
.em-btn-audio-ia.lorica-voz-activa { color: #007AFF !important; }

.em-dinamic-title-ia { color: var(--em-color, #FF3B30) !important; font-size: 14px !important; font-weight: 900 !important; letter-spacing: 0.5px !important; margin: 0 !important; padding: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 6px !important; text-transform: uppercase !important; text-align: center !important; line-height: 1.2 !important; }

/* SALUDO E INDICADOR DE GPS */
.em-saludo-ia { text-align: center !important; margin-bottom: 12px !important; }
.em-pregunta-ia { font-size: 14px !important; font-weight: 900 !important; color: #000 !important; margin-bottom: 6px !important; text-transform: uppercase !important; }
.em-gps-ia { font-size: 11px !important; font-weight: 600 !important; color: #8E8E93 !important; padding: 5px 10px !important; background: #F2F2F7 !important; border-radius: 10px !important; display: inline-block !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.em-gps-ia i { margin-right: 4px !important; }
.em-gps-ok-ia { color: #34C759 !important; }
.em-gps-ia.em-gps-error-ia { white-space: normal !important; color: #9A3412 !important; background: #FFF7ED !important; line-height: 1.4 !important; }
.em-gps-reintentar-ia { display: inline-block !important; margin-left: 4px !important; color: #0f2c59 !important; font-weight: 800 !important; text-decoration: underline !important; cursor: pointer !important; }
.em-osm-ia { font-size: 9px !important; color: #8E8E93 !important; margin-top: 3px !important; }
.em-osm-ia[hidden] { display: none !important; }
.em-osm-ia a { color: #8E8E93 !important; text-decoration: underline !important; }

/* ESTRUCTURAS GRID */
.em-grid-1-ia { display: grid !important; grid-template-columns: 1fr !important; gap: 6px !important; margin-bottom: 6px !important; width: 100% !important; }
.em-grid-2-ia { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; margin-bottom: 6px !important; width: 100% !important; }
.em-grid-final-ia { margin-bottom: 10px !important; }
.em-separado-ia { margin-top: 10px !important; }

/* BOTONES ESTANDARIZADOS */
.em-btn-l-ia { background: #F4F5F7 !important; color: #6c6c70 !important; padding: 10px 4px !important; border-radius: 8px !important; font-size: 11px !important; border: 1px solid #E5E5EA !important; cursor: pointer !important; font-weight: bold !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-transform: none !important; min-height: 44px !important; line-height: 1.2 !important; }
.em-btn-l-ia i { margin-right: 6px !important; font-size: 13px !important; }
.em-btn-l-ia:hover { opacity: 0.85 !important; }
.em-btn-l-ia:active { transform: scale(0.96) !important; opacity: 0.8 !important; }

/* Colores por función (antes en línea) */
.em-btn-l-ia.em-btn-123-ia       { background: #0f2c59 !important; color: #FFF !important; border: none !important; }
.em-btn-l-ia.em-btn-compartir-ia { background: #F39C12 !important; color: #FFF !important; border: none !important; }
.em-btn-l-ia.em-btn-contacto-ia  { background: var(--em-color, #0f2c59) !important; color: #FFF !important; border: none !important; }
.em-btn-l-ia.em-btn-whatsapp-ia  { background: #25D366 !important; color: #FFF !important; border: none !important; }
.em-cuerpo-contacto-ia .em-btn-l-ia { font-weight: 600 !important; }

/* Estados de Luz y SOS */
.em-btn-l-ia.em-luz-on { background: #FFD60A !important; color: #000 !important; }
.em-btn-l-ia.em-sos-on { background: #FF3B30 !important; color: #FFF !important; }

/* BOTÓN APPLE iOS */
.em-btn-ios-ia { background: #000 !important; color: #FFF !important; border: none !important; padding: 12px 4px !important; border-radius: 8px !important; font-size: 11px !important; cursor: pointer !important; font-weight: bold !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; transition: transform 0.3s ease, opacity 0.3s ease !important; margin-bottom: 10px !important; box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important; }
.em-btn-ios-ia i { margin-right: 6px !important; font-size: 14px !important; }
.em-btn-ios-ia:active { transform: scale(0.96) !important; opacity: 0.8 !important; }

/* BOTÓN VOLVER */
.em-btn-volver-ia { background: #F4F5F7 !important; color: #6c6c70 !important; text-transform: uppercase !important; font-weight: bold !important; letter-spacing: 0.5px !important; padding: 10px 4px !important; border-radius: 8px !important; font-size: 11px !important; border: 1px solid #E5E5EA !important; cursor: pointer !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease !important; min-height: 44px !important; }
.em-btn-volver-ia i { color: #8E8E93 !important; margin-right: 6px !important; font-size: 12px !important; }
.em-btn-volver-ia:hover { background: #0f2c59 !important; color: #fff !important; border-color: #0f2c59 !important; }
.em-btn-volver-ia:hover i { color: #fff !important; }
.em-btn-volver-ia:active { transform: scale(0.96) !important; opacity: 0.85 !important; }

/* AVISO LEGAL */
.em-legal-ia { background: #F4F5F7 !important; padding: 14px !important; border-radius: 12px !important; border: 1px solid #E5E5EA !important; margin-bottom: 10px !important; }
.em-cuerpo-contacto-ia .em-legal-ia { margin-bottom: 12px !important; }
.em-legal-texto-ia { text-align: justify !important; text-justify: inter-word !important; font-size: 10px !important; line-height: 1.4 !important; color: #444 !important; font-weight: 500 !important; }
.em-legal-texto-ia strong { color: #FF3B30 !important; font-weight: 900 !important; }
.em-legal-nota-ia { font-weight: 900 !important; color: #0f2c59 !important; font-size: 11px !important; text-align: center !important; text-transform: uppercase !important; margin-top: 8px !important; border-top: 1px dashed #D1D1D6 !important; padding-top: 8px !important; }

.em-cerrar-ia { text-align: center !important; color: #000000 !important; font-size: 11px !important; font-weight: 800 !important; cursor: pointer !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; display: block !important; width: 100% !important; padding-top: 8px !important; padding-bottom: 2px !important; margin-top: 10px !important; border: 0 !important; transition: color 0.3s ease !important; background: transparent !important; }
.em-cerrar-ia:hover { color: #FF3B30 !important; }

/* CUENTA REGRESIVA DE LA SACUDIDA */
.em-cuenta-ia {
    position: fixed !important; left: 50% !important; transform: translateX(-50%) !important;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(360px, calc(100vw - 24px)) !important;
    z-index: 10000008 !important;
    z-index: calc(var(--lorica-z-emergencia, 10000000) + 8) !important;
    background: #fff !important; border: 1.5px solid #FF3B30 !important; border-radius: 16px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.3) !important; padding: 14px !important;
    text-align: center !important; font-family: inherit !important;
}
.em-cuenta-titulo-ia { color: #FF3B30 !important; font-size: 13px !important; font-weight: 900 !important; text-transform: uppercase !important; margin-bottom: 4px !important; }
.em-cuenta-titulo-ia i { margin-right: 6px !important; }
.em-cuenta-texto-ia { font-size: 12px !important; color: #1c1c1e !important; margin-bottom: 10px !important; }
.em-cuenta-texto-ia strong { font-size: 16px !important; color: #FF3B30 !important; }
.em-cuenta-ia .em-grid-2-ia { margin-bottom: 0 !important; }
.em-btn-l-ia.em-btn-abrir-ia { background: #FF3B30 !important; color: #FFF !important; border: none !important; }


/* ==========================================================================
   MODO HORIZONTAL (LANDSCAPE EN MÓVIL)
   Dos columnas: acciones a la izquierda, aviso legal y cerrar a la derecha.
   ========================================================================== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    #lorica-tarjeta-emergencia-ia {
        max-width: 640px !important;
        width: calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
        max-height: calc(100vh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        padding: 10px 14px !important;
    }

    .em-header-ia { margin-bottom: 8px !important; padding-bottom: 4px !important; }

    .em-cuerpo-ia {
        display: grid !important;
        grid-template-columns: 1.25fr 1fr !important;
        grid-template-areas: "acciones info" !important;
        gap: 12px !important;
        align-items: start !important;
    }
    .em-col-acciones-ia { grid-area: acciones !important; }
    .em-col-info-ia { grid-area: info !important; }

    .em-saludo-ia { margin-bottom: 6px !important; }
    .em-pregunta-ia { margin-bottom: 4px !important; }

    .em-grid-1-ia, .em-grid-2-ia { gap: 4px !important; margin-bottom: 4px !important; }
    .em-grid-final-ia { margin-bottom: 0 !important; }
    .em-separado-ia { margin-top: 6px !important; }

    .em-btn-l-ia, .em-btn-volver-ia { min-height: 36px !important; padding: 8px 4px !important; }
    .em-btn-ios-ia { padding: 9px 4px !important; margin-bottom: 6px !important; }

    .em-legal-ia, .em-cuerpo-contacto-ia .em-legal-ia { padding: 8px 10px !important; margin-bottom: 0 !important; }
    .em-cerrar-ia { padding-top: 6px !important; margin-top: 6px !important; }

    #lorica-tarjeta-emergencia-ia .lorica-modal-aviso-ia { bottom: 16px !important; }
}

/* Horizontal intermedio (501-700 px de alto): solo ensanchar */
@media screen and (min-height: 501px) and (max-height: 700px) and (orientation: landscape) {
    #lorica-tarjeta-emergencia-ia { max-width: 500px !important; }
}