/* TRAE:START theme-dark-variables-only */
html.dark,
:root[data-theme="dark"] {
  /* Paleta base (variables-only) */
  --bg: #1a1a1a;
  --surface: #2d2d2d;
  --border: #404040;
  --text: #ffffff;
  --text-inverse: #000000;
  --muted: #adb5bd;
  /* Acento original (azul) en oscuro */
  --primary: #0d6efd;
  --primary-hover: #0b5ed7;
  --success: #198754;
  --warning: #ffc107;
  --danger: #dc3545;
  --shadow: rgba(0,0,0,0.3);
  --accent: #0d6efd;
  --line: #404040;
  
  /* Tokens de formularios (variables) */
  --fd-bg: #1a1c1e;
  --fd-bg-focus: #202225;
  --fd-surface: var(--surface);
  --fd-border: #2f3336;
  --fd-text: #ffffff;
  --fd-muted: #b0b6bd;
  --fd-focus: #3b82f6;
  --fd-focus-border: #ffffff;
  --fd-focus-shadow: rgba(255,255,255,0.18);

  /* Login tokens (variables-only, invariantes en ambos temas) */
  --login-bg: #2d2d2d;
  --login-text: #ffffff;
  --login-border: #404040;
  --login-shadow: 0 8px 22px rgba(0,0,0,0.35);
  --login-accent: #3b82f6;
  
  /* Tokens de formularios del login (invariantes) */
  --login-fd-bg: #1a1c1e;
  --login-fd-bg-focus: #202225;
  --login-fd-surface: #2d2d2d;
  --login-fd-border: #2f3336;
  --login-fd-text: #ffffff;
  --login-fd-muted: #b0b6bd;
  --login-fd-focus: #3b82f6;
  --login-fd-focus-border: #ffffff;
  --login-fd-focus-shadow: rgba(255,255,255,0.18);

  /* Navbar/Menu overlays */
  --overlay-hover: rgba(255,255,255,0.08);
}
/* TRAE:END theme-dark-variables-only */

/* Tema Oscuro - Variables CSS */
html[data-theme="dark"] {
  /* Colores de fondo */
  --bg-color: #1e1e1e;
  --bg-primary: #2d2d2d;
  --bg-secondary: #343a40;
  --bg-card: #2a2a2a;
  --bg-sidebar: #252525;
  --bg-navbar: #212529;

  /* Colores de texto */
  --text-color: #e8e8e8;
  --text-primary: #ffffff;
  --text-secondary: #adb5bd;
  --text-muted: #6c757d;
  --text-light: #495057;

  /* Colores de acento y enlaces */
  --accent-color: #4fc3f7;
  --primary: #0d6efd;
  --primary-dark: #0b5ed7;
  --primary-light: #6ea8fe;

  /* Colores de estado */
  --success: #198754;
  --warning: #ffc107;
  --danger: #dc3545;
  --info: #0dcaf0;

  /* Bordes y separadores */
  --border-color: #3d3d3d;
  --border-light: #495057;
  --border-dark: #343a40;

  /* Sombras */
  --shadow: rgba(0, 0, 0, 0.3);
  --shadow-sm: rgba(0, 0, 0, 0.2);
  --shadow-lg: rgba(0, 0, 0, 0.4);

  /* Otros */
  --border-radius: 8px;
  --border-radius-sm: 4px;
  --border-radius-lg: 12px;

  /* Formularios */
  --input-bg: #2d2d2d;
  --input-border: #404040;
  --input-focus-border: #ffffff;
  --input-focus-shadow: rgba(255,255,255,0.18);
  /* Unificación con unified: asegura que bd-form-group use fondo correcto */
  --bg-input: var(--fd-bg);

  /* Botones */
  --btn-bg: #2d2d2d;
  --btn-border: #404040;
  --btn-hover-bg: #3d3d3d;

  /* Tablas */
  --table-bg: #2a2a2a;
  --table-stripe-bg: #343a40;
  --table-hover-bg: #3d3d3d;
  --table-border: #404040;

  /* Aliases para unificar nombres de variables usados por el proyecto */
  --bg: var(--bg-color);
  --panel: var(--bg-primary);
  --card: var(--bg-card);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --primary-hover: var(--primary-dark);
}

/* Tarjetas y contenedores en tema oscuro (evita fondo blanco de Bootstrap) */
html.dark .card,
html.dark .card.dmd-panel,
html.dark .bd-container,
html.dark .bd-form,
html.dark .dropdown-menu,
[data-theme="dark"] .card,
[data-theme="dark"] .card.dmd-panel,
[data-theme="dark"] .bd-container,
[data-theme="dark"] .bd-form,
[data-theme="dark"] .dropdown-menu {
  background-color: var(--bg-card) !important; /* superficie oscura */
  color: var(--text) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 3px 10px var(--shadow-sm), 0 16px 36px var(--shadow-lg);
}

