/* VODI / Gov Design System Overrides for Dark Mode */

/* 1. Base Variables (Default / Light Mode) */
:root {
    --errorTxt: #AE1C22;
    --errorBg: #FAE5E5;
}

[data-theme="dark"] {
    --blanco: var(--bg-color);
    --neutro100: var(--header-bg);
    --neutro200: var(--bg-color);
    --txtGral: var(--text-color);
    --txtLight: #cbd5e0;

    /* VODI Headers Colors in Dark Mode */
    --primario: #004d45;
    --primarioDark: #003832;
    --secundario: #cbb06d;

    /* Error States Dark Mode Matches (Overrides Base) */
    --errorTxt: #fc8181;
    /* Rojo claro para texto sobre fondo oscuro */
    --errorBg: rgba(60, 10, 10, 0.7);
    /* Rojo muy oscuro y profundo, menos luminoso */
}

/* VODI / Gov Design System Component Overrides */
[data-theme="dark"] body.expediente {
    background-color: var(--bg-color) !important;
}

[data-theme="dark"] .mainHeader,
[data-theme="dark"] .infoExp,
[data-theme="dark"] .DetalleTramInv,
[data-theme="dark"] .fedatario__datos,
[data-theme="dark"] [class*="cargarArchivo__area"],
[data-theme="dark"] .resInversion__ul {
    background-color: var(--header-bg) !important;
    border-color: var(--header-border) !important;
    color: var(--text-color) !important;
}

/* Main Container should match body background in Dark Mode to avoid "double box" look */
[data-theme="dark"] .main {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .expediente__titulo {
    color: var(--primario) !important;
}

/* Header number circle override */
[data-theme="dark"] .header__numero {
    background-color: var(--header-bg) !important;
    color: var(--primario) !important;
    box-shadow: 0 .25rem .25rem rgba(0, 0, 0, 0.8) !important;
}

/* Step Progress styles */
[data-theme="dark"] .pasosLinea__paso {
    background: #4a5568 !important;
}

/* Table overrides */
[data-theme="dark"] .solicitudTabla tbody tr:nth-child(odd) {
    background-color: var(--header-bg) !important;
}

[data-theme="dark"] .solicitudTabla tbody tr:nth-child(even) {
    background-color: var(--input-bg) !important;
}

[data-theme="dark"] .solicitudTabla td,
[data-theme="dark"] .solicitudTabla th {
    color: var(--text-color) !important;
    border-color: var(--header-border) !important;
}

/* Fix for the main White Box Container in Form */
[data-theme="dark"] .cajaForm {
    background-color: var(--header-bg) !important;
    border-color: var(--header-border) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--header-border);
    border-radius: 8px;
    padding: 20px;
}

/* Text visibility fixes */
[data-theme="dark"] .progresoPasos__tit,
[data-theme="dark"] .progresoPasos__desc,
[data-theme="dark"] .progresoPasos__pasoTxt,
[data-theme="dark"] #formTitle,
[data-theme="dark"] #formSubtitle {
    color: var(--text-color) !important;
}

[data-theme="dark"] .breadcrumb a,
[data-theme="dark"] .boton i {
    color: var(--text-color) !important;
}

/* =========================================
   ESTILOS DE VALIDACIÓN Y ERRORES (VODI)
   ========================================= */

/* 1. Resumen de Errores (Alert Danger) */
.alert-danger,
.formio-error-wrapper {
    background-color: var(--errorBg) !important;
    color: var(--errorTxt) !important;
    border: 1px solid var(--errorTxt) !important;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Header del alert */
.alert-danger::before {
    /* Opcional: Agregar texto de título si Form.io no lo tiene */
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Lista de errores dentro del alert */
.alert-danger ul,
.formio-error-wrapper ul {
    margin: 0;
    padding-left: 1.5rem;
}

.alert-danger li,
.formio-error-wrapper li {
    font-size: 0.875rem;
}

/* 2. Estado de Error en Campos (Input Container) */
.formio-component.has-error,
.form-group.has-error {
    background-color: var(--errorBg) !important;
    border: 1px solid var(--errorTxt);
    /* Borde del color del texto de error */
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    transition: background-color 0.3s, border-color 0.3s;
}

/* Label en error */
.formio-component.has-error label,
.form-group.has-error label {
    color: var(--errorTxt) !important;
    font-weight: 600;
}

/* Asterisco de requerido */
.formio-component.has-error .field-required::after,
.form-group.has-error .field-required::after {
    color: var(--errorTxt) !important;
}

/* Input en error - General */
.formio-component.has-error .form-control,
.form-group.has-error .form-control {
    border-color: var(--errorTxt) !important;
}

/* Fix específico para Dark Mode en Inputs con Error:
   Evitar el fondo blanco forzado, usar el fondo del tema oscuro */
[data-theme="dark"] .formio-component.has-error .form-control,
[data-theme="dark"] .form-group.has-error .form-control {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
}

/* En modo claro, mantenemos el fondo blanco para contraste con el rosa */
[data-theme="light"] .formio-component.has-error .form-control,
[data-theme="light"] .form-group.has-error .form-control,
:root:not([data-theme="dark"]) .formio-component.has-error .form-control {
    background-color: #ffffff !important;
    color: #333 !important;
}

/* Mensaje de error debajo del input */
.form-text.error,
.invalid-feedback,
.formio-errors .error {
    color: var(--errorTxt) !important;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    font-weight: 500;
}