/* =================================================================
   THEME / Bootstrap 5 – Golden Alliances
   - Light & Dark con paletas accesibles
   - Primary/Warning/Info/Danger/Success ajustados por tema
   - Componentes Bootstrap armonizados
   - Validaciones de formularios + input-group-text 
   ================================================================= */

/* ---------- Base ---------- */
:root {
  --overlay-backdrop: rgba(0, 0, 0, .65);
}

/* Sugeridas por el archivo original (paletas auxiliares) */
html[data-theme="dark"] {
  color-scheme: dark;
}

html.palette-techdev {
  --color-primary: #1e88e5;
  --color-secondary: #0d47a1;
  --color-accent: #26c6da;
}

html.palette-black-gold {
  --color-primary: #c9a227;
  --color-secondary: #1b1b1b;
  --color-accent: #e6d98c;
}

html.palette-emerald {
  --color-primary: #10b981;
  --color-secondary: #065f46;
  --color-accent: #34d399;
}

html.palette-slate {
  --color-primary: #64748b;
  --color-secondary: #334155;
  --color-accent: #94a3b8;
}

/* ================================================================
   TEMA CLARO (por defecto)
   ================================================================ */
:root,
[data-theme="light"] {
  --bs-body-bg: #f4f6f9;
  --bs-body-color: #212529;
  --bs-secondary-color: #6c757d;
  --bs-tertiary-bg: #f8f9fa;
  --bs-border-color: #dee2e6;
  --bs-card-bg: #ffffff;
  --bs-card-border-color: rgba(0, 0, 0, .125);
  --bs-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
  --bs-box-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);

  --brand-text: #0d2b52;
  --brand-sidebar-bg: #ffffff;
  --brand-navbar-bg: #ffffff;

  --sidebar-link-color: #343a40;
  --sidebar-link-hover-color: #0d6efd;
  --sidebar-link-active-color: #ffffff;
  --sidebar-link-hover-bg: rgba(0, 0, 0, .05);
  --sidebar-link-active-bg: #0d6efd;

  --footer-bg: #f8f9fa;
  --footer-color: #6c757d;
  --footer-title-color: #212529;
  --footer-link-color: #495057;
  --footer-link-hover-color: #0d6efd;
  --footer-divider-color: rgba(0, 0, 0, .1);

  --page-title-bg-start: #f0f2f5;
  --page-title-bg-end: #ffffff;

  /* === PALETA Bootstrap – LIGHT === */
  --bs-primary: #d4a017;
  /* dorado más oscuro */
  --bs-primary-rgb: 212, 160, 23;

  --bs-warning: #f59e0b;
  /* ámbar */
  --bs-warning-rgb: 245, 158, 11;

  --bs-info: #0ea5e9;
  /* celeste vibrante */
  --bs-info-rgb: 14, 165, 233;

  --bs-success: #22c55e;
  /* verde accesible */
  --bs-success-rgb: 34, 197, 94;

  --bs-danger: #ef4444;
  /* rojo accesible */
  --bs-danger-rgb: 239, 68, 68;

  /* colores de énfasis/subtiles (v5.3) */
  --bs-primary-text-emphasis: #5f4a0f;
  --bs-primary-bg-subtle: #fff3cd;
  --bs-primary-border-subtle: #fbe29b;

  --bs-info-text-emphasis: #0b69a3;
  --bs-info-bg-subtle: #e0f2fe;
  --bs-info-border-subtle: #b9e6fe;

  --bs-warning-text-emphasis: #7c5208;
  --bs-warning-bg-subtle: #fff4d6;
  --bs-warning-border-subtle: #ffe4a8;

  --bs-success-text-emphasis: #0f5e2f;
  --bs-success-bg-subtle: #dcfce7;
  --bs-success-border-subtle: #baf7d1;

  --bs-danger-text-emphasis: #7f1d1d;
  --bs-danger-bg-subtle: #fde2e2;
  --bs-danger-border-subtle: #fbc1c1;
}

/* ================================================================
   TEMA OSCURO
   ================================================================ */
