/* ==========================================================================
   LORICA SMART CITY - CATÁLOGO DE OFERTAS (V27.2)
   Archivo: 02-ofertas-ia.css

   Cambios V27.2 (mismo diseño):
   - FIX animaciones: el brillo rosado, el brillo dorado VIP y la vibración VIP
     nunca se veían porque la tarjeta declaraba borde, sombra y transform con
     !important (le gana a cualquier animación). Ahora el color del borde y la
     sombra no llevan !important, y la vibración anima la propiedad `translate`
     (independiente del transform que centra la tarjeta). Brillo VIP y
     vibración corren juntos (antes una clase reemplazaba a la otra).
   - Vibración VIP suave (6 px) en todas las orientaciones.
   - Botones como <span role="button">; estilos que estaban en línea en el JS
     pasaron a clases (mensajes, cargando, condiciones, etiqueta de filtro).
   - Altura con el alto visible real (dvh): nunca se corta.
   - Capas desde la escala común (--lorica-z-modal).
   - Recuadro de GPS: estructura común (UI.cajaGPS); colores en 00-base.css.
   - Se mantiene prefers-reduced-motion.
   ========================================================================== */

#of-overlay-ofertas-ia {
    position: fixed !important; inset: 0 !important;
    background: rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
    z-index: 10000 !important;
    z-index: var(--lorica-z-modal, 10000) !important;
}

/* ESTRUCTURA TARJETA FLEXBOX */
#of-tarjeta-ofertas-ia {
    position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;
    width: 94% !important; max-width: 400px !important;
    background: #fff !important; padding: 14px 16px !important; border-radius: 20px !important;
    /* Sin !important en color de borde y sombra: así las animaciones sí se ven */
    border-width: 1.5px !important; border-style: solid !important; border-color: #FF2D55;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    z-index: 10005 !important;
    z-index: calc(var(--lorica-z-modal, 10000) + 5) !important;
    box-sizing: border-box !important; font-family: inherit !important; outline: none !important;
    display: flex !important; flex-direction: column !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    transition: border-color 0.3s ease;
}
#of-tarjeta-ofertas-ia * { box-sizing: border-box !important; }

/* Cadena flex para que solo se desplace la caja de la oferta */
#of-tarjeta-ofertas-ia > .lorica-modal-contenido-ia,
#contenedor-dinamico-ofertas-ia {
    display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important;
}

#of-tarjeta-ofertas-ia [role="button"],
#of-tarjeta-ofertas-ia a {
    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;
}
#of-tarjeta-ofertas-ia [role="button"]:focus-visible { outline: 2px solid #007AFF !important; outline-offset: 2px !important; }

