/* ──────────────────────────────────────────────────────────────────────────
 * Estilos genéricos de formularios institucionales (usados junto a form-validator.js)
 * Copiar/pegar al final de tu styles.css compilado, o importar aparte.
 * Pensado para convivir con Tailwind: estas clases cubren lo que Tailwind no
 * resuelve directo (estados de error/ok con !important, estructura de sección).
 *
 * Escala tipográfica: solo dos tamaños, alineados 1:1 con Tailwind para que
 * nada quede en un decimal huérfano fuera de escala.
 *   0.75rem  (12px) = text-xs → mensajes de error, hints, texto meta
 *   0.875rem (14px) = text-sm → labels, opciones de radio/checkbox, inputs
 * font-family explícito en cada regla (no depende de heredar font-montserrat
 * de un ancestro — el componente queda autocontenido).
 * ────────────────────────────────────────────────────────────────────────── */

.fv-input-error { border-color: #ef4444 !important; box-shadow: 0 0 0 2px rgba(239,68,68,.12) !important; }
.fv-input-ok    { border-color: #22c55e !important; }
.fv-group-error { outline: 2px solid #ef4444; outline-offset: 3px; border-radius: 0.5rem; }
.fv-error-msg
{
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: #dc2626;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.3rem;
}
.fv-error-msg .material-symbols-outlined { font-size: 0.85rem; }

.form-field { display: flex; flex-direction: column; }
.form-label
{
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.35rem;
}
.form-label .req { color: #9D2236; }
.form-input
{
    width: 100%;
    border: 1.5px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    color: #111827;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.form-input:focus { border-color: #1997f0; box-shadow: 0 0 0 3px rgba(25,151,240,.15); }
.form-input:hover:not(:focus) { border-color: #b0b8c4; }
textarea.form-input { resize: vertical; min-height: 90px; line-height: 1.55; }
.form-hint
{
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.2rem;
}

.sec-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.sec-num
{
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: #1997f0;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(25,151,240,.35);
}
.sec-title
{
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0f172a;
}
.sec-line { flex: 1; border: none; border-top: 1.5px solid rgba(25,151,240,.25); }

/* El tamaño/color/font va en la fila completa (no solo en un <span> interno)
   para que dé igual si el texto de la opción está envuelto en <span> o suelto
   como texto del <label> — ambos casos quedan al mismo tamaño. */
.radio-row,
.check-row
{
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.4375rem;
    border: 1.5px solid transparent;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #374151;
    transition: background 0.12s, border-color 0.12s;
}
.radio-row:hover,
.check-row:hover { background: #f0f9ff; }
.radio-row:has(input:checked),
.check-row:has(input:checked)
{
    background: #eff6ff;
    border-color: rgba(25,151,240,.4);
    color: #0c4a8a;
    font-weight: 600;
}
.radio-row input,
.check-row input { margin-top: 0.15rem; accent-color: #1997f0; width: 1rem; height: 1rem; flex-shrink: 0; }
.radio-desc
{
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.1rem;
}