[data-theme="dark"] {
  --bs-body-bg: #1e1e1e;
  --bs-body-color: #dee2e6;
  --bs-secondary-color: #adb5bd;
  --bs-border-color: #495057;

  --bs-card-bg: #2c3034;
  --bs-modal-bg: var(--bs-card-bg);
  --bs-tertiary-bg: var(--bs-card-bg);
  --bs-card-border-color: rgba(255, 255, 255, .15);

  --bs-box-shadow: 0 .5rem 1rem rgba(255, 255, 255, .05);
  --bs-box-shadow-sm: 0 .125rem .25rem rgba(255, 255, 255, .04);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(255, 255, 255, .08);

  --brand-text: #e9ecef;
  --brand-sidebar-bg: #2c3034;
  --brand-navbar-bg: #343a40;

  /* Force headings to be gold in dark mode (User Request) */
  h1, h2, h3, h4, h5, h6 {
    color: #f4c542;
  }


  --sidebar-link-color: #c2c7d0;
  --sidebar-link-hover-color: #ffffff;
  --sidebar-link-active-color: #ffffff;
  --sidebar-link-hover-bg: rgba(255, 255, 255, .1);
  --sidebar-link-active-bg: var(--brand-primary);

  --footer-bg: #212529;
  --footer-color: #adb5bd;
  --footer-title-color: #ffffff;
  --footer-link-color: #adb5bd;
  --footer-link-hover-color: #ffffff;
  --footer-divider-color: rgba(255, 255, 255, .15);

  --page-title-bg-start: #3a3f44;
  --page-title-bg-end: #2c3034;

  /* === PALETA Bootstrap – DARK === */
  --bs-primary: #f4c542;
  /* dorado más claro (alta luminancia) */
  --bs-primary-rgb: 244, 197, 66;

  --bs-warning: #ffd166;
  /* ámbar suave */
  --bs-warning-rgb: 255, 209, 102;

  --bs-info: #38bdf8;
  /* celeste claro legible */
  --bs-info-rgb: 56, 189, 248;

  --bs-success: #34d399;
  /* verde claro */
  --bs-success-rgb: 52, 211, 153;

  --bs-danger: #f87171;
  /* rojo claro */
  --bs-danger-rgb: 248, 113, 113;

  --bs-primary-text-emphasis: #f4c542;
  --bs-primary-bg-subtle: #3a300f;
  --bs-primary-border-subtle: #6b571b;

  --bs-info-text-emphasis: #9bdcff;
  --bs-info-bg-subtle: #0a2a36;
  --bs-info-border-subtle: #134759;

  --bs-warning-text-emphasis: #ffe4a6;
  --bs-warning-bg-subtle: #2a2107;
  --bs-warning-border-subtle: #4a3a0a;

  --bs-success-text-emphasis: #c8f3df;
  --bs-success-bg-subtle: #0d2b20;
  --bs-success-border-subtle: #1e4a39;

  --bs-danger-text-emphasis: #ffd0d0;
  --bs-danger-bg-subtle: #2f0f0f;
  --bs-danger-border-subtle: #521919;
}

/* Transiciones suaves para superficies principales */
body,
.card,
.navbar,
.app-sidebar,
.app-footer,
.footer-public,
.bg-body-tertiary,
.input-group-text,
.page-title-header {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, background .3s ease;
}

/* === Estructura (sidebar/header/footer) – como en el archivo original === */
.app-sidebar {
  background-color: var(--brand-sidebar-bg) !important;
}

.app-header.navbar {
  background-color: var(--brand-navbar-bg) !important;
  border-bottom-color: var(--bs-border-color) !important;
}

.navbar.bg-body-tertiary {
  background-color: var(--bs-tertiary-bg) !important;
}

.app-footer {
  background-color: var(--brand-navbar-bg);
  color: var(--bs-secondary-color);
  border-top-color: var(--bs-border-color);
}

.card-title,
.app-content-header h3 {
  color: var(--brand-text);
}

.app-sidebar .nav-link {
  color: var(--sidebar-link-color);
  border-radius: 0 !important;
}

.app-sidebar .nav-link:hover {
  background-color: var(--sidebar-link-hover-bg);
  color: var(--sidebar-link-hover-color);
}

.app-sidebar .nav-link.active,
.app-sidebar .nav-link.active:hover {
  background-color: var(--sidebar-link-active-bg);
  color: var(--sidebar-link-active-color);
}

