/* Importar fuentes */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
    /* Definición de colores (Variables CSS) */
    --primary: rgb(130, 201, 30);
    --background-light: #f8f7f5;
    --background-dark: #221910;
    --google-blue: rgb(255, 255, 255);
}

body {
    font-family: 'Inter', sans-serif;
}
.color-fondo {
    --tw-bg-opacity: 1;
    background-color: #242424;
}
/* Configuraciones de Material Symbols */
/* --- CORRECCIÓN DE ÍCONOS (OBLIGATORIO) --- */
.material-symbols-outlined {
    /* Esto faltaba: definir la familia de la fuente */
    font-family: 'Material Symbols Outlined'; 
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Tamaño base */
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    
    /* Mejoras de renderizado para móviles */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Tu configuración variable (opcional, pero buena) */
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* El degradado específico de tu nuevo diseño */
.login-gradient {
    background: linear-gradient(135deg, #242424 20%, #0a141e 80%);
}
.color-tarjetas{
    --tw-bg-opacity: 1;
    background-color: #161616;
}
/* Estilos de inputs para limpiar el HTML */
.form-input {
    appearance: none;
    background-color: rgba(255, 255, 255, 0.05); /* bg-white/5 */
}
/* --- HACK PARA QUITAR EL FONDO BLANCO DE CHROME --- */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    /* 1. Forzamos el fondo a un color oscuro sólido (igual a tu fondo) */
    -webkit-box-shadow: 0 0 0 30px #221910 inset !important;
    
    /* 2. Forzamos el texto a blanco */
    -webkit-text-fill-color: white !important;
    
    /* 3. Transición para que no aparezca de golpe */
    transition: background-color 5000s ease-in-out 0s;
    
    /* 4. Mantenemos el borde redondeado */
    border-radius: 0.5rem !important; 
    
    /* 5. Forzamos el color del cursor/caret a blanco */
    caret-color: white;
}

/* --- QUITAR EL BORDE AZUL NATIVO AL HACER CLICK --- */
input:focus {
    outline: none !important; /* Adiós borde azul */
    box-shadow: 0 0 0 2px var(--primary) !important; /* Hola borde naranja */
    border-color: var(--primary) !important;
}