/*
Theme Name: Emergencias Grazalema - Presentador Tactico
Theme URI: https://github.com/alejandro/grazalema-emergency-presentation
Author: Juanma & Alejandro
Author URI: https://wordpress.org
Description: Tema de WordPress de pantalla completa diseñado para la presentacion de fin de grado de Alejandro sobre la coordinacion de emergencias en las riadas de Grazalema. Actua como reproductor tactico de diapositivas interactivas.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: grazalema-theme
*/

/* --- CORES Y DISEÑO BASE DE LA PRESENTACIÓN --- */
html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-family: 'Outfit', 'Inter', -apple-system, sans-serif;
    box-sizing: border-box;
}

body * {
    box-sizing: border-box;
}

/* --- REPRODUCTOR DE DIAPOSITIVAS (SLIDESHOW) --- */
.presentation-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Contenedor principal de diapositivas */
#presentation-container {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Estructura de cada diapositiva */
.slide-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    display: grid;
    grid-template-rows: 1fr;
    padding: 80px 60px 40px 60px;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease;
    z-index: 1;
    background-size: cover;
    background-position: center;
}

/* Transiciones Cinematográficas */
.slide-frame.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) scale(1);
    z-index: 10;
}

.slide-frame.prev-slide {
    opacity: 0;
    transform: translateX(-100%) scale(0.9);
}

.slide-frame.next-slide {
    opacity: 0;
    transform: translateX(100%) scale(0.9);
}

/* --- DISEÑOS DE CONTENIDO --- */
.slide-content-container {
    display: flex;
    gap: 40px;
    height: 100%;
    width: 100%;
    align-items: center;
}

.slide-text-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 800px;
    z-index: 5;
}

.slide-title {
    font-size: 42px;
    font-weight: 800;
    margin: 0 0 20px 0;
    line-height: 1.2;
    letter-spacing: -1px;
}

.slide-body {
    font-size: 20px;
    line-height: 1.6;
    max-height: calc(100vh - 340px);
    overflow-y: auto;
    padding-right: 15px;
}

/* Barra de desplazamiento premium para el texto largo */
.slide-body::-webkit-scrollbar {
    width: 6px;
}
.slide-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.01);
    border-radius: 3px;
}
.slide-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    transition: background 0.2s;
}
.slide-body::-webkit-scrollbar-thumb:hover {
    background: #ff5722;
}

.slide-body p {
    margin: 0 0 15px 0;
}

.slide-body ul, .slide-body ol {
    margin: 0 0 15px 25px;
}

.slide-body li {
    margin-bottom: 8px;
}

/* Diseño Split (Imagen lado a lado) */
.layout-split-media .slide-media-column {
    width: 550px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-media-wrapper {
    width: 100%;
    height: 85%;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
}

/* Diseño Full Background */
.layout-full-bg {
    position: relative;
    background-color: transparent !important;
    background-image: none !important;
}

.layout-full-bg .slide-content-container {
    justify-content: flex-start;
}

.layout-full-bg .slide-text-column {
    background: rgba(15, 23, 42, 0.85);
    padding: 30px 40px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(16px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    max-width: 650px;
}

/* --- ENCABEZADOS Y PIES DE PÁGINA FRONTEND --- */
.presentation-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

.presentation-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.presentation-brand .dashicons {
    font-size: 26px;
    width: 26px;
    height: 26px;
}

.presentation-brand h1 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Cronómetro Activo */
.timer-active {
    font-size: 15px;
    font-weight: 700;
    background: rgba(0,0,0,0.4);
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
}

/* Alertas de temporizador */
.alert-yellow {
    color: #ffb300;
    border-color: rgba(255, 179, 0, 0.4);
}
.alert-orange {
    color: #ff9100;
    border-color: rgba(255, 145, 0, 0.6);
    animation: flash 1s infinite alternate;
}
.alert-red {
    color: #ff3d00;
    border-color: rgba(255, 61, 0, 0.8);
    animation: flash 0.5s infinite alternate;
}

@keyframes flash {
    0% { opacity: 0.6; }
    100% { opacity: 1; box-shadow: 0 0 10px rgba(255,61,0,0.3); }
}

/* Barra de Progreso Inferior */
.presentation-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.05);
    z-index: 100;
}

#progress-bar-fill {
    height: 100%;
    width: 0%;
    transition: width 0.4s ease;
}

/* --- ELEMENTOS DE NAVEGACIÓN --- */
.presentation-navigation {
    position: absolute;
    bottom: 25px;
    right: 60px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 100;
}

.slide-counter-badge {
    font-size: 14px;
    font-weight: 600;
    background: rgba(0,0,0,0.3);
    padding: 6px 12px;
    border-radius: 4px;
}