.app-sidebar .has-submenu.is-open>.submenu-toggle {
  background-color: var(--sidebar-link-hover-bg);
}

[data-toggle-theme] .fa-sun {
  color: #ffc107 !important;
}

[data-theme="light"] [data-toggle-theme] .fa-moon {
  color: #495057 !important;
}

[data-theme="dark"] .input-group-text {
  background-color: #495057;
  border-color: #6c757d;
  color: #dee2e6;
}

[data-theme="dark"] .dataTables_wrapper {
  color: var(--bs-body-color);
}

[data-theme="dark"] .navbar-nav .nav-link {
  color: rgba(255, 255, 255, .65);
}

[data-theme="dark"] .navbar-nav .nav-link:hover,
[data-theme="dark"] .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, .85);
}

.dropdown-menu {
  min-width: 15rem;
}

/* === Cards / Modals / Forms / Dropdowns / Tables / etc. (como en el archivo original) === */
[data-theme="light"] .card-header {
  background-color: #f8f9fa !important;
  border-bottom: 1px solid rgba(0, 0, 0, .125) !important;
}

[data-theme="light"] .card-footer {
  background-color: #f8f9fa !important;
  border-top: 1px solid rgba(0, 0, 0, .125) !important;
}

[data-theme="light"] .card {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, .125) !important;
}

[data-theme="dark"] .card {
  background-color: #2c3034 !important;
  border-color: rgba(255, 255, 255, .15) !important;
}

[data-theme="dark"] .card-header {
  background-color: #25282c !important;
  border-bottom: 1px solid rgba(255, 255, 255, .15) !important;
}

[data-theme="dark"] .card-footer {
  background-color: #25282c !important;
  border-top: 1px solid rgba(255, 255, 255, .15) !important;
}

[data-theme="dark"] .card-body {
  background-color: #2c3034 !important;
  color: #dee2e6 !important;
}

.input-group> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group>.input-group-text:not(:last-child),
.input-group>.form-control:not(:last-child),
.input-group>.form-select:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.tooltip-inner {
  color: #fff !important;
}

.modal-content {
  background-color: var(--bs-card-bg);
  border-color: var(--bs-card-border-color);
}

[data-theme="light"] .modal-header {
  background-color: #f8f9fa !important;
  border-bottom: 1px solid rgba(0, 0, 0, .125) !important;
}

[data-theme="light"] .modal-footer {
  background-color: #f8f9fa !important;
  border-top: 1px solid rgba(0, 0, 0, .125) !important;
}

[data-theme="dark"] .modal-header {
  background-color: #25282c !important;
  border-bottom: 1px solid rgba(255, 255, 255, .15) !important;
}

[data-theme="dark"] .modal-footer {
  background-color: #25282c !important;
  border-top: 1px solid rgba(255, 255, 255, .15) !important;
}

[data-theme="dark"] .modal-header .btn-close,
[data-theme="dark"] .offcanvas-header .btn-close,
[data-theme="dark"] .toast .btn-close {
  filter: invert(1);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: #343a40;
  color: #dee2e6;
  border-color: #495057;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: #3d4248;
  color: #dee2e6;
  border-color: #6c757d;
}

