/**
 * THEME VARIABLES CSS
 * Define las variables CSS personalizadas (CSS Custom Properties)
 * que se inyectan dinámicamente desde JavaScript
 */

:root {
    --color-fondo: #1e3bb3;
    --color-texto: #ffffff;
    --color-botones: #4849bf;
    --color-acentos: #2563EB;

    --color-acentos-hover: rgba(37, 99, 235, 0.8);
    --color-acentos-light: rgba(37, 99, 235, 0.1);
    --color-acentos-focus: rgba(37, 99, 235, 0.3);
    --color-acentos-disabled: rgba(37, 99, 235, 0.5);

    --transition-speed: 0.3s;
    --transition-timing: ease-in-out;
}

/**
 * BOTONES DE LOGIN/RECOVER
 * (Los estilos dinámicos se aplican vía theme-manager.js y home-theme.css)
 */

.op-auth-button {
    background-color: var(--color-botones);
    color: var(--color-texto);
    transition: all var(--transition-speed) var(--transition-timing);
}

.op-auth-button:hover {
    background-color: var(--color-acentos-hover);
    opacity: 0.9;
}

.op-auth-button:disabled {
    background-color: var(--color-acentos-disabled);
    opacity: 0.6;
    cursor: not-allowed;
}

/**
 * LINKS Y ELEMENTOS INTERACTIVOS
 */

a, .op-auth-link, .op-auth-bottom-link {
    color: var(--color-acentos);
    transition: color var(--transition-speed) var(--transition-timing);
}

a:hover, .op-auth-link:hover, .op-auth-bottom-link:hover {
    color: var(--color-acentos-hover);
}

/**
 * INPUTS Y FORMULARIOS
 */

.op-auth-input {
    border-color: #E5E7EB;
    transition: all var(--transition-speed) var(--transition-timing);
}

.op-auth-input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--color-acentos);
    box-shadow: 0 0 0 2px var(--color-acentos-focus);
}

/* ============================================ */
/* CHECKBOXES Y RADIO BUTTONS */
/* ============================================ */

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--color-acentos);
    border-color: var(--color-acentos);
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    box-shadow: 0 0 0 2px var(--color-acentos-focus);
}