.nav-button {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.nav-button:hover {
    background: rgba(255,255,255,0.15);
    transform: scale(1.05);
}

/* --- PANEL FLOTANTE DE NOTAS DEL PRESENTADOR (PRESENTER NOTES) --- */
.presenter-notes-pane {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(15, 23, 42, 0.95);
    border-top: 2px solid #ff5722;
    padding: 20px 60px;
    color: #cbd5e1;
    z-index: 200;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 -10px 40px rgba(0,0,0,0.8);
    max-height: 220px;
    overflow-y: auto;
}

.presenter-notes-pane h3 {
    margin: 0 0 10px 0;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.presenter-notes-pane h3 .dashicons {
    color: #ff5722;
}

.presenter-notes-pane p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}

.notes-pane-hidden {
    transform: translateY(100%);
}

/* --- WIDGETS INTERACTIVOS FRONTEND --- */

/* Contenedor Genérico */
.widget-mount {
    position: absolute;
    z-index: 20;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.08);
}

/* A. LÍNEA DE TIEMPO WIDGET */
.widget-timeline-mount {
    bottom: 40px;
    left: 60px;
    width: calc(100% - 400px);
    height: 160px;
}

.timeline-widget-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(22, 30, 49, 0.85);
    backdrop-filter: blur(12px);
    padding: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    align-items: center;
}

.timeline-axis-line {
    position: absolute;
    left: 20px;
    right: 20px;
    height: 4px;
    background: rgba(255,255,255,0.1);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.timeline-nodes-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
    z-index: 2;
}

.timeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 150px;
    animation: timelineNodeFade 0.6s ease forwards;
    opacity: 0;
}

@keyframes timelineNodeFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.timeline-node-time {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
    background: rgba(0,0,0,0.4);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.08);
}

.timeline-node-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ff5722;
    border: 4px solid #161e31;
    box-shadow: 0 0 8px #ff5722;
    z-index: 3;
    transition: transform 0.2s;
}

.timeline-node:hover .timeline-node-dot {
    transform: scale(1.3);
}

.timeline-node-content {
    margin-top: 12px;
    text-align: center;
}

.timeline-node-content p {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: #cbd5e1;
    max-height: 40px;
    overflow: hidden;
}

/* B. CLIMA WIDGET */
.widget-weather-mount {
    top: 90px;
    right: 60px;
    width: 320px;
}

.weather-widget-wrapper {
    background: rgba(22, 30, 49, 0.85);
    backdrop-filter: blur(12px);
    padding: 20px;
    width: 100%;
}

