/* ================================
   UTILIDADES DE ICONOS
   Reemplazo de emojis por Font Awesome
   ================================ */

/* Mapeo de iconos comunes */
.icon-success,
.icon-check {
    color: var(--success);
}

.icon-error,
.icon-times {
    color: var(--danger);
}

.icon-warning,
.icon-exclamation {
    color: var(--warning);
}

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

/* Tamaños de iconos */
.icon-xs { font-size: 0.75rem; }
.icon-sm { font-size: 0.875rem; }
.icon-md { font-size: 1rem; }
.icon-lg { font-size: 1.25rem; }
.icon-xl { font-size: 1.5rem; }
.icon-2xl { font-size: 2rem; }

/* Iconos en mensajes */
.message .icon {
    flex-shrink: 0;
    font-size: 1.375rem;
    margin-top: 0.125rem;
}

/* Iconos en botones */
.btn .icon {
    flex-shrink: 0;
}

/* Iconos en badges */
.badge .icon {
    margin-right: 0.25rem;
}

/* Spinner/Loading */
.icon-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Colores específicos por contexto */
.icon-presente { color: var(--success); }
.icon-tardanza { color: var(--warning); }
.icon-ausente { color: var(--danger); }
.icon-justificado { color: var(--info); }

/* Dark mode adjustments - Ahora usa variables del sistema */
/* Los colores de estado ya se ajustan automáticamente en variables.css */
/* No necesitamos overrides específicos porque las variables se adaptan */