/* =============================================================================
   RutaTurismo360 - Global Alerts Template Styles
   =============================================================================

   Estilos para TODOS los alerts/mensajes del sistema.
   Modificar aquí afecta a TODOS los módulos que usen alerts.

   Prefijo: rt360-alert-*
   Reemplaza: global-alerts.css (legacy, variables no-Radzen)
   Última actualización: Marzo 2026
   Versión: 1.0.0

   ÍNDICE:
   -------
   1.  Base (rt360-alert) — modificador sobre RadzenAlert
   2.  Variantes semánticas (rt360-alert--info/success/warning/danger)
   3.  Alias sin BEM (rt360-alert-info…) — para uso en markup y compat
   4.  Alert inline — dentro de contenido, sin margen grande
   5.  Alert banner — franja ancha a nivel de página
   6.  Alert compacto — notificación pequeña
   7.  Animaciones
   8.  Dark Mode
   9.  Compatibilidad — clases legacy (.alert, .alert-success, etc.)
   ============================================================================= */


/* =============================================================================
   1. BASE — rt360-alert
   Modificador base aplicado sobre cualquier RadzenAlert.
   Uso: <RadzenAlert class="rt360-alert">
   ============================================================================= */

.rt360-alert {
    border-radius: 8px;
    border-left-width: 4px;
    border-left-style: solid;
    animation: rt360-alert-in 0.25s ease-out;
}

.rt360-alert .rz-alert-title {
    font-weight: 600;
}


/* =============================================================================
   2. VARIANTES SEMÁNTICAS (BEM: rt360-alert--{tipo})
   Uso: <RadzenAlert class="rt360-alert rt360-alert--info">
   ============================================================================= */

.rt360-alert--info {
    border-left-color: var(--rz-info) !important;
    background-color: rgba(33, 150, 243, 0.08) !important;
}

.rt360-alert--success {
    border-left-color: var(--rz-success) !important;
    background-color: rgba(76, 175, 80, 0.08) !important;
}

.rt360-alert--warning {
    border-left-color: var(--rz-warning) !important;
    background-color: rgba(255, 152, 0, 0.08) !important;
}

.rt360-alert--danger {
    border-left-color: var(--rz-danger) !important;
    background-color: rgba(244, 67, 54, 0.08) !important;
}


/* =============================================================================
   3. ALIAS SIN BEM (rt360-alert-{tipo})
   Nombres sin guión doble para uso directo en markup o llamadas dinámicas.
   Uso: <RadzenAlert class="rt360-alert-info">
        @($"rt360-alert-{severity}")
   ============================================================================= */

.rt360-alert-info {
    border-left-color: var(--rz-info) !important;
    background-color: rgba(33, 150, 243, 0.08) !important;
    border-radius: 8px;
    border-left-width: 4px;
    border-left-style: solid;
}

.rt360-alert-info--text {
    color: var(--rz-info) !important;
}

.rt360-alert-success {
    border-left-color: var(--rz-success) !important;
    background-color: rgba(76, 175, 80, 0.08) !important;
    border-radius: 8px;
    border-left-width: 4px;
    border-left-style: solid;
}

.rt360-alert-success--text {
    color: var(--rz-success) !important;
}

.rt360-alert-warning {
    border-left-color: var(--rz-warning) !important;
    background-color: rgba(255, 152, 0, 0.08) !important;
    border-radius: 8px;
    border-left-width: 4px;
    border-left-style: solid;
}

.rt360-alert-warning--text {
    color: var(--rz-warning) !important;
}

.rt360-alert-danger {
    border-left-color: var(--rz-danger) !important;
    background-color: rgba(244, 67, 54, 0.08) !important;
    border-radius: 8px;
    border-left-width: 4px;
    border-left-style: solid;
}

.rt360-alert-danger--text {
    color: var(--rz-danger) !important;
}


/* =============================================================================
   4. ALERT INLINE
   Para alertas dentro de secciones de contenido (sin margen grande).
   Uso: <RadzenAlert class="rt360-alert rt360-alert-inline">
   ============================================================================= */

.rt360-alert-inline {
    margin: 0 !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem;
}

.rt360-alert-inline .rz-alert-title {
    font-size: 0.875rem;
    margin-bottom: 0.125rem;
}


/* =============================================================================
   5. ALERT BANNER
   Franja ancha que ocupa el ancho completo del contenedor (mensajes de sistema).
   Uso: <RadzenAlert class="rt360-alert rt360-alert-banner">
   ============================================================================= */

.rt360-alert-banner {
    border-radius: 0 !important;
    border-left: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: 3px solid !important;
    text-align: center;
    padding: 0.75rem 1.5rem !important;
}

.rt360-alert-banner.rt360-alert--info    { border-bottom-color: var(--rz-info) !important; }
.rt360-alert-banner.rt360-alert--success { border-bottom-color: var(--rz-success) !important; }
.rt360-alert-banner.rt360-alert--warning { border-bottom-color: var(--rz-warning) !important; }
.rt360-alert-banner.rt360-alert--danger  { border-bottom-color: var(--rz-danger) !important; }


/* =============================================================================
   6. ALERT COMPACTO
   Notificación pequeña tipo chip/toast (para snackbars o inline cortos).
   Uso: <RadzenAlert class="rt360-alert rt360-alert-compact">
   ============================================================================= */