[data-theme="dark"] .form-control::placeholder {
  color: #6c757d;
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled {
  background-color: #2c3034;
  color: #6c757d;
}

[data-theme="dark"] .dropdown-menu {
  background-color: #2c3034;
  border-color: #495057;
}

[data-theme="dark"] .dropdown-item {
  color: #dee2e6;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: #434950;
  color: #fff;
}

[data-theme="dark"] .dropdown-divider {
  border-top-color: #495057;
}

[data-theme="dark"] .table {
  color: var(--bs-body-color);
  border-color: #495057;
}

[data-theme="dark"] .table> :not(caption)>*>* {
  border-bottom-color: #495057;
}

[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>* {
  background-color: rgba(255, 255, 255, .02);
}

[data-theme="dark"] .table-hover>tbody>tr:hover>* {
  background-color: rgba(255, 255, 255, .05);
}

[data-theme="dark"] .badge {
  border: 1px solid rgba(255, 255, 255, .1);
}

[data-theme="dark"] .breadcrumb {
  background-color: transparent;
}

[data-theme="dark"] .breadcrumb-item+.breadcrumb-item::before {
  color: #6c757d;
}

[data-theme="dark"] .breadcrumb-item.active {
  color: #adb5bd;
}

[data-theme="dark"] .page-link {
  background-color: #2c3034;
  border-color: #495057;
  color: #dee2e6;
}

[data-theme="dark"] .page-link:hover {
  background-color: #343a40;
  border-color: #6c757d;
  color: #fff;
}

[data-theme="dark"] .page-item.disabled .page-link {
  background-color: #1e1e1e;
  border-color: #495057;
  color: #6c757d;
}

[data-theme="dark"] .list-group-item {
  background-color: #2c3034;
  border-color: #495057;
  color: #dee2e6;
}

[data-theme="dark"] .list-group-item:hover {
  background-color: #343a40;
}

/* === Alerts del archivo original (se reemplazan más abajo por variables) === */
[data-theme="dark"] .alert {
  border-width: 1px;
}

/* --- OFFCANVAS / ACCORDION / NAV TABS / PROGRESS / TOASTS (igual que original) --- */
[data-theme="dark"] .offcanvas {
  background-color: #2c3034;
  color: #dee2e6;
}

[data-theme="dark"] .offcanvas-header {
  border-bottom-color: #495057;
}

[data-theme="dark"] .accordion-item {
  background-color: #2c3034;
  border-color: #495057;
}

[data-theme="dark"] .accordion-button {
  background-color: #25282c;
  color: #dee2e6;
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: #1a1d20;
  color: #fff;
}

[data-theme="dark"] .accordion-button::after {
  filter: invert(1);
}

[data-theme="dark"] .accordion-body {
  background-color: #2c3034;
  color: #dee2e6;
}

[data-theme="dark"] .nav-tabs {
  border-bottom-color: #495057;
}

[data-theme="dark"] .nav-tabs .nav-link {
  color: #adb5bd;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
  border-color: #495057 #495057 transparent;
  color: #dee2e6;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--bs-card-bg);
  border-color: #495057 #495057 var(--bs-card-bg);
  color: #fff;
}

[data-theme="dark"] .progress {
  background-color: #343a40;
}

[data-theme="dark"] .toast {
  background-color: #2c3034;
  border-color: #495057;
  color: #dee2e6;
}

[data-theme="dark"] .toast-header {
  background-color: #25282c;
  border-bottom-color: #495057;
  color: #dee2e6;
}

/* === Switch de Bootstrap (colores solamente) === */
[data-theme="dark"] {
  --switch-track-off: #4d5358;
  --switch-track-on: #c99811;
  --switch-knob-off: #aab2ba;
  --switch-knob-on: #ffffff;
  --switch-border: #6c757d;
}

[data-theme="light"],
:root:not([data-theme="dark"]) {
  --switch-track-off: #e9ecef;
  --switch-track-on: #c99811;
  --switch-knob-off: #6c757d;
  --switch-knob-on: #ffffff;
  --switch-border: #adb5bd;
}

.form-switch .form-check-input {
  background-color: var(--switch-track-off) !important;
  border-color: var(--switch-border) !important;
  accent-color: var(--switch-track-on);
}

.form-switch .form-check-input:checked {
  background-color: var(--switch-track-on) !important;
  border-color: var(--switch-track-on) !important;
}

.form-switch .form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .35);
}

.form-switch .form-check-input:disabled {
  opacity: 1;
  background-color: color-mix(in srgb, var(--switch-track-off) 80%, transparent) !important;
  border-color: color-mix(in srgb, var(--switch-border) 70%, transparent) !important;
}

/* ==== Variables de marca (para vistas públicas) ==== */
:root:not([data-theme="dark"]) {
  --brand-gold: #d4a017;
  --brand-gold-contrast: #ffffff;
  --ga-btn-bg: var(--brand-gold);
  --ga-btn-fg: var(--brand-gold-contrast);
  --ga-accent: var(--brand-gold);
  --ga-btn-outline: #343a40;
  --ga-btn-success: #25d366;
}

