/* Global Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

html,
body {
    font-family: 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #bdbdbd;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9e9e9e;
}

/* Selection Color (Tech Blue accent) */
::selection {
    background-color: rgba(41, 182, 246, 0.3);
    /* Tech Blue selection */
    color: #01579B;
}

/* ============================================================================================== */
/* ESTILO DE ENLACES "TECNOLÓGICO" (Referencia Usuario) */
/* ============================================================================================== */

/* Enlaces estándar y MudLinks - AZUL TECNOLÓGICO */
a:not(.mud-button-root),
.mud-link {
    color: #29B6F6 !important;
    /* Tech Blue / Light Blue 400 */
    text-decoration: none;
    transition: color 0.15s ease, text-shadow 0.15s ease;
    cursor: pointer;
}

/* Efecto Hover para enlaces */
a:not(.mud-button-root):hover,
.mud-link:hover {
    color: #4FC3F7 !important;
    /* Lighter Blue */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* Enlaces visitados (mantener azul claro para coherencia) */
a:not(.mud-button-root):visited {
    color: #29B6F6;
}

/* MudBlazor Validations Overrides if needed */
.mud-input-control.mud-input-error .mud-input-slot {
    color: #f44336;
}

/* Smooth transitions */
.mud-button,
.mud-nav-link,
.mud-chip {
    transition: all 0.2s ease-in-out;
}

/* Animación para estados en proceso */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.mud-chip-spinning .mud-chip-icon {
    animation: spin 2s linear infinite;
}