/* ==========================================================================
   LORICA SMART CITY - CALENDARIO DE EVENTOS (V27.6)
   Archivo: 04-eventos-ia.css

   Mismo diseño (morado del calendario, azul cuando el evento es hoy), con:
   - Aura del borde funcionando (sin !important en color de borde y sombra).
   - Alto visible real (dvh), cadena flex y capas desde la escala común.
   - Botones <span role="button">; sin estilos en línea en el JS.
   - Nuevos: calendario mensual, lista de próximos con buscador, estado con
     cuenta regresiva, aviso de puente, agendar. Horizontal en dos columnas.
   ========================================================================== */

.e-fondo-ia {
    position: fixed !important; inset: 0 !important; background: rgba(0,0,0,0.4) !important;
    backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important;
    z-index: 10000 !important; z-index: var(--lorica-z-modal, 10000) !important;
}
.e-tarjeta-ia {
    --e-acento: #8E44AD; --e-acento-rgb: 142,68,173;
    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;
    background: #fff !important; padding: 14px 16px !important; border-radius: 20px !important;
    border-width: 1.5px !important; border-style: solid !important; border-color: var(--e-acento);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    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;
}
.e-tarjeta-ia.e-es-hoy-ia { --e-acento: #1DA1F2; --e-acento-rgb: 29,161,242; }
.e-tarjeta-ia * { box-sizing: border-box !important; }
.e-tarjeta-ia > .lorica-modal-contenido-ia, .e-contenedor-ia, .e-animado-ia { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; }
.e-animado-ia { text-align: center !important; width: 100% !important; }
.e-tarjeta-ia [role="button"] { outline: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent !important; cursor: pointer !important; user-select: none !important; -webkit-user-select: none !important; font-family: inherit !important; }
.e-tarjeta-ia [role="button"]:focus-visible { outline: 2px solid #007AFF !important; outline-offset: 2px !important; }

@keyframes eAuraIA { 0%, 100% { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 10px rgba(var(--e-acento-rgb), 0.3); } 50% { box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 22px rgba(var(--e-acento-rgb), 0.65); } }
@keyframes eEntradaIA { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes eSacudirIA { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@media (prefers-reduced-motion: no-preference) {
    .e-tarjeta-ia { animation: eAuraIA 3s infinite; }
    .e-animado-ia { animation: eEntradaIA 0.3s ease !important; }
    .e-sacudir-ia { animation: eSacudirIA 0.3s ease !important; }
}

/* ── Cabecera ── */
.e-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; }
.e-btn-icono-ia { color: #6c6c70 !important; font-size: 18px !important; width: 36px !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: color 0.2s !important; }
.e-btn-icono-ia:hover { color: #0f2c59 !important; }
.e-btn-audio-ia.lorica-voz-activa { color: var(--e-acento) !important; }
.e-titulo-ia { font-size: 14px !important; font-weight: 900 !important; color: var(--e-acento) !important; letter-spacing: 0.5px !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 6px !important; text-transform: uppercase !important; line-height: 1.2 !important; }

/* ── Estados generales ── */
.e-cargando-ia { padding: 40px 0 !important; justify-content: center !important; align-items: center !important; }
.e-cargando-ia i { font-size: 24px !important; color: var(--e-acento) !important; }
.e-cargando-ia div { font-size: 11px !important; font-weight: 700 !important; color: #6c6c70 !important; margin-top: 10px !important; }
.e-mensaje-ia { color: #c0392b !important; padding: 20px 10px !important; font-size: 12px !important; line-height: 1.5 !important; }
.e-mensaje-neutro-ia { color: #1C1C1E !important; font-size: 11px !important; font-weight: 800 !important; text-transform: uppercase !important; }

/* ── Tarjeta del evento ── */
.e-chip-ia { flex-shrink: 0 !important; display: inline-flex !important; align-self: center !important; align-items: center !important; gap: 6px !important; max-width: 100% !important; margin: 0 auto 8px !important; padding: 3px 4px 3px 10px !important; background: rgba(var(--e-acento-rgb), 0.08) !important; border: 1px solid rgba(var(--e-acento-rgb), 0.3) !important; border-radius: 20px !important; font-size: 10.5px !important; color: #444 !important; }
.e-chip-ia > i { color: var(--e-acento) !important; }
.e-chip-ia span { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-weight: 700 !important; }
.e-chip-quitar-ia { width: 22px !important; height: 22px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: var(--e-acento) !important; flex-shrink: 0 !important; }
.e-nombre-ia { flex-shrink: 0 !important; font-size: 14px !important; font-weight: 900 !important; color: #1C1C1E !important; margin: 0 0 4px !important; text-transform: uppercase !important; line-height: 1.2 !important; }
.e-categoria-ia { flex-shrink: 0 !important; font-size: 12px !important; color: #6c6c70 !important; margin-bottom: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; }
.e-scroll-ia { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain !important; display: flex !important; flex-direction: column !important; padding-right: 2px !important; }
.e-scroll-ia::-webkit-scrollbar { width: 3px; }
.e-scroll-ia::-webkit-scrollbar-thumb { background: #D1D1D6; border-radius: 10px; }

.e-caja-info-ia { flex-shrink: 0 !important; background: rgba(0,0,0,0.03) !important; border: 1px solid #E5E5EA !important; padding: 10px !important; border-radius: 8px !important; margin-bottom: 10px !important; display: flex !important; flex-direction: column !important; gap: 5px !important; }
.e-fecha-ia { font-size: 12px !important; font-weight: 800 !important; color: var(--e-acento) !important; }
.e-estado-ia { font-size: 11px !important; font-weight: 800 !important; }
.e-estado-ia i, .e-fecha-ia i, .e-lugar-ia i, .e-puente-ia i, .e-reloj-ia i { margin-right: 4px !important; }
.est-hoy { color: #1DA1F2 !important; }
.est-pronto { color: #E67E22 !important; }
.est-normal { color: #6c6c70 !important; }
.e-puente-ia { font-size: 11px !important; font-weight: 700 !important; color: #27AE60 !important; }
.e-lugar-ia { font-size: 11px !important; color: #444 !important; }
.e-regla-ia { font-size: 10px !important; color: #8E8E93 !important; font-style: italic !important; }
.e-reloj-ia { font-size: 10.5px !important; color: #6c6c70 !important; border-top: 1px dashed #D1D1D6 !important; padding-top: 5px !important; margin-top: 2px !important; }
.e-seccion-tit-ia { font-size: 11px !important; font-weight: 900 !important; color: #000 !important; text-transform: uppercase !important; margin: 4px 0 6px !important; display: block !important; }
.e-seccion-txt-ia { font-size: 11.5px !important; font-weight: 500 !important; color: #444 !important; line-height: 1.5 !important; text-align: justify !important; text-justify: inter-word !important; margin-bottom: 6px !important; }
.e-separado-ia { margin-top: 8px !important; padding-top: 8px !important; border-top: 1px dashed #D1D1D6 !important; }
.e-sep-top-ia { margin-top: 8px !important; }

/* Puntos de categoría */
.e-punto-ia { display: inline-block !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; flex-shrink: 0 !important; }
.cat-urbano   { background: #E74C3C !important; }
.cat-rural    { background: #27AE60 !important; }
.cat-cordoba  { background: #E67E22 !important; }
.cat-festivo  { background: #C0392B !important; box-shadow: 0 0 0 2px rgba(192,57,43,0.2) !important; }
.cat-nacional { background: #F1C40F !important; }
.cat-mundial  { background: #3498DB !important; }

/* ── Pie ── */
.e-pie-ia { flex-shrink: 0 !important; display: flex !important; flex-direction: column !important; width: 100% !important; }
.e-pag-ia { display: flex !important; justify-content: space-between !important; align-items: center !important; margin: 6px 0 !important; }
.e-btn-pag-ia { color: #6c6c70 !important; font-size: 11px !important; font-weight: bold !important; padding: 4px 8px !important; display: flex !important; align-items: center !important; gap: 4px !important; min-height: 36px !important; }
.e-btn-pag-ia:hover { color: #0f2c59 !important; }
.e-pag-num-ia { font-size: 11px !important; font-weight: bold !important; color: #6c6c70 !important; padding: 6px 10px !important; border-radius: 14px !important; background: #F4F5F7 !important; border: 1px solid #E5E5EA !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.e-pag-num-ia i { color: var(--e-acento) !important; }
.e-grid-1-ia, .e-grid-2-ia, .e-grid-3-ia { display: grid !important; gap: 4px !important; margin-bottom: 4px !important; width: 100% !important; }
.e-grid-1-ia { grid-template-columns: 1fr !important; }
.e-grid-2-ia { grid-template-columns: 1fr 1fr !important; }
.e-grid-3-ia { grid-template-columns: 1fr 1fr 1fr !important; }
.e-btn-ia { background: #F4F5F7 !important; color: #6c6c70 !important; padding: 10px 4px !important; border-radius: 8px !important; font-size: 11px !important; border: 1px solid #E5E5EA !important; font-weight: bold !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-height: 44px !important; line-height: 1.2 !important; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important; }
.e-btn-ia i { margin-right: 6px !important; font-size: 12px !important; color: #8E8E93 !important; }
.e-btn-ia:hover { background: #0f2c59 !important; color: #fff !important; border-color: #0f2c59 !important; }
.e-btn-ia:hover i { color: #fff !important; }
.e-btn-ia:active { background: var(--e-acento) !important; color: #fff !important; transform: scale(0.96) !important; }
.e-btn-filtro-ia { background: transparent !important; border-color: transparent !important; }
.e-btn-filtro-ia:hover { background: rgba(var(--e-acento-rgb), 0.1) !important; color: var(--e-acento) !important; border-color: transparent !important; }
.e-btn-volver-ia { text-transform: uppercase !important; letter-spacing: 0.5px !important; }
.e-cerrar-ia { flex-shrink: 0 !important; color: #000 !important; font-size: 11px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; display: block !important; width: 100% !important; padding: 8px 0 2px !important; margin-top: 8px !important; }
.e-cerrar-ia:hover { color: var(--e-acento) !important; }

/* ── Calendario mensual ── */
.e-mes-nav-ia { flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 6px !important; }
.e-mes-nav-ia strong { font-size: 13px !important; font-weight: 900 !important; color: #1C1C1E !important; }
.e-semana-ia, .e-mes-ia { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 3px !important; }
.e-semana-ia span { font-size: 10px !important; font-weight: 900 !important; color: #8E8E93 !important; padding: 4px 0 !important; }
.e-semana-ia span:last-child { color: #C0392B !important; }
.e-dia-ia { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; min-height: 38px !important; border-radius: 8px !important; background: #F4F5F7 !important; border: 1px solid transparent !important; font-size: 12px !important; font-weight: 700 !important; color: #444 !important; transition: background-color 0.2s ease !important; }
.e-dia-ia:hover { background: #E9EBEF !important; }
.e-dia-con-ia { background: rgba(var(--e-acento-rgb), 0.07) !important; }
.e-dia-festivo-ia > span:first-child { color: #C0392B !important; }
.e-dia-hoy-ia { border-color: #1DA1F2 !important; background: rgba(29,161,242,0.08) !important; }
.e-dia-sel-ia { background: var(--e-acento) !important; }
.e-dia-sel-ia > span:first-child { color: #fff !important; }
.e-puntos-ia { display: flex !important; gap: 2px !important; min-height: 6px !important; }
.e-puntos-ia .e-punto-ia { width: 5px !important; height: 5px !important; box-shadow: none !important; }
.e-dia-vacio-ia { min-height: 38px !important; }
.e-leyenda-ia { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 4px 10px !important; margin: 8px 0 !important; font-size: 9.5px !important; color: #6c6c70 !important; }
.e-leyenda-ia span { display: inline-flex !important; align-items: center !important; gap: 4px !important; }
.e-dia-detalle-ia { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.e-vacio-dia-ia { font-size: 11px !important; color: #8E8E93 !important; padding: 8px !important; }

/* ── Listas (próximos y día) ── */
.e-aviso-festivo-ia { flex-shrink: 0 !important; font-size: 11px !important; color: #7a2419 !important; background: rgba(192,57,43,0.07) !important; border: 1px solid rgba(192,57,43,0.25) !important; border-radius: 8px !important; padding: 7px 10px !important; margin-bottom: 8px !important; text-align: left !important; }
.e-aviso-festivo-ia i { margin-right: 4px !important; }
.e-buscar-wrap-ia { flex-shrink: 0 !important; position: relative !important; margin-bottom: 8px !important; }
.e-buscar-wrap-ia > i { position: absolute !important; left: 12px !important; top: 50% !important; transform: translateY(-50%) !important; color: #8E8E93 !important; font-size: 13px !important; pointer-events: none !important; }
.e-tarjeta-ia input.e-buscar-ia { width: 100% !important; height: 42px !important; margin: 0 !important; padding: 0 12px 0 34px !important; border: 1px solid #D1D1D6 !important; border-radius: 10px !important; background: #F4F5F7 !important; font-size: 13px !important; color: #1C1C1E !important; font-family: inherit !important; box-shadow: none !important; outline: none !important; -webkit-appearance: none !important; appearance: none !important; }
.e-tarjeta-ia input.e-buscar-ia:focus { border-color: var(--e-acento) !important; background: #fff !important; }
.e-lista-ia { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain !important; display: flex !important; flex-direction: column !important; gap: 4px !important; margin-bottom: 8px !important; padding-right: 2px !important; }
.e-li-mes-ia { font-size: 10px !important; font-weight: 900 !important; color: var(--e-acento) !important; text-transform: uppercase !important; text-align: left !important; margin: 6px 0 2px !important; letter-spacing: 0.4px !important; }
.e-li-ia { display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 10px !important; background: #F4F5F7 !important; border: 1px solid #E5E5EA !important; border-radius: 8px !important; text-align: left !important; min-height: 46px !important; flex-shrink: 0 !important; }
.e-li-ia:hover { background: #E9EBEF !important; }
.e-li-actual-ia { border-color: var(--e-acento) !important; background: rgba(var(--e-acento-rgb), 0.06) !important; }
.e-li-fecha-ia { display: flex !important; flex-direction: column !important; align-items: center !important; width: 34px !important; flex-shrink: 0 !important; }
.e-li-fecha-ia strong { font-size: 15px !important; font-weight: 900 !important; color: #1C1C1E !important; line-height: 1 !important; }
.e-li-fecha-ia small { font-size: 9px !important; color: #8E8E93 !important; text-transform: uppercase !important; }
.e-li-txt-ia { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; }
.e-li-txt-ia strong { font-size: 11.5px !important; font-weight: 800 !important; color: #1C1C1E !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.e-li-txt-ia small { font-size: 10px !important; color: #6c6c70 !important; display: flex !important; align-items: center !important; gap: 4px !important; white-space: nowrap !important; overflow: hidden !important; }
.e-li-txt-ia em { font-style: normal !important; font-weight: 700 !important; }
.e-li-flecha-ia { color: #C7C7CC !important; font-size: 11px !important; }
.e-li-total-ia { font-size: 10px !important; color: #8E8E93 !important; padding: 4px 0 !important; }

/* ── Filtros ── */
.e-scroll-filtros-ia { gap: 4px !important; text-align: left !important; }
.e-opcion-ia { background: #F4F5F7 !important; color: #6c6c70 !important; padding: 10px 12px !important; border-radius: 8px !important; border: 1px solid #E5E5EA !important; font-size: 12px !important; display: flex !important; align-items: center !important; gap: 8px !important; width: 100% !important; min-height: 44px !important; flex-shrink: 0 !important; }
.e-opcion-ia > i.fa { color: #8E8E93 !important; width: 16px !important; text-align: center !important; }
.e-opcion-ia:hover { background: #E5E5EA !important; color: #1C1C1E !important; }
.e-opcion-activa-ia { background: var(--e-acento) !important; color: #fff !important; border-color: var(--e-acento) !important; font-weight: 800 !important; }
.e-opcion-activa-ia > i.fa { color: #fff !important; }
.e-contador-ia { margin-left: auto !important; font-size: 10px !important; font-weight: 900 !important; color: #000 !important; }
.e-opcion-activa-ia .e-contador-ia { color: #fff !important; }

/* ── Horizontal: datos a la izquierda, botones a la derecha ── */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .e-tarjeta-ia { max-width: 660px !important; width: calc(100vw - 24px) !important; max-height: calc(100vh - 16px) !important; max-height: calc(100dvh - 16px) !important; padding: 10px 14px !important; }
    .e-header-ia { margin-bottom: 6px !important; padding-bottom: 4px !important; }
    .e-animado-ia:has(> .e-pie-ia):has(> .e-scroll-ia) { display: grid !important; grid-template-columns: 1.15fr 1fr !important; grid-template-rows: auto auto auto 1fr !important; column-gap: 12px !important; }
    .e-animado-ia:has(> .e-pie-ia):has(> .e-scroll-ia) > :not(.e-pie-ia) { grid-column: 1 !important; }
    .e-animado-ia:has(> .e-pie-ia):has(> .e-scroll-ia) > .e-pie-ia { grid-column: 2 !important; grid-row: 1 / -1 !important; align-self: center !important; }
    .e-categoria-ia { margin-bottom: 6px !important; }
    .e-btn-ia { min-height: 36px !important; padding: 7px 4px !important; }
    .e-dia-ia, .e-dia-vacio-ia { min-height: 28px !important; }
    .e-cerrar-ia { padding-top: 4px !important; margin-top: 4px !important; }
}
@media screen and (min-height: 501px) and (max-height: 700px) and (orientation: landscape) {
    .e-tarjeta-ia { max-width: 500px !important; }
}