[data-theme="dark"] {
  --brand-gold: #f4c542;
  --brand-gold-contrast: #111111;
  --ga-btn-bg: var(--brand-gold);
  --ga-btn-fg: var(--brand-gold-contrast);
  --ga-accent: var(--brand-gold);
  --ga-btn-outline: #c8cdd3;
  --ga-btn-success: #25d366;
}

:root {
  --ga-btn-bg-hover: color-mix(in srgb, var(--ga-btn-bg) 92%, black);
}

/* =================================================================
   OVERRIDES Bootstrap por variables (botones, alerts, paginación)
   ================================================================= */

/* Botones principales con dorado por tema */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 90%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 90%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 80%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 80%, #000);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  /* color de texto: en dark usamos texto oscuro, en light blanco */
  color: color-mix(in srgb, #000 85%, #fff);
}

[data-theme="dark"] .btn-primary {
  color: #111;
}

[data-theme="light"] .btn-primary {
  color: #fff;
}

/* Warning / Info / Success / Danger con buen contraste */
.btn-warning {
  --bs-btn-bg: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-warning) 92%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-warning) 92%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-warning) 84%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-warning) 84%, #000);
  color: #111;
}

.btn-info {
  --bs-btn-bg: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-info) 90%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-info) 90%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-info) 82%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-info) 82%, #000);
  color: #0b1a22;
}

.btn-success {
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-success) 90%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-success) 90%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-success) 82%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-success) 82%, #000);
  color: #0a2918;
}

.btn-danger {
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger) 90%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-danger) 90%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-danger) 82%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-danger) 82%, #000);
  color: #2a0a0a;
}

/* Alerts por variables (ambas apariencias) */
.alert-primary {
  --bs-alert-bg: var(--bs-primary-bg-subtle);
  --bs-alert-border-color: var(--bs-primary-border-subtle);
  --bs-alert-color: var(--bs-primary-text-emphasis);
}

.alert-info {
  --bs-alert-bg: var(--bs-info-bg-subtle);
  --bs-alert-border-color: var(--bs-info-border-subtle);
  --bs-alert-color: var(--bs-info-text-emphasis);
}

.alert-warning {
  --bs-alert-bg: var(--bs-warning-bg-subtle);
  --bs-alert-border-color: var(--bs-warning-border-subtle);
  --bs-alert-color: var(--bs-warning-text-emphasis);
}

.alert-success {
  --bs-alert-bg: var(--bs-success-bg-subtle);
  --bs-alert-border-color: var(--bs-success-border-subtle);
  --bs-alert-color: var(--bs-success-text-emphasis);
}

.alert-danger {
  --bs-alert-bg: var(--bs-danger-bg-subtle);
  --bs-alert-border-color: var(--bs-danger-border-subtle);
  --bs-alert-color: var(--bs-danger-text-emphasis);
}

