/* Estado visual de los campos de formulario en TODO el proyecto.
   Ver static/assets/js/form-state.js

   - Tema claro (por defecto): relleno de color tenue según el estado
     (gris = vacío, verde = diligenciado, rojo = obligatorio sin diligenciar).
   - Tema oscuro (botón luna 🌙 del topbar, html[data-theme="dark"]): el
     fondo siempre se fuerza blanco (para que siga siendo legible) y el
     estado se marca solo con el color del borde. */

/* ── Tema claro: relleno de color (comportamiento original) ── */
.field-state-empty {
    background-color: #f1f3f7 !important;
    border-color: #e3e7ee !important;
}

.field-state-filled {
    background-color: rgba(10, 207, 151, .10) !important;
    border-color: rgba(10, 207, 151, .4) !important;
}

.field-state-required-empty {
    background-color: rgba(250, 92, 124, .10) !important;
    border-color: rgba(250, 92, 124, .45) !important;
}

/* Select2 (dropdowns modernos): el <select> real queda oculto, se colorea
   la caja visible que Select2 genera. */
.select2-container .select2-selection.field-state-empty,
.select2-container .select2-selection.field-state-filled,
.select2-container .select2-selection.field-state-required-empty {
    border-width: 1px;
    border-style: solid;
}

/* ── Tema oscuro: fondo siempre blanco, color solo en el borde ── */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .select2-container .select2-selection {
    background-color: #ffffff !important;
    color: #495057 !important;
}

html[data-theme="dark"] .field-state-empty {
    background-color: #ffffff !important;
    color: #495057 !important;
    border-color: #ced4da !important;
}

html[data-theme="dark"] .field-state-filled {
    background-color: #ffffff !important;
    color: #495057 !important;
    border-color: #0acf97 !important;
}

html[data-theme="dark"] .field-state-required-empty {
    background-color: #ffffff !important;
    color: #495057 !important;
    border-color: #fa5c7c !important;
}

/* Los formularios modernos del CRM (.crm-field) fijan su propio borde con
   !important e igual especificidad — sin esto, el color de estado no se
   vería ahí porque la regla de crm-modern.css carga después. */
.crm-field .form-control.field-state-empty,
.crm-field .form-select.field-state-empty,
.crm-field .select2-selection.field-state-empty,
.crm-formset-table .form-control.field-state-empty,
.crm-formset-table .form-select.field-state-empty {
    border-color: #e3e7ee !important;
}

.crm-field .form-control.field-state-filled,
.crm-field .form-select.field-state-filled,
.crm-field .select2-selection.field-state-filled,
.crm-formset-table .form-control.field-state-filled,
.crm-formset-table .form-select.field-state-filled {
    border-color: rgba(10, 207, 151, .4) !important;
}

.crm-field .form-control.field-state-required-empty,
.crm-field .form-select.field-state-required-empty,
.crm-field .select2-selection.field-state-required-empty,
.crm-formset-table .form-control.field-state-required-empty,
.crm-formset-table .form-select.field-state-required-empty {
    border-color: rgba(250, 92, 124, .45) !important;
}

html[data-theme="dark"] .crm-field .form-control.field-state-empty,
html[data-theme="dark"] .crm-field .form-select.field-state-empty,
html[data-theme="dark"] .crm-field .select2-selection.field-state-empty,
html[data-theme="dark"] .crm-formset-table .form-control.field-state-empty,
html[data-theme="dark"] .crm-formset-table .form-select.field-state-empty {
    background-color: #ffffff !important;
    border-color: #ced4da !important;
}

html[data-theme="dark"] .crm-field .form-control.field-state-filled,
html[data-theme="dark"] .crm-field .form-select.field-state-filled,
html[data-theme="dark"] .crm-field .select2-selection.field-state-filled,
html[data-theme="dark"] .crm-formset-table .form-control.field-state-filled,
html[data-theme="dark"] .crm-formset-table .form-select.field-state-filled {
    background-color: #ffffff !important;
    border-color: #0acf97 !important;
}

html[data-theme="dark"] .crm-field .form-control.field-state-required-empty,
html[data-theme="dark"] .crm-field .form-select.field-state-required-empty,
html[data-theme="dark"] .crm-field .select2-selection.field-state-required-empty,
html[data-theme="dark"] .crm-formset-table .form-control.field-state-required-empty,
html[data-theme="dark"] .crm-formset-table .form-select.field-state-required-empty {
    background-color: #ffffff !important;
    border-color: #fa5c7c !important;
}