.rt360-alert-compact {
    padding: 0.5rem 0.875rem !important;
    font-size: 0.8125rem;
    border-radius: 20px !important;
    border-left: none !important;
    border: 1px solid !important;
    display: inline-flex !important;
    width: auto !important;
}

.rt360-alert-compact.rt360-alert--info    { border-color: var(--rz-info) !important; color: var(--rz-info); }
.rt360-alert-compact.rt360-alert--success { border-color: var(--rz-success) !important; color: var(--rz-success); }
.rt360-alert-compact.rt360-alert--warning { border-color: var(--rz-warning) !important; color: var(--rz-warning); }
.rt360-alert-compact.rt360-alert--danger  { border-color: var(--rz-danger) !important; color: var(--rz-danger); }


/* =============================================================================
   7. ANIMACIONES
   ============================================================================= */

@keyframes rt360-alert-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =============================================================================
   8. DARK MODE
   ============================================================================= */

html[data-theme="dark"] .rt360-alert--info,
html[data-theme="dark"] .rt360-alert-info {
    background-color: rgba(40, 130, 245, 0.8) !important;
}

html[data-theme="dark"] .rt360-alert--success,
html[data-theme="dark"] .rt360-alert-success {
    background-color: rgba(76, 175, 80, 0.80) !important;
}

html[data-theme="dark"] .rt360-alert--warning,
html[data-theme="dark"] .rt360-alert-warning {
    background-color: rgba(255, 152, 0, 0.80) !important;
}

html[data-theme="dark"] .rt360-alert--danger,
html[data-theme="dark"] .rt360-alert-danger {
    background-color: rgba(244, 67, 54, 0.8) !important;
}

html[data-theme="dark"] .rt360-alert .rz-alert-title {
    color: rgba(255, 255, 255, 0.92) !important;
}

html[data-theme="dark"] .rt360-alert-compact {
    background-color: transparent !important;
}

html[data-theme="dark"] .rt360-alert-info--text,
html[data-theme="dark"] .rt360-alert-success--text,
html[data-theme="dark"] .rt360-alert-warning--text,
html[data-theme="dark"] .rt360-alert-danger--text {
    color: rgba(255,255,255, 0.8) !important;
}

/* =============================================================================
   9. COMPATIBILIDAD — Clases legacy
   Mantiene funcionando el código anterior que usa .alert / .alert-success etc.
   ============================================================================= */

.rz-alert.alert,
.alert {
    border-radius: 8px !important;
    border-left: 4px solid !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

.rz-alert.alert-primary,
.alert-primary {
    background-color: rgba(156, 39, 176, 0.08) !important;
    border-left-color: var(--rz-primary) !important;
}

.rz-alert.alert-success,
.alert-success {
    background-color: rgba(76, 175, 80, 0.08) !important;
    border-left-color: var(--rz-success) !important;
}

.rz-alert.alert-warning,
.alert-warning {
    background-color: rgba(255, 152, 0, 0.08) !important;
    border-left-color: var(--rz-warning) !important;
}

.rz-alert.alert-danger,
.alert-danger {
    background-color: rgba(244, 67, 54, 0.08) !important;
    border-left-color: var(--rz-danger) !important;
}

.rz-alert.alert-info,
.alert-info {
    background-color: rgba(33, 150, 243, 0.08) !important;
    border-left-color: var(--rz-info) !important;
}


/* =============================================================================
   ALERT LIST
   Indentación para listas de ítems dentro de un RadzenAlert.
   Uso: <RadzenStack class="rt360-alert-list">
   ============================================================================= */

.rt360-alert-list {
    margin-left: 1rem;
}


/* =============================================================================
   10. TRIAL BANNER — Franja de aviso de expiración del período de prueba
   Se coloca entre el header y el contenido principal de la app.
   Uso: <div class="rt360-trial-banner">
   ============================================================================= */

.rt360-trial-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.45rem 1.25rem;
    background: linear-gradient(90deg, #e65100 0%, #f57c00 50%, #e65100 100%);
    background-size: 200% 100%;
    animation: rt360-trial-slide 4s linear infinite;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 6px rgba(230, 81, 0, 0.35);
}

.rt360-trial-banner--urgent {
    background: linear-gradient(90deg, #b71c1c 0%, #c62828 50%, #b71c1c 100%);
    background-size: 200% 100%;
    animation: rt360-trial-slide 2s linear infinite;
    box-shadow: 0 2px 6px rgba(183, 28, 28, 0.45);
}

.rt360-trial-banner-separator {
    opacity: 0.45;
    user-select: none;
}

.rt360-trial-banner-cta {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    padding: 0.2rem 0.8rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
    line-height: 1.5;
}

.rt360-trial-banner-cta:hover {
    background: rgba(255, 255, 255, 0.32);
}

.rt360-trial-banner-cta--busy {
    opacity: 0.7;
    cursor: not-allowed;
}

.rt360-trial-banner-link {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.rt360-trial-banner-link:hover {
    color: #fff;
}

@keyframes rt360-trial-slide {
    0%   { background-position: 200% 0; }
    100% { background-position: 0% 0; }
}

/* Dark mode — el banner ya es oscuro por naturaleza, sin cambios */

/* =============================================================================
   FIN DEL ARCHIVO
   ============================================================================= */