/* Paginación y list-group activos al color de marca */
.page-item.active .page-link,
.list-group-item.active {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: color-mix(in srgb, #000 85%, #fff) !important;
}

/* =================================================================
   VALIDACIONES DE FORMULARIOS + input-group-text coloreado
   ================================================================= */

/* Colores de feedback */
:root {
  --ga-valid: var(--bs-success);
  --ga-valid-rgb: var(--bs-success-rgb);
  --ga-invalid: var(--bs-danger);
  --ga-invalid-rgb: var(--bs-danger-rgb);
}

/* Bordes de control */
.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .form-select:valid,
.form-select.is-valid {
  border-color: var(--ga-valid) !important;
}

.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .form-select:invalid,
.form-select.is-invalid {
  border-color: var(--ga-invalid) !important;
}

/* Sombras al foco */
.form-control.is-valid:focus,
.form-select.is-valid:focus {
  box-shadow: 0 0 0 .2rem rgba(var(--ga-valid-rgb), .25) !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 .2rem rgba(var(--ga-invalid-rgb), .25) !important;
}

/* Feedback text */
.valid-feedback,
.valid-tooltip {
  color: var(--ga-valid);
}

.invalid-feedback,
.invalid-tooltip {
  color: var(--ga-invalid);
}

/* === Colorear también el .input-group-text ===
   - Funciona en navegadores modernos con :has()
   - De paso, cubrimos los casos en los que el input está antes/después
*/
.input-group:has(.form-control.is-valid, .form-select.is-valid) .input-group-text {
  border-color: var(--ga-valid) !important;
  color: var(--ga-valid);
}

.input-group:has(.form-control.is-invalid, .form-select.is-invalid) .input-group-text {
  border-color: var(--ga-invalid) !important;
  color: var(--ga-invalid);
}

/* Fallback cuando el input está ANTES del .input-group-text (sin :has) */
.form-control.is-valid+.input-group-text,
.form-select.is-valid+.input-group-text {
  border-color: var(--ga-valid) !important;
  color: var(--ga-valid);
}

.form-control.is-invalid+.input-group-text,
.form-select.is-invalid+.input-group-text {
  border-color: var(--ga-invalid) !important;
  color: var(--ga-invalid);
}

/* Si el .input-group-text está antes del input y querés compatibilidad
   total en navegadores sin :has(), añadí la clase .is-valid/.is-invalid
   en el contenedor .input-group desde tu validación JS y estas reglas
   lo cubrirán: */
.input-group.is-valid .input-group-text {
  border-color: var(--ga-valid) !important;
  color: var(--ga-valid);
}

.input-group.is-invalid.input-group .input-group-text {
  border-color: var(--ga-invalid) !important;
  color: var(--ga-invalid);
}

/* =================================================================
   TOM SELECT OVERRIDES FOR DARK MODE
   ================================================================= */

/* Z-index fix: Ensure dropdown appears above other elements */
.ts-wrapper {
  position: relative;
}

.ts-dropdown {
  z-index: 1050 !important;
}

/* Dark mode: Control (the main input container) */
[data-theme="dark"] .ts-control {
  background-color: #343a40 !important;
  color: #dee2e6 !important;
  border-color: #495057 !important;
}

/* Dark mode: Input text visibility - CRITICAL for search */
[data-theme="dark"] .ts-control input,
[data-theme="dark"] .ts-control input[type="text"],
[data-theme="dark"] .ts-wrapper input {
  color: #dee2e6 !important;
  -webkit-text-fill-color: #dee2e6 !important;
  caret-color: #f4c542 !important;
}

/* Dark mode: Dropdown container */
[data-theme="dark"] .ts-dropdown {
  background-color: #2c3034 !important;
  color: #dee2e6 !important;
  border-color: #495057 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Dark mode: Options in dropdown */
[data-theme="dark"] .ts-dropdown .option {
  color: #dee2e6 !important;
  background-color: inherit;
}

/* Dark mode: Hover and active states */
[data-theme="dark"] .ts-dropdown .option.active,
[data-theme="dark"] .ts-dropdown .option:hover {
  background-color: #3d4248 !important;
  color: #fff !important;
}

/* Dark mode: Option group headers */
[data-theme="dark"] .ts-dropdown .optgroup-header {
  color: #adb5bd !important;
  background-color: #25282c !important;
}

/* Dark mode: No results message */
[data-theme="dark"] .ts-dropdown .no-results {
  color: #adb5bd !important;
  background-color: #2c3034 !important;
}

/* Dark mode: Placeholder text */
[data-theme="dark"] .ts-control input::placeholder {
  color: #6c757d !important;
  -webkit-text-fill-color: #6c757d !important;
}

/* Dark mode: Selected item chips */
[data-theme="dark"] .ts-control .item {
  color: #dee2e6 !important;
  background-color: #495057 !important;
  border-color: #6c757d !important;
}

/* Dark mode: Remove button on chips */
[data-theme="dark"] .ts-control .item .remove {
  color: #adb5bd !important;
}

[data-theme="dark"] .ts-control .item .remove:hover {
  color: #f87171 !important;
}

/* =================================================================
   NAVBAR TOGGLER (Hamburger button) - Dark Mode Fix
   ================================================================= */
[data-theme="dark"] .navbar-toggler {
  border-color: var(--brand-gold) !important;
}

[data-theme="dark"] .navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(244, 197, 66, 0.25);
}

/* Override hamburger icon color in dark mode - gold color */
[data-theme="dark"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f4c542' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* =================================================================
   GLOBAL FORM STYLES & OVERRIDES (User Request Standardization)
   ================================================================= */

/* 1. File Input Hover Fix for Dark Mode */
[data-theme="dark"] input[type="file"]::file-selector-button {
  background-color: #495057;
  color: #e9ecef;
  border-right: 1px solid #6c757d;
  transition: all 0.3s ease;
}

[data-theme="dark"] input[type="file"]:hover::file-selector-button {
  background-color: #3d4246;
  color: #f4c542; /* Gold text on hover */
}

/* 2. Form Group Containers (like in Negocios) */
[data-theme="dark"] .enlace-group,
[data-theme="dark"] .fila-red {
  background-color: #2c3034 !important;
  border: 1px solid #495057;
  color: #e9ecef;
  border-radius: 5px;
}

/* 3. Gold labels inside specific containers AND global form labels */
[data-theme="dark"] .enlace-group-title,
[data-theme="dark"] .fila-red label,
[data-theme="dark"] .form-label,
[data-theme="dark"] label {
  color: #f4c542 !important;
  font-weight: 500;
}

[data-theme="dark"] .form-text,
[data-theme="dark"] small,
[data-theme="dark"] .text-muted {
  color: #adb5bd !important; /* Ensure small text is readable light grey, not dark */
}

/* 4. Ensure inputs inside these custom groups blend in */
[data-theme="dark"] .enlace-group .form-control,
[data-theme="dark"] .fila-red .form-control,
[data-theme="dark"] .fila-red .form-select {
  background-color: #343a40;
  border-color: #6c757d;
  color: #fff;
}

[data-theme="dark"] .enlace-group .input-group-text {
  background-color: #495057;
  border-color: #6c757d;
  color: #e9ecef;
}

/* 5. Button Visibility Fix (Generic if ID not present) */
/* We keep the specific ID fix in local file or move here? better move here if we want standard */
[data-theme="dark"] .btn-action-disabled:disabled {
     opacity: 1 !important;
     background-color: #0d6efd !important;
     color: #ffffff !important;
     filter: brightness(1.2);
     box-shadow: 0 0 8px rgba(13, 110, 253, 0.4);
     cursor: not-allowed;
}

/* =================================================================
   DATATABLES DARK MODE OVERRIDES - FORCE READABILITY
   ================================================================= */

/* Force text color on all table cells in dark mode */
[data-theme="dark"] table.dataTable tbody tr,
[data-theme="dark"] table.dataTable tbody td,
[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] .table > :not(caption) > * > * {
  color: #dee2e6 !important;
}

/* FIX: Override explicit 'text-dark' classes in table cells which cause invisible text */
[data-theme="dark"] table.dataTable .text-dark,
[data-theme="dark"] table.dataTable .text-muted {
  color: #dee2e6 !important;
}

/* Highlighting keys/IDs or specific formatting might need their own color, 
   but basic text must be readable first. */
[data-theme="dark"] table.dataTable tbody tr small,
[data-theme="dark"] table.dataTable tbody tr .text-muted {
  color: #adb5bd !important; /* Ensure muted text is not invisible */
}

/* Ensure standard table links are visible, BUT exclude buttons which handle their own color */
[data-theme="dark"] table.dataTable tbody tr a:not(.btn) {
  color: #6ea8fe;
}

[data-theme="dark"] table.dataTable tbody tr a:not(.btn):hover {
  color: #9ec5fe;
}

/* Override striping text color if necessary */
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  color: #dee2e6 !important;
  --bs-table-accent-bg: rgba(255, 255, 255, 0.03) !important;
  background-color: rgba(255, 255, 255, 0.03) !important; /* Forcebg override */
}

/* Override hover text color */
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
  color: #fff !important;
  --bs-table-accent-bg: rgba(255, 255, 255, 0.075) !important;
  background-color: rgba(255, 255, 255, 0.075) !important;
}

/* DataTables Info and Pagination text */
[data-theme="dark"] .dataTables_info,
[data-theme="dark"] .dataTables_length,
[data-theme="dark"] .dataTables_filter label {
  color: #dee2e6 !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #dee2e6 !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  color: #6c757d !important;

}

/* Mini thumbnail for tables */
.img-thumbnail-mini {
  width: 80px;
  height: 60px;
  object-fit: contain;
  background: #f8f9fa;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

[data-theme="dark"] .img-thumbnail-mini {
  background: #343a40;
  border-color: #495057;
}