/*
 * Campos de formulario — Ivoire Hosting
 * ─────────────────────────────────────────────────────────────────────────────
 * El borde que trae el tema es `#e5e7eb`: un gris tan claro que sobre el fondo blanco de la tarjeta
 * casi no se ve. Medido con el navegador, ese borde tiene un contraste de **1,24** contra el fondo.
 * El mínimo que pide la norma de accesibilidad para los elementos de interfaz es **3,0**, así que
 * estaba por menos de la mitad: los campos no se distinguían del fondo.
 *
 * Ahora el borde es el azul del tema (`#066fd1`, el mismo de los botones y los enlaces), que sobre
 * blanco da un contraste de 5. Combinado con una sombra suave, el campo se ve como una caja sobre el
 * papel en vez de como un hueco.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * LO QUE HAY QUE SABER SI SE TOCAN ESTOS COLORES
 * ─────────────────────────────────────────────────────────────────────────────
 *
 *  1. **El modo oscuro necesita otro azul.** Un azul oscuro sobre fondo oscuro no se ve. Por eso el
 *     color no está escrito a mano en cada regla, sino en dos variables que cambian según el modo.
 *
 *  2. **El foco tiene que notarse más que el estado normal.** Si el borde normal ya es azul, al
 *     enfocar un campo no basta con ponerlo del mismo azul: hay que oscurecerlo y añadir un halo.
 *     Medido antes de este cambio, el foco NO cambiaba el borde y la sombra era casi invisible, así
 *     que no había forma de saber en qué campo se estaba escribiendo.
 *
 *  3. **No se toca el estado de error.** Tabler pinta en rojo los campos con `.is-invalid`, y esas
 *     reglas tienen más peso que éstas, así que siguen funcionando. Eso es importante: un campo mal
 *     rellenado tiene que seguir viéndose rojo, no azul.
 */

:root {
    --ih-campo-borde: #066fd1;
    --ih-campo-borde-foco: #04539e;
    --ih-campo-halo: rgba(6, 111, 209, 0.18);
    --ih-campo-sombra: 0 1px 2px rgba(6, 111, 209, 0.08);
}

[data-bs-theme="dark"] {
    /* Sobre fondo oscuro hace falta un azul más claro, o el borde desaparece. */
    --ih-campo-borde: #4d9be6;
    --ih-campo-borde-foco: #8cc2f5;
    --ih-campo-halo: rgba(77, 155, 230, 0.25);
    --ih-campo-sombra: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ── Campos de texto, contraseñas, teléfono, áreas de texto y desplegables ── */

.form-control,
.form-select {
    border-color: var(--ih-campo-borde);
    box-shadow: var(--ih-campo-sombra);
}

/*
 * El borde de los desplegables lo pinta el navegador con un estilo propio en algunos sistemas, y
 * `border-color` solo no basta: hay que decirle explícitamente que use el color de la regla.
 */
.form-select {
    border: 1px solid var(--ih-campo-borde);
}

/* ── Al pasar por encima ── */

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
    border-color: var(--ih-campo-borde-foco);
}

/* ── Con el foco puesto: más oscuro y con halo ── */

.form-control:focus,
.form-select:focus,
.form-control:focus-visible,
.form-select:focus-visible {
    border-color: var(--ih-campo-borde-foco);
    box-shadow: 0 0 0 3px var(--ih-campo-halo);
    outline: none;
}

/* ── Casillas y botones de opción ── */

.form-check-input {
    border-color: var(--ih-campo-borde);
}

.form-check-input:checked {
    background-color: var(--ih-campo-borde);
    border-color: var(--ih-campo-borde);
}

.form-check-input:focus {
    border-color: var(--ih-campo-borde-foco);
    box-shadow: 0 0 0 3px var(--ih-campo-halo);
}

/* ── El campo de teléfono del registro ────────────────────────────────────── */

/*
 * El selector de país (`intl-tel-input`) dibuja su propio borde alrededor del campo, así que hay que
 * teñirlo también o quedaría un marco gris rodeando un campo azul.
 */
.iti__tel-input,
.iti--separate-dial-code .iti__selected-dial-code {
    border-color: var(--ih-campo-borde);
}

/*
 * Y por debajo del selector hay un borde propio: es el que se ve como una línea fina siguiendo el
 * contorno. Sin esto, el campo de teléfono se vería distinto a los demás.
 */
.iti {
    --iti-border-color: var(--ih-campo-borde);
}

/* ── Deshabilitados y de solo lectura ─────────────────────────────────────── */

/*
 * Un campo deshabilitado se tiene que seguir viendo deshabilitado: si mantuviera el azul parecería
 * que se puede escribir en él.
 */
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    border-color: var(--tblr-border-color, #e5e7eb);
    box-shadow: none;
}

/* ── Y los campos de subir archivos, si algún día se usan ─────────────────── */

.form-control[type="file"]::file-selector-button {
    border-inline-end-color: var(--ih-campo-borde);
}