.weather-dashboard {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.weather-header {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 8px;
}

.weather-header .dashicons {
    color: #00bcd4;
}

.weather-header h4 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.weather-body {
    display: flex;
    align-items: center;
    gap: 15px;
}

.rain-gauge-box {
    display: flex;
    align-items: baseline;
    gap: 4px;
    background: rgba(0,0,0,0.25);
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
}

.rain-value {
    font-size: 36px;
    font-weight: 800;
    color: #00bcd4;
    line-height: 1;
}

.rain-unit {
    font-size: 11px;
    color: #cbd5e1;
    line-height: 1.2;
}

.alert-status-box {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
    position: relative;
}

.alert-level-green { background: rgba(76, 175, 80, 0.1); border-color: rgba(76, 175, 80, 0.2); }
.alert-level-green .alert-title { color: #81c784; }

.alert-level-yellow { background: rgba(255, 193, 7, 0.1); border-color: rgba(255, 193, 7, 0.2); }
.alert-level-yellow .alert-title { color: #ffd54f; }

.alert-level-orange { background: rgba(255, 152, 0, 0.1); border-color: rgba(255, 152, 0, 0.2); }
.alert-level-orange .alert-title { color: #ffb74d; }

.alert-level-red { 
    background: rgba(244, 67, 54, 0.15); 
    border-color: rgba(244, 67, 54, 0.3); 
}
.alert-level-red .alert-title { 
    color: #e57373; 
    font-weight: 800;
}

.alert-badge-pulse {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.alert-level-green .alert-badge-pulse { background: #4caf50; }
.alert-level-yellow .alert-badge-pulse { background: #ffc107; }
.alert-level-orange .alert-badge-pulse { background: #ff9800; animation: alertPulse 1s infinite alternate; }
.alert-level-red .alert-badge-pulse { background: #f44336; animation: alertPulse 0.5s infinite alternate; }

@keyframes alertPulse {
    0% { transform: scale(0.8); opacity: 0.5; box-shadow: 0 0 0 0 rgba(244,67,54,0.4); }
    100% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 8px 3px rgba(244,67,54,0.6); }
}

.alert-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
}

.alert-description {
    margin: 0;
    font-size: 10px;
    line-height: 1.3;
    color: #cbd5e1;
}

.weather-caption {
    margin: 0;
    font-size: 9px;
    color: #94a3b8;
    text-align: right;
    font-style: italic;
}

/* EFECTO LLUVIA OVERLAY EN PANTALLA COMPLETA */
.rain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 15;
    overflow: hidden;
}

.rain-drop {
    position: absolute;
    top: -50px;
    width: 2px;
    height: 40px;
    background: linear-gradient(transparent, rgba(157, 218, 240, 0.4));
    animation: fall linear infinite;
}

@keyframes fall {
    to {
        transform: translateY(105vh);
    }
}

/* C. MAPA WIDGET */
.widget-map-mount {
    top: 90px;
    right: 60px;
    width: 320px;
    height: 420px;
}

.leaflet-map-frame {
    width: 100%;
    height: 100%;
    background: #0b0f19;
}

/* Ajustes de Leaflet oscurecido para integrar con el diseño */
.leaflet-container {
    background-color: #0f172a !important;
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px !important;
}

.leaflet-popup-content {
    font-family: inherit;
    font-size: 13px;
    margin: 10px 14px !important;
}

/* Soporte responsive general frontend */
@media (max-width: 1100px) {
    /* CABECERA RESPONSIVE */
    .presentation-header {
        padding: 10px 15px !important;
        background: rgba(11, 15, 25, 0.95) !important;
        backdrop-filter: blur(8px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        height: 50px !important;
    }

    .presentation-brand {
        gap: 6px !important;
    }

    .presentation-brand h1 {
        font-size: 12px !important;
        letter-spacing: 0.5px !important;
    }

    .presentation-brand h1 small {
        display: none !important; /* Ocultar el texto de ayuda del logo en móvil para dar espacio */
    }

    .presentation-brand .dashicons {
        font-size: 18px !important;
        width: 18px !important;
        height: 18px !important;
    }

    /* Ocultar puntero y sonido en móvil */
    .header-utility-controls #btn-laser-pointer,
    .header-utility-controls #btn-audio-toggle {
        display: none !important;
    }

    .header-utility-controls {
        gap: 6px !important;
    }

    .timer-active {
        font-size: 11px !important;
        padding: 4px 8px !important;
        gap: 4px !important;
    }

    .timer-active .dashicons {
        font-size: 12px !important;
        width: 12px !important;
        height: 12px !important;
    }

    /* DIAPOSITIVAS Y MARCO GENERAL DE SCROLL */
    .slide-frame {
        padding: 70px 15px 85px 15px !important; /* Espacio para cabecera, banner y barra navegación */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        overflow-y: auto !important;
        height: 100% !important;
        width: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Barra de scroll de la diapositiva en móvil */
    .slide-frame::-webkit-scrollbar {
        width: 4px;
    }
    .slide-frame::-webkit-scrollbar-track {
        background: transparent;
    }
    .slide-frame::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 2px;
    }

    .slide-content-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
        align-items: stretch !important;
        flex: none !important;
    }

    .slide-text-column {
        max-width: 100% !important;
        height: auto !important;
        flex: none !important;
        display: block !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    .slide-title {
        font-size: 24px !important;
        font-weight: 800 !important;
        margin: 0 0 10px 0 !important;
        line-height: 1.2 !important;
    }

    .slide-body {
        max-height: none !important;
        overflow: visible !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
        padding-right: 0 !important;
        color: #e2e8f0 !important;
    }

    .layout-split-media .slide-media-column {
        width: 100% !important;
        height: 200px !important;
        margin-top: 10px !important;
        display: block !important;
        flex: none !important;
    }

    .slide-media-wrapper {
        height: 100% !important;
        width: 100% !important;
    }

    .layout-full-bg .slide-text-column {
        background: rgba(15, 23, 42, 0.92) !important;
        padding: 20px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    /* TODOS LOS WIDGETS INTERACTIVOS ACOPLADOS */
    .widget-mount {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 15px 0 0 0 !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.35) !important;
        border-radius: 12px !important;
        flex: none !important;
    }

    /* Línea de tiempo */
    .widget-timeline-mount {
        height: 170px !important;
    }

    .timeline-widget-wrapper {
        padding: 15px !important;
    }

    .timeline-node {
        width: 130px !important;
    }

    /* Clima */
    .widget-weather-mount {
        height: auto !important;
    }

    .weather-widget-wrapper {
        padding: 15px !important;
    }

    .weather-body {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .rain-gauge-box {
        justify-content: center !important;
        padding: 8px !important;
    }

    /* Mapa Leaflet */
    .widget-map-mount {
        height: 280px !important;
    }

    /* Gráfico */
    .widget-chart-mount {
        height: 280px !important;
    }

    .chart-widget-wrapper {
        padding: 15px !important;
    }

    .chart-bars-container {
        height: 150px !important;
        padding-bottom: 20px !important;
    }

    .chart-col-wrapper {
        width: 50px !important;
    }

    .chart-col-bar {
        width: 16px !important;
    }

    /* Checklist */
    .widget-checklist-mount {
        height: auto !important;
        max-height: 350px !important;
    }

    .checklist-widget-wrapper {
        padding: 15px !important;
    }

    .checklist-body {
        max-height: 240px !important;
    }

    /* CCTV */
    .widget-cctv-mount {
        height: 240px !important;
    }

    /* CINTILLO DE ALERTA (MARQUEE FIJO EN MÓVIL) */
    .widget-banner-mount {
        position: fixed !important;
        bottom: 50px !important; /* Justo arriba de la barra de navegación responsive */
        left: 0 !important;
        width: 100% !important;
        height: 30px !important;
        border-radius: 0 !important;
        margin: 0 !important;
        border-left: none !important;
        border-right: none !important;
        z-index: 150 !important;
    }

    .banner-text-flow {
        font-size: 11px !important;
    }

    /* BARRA DE NAVEGACIÓN Y CONTROLES RESPONSIVE FIJOS */
    .presentation-navigation {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 50px !important;
        padding: 0 15px !important;
        background: rgba(11, 15, 25, 0.98) !important;
        backdrop-filter: blur(8px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        z-index: 9999 !important;
        border-radius: 0 !important;
    }

    .slide-counter-badge {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }

    .nav-button {
        width: 32px !important;
        height: 32px !important;
        border-radius: 4px !important;
    }

    /* NOTAS DEL PRESENTADOR RESPONSIVE */
    .presenter-notes-pane {
        padding: 15px !important;
        max-height: 180px !important;
        bottom: 50px !important; /* Por encima de la barra de navegación */
        z-index: 10000 !important;
    }

    .presenter-notes-pane h3 {
        font-size: 13px !important;
    }

    .presenter-notes-pane p {
        font-size: 12px !important;
    }

    /* Scanlines atenuadas en móvil */
    body.skin-emergency-dark .radar-scanlines {
        opacity: 0.3 !important;
    }
}

/* --- CONTROLES DE UTILIDAD EN CABECERA --- */
.header-utility-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-icon-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    width: 38px;
    height: 38px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.header-icon-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    transform: scale(1.05);
}

.header-icon-btn.btn-active {
    background: #ff5722 !important;
    color: #fff !important;
    border-color: #ff5722 !important;
    box-shadow: 0 0 10px rgba(255, 87, 34, 0.4);
}

/* --- OVERLAY DE LÍNEAS DE ESCANEO DE RADAR (PUESTO DE MANDO CRT) --- */
.radar-scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999;
    opacity: 0; /* Por defecto apagado, activo solo en tema oscuro */
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 4px, 6px 100%;
    transition: opacity 0.5s ease;
}

/* Solo se activa de forma visible en el tema Emergency Dark */
body.skin-emergency-dark .radar-scanlines {
    opacity: 1;
}

/* --- PUNTERO LÁSER VIRTUAL --- */
#virtual-laser-dot {
    position: fixed;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    background: #ff3b30;
    box-shadow: 0 0 8px 4px #ff3b30, 
                0 0 16px 8px rgba(255, 59, 48, 0.5), 
                0 0 24px 12px rgba(255, 59, 48, 0.2);
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 1;
    transition: transform 0.05s cubic-bezier(0.1, 0.8, 0.3, 1), opacity 0.2s ease;
}

.laser-dot-hidden {
    opacity: 0 !important;
}

/* --- DISEÑO DE VISTA GENERAL (OVERVIEW MODE 3D GRID) --- */
body.overview-mode {
    overflow-y: auto !important;
}

.overview-mode .presentation-viewport {
    height: auto;
    min-height: 100vh;
}

.overview-mode #presentation-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 30px !important;
    padding: 120px 60px 80px 60px !important;
    overflow-y: visible !important;
    align-content: start !important;
    height: auto !important;
}

.overview-mode .slide-frame {
    position: relative !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    width: 100% !important;
    height: 180px !important;
    padding: 15px !important;
    border-radius: 10px !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    cursor: pointer !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.25s ease !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
    z-index: 10 !important;
}

/* Ajustes de color en modo grid según el fondo */
body.skin-emergency-dark.overview-mode .slide-frame {
    background-color: rgba(22, 30, 49, 0.9) !important;
}
body.skin-eco-nature.overview-mode .slide-frame {
    background-color: rgba(12, 34, 29, 0.9) !important;
}
body.skin-slate-clean.overview-mode .slide-frame {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.05) !important;
}

.overview-mode .slide-frame:hover {
    transform: scale(1.04) translateY(-4px) !important;
    border-color: #ff5722 !important;
    box-shadow: 0 15px 30px rgba(255, 87, 34, 0.25) !important;
}

.overview-mode .slide-frame.active {
    border-color: #ff5722 !important;
    outline: 2px solid #ff5722 !important;
    box-shadow: 0 0 15px rgba(255, 87, 34, 0.4) !important;
}

.overview-mode .slide-content-container {
    flex-direction: column !important;
    gap: 8px !important;
    height: auto !important;
    align-items: flex-start !important;
}

.overview-mode .slide-text-column {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    max-width: 100% !important;
}

.overview-mode .slide-title {
    font-size: 14px !important;
    margin: 0 0 5px 0 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.overview-mode .slide-body {
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: var(--g-text-muted) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.overview-mode .slide-media-column,
.overview-mode .slide-media-wrapper {
    display: none !important;
}

.overview-mode .widget-mount {
    display: none !important;
}

/* Ocultar barra de navegación en vista general */
.overview-mode .presentation-navigation {
    display: none !important;
}

/* ==========================================================================
   WIDGETS ADICIONALES PREMIUM (CHART, BANNER, CHECKLIST, CCTV)
   ========================================================================== */

/* 1. GRÁFICO COMPARATIVO */
.widget-chart-mount {
    top: 90px;
    right: 60px;
    width: 380px;
    height: 310px;
}

.chart-widget-wrapper {
    background: rgba(22, 30, 49, 0.85);
    backdrop-filter: blur(12px);
    padding: 20px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.chart-header {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
}

.chart-header .dashicons {
    color: #ff9800;
}

.chart-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.chart-body {
    flex: 1;
    display: flex;
    align-items: flex-end;
    width: 100%;
}

.chart-bars-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    width: 100%;
    height: 180px;
    padding-bottom: 25px; /* space for label */
    position: relative;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.chart-col-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 60px;
    height: 100%;
    justify-content: flex-end;
    opacity: 0;
    transform: translateY(20px);
    animation: chartColFadeIn 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes chartColFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chart-col-bar {
    width: 24px;
    background: linear-gradient(180deg, #ff9800, #ff5722);
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3);
}

.chart-col-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px 4px 0 0;
}

.chart-col-wrapper:hover .chart-col-bar {
    transform: scaleX(1.15);
    filter: brightness(1.2);
    box-shadow: 0 4px 20px rgba(255, 152, 0, 0.5);
}

.chart-col-label {
    position: absolute;
    bottom: -22px;
    font-size: 10px;
    color: #cbd5e1;
    text-align: center;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chart-col-value-hover {
    position: absolute;
    top: -24px;
    font-size: 11px;
    font-weight: 700;
    color: #ff9800;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
}

.chart-col-wrapper:hover .chart-col-value-hover {
    opacity: 1;
    transform: translateY(0);
}

/* 2. CINTILLO DE ALERTA DE EMERGENCIA (MARQUEE) */
.widget-banner-mount {
    position: absolute;
    bottom: 80px;
    left: 60px;
    width: calc(100% - 120px);
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    border: 1px solid rgba(244, 67, 54, 0.3);
    z-index: 20;
}

.banner-widget-wrapper {
    background: rgba(244, 67, 54, 0.15);
    backdrop-filter: blur(12px);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.banner-marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.banner-text-flow {
    display: inline-block;
    padding-left: 100%;
    font-size: 14px;
    font-weight: 800;
    color: #ff8a80;
    letter-spacing: 1px;
    text-transform: uppercase;
    animation: bannerMarquee 35s linear infinite;
    text-shadow: 0 0 8px rgba(244, 67, 54, 0.5);
}

@keyframes bannerMarquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

/* 3. CHECKLIST OPERATIVO DE MANDO */
.widget-checklist-mount {
    top: 90px;
    right: 60px;
    width: 380px;
    max-height: 420px;
}

.checklist-widget-wrapper {
    background: rgba(22, 30, 49, 0.85);
    backdrop-filter: blur(12px);
    padding: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.checklist-header {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
}

.checklist-header .dashicons {
    color: #4caf50;
}

.checklist-header h4 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.checklist-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
}

.checklist-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.checklist-item-row:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.checklist-item-checkbox {
    display: none;
}

.checklist-item-check-indicator {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    display: inline-block;
    position: relative;
    transition: all 0.2s ease;
}

.checklist-item-checkbox:checked + .checklist-item-check-indicator {
    background: #4caf50;
    border-color: #4caf50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
}

.checklist-item-checkbox:checked + .checklist-item-check-indicator::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checklist-item-text {
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.3;
    transition: all 0.2s ease;
}

.checklist-item-checkbox:checked ~ .checklist-item-text {
    color: #64748b;
    text-decoration: line-through;
}

/* 4. SIMULADOR CCTV */
.widget-cctv-mount {
    top: 90px;
    right: 60px;
    width: 380px;
    height: 285px; /* 4:3 Ratio for canvas approx */
}

.cctv-widget-wrapper {
    background: #000;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255,255,255,0.08);
    position: relative;
    overflow: hidden;
}

.cctv-screen-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.cctv-canvas {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
}

.cctv-scanline-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 4px;
    z-index: 5;
}

.cctv-header-overlay {
    position: absolute;
    top: 12px;
    left: 15px;
    right: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
    pointer-events: none;
}

.cctv-dot-rec {
    width: 8px;
    height: 8px;
    background-color: #f44336;
    border-radius: 50%;
    animation: cctvRecBlink 1s infinite alternate;
}

@keyframes cctvRecBlink {
    0% { opacity: 0.2; }
    100% { opacity: 1; }
}

.cctv-cam-name {
    color: #fff;
    font-family: monospace;
    font-size: 11px;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px #000;
    font-weight: bold;
}

.cctv-footer-overlay {
    position: absolute;
    bottom: 12px;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    pointer-events: none;
}

.cctv-timestamp {
    color: #fff;
    font-family: monospace;
    font-size: 11px;
    text-shadow: 1px 1px 2px #000;
}

.cctv-status-badge {
    font-family: monospace;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    text-shadow: 1px 1px 1px #000;
}

.cctv-status-ok .cctv-status-badge {
    background: rgba(76, 175, 80, 0.3);
    color: #81c784;
    border: 1px solid rgba(76, 175, 80, 0.5);
}

.cctv-status-alert .cctv-status-badge {
    background: rgba(255, 152, 0, 0.3);
    color: #ffd54f;
    border: 1px solid rgba(255, 152, 0, 0.5);
}

.cctv-status-danger .cctv-status-badge {
    background: rgba(244, 67, 54, 0.4);
    color: #ef5350;
    border: 1px solid rgba(244, 67, 54, 0.6);
    animation: cctvTextBlink 0.8s infinite alternate;
}

@keyframes cctvTextBlink {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

.cctv-status-none .cctv-status-badge {
    background: rgba(120, 120, 120, 0.4);
    color: #e0e0e0;
    border: 1px solid rgba(120, 120, 120, 0.6);
}



/* ==========================================================================
   AJUSTES DINÁMICOS Y RESPONSIVOS PARA EVITAR TRASLAPES EN ESCRITORIO (> 1100px)
   ========================================================================== */
@media (min-width: 1101px) {
    /* 1. Limitación de ancho de texto cuando hay widgets a la derecha */
    .slide-frame.has-right-widget .slide-text-column {
        max-width: calc(100% - 440px) !important;
    }

    /* Contenedor apilador de widgets a la derecha en escritorio */
    .slide-right-widgets-container {
        position: absolute !important;
        top: 90px !important;
        right: 60px !important;
        width: 380px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        max-height: calc(100vh - 150px) !important;
        overflow-y: auto !important;
        z-index: 20 !important;
        padding-right: 5px !important;
    }

    .slide-right-widgets-container::-webkit-scrollbar {
        width: 4px;
    }
    .slide-right-widgets-container::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.02);
    }
    .slide-right-widgets-container::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 2px;
    }

    /* Redefinir widgets para que se apilen de forma relativa dentro del contenedor */
    .slide-right-widgets-container .widget-mount {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        width: 100% !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Transformar el layout split-media a fondo completo si hay widgets interactivos activos, para no perder la imagen */
    .slide-frame.has-right-widget.layout-split-media .slide-media-column {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 0 !important;
        display: block !important;
    }

    .slide-frame.has-right-widget.layout-split-media .slide-media-wrapper {
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        cursor: default !important;
    }

    .slide-frame.has-right-widget.layout-split-media .slide-media-image {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-size: cover !important;
        background-position: center !important;
    }

    /* Overlay de oscurecimiento e integración cromática para que el texto siga siendo legible */
    .slide-frame.has-right-widget.layout-split-media .slide-media-wrapper::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(180deg, rgba(11, 15, 25, 0.4) 0%, rgba(11, 15, 25, 0.85) 100%) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    body.skin-eco-nature .slide-frame.has-right-widget.layout-split-media .slide-media-wrapper::after {
        background: linear-gradient(180deg, rgba(12, 34, 29, 0.35) 0%, rgba(12, 34, 29, 0.88) 100%) !important;
    }

    body.skin-slate-clean .slide-frame.has-right-widget.layout-split-media .slide-media-wrapper::after {
        background: linear-gradient(180deg, rgba(248, 250, 252, 0.3) 0%, rgba(248, 250, 252, 0.8) 100%) !important;
    }

    /* 2. Limitación de ancho de widgets inferiores para que no se solapen con widgets derechos */
    .slide-frame.has-right-widget .widget-timeline-mount {
        width: calc(100% - 480px) !important;
    }
    .slide-frame.has-right-widget .widget-banner-mount {
        width: calc(100% - 480px) !important;
    }

    /* 3. Posicionamiento del cintillo de alerta cuando coexiste con la línea de tiempo */
    .slide-frame.has-timeline-widget.has-banner-widget .widget-banner-mount {
        bottom: 210px !important;
    }

    /* 4. Alturas responsivas para widgets de la derecha para evitar desborde en pantallas de poca altura */
    .widget-map-mount {
        height: min(420px, 48vh) !important;
    }
    .widget-checklist-mount {
        max-height: min(420px, 48vh) !important;
    }
    .checklist-body {
        max-height: calc(min(420px, 48vh) - 90px) !important;
    }
    .widget-chart-mount {
        height: min(310px, 40vh) !important;
    }
    .chart-bars-container {
        height: calc(min(310px, 40vh) - 100px) !important;
    }
    .widget-cctv-mount {
        height: min(285px, 35vh) !important;
    }
    .widget-timeline-mount {
        height: min(160px, 20vh) !important;
    }
    .timeline-widget-wrapper {
        height: 100% !important;
    }

    /* 5. Alturas máximas del cuerpo de texto según los widgets activos */
    .slide-frame.has-timeline-widget .slide-body {
        max-height: calc(100vh - 465px) !important;
    }
    .slide-frame.has-banner-widget .slide-body {
        max-height: calc(100vh - 400px) !important;
    }
    .slide-frame.has-timeline-widget.has-banner-widget .slide-body {
        max-height: calc(100vh - 520px) !important;
    }
}

/* Ajustes adicionales para pantallas de escritorio cortas (ej. portátiles de 768px de alto o menor) */
@media (min-width: 1101px) and (max-height: 800px) {
    .slide-title {
        font-size: 32px !important;
        margin-bottom: 12px !important;
    }
    .slide-frame {
        padding: 70px 60px 30px 60px !important;
    }
    .presentation-header {
        padding: 15px 60px !important;
    }
}

/* ==========================================================================
   ESTILIZACIÓN PREMIUM DE IMÁGENES (ZOOM CINEMÁTICO, ESCALADO Y LIGHTBOX)
   ========================================================================== */

/* 1. EFECTO KEN BURNS PARA IMAGENES DE FONDO (FULL BG) */
.slide-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -2; /* Corregido z-index para apilamiento correcto detrás del contenido */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.slide-frame.active .slide-background-image {
    animation: keyframeKenBurnsBg 30s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes keyframeKenBurnsBg {
    from { transform: scale(1.08); }
    to { transform: scale(1.01); }
}

/* 2. OVERLAYS DE INTEGRACIÓN CROMÁTICA Y LEGIBILIDAD (MEZCLADO PREMIUM) */
.slide-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente oscuro que difumina la imagen de fondo para que el texto sea perfectamente legible */
    background: linear-gradient(180deg, rgba(11, 15, 25, 0.4) 0%, rgba(11, 15, 25, 0.85) 100%);
    z-index: -1; /* Corregido z-index para apilamiento correcto detrás del contenido */
    pointer-events: none;
}

/* Integración cromática según la piel del tema activa */
body.skin-eco-nature .slide-background-overlay {
    background: linear-gradient(180deg, rgba(12, 34, 29, 0.35) 0%, rgba(12, 34, 29, 0.88) 100%);
}

body.skin-slate-clean .slide-background-overlay {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.3) 0%, rgba(248, 250, 252, 0.8) 100%);
}

/* 3. IMÁGENES EN LAYOUT DE PANTALLA PARTIDA (SPLIT-MEDIA) */
.slide-media-column {
    overflow: hidden;
}

.slide-media-wrapper {
    position: relative;
    width: 100%;
    height: 85%;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    cursor: zoom-in;
}

.slide-media-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease, filter 0.3s ease;
}

/* Ken Burns suave en la imagen interna de la tarjeta */
.slide-frame.active .slide-media-image {
    animation: keyframeKenBurns 25s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes keyframeKenBurns {
    from { transform: scale(1.1); }
    to { transform: scale(1); }
}

/* Hint para indicarle a Alejandro que puede hacer clic en la foto para ampliarla */
.slide-media-zoom-hint {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(8px);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #f1f5f9;
    border: 1px solid rgba(255,255,255,0.08);
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
}

.slide-media-wrapper:hover .slide-media-zoom-hint {
    opacity: 1;
    transform: translateY(0);
}

.slide-media-wrapper:hover .slide-media-image {
    filter: brightness(1.12);
}

/* 4. MODAL DETALLE DE IMAGEN A PANTALLA COMPLETA (LIGHTBOX TÁCTICO) */
.grazalema-lightbox-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(11, 15, 25, 0.96);
    backdrop-filter: blur(16px);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.grazalema-lightbox-modal.lightbox-active {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 85%;
    max-height: 75vh;
    border-radius: 8px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.85);
    border: 1px solid rgba(255,255,255,0.12);
    transform: scale(0.96);
    transition: transform 0.35s cubic-bezier(0.1, 0.8, 0.3, 1);
}

.grazalema-lightbox-modal.lightbox-active .lightbox-content {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 25px;
    right: 35px;
    color: #f8fafc;
    font-size: 44px;
    font-weight: 300;
    transition: color 0.2s;
    cursor: pointer;
    line-height: 1;
}

.lightbox-close:hover {
    color: #ff5722;
}

.lightbox-caption {
    margin: 20px auto;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* ADAPTACIÓN RESPONSIVE DE IMÁGENES */
@media (max-width: 1100px) {
    .layout-split-media .slide-media-column {
        height: 220px !important;
    }
    
    .slide-media-wrapper {
        height: 100% !important;
        border-radius: 8px !important;
    }

    .slide-media-zoom-hint {
        opacity: 1 !important; /* Mostrar siempre en móvil puesto que no hay hover */
        transform: none !important;
        padding: 4px 8px !important;
        font-size: 9px !important;
    }
}

/* ==========================================================================
   MAQUETACIÓN TÁCTICA PERSONALIZADA (TABLAS, COLUMNAS Y GALERÍAS)
   ========================================================================== */

/* 1. Tablas de Datos de Emergencias */
.slide-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 15px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(14, 20, 35, 0.4);
}

.slide-body th, .slide-body td {
    padding: 10px 14px;
    text-align: left;
}

.slide-body th {
    background-color: rgba(255, 255, 255, 0.05);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    border-bottom: 2px solid #ff5722;
    color: #ffffff;
}

/* Adaptación por temas de la cabecera de tabla */
body.skin-eco-nature .slide-body th {
    border-bottom: 2px solid #00e676;
}
body.skin-slate-clean .slide-body th {
    border-bottom: 2px solid #ef4444;
    color: #0f172a;
}
body.skin-slate-clean .slide-body table {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
}
body.skin-slate-clean .slide-body th {
    background-color: rgba(0, 0, 0, 0.04);
}

.slide-body tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background-color 0.2s ease;
}

body.skin-slate-clean .slide-body tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.slide-body tr:last-child {
    border-bottom: none;
}

.slide-body tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

body.skin-slate-clean .slide-body tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* 2. Columnas Flexibles para Diseños Libres */
.flex-cols-2 {
    display: flex;
    gap: 30px;
    width: 100%;
    align-items: stretch;
}

@media (max-width: 1100px) {
    .flex-cols-2 {
        flex-direction: column;
        gap: 20px;
    }
}

.col-left {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.col-right {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
}

/* Si la diapositiva no tiene widgets a la derecha, y contiene elementos de ancho completo como columnas, tablas o rejillas,
   desbloqueamos el max-width para que use el 100% del espacio disponible de la pantalla automáticamente */
.slide-text-column:has(.flex-cols-2),
.slide-text-column:has(table),
.slide-text-column:has(.image-grid-2) {
    max-width: 100% !important;
}

.layout-text-only .slide-text-column {
    max-width: 100% !important; /* Desbloquear ancho fijo para maquetaciones fluidas en pantalla completa */
}

/* 3. Estilo para imágenes insertadas en los textos */
.slide-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease, filter 0.3s ease;
}

/* Control inteligente de altura de imágenes para evitar scrollbars y encajar como un puzle */
.col-left .slide-img, .col-right .slide-img {
    max-height: 240px;
    object-fit: cover;
    width: 100%;
}

.col-left .slide-img:only-child, .col-right .slide-img:only-child {
    max-height: 500px;
}


body.skin-slate-clean .slide-img {
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.slide-img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
    filter: brightness(1.08);
}

/* 4. Galerías y Filas de Iconos */
.image-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 15px 0;
    width: 100%;
}

