/**
 * ============================================================================
 * ALERTS.CSS
 * Componente de Alertas - Sistema De Gestión Estudiantes
 * ============================================================================
 * 
 * Componente reutilizable para todas las alertas del sistema.
 * Requiere: sistema-design.css
 * 
 * @author Sistema Académico MINERD
 * @version 2.0.0
 * @date 11 de Enero de 2026
 * ============================================================================
 */

/* ============================================================================
   ALERTA BASE
   ============================================================================ */

.alert {
    padding: var(--spacing-4) var(--spacing-6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-4);
    border: var(--border-1) solid transparent;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    position: relative;
    overflow: hidden;
    transition: var(--transition-base);
}

.alert:last-child {
    margin-bottom: 0;
}

.alert p {
    margin: 0;
    line-height: inherit;
}

.alert.alert-dismissible {
    padding-right: var(--spacing-12);
}

/* ============================================================================
   TIPOS DE ALERTAS
   ============================================================================ */

/* Alerta primaria */
.alert-primary {
    background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
    color: var(--primary-900);
    border-color: var(--primary-200);
}

.alert-primary .alert-icon {
    color: var(--primary-600);
}

.alert-primary .alert-close:hover {
    background: var(--primary-200);
    color: var(--primary-700);
}

/* Alerta de éxito */
.alert-success {
    background: linear-gradient(135deg, var(--success-50), var(--success-100));
    color: var(--success-900);
    border-color: var(--success-200);
}

.alert-success .alert-icon {
    color: var(--success-600);
}

.alert-success .alert-close:hover {
    background: var(--success-200);
    color: var(--success-700);
}

/* Alerta de peligro */
.alert-danger {
    background: linear-gradient(135deg, var(--danger-50), var(--danger-100));
    color: var(--danger-900);
    border-color: var(--danger-200);
}

.alert-danger .alert-icon {
    color: var(--danger-600);
}

.alert-danger .alert-close:hover {
    background: var(--danger-200);
    color: var(--danger-700);
}

/* Alerta de advertencia */
.alert-warning {
    background: linear-gradient(135deg, var(--warning-50), var(--warning-100));
    color: var(--warning-900);
    border-color: var(--warning-200);
}

.alert-warning .alert-icon {
    color: var(--warning-600);
}

.alert-warning .alert-close:hover {
    background: var(--warning-200);
    color: var(--warning-700);
}

/* Alerta de información */
.alert-info {
    background: linear-gradient(135deg, var(--info-50), var(--info-100));
    color: var(--info-900);
    border-color: var(--info-200);
}

.alert-info .alert-icon {
    color: var(--info-600);
}

.alert-info .alert-close:hover {
    background: var(--info-200);
    color: var(--info-700);
}

/* Alerta gris/neutra */
.alert-gray {
    background: linear-gradient(135deg, var(--gray-50), var(--gray-100));
    color: var(--gray-900);
    border-color: var(--gray-200);
}

.alert-gray .alert-icon {
    color: var(--gray-600);
}

.alert-gray .alert-close:hover {
    background: var(--gray-200);
    color: var(--gray-700);
}

/* ============================================================================
   COMPONENTES INTERNOS DE ALERTA
   ============================================================================ */

/* Icono de alerta */
.alert-icon {
    flex-shrink: 0;
    font-size: var(--text-lg);
    line-height: 1;
    margin-top: var(--spacing-1);
    width: var(--spacing-5);
    text-align: center;
}

.alert-icon svg {
    width: 1.25em;
    height: 1.25em;
    fill: currentColor;
}

/* Contenido de alerta */
.alert-content {
    flex: 1;
    min-width: 0;
}

.alert-title {
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-1);
    font-size: var(--text-base);
}

.alert-message {
    color: inherit;
    margin: 0;
}

.alert-message a {
    color: inherit;
    text-decoration: underline;
    font-weight: var(--font-semibold);
}

.alert-message a:hover {
    text-decoration: none;
}

/* Botón de cierre */
.alert-close {
    position: absolute;
    top: var(--spacing-3);
    right: var(--spacing-3);
    background: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: var(--radius-full);
    color: inherit;
    font-size: var(--text-base);
    cursor: pointer;
    width: var(--spacing-8);
    height: var(--spacing-8);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    flex-shrink: 0;
    opacity: 0.7;
}

.alert-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.15);
}

.alert-close:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   VARIANTES DE ALERTAS
   ============================================================================ */

/* Alerta outline */
.alert-outline {
    background: var(--white);
    border-width: var(--border-2);
}

.alert-outline.alert-primary {
    color: var(--primary-700);
    border-color: var(--primary-500);
}

.alert-outline.alert-success {
    color: var(--success-700);
    border-color: var(--success-500);
}