[data-theme="dark"] .bg-white,
html.dark .bg-white,
[data-theme="dark"] .bg-light,
html.dark .bg-light,
[data-theme="dark"] .bg-body,
html.dark .bg-body {
  background-color: var(--bg-card) !important;
  color: var(--text) !important;
}

[data-theme="dark"] .text-dark,
html.dark .text-dark,
[data-theme="dark"] .text-body,
html.dark .text-body {
  color: var(--text) !important;
}

/* Cobertura GLOBAL para todos los módulos y submódulos */
/* Fondo y texto blanco en modo oscuro para contenedores estándar y personalizados */
html.dark .card-body,
html.dark .panel,
html.dark .panel-body,
html.dark .list-group,
html.dark .list-group-item,
html.dark .dropdown-item,
html.dark .popover,
html.dark .tooltip-inner,
html.dark .table,
html.dark .table thead th,
html.dark .table tbody td,
html.dark .widget,
html.dark .box,
html.dark .tile,
html.dark .bd-list-item,
[data-theme="dark"] .card-body,
[data-theme="dark"] .panel,
[data-theme="dark"] .panel-body,
[data-theme="dark"] .list-group,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .dropdown-item,
[data-theme="dark"] .popover,
[data-theme="dark"] .tooltip-inner,
[data-theme="dark"] .table,
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table tbody td,
[data-theme="dark"] .widget,
[data-theme="dark"] .box,
[data-theme="dark"] .tile,
[data-theme="dark"] .bd-list-item {
  background-color: var(--bg-card) !important;
  color: var(--text) !important;
  border-color: var(--border-color) !important;
}

/* Modales en oscuro: contenedor transparente, contenido con fondo de tarjeta */
html.dark .modal,
[data-theme="dark"] .modal { background: transparent !important; box-shadow: none !important; border-color: transparent !important; }
html.dark .modal-content,
[data-theme="dark"] .modal-content { background-color: var(--bg-card) !important; color: var(--text) !important; border-color: var(--border-color) !important; }
html.dark .modal-backdrop,
[data-theme="dark"] .modal-backdrop,
html.dark .modal-backdrop.show,
[data-theme="dark"] .modal-backdrop.show { display: none !important; opacity: 0 !important; background: transparent !important; pointer-events: none !important; }

/* Tipografías dentro de contenedores: asegurar blanco para títulos y textos */
[data-theme="dark"] .card h1,
[data-theme="dark"] .card h2,
[data-theme="dark"] .card h3,
[data-theme="dark"] .card h4,
[data-theme="dark"] .card h5,
[data-theme="dark"] .card h6,
[data-theme="dark"] .card p,
[data-theme="dark"] .card span,
[data-theme="dark"] .bd-container h1,
[data-theme="dark"] .bd-container h2,
[data-theme="dark"] .bd-container h3,
[data-theme="dark"] .bd-container h4,
[data-theme="dark"] .bd-container h5,
[data-theme="dark"] .bd-container h6,
[data-theme="dark"] .bd-container p,
[data-theme="dark"] .bd-container span,
[data-theme="dark"] .bd-form *,
[data-theme="dark"] .obra-card .obra-title,
[data-theme="dark"] .obra-card .obra-cliente,
[data-theme="dark"] .obra-card .meta-label,
[data-theme="dark"] .obra-card .meta-value {
  color: var(--text) !important;
}

/* Evitar alterar colores de estado en botones/badges/alerts */
[data-theme="dark"] .btn,
[data-theme="dark"] .badge,
[data-theme="dark"] .alert {
  /* Mantienen su propia paleta de colores */
}

/* Forms Dark Theme - MERGED desde forms-dark.css */

/* Paleta base (usa variables si existen) */
:root[data-theme="dark"], [data-theme="dark"] {
  /* Ajuste según imagen: inputs ligeramente más claros (no tan negros) */
  --fd-bg: #1a1c1e; /* gris oscuro pero no negro */
  --fd-bg-focus: #202225; /* foco: un pelín más claro, NO blanco */
  --fd-surface: var(--panel, #2b2e31); /* panel algo más claro */
  --fd-border: #2f3336; /* borde sutil ligeramente más claro */
  --fd-text: #ffffff;
  --fd-muted: #b0b6bd; /* textos secundarios algo más claros */
  --fd-focus: var(--primary); /* foco basado en color primario, menos estridente */
  --fd-focus-border: var(--primary); /* borde de foco consistente con primario */
  --fd-focus-shadow: rgba(13,110,253,0.24); /* halo de foco suavizado (primary) */
}

/* Campos de formulario */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] .input-group-text {
  background-color: var(--fd-bg) !important;
  border-color: var(--fd-border) !important;
  color: var(--fd-text) !important;
}
/* html.dark equivalentes */
html.dark .form-control,
html.dark .form-select,
html.dark textarea,
html.dark input[type="text"],
html.dark input[type="password"],
html.dark input[type="email"],
html.dark input[type="number"],
html.dark input[type="search"],
html.dark .input-group-text {
  background-color: var(--fd-bg) !important;
  border-color: var(--fd-border) !important;
  color: var(--fd-text) !important;
}