@keyframes auraOferta {
    0%   { box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 10px rgba(255, 45, 85, 0.3); border-color: #FF2D55; }
    50%  { box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 20px rgba(255, 45, 85, 0.6); border-color: #FF5E7E; }
    100% { box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 10px rgba(255, 45, 85, 0.3); border-color: #FF2D55; }
}
@keyframes auraDestacada {
    0%   { box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 20px rgba(255, 215, 0, 0.7); border-color: #FFD700; }
    50%  { box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 45px rgba(255, 215, 0, 1);   border-color: #FFA500; }
    100% { box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 20px rgba(255, 215, 0, 0.7); border-color: #FFD700; }
}
/* Vibración suave sobre `translate` (no pelea con el transform que centra la tarjeta) */
@keyframes vibreVIP {
    0%, 100% { translate: 0 0; }
    20%      { translate: 0 -6px; }
    40%      { translate: 0 6px; }
    60%      { translate: 0 -4px; }
    80%      { translate: 0 4px; }
}
@keyframes textoDestacado {
    0%, 100% { color: #B28200; text-shadow: 0 0 5px rgba(255, 215, 0, 0.2); }
    50%      { color: #FFA500; text-shadow: 0 0 12px rgba(255, 165, 0, 0.6); }
}
@keyframes vibreSutilOf { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@keyframes fadeInOf { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Animaciones solo si el usuario no pidió reducir movimiento */
@media (prefers-reduced-motion: no-preference) {
    .of-borde-normal { animation: auraOferta 3s infinite; }
    .of-borde-destacado { animation: auraDestacada 3s infinite; border-width: 2px !important; }
    .of-borde-destacado.vibre-vip { animation: auraDestacada 3s infinite, vibreVIP 0.6s ease-in-out; }
    .of-borde-destacado .of-tit-detect-ia,
    .of-borde-destacado .of-tit-detect-ia i { animation: textoDestacado 2s infinite !important; }
    .of-animado-ia { animation: fadeInOf 0.3s ease !important; }
    .shake-anim-of-ia { animation: vibreSutilOf 0.3s ease !important; }   /* después: gana a la entrada */
}
@media (prefers-reduced-motion: reduce) {
    .of-borde-normal { animation: none !important; border-color: #FF2D55 !important; }
    .of-borde-destacado { animation: none !important; border-color: #FFD700 !important; border-width: 2px !important; }
    .of-borde-destacado .of-tit-detect-ia,
    .of-borde-destacado .of-tit-detect-ia i { animation: none !important; color: #B28200 !important; }
}

/* CABECERA */
.of-header-ia { flex-shrink: 0 !important; display: grid !important; grid-template-columns: 36px 1fr 36px !important; align-items: center !important; margin-bottom: 8px !important; padding-bottom: 6px !important; border-bottom: 1px solid #E5E5EA !important; }
.of-btn-close-ia, .of-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; }
.of-btn-close-ia:hover, .of-btn-audio-ia:hover { color: #0f2c59 !important; }
.of-btn-audio-ia.lorica-voz-activa { color: #FF2D55 !important; }
.of-tit-detect-ia { font-size: 14px !important; font-weight: 900 !important; color: #FF2D55 !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; line-height: 1.2 !important; text-align: center !important; transition: color 0.3s ease !important; }
.of-tit-detect-ia i { color: #FF2D55 !important; transition: color 0.3s ease !important; }

/* ETIQUETA DE FILTRO ACTIVO */
.of-filtro-activo-ia { flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin: 0 auto 8px auto !important; padding: 4px 6px 4px 12px !important; background: rgba(255, 45, 85, 0.08) !important; border: 1px solid rgba(255, 45, 85, 0.25) !important; border-radius: 20px !important; font-size: 11px !important; color: #6c6c70 !important; max-width: 100% !important; }
.of-filtro-activo-ia[hidden] { display: none !important; }
.of-filtro-activo-ia > i { color: #FF2D55 !important; }
.of-filtro-activo-ia strong { color: #1C1C1E !important; font-weight: 800 !important; }
.of-chip-quitar-ia { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; border-radius: 50% !important; color: #FF2D55 !important; cursor: pointer !important; }
.of-chip-quitar-ia:hover { background: rgba(255, 45, 85, 0.15) !important; }

/* CONTENIDO */
.of-animado-ia { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; text-align: center !important; width: 100% !important; }
.of-cargando-ia { padding: 40px 0 !important; justify-content: center !important; align-items: center !important; }
.of-cargando-ia i { font-size: 24px !important; color: #FF2D55 !important; }
.of-cargando-ia div { font-size: 11px !important; font-weight: 400 !important; color: #6c6c70 !important; margin-top: 10px !important; }
.of-mensaje-ia { color: #FF2D55 !important; padding: 20px !important; text-align: center !important; font-size: 12px !important; line-height: 1.5 !important; }
.of-mensaje-neutro-ia { color: #000 !important; font-size: 11px !important; font-weight: 900 !important; text-transform: uppercase !important; padding: 10px 6px !important; }

.of-nombre-ia   { flex-shrink: 0 !important; font-size: 14px !important; font-weight: 900 !important; color: #1C1C1E !important; margin: 0 0 4px 0 !important; text-transform: uppercase !important; text-align: center !important; line-height: 1.2 !important; }
.of-categoria-ia { flex-shrink: 0 !important; text-align: center !important; font-size: 12px !important; font-weight: 400 !important; color: #6c6c70 !important; margin-bottom: 10px !important; border: none !important; text-transform: none !important; }
.of-categoria-ia span { color: #444 !important; }
.of-seccion-tit-ia { font-size: 11px !important; font-weight: 900 !important; color: #000000 !important; text-align: center !important; display: block !important; margin-top: 0 !important; margin-bottom: 8px !important; text-transform: uppercase !important; }
.of-seccion-sep-ia { margin-bottom: 12px !important; }
.of-sep-top-ia { margin-top: 12px !important; }

/* Solo se desliza la caja de la oferta */
.of-content-scroll-ia { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; padding-right: 4px !important; margin-bottom: 4px !important; scroll-behavior: smooth !important; overscroll-behavior: contain !important; }
.of-content-scroll-ia::-webkit-scrollbar { width: 3px; }
.of-content-scroll-ia::-webkit-scrollbar-thumb { background: #D1D1D6; border-radius: 10px; }

.of-caja-oferta-ia { background: #F4F5F7 !important; border: 1px solid #E5E5EA !important; padding: 14px !important; border-radius: 12px !important; margin-bottom: 10px !important; text-align: justify !important; }
.of-tit-oferta-ia  { font-size: 13px !important; font-weight: 900 !important; color: #1C1C1E !important; margin-bottom: 8px !important; text-align: center !important; text-transform: uppercase !important; }
.of-txt-oferta-ia  { font-size: 12px !important; font-weight: 500 !important; color: #444 !important; line-height: 1.5 !important; margin-bottom: 12px !important; text-justify: inter-word !important; text-align: justify !important; }
.of-condiciones-ia { font-size: 11px !important; color: #6c6c70 !important; line-height: 1.4 !important; margin: -4px 0 12px 0 !important; text-align: left !important; }
.of-condiciones-ia strong { color: #1C1C1E !important; font-weight: 800 !important; }

.of-timer-ia { font-size: 11px !important; font-weight: 800 !important; text-align: center !important; padding: 8px !important; border-radius: 6px !important; display: inline-block !important; width: 100% !important; text-transform: none !important; transition: color 0.3s ease, background-color 0.3s ease !important; }
.of-timer-ia.timer-verde    { color: #28A745 !important; background: rgba(40,167,69,0.1) !important; border: 1px solid rgba(40,167,69,0.3) !important; }
.of-timer-ia.timer-rojo     { color: #FF3B30 !important; background: rgba(255,59,48,0.1)  !important; border: 1px solid rgba(255,59,48,0.3)  !important; }
.of-timer-ia.timer-expirado { color: #8E8E93 !important; background: #E5E5EA !important; border: none !important; }
.of-borde-destacado .of-timer-ia:not(.timer-expirado) { color: #B28200 !important; background: rgba(255,165,0,0.1) !important; border: 1px solid rgba(255,165,0,0.3) !important; }

/* RECUADRO DE GPS (estructura de UI.cajaGPS) */
.of-box-gps-ia { background: rgba(0,0,0,0.03) !important; border: 1px solid #E5E5EA !important; padding: 8px 10px !important; border-radius: 8px !important; margin-bottom: 10px !important; }
.of-row-1-ia, .of-row-2-ia { font-size: 11px !important; font-weight: 400 !important; color: #444 !important; display: flex !important; justify-content: center !important; align-items: center !important; flex-wrap: wrap !important; gap: 4px !important; }
.of-row-1-ia { margin-bottom: 4px !important; }
.of-row-2-ia { margin-top: 4px !important; }

/* FOOTER FIJO */
.of-footer-fijo-ia { flex-shrink: 0 !important; display: flex !important; flex-direction: column !important; width: 100% !important; }
.of-pag-wrap-ia { display: flex !important; justify-content: space-between !important; align-items: center !important; background: transparent !important; padding: 4px 0 !important; border: none !important; margin-bottom: 4px !important; }
.of-btn-pag-ia { background: transparent !important; color: #6c6c70 !important; border: none !important; font-size: 11px !important; font-weight: bold !important; padding: 4px 8px !important; cursor: pointer !important; transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease !important; display: flex !important; align-items: center !important; gap: 4px !important; min-height: 36px !important; }
.of-btn-pag-ia:hover  { opacity: 0.7 !important; color: #0f2c59 !important; }
.of-btn-pag-ia:active { transform: scale(0.95) !important; }
.of-pag-num-ia { font-size: 11px !important; font-weight: bold !important; color: #6c6c70 !important; }

.of-grid-1-ia { display: grid !important; grid-template-columns: 1fr !important;         gap: 4px !important; margin-bottom: 2px !important; width: 100% !important; }
.of-grid-3-ia { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 4px !important; margin-bottom: 2px !important; width: 100% !important; }

.of-btn-ia, .of-btn-volver-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, border-color 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; }
.of-btn-ia i, .of-btn-volver-ia i { margin-right: 6px !important; font-size: 12px !important; color: #8E8E93 !important; transition: color 0.3s ease !important; }
.of-btn-ia:hover, .of-btn-volver-ia:hover { background: #0f2c59 !important; color: #fff !important; border-color: #0f2c59 !important; }
.of-btn-ia:hover i, .of-btn-volver-ia:hover i { color: #fff !important; }
.of-btn-ia:active, .of-btn-volver-ia:active { transform: scale(0.96) !important; opacity: 0.85 !important; }
.of-btn-volver-ia { text-transform: uppercase !important; letter-spacing: 0.5px !important; }

.of-btn-ia.of-btn-filtro-abrir-ia { background: transparent !important; border: none !important; padding: 4px !important; width: auto !important; display: inline-flex !important; font-size: 12px !important; color: #6c6c70 !important; min-height: 36px !important; }
.of-btn-ia.of-btn-filtro-abrir-ia i { margin: 0 4px 0 0 !important; font-size: 14px !important; color: #8E8E93 !important; }
.of-btn-ia.of-btn-filtro-abrir-ia:hover { background: rgba(255, 45, 85, 0.1) !important; color: #FF2D55 !important; border-radius: 6px !important; }
.of-btn-ia.of-btn-filtro-abrir-ia:hover i { color: #FF2D55 !important; }

.of-cerrar-ia { flex-shrink: 0 !important; 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: 6px 0 0 0 !important; margin-top: 6px !important; transition: color 0.3s ease !important; border: none !important; background: transparent !important; }
.of-cerrar-ia:hover { color: #FF2D55 !important; }

/* FILTROS */
.of-box-filtros-ia { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 0 4px 0 0 !important; overflow-y: auto !important; scroll-behavior: smooth !important; text-align: left !important; margin-bottom: 8px !important; }
.of-box-filtros-ia::-webkit-scrollbar { width: 3px; }
.of-box-filtros-ia::-webkit-scrollbar-thumb { background: #D1D1D6; border-radius: 10px; }
.of-btn-lista-filtro-ia { background: #F4F5F7 !important; color: #6c6c70 !important; padding: 10px 12px !important; border-radius: 8px !important; border: 1px solid #E5E5EA !important; font-size: 12px !important; font-weight: 400 !important; text-align: left !important; cursor: pointer !important; transition: background-color 0.3s ease, color 0.3s ease !important; display: flex !important; align-items: center !important; gap: 8px !important; width: 100% !important; min-height: 44px !important; flex-shrink: 0 !important; }
.of-btn-lista-filtro-ia i { font-size: 14px !important; width: 18px !important; text-align: center !important; color: #8E8E93 !important; }
.of-btn-lista-filtro-ia:hover { background: #E5E5EA !important; color: #1C1C1E !important; }
.of-btn-lista-filtro-ia:hover i { color: #1C1C1E !important; }
.of-btn-lista-filtro-ia.of-btn-filtro-activo-ia { background: #FF2D55 !important; color: #fff !important; border-color: #FF2D55 !important; font-weight: 800 !important; }
.of-btn-filtro-activo-ia i { color: #ffffff !important; }
.of-contador-filtro-ia { background: transparent !important; color: #000000 !important; padding: 2px 6px !important; border-radius: 10px !important; font-size: 10px !important; font-weight: 900 !important; margin-left: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.of-btn-filtro-activo-ia .of-contador-filtro-ia { background: rgba(255,255,255,0.3) !important; color: #fff !important; }

/* ==========================================================================
   MODO HORIZONTAL (LANDSCAPE EN MÓVIL)
   ========================================================================== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    #of-tarjeta-ofertas-ia {
        max-width: 580px !important;
        max-height: calc(100vh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        padding: 10px 14px !important;
    }
    .of-header-ia { margin-bottom: 6px !important; padding-bottom: 4px !important; }
    .of-filtro-activo-ia { margin-bottom: 4px !important; padding-top: 2px !important; padding-bottom: 2px !important; }
    .of-nombre-ia { margin: 0 0 2px 0 !important; }
    .of-categoria-ia { margin-bottom: 8px !important; }
    .of-caja-oferta-ia { padding: 10px !important; margin-bottom: 6px !important; }
    .of-tit-oferta-ia { margin-bottom: 4px !important; }
    .of-txt-oferta-ia { margin-bottom: 8px !important; }
    .of-box-gps-ia { padding: 6px 8px !important; margin-bottom: 6px !important; }
    .of-row-1-ia, .of-row-2-ia { gap: 3px !important; }
    .of-row-2-ia { margin-top: 2px !important; }
    .of-pag-wrap-ia { margin-bottom: 4px !important; }
    .of-btn-pag-ia { min-height: 32px !important; }
    .of-btn-ia, .of-btn-volver-ia { min-height: 38px !important; padding: 8px 4px !important; }
    .of-cerrar-ia { padding: 4px 0 2px 0 !important; margin-top: 4px !important; }
    .of-btn-lista-filtro-ia { min-height: 38px !important; padding: 6px 10px !important; }
}

@media screen and (min-height: 501px) and (max-height: 700px) and (orientation: landscape) {
    #of-tarjeta-ofertas-ia { max-width: 500px !important; }
}