.alert-outline.alert-danger {
    color: var(--danger-700);
    border-color: var(--danger-500);
}

.alert-outline.alert-warning {
    color: var(--warning-700);
    border-color: var(--warning-500);
}

.alert-outline.alert-info {
    color: var(--info-700);
    border-color: var(--info-500);
}

/* Alerta sólida */
.alert-solid {
    background: var(--gray-900);
    color: var(--white);
    border-color: var(--gray-900);
}

.alert-solid.alert-primary {
    background: var(--primary-600);
    border-color: var(--primary-600);
}

.alert-solid.alert-success {
    background: var(--success-600);
    border-color: var(--success-600);
}

.alert-solid.alert-danger {
    background: var(--danger-600);
    border-color: var(--danger-600);
}

.alert-solid.alert-warning {
    background: var(--warning-600);
    border-color: var(--warning-600);
}

.alert-solid.alert-info {
    background: var(--info-600);
    border-color: var(--info-600);
}

/* Alerta suave */
.alert-soft {
    border: var(--border-0);
    background: var(--gray-50);
    color: var(--gray-700);
}

.alert-soft.alert-primary {
    background: var(--primary-50);
    color: var(--primary-800);
}

.alert-soft.alert-success {
    background: var(--success-50);
    color: var(--success-800);
}

.alert-soft.alert-danger {
    background: var(--danger-50);
    color: var(--danger-800);
}

.alert-soft.alert-warning {
    background: var(--warning-50);
    color: var(--warning-800);
}

.alert-soft.alert-info {
    background: var(--info-50);
    color: var(--info-800);
}

/* ============================================================================
   TAMAÑOS DE ALERTAS
   ============================================================================ */

/* Alerta pequeña */
.alert-sm {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--text-xs);
}

.alert-sm .alert-icon {
    font-size: var(--text-base);
}

.alert-sm.alert-dismissible {
    padding-right: var(--spacing-10);
}

.alert-sm .alert-close {
    width: var(--spacing-6);
    height: var(--spacing-6);
    font-size: var(--text-sm);
}

/* Alerta grande */
.alert-lg {
    padding: var(--spacing-5) var(--spacing-8);
    font-size: var(--text-base);
}

.alert-lg .alert-icon {
    font-size: var(--text-2xl);
}

.alert-lg .alert-close {
    width: var(--spacing-10);
    height: var(--spacing-10);
    font-size: var(--text-lg);
}

/* ============================================================================
   ALERTAS CON ACCIONES
   ============================================================================ */

.alert-actions {
    display: flex;
    gap: var(--spacing-3);
    margin-top: var(--spacing-3);
    flex-wrap: wrap;
}

.alert-actions .btn {
    font-size: var(--text-xs);
    padding: var(--spacing-2) var(--spacing-4);
}

.alert-actions .btn-sm {
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--text-xs);
}

/* ============================================================================
   ALERTAS CON LISTA DE ELEMENTOS
   ============================================================================ */

.alert-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.alert-list li {
    margin-bottom: var(--spacing-1);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
}

.alert-list li:last-child {
    margin-bottom: 0;
}

.alert-list li::before {
    content: '•';
    color: inherit;
    font-weight: var(--font-bold);
    margin-top: var(--spacing-1);
}

/* ============================================================================
   ALERTAS CON PROGRESO
   ============================================================================ */

.alert-progress {
    margin-top: var(--spacing-3);
}

.alert-progress-bar {
    height: var(--spacing-2);
    background: rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
}

.alert-progress-fill {
    height: 100%;
    background: var(--primary-500);
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
    position: relative;
}

.alert-progress-text {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: inherit;
    margin-top: var(--spacing-1);
    text-align: center;
}

/* ============================================================================
   ALERTAS EN LÍNEA
   ============================================================================ */

.alert-inline {
    display: inline-flex;
    margin-bottom: 0;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--text-xs);
}

.alert-inline .alert-icon {
    font-size: var(--text-sm);
    margin-top: 0;
}

.alert-inline .alert-close {
    display: none;
}

/* ============================================================================
   BARRA DE ALERTAS (NOTIFICACIONES)
   ============================================================================ */

.alerts-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-tooltip);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-2);
    pointer-events: none;
}

.alerts-top-right {
    top: var(--spacing-4);
    right: var(--spacing-4);
    left: auto;
    max-width: 400px;
}

.alerts-top-left {
    top: var(--spacing-4);
    left: var(--spacing-4);
    right: auto;
    max-width: 400px;
}

.alerts-bottom-right {
    bottom: var(--spacing-4);
    right: var(--spacing-4);
    top: auto;
    left: auto;
    max-width: 400px;
}