[data-theme="dark"] .form-floating>.form-control,
[data-theme="dark"] .form-floating>.form-select {
  background-color: var(--fd-bg) !important;
  border-color: var(--fd-border) !important;
  color: var(--fd-text) !important;
}
html.dark .form-floating>.form-control,
html.dark .form-floating>.form-select {
  background-color: var(--fd-bg) !important;
  border-color: var(--fd-border) !important;
  color: var(--fd-text) !important;
}

[data-theme="dark"] .form-floating label {
  color: var(--fd-muted) !important;
}
html.dark .form-floating label {
  color: var(--fd-muted) !important;
}

[data-theme="dark"] .bd-form-control[type="file"] {
  background-color: var(--fd-bg) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-border) !important;
}
html.dark .bd-form-control[type="file"] {
  background-color: var(--fd-bg) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-border) !important;
}

[data-theme="dark"] .bd-form-control[type="file"]::file-selector-button {
  background: var(--primary);
  color: #ffffff;
  border: 1px solid var(--primary);
  border-radius: var(--border-radius);
}
html.dark .bd-form-control[type="file"]::file-selector-button {
  background: var(--primary);
  color: #ffffff;
  border: 1px solid var(--primary);
  border-radius: var(--border-radius);
}

/* Campos readonly legibles en oscuro */
[data-theme="dark"] .form-control[readonly],
html.dark .form-control[readonly] {
  background-color: var(--fd-bg) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-border) !important;
}

/* Placeholders y ayudas */
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] .form-text,
[data-theme="dark"] .help-text {
  color: var(--fd-muted) !important;
}

/* Etiquetas */
[data-theme="dark"] .form-label,
[data-theme="dark"] label,
[data-theme="dark"] .form-floating label {
  color: var(--fd-text) !important;
}

/* Estados de foco (solo colores) */
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] input:focus {
  background-color: var(--fd-bg-focus) !important; /* NO blanco, solo un tono más claro */
  border-color: var(--fd-focus-border, var(--fd-focus)) !important; /* borde blanco en foco */
  box-shadow: 0 0 0 0.18rem var(--fd-focus-shadow) !important; /* halo blanco aún más sutil */
  outline: none !important;
}

/* Alinear bd-form-group con tokens de formularios */
[data-theme="dark"] .bd-form-group input:focus,
[data-theme="dark"] .bd-form-group select:focus,
[data-theme="dark"] .bd-form-group textarea:focus {
  background-color: var(--fd-bg-focus) !important;
  border-color: var(--fd-focus-border, var(--fd-focus)) !important;
  box-shadow: 0 0 0 0.18rem var(--fd-focus-shadow) !important;
  outline: none !important;
}

/* Checks y radios */
[data-theme="dark"] .form-check-input {
  background-color: var(--fd-bg) !important;
  border-color: var(--fd-border) !important;
}

[data-theme="dark"] .form-check-input:checked {
  background-color: var(--fd-focus) !important;
  border-color: var(--fd-focus) !important;
}

[data-theme="dark"] .form-check-label { color: var(--fd-text) !important; }

/* Contenedores de formulario (solo color de fondo y texto) */
[data-theme="dark"] .form-group,
[data-theme="dark"] .form-row,
[data-theme="dark"] .input-group,
[data-theme="dark"] .form-container {
  background-color: transparent !important; /* no altero layout */
  color: var(--fd-text) !important;
}

/* Ajustes de autofill en modo oscuro */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill {
  -webkit-text-fill-color: var(--fd-text) !important;
  caret-color: var(--fd-text) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--fd-bg) inset !important;
  transition: background-color 999999s ease-in-out 0s !important;
}

[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] textarea:-webkit-autofill:focus,
[data-theme="dark"] select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fd-text) !important;
  caret-color: var(--fd-text) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--fd-bg-focus) inset !important;
}

/* Firefox */
[data-theme="dark"] input:-moz-autofill,
[data-theme="dark"] textarea:-moz-autofill,
[data-theme="dark"] select:-moz-autofill {
  color: var(--fd-text) !important;
  background-color: var(--fd-bg) !important;
}

/* Autofill + foco */
[data-theme="dark"] .form-control:-webkit-autofill:focus,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] textarea:-webkit-autofill:focus,
[data-theme="dark"] select:-webkit-autofill:focus {
  border-color: var(--fd-focus-border) !important;
  box-shadow: 0 0 0 0.18rem var(--fd-focus-shadow) !important, 0 0 0px 1000px var(--fd-bg-focus) inset !important;
}