﻿/* Sistema de alertas para móviles */
@media (max-width: 767px) {
    /* Contenedor principal */
    section#alerts {
        margin: 0 0 15px 0; /* Añadir separación inferior */
        padding: 0;
        width: 100%;
    }

        section#alerts .container.slice {
            padding: 0;
            margin: 0;
            width: 100%;
        }

    /* Ocultar versión de escritorio en móvil */
    .marquee.hidden-xs.hidden-sm {
        display: none !important;
    }

    /* Alerta móvil simplificada */
    .mobile-alert {
        display: flex;
        align-items: center;
        padding: 12px 15px;
        width: 100%;
        box-sizing: border-box;
        background-color: #f8f9fa;
        border-top: 1px solid rgba(0,0,0,0.1);
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

        /* Icono de la alerta */
        .mobile-alert .alert-icon {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
        }

            .mobile-alert .alert-icon i {
                font-size: 18px;
            }

        /* Mensaje de la alerta */
        .mobile-alert .alert-message {
            flex-grow: 1;
            font-size: 14px;
            line-height: 1.4;
            color: #333;
        }

        /* Variantes por tipo de alerta */
        .mobile-alert.alert-info {
            background-color: #e3f2fd;
        }

            .mobile-alert.alert-info .alert-icon {
                color: #0c5460;
            }

        .mobile-alert.alert-warning {
            background-color: #fff3cd;
        }

            .mobile-alert.alert-warning .alert-icon {
                color: #856404;
            }

        .mobile-alert.alert-danger {
            background-color: #f8d7da;
        }

            .mobile-alert.alert-danger .alert-icon {
                color: #721c24;
            }

        .mobile-alert.alert-success {
            background-color: #d4edda;
        }

            .mobile-alert.alert-success .alert-icon {
                color: #155724;
            }
}

/* Asegurar que las alertas móviles SOLO aparecen en móviles */
@media (min-width: 768px) {
    .mobile-alert-container {
        display: none !important;
    }
}
