@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body, html {
    background-color: oklch(20.8% .042 265.755) !important; 
    background-image: none !important;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
    color: oklch(96.8% .007 247.896) !important; 
}

/* AQUÍ ESTÁ LA MAGIA CORREGIDA (#root en lugar de #app) */
#root > div > div {
    background-color: oklch(27.9% .041 260.031) !important;
    border-radius: 1rem !important;
    border: 1px solid oklch(44.6% .043 257.281) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
    padding: 2rem !important;
}

input {
    background-color: oklch(20.8% .042 265.755) !important;
    border: 1px solid oklch(44.6% .043 257.281) !important;
    color: oklch(96.8% .007 247.896) !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    transition: all 0.15s ease !important;
}

input:focus {
    outline: none !important;
    border-color: oklch(62.3% .214 259.815) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) !important;
}

button[type="submit"] {
    background-color: oklch(54.6% .245 262.881) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    border: none !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1) !important;
    transition: all 0.15s ease !important;
}

button[type="submit"]:hover {
    background-color: oklch(48.8% .243 264.376) !important;
    cursor: pointer !important;
}

a {
    color: oklch(62.3% .214 259.815) !important;
    text-decoration: none !important;
}

a:hover {
    color: oklch(88.2% .059 254.128) !important;
}

.authelia-logo-container {
    margin-bottom: 1.5rem !important;
}