:root {
    /* --- VARIABLES DINÁMICAS --- */
    --primary-color: #1a2a6c;
    --gradient-end: #2a4858;
    --btn-color-top: #2d4a8a;
    --accent-color: #b8860b;
    
    /* --- GRADIENTES DERIVADOS --- */
    --primary-gradient: linear-gradient(180deg, var(--primary-color), var(--gradient-end));
    --btn-gradient: linear-gradient(to bottom, var(--btn-color-top), var(--primary-color));

    /* --- COLORES DE ESTRUCTURA --- */
    --bg-color: #f0f2f5;
    --card-bg: #ffffff;
    --text-main: #333333;
    --text-dim: #666666;
    --input-bg: #f4f7f9;
    --input-border: #e1e4e8;
    --error-color: #ff4d4d;
    --success-color: #2ecc71;
}

[data-theme="dark"] {
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --text-main: #ffffff;
    --text-dim: #a0a0a0;
    --input-bg: #2a2a2a;
    --input-border: #333333;
    --accent-color: #d4af37; /* Dorado un poco más brillante para modo oscuro */
}

/* --- ESTILOS GENERALES --- */
body { 
    font-family: "Inter", sans-serif; 
    background-color: var(--bg-color); 
    margin: 0; display: flex; justify-content: center; align-items: center; 
    min-height: 100vh; transition: 0.3s;
    padding: 40px 20px; box-sizing: border-box; position: relative;
}

.setup-card { 
    background-color: var(--card-bg); width: 100%; 
    max-width: 420px; border-radius: 35px; 
    overflow: visible; /* IMPORTANTE: Cambiar de hidden a visible */
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    position: relative; /* Añadir esto para que el botón se alinee aquí */
}

.card-header {
    background: var(--primary-gradient);
    padding: 15px 20px; 
    text-align: center;
    color: white;
}

.card-header h1 { font-size: 1.8rem; margin: 0; line-height: 1.2; }
.card-header h2 { margin: 0; font-size: 1.1rem; font-weight: 400; opacity: 0.9; }

.form-content { padding: 30px; }

.setup-card { 
    background-color: var(--card-bg); 
    width: 100%; 
    max-width: 420px; 
    border-radius: 35px; 
    overflow: visible; /* IMPORTANTE: Cambiar de hidden a visible */
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    position: relative; /* Añadir esto para que el botón se alinee aquí */
}

.theme-switch {
    position: absolute; 
    top: -60px; /* Lo movemos arriba de la tarjeta */
    right: 10px; /* Alineado a la derecha de la tarjeta */
    background: var(--input-bg); 
    border: 1px solid var(--input-border);
    width: 45px; 
    height: 45px; 
    border-radius: 50%; 
    cursor: pointer; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    font-size: 1.2rem; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000; 
    transition: 0.3s;
}

[data-theme="dark"] #themeIcon { color: #ff9d00; text-shadow: 0 0 8px rgba(255, 157, 0, 0.4); }
[data-theme="light"] #themeIcon { color: #5c6bc0; }

.form-group { margin-bottom: 1.5rem; text-align: left; }
.form-group label { 
    display: flex; align-items: center; gap: 10px;
    font-size: 0.9rem; margin-bottom: 8px; color: var(--text-main); font-weight: 600;
}
.form-group label i { color: var(--accent-color); width: 16px; }

/* --- INPUTS Y SELECTS (CORREGIDO) --- */
input, select { 
    width: 100%; 
    padding: 12px; 
    background-color: var(--input-bg) !important; 
    border: 1px solid var(--input-border); 
    border-radius: 8px; 
    color: var(--text-main) !important; 
    box-sizing: border-box; 
    font-size: 1rem; 
    transition: all 0.3s ease;
}

/* Manejo del placeholder para que no se pierda en el oscuro */
input::placeholder { color: var(--text-dim); opacity: 0.7; }

/* Estado Focus Dinámico */
input:focus, select:focus {
    border-color: var(--accent-color) !important;
    outline: none;
    /* Quitamos el cambio a card-bg para evitar parpadeos blancos */
    background-color: var(--input-bg) !important; 
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.1);
}

/* Colores específicos para opciones del select en modo oscuro */
[data-theme="dark"] select option {
    background-color: #1e1e1e;
    color: #ffffff;
}

input.invalid { border: 2px solid var(--error-color) !important; }
input.valid { border: 2px solid var(--success-color) !important; }

/* Botón */
button#submitBtn { 
    width: 100%; padding: 15px; 
    background: var(--btn-gradient); 
    border: 2px solid var(--accent-color); 
    border-radius: 10px; 
    color: white; font-weight: 700; cursor: pointer; font-size: 1.1rem;
    transition: all 0.2s;
}
button#submitBtn:active { transform: scale(0.98); }
button#submitBtn:disabled { opacity: 0.5; cursor: not-allowed; }

#razonSocial { text-transform: uppercase; }

/* 1. Obliga al navegador a usar el fondo oscuro en las sugerencias */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    /* El truco es usar un shadow interno muy grande con tu color de fondo */
    -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
    /* Esto cambia el color de la letra al de tu variable */
    -webkit-text-fill-color: var(--text-main) !important;
    /* Evita que el navegador cambie el color después de un tiempo */
    transition: background-color 5000s ease-in-out 0s;
}

/* 2. Ajuste para que el icono del ojo y el texto se mantengan visibles */
[data-theme="dark"] input {
    color-scheme: dark; /* Ayuda al navegador a entender el contexto oscuro */
}