body {
            background-color: #CA1E25 !important;
            /* tu rojo original */
        }


/* 🔹 Swiper con altura de 400px en pantallas grandes y 200px en móviles */
        .swiper {
            width: 100%;
            height: 400px;
        } 

        @media (max-width: 768px) {
            .swiper {
                height: 234px;
            }
        }

        /* 🔹 Cada slide ocupa toda la altura del Swiper */
        .swiper-slide {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        /* 🔹 Imagen de fondo con desenfoque */
        .blur-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: blur(0.9px) brightness(1.4); /* 👈 más brillante */
            z-index: 1;
            margin-top: 24px;
        }



        /* 🔹 Contenedor del contenido: centrado completamente */
        .slide-content {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            z-index: 2;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: white;
            /* 🔥 Asegura que el texto siempre sea blanco */
            background: rgba(0, 0, 0, 0.6);
            /* 🔥 Fondo oscuro semitransparente */
            padding: 10px;
            border-radius: 0px;
            color: white;
            /* 🔥 Asegura que el texto sea visible */
        }



        .title-container {
            font-weight: bold;
            font-size: 1.2em;
            margin-bottom: 10px;
            /* Espacio entre título y texto */
            width: 100%;
            color: white;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
            /* 🔥 Agrega sombra negra difusa */
        }

        .text-container {
            width: 100%;
            /* 🔥 Se expande para alinearse bien */
            max-width: 80%;
            /* Mantiene buen ancho sin desbordar */
            word-wrap: break-word;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
            /* 🔥 Agrega sombra negra difusa */
        }

        /* 🔹 Estilos del título */
        .slide-title {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 0px;
            /* 🔥 Espaciado entre el título y el texto */
            color: white;


        }

        /* 🔹 Estilos del texto */
        .slide-text {
            max-width: 80%;
            /* Evita que el texto sea demasiado ancho */
            word-wrap: break-word;
            /* 🔥 Permite que el texto largo haga saltos de línea */
            text-align: center;
            color: white;
        }

        .online_p {
            margin-top: 0;
            padding-top: 0;
            color: #00ff00;
            font-size: 0.7rem;
        }

        /* 🔹 Ajustes en dispositivos móviles */
        @media (max-width: 768px) {
            .slide-title {
                font-size: 1.3rem;
            }

            .slide-text {
                font-size: 1rem;
            }
        }

        .timestamp-container {
            position: absolute;
            bottom: 10px;
            /* 📌 Lo posiciona en la parte inferior */
            right: 15px;
            /* 📌 Lo mueve a la esquina derecha */
            /*background: rgba(0, 0, 0, 0.6); /* 🔥 Fondo semitransparente para mejorar visibilidad */
            color: whitesmoke;
            /* 🎨 Texto blanco */
            padding: 5px 10px;
            font-size: 0.6em;
            border-radius: 5px;
        }

        .pswp__bg {
            background-color: black !important;
            opacity: 1 !important;
        }

        /* Contenedor general de texto */
        .slider-text-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.5);
            padding: 1em 1.5em;
            border-radius: 10px;
            color: white;
            text-align: center;
            z-index: 2;
            animation: fadeInUp 0.6s ease-out;
        }

        /* Animación */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        /* Fondo difuminado */
        .blur-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: blur(0.9px);
            z-index: 1;
        }

        /* Capa oscura para contraste */
        .slider-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            z-index: 2;
        }


        /* Título subrayado */
        .slide-title {
            text-decoration: underline !important;
            text-underline-offset: 3px;
            /* mejora la visibilidad */
            text-decoration-thickness: 2px;
            /* opcional */
        }


        /* Estado en línea */
        .online_p {
            font-size: 0.9em;
            margin-bottom: 0.3em;
            color: #00ff00;
            /* verde conectado */
        }

        /* Texto principal */
        .slide-text {
            font-size: 1.1em;
            line-height: 1.5;
            margin-bottom: 0.8em;
            color: inherit;
            text-decoration: none;
            border: none;
            box-shadow: none;
        }

        /* Fecha / ubicación */
        .timestamp-container {
            font-size: 0.8em;
            color: #ccc;
            margin-top: auto;

        }

        .slide-title {
            text-decoration: underline;
            text-underline-offset: 3px;
            text-decoration-thickness: 2px;
        }

        .underline-rojo {
            text-decoration-color: red !important;
        }

        .underline-azul {
            text-decoration-color: #007BFF !important;
        }

        .underline-morado {
            text-decoration-color: purple !important;
        }

        .underline-default {
            text-decoration-color: white !important;
        }