.alerts-bottom-left {
    bottom: var(--spacing-4);
    left: var(--spacing-4);
    top: auto;
    right: auto;
    max-width: 400px;
}

.alert-toast {
    pointer-events: all;
    animation: alertSlideIn 0.3s var(--ease-out);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-2);
}

.alert-toast.removing {
    animation: alertSlideOut 0.3s var(--ease-in);
}

@keyframes alertSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes alertSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ============================================================================
   ALERTAS CON CÓDIGO
   ============================================================================ */

.alert-code {
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-md);
    padding: var(--spacing-2);
    font-family: var(--font-family-mono);
    font-size: var(--text-xs);
    color: inherit;
    margin: var(--spacing-2) 0;
    word-break: break-all;
}

/* ============================================================================
   ALERTAS CONTEXTUALES
   ============================================================================ */

/* Alerta en formulario */
.alert-form {
    margin-bottom: var(--spacing-4);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Alerta en tarjeta */
.alert-card {
    margin: var(--spacing-4);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* Alerta en modal */
.alert-modal {
    margin: var(--spacing-4);
    border-radius: var(--radius-lg);
}

/* ============================================================================
   ESTADOS DE ALERTAS
   ============================================================================ */

.alert-entrance {
    animation: alertEntrance 0.5s var(--ease-out);
}

@keyframes alertEntrance {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.alert-exit {
    animation: alertExit 0.3s var(--ease-in);
}

@keyframes alertExit {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
}

.alert-blink {
    animation: alertBlink 2s infinite;
}

@keyframes alertBlink {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0.5;
    }
}

.alert-shake {
    animation: alertShake 0.5s;
}

@keyframes alertShake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-3px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(3px);
    }
}

.alert-pulse {
    animation: alertPulse 2s infinite;
}

@keyframes alertPulse {
    0% {
        box-shadow: var(--shadow-sm);
    }
    50% {
        box-shadow: var(--shadow-primary);
    }
    100% {
        box-shadow: var(--shadow-sm);
    }
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

/* Móvil */
@media (max-width: 768px) {
    .alert {
        padding: var(--spacing-3) var(--spacing-4);
        margin-bottom: var(--spacing-3);
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-2);
    }
    
    .alert-icon {
        margin-top: 0;
        margin-bottom: var(--spacing-1);
    }
    
    .alert-actions {
        justify-content: center;
        width: 100%;
    }
    
    .alert-actions .btn {
        flex: 1;
        min-width: 0;
    }
    
    .alert-toast {
        left: var(--spacing-2);
        right: var(--spacing-2);
        max-width: calc(100vw - var(--spacing-4));
    }
    
    .alert-top-right,
    .alert-top-left {
        top: var(--spacing-2);
        left: var(--spacing-2);
        right: var(--spacing-2);
    }
    
    .alert-bottom-right,
    .alert-bottom-left {
        bottom: var(--spacing-2);
        left: var(--spacing-2);
        right: var(--spacing-2);
    }
}

/* ============================================================================
   UTILIDADES
   ============================================================================ */

.alert-no-margin {
    margin-bottom: 0;
}

.alert-no-border {
    border: var(--border-0);
}

.alert-full-width {
    width: 100%;
}

.alert-centered {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--container-md);
}

.alert-compact {
    padding: var(--spacing-2) var(--spacing-3);
    gap: var(--spacing-2);
}

.alert-compact .alert-icon {
    font-size: var(--text-base);
}

.alert-compact .alert-close {
    width: var(--spacing-6);
    height: var(--spacing-6);
    font-size: var(--text-sm);
}

/* ============================================================================
   ACCESIBILIDAD
   ============================================================================ */

.alert:focus {
    outline: var(--border-2) solid var(--primary-500);
    outline-offset: var(--spacing-1);
}

.alert-close:focus {
    outline: var(--border-2) solid var(--primary-500);
    outline-offset: var(--spacing-1);
}

/* Para screen readers */
.alert[role="alert"] {
    animation: alertEntrance 0.5s var(--ease-out);
}

.alert[aria-live="polite"] {
    /* Indica que el contenido es importante pero no urgente */
}

.alert[aria-live="assertive"] {
    /* Indica que el contenido es importante y urgente */
}

.alert[aria-live="off"] {
    /* Indica que el contenido no es importante para anunciar */
}

/* ============================================================================
   IMPRESIÓN
   ============================================================================ */

@media print {
    .alert {
        border: var(--border-1) solid var(--gray-300);
        background: var(--gray-50) !important;
        color: var(--gray-900) !important;
        box-shadow: none;
        break-inside: avoid;
    }
    
    .alert-close {
        display: none;
    }
    
    .alert-actions {
        display: none;
    }
    
    .alert-toast {
        position: static;
        animation: none;
        margin: var(--spacing-2) 0;
    }
}