@media (max-width: 768px) {
    .image-grid-2 {
        grid-template-columns: 1fr;
    }
}

.icons-row {
    display: flex;
    gap: 25px;
    margin-top: 25px;
    align-items: center;
}

.icon-img {
    height: 65px;
    width: auto;
    opacity: 0.8;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.icon-img:hover {
    opacity: 1;
    transform: scale(1.08);
}

/* 5. Cheurones / Flechas de Flujo Táctico */
.step-arrow {
    flex: 1;
    position: relative;
    padding: 8px 10px 8px 20px;
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    border-radius: 4px 0 0 4px;
    clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%);
}

.step-arrow:first-child {
    clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
    padding-left: 10px;
}

.step-arrow:last-child {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 15% 50%);
}

.arrow-orange { background: #d84315; color: #fff; }
.arrow-pink { background: #ad1457; color: #fff; }
.arrow-blue { background: #0277bd; color: #fff; }
.arrow-green { background: #00695c; color: #fff; }

/* 6. Animaciones Adicionales */
@keyframes heartbeat {
    0% { transform: scale(0.95); filter: drop-shadow(0 0 8px rgba(244,67,54,0.5)); }
    100% { transform: scale(1.1); filter: drop-shadow(0 0 16px rgba(244,67,54,0.85)); }
}