/**
 * VALIANT Design System - Universal Global Theme
 * Unified architecture for panels, headers, forms, cards, and controls across the system.
 */

:root {
  /* Brand Identity */
  --valiant-crimson: #b50c0c;
  --valiant-crimson-hover: #c91414;
  --valiant-crimson-dark: #830707;
  --valiant-crimson-soft: rgba(181, 12, 12, 0.08);
  --valiant-crimson-border: rgba(181, 12, 12, 0.22);
  --valiant-crimson-glow: 0 0 0 3px rgba(181, 12, 12, 0.15);

  /* Obsidian / Charcoal Neutrals */
  --valiant-ink: #0f172a;
  --valiant-ink-soft: #334155;
  --valiant-muted: #64748b;
  --valiant-line: #e2e8f0;
  --valiant-line-strong: #cbd5e1;
  --valiant-card: #ffffff;
  --valiant-bg: #f8fafc;
  --valiant-soft: #f8fafc;
  --valiant-soft-2: #f1f5f9;

  /* State / Alerts */
  --valiant-ok: #16a34a;
  --valiant-ok-soft: rgba(22, 163, 74, 0.08);
  --valiant-ok-border: rgba(22, 163, 74, 0.22);
  --valiant-warn: #d97706;
  --valiant-warn-soft: rgba(217, 119, 6, 0.08);
  --valiant-warn-border: rgba(217, 119, 6, 0.22);
  --valiant-bad: #dc2626;
  --valiant-bad-soft: rgba(220, 38, 38, 0.08);
  --valiant-bad-border: rgba(220, 38, 38, 0.22);
  --valiant-blue: #2563eb;
  --valiant-blue-soft: rgba(37, 99, 235, 0.08);
  --valiant-blue-border: rgba(37, 99, 235, 0.22);
  --valiant-purple: #7c3aed;
  --valiant-purple-soft: rgba(124, 58, 237, 0.08);
  --valiant-purple-border: rgba(124, 58, 237, 0.22);

  /* Paleta VALIANT: carmesí de marca y tonos profundos que lo acompañan (inicio, módulos, gráficas) */
  --valiant-tono-carmesi: hsl(0 82% 38%);
  --valiant-tono-vino: hsl(345 55% 32%);
  --valiant-tono-cobre: hsl(16 55% 42%);
  --valiant-tono-oro: hsl(36 50% 40%);
  --valiant-tono-bosque: hsl(158 38% 30%);
  --valiant-tono-petroleo: hsl(198 48% 30%);
  --valiant-tono-pizarra: hsl(215 18% 38%);
  --valiant-tono-grafito: hsl(222 22% 20%);
  /* Primary Action Button (CTA) - Ergonomic Tech Indigo */
  --valiant-btn-primary-bg: #1d4ed8;
  --valiant-btn-primary-text: hsl(0 0% 100%); /* texto sobre el azul de acción */
  --valiant-btn-primary-hover: #1e40af;
  --valiant-btn-primary-dark: #172554;
  --valiant-btn-primary-glow: 0 0 0 3px rgba(37, 99, 235, 0.25);
  --valiant-btn-primary-shadow: 0 4px 14px rgba(29, 78, 216, 0.28);
  --valiant-btn-primary-shadow-hover: 0 6px 20px rgba(29, 78, 216, 0.38);

  /* Elevation & Geometry */
  --valiant-radius-sm: 8px;
  --valiant-radius-md: 14px;
  --valiant-radius-lg: 20px;
  --valiant-radius-xl: 26px;
  --valiant-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --valiant-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06);
  --valiant-shadow-hover: 0 10px 30px -4px rgba(15, 23, 42, 0.10);
  --valiant-shadow-elevated: 0 20px 45px -8px rgba(15, 23, 42, 0.12);

  /* Legacy View Mapping Variables */
  --CcInk: var(--valiant-ink);
  --CcInkSoft: var(--valiant-ink-soft);
  --CcPaper: var(--valiant-bg);
  --CcSurface: var(--valiant-card);
  --CcSurfaceAlt: var(--valiant-soft-2);
  --CcLine: var(--valiant-line);
  --CcAccent: var(--valiant-crimson);
  --CcAccentStrong: var(--valiant-crimson-dark);
  --CcAccentSoft: var(--valiant-crimson-soft);
  --CcSuccess: var(--valiant-ok);
  --CcDanger: var(--valiant-bad);
  --CcShadow: var(--valiant-shadow);
  --CcShadowSoft: var(--valiant-shadow-sm);
  --CcRadiusXl: var(--valiant-radius-xl);
  --CcRadiusLg: var(--valiant-radius-lg);
  --CcRadiusMd: var(--valiant-radius-md);
  --CcRadiusSm: var(--valiant-radius-sm);

  --sg-bg: var(--valiant-bg);
  --sg-card: var(--valiant-card);
  --sg-ink: var(--valiant-ink);
  --sg-muted: var(--valiant-muted);
  --sg-line: var(--valiant-line);
  --sg-soft: var(--valiant-soft);
  --sg-soft-2: var(--valiant-soft-2);
  --sg-accent: var(--valiant-crimson);
  --sg-accent-soft: var(--valiant-crimson-soft);
  --sg-shadow: var(--valiant-shadow);
  --sg-shadow-soft: var(--valiant-shadow-sm);
  --sg-radius: var(--valiant-radius-lg);

  /* Checador, Solicitudes & HR Tokens */
  --checa-primary: var(--valiant-ink);
  --checa-accent: var(--valiant-crimson);
  --checa-success: var(--valiant-ok);
  --checa-warning: var(--valiant-warn);
  --checa-danger: var(--valiant-bad);
  --checa-bg: var(--valiant-bg);
  --checa-card-bg: var(--valiant-card);
  --checa-border: var(--valiant-line);
  --checa-text-main: var(--valiant-ink);
  --checa-text-muted: var(--valiant-muted);
}

/* ==========================================================================
   Valiant Dark Theme Token Overrides
   ========================================================================== */
[data-theme="dark"] {
  /* Paleta VALIANT en modo oscuro */
  --valiant-tono-carmesi: hsl(0 70% 48%);
  --valiant-tono-vino: hsl(345 45% 45%);
  --valiant-tono-cobre: hsl(16 50% 50%);
  --valiant-tono-oro: hsl(36 45% 50%);
  --valiant-tono-bosque: hsl(158 32% 40%);
  --valiant-tono-petroleo: hsl(198 40% 42%);
  --valiant-tono-pizarra: hsl(215 16% 50%);
  --valiant-tono-grafito: hsl(222 16% 38%);
  /* Obsidian / Slate Neutrals in Dark Mode */
  --valiant-ink: #f8fafc;
  --valiant-ink-soft: #cbd5e1;
  --valiant-muted: #94a3b8;
  --valiant-line: rgba(255, 255, 255, 0.09);
  --valiant-line-strong: rgba(255, 255, 255, 0.18);
  --valiant-card: #131722;
  --valiant-bg: #0b0f19;
  --valiant-soft: #181f30;
  --valiant-soft-2: #1e2638;

  --valiant-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --valiant-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5);
  --valiant-shadow-hover: 0 10px 30px -4px rgba(0, 0, 0, 0.65);
  --valiant-shadow-elevated: 0 20px 45px -8px rgba(0, 0, 0, 0.8);

  /* Legacy View Mapping Variables in Dark */
  --CcInk: var(--valiant-ink);
  --CcInkSoft: var(--valiant-ink-soft);
  --CcPaper: var(--valiant-bg);
  --CcSurface: var(--valiant-card);
  --CcSurfaceAlt: var(--valiant-soft-2);
  --CcLine: var(--valiant-line);
  --CcShadow: var(--valiant-shadow);
  --CcShadowSoft: var(--valiant-shadow-sm);

  --sg-bg: var(--valiant-bg);
  --sg-card: var(--valiant-card);
  --sg-ink: var(--valiant-ink);
  --sg-muted: var(--valiant-muted);
  --sg-line: var(--valiant-line);
  --sg-soft: var(--valiant-soft);
  --sg-soft-2: var(--valiant-soft-2);
  --sg-shadow: var(--valiant-shadow);
  --sg-shadow-soft: var(--valiant-shadow-sm);

  /* Checador, Solicitudes & HR Tokens in Dark */
  --checa-primary: var(--valiant-ink);
  --checa-accent: var(--valiant-crimson);
  --checa-bg: var(--valiant-bg);
  --checa-card-bg: var(--valiant-card);
  --checa-border: var(--valiant-line);
  --checa-text-main: var(--valiant-ink);
  --checa-text-muted: var(--valiant-muted);

  /* Primary Action Button in Dark Mode */
  --valiant-btn-primary-bg: #2563eb;
  --valiant-btn-primary-text: hsl(0 0% 100%); /* texto sobre el azul de acción */
  --valiant-btn-primary-hover: #3b82f6;
  --valiant-btn-primary-dark: #1d4ed8;
  --valiant-btn-primary-glow: 0 0 0 3px rgba(59, 130, 246, 0.35);
  --valiant-btn-primary-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
  --valiant-btn-primary-shadow-hover: 0 6px 22px rgba(37, 99, 235, 0.45);
}

/* Date and Time Picker Indicators in Dark Mode */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
  cursor: pointer;
}

/* Dark Mode Bootstrap Utility Overrides */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
  background-color: var(--valiant-soft) !important;
  color: var(--valiant-ink) !important;
}

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

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

[data-theme="dark"] .border-bottom {
  border-bottom-color: var(--valiant-line) !important;
}

[data-theme="dark"] .border-top {
  border-top-color: var(--valiant-line) !important;
}

[data-theme="dark"] .border {
  border-color: var(--valiant-line) !important;
}

[data-theme="dark"] .alert-danger {
  background-color: rgba(220, 38, 38, 0.15) !important;
  color: #fca5a5 !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
}

[data-theme="dark"] .alert-warning {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #fde68a !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

[data-theme="dark"] .alert-info {
  background-color: rgba(14, 165, 233, 0.15) !important;
  color: #7dd3fc !important;
  border-color: rgba(14, 165, 233, 0.3) !important;
}

[data-theme="dark"] .alert-success {
  background-color: rgba(34, 197, 94, 0.15) !important;
  color: #86efac !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

/* Base HTML & Bootstrap Dark Elements */
[data-theme="dark"] body {
  background-color: var(--valiant-bg);
  color: var(--valiant-ink);
}

[data-theme="dark"] .modal-content {
  background-color: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border: 1px solid var(--valiant-line-strong) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: var(--valiant-line) !important;
}

[data-theme="dark"] .close {
  color: var(--valiant-ink) !important;
  text-shadow: none !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--valiant-soft) !important;
  color: var(--valiant-ink) !important;
  border-color: var(--valiant-line) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .custom-select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  background-color: var(--valiant-soft-2) !important;
  color: var(--valiant-ink) !important;
  border-color: var(--valiant-crimson) !important;
}

[data-theme="dark"] .table {
  color: var(--valiant-ink) !important;
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
  border-color: var(--valiant-line) !important;
}

[data-theme="dark"] .card {
  background-color: var(--valiant-card) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
}

[data-theme="dark"] .dropdown-menu {
  background-color: var(--valiant-card) !important;
  border-color: var(--valiant-line) !important;
}

[data-theme="dark"] .dropdown-item {
  color: var(--valiant-ink-soft) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--valiant-soft) !important;
  color: var(--valiant-ink) !important;
}

[data-theme="dark"] .dropdown-divider {
  border-top-color: var(--valiant-line) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: var(--valiant-soft) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  color: var(--valiant-ink) !important;
}

[data-theme="dark"] .select2-dropdown {
  background-color: var(--valiant-card) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
}

[data-theme="dark"] .select2-search--dropdown .select2-search__field {
  background-color: var(--valiant-soft) !important;
  color: var(--valiant-ink) !important;
  border-color: var(--valiant-line) !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option {
  color: var(--valiant-ink-soft) !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--valiant-crimson) !important;
  color: #ffffff !important;
}

/* Select2 dentro de modales: acotar altura para no romper el scroll del modal ni tapar el formulario */
.modal .select2-container--default .select2-results > .select2-results__options,
.nx-modal .select2-container--default .select2-results > .select2-results__options,
.modal .select2-dropdown .select2-results > .select2-results__options {
  max-height: 220px !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_processing,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
  color: var(--valiant-muted) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--valiant-muted) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--valiant-soft) !important;
  color: var(--valiant-crimson) !important;
  border-color: var(--valiant-line) !important;
}

/* ==========================================================================
   SweetAlert2 - VALIANT Design System Integration (Light & Dark Mode)
   ========================================================================== */
.swal2-container {
  z-index: 10600 !important;
}

/* SweetAlert2 - Modal Backdrop (Only applies to dialogs/modals, never to toasts) */
body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show,
body:not(.swal2-toast-shown) .swal2-container.swal2-noanimation,
.swal2-container.swal2-backdrop-show:not(.swal2-top-end):not(.swal2-top):not(.swal2-top-start):not(.swal2-bottom-end):not(.swal2-bottom):not(.swal2-bottom-start):not(:has(.swal2-toast)) {
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

[data-theme="dark"] body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show,
[data-theme="dark"] .swal2-container.swal2-backdrop-show:not(:has(.swal2-toast)) {
  background: rgba(0, 0, 0, 0.75) !important;
}

/* SweetAlert2 - Toast Container must NEVER dim the screen or block underlying clicks */
body.swal2-toast-shown .swal2-container,
.swal2-container:has(.swal2-toast),
.swal2-container.swal2-top-end,
.swal2-container.swal2-top,
.swal2-container.swal2-top-start,
.swal2-container.swal2-bottom-end,
.swal2-container.swal2-bottom,
.swal2-container.swal2-bottom-start {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  padding: 16px !important;
}

/* SweetAlert2 Visibility Protection:
   SweetAlert2 manages internal elements (file, inputs, deny, cancel, loaders)
   with inline style="display: none;". Never allow author rules with !important to unhide them! */
.swal2-popup [style*="display: none"],
.swal2-popup [style*="display:none"],
.swal2-popup [hidden] {
  display: none !important;
}

/* SweetAlert2 - Executive Modal Dialogs */
.swal2-popup.valiant-swal-modal,
.swal2-popup:not(.swal2-toast) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background-color: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border: 1px solid var(--valiant-line) !important;
  border-radius: var(--valiant-radius-md, 12px) !important;
  box-shadow: var(--valiant-shadow-elevated) !important;
  padding: 1.5rem !important;
  max-width: 440px !important;
  width: 90% !important;
}

/* Modal ancho para listados y tablas (historial y vinculados de comparativas) */
.swal2-container .swal2-popup.valiant-swal-wide {
  max-width: min(1150px, 96vw) !important;
  width: min(1150px, 96vw) !important;
}

[data-theme="dark"] .swal2-popup.valiant-swal-modal,
[data-theme="dark"] .swal2-popup:not(.swal2-toast) {
  background-color: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border: 1px solid var(--valiant-line-strong) !important;
  box-shadow: var(--valiant-shadow-elevated) !important;
}

.swal2-popup:not(.swal2-toast) .swal2-title,
.swal2-title:not(.premium-toast-title):not(.valiant-toast-title) {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--valiant-ink) !important;
  padding: 0 !important;
  margin: 0.75rem 0 0.25rem !important;
  line-height: 1.35 !important;
  letter-spacing: -0.015em !important;
}

.swal2-popup:not(.swal2-toast) .swal2-html-container,
.swal2-popup:not(.swal2-toast) .swal2-content {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: var(--valiant-muted) !important;
  margin: 0.5rem 0 1.25rem !important;
  line-height: 1.55 !important;
}

[data-theme="dark"] .swal2-popup:not(.swal2-toast) .swal2-html-container,
[data-theme="dark"] .swal2-popup:not(.swal2-toast) .swal2-content {
  color: var(--valiant-ink-soft) !important;
}

/* SweetAlert2 Modal Icon refinements in VALIANT */
.swal2-popup:not(.swal2-toast) .swal2-icon {
  box-sizing: content-box !important;
  margin: 0.75rem auto 0.75rem !important;
  font-size: 0.65rem !important;
  width: 5em !important;
  height: 5em !important;
  border-width: 0.25em !important;
  transform: none !important;
}

.swal2-popup:not(.swal2-toast) .swal2-icon .swal2-icon-content {
  font-size: 1.85rem !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
}

/* ==========================================================================
   SweetAlert2 - VALIANT Toast (avisos de estado)
   Tarjeta sobria: icono en cuadro tintado, texto compacto, cierre y barra de tiempo fina.
   ========================================================================== */
.swal2-popup.swal2-toast {
  --toast-tone: var(--valiant-ok);
  --toast-soft: var(--valiant-ok-soft);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  position: relative !important;
  overflow: hidden !important;
  width: auto !important;
  max-width: 400px !important;
  min-width: 260px !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  background-color: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border: 1px solid var(--valiant-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--valiant-shadow-elevated) !important;
  pointer-events: auto !important;
  margin: 0 !important;
}

.swal2-popup.swal2-toast.swal2-icon-error { --toast-tone: var(--valiant-bad); --toast-soft: var(--valiant-bad-soft); }
.swal2-popup.swal2-toast.swal2-icon-warning { --toast-tone: var(--valiant-warn); --toast-soft: var(--valiant-warn-soft); }
.swal2-popup.swal2-toast.swal2-icon-info,
.swal2-popup.swal2-toast.swal2-icon-question { --toast-tone: var(--valiant-blue); --toast-soft: var(--valiant-blue-soft); }

[data-theme="dark"] .swal2-popup.swal2-toast {
  border-color: var(--valiant-line-strong) !important;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.55) !important;
}

/* Icono: cuadro tintado con símbolo propio (sin animaciones ni anillos de SweetAlert2) */
.swal2-popup.swal2-toast .swal2-icon {
  flex: 0 0 auto !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: var(--toast-soft) !important;
  color: var(--toast-tone) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  transform: none !important;
  animation: none !important;
  position: relative !important;
}
.swal2-popup.swal2-toast .swal2-icon > *,
.swal2-popup.swal2-toast .swal2-icon [class^='swal2-success'],
.swal2-popup.swal2-toast .swal2-icon [class^='swal2-x-mark'] {
  display: none !important;
}
.swal2-popup.swal2-toast .swal2-icon::before {
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: var(--toast-tone) !important;
  content: '\2713';
}
.swal2-popup.swal2-toast .swal2-icon.swal2-error::before { content: '\2715'; }
.swal2-popup.swal2-toast .swal2-icon.swal2-warning::before { content: '!'; font-size: 17px !important; }
.swal2-popup.swal2-toast .swal2-icon.swal2-info::before { content: 'i'; font-size: 16px !important; }
.swal2-popup.swal2-toast .swal2-icon.swal2-question::before { content: '?'; font-size: 16px !important; }

.swal2-popup.swal2-toast .swal2-title,
.swal2-popup.swal2-toast .premium-toast-title,
.swal2-popup.swal2-toast .valiant-toast-title {
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  color: var(--valiant-ink) !important;
}

.swal2-popup.swal2-toast .swal2-html-container {
  margin: 2px 0 0 !important;
  padding: 0 !important;
  font-size: 0.76rem !important;
  color: var(--valiant-muted) !important;
  text-align: left !important;
}

/* Botón de cierre discreto */
.swal2-popup.swal2-toast .swal2-close {
  position: static !important;
  flex: 0 0 auto !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: var(--valiant-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.swal2-popup.swal2-toast .swal2-close:hover {
  background: var(--valiant-soft-2) !important;
  color: var(--valiant-ink) !important;
}

/* Barra de tiempo fina al pie */
.swal2-popup.swal2-toast .swal2-timer-progress-bar-container {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 2px !important;
  overflow: hidden !important;
  z-index: 3 !important;
}
.swal2-popup.swal2-toast .swal2-timer-progress-bar {
  height: 2px !important;
  background: var(--toast-tone) !important;
  opacity: 0.85 !important;
}

@media (max-width: 576px) {
  body.swal2-toast-shown .swal2-container.swal2-top-end,
  body.swal2-toast-shown .swal2-container.swal2-top,
  body.swal2-toast-shown .swal2-container.swal2-top-start,
  .swal2-container:has(.swal2-toast) {
    top: 10px !important;
    left: 12px !important;
    right: 12px !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 0 !important;
  }

  .swal2-popup.swal2-toast {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

.swal2-popup .swal2-icon.swal2-warning {
  border-color: var(--valiant-warn) !important;
  color: var(--valiant-warn) !important;
}

.swal2-popup .swal2-icon.swal2-error {
  border-color: var(--valiant-bad) !important;
  color: var(--valiant-bad) !important;
}
.swal2-popup .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  background-color: var(--valiant-bad) !important;
}

.swal2-popup .swal2-icon.swal2-success {
  border-color: var(--valiant-ok) !important;
  color: var(--valiant-ok) !important;
}
.swal2-popup .swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: var(--valiant-ok) !important;
}
.swal2-popup .swal2-icon.swal2-success .swal2-success-ring {
  border: 0.25em solid rgba(22, 163, 74, 0.25) !important;
}
.swal2-popup .swal2-icon.swal2-success [class^='swal2-success-circular-line'],
.swal2-popup .swal2-icon.swal2-success .swal2-success-fix {
  background-color: var(--valiant-card) !important;
}

.swal2-popup .swal2-icon.swal2-info,
.swal2-popup .swal2-icon.swal2-question {
  border-color: var(--valiant-blue) !important;
  color: var(--valiant-blue) !important;
}

/* Action buttons */
.swal2-popup .swal2-actions:not([style*="display: none"]):not([style*="display:none"]) {
  display: flex !important;
  gap: 10px !important;
  margin: 0.75rem 0 0 !important;
  width: 100% !important;
  justify-content: flex-end !important;
}

.swal2-popup button.swal2-styled {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: var(--valiant-radius-sm, 7px) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  outline: none !important;
}

.swal2-popup button.swal2-styled:not([style*="display: none"]):not([style*="display:none"]) {
  display: inline-flex !important;
}

/* Cancel Button */
.swal2-popup button.swal2-cancel,
.valiant-swal-btn-cancel {
  background: var(--valiant-card) !important;
  color: var(--valiant-ink-soft) !important;
  border: 1px solid var(--valiant-line) !important;
}
.swal2-popup button.swal2-cancel:hover,
.valiant-swal-btn-cancel:hover {
  background: var(--valiant-soft-2) !important;
  border-color: var(--valiant-line-strong) !important;
  color: var(--valiant-ink) !important;
}

/* Confirm Button (Primary) */
.swal2-popup button.swal2-confirm,
.valiant-swal-btn-primary {
  background: var(--valiant-btn-primary-bg) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: var(--valiant-btn-primary-shadow) !important;
}
.swal2-popup button.swal2-confirm:hover,
.valiant-swal-btn-primary:hover {
  background: var(--valiant-btn-primary-hover) !important;
  box-shadow: var(--valiant-btn-primary-shadow-hover) !important;
}

/* Destructive / Danger Confirm Button */
.swal2-popup button.swal2-confirm.valiant-btn-danger,
.swal2-popup.valiant-swal-danger button.swal2-confirm,
.swal2-popup button.valiant-btn-danger {
  background: var(--valiant-bad) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.28) !important;
}
.swal2-popup button.swal2-confirm.valiant-btn-danger:hover,
.swal2-popup.valiant-swal-danger button.swal2-confirm:hover,
.swal2-popup button.valiant-btn-danger:hover {
  background: #b91c1c !important;
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.38) !important;
}

/* Form inputs in SweetAlert (prompts) */
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  background-color: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border: 1px solid var(--valiant-line) !important;
  border-radius: var(--valiant-radius-sm, 7px) !important;
  box-shadow: none !important;
  margin: 0.75rem 0 !important;
  padding: 8px 12px !important;
}
.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-textarea:focus,
.swal2-popup .swal2-select:focus {
  border-color: var(--valiant-blue) !important;
  box-shadow: 0 0 0 3px var(--valiant-blue-soft) !important;
}

[data-theme="dark"] .swal2-input,
[data-theme="dark"] .swal2-textarea,
[data-theme="dark"] .swal2-select {
  background-color: var(--valiant-soft) !important;
  color: var(--valiant-ink) !important;
  border-color: var(--valiant-line) !important;
}

/* SweetAlert2 Visibility Protection:
   SweetAlert2 toggles internal elements (file, input, textarea, deny, cancel, actions, loaders)
   using inline style="display: none;". This rule guarantees that inline display: none is never broken. */
.swal2-popup [style*="display: none"],
.swal2-popup [style*="display:none"],
.swal2-popup button[style*="display: none"],
.swal2-popup button[style*="display:none"],
.swal2-popup input[style*="display: none"],
.swal2-popup input[style*="display:none"],
.swal2-popup [hidden] {
  display: none !important;
}

/* System Tables in Dark Mode */
[data-theme="dark"] .table {
  color: var(--valiant-ink) !important;
}

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

[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--valiant-ink) !important;
}

[data-theme="dark"] .table thead th {
  background-color: var(--valiant-soft) !important;
  color: var(--valiant-ink) !important;
  border-bottom: 2px solid var(--valiant-line-strong) !important;
}

[data-theme="dark"] .styled-table {
  background-color: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border-color: var(--valiant-line) !important;
}

/* Cards & Surface Elements */
[data-theme="dark"] .custom-card,
[data-theme="dark"] .custom-caja {
  background-color: var(--valiant-card) !important;
  border: 1px solid var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  background-color: var(--valiant-soft) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
}

[data-theme="dark"] .obra-dash-card {
  background: var(--valiant-card) !important;
  border: 1px solid var(--valiant-line) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .obra-dash-title span {
  color: var(--valiant-ink) !important;
}

[data-theme="dark"] .obra-dash-icon {
  background: var(--valiant-soft) !important;
  border: 1px solid var(--valiant-line) !important;
  color: #60a5fa !important;
}

/* Typography & Utility Helpers */
[data-theme="dark"] .text-secondary {
  color: var(--valiant-muted) !important;
}

[data-theme="dark"] .border-light {
  border-color: var(--valiant-line) !important;
}




/* ==========================================================================
   Base Layout & Containers
   ========================================================================== */
.cc-user-page,
.sg-page {
  padding: clamp(14px, 2vw, 28px) 0 clamp(24px, 3vw, 40px);
  background-color: var(--valiant-bg);
  min-height: calc(100vh - 60px);
}

.cc-wrap,
.sg-shell,
.cc-shell {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 clamp(14px, 2.5vw, 32px);
}

.cc-mono {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ==========================================================================
   Universal Valiant Header (Replaces dark bars & outdated gradients)
   ========================================================================== */
.cc-header,
.cc-hero,
.sg-header {
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
  box-shadow: var(--valiant-shadow-sm) !important;
  border: 1px solid var(--valiant-line) !important;
  border-left: 3px solid var(--valiant-crimson) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 8px !important;
  position: relative !important;
  overflow: hidden !important;
}

.cc-header::after,
.cc-hero::after,
.sg-header::after {
  display: none !important;
}

.cc-header-left,
.sg-header-top {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.cc-header-right {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.cc-kicker,
.sg-kicker {
  font-size: 0.65rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  color: var(--valiant-crimson) !important;
  opacity: 1 !important;
  margin-bottom: 1px !important;
  line-height: 1 !important;
}

.cc-title,
.cc-hero-title,
.sg-title {
  margin: 1px 0 !important;
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  color: var(--valiant-ink) !important;
  line-height: 1.2 !important;
}

.cc-subtitle,
.cc-hero-copy,
.sg-subtitle {
  color: var(--valiant-muted) !important;
  font-size: 0.78rem !important;
  line-height: 1.25 !important;
  max-width: 800px !important;
  margin: 0 !important;
}

.cc-hero-nav,
.sg-header-pills {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.cc-chip-nav,
.sg-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  color: var(--valiant-ink-soft) !important;
  background: var(--valiant-soft-2) !important;
  border: 1px solid var(--valiant-line) !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  transition: all 0.18s ease;
}

.cc-chip-nav:hover,
.sg-pill:hover {
  background: var(--valiant-card) !important;
  border-color: var(--valiant-crimson-border) !important;
  color: var(--valiant-crimson) !important;
  box-shadow: var(--valiant-shadow-sm);
}

/* ==========================================================================
   Header Metrics / KPI Badges
   ========================================================================== */
.cc-metrics {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

.cc-metric {
  background: var(--valiant-soft) !important;
  border: 1px solid var(--valiant-line) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  text-align: right !important;
  height: auto !important;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.cc-metric:hover {
  border-color: var(--valiant-line-strong) !important;
  transform: translateY(-1px);
}

.cc-metric-label {
  font-size: 0.64rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 700 !important;
  color: var(--valiant-muted) !important;
  opacity: 1 !important;
  line-height: 1 !important;
}

.cc-metric-value {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--valiant-ink) !important;
  line-height: 1 !important;
  margin-top: 2px !important;
}

.cc-metric-favor {
  background: var(--valiant-ok-soft) !important;
  border-color: var(--valiant-ok-border) !important;
}

.cc-metric-favor .cc-metric-label {
  color: #15803d !important;
}

.cc-metric-favor .cc-metric-value {
  color: #166534 !important;
}

/* ==========================================================================
   Toolbar & Filter Controls
   ========================================================================== */
.cc-toolbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 6px 0 10px !important;
}

.cc-search {
  position: relative !important;
  flex: 1 1 320px !important;
  min-width: 240px !important;
}

.cc-search-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--valiant-muted) !important;
  font-size: 0.9rem !important;
  pointer-events: none !important;
}

.cc-search-input {
  height: 34px !important;
  border-radius: var(--valiant-radius-md) !important;
  border: 1px solid var(--valiant-line) !important;
  padding-left: 34px !important;
  padding-right: 12px !important;
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  box-shadow: var(--valiant-shadow-sm) !important;
  transition: all 0.18s ease !important;
}

.cc-search-input:focus {
  border-color: var(--valiant-crimson) !important;
  box-shadow: var(--valiant-crimson-glow) !important;
  outline: none !important;
}

/* Select2 in Toolbar */
.cc-user-select .select2-container--default .select2-selection--single {
  height: 44px !important;
  border-radius: var(--valiant-radius-md) !important;
  border: 1px solid var(--valiant-line) !important;
  background-color: var(--valiant-card) !important;
  box-shadow: var(--valiant-shadow-sm) !important;
  display: flex;
  align-items: center;
  transition: all 0.18s ease;
}

.cc-user-select .select2-container--default.select2-container--open .select2-selection--single,
.cc-user-select .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--valiant-crimson) !important;
  box-shadow: var(--valiant-crimson-glow) !important;
  outline: none !important;
}

.cc-user-select .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--valiant-ink) !important;
  font-weight: 600 !important;
  padding-left: 14px !important;
  padding-right: 36px !important;
  line-height: normal !important;
  font-size: 0.88rem !important;
}

.cc-user-select .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
  right: 12px !important;
}

.cc-toolbar-right {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 1 1 200px;
  justify-content: flex-end;
}

.cc-mini-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--valiant-card);
  border: 1px solid var(--valiant-line);
  color: var(--valiant-ink);
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: var(--valiant-shadow-sm);
  white-space: nowrap;
}

.cc-mini-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--valiant-crimson);
  box-shadow: 0 0 0 3px rgba(181, 12, 12, 0.15);
}

/* ==========================================================================
   Card Grid (User Panels & Filter / Approval Grids)
   ========================================================================== */
.cc-approve-page {
  padding: 8px 0 24px !important;
}

.cc-wrap {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.cc-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.row.cc-grid {
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: grid !important;
}

.cc-grid > [class*="col-"] {
  max-width: 100% !important;
  flex: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

.cc-obra-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cc-obra-card .cc-card {
  height: 100%;
}

.cc-card {
  background: var(--valiant-card) !important;
  border-radius: 10px !important;
  border: 1px solid var(--valiant-line) !important;
  box-shadow: var(--valiant-shadow-sm) !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cc-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--valiant-shadow-hover) !important;
  border-color: var(--valiant-line-strong) !important;
}

.cc-card-top {
  padding: 8px 12px !important;
  background: var(--valiant-card) !important;
  border-bottom: 1px solid var(--valiant-line) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.cc-card-title {
  flex: 1 1 auto;
  min-width: 0;
}

.cc-obra-name {
  font-weight: 800 !important;
  color: var(--valiant-ink) !important;
  font-size: 0.88rem !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  word-break: break-word;
}

.cc-obra-id {
  color: var(--valiant-muted) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  margin-top: 1px !important;
}

.cc-badge {
  background: var(--valiant-crimson-soft) !important;
  border: 1px solid var(--valiant-crimson-border) !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  text-align: center !important;
  min-width: 55px !important;
  flex-shrink: 0 !important;
}

.cc-badge-num {
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  color: var(--valiant-crimson) !important;
  line-height: 1 !important;
}

.cc-badge-label {
  font-size: 0.62rem !important;
  color: var(--valiant-crimson) !important;
  font-weight: 700 !important;
  margin-top: 1px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Toolbar & Realtime Search */
.cc-toolbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 6px 0 10px !important;
}

.cc-search {
  position: relative !important;
  min-width: 240px !important;
  flex: 1 1 320px !important;
}

.cc-search-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--valiant-muted) !important;
  font-size: 0.9rem !important;
  pointer-events: none !important;
}

.cc-search-input {
  height: 34px !important;
  border-radius: var(--valiant-radius-md) !important;
  border: 1px solid var(--valiant-line) !important;
  padding-left: 34px !important;
  padding-right: 12px !important;
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  box-shadow: var(--valiant-shadow-sm) !important;
  font-size: 0.82rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.cc-search-input:focus {
  border-color: var(--valiant-crimson) !important;
  box-shadow: var(--valiant-crimson-glow) !important;
  outline: none !important;
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
}

.cc-toolbar-hint {
  color: var(--valiant-muted) !important;
}

/* Empty Alert State */
.cc-alert {
  border-radius: var(--valiant-radius-lg) !important;
  border: 1px solid var(--valiant-line) !important;
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  box-shadow: var(--valiant-shadow) !important;
  padding: 24px !important;
}

.cc-alert hr {
  border-top: 1px solid var(--valiant-line) !important;
}

.cc-alert-title {
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  color: var(--valiant-ink) !important;
}

.cc-alert-text {
  margin-top: 6px !important;
  color: var(--valiant-muted) !important;
}

.cc-alert-foot {
  font-weight: 600 !important;
  color: var(--valiant-muted) !important;
  font-size: 0.85rem !important;
}

/* Mini Table Preview */
.cc-mini-table-wrap {
  background: var(--valiant-soft) !important;
  border: 1px solid var(--valiant-line) !important;
  border-radius: var(--valiant-radius-md) !important;
  padding: 12px !important;
}

.cc-mini-head {
  margin-bottom: 10px;
}

.cc-mini-title {
  font-weight: 800 !important;
  color: var(--valiant-ink) !important;
}

.cc-mini-sub {
  color: var(--valiant-muted) !important;
}

.cc-mini-table thead th {
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--valiant-muted) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--valiant-line) !important;
}

.cc-mini-table td {
  vertical-align: middle !important;
  color: var(--valiant-ink) !important;
  border-bottom: 1px solid var(--valiant-line) !important;
}

.cc-btn-oc-preview {
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 0.74rem !important;
  padding: 0.25rem 0.6rem !important;
  border: 1px solid var(--valiant-crimson-border) !important;
  background: var(--valiant-crimson-soft) !important;
  color: var(--valiant-crimson) !important;
  transition: all 0.2s ease !important;
}

.cc-btn-oc-preview:hover {
  background: var(--valiant-crimson) !important;
  color: #ffffff !important;
}

.cc-mini-footer {
  margin-top: 10px;
  text-align: right;
}

.cc-mini-link {
  font-weight: 800 !important;
  text-decoration: none !important;
  color: var(--valiant-crimson) !important;
}

.cc-mini-link:hover {
  text-decoration: underline !important;
  color: var(--valiant-crimson-hover) !important;
}

.cc-empty-mini {
  background: var(--valiant-soft) !important;
  border: 1px dashed var(--valiant-line-strong) !important;
  border-radius: var(--valiant-radius-md) !important;
  padding: 12px !important;
  color: var(--valiant-muted) !important;
}

/* OC Preview Modal */
.cc-modal-xl {
  width: 96%;
  max-width: 1320px;
  margin: 1.2rem auto;
}

.cc-oc-modal-content {
  border-radius: var(--valiant-radius-lg) !important;
  border: 1px solid var(--valiant-line) !important;
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  box-shadow: var(--valiant-shadow-elevated) !important;
  overflow: hidden;
  max-height: calc(100vh - 2.4rem);
  display: flex;
  flex-direction: column;
}

.cc-oc-modal-header {
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border-bottom: 1px solid var(--valiant-line) !important;
  padding: 16px 20px !important;
}

.cc-oc-modal-header .modal-title {
  color: var(--valiant-ink) !important;
  font-weight: 800 !important;
}

.cc-oc-close {
  color: var(--valiant-ink) !important;
  opacity: 0.7 !important;
}

.cc-oc-close:hover {
  opacity: 1 !important;
}

.cc-oc-modal-body {
  background: var(--valiant-bg) !important;
  overflow-y: auto;
  padding: 18px !important;
}

.cc-oc-modal-footer {
  background: var(--valiant-card) !important;
  border-top: 1px solid var(--valiant-line) !important;
  padding: 14px 20px !important;
}

.cc-oc-summary {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.cc-oc-summary-left {
  flex: 1 1 520px;
  background: var(--valiant-card) !important;
  border: 1px solid var(--valiant-line) !important;
  border-radius: var(--valiant-radius-md) !important;
  padding: 16px !important;
  box-shadow: var(--valiant-shadow-sm) !important;
}

.cc-oc-summary-right {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cc-oc-kv {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--valiant-line) !important;
}

.cc-oc-k {
  color: var(--valiant-muted) !important;
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cc-oc-v {
  color: var(--valiant-ink) !important;
  font-weight: 700;
  text-align: right;
  max-width: 65%;
}

.cc-oc-total-card {
  background: var(--valiant-card) !important;
  border: 1px solid var(--valiant-line) !important;
  border-radius: var(--valiant-radius-md) !important;
  padding: 16px !important;
  box-shadow: var(--valiant-shadow-sm) !important;
}

.cc-oc-total-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
}

.cc-oc-total-line.total {
  border-bottom: 0 !important;
  font-weight: 900;
  font-size: 1.08rem;
  color: var(--valiant-crimson) !important;
}

.cc-section-title {
  font-weight: 800;
  color: var(--valiant-ink) !important;
  margin: 14px 0 10px;
  letter-spacing: 0.01em;
}

.cc-oc-table thead th {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--valiant-muted) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--valiant-line) !important;
}

.cc-oc-table td {
  color: var(--valiant-ink) !important;
  border-bottom: 1px solid var(--valiant-line) !important;
}

.cc-skeleton {
  background: var(--valiant-card) !important;
  border: 1px solid var(--valiant-line) !important;
  border-radius: var(--valiant-radius-md) !important;
  padding: 16px !important;
}

.cc-skel-line {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--valiant-soft), var(--valiant-soft-2), var(--valiant-soft));
  background-size: 200% 100%;
  animation: ccShimmer 1.2s ease-in-out infinite;
  margin-bottom: 10px;
}

.cc-skel-block {
  height: 160px;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--valiant-soft), var(--valiant-soft-2), var(--valiant-soft));
  background-size: 200% 100%;
  animation: ccShimmer 1.2s ease-in-out infinite;
}

@keyframes ccShimmer {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

@media (max-width: 576px) {
  .cc-grid {
    grid-template-columns: 1fr !important;
  }
  .cc-modal-xl {
    width: 100%;
    margin: 0;
    max-width: none;
  }
  .cc-oc-modal-content {
    border-radius: 0 !important;
    max-height: 100vh;
  }
}

.cc-id-num {
  font-weight: 800;
  color: var(--valiant-ink);
  font-size: 0.95rem;
}

.cc-date {
  color: var(--valiant-muted);
  font-size: 0.82rem;
}

.cc-card-body {
  padding: 8px 12px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}

.cc-label {
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--valiant-muted);
  margin-bottom: 4px;
}

/* Money Row in Cards */
.cc-money-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.cc-money {
  background: var(--valiant-soft) !important;
  border: 1px solid var(--valiant-line) !important;
  border-radius: var(--valiant-radius-md) !important;
  padding: 10px 14px !important;
}

.cc-money-ok {
  background: var(--valiant-ok-soft) !important;
  border-color: var(--valiant-ok-border) !important;
}

.cc-value {
  font-weight: 800;
  color: var(--valiant-ink);
  font-size: 1.1rem;
}

/* Metrics in COP Cards */
.cop-card-metrics {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.cop-card-metrics div {
  border: 1px solid var(--valiant-line) !important;
  border-radius: var(--valiant-radius-md) !important;
  padding: 9px 10px !important;
  background: var(--valiant-soft) !important;
  transition: border-color 0.15s ease !important;
}

.cop-card-metrics span {
  display: block !important;
  color: var(--valiant-muted) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
}

.cop-card-metrics strong {
  display: block !important;
  color: var(--valiant-ink) !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  margin-top: 2px !important;
}

@media (max-width: 576px) {
  .cop-card-metrics {
    grid-template-columns: 1fr !important;
  }
}

.cc-motivo {
  color: var(--valiant-ink);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.4;
}

/* Status Pills */
.cc-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}

.cc-pill-ok {
  background: var(--valiant-ok-soft) !important;
  border-color: var(--valiant-ok-border) !important;
  color: #15803d !important;
}

.cc-pill-warn {
  background: var(--valiant-warn-soft) !important;
  border-color: var(--valiant-warn-border) !important;
  color: #b45309 !important;
}

.cc-pill-bad {
  background: var(--valiant-bad-soft) !important;
  border-color: var(--valiant-bad-border) !important;
  color: #b91c1c !important;
}

.cc-pill-neutral {
  background: var(--valiant-soft-2) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-ink-soft) !important;
}

.cc-pill-blue {
  background: var(--valiant-blue-soft) !important;
  border-color: var(--valiant-blue-border) !important;
  color: #1d4ed8 !important;
}

.cc-pill-purple {
  background: var(--valiant-purple-soft) !important;
  border-color: var(--valiant-purple-border) !important;
  color: #6d28d9 !important;
}

/* Progress Bar */
.cc-progress-wrap {
  margin-top: 4px;
}

.cc-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.cc-progress-label {
  font-weight: 800;
  color: var(--valiant-muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cc-progress-value {
  font-weight: 800;
  color: var(--valiant-ink);
  font-size: 0.84rem;
}

.cc-progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--valiant-line);
  overflow: hidden;
}

.cc-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--valiant-bad) !important;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.cc-progress-bar--bad {
  background: var(--valiant-bad) !important;
}

.cc-progress-bar--warn {
  background: var(--valiant-warn) !important;
}

.cc-progress-bar--ok {
  background: var(--valiant-ok) !important;
}

/* Card Actions & Buttons */
.cc-card-actions {
  padding: 0 !important;
  border-top: none !important;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: transparent !important;
}

.cc-btn {
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  padding: 6px 12px !important;
  border: 1px solid var(--valiant-line) !important;
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  box-shadow: var(--valiant-shadow-sm) !important;
  transition: all 0.16s ease !important;
  text-align: center;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cc-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
  color: var(--valiant-ink) !important;
}

.cc-btn-primary,
.cc-btn--primary {
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--valiant-btn-primary-bg) 0%, var(--valiant-btn-primary-dark) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: var(--valiant-btn-primary-shadow) !important;
}

.cc-btn-primary:hover,
.cc-btn--primary:hover {
  background: linear-gradient(135deg, var(--valiant-btn-primary-hover) 0%, var(--valiant-btn-primary-dark) 100%) !important;
  color: #ffffff !important;
  box-shadow: var(--valiant-btn-primary-shadow-hover) !important;
}

.cc-btn-neutral {
  border-color: var(--valiant-line) !important;
  background: var(--valiant-soft) !important;
  color: var(--valiant-ink-soft) !important;
}

.cc-btn-neutral:hover {
  background: var(--valiant-card) !important;
  border-color: var(--valiant-line-strong) !important;
}

.cc-btn-secondary {
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border: 1px solid var(--valiant-line) !important;
  border-radius: 999px !important;
  padding: 0.56rem 1rem !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

.cc-btn-secondary:hover {
  background: var(--valiant-soft-2) !important;
  border-color: var(--valiant-line-strong) !important;
  color: var(--valiant-ink) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

.cc-btn-success {
  border-color: var(--valiant-ok-border) !important;
  background: var(--valiant-ok-soft) !important;
  color: #15803d !important;
}

.btn-info-theme,
.catalog-action-btn.btn-info-theme,
.eoc .btn-info-theme {
  background: var(--valiant-btn-primary-bg, #1d4ed8) !important;
  border: 1px solid var(--valiant-btn-primary-dark, #172554) !important;
  color: #ffffff !important;
}

.btn-info-theme:hover,
.catalog-action-btn.btn-info-theme:hover,
.eoc .btn-info-theme:hover {
  background: var(--valiant-btn-primary-hover, #1e40af) !important;
  border-color: var(--valiant-btn-primary-dark, #172554) !important;
  color: #ffffff !important;
}

.cc-btn-danger,
.cc-btn--danger {
  border-color: var(--valiant-bad-border) !important;
  background: var(--valiant-bad-soft) !important;
  color: #b91c1c !important;
}

.cc-btn-disabled {
  border-color: var(--valiant-line) !important;
  background: var(--valiant-soft-2) !important;
  color: var(--valiant-muted) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ==========================================================================
   Creation Forms Layout (cajachica/create, solicitudobra/create)
   ========================================================================== */
.cc-layout,
.sg-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.95fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

.cc-panel,
.sg-card {
  border-radius: var(--valiant-radius-lg) !important;
  background: var(--valiant-card) !important;
  box-shadow: var(--valiant-shadow) !important;
  border: 1px solid var(--valiant-line) !important;
  overflow: hidden;
}

.cc-panel-header,
.sg-card-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px 24px !important;
  background: var(--valiant-card) !important;
  border-bottom: 1px solid var(--valiant-soft-2) !important;
  position: relative !important;
}

.sg-card-head::before,
.cc-panel-header::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 14px !important;
  bottom: 14px !important;
  width: 4px !important;
  border-radius: 0 999px 999px 0 !important;
  background: var(--valiant-crimson) !important;
}

.cc-panel-title,
.sg-card-head h2 {
  margin: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--valiant-ink) !important;
  letter-spacing: -0.01em !important;
}

.sg-card-head p {
  margin: 4px 0 0 !important;
  color: var(--valiant-muted) !important;
  font-size: 0.84rem !important;
}

.cc-panel-body,
.sg-card-body {
  padding: 24px !important;
}

/* Segmented Toggle Control (Para ti / Para otro usuario) */
.cc-segment {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  border-radius: var(--valiant-radius-sm, 7px);
  background: var(--valiant-soft-2) !important;
  border: 1px solid var(--valiant-line) !important;
}

.cc-segment-option {
  position: relative;
}

.cc-segment-option input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

.cc-segment-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 14px;
  border-radius: 5px;
  color: var(--valiant-ink-soft) !important;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.18s ease;
}

.cc-segment-option input:checked + span {
  background: var(--valiant-btn-primary-bg) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Summary Panel / Card (Replaces the dark navy box in create views) */
.cc-summary,
.sg-summary,
.sg-preview {
  border-radius: var(--valiant-radius-lg) !important;
  background: var(--valiant-card) !important;
  box-shadow: var(--valiant-shadow) !important;
  border: 1px solid var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
  padding: 24px !important;
  position: sticky;
  top: 70px;
}

.cc-summary-header,
.cc-summary-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--valiant-line) !important;
  margin-bottom: 18px !important;
}

.cc-summary-title,
.sg-summary-title {
  margin: 0 !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: var(--valiant-ink) !important;
}

.cc-summary-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--valiant-crimson-soft) !important;
  color: var(--valiant-crimson) !important;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--valiant-crimson-border);
}

.cc-summary-card,
.sg-summary-card {
  background: var(--valiant-soft) !important;
  border: 1px solid var(--valiant-line) !important;
  border-radius: var(--valiant-radius-md) !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
}

.cc-summary-card .cc-summary-kicker,
.cc-summary-card .cc-summary-label {
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  font-weight: 800 !important;
  color: var(--valiant-muted) !important;
  margin-bottom: 4px !important;
}

.cc-summary-card .cc-summary-value {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--valiant-ink) !important;
}

.cc-summary-total,
.sg-summary-total {
  background: var(--valiant-crimson-soft) !important;
  border: 1px solid var(--valiant-crimson-border) !important;
  border-radius: var(--valiant-radius-md) !important;
  padding: 16px !important;
  margin-top: 18px !important;
  text-align: right;
}

.cc-summary-total .cc-summary-label,
.sg-summary-total-label {
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 800 !important;
  color: var(--valiant-crimson-dark) !important;
}

.cc-summary-total .cc-summary-value,
.sg-summary-total-amount,
.sg-summary-total h3 {
  font-size: 1.75rem !important;
  font-weight: 900 !important;
  color: var(--valiant-crimson) !important;
  letter-spacing: -0.02em;
  margin: 4px 0 0 !important;
}

/* Concept rows & items in forms */
.cc-detail-item,
.sg-concept-card {
  padding: 16px !important;
  border-radius: var(--valiant-radius-md) !important;
  background: var(--valiant-soft) !important;
  border: 1px solid var(--valiant-line) !important;
  box-shadow: var(--valiant-shadow-sm) !important;
}

.cc-concept-picker-menu {
  border-radius: var(--valiant-radius-md) !important;
  border: 1px solid var(--valiant-line) !important;
  box-shadow: var(--valiant-shadow-elevated) !important;
}

.cc-concept-option:hover,
.cc-concept-option.is-active {
  background: var(--valiant-crimson-soft) !important;
  color: var(--valiant-crimson) !important;
}

.sg-concept-badge {
  background: var(--valiant-soft-2) !important;
  color: var(--valiant-ink) !important;
  border: 1px solid var(--valiant-line) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
}

/* Inputs, Selects & Forms in Create views */
.cc-input,
.cc-select,
.cc-textarea,
.sg-input,
.sg-select,
.sg-textarea {
  width: 100%;
  border: 1px solid var(--valiant-line) !important;
  background: var(--valiant-card) !important;
  border-radius: var(--valiant-radius-md) !important;
  min-height: 44px;
  padding: 0 14px;
  color: var(--valiant-ink) !important;
  font-size: 0.92rem !important;
  font-weight: 500;
  transition: all 0.18s ease;
  box-shadow: var(--valiant-shadow-sm);
}

.cc-textarea,
.sg-textarea {
  min-height: 100px;
  padding: 12px 14px;
  resize: vertical;
}

.cc-input:focus,
.cc-select:focus,
.cc-textarea:focus,
.sg-input:focus,
.sg-select:focus,
.sg-textarea:focus {
  outline: none !important;
  border-color: var(--valiant-crimson) !important;
  box-shadow: var(--valiant-crimson-glow) !important;
}

.cc-input[readonly],
.sg-input[readonly] {
  background: var(--valiant-soft-2) !important;
  color: var(--valiant-ink-soft) !important;
}

/* Buttons in Forms */
.btn-valiant-primary,
.cc-submit-btn,
.sg-btn-primary,
.cc-footer-actions .btn-primary {
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--valiant-btn-primary-bg) 0%, var(--valiant-btn-primary-dark) 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  padding: 10px 24px !important;
  border: none !important;
  box-shadow: var(--valiant-btn-primary-shadow) !important;
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none !important;
}

.btn-valiant-primary:hover,
.cc-submit-btn:hover,
.sg-btn-primary:hover,
.cc-footer-actions .btn-primary:hover {
  background: linear-gradient(135deg, var(--valiant-btn-primary-hover) 0%, var(--valiant-btn-primary-dark) 100%) !important;
  transform: translateY(-1px);
  box-shadow: var(--valiant-btn-primary-shadow-hover) !important;
  color: #ffffff !important;
}

.sg-btn-secondary,
.cc-footer-actions .btn-outline-dark,
.cc-footer-actions .btn-light {
  border-radius: 999px !important;
  border: 1px solid var(--valiant-line-strong) !important;
  background: var(--valiant-card) !important;
  color: var(--valiant-ink-soft) !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  padding: 10px 22px !important;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none !important;
}

.sg-btn-secondary:hover,
.cc-footer-actions .btn-outline-dark:hover,
.cc-footer-actions .btn-light:hover {
  background: var(--valiant-soft-2) !important;
  border-color: var(--valiant-muted) !important;
  color: var(--valiant-ink) !important;
}

/* Modals */
.cc-modal-content {
  border-radius: var(--valiant-radius-lg) !important;
  border: 1px solid var(--valiant-line) !important;
  box-shadow: var(--valiant-shadow-elevated) !important;
  overflow: hidden;
}

.cc-modal-header {
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border-bottom: 1px solid var(--valiant-line) !important;
  padding: 16px 22px !important;
}

.cc-modal-close {
  color: var(--valiant-muted) !important;
  opacity: 0.8;
}

.cc-modal-close:hover {
  opacity: 1;
  color: var(--valiant-ink) !important;
}

.cc-modal-body {
  background: var(--valiant-bg) !important;
  padding: 22px !important;
}

.cc-modal-footer {
  background: var(--valiant-card) !important;
  border-top: 1px solid var(--valiant-line) !important;
  padding: 14px 22px !important;
}

/* Empty State Card */
.cc-empty-card {
  background: var(--valiant-card) !important;
  border: 1px dashed var(--valiant-line-strong) !important;
  border-radius: var(--valiant-radius-lg) !important;
  box-shadow: var(--valiant-shadow-sm) !important;
  padding: 40px 24px !important;
  text-align: center;
}

.cc-empty-title {
  font-weight: 800 !important;
  color: var(--valiant-ink) !important;
  font-size: 1.05rem !important;
}

.cc-empty-sub {
  color: var(--valiant-muted) !important;
  margin-top: 6px !important;
  font-size: 0.88rem !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .cc-layout,
  .sg-grid {
    grid-template-columns: 1fr !important;
  }
  .cc-summary,
  .sg-summary,
  .sg-preview {
    position: static !important;
    margin-top: 20px !important;
  }
}

@media (max-width: 768px) {
  .cc-header,
  .cc-hero,
  .sg-header {
    padding: 16px !important;
    border-radius: var(--valiant-radius-md) !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .cc-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .cc-metric {
    min-width: 0 !important;
    text-align: left !important;
  }
  .cc-field--half,
  .cc-field--third,
  .sg-col-8,
  .sg-col-6,
  .sg-col-4 {
    grid-column: span 12 !important;
  }
}

/* ==========================================================================
   Form Grid & Fields System
   ========================================================================== */
.cc-form-grid,
.sg-form-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.cc-field,
.sg-col-12 {
  grid-column: span 12 !important;
}

.cc-field--half,
.sg-col-6 {
  grid-column: span 6 !important;
}

.cc-field--third,
.sg-col-4 {
  grid-column: span 4 !important;
}

.sg-col-8 {
  grid-column: span 8 !important;
}

.cc-field--hidden {
  display: none !important;
}

.cc-field-inline {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.cc-field-inline .cc-label {
  margin-bottom: 0 !important;
  min-width: 160px !important;
}

.cc-field-inline .cc-segment {
  flex-shrink: 0 !important;
}

.cc-label,
.sg-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--valiant-ink);
  text-transform: none !important;
  letter-spacing: normal !important;
}

.cc-help,
.sg-help {
  margin-top: 6px;
  color: var(--valiant-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.cc-detail-toolbar,
.sg-inline-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
}

.cc-detail-title {
  margin: 0 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--valiant-ink) !important;
}

.cc-detail-subtitle {
  margin: 4px 0 0 !important;
  color: var(--valiant-muted) !important;
  font-size: 0.84rem !important;
}

.cc-btn-row {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.cc-detail-list,
.sg-concept-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.cc-detail-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) minmax(130px, 0.8fr) 44px !important;
  gap: 14px !important;
  align-items: end !important;
}

.cc-detail-col,
.cc-detail-grid > div {
  min-width: 0 !important;
}

.cc-detail-col--actions,
.cc-detail-grid > div:last-child {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
}

.cc-detail-remove {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  border-radius: var(--valiant-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
}

.sg-concept-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 160px 56px !important;
  gap: 12px !important;
  align-items: end !important;
}

.sg-concept-item-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.cc-concept-picker {
  position: relative !important;
}

.cc-concept-picker-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  display: none;
  max-height: 280px !important;
  overflow-y: auto !important;
  border-radius: var(--valiant-radius-md) !important;
  background: var(--valiant-card) !important;
  border: 1px solid var(--valiant-line) !important;
  box-shadow: var(--valiant-shadow-elevated) !important;
}

.cc-concept-picker-menu.is-open {
  display: block !important;
}

.cc-concept-option {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--valiant-soft-2) !important;
  cursor: pointer !important;
  transition: background-color .16s ease !important;
}

.cc-concept-option:last-child {
  border-bottom: 0 !important;
}

.cc-concept-option:hover,
.cc-concept-option.is-active {
  background: var(--valiant-crimson-soft) !important;
  color: var(--valiant-crimson) !important;
}

.cc-concept-option-title {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--valiant-ink) !important;
}

.cc-error {
  display: none;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--valiant-radius-md);
  background: #fef2f2;
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: #991b1b;
  font-size: 0.88rem;
  line-height: 1.5;
}

.cc-error.is-visible {
  display: block !important;
}

.cc-footer-actions {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 22px !important;
}

.cc-submit-status {
  margin-top: 10px !important;
  color: var(--valiant-muted) !important;
  font-size: 0.84rem !important;
  line-height: 1.5 !important;
}

.cc-submit-status.is-ready {
  color: var(--valiant-ok) !important;
}

.cc-submit-status.is-busy {
  color: var(--valiant-crimson) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   Solicitud Obra Specific Components
   ========================================================================== */
.sg-card {
  margin-bottom: 20px !important;
}

.sg-total {
  font-size: 2.2rem !important;
  font-weight: 900 !important;
  color: var(--valiant-crimson) !important;
  margin: 4px 0 14px !important;
  letter-spacing: -0.02em;
}

.sg-summary-meta {
  display: grid !important;
  gap: 10px !important;
}

.sg-meta-item {
  padding: 12px 14px !important;
  border-radius: var(--valiant-radius-md) !important;
  background: var(--valiant-soft) !important;
  border: 1px solid var(--valiant-line) !important;
}

.sg-meta-label {
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--valiant-muted) !important;
  margin-bottom: 4px !important;
  font-weight: 700 !important;
}

.sg-meta-value {
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  color: var(--valiant-ink) !important;
  line-height: 1.35 !important;
}

.sg-summary-list {
  display: grid !important;
  gap: 10px !important;
}

.sg-summary-item {
  padding: 12px 14px !important;
  border-radius: var(--valiant-radius-md) !important;
  background: var(--valiant-soft) !important;
  border: 1px solid var(--valiant-line) !important;
}

.sg-summary-item strong {
  display: block !important;
  font-size: 0.83rem !important;
  color: var(--valiant-ink) !important;
  margin-bottom: 3px !important;
  font-weight: 700 !important;
}

.sg-summary-item span {
  color: var(--valiant-muted) !important;
  font-size: 0.84rem !important;
}

.sg-concept-item {
  border: 1px solid var(--valiant-line) !important;
  border-radius: var(--valiant-radius-md) !important;
  background: var(--valiant-soft) !important;
  padding: 18px !important;
}

.sg-concept-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  background: var(--valiant-crimson-soft) !important;
  color: var(--valiant-crimson) !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  border: 1px solid var(--valiant-crimson-border) !important;
}

.sg-field input,
.sg-field textarea,
.sg-field select {
  width: 100% !important;
  min-height: 44px !important;
  border-radius: var(--valiant-radius-md) !important;
  border: 1px solid var(--valiant-line) !important;
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  padding: 10px 14px !important;
  outline: none !important;
  transition: all 0.18s ease !important;
  box-shadow: var(--valiant-shadow-sm) !important;
}

.sg-field textarea {
  min-height: 100px !important;
  resize: vertical !important;
}

.sg-field input:focus,
.sg-field textarea:focus,
.sg-field select:focus {
  border-color: var(--valiant-crimson) !important;
  box-shadow: var(--valiant-crimson-glow) !important;
}

.sg-field input[readonly] {
  background: var(--valiant-soft-2) !important;
  color: var(--valiant-ink-soft) !important;
  font-weight: 700 !important;
}

.sg-switch {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 16px 18px !important;
  border-radius: var(--valiant-radius-md) !important;
  background: var(--valiant-soft) !important;
  border: 1px solid var(--valiant-line) !important;
}

.sg-btn {
  min-height: 44px !important;
  border-radius: 999px !important;
  padding: 0 24px !important;
  border: none !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  background: linear-gradient(135deg, var(--valiant-crimson) 0%, var(--valiant-crimson-dark) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(181, 12, 12, 0.30) !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}

.sg-btn:hover {
  background: linear-gradient(135deg, var(--valiant-crimson-hover) 0%, #990a0a 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(181, 12, 12, 0.38) !important;
  color: #ffffff !important;
}

.sg-btn-secondary {
  min-height: 42px !important;
  border-radius: 999px !important;
  padding: 0 18px !important;
  border: 1px solid var(--valiant-line-strong) !important;
  background: var(--valiant-card) !important;
  color: var(--valiant-ink-soft) !important;
  font-weight: 700 !important;
  font-size: 0.86rem !important;
  transition: all 0.18s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-decoration: none !important;
}

.sg-btn-secondary:hover {
  background: var(--valiant-soft-2) !important;
  border-color: var(--valiant-muted) !important;
  color: var(--valiant-ink) !important;
}

.sg-btn-danger {
  min-height: 38px !important;
  border-radius: 999px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(220, 38, 38, 0.25) !important;
  background: var(--valiant-card) !important;
  color: #dc2626 !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  transition: all 0.18s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.sg-btn-danger:hover {
  background: var(--valiant-bad-soft) !important;
  border-color: #dc2626 !important;
}

.sg-btn-ghost {
  min-height: 42px !important;
  border-radius: 999px !important;
  padding: 0 18px !important;
  border: 1px solid var(--valiant-line) !important;
  background: var(--valiant-soft) !important;
  color: var(--valiant-ink) !important;
  font-weight: 700 !important;
  font-size: 0.86rem !important;
  transition: all 0.18s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

/* Responsive Form Adjustments (Caja Chica, Solicitud Obra) */
@media (max-width: 768px) {
  .cc-panel-body,
  .sg-card-body {
    padding: 16px !important;
  }

  .cc-detail-item {
    padding: 14px !important;
  }

  .cc-detail-grid {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 12px !important;
    align-items: end !important;
  }

  .cc-detail-col--concepto,
  .cc-detail-col--descripcion,
  .cc-detail-grid > div:nth-child(1),
  .cc-detail-grid > div:nth-child(2) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .cc-detail-col--monto,
  .cc-detail-grid > div:nth-child(3) {
    grid-column: 1 / 2 !important;
    width: 100% !important;
  }

  .cc-detail-col--actions,
  .cc-detail-grid > div:nth-child(4) {
    grid-column: 2 / 3 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
  }

  .sg-concept-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .cc-field-inline {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .cc-field-inline .cc-label {
    min-width: auto !important;
  }

  .cc-field-inline .cc-segment {
    width: 100% !important;
  }
}


/* ==========================================================================
   Valiant Theme Switcher & Admin Palette Controls
   ========================================================================== */
.valiant-theme-toggle {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  width: 36px;
  height: 36px;
  min-width: 36px;
  max-width: 36px;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  margin-right: 8px;
  padding: 0;
  outline: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  user-select: none;
}

.valiant-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

.valiant-theme-toggle:active {
  transform: translateY(1px) scale(0.94);
}

.valiant-theme-toggle .themeToggleIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 15px;
}

/* Modo claro (icono de luna con resplandor azulado) */
.valiant-theme-toggle .fa-moon,
.valiant-theme-toggle svg.fa-moon {
  color: #93c5fd !important;
  filter: drop-shadow(0 0 6px rgba(147, 197, 253, 0.6));
  transition: transform 0.25s ease;
}

.valiant-theme-toggle:hover .fa-moon,
.valiant-theme-toggle:hover svg.fa-moon {
  transform: rotate(-15deg) scale(1.1);
}

/* Modo oscuro (icono de sol con resplandor ámbar cálido) */
[data-theme="dark"] .valiant-theme-toggle {
  background: rgba(251, 191, 36, 0.1) !important;
  border-color: rgba(251, 191, 36, 0.28) !important;
}

[data-theme="dark"] .valiant-theme-toggle:hover {
  background: rgba(251, 191, 36, 0.18) !important;
  border-color: rgba(251, 191, 36, 0.5) !important;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.3);
}

.valiant-theme-toggle .fa-sun,
.valiant-theme-toggle svg.fa-sun {
  color: #fbbf24 !important;
  filter: drop-shadow(0 0 7px rgba(251, 191, 36, 0.75));
  transition: transform 0.3s ease;
}

.valiant-theme-toggle:hover .fa-sun,
.valiant-theme-toggle:hover svg.fa-sun {
  transform: rotate(35deg) scale(1.1);
}

.valiant-palette-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #e2e8f0 !important;
  width: 36px;
  height: 36px;
  min-width: 36px;
  max-width: 36px;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  margin-right: 8px;
  padding: 0;
  outline: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  user-select: none;
}

.valiant-palette-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px) rotate(10deg);
}

.valiant-palette-btn:active {
  transform: translateY(1px) scale(0.94);
}

/* Palette Modal & Color Cards */
.theme-palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.theme-preset-card {
  border: 2px solid var(--valiant-line);
  border-radius: var(--valiant-radius-md);
  padding: 12px 10px;
  cursor: pointer;
  text-align: center;
  transition: all 0.18s ease;
  background: var(--valiant-card);
}

.theme-preset-card:hover {
  border-color: var(--valiant-line-strong);
  transform: translateY(-2px);
  box-shadow: var(--valiant-shadow-sm);
}

.theme-preset-card.active {
  border-color: var(--valiant-crimson);
  box-shadow: var(--valiant-crimson-glow);
}

.theme-preset-swatch {
  width: 100%;
  height: 38px;
  border-radius: var(--valiant-radius-sm);
  margin-bottom: 8px;
}

.theme-preset-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--valiant-ink);
}

/* ==========================================================================
   Bloque 1: Cambios de Obra (Aditivas, Extraordinarios, Deductivas, Matrices)
   Unified Design Aliases for .adi-*, .ex-*, .de-*, .ep-*
   ========================================================================== */

/* Token Bridge for Aditivas, Extraordinarios, and Deductivas */
:root,
[data-theme="dark"],
[data-theme="light"] {
  --ad-ink: var(--valiant-ink) !important;
  --ad-muted: var(--valiant-muted) !important;
  --ad-line: var(--valiant-line) !important;
  --ad-soft: var(--valiant-soft) !important;
  --ad-soft2: var(--valiant-soft) !important;
  --adi-card: var(--valiant-card) !important;

  --ex-ink: var(--valiant-ink) !important;
  --ex-muted: var(--valiant-muted) !important;
  --ex-line: var(--valiant-line) !important;
  --ex-soft: var(--valiant-soft) !important;
  --ex-soft2: var(--valiant-soft) !important;
  --ex-card: var(--valiant-card) !important;

  --de-ink: var(--valiant-ink) !important;
  --de-muted: var(--valiant-muted) !important;
  --de-line: var(--valiant-line) !important;
  --de-soft: var(--valiant-soft) !important;
  --de-soft2: var(--valiant-soft) !important;
  --de-card: var(--valiant-card) !important;
}

.adi-label,
.ex-label,
.de-label,
.adi-card-title,
.ex-card-title,
.de-card-title {
  color: var(--valiant-ink) !important;
  font-weight: 800 !important;
}

.adi-help,
.ex-help,
.de-help {
  color: var(--valiant-muted) !important;
}

/* Hero Headers (Aditivas, Extraordinarios, Deductivas) */
.adi-hero,
.ex-hero,
.de-hero {
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border-radius: var(--valiant-radius-lg) !important;
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.5vw, 32px) !important;
  box-shadow: var(--valiant-shadow) !important;
  border: 1px solid var(--valiant-line) !important;
  border-left: 4px solid var(--valiant-crimson) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: clamp(14px, 2vw, 24px) !important;
  flex-wrap: wrap !important;
  margin-bottom: 20px !important;
  position: relative !important;
  overflow: hidden !important;
}

.adi-hero::after,
.ex-hero::after,
.de-hero::after {
  display: none !important;
}

/* Extraordinarios Licitaciones (.ep-*) Grid Hero */
.ep-panel {
  background: transparent !important;
  max-width: 1560px !important;
  margin: 0 auto !important;
  padding: clamp(16px, 2vw, 24px) !important;
}



.adi-kicker,
.ex-kicker,
.de-kicker {
  font-size: 0.74rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  color: var(--valiant-crimson) !important;
  opacity: 1 !important;
  margin-bottom: 4px !important;
}

.adi-title,
.ex-title,
.de-title {
  margin: 2px 0 6px !important;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem) !important;
  font-weight: 800 !important;
  color: var(--valiant-ink) !important;
  letter-spacing: -0.02em !important;
}

.adi-subtitle,
.ex-subtitle,
.de-subtitle {
  color: var(--valiant-muted) !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
}

/* KPI Badges / Metrics */
.adi-metrics,
.ex-metrics,
.de-metrics,
.ep-metrics {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.adi-metric,
.ex-metric,
.de-metric,
.ep-metric {
  background: var(--valiant-soft) !important;
  border: 1px solid var(--valiant-line) !important;
  border-radius: var(--valiant-radius-md) !important;
  padding: 10px 14px !important;
  min-width: 135px !important;
  flex: 1 1 140px !important;
  text-align: right !important;
  transition: border-color 0.18s ease, transform 0.18s ease !important;
}

.adi-metric:hover,
.ex-metric:hover,
.de-metric:hover,
.ep-metric:hover {
  border-color: var(--valiant-line-strong) !important;
  transform: translateY(-1px) !important;
}

.adi-metric-label,
.ex-metric-label,
.de-metric-label,
.ep-metric-label {
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
  color: var(--valiant-muted) !important;
  opacity: 1 !important;
}

.adi-metric-value,
.ex-metric-value,
.de-metric-value,
.ep-metric-value {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--valiant-ink) !important;
  line-height: 1.2 !important;
}

/* Navigation Chips / Breadcrumbs */
.ue-nav-breadcrumb .ue-nav-item,
.adi-chip,
.ex-chip,
.de-chip {
  color: var(--valiant-ink-soft) !important;
  background: var(--valiant-soft-2) !important;
  border: 1px solid var(--valiant-line) !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  transition: all 0.18s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.ue-nav-breadcrumb .ue-nav-item:hover,
.adi-chip:hover,
.ex-chip:hover,
.de-chip:hover {
  background: var(--valiant-card) !important;
  border-color: var(--valiant-crimson-border) !important;
  color: var(--valiant-crimson) !important;
  box-shadow: var(--valiant-shadow-sm) !important;
}

.ue-nav-breadcrumb .ue-nav-item.is-current {
  background: var(--valiant-crimson-soft) !important;
  border-color: var(--valiant-crimson-border) !important;
  color: var(--valiant-crimson) !important;
  font-weight: 700 !important;
}

/* Toolbars & Search */
.adi-toolbar,
.ex-toolbar,
.de-toolbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin: 14px 0 18px !important;
}

.adi-search-input,
.ex-search-input,
.de-search-input {
  height: 44px !important;
  border-radius: var(--valiant-radius-md) !important;
  border: 1px solid var(--valiant-line) !important;
  padding-left: 38px !important;
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  box-shadow: var(--valiant-shadow-sm) !important;
}

.adi-search-input:focus,
.ex-search-input:focus,
.de-search-input:focus {
  border-color: var(--valiant-crimson) !important;
  box-shadow: var(--valiant-crimson-glow) !important;
  outline: none !important;
}

/* Panels & Cards */
.adi-card,
.ex-card,
.de-card,
.ep-panel,
.ep-card {
  background: var(--valiant-card) !important;
  border-radius: var(--valiant-radius-lg) !important;
  border: 1px solid var(--valiant-line) !important;
  box-shadow: var(--valiant-shadow) !important;
  overflow: hidden !important;
}

.adi-card-h,
.ex-card-h,
.de-card-h,
.ep-card-header {
  padding: 16px 20px !important;
  background: var(--valiant-card) !important;
  border-bottom: 1px solid var(--valiant-line) !important;
  font-weight: 800 !important;
  color: var(--valiant-ink) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.adi-card-b,
.ex-card-b,
.de-card-b,
.ep-card-body {
  padding: 20px !important;
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
}

/* Form Controls */
.adi-form-control,
.ex-form-control,
.de-form-control,
.ep-form-control {
  border-radius: var(--valiant-radius-md) !important;
  border: 1px solid var(--valiant-line) !important;
  background-color: var(--valiant-soft) !important;
  color: var(--valiant-ink) !important;
  padding: 8px 14px !important;
  font-size: 0.88rem !important;
  transition: all 0.18s ease !important;
}

.adi-form-control:focus,
.ex-form-control:focus,
.de-form-control:focus,
.ep-form-control:focus {
  border-color: var(--valiant-crimson) !important;
  background-color: var(--valiant-soft-2) !important;
  box-shadow: var(--valiant-crimson-glow) !important;
  outline: none !important;
}

/* Action Buttons — estilo global VALIANT (igual a nx-btn): 34px, radio 7px, secundario con borde, primario azul sólido */
.adi-btn,
.ex-btn,
.de-btn,
.ep-btn {
  border-radius: 7px !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  line-height: 1 !important;
  height: 34px !important;
  padding: 0 0.85rem !important;
  border: 1px solid var(--valiant-line-strong) !important;
  background: var(--valiant-card) !important;
  color: var(--valiant-ink-soft, var(--valiant-ink)) !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  white-space: nowrap;
}

.adi-btn:hover,
.ex-btn:hover,
.de-btn:hover,
.ep-btn:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--valiant-muted) !important;
  background: var(--valiant-soft-2) !important;
  color: var(--valiant-ink) !important;
}

.adi-btn-primary,
.ex-btn-primary,
.de-btn-primary,
.ep-btn-primary {
  background: var(--valiant-btn-primary-bg) !important;
  color: #ffffff !important;
  border-color: var(--valiant-btn-primary-bg) !important;
}

.adi-btn-primary:hover,
.ex-btn-primary:hover,
.de-btn-primary:hover,
.ep-btn-primary:hover {
  background: var(--valiant-btn-primary-hover) !important;
  border-color: var(--valiant-btn-primary-hover) !important;
  color: #ffffff !important;
}

.adi-btn-success, .ex-btn-success, .de-btn-success { background: var(--valiant-ok-soft) !important; border-color: var(--valiant-ok-border) !important; color: var(--valiant-ok) !important; }
.adi-btn-danger, .ex-btn-danger, .de-btn-danger { background: var(--valiant-bad-soft) !important; border-color: var(--valiant-bad-border) !important; color: var(--valiant-bad) !important; }
.adi-btn-neutral, .ex-btn-neutral, .de-btn-neutral { background: var(--valiant-card) !important; }

/* Side Card: Resumen Rápido */
#cardResumen,
.adi-summary,
.ex-summary,
.de-summary,
.adi-summary-card,
.ex-summary-card,
.de-summary-card {
  background: var(--valiant-card) !important;
  border: 1px solid var(--valiant-line) !important;
  border-radius: var(--valiant-radius-lg) !important;
  box-shadow: var(--valiant-shadow-sm) !important;
  color: var(--valiant-ink) !important;
  padding: 18px !important;
  overflow: hidden !important;
}

.adi-summary-row,
.ex-summary-row,
.de-summary-row {
  border-bottom: 1px solid var(--valiant-line) !important;
}

.adi-summary-k,
.ex-summary-k,
.de-summary-k {
  color: var(--valiant-muted) !important;
}

.adi-summary-v,
.ex-summary-v,
.de-summary-v {
  color: var(--valiant-ink) !important;
  font-weight: 800 !important;
}

.adi-divider,
.ex-divider,
.de-divider {
  background: var(--valiant-line) !important;
}

/* Modals for Aditivas, Extras, Deductivas */
.adi-modal-header,
.ex-modal-header,
.de-modal-header {
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border-bottom: 1px solid var(--valiant-line) !important;
  padding: 16px 20px !important;
}

.adi-modal-header h5,
.ex-modal-header h5,
.de-modal-header h5 {
  color: var(--valiant-ink) !important;
  font-weight: 800 !important;
}

.adi-modal-close,
.ex-modal-close,
.de-modal-close {
  color: var(--valiant-muted) !important;
}

.adi-modal-close:hover,
.ex-modal-close:hover,
.de-modal-close:hover {
  color: var(--valiant-crimson) !important;
}

.adi-modal-body,
.ex-modal-body,
.de-modal-body {
  background: var(--valiant-soft) !important;
  color: var(--valiant-ink) !important;
}

.adi-modal-footer,
.ex-modal-footer,
.de-modal-footer {
  background: var(--valiant-card) !important;
  border-top: 1px solid var(--valiant-line) !important;
}

.adi-empty,
.ex-empty,
.de-empty {
  background: var(--valiant-card) !important;
  border: 1px solid var(--valiant-line) !important;
  color: var(--valiant-muted) !important;
  border-radius: var(--valiant-radius-md) !important;
}

.adi-empty-title,
.ex-empty-title,
.de-empty-title {
  color: var(--valiant-ink) !important;
}

.adi-table-wrap,
.ex-table-wrap,
.de-table-wrap {
  background: var(--valiant-card) !important;
  border: 1px solid var(--valiant-line) !important;
  border-radius: var(--valiant-radius-md) !important;
}

#cardResumen .card-header,
#cardResumen .card-title,
#cardResumen [style*="background: #0f172a"],
#cardResumen [style*="background:#0f172a"] {
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border-bottom: 1px solid var(--valiant-line) !important;
}

#cardResumen .card-body,
#cardResumen table,
#cardResumen td,
#cardResumen th {
  color: var(--valiant-ink) !important;
  border-color: var(--valiant-line) !important;
}

/* Matrices de Obra: Gradient Header & Section Bars */
.gradient-header {
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border: 1px solid var(--valiant-line) !important;
  border-left: 4px solid var(--valiant-crimson) !important;
  border-radius: var(--valiant-radius-md) !important;
  box-shadow: var(--valiant-shadow-sm) !important;
}

.gradient-header.text-white,
.gradient-header.bg-dark {
  color: var(--valiant-ink) !important;
}

.gradient-header h5,
.gradient-header h6 {
  color: var(--valiant-ink) !important;
  font-weight: 800 !important;
}

.gradient-header .circle-badge-nofix,
.gradient-header .badge {
  background: var(--valiant-crimson) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(181, 12, 12, 0.25) !important;
}

#matricesContainer,
.matrices-obra-page {
  color: var(--valiant-ink) !important;
}

#matricesContainer .card,
.matrices-obra-page .card,
.row.px-3 .card {
  background-color: var(--valiant-card) !important;
  border: 1px solid var(--valiant-line) !important;
  border-radius: var(--valiant-radius-md) !important;
  box-shadow: var(--valiant-shadow-sm) !important;
  color: var(--valiant-ink) !important;
}

#matricesContainer .text-dark,
#matricesContainer h1,
#matricesContainer h5,
#matricesContainer h6,
#matricesContainer .card-title,
#matricesContainer .card-title strong {
  color: var(--valiant-ink) !important;
}

#matricesContainer hr {
  border-top-color: var(--valiant-line) !important;
}

#matricesContainer .collapse-area div {
  background-color: var(--valiant-soft) !important;
  color: var(--valiant-muted) !important;
  border-color: var(--valiant-line) !important;
}

#matricesContainer .select-icon-wrapper .select2-container--default .select2-selection--multiple {
  background-color: var(--valiant-input-bg) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
}

#matricesContainer .view-btn-group .btn {
  background-color: var(--valiant-soft) !important;
  color: var(--valiant-ink) !important;
  border-color: var(--valiant-line) !important;
}

#matricesContainer .view-btn-group .btn.active-view {
  background-color: var(--valiant-crimson) !important;
  border-color: var(--valiant-crimson) !important;
  color: #ffffff !important;
}

/* Tables in Aditivas/Extras */
.adi-table,
.ex-table,
.de-table,
.ep-table {
  width: 100% !important;
  background-color: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
}

.adi-table th,
.ex-table th,
.de-table th,
.ep-table th {
  background-color: var(--valiant-soft) !important;
  color: var(--valiant-muted) !important;
  font-weight: 800 !important;
  font-size: 0.74rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-bottom: 1px solid var(--valiant-line) !important;
  padding: 12px 14px !important;
}

.adi-table td,
.ex-table td,
.de-table td,
.ep-table td {
  border-top: 1px solid var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
  padding: 12px 14px !important;
  vertical-align: middle !important;
}

.adi-table tbody tr:hover,
.ex-table tbody tr:hover,
.de-table tbody tr:hover,
.ep-table tbody tr:hover {
  background-color: var(--valiant-soft) !important;
}

/* ==========================================================================
   Bloque 2 & 3: Control de Obra & Materiales
   (avanceDiario, estimaciones, solicitudMateriales, recepcionMateriales)
   ========================================================================== */

/* Token Bridge for .obra-ops and .eoc views */
.obra-ops,
:root .obra-ops,
[data-theme="dark"] .obra-ops,
[data-theme="light"] .obra-ops {
  --ops-canvas: var(--valiant-bg) !important;
  --ops-panel: var(--valiant-card) !important;
  --ops-panel-soft: var(--valiant-soft) !important;
  --ops-control: var(--valiant-input-bg) !important;
  --ops-ink: var(--valiant-ink) !important;
  --ops-text: var(--valiant-ink) !important;
  --ops-muted: var(--valiant-muted) !important;
  --ops-border-soft: var(--valiant-line) !important;
  --ops-border: var(--valiant-line) !important;
  --ops-primary: var(--valiant-btn-primary-bg) !important;
  --ops-primary-dark: var(--valiant-btn-primary-dark) !important;
  --ops-primary-soft: rgba(37, 99, 235, 0.12) !important;
  --ops-shadow-sm: var(--valiant-shadow-sm) !important;
  --ops-shadow: var(--valiant-shadow) !important;
  color: var(--valiant-ink) !important;
}

/* Base View Backgrounds */
.obra-ops,
.obra-ops .eoc,
.marginHeader.modo-bitacora,
body.obra-ops-body {
  background: var(--valiant-bg) !important;
  color: var(--valiant-ink) !important;
}

/* Page Headings and Breadcrumbs */
.photos-page-heading h5,
.ops-review-page-heading h5,
.obra-ops h5.font-weight-bold.text-dark,
.est-header h1 {
  color: var(--valiant-ink) !important;
  font-weight: 800 !important;
}

.obra-ops .breadcrumb a,
.obra-ops .breadcrumb-item,
.est-header .est-subtitle {
  color: var(--valiant-muted) !important;
}

/* KPI Dashboard Cards */
.kpi-dashboard-card,
.est-kpi,
.border-kpi-card {
  background: var(--valiant-card) !important;
  border: 1px solid var(--valiant-line) !important;
  border-radius: var(--valiant-radius-md) !important;
  box-shadow: var(--valiant-shadow-sm) !important;
  padding: 14px 18px !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.kpi-dashboard-card:hover,
.est-kpi:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--valiant-shadow-hover) !important;
}

.kpi-dashboard-card .kpi-title,
.est-kpi .est-kpi-label,
.border-kpi-card .kpi-label {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

.kpi-dashboard-card .kpi-value,
.est-kpi .est-kpi-value,
.border-kpi-card .kpi-value {
  font-weight: 800 !important;
  font-size: 1.35rem !important;
  line-height: 1.2 !important;
}

/* Estimaciones Header Card */
.est-header {
  background: var(--valiant-card) !important;
  border: 1px solid var(--valiant-line) !important;
  border-left: 4px solid var(--valiant-crimson) !important;
  border-radius: var(--valiant-radius-lg) !important;
  box-shadow: var(--valiant-shadow) !important;
}

.est-header::before {
  display: none !important;
}

/* Search Toolbars, Cards & Panels */
.obra-ops .header-card,
.obra-ops .search-toolbar,
.obra-ops .dashboard-actions,
.obra-ops .catalog-browser,
.obra-ops .est-tree-card {
  border: 1px solid var(--valiant-line) !important;
  border-radius: var(--valiant-radius-lg) !important;
  background: var(--valiant-card) !important;
  box-shadow: var(--valiant-shadow-sm) !important;
}

/* Input Fields inside Obra Ops */
.obra-ops input.form-control,
.obra-ops .photos-search-box input,
.obra-ops input[type="text"],
.obra-ops input[type="search"] {
  background-color: var(--valiant-input-bg) !important;
  border: 1px solid var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
  border-radius: var(--valiant-radius-md) !important;
}

.obra-ops input.form-control:focus,
.obra-ops .photos-search-box input:focus {
  border-color: var(--valiant-crimson) !important;
  box-shadow: var(--valiant-crimson-glow) !important;
}

/* Buttons in Toolbars */
.obra-ops .photos-filter-button,
.obra-ops .photos-expand-control .expand-toggle-btn,
.obra-ops .btn-outline-secondary {
  border: 1px solid var(--valiant-line) !important;
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

.obra-ops .photos-filter-button:hover,
.obra-ops .photos-expand-control .expand-toggle-btn:hover {
  background: var(--valiant-soft) !important;
  border-color: var(--valiant-crimson-border) !important;
  color: var(--valiant-crimson) !important;
}

/* Requisiciones Action Flow */
.requisition-action-flow-step .db-action-btn {
  color: var(--valiant-ink) !important;
}

.requisition-action-flow-step .db-action-label {
  color: var(--valiant-ink) !important;
  font-weight: 700 !important;
}

.requisition-action-flow-arrow {
  color: var(--valiant-muted) !important;
}

/* Tree & Concept Containers */
.tree-node-header-custom,
.detalles-nivel-container,
.tree-item {
  color: var(--valiant-ink) !important;
}

.detalles-nivel-container {
  background-color: var(--valiant-soft) !important;
  border: 1px solid var(--valiant-line) !important;
  border-left: 4px solid var(--valiant-crimson) !important;
}

/* ==========================================================================
   Recepción de Materiales (recepcionMateriales.php)
   ========================================================================== */
.rm-hero {
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border-radius: var(--valiant-radius-lg) !important;
  padding: clamp(18px, 2.5vw, 28px) !important;
  margin-bottom: 20px !important;
  box-shadow: var(--valiant-shadow) !important;
  border: 1px solid var(--valiant-line) !important;
  border-left: 4px solid var(--valiant-crimson) !important;
}

.rm-kicker {
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.75rem !important;
  color: var(--valiant-crimson) !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
}

.rm-hero h1 {
  margin: 4px 0 !important;
  font-weight: 800 !important;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem) !important;
  color: var(--valiant-ink) !important;
  letter-spacing: -0.02em !important;
}

.rm-subtitle {
  color: var(--valiant-muted) !important;
  font-size: 0.88rem !important;
  margin-top: 6px !important;
}

.rm-nav .rm-back,
.rm-nav .current {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
}

.rm-nav .rm-back {
  background: var(--valiant-soft) !important;
  border: 1px solid var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
}

.rm-nav .rm-back:hover {
  background: var(--valiant-card) !important;
  border-color: var(--valiant-crimson-border) !important;
  color: var(--valiant-crimson) !important;
}

.rm-nav .current {
  background: var(--valiant-crimson-soft) !important;
  border: 1px solid var(--valiant-crimson-border) !important;
  color: var(--valiant-crimson) !important;
  font-weight: 700 !important;
}

.rm-nav .sep {
  color: var(--valiant-muted) !important;
}

.rm-metric {
  background: var(--valiant-soft) !important;
  border: 1px solid var(--valiant-line) !important;
  border-radius: var(--valiant-radius-md) !important;
  padding: 10px 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  transition: transform 0.16s ease !important;
}

.rm-metric:hover {
  transform: translateY(-1px) !important;
  border-color: var(--valiant-line-strong) !important;
}

.rm-metric-label {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--valiant-muted) !important;
}

.rm-metric-value {
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  color: var(--valiant-ink) !important;
}

/* Recepción Toolbar & Cards */
.rm-toolbar,
.elev-card {
  background: var(--valiant-card) !important;
  border: 1px solid var(--valiant-line) !important;
  border-radius: var(--valiant-radius-lg) !important;
  box-shadow: var(--valiant-shadow-sm) !important;
  color: var(--valiant-ink) !important;
}

.rm-toolbar-title {
  color: var(--valiant-ink) !important;
  font-weight: 800 !important;
}

.rm-toolbar-description {
  color: var(--valiant-muted) !important;
}

.rm-toolbar .form-control,
.rm-toolbar select,
.rm-toolbar input {
  background-color: var(--valiant-input-bg) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
}

.elev-card .card-header {
  background: var(--valiant-card) !important;
  border-bottom: 1px solid var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
}

.elev-card .card-header h5,
.elev-card .card-header .h5 {
  color: var(--valiant-ink) !important;
  font-weight: 800 !important;
}

.elev-card .card-header .text-label {
  color: var(--valiant-muted) !important;
}

/* Recepción Modals */
.modal-content {
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border: 1px solid var(--valiant-line) !important;
}

.modal-header {
  background: var(--valiant-card) !important;
  border-bottom: 1px solid var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
}

.modal-title {
  color: var(--valiant-ink) !important;
  font-weight: 800 !important;
}

.modal-header .close {
  color: var(--valiant-muted) !important;
}

.modal-header .close:hover {
  color: var(--valiant-crimson) !important;
}

.modal-footer {
  background: var(--valiant-card) !important;
  border-top: 1px solid var(--valiant-line) !important;
}

/* ==========================================================================
   Inputs de archivo (global): reemplaza el botón nativo del sistema operativo
   ("Seleccionar archivo" gris feo) por uno con la identidad VALIANT, usando
   el pseudo-elemento estándar ::file-selector-button. No requiere JS ni tocar
   markup: aplica a cualquier <input type="file"> del proyecto.
   ========================================================================== */
input[type="file"]:not(.swal2-file):not(.nx-drop__input):not([style*="display: none"]):not([style*="display:none"]):not([hidden]):not(.d-none) {
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
  padding: 0 0.9rem 0 0 !important;
  border: 1px solid var(--valiant-line) !important;
  border-radius: 8px !important;
  background: var(--valiant-soft) !important;
  color: var(--valiant-muted) !important;
  font-size: 0.8rem !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="file"]:not(.swal2-file):not(.nx-drop__input):hover {
  border-color: var(--valiant-btn-primary-bg) !important;
}

input[type="file"]:focus,
input[type="file"]:focus-within {
  outline: none !important;
  border-color: var(--valiant-btn-primary-bg) !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15) !important;
}

/* El botón nativo se restyla como una píldora flotante con sombra: la forma
   (nunca rectangular en un control de archivo del sistema) y el relieve son
   lo que deja claro, de un vistazo, que ya no es el control feo del SO. */
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  height: 26px;
  margin: 0 0.75rem 0 4px;
  padding: 0 0.95rem;
  border: 1px solid var(--valiant-line);
  border-radius: 999px;
  background: var(--valiant-card);
  color: var(--valiant-ink);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--valiant-shadow-sm);
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

input[type="file"]:hover::file-selector-button,
input[type="file"]:hover::-webkit-file-upload-button {
  border-color: var(--valiant-btn-primary-bg);
  color: var(--valiant-btn-primary-bg);
}

/* Refinements for Extraordinarios Devueltos (.ep-*) Table & Actions */
.ep-table-wrap {
  background: var(--valiant-card) !important;
  border: 1px solid var(--valiant-line) !important;
  border-radius: var(--valiant-radius-lg) !important;
  box-shadow: var(--valiant-shadow-sm) !important;
  overflow: hidden !important;
}

.ep-table {
  width: 100% !important;
  background-color: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
}

.ep-table th {
  background-color: var(--valiant-soft) !important;
  color: var(--valiant-muted) !important;
  font-weight: 800 !important;
  font-size: 0.74rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-bottom: 2px solid var(--valiant-line) !important;
  padding: 14px 18px !important;
}

.ep-table td {
  border-top: 1px solid var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
  padding: 16px 18px !important;
  vertical-align: middle !important;
}

.ep-table tbody tr:hover {
  background-color: var(--valiant-soft) !important;
}

.ep-table a.btn-outline-primary {
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  border: 1px solid var(--valiant-line) !important;
  background: var(--valiant-soft) !important;
  color: var(--valiant-ink) !important;
  padding: 6px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.16s ease !important;
}

.ep-table a.btn-outline-primary:hover {
  background: var(--valiant-card) !important;
  border-color: #2563eb !important;
  color: #2563eb !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--valiant-shadow-sm) !important;
}

.ep-btn-revisar.editarBtn {
  background: #2563eb !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  padding: 7px 15px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.16s ease !important;
}

.ep-btn-revisar.editarBtn:hover {
  background: #1d4ed8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
}

.ep-btn-revisar.btn-eliminar-devuelto {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  padding: 7px 15px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.16s ease !important;
}

.ep-btn-revisar.btn-eliminar-devuelto:hover {
  background: #b91c1c !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35) !important;
}

.ep-badge-danger {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #b91c1c !important;
  border: 1px solid rgba(220, 38, 38, 0.25) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
}

.ep-clave {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  color: var(--valiant-ink) !important;
  background: var(--valiant-soft) !important;
  border: 1px solid var(--valiant-line) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  display: inline-block !important;
}

.ep-empty {
  padding: 64px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.ep-empty-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 16px !important;
  background: var(--valiant-soft) !important;
  border: 1px solid var(--valiant-line) !important;
  color: var(--valiant-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.6rem !important;
  margin-bottom: 16px !important;
}

.ep-empty-title {
  font-weight: 800 !important;
  color: var(--valiant-ink) !important;
  font-size: 1.1rem !important;
  margin-bottom: 6px !important;
}

.ep-empty-sub {
  color: var(--valiant-muted) !important;
  font-size: 0.9rem !important;
}

/* ==========================================================================
   Valiant Obsidian Navbar (Universal - Dark & Light Mode)
   ========================================================================== */
.navbar,
nav.navbar,
.navbar.navbar-dark,
.navbar.fixed-top {
  background-color: #0d0f14 !important;
  background: #0d0f14 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
  padding: 0.28rem clamp(0.7rem, 2.5vw, 1.75rem);
  min-height: 50px;
  z-index: 1030;
}

.navbar .back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-radius: 50%;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  margin-right: 0.75rem;
}

.navbar .back-button:hover {
  background-color: var(--valiant-crimson, #b50c0c) !important;
  color: #ffffff !important;
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 4px 12px rgba(181, 12, 12, 0.4);
}

.navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  padding: 0;
}

.navbar .navbar-brand img,
.navbar .navbar-brand .valiant-nav-logo {
  height: clamp(26px, 2.8vw, 32px);
  width: auto;
  max-width: 200px;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.navbar .navbar-nav .nav-link {
  font-size: clamp(0.82rem, 0.4vw + 0.7rem, 0.9rem);
  padding: 0.25rem clamp(0.5rem, 1vw, 0.8rem);
  color: #e2e8f0 !important;
}

/* ==========================================================================
   GLOBAL SUITE: Solicitudes, Checador & HR Premium Components
   ========================================================================== */

.checa-scope {
  background-color: var(--valiant-bg);
  color: var(--valiant-ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  padding-bottom: 3rem;
}

/* Hero Section */
.checa-hero {
  background: var(--valiant-card);
  border-bottom: 1px solid var(--valiant-line);
  padding: 2.25rem 0;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.checa-hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, var(--valiant-crimson-soft, rgba(181, 12, 12, 0.05)) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.checa-hero .container {
  position: relative;
  z-index: 1;
}

.checa-hero h1 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--valiant-ink);
  margin: 0;
}

.checa-hero .meta {
  color: var(--valiant-muted);
  font-size: 0.95rem;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.checa-hero .clock-container {
  text-align: right;
}

.checa-hero .clock-time {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  color: var(--valiant-ink);
  line-height: 1;
}

.checa-hero .clock-date {
  font-size: 0.875rem;
  color: var(--valiant-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Cards & Panels */
.checa-card {
  background: var(--valiant-card);
  border: 1px solid var(--valiant-line);
  border-radius: 1.25rem;
  box-shadow: var(--valiant-shadow);
  overflow: hidden;
  max-width: 960px;
  margin: 0 auto 1.5rem auto;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.checa-card-header {
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--valiant-line);
  background: var(--valiant-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checa-card-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: var(--valiant-ink);
}

.checa-card-body {
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

/* Form Controls & Inputs */
.form-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--valiant-muted);
  margin-bottom: 0.625rem;
  display: block;
}

.premium-input {
  width: 100%;
  height: 3.5rem;
  border-radius: 0.75rem;
  border: 2px solid var(--valiant-line);
  background: var(--valiant-card);
  padding: 0 1.25rem;
  font-weight: 600;
  color: var(--valiant-ink);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.premium-input:focus {
  border-color: var(--valiant-crimson);
  box-shadow: var(--valiant-crimson-glow);
  outline: none;
}

.premium-input:disabled {
  background: var(--valiant-soft-2);
  color: var(--valiant-muted);
  cursor: not-allowed;
  border-style: dashed;
}

textarea.premium-input {
  height: auto;
  padding: 1.25rem;
  min-height: 120px;
}

.input-group-premium {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--valiant-muted);
  pointer-events: none;
}

.has-icon .premium-input {
  padding-left: 3rem;
}

.premium-select {
  height: 3.5rem;
  border-radius: 0.75rem;
  border: 2px solid var(--valiant-line);
  font-weight: 600;
  color: var(--valiant-ink);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
  background-color: var(--valiant-card);
  padding: 0 1rem;
  width: 100%;
}

.premium-select:focus {
  border-color: var(--valiant-crimson);
  box-shadow: var(--valiant-crimson-glow);
  outline: none;
}

/* Stats / Days Counter */
.days-counter {
  background: var(--valiant-soft);
  border: 1px solid var(--valiant-line);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.3s ease;
}

.days-counter.has-value {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
}

.days-counter .count {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--valiant-crimson);
  line-height: 1;
}

.days-counter.has-value .count {
  color: var(--valiant-ok, #10b981);
}

.days-counter .label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--valiant-muted);
  margin-top: 5px;
}

/* Buttons */
.btn-premium {
  height: 3.75rem;
  border-radius: 1rem;
  background: var(--valiant-crimson, #b50c0c);
  color: #fff !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}

.btn-premium:hover {
  background: var(--valiant-crimson-hover, #830707);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(181, 12, 12, 0.35);
}

.btn-premium:active {
  transform: translateY(0);
}

.btn-attendance {
  height: 3.5rem;
  border-radius: 0.75rem;
  background: var(--valiant-crimson, #b50c0c);
  border: none;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-attendance:hover {
  background: var(--valiant-crimson-hover, #830707);
  transform: translateY(-1px);
  box-shadow: 0 10px 15px -3px rgba(181, 12, 12, 0.3), 0 4px 6px -2px rgba(181, 12, 12, 0.2);
}

.btn-attendance:active {
  transform: translateY(0);
}

.btn-attendance:disabled {
  background: var(--valiant-muted);
  opacity: 0.7;
  transform: none;
}

/* Info Alert */
.info-alert {
  background: var(--valiant-crimson-soft, rgba(181, 12, 12, 0.05));
  border: 1px solid var(--valiant-crimson-border, rgba(181, 12, 12, 0.18));
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.info-alert i {
  color: var(--valiant-crimson);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.info-alert span {
  font-size: 0.9rem;
  color: var(--valiant-ink);
  line-height: 1.45;
}

/* Daily Progress Tracker */
.daily-progress {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.progress-step {
  flex: 1;
  text-align: center;
  padding: 1rem;
  border-radius: 0.75rem;
  background: var(--valiant-soft-2);
  border: 1px solid transparent;
  position: relative;
  transition: all 0.2s ease;
}

.progress-step.completed {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
}

.progress-step.pending {
  background: var(--valiant-card);
  border: 1px dashed var(--valiant-line);
}

.progress-step .step-icon {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  display: block;
}

.progress-step .step-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--valiant-muted);
  display: block;
}

.progress-step .step-time {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--valiant-ink);
}

.progress-step.completed .step-label {
  color: #059669;
}

.progress-step.completed .step-time {
  color: #047857;
}

/* Weekly Attendance Grid */
.weekly-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.day-box {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid var(--valiant-line);
  background: var(--valiant-soft);
  text-decoration: none !important;
  transition: all 0.2s;
}

.day-box:hover {
  transform: scale(1.05);
}

.day-box .day-letter {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--valiant-muted);
  margin-bottom: 2px;
}

.day-box .day-status {
  font-size: 1rem;
  font-weight: 800;
  color: var(--valiant-ink);
}

.day-box.status-ok {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}
.day-box.status-ok .day-status {
  color: var(--valiant-ok, #16a34a);
}

.day-box.status-warn {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
}
.day-box.status-warn .day-status {
  color: var(--valiant-warn, #d97706);
}

.day-box.status-bad {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}
.day-box.status-bad .day-status {
  color: var(--valiant-bad, #dc2626);
}

/* GPS Tutorial List */
.gps-tutorial-list {
  display: grid;
  gap: 1rem;
}

.gps-tutorial-step {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 1rem;
  overflow: hidden;
}

.gps-tutorial-step-header {
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, #ffedd5, #fff7ed);
  border-bottom: 1px solid #fed7aa;
}

.gps-tutorial-step-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #9a3412;
}

.gps-tutorial-step-text {
  display: block;
  font-size: 0.85rem;
  color: #7c2d12;
  margin-top: 0.2rem;
}

.gps-tutorial-step-image {
  width: 100%;
  display: block;
  background: #111827;
}

/* Checador & Solicitudes Table */
.checa-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.checa-table th {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--valiant-muted);
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--valiant-line);
  background: var(--valiant-soft);
}

.checa-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--valiant-line);
  vertical-align: middle;
  color: var(--valiant-ink);
}

.checa-table tr:last-child td {
  border-bottom: none;
}

.event-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--valiant-line);
  color: var(--valiant-ink);
}

/* Responsive */
@media (max-width: 768px) {
  .checa-scope { padding: 0 8px; }
  .checa-hero { padding: 1rem 0; margin-bottom: 1rem; }
  .checa-hero h1 { font-size: 1.25rem; }
  .checa-hero .meta { font-size: 0.8rem; }
  .checa-hero .clock-container { margin-top: 0.75rem; }
  .checa-hero .clock-time { font-size: 1.5rem; }
  .checa-hero .clock-date { font-size: 0.7rem; }
  .checa-card { border-radius: 0.75rem; margin-bottom: 1rem; }
  .checa-card-header { padding: 1rem; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .checa-card-header h3 { font-size: 0.85rem; }
  .checa-card-body { padding: 1rem; }
  .daily-progress { gap: 0.5rem; flex-wrap: wrap; }
  .progress-step { flex: 0 0 calc(50% - 0.25rem); padding: 0.6rem 0.4rem; }
  .progress-step .step-icon { font-size: 1.1rem; }
  .progress-step .step-label { font-size: 0.65rem; }
  .progress-step .step-time { font-size: 0.8rem; }
  .premium-select, .premium-input { height: 3rem; font-size: 0.9rem; }
  .btn-attendance, .btn-premium { height: 3.25rem; font-size: 0.85rem; }
  .weekly-grid { gap: 4px; }
  .day-box { border-radius: 0.35rem; }
  .day-box .day-letter { font-size: 0.6rem; }
  .day-box .day-status { font-size: 0.8rem; }
  .checa-table th { font-size: 0.6rem; padding: 0.5rem; }
  .checa-table td { padding: 0.75rem 0.5rem; font-size: 0.85rem; }
  .event-badge { padding: 3px 8px; font-size: 0.65rem; }
}

/* ———————— VALIANT DARK MODE OVERRIDES ———————— */
[data-theme="dark"] .checa-scope {
  background-color: var(--valiant-bg) !important;
  color: var(--valiant-ink) !important;
}

[data-theme="dark"] .checa-hero {
  background: var(--valiant-card) !important;
  border-bottom-color: var(--valiant-line) !important;
}

[data-theme="dark"] .checa-hero h1,
[data-theme="dark"] .checa-hero .clock-time {
  color: var(--valiant-ink) !important;
}

[data-theme="dark"] .checa-hero .meta,
[data-theme="dark"] .checa-hero .clock-date {
  color: var(--valiant-muted) !important;
}

[data-theme="dark"] .checa-card {
  background: var(--valiant-card) !important;
  border-color: var(--valiant-line) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .checa-card-header {
  background: var(--valiant-soft) !important;
  border-bottom-color: var(--valiant-line) !important;
}

[data-theme="dark"] .checa-card-header h3 {
  color: var(--valiant-ink) !important;
}

[data-theme="dark"] .progress-step {
  background: var(--valiant-soft) !important;
  border-color: transparent !important;
}

[data-theme="dark"] .progress-step.pending {
  background: var(--valiant-soft) !important;
  border-color: var(--valiant-line) !important;
}

[data-theme="dark"] .progress-step .step-label {
  color: var(--valiant-muted) !important;
}

[data-theme="dark"] .progress-step .step-time {
  color: var(--valiant-ink) !important;
}

[data-theme="dark"] .progress-step.completed {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .progress-step.completed .step-label {
  color: #34d399 !important;
}

[data-theme="dark"] .progress-step.completed .step-time {
  color: #6ee7b7 !important;
}

[data-theme="dark"] .premium-select,
[data-theme="dark"] .premium-input {
  background-color: var(--valiant-soft) !important;
  color: var(--valiant-ink) !important;
  border-color: var(--valiant-line) !important;
}

[data-theme="dark"] .premium-select option {
  background-color: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
}

[data-theme="dark"] .premium-input:disabled {
  background-color: var(--valiant-soft-2) !important;
  color: var(--valiant-muted) !important;
  border-color: var(--valiant-line) !important;
}

[data-theme="dark"] textarea.form-control,
[data-theme="dark"] textarea.premium-input {
  background-color: var(--valiant-soft) !important;
  color: var(--valiant-ink) !important;
  border-color: var(--valiant-line) !important;
}

[data-theme="dark"] .days-counter {
  background: var(--valiant-soft) !important;
  border-color: var(--valiant-line) !important;
}

[data-theme="dark"] .days-counter .count {
  color: var(--valiant-crimson) !important;
}

[data-theme="dark"] .days-counter.has-value {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

[data-theme="dark"] .days-counter.has-value .count {
  color: #4ade80 !important;
}

[data-theme="dark"] .days-counter .label {
  color: var(--valiant-muted) !important;
}

[data-theme="dark"] .info-alert {
  background: var(--valiant-soft) !important;
  border-color: var(--valiant-line) !important;
}

[data-theme="dark"] .info-alert span {
  color: var(--valiant-ink) !important;
}

[data-theme="dark"] .info-alert i {
  color: var(--valiant-crimson) !important;
}

[data-theme="dark"] .btn-attendance,
[data-theme="dark"] .btn-premium {
  background: var(--valiant-crimson, #b50c0c) !important;
  box-shadow: 0 4px 14px rgba(181, 12, 12, 0.35) !important;
}

[data-theme="dark"] .btn-attendance:hover,
[data-theme="dark"] .btn-premium:hover {
  background: var(--valiant-crimson-hover, #830707) !important;
  box-shadow: 0 6px 20px rgba(181, 12, 12, 0.5) !important;
}

[data-theme="dark"] .day-box {
  background: var(--valiant-soft) !important;
  border-color: var(--valiant-line) !important;
}

[data-theme="dark"] .day-box .day-letter {
  color: var(--valiant-muted) !important;
}

[data-theme="dark"] .day-box .day-status {
  color: var(--valiant-ink) !important;
}

[data-theme="dark"] .day-box.status-ok {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

[data-theme="dark"] .day-box.status-ok .day-status {
  color: #4ade80 !important;
}

[data-theme="dark"] .day-box.status-warn {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

[data-theme="dark"] .day-box.status-warn .day-status {
  color: #fbbf24 !important;
}

[data-theme="dark"] .day-box.status-bad {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}

[data-theme="dark"] .day-box.status-bad .day-status {
  color: #f87171 !important;
}

[data-theme="dark"] .checa-table th {
  background: var(--valiant-soft) !important;
  color: var(--valiant-muted) !important;
  border-bottom-color: var(--valiant-line) !important;
}

[data-theme="dark"] .checa-table td {
  color: var(--valiant-ink) !important;
  border-bottom-color: var(--valiant-line) !important;
}

[data-theme="dark"] .event-badge {
  background: var(--valiant-soft) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(96, 165, 250, 0.2) !important;
}

[data-theme="dark"] .gps-tutorial-step {
  background: #181f30 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .gps-tutorial-step-header {
  background: #1e2638 !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .gps-tutorial-step-title {
  color: #fb923c !important;
}

[data-theme="dark"] .gps-tutorial-step-text {
  color: #fdba74 !important;
}

[data-theme="dark"] #privacidadTxt .bg-light {
  background-color: var(--valiant-soft) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-muted) !important;
}



/* Barras de carga y progreso de envío: verde (el rojo del tema se siente agresivo para un proceso en curso) */
.progress-bar:not([class*="bg-"]),
#barraProgreso,
.ex-progress-bar,
.adi-progress-bar,
.de-progress-bar {
  background: linear-gradient(90deg, hsl(142 71% 38%), hsl(142 65% 52%)) !important;
  background-color: hsl(142 71% 42%) !important;
}


/* ==========================================================================
   VALIANT global: formularios de solicitud (ex-/de-/adi-), matrices y listados en tarjetas.
   (antes vivía en valiant-solicitud-forms.css)
   ========================================================================== */
/* VALIANT: formularios de solicitud (extraordinarios, deductivas, aditivas) y matrices.
   Reemplaza el aspecto propio de cada vista por los tokens --valiant-* y agrega la versión móvil. */

/* ---- ex: re-skin al sistema VALIANT ---- */
body {
  --ex-ink: var(--valiant-ink);
  --ex-muted: var(--valiant-muted);
  --ex-line: var(--valiant-line);
  --ex-card: var(--valiant-card);
  --ex-soft: var(--valiant-soft-2);
  --ex-soft2: var(--valiant-soft-2);
  --ex-r: 10px;
  --ex-shadow: var(--valiant-shadow-sm);
  --ex-shadow2: var(--valiant-shadow);
}
body .ex-page { padding-top: 16px; }
body .ex-hero {
  background: var(--valiant-card); color: var(--valiant-ink);
  border: 1px solid var(--valiant-line); border-radius: 10px;
  box-shadow: var(--valiant-shadow-sm); padding: 14px 16px; margin-bottom: 12px; gap: 12px;
}
body .ex-kicker { color: var(--valiant-muted); opacity: 1; font-size: 12px; letter-spacing: .04em; }
body .ex-title { color: var(--valiant-ink); font-size: 20px; font-weight: 700; letter-spacing: 0; }
body .ex-subtitle { color: var(--valiant-muted); font-size: 13px; }
body .ex-metrics { gap: 8px; }
body .ex-metric { background: var(--valiant-soft-2); border: 1px solid var(--valiant-line); border-radius: 8px; color: var(--valiant-ink); }
body .ex-metric-label { color: var(--valiant-muted); opacity: 1; font-size: 12px; }
body .ex-metric-value { color: var(--valiant-ink); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
body .ex-card { background: var(--valiant-card); border: 1px solid var(--valiant-line); border-radius: 10px; box-shadow: var(--valiant-shadow-sm); }
body .ex-card-h { background: var(--valiant-card); color: var(--valiant-ink); border-bottom: 1px solid var(--valiant-line); font-weight: 700; font-size: 14px; }
body .ex-label { color: var(--valiant-ink); font-size: 12px; font-weight: 600; }
body .ex-help { color: var(--valiant-muted); font-size: 12px; }
body .ex-form-control, body .ex-search-input {
  background: var(--valiant-card); color: var(--valiant-ink);
  border: 1px solid var(--valiant-line); border-radius: 8px; box-shadow: none;
}
body .ex-search-input { height: 38px; }
body .ex-form-control:focus, body .ex-search-input:focus { border-color: var(--valiant-blue); box-shadow: 0 0 0 3px var(--valiant-blue-soft); }
body .ex-form-control:disabled, body .ex-form-control[readonly] { background: var(--valiant-soft-2); }
body .ex-input-group-text { background: var(--valiant-soft-2); color: var(--valiant-ink); border: 1px solid var(--valiant-line); border-radius: 8px 0 0 8px; }
body .ex-btn {
  border-radius: 8px; font-size: 13px; font-weight: 600; box-shadow: none;
  background: var(--valiant-card); color: var(--valiant-ink); border: 1px solid var(--valiant-line);
}
body .ex-btn:hover { transform: none; box-shadow: none; background: var(--valiant-soft-2); }
body .ex-btn-primary { background: var(--valiant-btn-primary-bg); border-color: var(--valiant-btn-primary-bg); color: #fff; }
body .ex-btn-primary:hover { background: var(--valiant-btn-primary-hover); }
body .ex-btn-success { background: var(--valiant-ok-soft); border-color: var(--valiant-ok-border); color: var(--valiant-ok); }
body .ex-btn-danger { background: var(--valiant-bad-soft); border-color: var(--valiant-bad-border, var(--valiant-line)); color: var(--valiant-bad); }
body .ex-btn-neutral { background: var(--valiant-soft-2); }
body .ex-pill { border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--valiant-line); }
body .ex-pill-blue, body .ex-pill-purple, body .ex-pill-amber { background: var(--valiant-blue-soft); color: var(--valiant-blue); border-color: transparent; }
body .ex-pill-green { background: var(--valiant-ok-soft); color: var(--valiant-ok); border-color: transparent; }
body .ex-pill-yellow { background: var(--valiant-warn-soft); color: var(--valiant-warn); border-color: transparent; }
body .ex-pill-gray { background: var(--valiant-soft-2); color: var(--valiant-ink); }
body .ex-chip { background: var(--valiant-blue-soft); color: var(--valiant-blue); border-color: transparent; border-radius: 6px; }
body .ex-alert { border-radius: 8px; font-size: 13px; font-weight: 500; }
body .ex-alert-info { background: var(--valiant-blue-soft); border: 1px solid transparent; color: var(--valiant-ink); }
body .ex-alert-warning { background: var(--valiant-warn-soft); border: 1px solid var(--valiant-warn-border); color: var(--valiant-ink); }
body .ex-radio { border-radius: 8px; border: 1px solid var(--valiant-line); background: var(--valiant-card); color: var(--valiant-ink); font-weight: 600; }
body .ex-radio:has(input:checked) { border-color: var(--valiant-blue); background: var(--valiant-blue-soft); color: var(--valiant-ink); }
body .ex-file-drop { border-color: var(--valiant-line-strong); border-radius: 10px; }
body .ex-file-drop:hover, body .ex-file-drop.dragover { border-color: var(--valiant-blue); background: var(--valiant-blue-soft); }
body .ex-table-wrap { background: var(--valiant-card); border: 1px solid var(--valiant-line); border-radius: 10px; }
body .ex-table th { background: var(--valiant-soft-2); color: var(--valiant-muted); font-size: 11px; letter-spacing: .04em; }
body .ex-table td { color: var(--valiant-ink); font-size: 13px; }
body .ex-table tbody tr:hover, body .ex-draft-row:hover { background: var(--valiant-soft-2); }
body .ex-empty { background: var(--valiant-card); border: 1px solid var(--valiant-line); border-radius: 10px; }
body .ex-summary {
  background: var(--valiant-card); color: var(--valiant-ink);
  border: 1px solid var(--valiant-line); border-radius: 10px; box-shadow: var(--valiant-shadow-sm);
}
body .ex-summary-k { color: var(--valiant-muted); }
body .ex-summary-row { border-bottom-color: var(--valiant-line); }
body .ex-divider { background: var(--valiant-line); }
body .ex-progress { background: var(--valiant-soft-2); }
body .ex-progress-bar { background: var(--valiant-blue); }
body .ex-modal-header { background: var(--valiant-card); color: var(--valiant-ink); border-bottom: 1px solid var(--valiant-line); }
body .ex-modal-header h5 { font-size: 1rem; font-weight: 700; color: var(--valiant-ink); }
body .ex-modal-close { color: var(--valiant-muted); }
body .ex-modal-body { background: var(--valiant-soft-2); }
body .ex-modal-footer { background: var(--valiant-card); border-top-color: var(--valiant-line); }

@media (max-width: 767.98px) {
  body .ex-page { padding-left: 8px; padding-right: 8px; }
  body .ex-hero { flex-direction: column; align-items: stretch; padding: 12px; }
  body .ex-hero-left, body .ex-hero-right { width: 100%; flex: none; }
  body .ex-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .ex-metric { min-width: 0; text-align: left; }
  body .ex-toolbar { flex-direction: column; align-items: stretch; }
  body .ex-sticky { position: static; }
  body .ex-btn { justify-content: center; }
}

/* ---- de: re-skin al sistema VALIANT ---- */
body {
  --de-ink: var(--valiant-ink);
  --de-muted: var(--valiant-muted);
  --de-line: var(--valiant-line);
  --de-card: var(--valiant-card);
  --de-soft: var(--valiant-soft-2);
  --de-soft2: var(--valiant-soft-2);
  --de-r: 10px;
  --de-shadow: var(--valiant-shadow-sm);
  --de-shadow2: var(--valiant-shadow);
}
body .de-page { padding-top: 16px; }
body .de-hero {
  background: var(--valiant-card); color: var(--valiant-ink);
  border: 1px solid var(--valiant-line); border-radius: 10px;
  box-shadow: var(--valiant-shadow-sm); padding: 14px 16px; margin-bottom: 12px; gap: 12px;
}
body .de-kicker { color: var(--valiant-muted); opacity: 1; font-size: 12px; letter-spacing: .04em; }
body .de-title { color: var(--valiant-ink); font-size: 20px; font-weight: 700; letter-spacing: 0; }
body .de-subtitle { color: var(--valiant-muted); font-size: 13px; }
body .de-metrics { gap: 8px; }
body .de-metric { background: var(--valiant-soft-2); border: 1px solid var(--valiant-line); border-radius: 8px; color: var(--valiant-ink); }
body .de-metric-label { color: var(--valiant-muted); opacity: 1; font-size: 12px; }
body .de-metric-value { color: var(--valiant-ink); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
body .de-card { background: var(--valiant-card); border: 1px solid var(--valiant-line); border-radius: 10px; box-shadow: var(--valiant-shadow-sm); }
body .de-card-h { background: var(--valiant-card); color: var(--valiant-ink); border-bottom: 1px solid var(--valiant-line); font-weight: 700; font-size: 14px; }
body .de-label { color: var(--valiant-ink); font-size: 12px; font-weight: 600; }
body .de-help { color: var(--valiant-muted); font-size: 12px; }
body .de-form-control, body .de-search-input {
  background: var(--valiant-card); color: var(--valiant-ink);
  border: 1px solid var(--valiant-line); border-radius: 8px; box-shadow: none;
}
body .de-search-input { height: 38px; }
body .de-form-control:focus, body .de-search-input:focus { border-color: var(--valiant-blue); box-shadow: 0 0 0 3px var(--valiant-blue-soft); }
body .de-form-control:disabled, body .de-form-control[readonly] { background: var(--valiant-soft-2); }
body .de-input-group-text { background: var(--valiant-soft-2); color: var(--valiant-ink); border: 1px solid var(--valiant-line); border-radius: 8px 0 0 8px; }
body .de-btn {
  border-radius: 8px; font-size: 13px; font-weight: 600; box-shadow: none;
  background: var(--valiant-card); color: var(--valiant-ink); border: 1px solid var(--valiant-line);
}
body .de-btn:hover { transform: none; box-shadow: none; background: var(--valiant-soft-2); }
body .de-btn-primary { background: var(--valiant-btn-primary-bg); border-color: var(--valiant-btn-primary-bg); color: #fff; }
body .de-btn-primary:hover { background: var(--valiant-btn-primary-hover); }
body .de-btn-success { background: var(--valiant-ok-soft); border-color: var(--valiant-ok-border); color: var(--valiant-ok); }
body .de-btn-danger { background: var(--valiant-bad-soft); border-color: var(--valiant-bad-border, var(--valiant-line)); color: var(--valiant-bad); }
body .de-btn-neutral { background: var(--valiant-soft-2); }
body .de-pill { border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--valiant-line); }
body .de-pill-blue, body .de-pill-purple, body .de-pill-amber { background: var(--valiant-blue-soft); color: var(--valiant-blue); border-color: transparent; }
body .de-pill-green { background: var(--valiant-ok-soft); color: var(--valiant-ok); border-color: transparent; }
body .de-pill-yellow { background: var(--valiant-warn-soft); color: var(--valiant-warn); border-color: transparent; }
body .de-pill-gray { background: var(--valiant-soft-2); color: var(--valiant-ink); }
body .de-chip { background: var(--valiant-blue-soft); color: var(--valiant-blue); border-color: transparent; border-radius: 6px; }
body .de-alert { border-radius: 8px; font-size: 13px; font-weight: 500; }
body .de-alert-info { background: var(--valiant-blue-soft); border: 1px solid transparent; color: var(--valiant-ink); }
body .de-alert-warning { background: var(--valiant-warn-soft); border: 1px solid var(--valiant-warn-border); color: var(--valiant-ink); }
body .de-radio { border-radius: 8px; border: 1px solid var(--valiant-line); background: var(--valiant-card); color: var(--valiant-ink); font-weight: 600; }
body .de-radio:has(input:checked) { border-color: var(--valiant-blue); background: var(--valiant-blue-soft); color: var(--valiant-ink); }
body .de-file-drop { border-color: var(--valiant-line-strong); border-radius: 10px; }
body .de-file-drop:hover, body .de-file-drop.dragover { border-color: var(--valiant-blue); background: var(--valiant-blue-soft); }
body .de-table-wrap { background: var(--valiant-card); border: 1px solid var(--valiant-line); border-radius: 10px; }
body .de-table th { background: var(--valiant-soft-2); color: var(--valiant-muted); font-size: 11px; letter-spacing: .04em; }
body .de-table td { color: var(--valiant-ink); font-size: 13px; }
body .de-table tbody tr:hover, body .de-draft-row:hover { background: var(--valiant-soft-2); }
body .de-empty { background: var(--valiant-card); border: 1px solid var(--valiant-line); border-radius: 10px; }
body .de-summary {
  background: var(--valiant-card); color: var(--valiant-ink);
  border: 1px solid var(--valiant-line); border-radius: 10px; box-shadow: var(--valiant-shadow-sm);
}
body .de-summary-k { color: var(--valiant-muted); }
body .de-summary-row { border-bottom-color: var(--valiant-line); }
body .de-divider { background: var(--valiant-line); }
body .de-progress { background: var(--valiant-soft-2); }
body .de-progress-bar { background: var(--valiant-blue); }
body .de-modal-header { background: var(--valiant-card); color: var(--valiant-ink); border-bottom: 1px solid var(--valiant-line); }
body .de-modal-header h5 { font-size: 1rem; font-weight: 700; color: var(--valiant-ink); }
body .de-modal-close { color: var(--valiant-muted); }
body .de-modal-body { background: var(--valiant-soft-2); }
body .de-modal-footer { background: var(--valiant-card); border-top-color: var(--valiant-line); }

@media (max-width: 767.98px) {
  body .de-page { padding-left: 8px; padding-right: 8px; }
  body .de-hero { flex-direction: column; align-items: stretch; padding: 12px; }
  body .de-hero-left, body .de-hero-right { width: 100%; flex: none; }
  body .de-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .de-metric { min-width: 0; text-align: left; }
  body .de-toolbar { flex-direction: column; align-items: stretch; }
  body .de-sticky { position: static; }
  body .de-btn { justify-content: center; }
}

/* ---- adi: re-skin al sistema VALIANT ---- */
body {
  --adi-ink: var(--valiant-ink);
  --adi-muted: var(--valiant-muted);
  --adi-line: var(--valiant-line);
  --adi-card: var(--valiant-card);
  --adi-soft: var(--valiant-soft-2);
  --adi-soft2: var(--valiant-soft-2);
  --adi-r: 10px;
  --adi-shadow: var(--valiant-shadow-sm);
  --adi-shadow2: var(--valiant-shadow);
}
body .adi-page { padding-top: 16px; }
body .adi-hero {
  background: var(--valiant-card); color: var(--valiant-ink);
  border: 1px solid var(--valiant-line); border-radius: 10px;
  box-shadow: var(--valiant-shadow-sm); padding: 14px 16px; margin-bottom: 12px; gap: 12px;
}
body .adi-kicker { color: var(--valiant-muted); opacity: 1; font-size: 12px; letter-spacing: .04em; }
body .adi-title { color: var(--valiant-ink); font-size: 20px; font-weight: 700; letter-spacing: 0; }
body .adi-subtitle { color: var(--valiant-muted); font-size: 13px; }
body .adi-metrics { gap: 8px; }
body .adi-metric { background: var(--valiant-soft-2); border: 1px solid var(--valiant-line); border-radius: 8px; color: var(--valiant-ink); }
body .adi-metric-label { color: var(--valiant-muted); opacity: 1; font-size: 12px; }
body .adi-metric-value { color: var(--valiant-ink); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
body .adi-card { background: var(--valiant-card); border: 1px solid var(--valiant-line); border-radius: 10px; box-shadow: var(--valiant-shadow-sm); }
body .adi-card-h { background: var(--valiant-card); color: var(--valiant-ink); border-bottom: 1px solid var(--valiant-line); font-weight: 700; font-size: 14px; }
body .adi-label { color: var(--valiant-ink); font-size: 12px; font-weight: 600; }
body .adi-help { color: var(--valiant-muted); font-size: 12px; }
body .adi-form-control, body .adi-search-input {
  background: var(--valiant-card); color: var(--valiant-ink);
  border: 1px solid var(--valiant-line); border-radius: 8px; box-shadow: none;
}
body .adi-search-input { height: 38px; }
body .adi-form-control:focus, body .adi-search-input:focus { border-color: var(--valiant-blue); box-shadow: 0 0 0 3px var(--valiant-blue-soft); }
body .adi-form-control:disabled, body .adi-form-control[readonly] { background: var(--valiant-soft-2); }
body .adi-input-group-text { background: var(--valiant-soft-2); color: var(--valiant-ink); border: 1px solid var(--valiant-line); border-radius: 8px 0 0 8px; }
body .adi-btn {
  border-radius: 8px; font-size: 13px; font-weight: 600; box-shadow: none;
  background: var(--valiant-card); color: var(--valiant-ink); border: 1px solid var(--valiant-line);
}
body .adi-btn:hover { transform: none; box-shadow: none; background: var(--valiant-soft-2); }
body .adi-btn-primary { background: var(--valiant-btn-primary-bg); border-color: var(--valiant-btn-primary-bg); color: #fff; }
body .adi-btn-primary:hover { background: var(--valiant-btn-primary-hover); }
body .adi-btn-success { background: var(--valiant-ok-soft); border-color: var(--valiant-ok-border); color: var(--valiant-ok); }
body .adi-btn-danger { background: var(--valiant-bad-soft); border-color: var(--valiant-bad-border, var(--valiant-line)); color: var(--valiant-bad); }
body .adi-btn-neutral { background: var(--valiant-soft-2); }
body .adi-pill { border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--valiant-line); }
body .adi-pill-blue, body .adi-pill-purple, body .adi-pill-amber { background: var(--valiant-blue-soft); color: var(--valiant-blue); border-color: transparent; }
body .adi-pill-green { background: var(--valiant-ok-soft); color: var(--valiant-ok); border-color: transparent; }
body .adi-pill-yellow { background: var(--valiant-warn-soft); color: var(--valiant-warn); border-color: transparent; }
body .adi-pill-gray { background: var(--valiant-soft-2); color: var(--valiant-ink); }
body .adi-chip { background: var(--valiant-blue-soft); color: var(--valiant-blue); border-color: transparent; border-radius: 6px; }
body .adi-alert { border-radius: 8px; font-size: 13px; font-weight: 500; }
body .adi-alert-info { background: var(--valiant-blue-soft); border: 1px solid transparent; color: var(--valiant-ink); }
body .adi-alert-warning { background: var(--valiant-warn-soft); border: 1px solid var(--valiant-warn-border); color: var(--valiant-ink); }
body .adi-radio { border-radius: 8px; border: 1px solid var(--valiant-line); background: var(--valiant-card); color: var(--valiant-ink); font-weight: 600; }
body .adi-radio:has(input:checked) { border-color: var(--valiant-blue); background: var(--valiant-blue-soft); color: var(--valiant-ink); }
body .adi-file-drop { border-color: var(--valiant-line-strong); border-radius: 10px; }
body .adi-file-drop:hover, body .adi-file-drop.dragover { border-color: var(--valiant-blue); background: var(--valiant-blue-soft); }
body .adi-table-wrap { background: var(--valiant-card); border: 1px solid var(--valiant-line); border-radius: 10px; }
body .adi-table th { background: var(--valiant-soft-2); color: var(--valiant-muted); font-size: 11px; letter-spacing: .04em; }
body .adi-table td { color: var(--valiant-ink); font-size: 13px; }
body .adi-table tbody tr:hover, body .adi-draft-row:hover { background: var(--valiant-soft-2); }
body .adi-empty { background: var(--valiant-card); border: 1px solid var(--valiant-line); border-radius: 10px; }
body .adi-summary {
  background: var(--valiant-card); color: var(--valiant-ink);
  border: 1px solid var(--valiant-line); border-radius: 10px; box-shadow: var(--valiant-shadow-sm);
}
body .adi-summary-k { color: var(--valiant-muted); }
body .adi-summary-row { border-bottom-color: var(--valiant-line); }
body .adi-divider { background: var(--valiant-line); }
body .adi-progress { background: var(--valiant-soft-2); }
body .adi-progress-bar { background: var(--valiant-blue); }
body .adi-modal-header { background: var(--valiant-card); color: var(--valiant-ink); border-bottom: 1px solid var(--valiant-line); }
body .adi-modal-header h5 { font-size: 1rem; font-weight: 700; color: var(--valiant-ink); }
body .adi-modal-close { color: var(--valiant-muted); }
body .adi-modal-body { background: var(--valiant-soft-2); }
body .adi-modal-footer { background: var(--valiant-card); border-top-color: var(--valiant-line); }

@media (max-width: 767.98px) {
  body .adi-page { padding-left: 8px; padding-right: 8px; }
  body .adi-hero { flex-direction: column; align-items: stretch; padding: 12px; }
  body .adi-hero-left, body .adi-hero-right { width: 100%; flex: none; }
  body .adi-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .adi-metric { min-width: 0; text-align: left; }
  body .adi-toolbar { flex-direction: column; align-items: stretch; }
  body .adi-sticky { position: static; }
  body .adi-btn { justify-content: center; }
}

/* ---- Matrices: re-skin VALIANT ---- */
body {
  --matrices-ink: var(--valiant-ink);
  --matrices-muted: var(--valiant-muted);
  --matrices-line: var(--valiant-line);
  --matrices-card: var(--valiant-card);
  --matrices-soft: var(--valiant-soft-2);
}
body .matrices-hero {
  background: var(--valiant-card); color: var(--valiant-ink);
  border: 1px solid var(--valiant-line); border-radius: 10px;
  box-shadow: var(--valiant-shadow-sm); padding: 14px 16px; margin-bottom: 12px;
}
body .matrices-hero h1 { font-size: 20px; font-weight: 700; color: var(--valiant-ink); }
body .matrices-hero p { color: var(--valiant-muted) !important; font-size: 13px; font-weight: 400 !important; margin-bottom: 8px; }
body .matrices-kicker { color: var(--valiant-muted); opacity: 1; font-size: 12px; letter-spacing: .04em; }
body .matrices-breadcrumb { margin-bottom: 10px !important; }
body .matrices-metrics { gap: 8px; }
body .matrices-metric { background: var(--valiant-soft-2); border: 1px solid var(--valiant-line); border-radius: 8px; padding: 8px 12px; color: var(--valiant-ink); }
body .matrices-metric-label { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--valiant-muted); opacity: 1; }
body .matrices-metric-value { font-size: 1.1rem; font-weight: 700; color: var(--valiant-ink); }
body .matrices-toolbar { border-radius: 10px; box-shadow: var(--valiant-shadow-sm); padding: 12px; gap: 10px; background: var(--valiant-card); border-color: var(--valiant-line); }
body .matrices-toolbar-group label { text-transform: none; letter-spacing: 0; font-size: 12px; }
body .matrices-search input { height: 38px; border-radius: 8px; box-shadow: none; background: var(--valiant-card); color: var(--valiant-ink); }
body .matrices-search input:focus { border-color: var(--valiant-blue); box-shadow: 0 0 0 3px var(--valiant-blue-soft); }
body .matrices-chip { border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--valiant-soft-2); }
body .matrices-chip.is-active { background: var(--valiant-blue-soft); border-color: transparent; color: var(--valiant-blue); }
body .matrices-btn-primary, body .matrices-btn-ghost, body .matrices-btn-danger { border-radius: 8px; font-size: 13px; font-weight: 600; box-shadow: none; transform: none; }
body .matrices-btn-primary { background: var(--valiant-btn-primary-bg); }
body .matrices-btn-primary:hover { background: var(--valiant-btn-primary-hover); transform: none; }
body .matrices-btn-ghost { background: var(--valiant-card); color: var(--valiant-ink); }
body .matrices-btn-ghost:hover { background: var(--valiant-soft-2); transform: none; }
body .matrices-btn-danger { background: var(--valiant-card); border-color: var(--valiant-bad-border); color: var(--valiant-bad); }
body .matrices-btn { border-radius: 8px; }
body .matriz-card { border-radius: 10px; box-shadow: var(--valiant-shadow-sm); background: var(--valiant-card); border-color: var(--valiant-line); }
body .matriz-thumb { border-radius: 8px; background: var(--valiant-soft-2); }
body .matriz-avatar { background: var(--valiant-blue-soft); border-radius: 10px; }
body .matriz-card-title strong { font-weight: 700; }
body .matriz-badge { border-radius: 6px; font-size: 11px; letter-spacing: .03em; }
body .matriz-badge-cantidad { background: var(--valiant-ok-soft); border-color: var(--valiant-ok-border); color: var(--valiant-ok); }
body .matriz-badge-precio { background: var(--valiant-blue-soft); border-color: transparent; color: var(--valiant-blue); }
body .matrices-empty { border-radius: 10px; }
body .modal-header-modern { background: var(--valiant-card); color: var(--valiant-ink); border-bottom: 1px solid var(--valiant-line); border-radius: 10px 10px 0 0; }
body .modal-header-modern .close { color: var(--valiant-muted); }
body .modal-header-modern h5 { font-size: 1rem; font-weight: 700; }
body .modal-body-modern { background: var(--valiant-soft-2); }
body .modal-footer-modern { background: var(--valiant-card); border-top-color: var(--valiant-line); }
body .form-control-modern { border-radius: 8px; background: var(--valiant-card); color: var(--valiant-ink); }
body .btn-primary-modern { background: var(--valiant-btn-primary-bg); border-radius: 8px; font-weight: 600; }
body .btn-secondary-modern { background: var(--valiant-soft-2); border-radius: 8px; font-weight: 600; }

@media (max-width: 767.98px) {
  body .matrices-panel { padding: 8px; }
  body .matrices-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body .matrices-metric { text-align: left; padding: 8px; }
  body .matrices-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .matrices-search, body .matrices-toolbar-chips, body .matrices-toolbar-actions { grid-column: 1 / -1; }
  body .matrices-toolbar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 0; }
  body .matrices-toolbar-actions .matrices-btn-primary,
  body .matrices-toolbar-actions .matrices-btn-ghost { width: 100%; justify-content: center; }
  body .matrices-toolbar-group { min-width: 0; grid-column: 1 / -1; }
}

/* ---- Tablas de listados en celular: cada fila es una tarjeta (etiquetas desde el thead, ver footer.php) ---- */
@media (max-width: 767.98px) {
  .ex-table, .de-table, .adi-table, .ep-table { border: 0 !important; }
  .ex-table thead, .de-table thead, .adi-table thead, .ep-table thead { display: none; }
  .ex-table, .ex-table > tbody, .ex-table > tbody > tr, .ex-table > tbody > tr > td,
  .de-table, .de-table > tbody, .de-table > tbody > tr, .de-table > tbody > tr > td,
  .adi-table, .adi-table > tbody, .adi-table > tbody > tr, .adi-table > tbody > tr > td,
  .ep-table, .ep-table > tbody, .ep-table > tbody > tr, .ep-table > tbody > tr > td { display: block; width: 100% !important; }
  .ex-table > tbody > tr, .de-table > tbody > tr, .adi-table > tbody > tr, .ep-table > tbody > tr {
    margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--valiant-line); border-radius: 10px; background: var(--valiant-card);
  }
  .ex-table > tbody > tr > td, .de-table > tbody > tr > td, .adi-table > tbody > tr > td, .ep-table > tbody > tr > td {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 4px 0 !important; border: 0 !important; text-align: right !important; white-space: normal !important; max-width: none !important;
  }
  .ex-table > tbody > tr > td[data-label]::before, .de-table > tbody > tr > td[data-label]::before,
  .adi-table > tbody > tr > td[data-label]::before, .ep-table > tbody > tr > td[data-label]::before {
    content: attr(data-label); flex: 0 0 auto; color: var(--valiant-muted); font-size: 11px; font-weight: 600; text-align: left;
  }
  .ex-table > tbody > tr > td:last-child .btn, .de-table > tbody > tr > td:last-child .btn,
  .adi-table > tbody > tr > td:last-child .btn, .ep-table > tbody > tr > td:last-child .ep-btn-revisar { width: 100%; justify-content: center; }
  .ex-table-wrap, .de-table-wrap, .adi-table-wrap, .ep-table-wrap { border: 0 !important; background: transparent !important; overflow: visible !important; }
}

/* ==== Ajuste compacto del encabezado y tarjetas (prioridad sobre valiant-theme.css) ==== */

/* ---- ex: encabezado compacto (tiene prioridad sobre valiant-theme.css) ---- */
body .ex-hero {
  padding: 12px 16px !important; margin-bottom: 12px !important; gap: 10px !important;
  border-left: 1px solid var(--valiant-line) !important; border-radius: 10px !important;
  box-shadow: var(--valiant-shadow-sm) !important;
}
body .ex-kicker { font-size: 12px !important; letter-spacing: .03em !important; font-weight: 600 !important; color: var(--valiant-muted) !important; margin: 0 !important; }
body .ex-title { font-size: 20px !important; font-weight: 700 !important; letter-spacing: 0 !important; margin: 2px 0 0 !important; }
body .ex-subtitle { display: none !important; }
body .ex-metrics { gap: 8px !important; }
body .ex-metric { padding: 6px 10px !important; min-width: 0 !important; flex: 1 1 120px !important; text-align: left !important; border-radius: 8px !important; }
body .ex-metric:hover { transform: none !important; }
body .ex-metric-label { font-size: 11px !important; letter-spacing: .03em !important; }
body .ex-metric-value { font-size: 13px !important; font-weight: 700 !important; line-height: 1.25 !important; }
body .ex-card { border-radius: 10px !important; }
body .ex-card-h { padding: 10px 14px !important; }
body .ex-card-b { padding: 14px !important; }
@media (max-width: 767.98px) {
  body .ex-page { padding-left: 0; padding-right: 0; }
  body .ex-hero { padding: 10px 12px !important; }
  body .ex-title { font-size: 18px !important; }
  body .ex-metrics { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body .ex-metric:first-child { grid-column: 1 / -1; }
  body .ex-card-b { padding: 12px !important; }
  body .ex-btn { width: auto; }
}

/* ---- de: encabezado compacto (tiene prioridad sobre valiant-theme.css) ---- */
body .de-hero {
  padding: 12px 16px !important; margin-bottom: 12px !important; gap: 10px !important;
  border-left: 1px solid var(--valiant-line) !important; border-radius: 10px !important;
  box-shadow: var(--valiant-shadow-sm) !important;
}
body .de-kicker { font-size: 12px !important; letter-spacing: .03em !important; font-weight: 600 !important; color: var(--valiant-muted) !important; margin: 0 !important; }
body .de-title { font-size: 20px !important; font-weight: 700 !important; letter-spacing: 0 !important; margin: 2px 0 0 !important; }
body .de-subtitle { display: none !important; }
body .de-metrics { gap: 8px !important; }
body .de-metric { padding: 6px 10px !important; min-width: 0 !important; flex: 1 1 120px !important; text-align: left !important; border-radius: 8px !important; }
body .de-metric:hover { transform: none !important; }
body .de-metric-label { font-size: 11px !important; letter-spacing: .03em !important; }
body .de-metric-value { font-size: 13px !important; font-weight: 700 !important; line-height: 1.25 !important; }
body .de-card { border-radius: 10px !important; }
body .de-card-h { padding: 10px 14px !important; }
body .de-card-b { padding: 14px !important; }
@media (max-width: 767.98px) {
  body .de-page { padding-left: 0; padding-right: 0; }
  body .de-hero { padding: 10px 12px !important; }
  body .de-title { font-size: 18px !important; }
  body .de-metrics { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body .de-metric:first-child { grid-column: 1 / -1; }
  body .de-card-b { padding: 12px !important; }
  body .de-btn { width: auto; }
}

/* ---- adi: encabezado compacto (tiene prioridad sobre valiant-theme.css) ---- */
body .adi-hero {
  padding: 12px 16px !important; margin-bottom: 12px !important; gap: 10px !important;
  border-left: 1px solid var(--valiant-line) !important; border-radius: 10px !important;
  box-shadow: var(--valiant-shadow-sm) !important;
}
body .adi-kicker { font-size: 12px !important; letter-spacing: .03em !important; font-weight: 600 !important; color: var(--valiant-muted) !important; margin: 0 !important; }
body .adi-title { font-size: 20px !important; font-weight: 700 !important; letter-spacing: 0 !important; margin: 2px 0 0 !important; }
body .adi-subtitle { display: none !important; }
body .adi-metrics { gap: 8px !important; }
body .adi-metric { padding: 6px 10px !important; min-width: 0 !important; flex: 1 1 120px !important; text-align: left !important; border-radius: 8px !important; }
body .adi-metric:hover { transform: none !important; }
body .adi-metric-label { font-size: 11px !important; letter-spacing: .03em !important; }
body .adi-metric-value { font-size: 13px !important; font-weight: 700 !important; line-height: 1.25 !important; }
body .adi-card { border-radius: 10px !important; }
body .adi-card-h { padding: 10px 14px !important; }
body .adi-card-b { padding: 14px !important; }
@media (max-width: 767.98px) {
  body .adi-page { padding-left: 0; padding-right: 0; }
  body .adi-hero { padding: 10px 12px !important; }
  body .adi-title { font-size: 18px !important; }
  body .adi-metrics { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body .adi-metric:first-child { grid-column: 1 / -1; }
  body .adi-card-b { padding: 12px !important; }
  body .adi-btn { width: auto; }
}

/* Las tablas en tarjetas no conservan el ancho mínimo del scroll horizontal (extraordinarios-licitaciones.css lo fija con !important). */
@media (max-width: 767.98px) {
  .ep-table, .ex-table, .de-table, .adi-table { min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
  .ep-table-wrap { overflow: visible !important; }
  .ep-table > tbody > tr > td { min-width: 0 !important; }
  .ep-table > tbody > tr > td .ep-badge { max-width: 100% !important; }
  .ep-table > tbody > tr > td:last-child { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
}

/* ==========================================================================
   Extraordinarios devueltos (.ep-table): en tablet y ventanas angostas (hasta 1199px)
   cada fila también es una tarjeta, para que nada se corte ni haya scroll horizontal.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .ep-table-wrap { overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  .ep-table { border: 0 !important; min-width: 0 !important; width: 100% !important; }
  .ep-table thead { display: none; }
  .ep-table, .ep-table > tbody, .ep-table > tbody > tr, .ep-table > tbody > tr > td { display: block; width: 100% !important; }
  .ep-table > tbody > tr {
    margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--valiant-line); border-radius: 10px; background: var(--valiant-card);
  }
  .ep-table > tbody > tr > td {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 5px 0 !important; border: 0 !important; text-align: right !important; white-space: normal !important;
    max-width: none !important; min-width: 0 !important; background: transparent !important;
  }
  .ep-table > tbody > tr > td[data-label]::before {
    content: attr(data-label); flex: 0 0 140px; color: var(--valiant-muted); font-size: 11px; font-weight: 600; text-align: left; text-transform: uppercase; letter-spacing: .04em;
  }
  .ep-table > tbody > tr > td:last-child { justify-content: flex-start; flex-wrap: wrap; gap: 8px; padding-top: 10px !important; margin-top: 6px; border-top: 1px solid var(--valiant-line) !important; }
  .ep-table > tbody > tr > td:last-child::before { display: none; }
  .ep-table > tbody > tr > td .ep-badge { max-width: 100% !important; }
}

/* ==========================================================================
   Extraordinarios devueltos: tarjetas compactas (.epm-*) hasta 1199px; la tabla completa desde 1200px.
   Fila 1: clave · clave cliente (#id). Fila 2: cantidad y unidad + nombre del nivel. Sin títulos por dato.
   ========================================================================== */
.epm-list { display: none; }

@media (max-width: 1199.98px) {
  .ep-table-wrap:has(> .ep-table) { display: none !important; }
  .epm-list { display: flex; flex-direction: column; gap: 10px; }
  .epm-card {
    display: flex; flex-direction: column; gap: 6px; padding: 12px;
    background: var(--valiant-card); border: 1px solid var(--valiant-line); border-radius: 10px;
    box-shadow: var(--valiant-shadow-sm); min-width: 0;
  }
  .epm-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
  .epm-cliente { font-size: 13px; font-weight: 600; color: var(--valiant-ink); }
  .epm-id { font-size: 12px; color: var(--valiant-muted); font-variant-numeric: tabular-nums; }
  .epm-qty { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: 13px; color: var(--valiant-muted); }
  .epm-qty strong { color: var(--valiant-ink); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .epm-nivel { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; max-width: 100%; font-size: 12px; color: var(--valiant-muted); text-align: right; }
  .epm-desc { margin: 0; font-size: 13px; line-height: 1.4; color: var(--valiant-ink); font-weight: 500; overflow-wrap: anywhere; }
  .epm-motivo {
    display: flex; align-items: flex-start; gap: 6px; padding: 6px 8px; border-radius: 6px;
    background: var(--valiant-bad-soft); color: var(--valiant-bad); font-size: 12px; font-weight: 600; line-height: 1.3;
  }
  .epm-motivo i { margin-top: 2px; }
  .epm-gen {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 5px 10px;
    border: 1px solid var(--valiant-line); border-radius: 8px; background: var(--valiant-card);
    color: var(--valiant-ink); font-size: 12px; font-weight: 600; text-decoration: none;
  }
  .epm-gen:hover { background: var(--valiant-soft-2); color: var(--valiant-ink); text-decoration: none; }
  .epm-actions { display: flex; justify-content: flex-end; gap: 6px; padding-top: 8px; border-top: 1px solid var(--valiant-line); }
}

/* Acciones por fila con el componente nx-icon-btn (igual que seguridad/usuarios) */
.ep-table td > .d-flex { gap: 6px; }


/* ==========================================================================
   VALIANT global: encabezado de página (ruta + título) igual al de seguridad/usuarios (nx-head).
   Aplica a todas las vistas de operaciones (.obra-ops) sin CSS por sección.
   ========================================================================== */
:is(.obra-ops, .ex-page, .de-page, .adi-page, .ep-hdr) .breadcrumb {
  display: flex; flex-wrap: nowrap !important; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; align-items: center; gap: 0.4rem;
  margin: 0 0 0.1rem !important; padding: 0 !important; background: transparent !important;
  font-size: 0.72rem; font-weight: 500; color: var(--valiant-muted);
}
:is(.obra-ops, .ex-page, .de-page, .adi-page, .ep-hdr) .breadcrumb::-webkit-scrollbar {
  display: none;
}
:is(.obra-ops, .ex-page, .de-page, .adi-page, .ep-hdr) .breadcrumb-item {
  display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; white-space: nowrap;
  padding: 0 !important; font-size: 0.72rem !important; font-weight: 500; color: var(--valiant-muted);
}
:is(.obra-ops, .ex-page, .de-page, .adi-page, .ep-hdr) .breadcrumb-item a,
:is(.obra-ops, .ex-page, .de-page, .adi-page, .ep-hdr) .breadcrumb-item span { color: var(--valiant-muted); text-decoration: none; }
:is(.obra-ops, .ex-page, .de-page, .adi-page, .ep-hdr) .breadcrumb-item a:hover { color: var(--valiant-ink); }
:is(.obra-ops, .ex-page, .de-page, .adi-page, .ep-hdr) .breadcrumb-item.active { color: var(--valiant-muted); }
:is(.obra-ops, .ex-page, .de-page, .adi-page, .ep-hdr) .breadcrumb-item + .breadcrumb-item { padding-left: 0 !important; }
:is(.obra-ops, .ex-page, .de-page, .adi-page, .ep-hdr) .breadcrumb-item + .breadcrumb-item::before {
  content: "\203A"; padding: 0 !important; float: none; color: var(--valiant-muted); opacity: 0.7; font-size: 0.95rem; line-height: 1;
}
body .obra-ops .ops-review-page-heading > h5,
body .obra-ops .photos-page-heading > h5,
body .obra-ops .direct-assignment-header h5,
body :is(.obra-ops, .ex-page, .de-page, .adi-page, .ep-hdr) nav[aria-label="breadcrumb"] + h5 {
  margin: 0 !important; color: var(--valiant-ink) !important;
  font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -0.01em; line-height: 1.2 !important;
}
@media (max-width: 767.98px) {
  body .obra-ops .ops-review-page-heading > h5,
  body .obra-ops .photos-page-heading > h5,
  body .obra-ops .direct-assignment-header h5,
  body :is(.obra-ops, .ex-page, .de-page, .adi-page, .ep-hdr) nav[aria-label="breadcrumb"] + h5 { font-size: 1.1rem !important; }
}


/* ==== Formularios de solicitud: controles al estilo nx-input (fuente única: mismo estilo que seguridad/usuarios) ==== */
/* ---- ex: controles de formulario al estilo nx-input (seguridad/usuarios) ---- */
body .ex-label { color: var(--valiant-ink-soft, var(--valiant-ink)) !important; font-size: 0.74rem !important; font-weight: 600 !important; margin-bottom: 0.3rem !important; }
body .ex-form-control, body select.ex-form-control, body .ex-search-input {
  height: 36px !important; padding: 0 0.7rem !important; border-radius: 6px !important;
  border: 1px solid var(--valiant-line-strong) !important; background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important; font-size: 0.82rem !important; box-shadow: none !important;
}
body textarea.ex-form-control { height: auto !important; padding: 0.5rem 0.7rem !important; min-height: 64px; }
body .ex-form-control:focus, body .ex-search-input:focus { border-color: var(--valiant-btn-primary-bg) !important; box-shadow: 0 0 0 3px var(--valiant-blue-soft) !important; background: var(--valiant-card) !important; }
body .ex-form-control:disabled, body .ex-form-control[readonly] { background: var(--valiant-soft-2) !important; color: var(--valiant-muted) !important; }
body .ex-form-control::placeholder { color: var(--valiant-muted) !important; }
body .ex-input-group { align-items: stretch; }
body .ex-input-group-text { height: 36px !important; padding: 0 0.7rem !important; border-radius: 6px 0 0 6px !important; font-size: 0.82rem !important; font-weight: 600 !important; background: var(--valiant-soft-2) !important; border: 1px solid var(--valiant-line-strong) !important; color: var(--valiant-ink-soft, var(--valiant-ink)) !important; }
body .ex-input-group .ex-form-control { border-radius: 0 6px 6px 0 !important; border-left: 0 !important; }
body .ex-card { border-radius: 10px !important; box-shadow: var(--valiant-shadow-sm) !important; }
body .ex-card-h { font-size: 0.86rem !important; font-weight: 700 !important; padding: 10px 14px !important; }
body .ex-chip, body .ex-pill { border-radius: 6px !important; font-size: 0.72rem !important; font-weight: 600 !important; padding: 3px 9px !important; }
body .ex-help { font-size: 0.72rem !important; color: var(--valiant-muted) !important; margin-top: 0.25rem; }
body .ex-radio { padding: 0 0.75rem !important; height: 34px; border-radius: 6px !important; font-size: 0.8rem !important; font-weight: 600 !important; }
body .ex-file-drop { padding: 16px !important; border-radius: 8px !important; }
body .ex-alert { border-radius: 8px !important; font-size: 0.8rem !important; padding: 8px 12px !important; }
body .ex-table th { font-size: 0.68rem !important; letter-spacing: 0.04em !important; padding: 8px 12px !important; }
body .ex-table td { font-size: 0.8rem !important; padding: 8px 12px !important; }
body .ex-summary-k { font-size: 0.78rem !important; }
body .ex-summary-v { font-size: 0.85rem !important; font-weight: 700 !important; }

/* ---- de: controles de formulario al estilo nx-input (seguridad/usuarios) ---- */
body .de-label { color: var(--valiant-ink-soft, var(--valiant-ink)) !important; font-size: 0.74rem !important; font-weight: 600 !important; margin-bottom: 0.3rem !important; }
body .de-form-control, body select.de-form-control, body .de-search-input {
  height: 36px !important; padding: 0 0.7rem !important; border-radius: 6px !important;
  border: 1px solid var(--valiant-line-strong) !important; background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important; font-size: 0.82rem !important; box-shadow: none !important;
}
body textarea.de-form-control { height: auto !important; padding: 0.5rem 0.7rem !important; min-height: 64px; }
body .de-form-control:focus, body .de-search-input:focus { border-color: var(--valiant-btn-primary-bg) !important; box-shadow: 0 0 0 3px var(--valiant-blue-soft) !important; background: var(--valiant-card) !important; }
body .de-form-control:disabled, body .de-form-control[readonly] { background: var(--valiant-soft-2) !important; color: var(--valiant-muted) !important; }
body .de-form-control::placeholder { color: var(--valiant-muted) !important; }
body .de-input-group { align-items: stretch; }
body .de-input-group-text { height: 36px !important; padding: 0 0.7rem !important; border-radius: 6px 0 0 6px !important; font-size: 0.82rem !important; font-weight: 600 !important; background: var(--valiant-soft-2) !important; border: 1px solid var(--valiant-line-strong) !important; color: var(--valiant-ink-soft, var(--valiant-ink)) !important; }
body .de-input-group .de-form-control { border-radius: 0 6px 6px 0 !important; border-left: 0 !important; }
body .de-card { border-radius: 10px !important; box-shadow: var(--valiant-shadow-sm) !important; }
body .de-card-h { font-size: 0.86rem !important; font-weight: 700 !important; padding: 10px 14px !important; }
body .de-chip, body .de-pill { border-radius: 6px !important; font-size: 0.72rem !important; font-weight: 600 !important; padding: 3px 9px !important; }
body .de-help { font-size: 0.72rem !important; color: var(--valiant-muted) !important; margin-top: 0.25rem; }
body .de-radio { padding: 0 0.75rem !important; height: 34px; border-radius: 6px !important; font-size: 0.8rem !important; font-weight: 600 !important; }
body .de-file-drop { padding: 16px !important; border-radius: 8px !important; }
body .de-alert { border-radius: 8px !important; font-size: 0.8rem !important; padding: 8px 12px !important; }
body .de-table th { font-size: 0.68rem !important; letter-spacing: 0.04em !important; padding: 8px 12px !important; }
body .de-table td { font-size: 0.8rem !important; padding: 8px 12px !important; }
body .de-summary-k { font-size: 0.78rem !important; }
body .de-summary-v { font-size: 0.85rem !important; font-weight: 700 !important; }

/* ---- adi: controles de formulario al estilo nx-input (seguridad/usuarios) ---- */
body .adi-label { color: var(--valiant-ink-soft, var(--valiant-ink)) !important; font-size: 0.74rem !important; font-weight: 600 !important; margin-bottom: 0.3rem !important; }
body .adi-form-control, body select.adi-form-control, body .adi-search-input {
  height: 36px !important; padding: 0 0.7rem !important; border-radius: 6px !important;
  border: 1px solid var(--valiant-line-strong) !important; background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important; font-size: 0.82rem !important; box-shadow: none !important;
}
body textarea.adi-form-control { height: auto !important; padding: 0.5rem 0.7rem !important; min-height: 64px; }
body .adi-form-control:focus, body .adi-search-input:focus { border-color: var(--valiant-btn-primary-bg) !important; box-shadow: 0 0 0 3px var(--valiant-blue-soft) !important; background: var(--valiant-card) !important; }
body .adi-form-control:disabled, body .adi-form-control[readonly] { background: var(--valiant-soft-2) !important; color: var(--valiant-muted) !important; }
body .adi-form-control::placeholder { color: var(--valiant-muted) !important; }
body .adi-input-group { align-items: stretch; }
body .adi-input-group-text { height: 36px !important; padding: 0 0.7rem !important; border-radius: 6px 0 0 6px !important; font-size: 0.82rem !important; font-weight: 600 !important; background: var(--valiant-soft-2) !important; border: 1px solid var(--valiant-line-strong) !important; color: var(--valiant-ink-soft, var(--valiant-ink)) !important; }
body .adi-input-group .adi-form-control { border-radius: 0 6px 6px 0 !important; border-left: 0 !important; }
body .adi-card { border-radius: 10px !important; box-shadow: var(--valiant-shadow-sm) !important; }
body .adi-card-h { font-size: 0.86rem !important; font-weight: 700 !important; padding: 10px 14px !important; }
body .adi-chip, body .adi-pill { border-radius: 6px !important; font-size: 0.72rem !important; font-weight: 600 !important; padding: 3px 9px !important; }
body .adi-help { font-size: 0.72rem !important; color: var(--valiant-muted) !important; margin-top: 0.25rem; }
body .adi-radio { padding: 0 0.75rem !important; height: 34px; border-radius: 6px !important; font-size: 0.8rem !important; font-weight: 600 !important; }
body .adi-file-drop { padding: 16px !important; border-radius: 8px !important; }
body .adi-alert { border-radius: 8px !important; font-size: 0.8rem !important; padding: 8px 12px !important; }
body .adi-table th { font-size: 0.68rem !important; letter-spacing: 0.04em !important; padding: 8px 12px !important; }
body .adi-table td { font-size: 0.8rem !important; padding: 8px 12px !important; }
body .adi-summary-k { font-size: 0.78rem !important; }
body .adi-summary-v { font-size: 0.85rem !important; font-weight: 700 !important; }

/* Controles bootstrap dentro de las pantallas de solicitud (selects de semana, etc.) al mismo estilo nx-input */
body :is(.ex-page, .de-page, .adi-page) select.form-control,
body :is(.ex-page, .de-page, .adi-page) input.form-control {
  height: 36px !important; padding: 0 0.7rem !important; border-radius: 6px !important;
  border: 1px solid var(--valiant-line-strong) !important; background-color: var(--valiant-card) !important;
  color: var(--valiant-ink) !important; font-size: 0.82rem !important; box-shadow: none !important;
}
body :is(.ex-page, .de-page, .adi-page) select.form-control { padding-right: 1.8rem !important; }
body :is(.ex-page, .de-page, .adi-page) .form-group > label { color: var(--valiant-ink-soft, var(--valiant-ink)); font-size: 0.74rem; font-weight: 600; margin-bottom: 0.3rem; }
body :is(.ex-page, .de-page, .adi-page) .form-text, body :is(.ex-page, .de-page, .adi-page) small.text-muted { font-size: 0.72rem !important; }
body :is(.adi-summary, .ex-summary, .de-summary) { padding: 12px 14px !important; border-radius: 10px !important; }
body :is(.adi-summary, .ex-summary, .de-summary) > .d-flex > div:first-child { font-size: 0.86rem; font-weight: 700 !important; }
body :is(.ex-page, .de-page, .adi-page) .modal-content { border-radius: 10px; }


/* Secciones de formulario (título pequeño + panel suave) — global VALIANT */
.form-sec {
  margin: 4px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--valiant-line);
  color: var(--valiant-muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.form-sec:not(:first-child) { margin-top: 18px; }
.form-panel {
  padding: 12px; border: 1px solid var(--valiant-line); border-radius: 8px; background: var(--valiant-soft-2);
}
body :is(.ex-page, .de-page, .adi-page) .input-group > .input-group-append > .adi-btn,
body :is(.ex-page, .de-page, .adi-page) .input-group > .input-group-append > .ex-btn,
body :is(.ex-page, .de-page, .adi-page) .input-group > .input-group-append > .de-btn { border-radius: 0 6px 6px 0 !important; margin-left: -1px; }
body :is(.ex-page, .de-page, .adi-page) .input-group > .input-group-append > .adi-btn:not(:last-child),
body :is(.ex-page, .de-page, .adi-page) .input-group > .input-group-append > .ex-btn:not(:last-child),
body :is(.ex-page, .de-page, .adi-page) .input-group > .input-group-append > .de-btn:not(:last-child) { border-radius: 0 !important; }
body :is(.ex-page, .de-page, .adi-page) .input-group > .form-control:not(:last-child) { border-radius: 6px 0 0 6px !important; }
@media (max-width: 767.98px) {
  body :is(.ex-page, .de-page, .adi-page) .input-group { flex-wrap: nowrap; }
  body :is(.ex-page, .de-page, .adi-page) .input-group-append .adi-btn span { display: none; }
}

/* Misma altura (36px) en controles y botones de los formularios de solicitud, y etiquetas alineadas */
body :is(.ex-page, .de-page, .adi-page) .input-group > .input-group-append > .adi-btn,
body :is(.ex-page, .de-page, .adi-page) .input-group > .input-group-append > .ex-btn,
body :is(.ex-page, .de-page, .adi-page) .input-group > .input-group-append > .de-btn,
body :is(.ex-page, .de-page, .adi-page) .input-group > .input-group-prepend > .adi-btn { height: 36px !important; }
body :is(.ex-page, .de-page, .adi-page) .adi-label,
body :is(.ex-page, .de-page, .adi-page) .ex-label,
body :is(.ex-page, .de-page, .adi-page) .de-label { display: flex; align-items: center; gap: 6px; min-height: 20px; }
body :is(.ex-page, .de-page, .adi-page) .adi-label .adi-chip,
body :is(.ex-page, .de-page, .adi-page) .ex-label .ex-chip,
body :is(.ex-page, .de-page, .adi-page) .de-label .de-chip { padding: 1px 6px !important; font-size: 0.66rem !important; }
body :is(.ex-page, .de-page, .adi-page) .select2-container .select2-selection--single {
  height: 36px !important; border: 1px solid var(--valiant-line-strong) !important; border-radius: 6px !important; background: var(--valiant-card) !important;
}
body :is(.ex-page, .de-page, .adi-page) .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 34px !important; padding-left: 0.7rem !important; font-size: 0.82rem !important; color: var(--valiant-ink) !important;
}
body :is(.ex-page, .de-page, .adi-page) .select2-container .select2-selection--single .select2-selection__arrow { height: 34px !important; }
body :is(.ex-page, .de-page, .adi-page) .select2-container { width: 100% !important; }
body :is(.ex-page, .de-page, .adi-page) .adi-label,
body :is(.ex-page, .de-page, .adi-page) .ex-label,
body :is(.ex-page, .de-page, .adi-page) .de-label { height: 20px; }
body :is(.ex-page, .de-page, .adi-page) .adi-label .adi-chip,
body :is(.ex-page, .de-page, .adi-page) .ex-label .ex-chip,
body :is(.ex-page, .de-page, .adi-page) .de-label .de-chip { height: 18px !important; padding: 0 6px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; line-height: 1 !important; }
body :is(.ex-page, .de-page, .adi-page) #nomenclaturaSpan { height: 36px !important; box-sizing: border-box !important; padding: 0 0.7rem !important; display: flex; align-items: center; }

/* El prefijo «clave-» se conserva oculto (se concatena al enviar); el campo de clave ocupa todo el ancho */
body :is(.ex-page, .de-page, .adi-page) #clave2 { border-radius: 6px !important; border-left: 1px solid var(--valiant-line-strong) !important; }

/* Opciones de radio (tipo de generador): una al lado de la otra, repartiéndose el ancho en móvil */
body :is(.ex-page, .de-page, .adi-page) :is(.adi-radio-group, .ex-radio-group, .de-radio-group) {
  flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 8px !important;
}
@media (max-width: 767.98px) {
  body :is(.ex-page, .de-page, .adi-page) :is(.adi-radio, .ex-radio, .de-radio) {
    flex: 1 1 0; justify-content: center; min-width: 0;
  }
}

/* Campos derivados del concepto (clave, unidad, descripción): mismo aspecto de solo lectura */
body :is(.ex-page, .de-page, .adi-page) #clave2,
body :is(.ex-page, .de-page, .adi-page) #unidad2,
body :is(.de-page, .adi-page) #descripcion { background-color: var(--valiant-soft-2) !important; }
body :is(.ex-page, .de-page, .adi-page) #clave2 { color: var(--valiant-ink) !important; font-weight: 600; }

/* Las pantallas de solicitud llevan margen lateral en escritorio (antes quedaban pegadas al borde) */
@media (min-width: 768px) {
  body :is(.ex-page, .de-page, .adi-page) { padding-left: 24px !important; padding-right: 24px !important; }
}

/* Barra "¿ya existe?" de extraordinarios: se acomoda en varias líneas sin apretar el texto */
body .ex-page .ex-alert { flex-wrap: wrap; gap: 6px 8px; align-items: center; }
body .ex-page .ex-alert > span[style*="margin: 0 4px"] { display: none; }

/* Los <select> nunca deben verse como campos de solo lectura (:read-only también los alcanza en CSS) */
body :is(.ex-page, .de-page, .adi-page) select.form-control:not(:disabled),
body :is(.ex-page, .de-page, .adi-page) select.ex-form-control:not(:disabled),
body :is(.ex-page, .de-page, .adi-page) select.de-form-control:not(:disabled),
body :is(.ex-page, .de-page, .adi-page) select.adi-form-control:not(:disabled) { background-color: var(--valiant-card) !important; color: var(--valiant-ink) !important; }

/* Buscadores con lupa: el padding izquierdo deja lugar al ícono (antes el texto quedaba encima) */
body :is(.ex-page, .de-page, .adi-page) input#searchExtraClaveInput,
body :is(.ex-page, .de-page, .adi-page) input#searchNivelInput,
body #modalExtraordinarios input#searchExtraClaveInput,
body #modalNivelesTree input#searchNivelInput { padding-left: 2.4rem !important; height: 36px !important; border-radius: 6px !important; }
/* Un solo buscador por modal: el de arriba filtra la tabla, se oculta el "Buscar:" propio de DataTables */
#modalExtraordinarios .dataTables_filter { display: none !important; }

/* Modales de las pantallas de solicitud: el cuerpo se desplaza por sí mismo (antes el contenido largo quedaba cortado sin scroll) */
body :is(.adi-modal-body, .ex-modal-body, .de-modal-body) {
  max-height: calc(100vh - 10rem);
  max-height: calc(100dvh - 10rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Buscador y selector de DataTables dentro de los modales de solicitud: ocupan todo el ancho y siguen el estilo nx-input */
body :is(.adi-modal-body, .ex-modal-body, .de-modal-body) .dataTables_wrapper .dataTables_filter,
body :is(.adi-modal-body, .ex-modal-body, .de-modal-body) .dataTables_wrapper .dataTables_length { width: 100%; float: none; text-align: left; margin-bottom: 10px; }
body :is(.adi-modal-body, .ex-modal-body, .de-modal-body) .dataTables_wrapper .dataTables_filter label,
body :is(.adi-modal-body, .ex-modal-body, .de-modal-body) .dataTables_wrapper .dataTables_length label {
  display: block; width: 100%; margin: 0; color: var(--valiant-ink-soft, var(--valiant-ink)); font-size: 0.74rem; font-weight: 600;
}
body :is(.adi-modal-body, .ex-modal-body, .de-modal-body) .dataTables_wrapper .dataTables_filter input {
  display: block; width: 100% !important; margin: 4px 0 0 !important; height: 36px; padding: 0 0.7rem; font-size: 0.82rem;
  border: 1px solid var(--valiant-line-strong); border-radius: 6px; background: var(--valiant-card); color: var(--valiant-ink); box-shadow: none;
}
body :is(.adi-modal-body, .ex-modal-body, .de-modal-body) .dataTables_wrapper .dataTables_filter input:focus {
  outline: none; border-color: var(--valiant-btn-primary-bg); box-shadow: 0 0 0 3px var(--valiant-blue-soft);
}
body :is(.adi-modal-body, .ex-modal-body, .de-modal-body) .dataTables_wrapper .dataTables_length select {
  height: 34px; border: 1px solid var(--valiant-line-strong); border-radius: 6px; background: var(--valiant-card); font-size: 0.82rem;
}

/* "Mostrar N registros": se oculta siempre en los modales de solicitud (el buscador y la paginación bastan; antes salía solo en algunos) */
body :is(.adi-modal-body, .ex-modal-body, .de-modal-body) .dataTables_wrapper .dataTables_length { display: none !important; }

/* Todos los modales de solicitud llegan a la misma altura (el de insumos traía un límite propio de 70vh en línea) */
body :is(.adi-modal-body, .ex-modal-body, .de-modal-body) {
  max-height: calc(100vh - 10rem) !important;
  max-height: calc(100dvh - 10rem) !important;
}

/* Margen lateral en celular para las pantallas de solicitud (antes el contenido tocaba el borde) */
@media (max-width: 767.98px) {
  body :is(.ex-page, .de-page, .adi-page) { padding-left: 12px !important; padding-right: 12px !important; }
}

/* Sufijo de fecha de la clave (deductivas): mismo alto y esquinas que el resto del grupo */
body .de-page .input-group-append > .input-group-text { height: 36px; padding: 0 0.7rem; border-radius: 0 6px 6px 0; font-size: 0.78rem; font-weight: 600; background: var(--valiant-soft-2); border: 1px solid var(--valiant-line-strong); border-left: 0; color: var(--valiant-muted); }
body .de-page #clave2 { border-radius: 6px 0 0 6px !important; border-left: 1px solid var(--valiant-line-strong) !important; }

/* Recepción de materiales: etiquetas y botones con texto legible en modo claro (los colores pastel eran del modo oscuro) */
html:not([data-theme="dark"]) .chip-warning,
html:not([data-theme="dark"]) .chip-warning i { color: color-mix(in srgb, var(--valiant-warn) 65%, #000) !important; }
html:not([data-theme="dark"]) .chip-danger,
html:not([data-theme="dark"]) .chip-danger i { color: color-mix(in srgb, var(--valiant-bad) 75%, #000) !important; }
html:not([data-theme="dark"]) .chip-success,
html:not([data-theme="dark"]) .chip-success i { color: color-mix(in srgb, var(--valiant-ok) 65%, #000) !important; }
html:not([data-theme="dark"]) .chip-info,
html:not([data-theme="dark"]) .chip-info i { color: color-mix(in srgb, var(--valiant-blue) 80%, #000) !important; }
html:not([data-theme="dark"]) .marginHeader .btn-outline-danger {
  color: color-mix(in srgb, var(--valiant-bad) 80%, #000) !important;
  border-color: var(--valiant-bad-border) !important;
  background: var(--valiant-bad-soft) !important;
}
html:not([data-theme="dark"]) .marginHeader .btn-outline-danger:hover { background: var(--valiant-bad) !important; color: #fff !important; }

/* ==========================================================================
   Recepción de materiales en celular: filtros y tarjetas de orden compactos
   ========================================================================== */
@media (max-width: 767.98px) {
  /* Filtros: sin texto de ayuda, fechas lado a lado, acciones en una fila */
  .rm-toolbar { padding: 12px !important; }
  .rm-toolbar-heading { margin-bottom: 8px !important; }
  .rm-toolbar-description, .rm-toolbar .filter-help, .rm-toolbar-heading .chip { display: none !important; }
  .rm-toolbar-title { font-size: 0.95rem !important; margin: 0 !important; }
  #filtroForm > .d-flex { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px !important; align-items: end !important; }
  #filtroForm > .d-flex > .flex-grow-1 { min-width: 0 !important; }
  #filtroForm > .d-flex > .flex-grow-1:nth-child(3) { grid-column: 1 / -1; }
  #filtroForm > .d-flex > .d-flex { grid-column: 1 / -1; margin-bottom: 0 !important; flex-wrap: wrap; gap: 8px !important; }
  #filtroForm .col-form-label { font-size: 0.68rem !important; padding: 0 0 2px !important; }
  #filtroForm .form-control, #filtroForm .select2-selection { height: 36px !important; min-height: 36px; font-size: 0.82rem !important; border-radius: 6px !important; }
  #filtroForm .btn { padding: 0 14px !important; height: 36px; font-size: 0.8rem; border-radius: 7px !important; }
  #filtroForm .custom-control { flex: 1 1 100%; margin: 0 !important; padding-bottom: 0 !important; }
  #filtroForm .custom-control-label { font-size: 0.8rem !important; }
  #filtroForm > .d-flex > .d-flex .btn { flex: 1 1 0; }

  /* Tarjeta de orden */
  .card-actions { display: flex !important; flex-wrap: wrap; gap: 6px !important; margin-top: 8px; }
  .card-actions .chip { flex: 0 0 auto; margin: 0 !important; }
  .card-actions .btn { flex: 1 1 0; min-width: 0; margin: 0 !important; padding: 7px 6px !important; font-size: 0.74rem !important; line-height: 1.15; white-space: normal; border-radius: 7px !important; }
  .oc-progress { display: grid !important; grid-template-columns: 1fr auto; gap: 6px 10px !important; padding: 10px 12px !important; align-items: center; }
  .oc-progress > div:nth-child(1) .oc-progress-copy { display: none; }
  .oc-progress > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .oc-progress-title { font-size: 0.86rem !important; }
  .oc-progress-value { font-size: 0.82rem !important; text-align: right; }
  .oc-metric { padding: 8px 12px !important; }
  .oc-metric-label { font-size: 0.62rem !important; }
  .oc-metric-value { font-size: 0.92rem !important; }
  .oc-card-footer { padding: 8px 12px !important; gap: 8px !important; }
  .oc-alert-note { padding: 8px 12px !important; font-size: 0.78rem !important; }
}
@media (max-width: 767.98px) {
  .card-actions .chip { flex: 1 1 100% !important; justify-content: flex-start; }
  /* Tres indicadores en una fila (el resto de pantallas con cuatro siguen 2 x 2) */
  .obra-ops .ops-review-page-kpis:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .obra-ops .ops-review-page-kpis:has(> :nth-child(3):last-child) .kpi-dashboard-card { padding: 8px 6px !important; }
  .obra-ops .ops-review-page-kpis:has(> :nth-child(3):last-child) .kpi-title { font-size: 0.56rem !important; }
}
@media (max-width: 767.98px) {
  .oc-metrics { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .oc-metric { border-right: 0; min-width: 0; }
  .oc-metric-value { overflow-wrap: anywhere; }
}

/* ==========================================================================
   Modales de recepción y devolución (pantalla completa): encabezado claro y legible
   ========================================================================== */
#modalRecepcion .modal-header,
#modalDevolucion .modal-header {
  background: var(--valiant-card) !important;
  border-bottom: 1px solid var(--valiant-line) !important;
  color: var(--valiant-ink);
}
#modalRecepcion .reception-modal-title,
#modalDevolucion .modal-title { color: var(--valiant-ink) !important; font-size: 1rem; font-weight: 700; }
#modalRecepcion .reception-modal-context,
#modalDevolucion .reception-modal-context { color: var(--valiant-muted) !important; font-size: 0.78rem; }
#modalRecepcion .reception-modal-summary,
#modalDevolucion .reception-modal-summary {
  color: var(--valiant-ink-soft, var(--valiant-ink)) !important;
  background: var(--valiant-soft-2) !important;
  border: 1px solid var(--valiant-line) !important;
  border-radius: 6px; padding: 5px 10px; font-size: 0.74rem; font-weight: 600;
}
#modalRecepcion .modal-header .close,
#modalDevolucion .modal-header .close { color: var(--valiant-muted) !important; opacity: 1; text-shadow: none; }
#modalRecepcion .modal-footer .btn, #modalDevolucion .modal-footer .btn { border-radius: 7px; height: 34px; padding: 0 14px; font-size: 0.8rem; font-weight: 600; }

/* Campos de captura de las tablas de recepción y devolución: blancos, misma altura y estilo nx-input */
#modalRecepcion .table-recepcion .form-control,
#modalDevolucion #tblDevolucionMateriales .form-control {
  height: 36px !important; min-height: 36px;
  padding: 0 0.7rem !important;
  border: 1px solid var(--valiant-line-strong) !important;
  border-radius: 6px !important;
  background-color: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  font-size: 0.82rem !important;
  box-shadow: none !important;
}
#modalRecepcion .table-recepcion textarea.form-control { padding-top: 7px !important; padding-bottom: 7px !important; resize: none; overflow: hidden; }
#modalRecepcion .table-recepcion .form-control:focus,
#modalDevolucion #tblDevolucionMateriales .form-control:focus {
  border-color: var(--valiant-btn-primary-bg) !important; box-shadow: 0 0 0 3px var(--valiant-blue-soft) !important;
}
#modalRecepcion .table-recepcion .form-control:disabled,
#modalDevolucion #tblDevolucionMateriales .form-control:disabled {
  background-color: var(--valiant-soft-2) !important; color: var(--valiant-muted) !important; opacity: 1;
}
#modalRecepcion .table-recepcion .form-control::placeholder,
#modalDevolucion #tblDevolucionMateriales .form-control::placeholder { color: var(--valiant-muted); }

/* ==========================================================================
   Central de licitaciones: acciones de inicio de obra y de obra en curso (lcx-*)
   Misma anatomía que el menú del residente (ops-flow-card + tarjetas db-action-btn).
   ========================================================================== */
.lcx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lcx-head__side { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lcx-metric { display: flex; flex-direction: column; padding: 5px 12px; border: 1px solid var(--valiant-line); border-radius: 8px; background: var(--valiant-card); }
.lcx-metric__label { color: var(--valiant-muted); font-size: 11px; font-weight: 600; }
.lcx-metric__value { color: var(--valiant-ink); font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }

.obra-ops .ops-flow-card.lcx-section { margin-bottom: 12px; padding: 14px 16px; }
.lcx-section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.lcx-section__head .ops-flow-title { margin: 0; }
.lcx-section__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lcx-progress { display: flex; flex-direction: column; gap: 4px; min-width: 150px; color: var(--valiant-muted); font-size: 11px; font-weight: 600; }
.lcx-progress__bar { display: block; height: 4px; border-radius: 999px; background: var(--valiant-soft-2); overflow: hidden; }
.lcx-progress__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--valiant-btn-primary-bg); }

.lcx-body { display: flex; flex-direction: column; gap: 16px; }
.lcx-section.is-locked .lcx-body { opacity: 0.5; pointer-events: none; filter: grayscale(0.4); }
.lcx-group__title { margin: 0 0 8px; color: var(--valiant-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.lcx-group__title small { margin-left: 8px; letter-spacing: 0; text-transform: none; font-size: 12px; font-weight: 500; }
.lcx-callout { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.lcx-callout > div:not(.lcx-callout__actions) { flex: 1 1 260px; }
.lcx-callout__actions { display: flex; flex-wrap: wrap; gap: 6px; }

.lcx-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 10px; }
.lcx-step { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--valiant-line); border-radius: 10px; background: var(--valiant-card); }
.lcx-step.is-current { border-color: var(--valiant-btn-primary-bg); box-shadow: 0 0 0 3px var(--valiant-blue-soft); }
.lcx-step.is-done { border-color: var(--valiant-ok-border); }
.lcx-step.is-blocked { opacity: 0.6; background: var(--valiant-soft-2); }
.lcx-step__top { display: flex; align-items: center; gap: 10px; }
.lcx-step__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; color: #fff; font-size: 1rem; }
.lcx-step__copy { min-width: 0; }
.lcx-step__copy strong { display: block; color: var(--valiant-ink); font-size: 13px; font-weight: 700; line-height: 1.25; }
.lcx-step__copy small { display: block; color: var(--valiant-muted); font-size: 12px; }
.lcx-step__check { flex: none; margin-left: auto; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--valiant-ok-soft); color: var(--valiant-ok); font-size: 11px; }
.lcx-step__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lcx-step__actions .nx-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.lcx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.obra-ops .ops-flow-card .lcx-tiles .db-action-btn { min-height: 100px; gap: 8px; padding: 12px 8px; }
.lcx-tool { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 12px; border: 1px dashed var(--valiant-line-strong); border-radius: 10px; }
.lcx-tool__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--valiant-soft-2); color: var(--valiant-muted); }
.lcx-tool__copy { flex: 1 1 240px; min-width: 0; }
.lcx-tool__copy strong { display: block; color: var(--valiant-ink); font-size: 13px; font-weight: 700; }
.lcx-tool__copy small { display: block; color: var(--valiant-muted); font-size: 12px; }

@media (max-width: 767.98px) {
  .obra-ops .ops-flow-card.lcx-section { padding: 12px; }
  .lcx-steps { grid-template-columns: minmax(0, 1fr); }
  .lcx-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .obra-ops .ops-flow-card .lcx-tiles .db-action-btn { min-height: 92px; padding: 10px 4px; }
  .obra-ops .ops-flow-card .lcx-tiles .db-action-label { font-size: 0.66rem !important; }
  .lcx-section__meta { width: 100%; }
  .lcx-section__meta .nx-btn--primary { flex: 1 1 100%; }
}
@media (max-width: 420px) {
  .lcx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Las acciones de la central no son una secuencia: sin numeración en las tarjetas */
.obra-ops .ops-flow-card .lcx-tiles .db-action-btn::before { display: none !important; content: none !important; }

/* Central de licitaciones: las secciones se apilan y el orden lo define cada una (pendientes arriba, completadas abajo) */
.lcx-stack { display: flex; flex-direction: column; }

/* Central de licitaciones: flujos de extraordinarios, aditivas y deductivas */
.lcx-flows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lcx-flow { padding: 12px; border: 1px solid var(--valiant-line); border-radius: 10px; background: var(--valiant-card); min-width: 0; }
.lcx-flow--wide { grid-column: 1 / -1; }
.lcx-flow__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.lcx-flow__head strong { color: var(--valiant-ink); font-size: 13px; font-weight: 700; }
.lcx-flow__head strong i { margin-right: 6px; color: var(--valiant-muted); }
.lcx-flow__head small { color: var(--valiant-muted); font-size: 12px; }
.lcx-flow__steps { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
.lcx-flow__steps .db-action-btn { flex: 0 0 132px; }
.obra-ops .ops-flow-card .lcx-flow__steps .db-action-btn { min-height: 100px; gap: 8px; padding: 12px 8px; }
.obra-ops .ops-flow-card .lcx-flow__steps .db-action-btn::before { display: none !important; content: none !important; }
.lcx-arrow { flex: 0 0 18px; display: flex; align-items: center; justify-content: center; color: var(--valiant-line-strong); font-size: 12px; }
.lcx-flow__hint { margin: 10px 0 0; color: var(--valiant-muted); font-size: 12px; }
.lcx-flow__hint i { margin-right: 6px; }
@media (max-width: 991.98px) {
  .lcx-flows { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .lcx-arrow { display: none; }
  .lcx-flow__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .lcx-flow__steps .db-action-btn { flex: none; }
  .obra-ops .ops-flow-card .lcx-flow__steps .db-action-btn { min-height: 92px; padding: 10px 4px; }
  .obra-ops .ops-flow-card .lcx-flow__steps .db-action-label { font-size: 0.66rem !important; }
}
@media (max-width: 420px) {
  .lcx-flow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Escritorio: cada flujo cabe en una sola fila (las tarjetas se reparten el ancho y las flechas no quedan huérfanas) */
@media (min-width: 992px) {
  .lcx-flow__steps { flex-wrap: nowrap; }
  .lcx-flow__steps .db-action-btn { flex: 1 1 96px; min-width: 0; max-width: 150px; }
}
@media (max-width: 991.98px) {
  .lcx-arrow { display: none; }
  .lcx-flow__steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
  .lcx-flow__steps .db-action-btn { flex: none; max-width: none; }
}

/* Central de licitaciones: versión compacta (menos altura) */
.lcx-section.is-collapsed .lcx-body, .lcx-section.is-collapsed .lcx-callout { display: none; }
.lcx-section.is-collapsed .lcx-section__head { margin-bottom: 0; }
.lcx-section.is-collapsed.is-locked .lcx-body { display: none; }
.lcx-toggle i { transition: transform 0.15s ease; }
.lcx-section:not(.is-collapsed) .lcx-toggle i { transform: rotate(180deg); }
.lcx-section.is-locked:not(.is-collapsed) .lcx-body { opacity: 0.6; }
.lcx-toggle { pointer-events: auto; }
.lcx-section__head { margin-bottom: 10px; }
.lcx-body { gap: 12px; }
.lcx-flow { padding: 10px 12px; }
.lcx-flow__head { margin-bottom: 8px; }
.obra-ops .ops-flow-card .lcx-tiles .db-action-btn,
.obra-ops .ops-flow-card .lcx-flow__steps .db-action-btn { min-height: 84px; gap: 6px; padding: 8px 6px; }
.obra-ops .ops-flow-card .lcx-tiles .db-action-icon,
.obra-ops .ops-flow-card .lcx-flow__steps .db-action-icon { width: 38px; height: 38px; font-size: 1.05rem; }
.obra-ops .ops-flow-card .lcx-tiles .db-action-label,
.obra-ops .ops-flow-card .lcx-flow__steps .db-action-label { font-size: 0.7rem; line-height: 1.25; }
@media (min-width: 992px) {
  .lcx-flows { grid-template-columns: minmax(0, 3fr) minmax(0, 1.1fr) minmax(0, 2fr); }
  .lcx-flow--wide { grid-column: 1 / -1; }
  .lcx-flow__steps .db-action-btn { flex: 1 1 84px; max-width: 130px; }
}

/* ==========================================================================
   Ruta de navegación en la barra superior (migas): Inicio › Módulo › Pantalla.
   La arma el script de templates/footer.php con la pila de pantallas visitadas.
   ========================================================================== */
.navbar .valiant-migas {
  display: none;
  align-items: center;
  flex: 1 1 0%;
  min-width: 0;
  max-width: none;
  margin: 0 1rem 0 1.25rem;
  padding: 0 0 0 1.25rem;
  list-style: none;
  border-left: 1px solid hsl(0 0% 100% / 0.16);
  font-size: 0.8rem;
  white-space: nowrap;
}

.navbar .valiant-migas.d-lg-flex {
  display: flex;
}

.navbar .valiant-migas li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: hsl(0 0% 100% / 0.6);
}

.navbar .valiant-migas li + li::before {
  content: "›";
  margin: 0 0.5rem;
  color: hsl(0 0% 100% / 0.35);
}

.navbar .valiant-migas a {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 20rem;
  color: inherit;
  text-decoration: none;
}

.navbar .valiant-migas a:hover {
  color: hsl(0 0% 100%);
  text-decoration: underline;
}

.navbar .valiant-migas li[aria-current="page"] {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: none;
  color: hsl(0 0% 100%);
  font-weight: 600;
}

@media (min-width: 992px) {
  .navbar-expand-lg > .navbar-collapse {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

@media (max-width: 1279.98px) {
  .navbar .valiant-migas li:not(:first-child):not(:last-child):not(:nth-last-child(2)) {
    display: none;
  }
}


/* ==========================================================================
   Vistas .eoc (orden de compra, insumos): variables y superficies en oscuro
   ========================================================================== */
[data-theme="dark"] .eoc {
  --ink: var(--valiant-ink);
  --muted: var(--valiant-muted);
  --border: var(--valiant-line);
  --soft: var(--valiant-soft);
  --accent: var(--valiant-soft-2);
}

[data-theme="dark"] .eoc .hero {
  background: var(--valiant-card);
  border: 1px solid var(--valiant-line);
  box-shadow: var(--valiant-shadow-sm);
}

[data-theme="dark"] .eoc .kpi,
[data-theme="dark"] .eoc .toolbar,
[data-theme="dark"] .eoc .pill-stat,
[data-theme="dark"] .eoc .btn-plain,
[data-theme="dark"] .eoc .tfoot-sticky {
  background: var(--valiant-card);
  border-color: var(--valiant-line);
  color: var(--valiant-ink);
}

[data-theme="dark"] .eoc .fxbar {
  background: var(--valiant-soft);
  border-color: var(--valiant-line);
  color: var(--valiant-ink);
}

[data-theme="dark"] .eoc .btn-plain:hover {
  background: var(--valiant-soft-2);
}

[data-theme="dark"] .eoc .delta-up,
[data-theme="dark"] .delta-up { color: var(--valiant-ok); }
[data-theme="dark"] .eoc .delta-down,
[data-theme="dark"] .delta-down { color: var(--valiant-bad); }
[data-theme="dark"] .eoc .delta-zero,
[data-theme="dark"] .delta-zero { color: var(--valiant-muted); }
[data-theme="dark"] .eoc .delta-pill,
[data-theme="dark"] .delta-pill { background: var(--valiant-soft-2); }
[data-theme="dark"] .eoc .delta-up .delta-pill,
[data-theme="dark"] .delta-up .delta-pill { background: var(--valiant-ok-soft); }
[data-theme="dark"] .eoc .delta-down .delta-pill,
[data-theme="dark"] .delta-down .delta-pill { background: var(--valiant-bad-soft); }

[data-theme="dark"] .eoc .row-over { background: var(--valiant-bad-soft) !important; }
[data-theme="dark"] .eoc .row-ok { background: var(--valiant-ok-soft) !important; }

[data-theme="dark"] .eoc .card,
[data-theme="dark"] .eoc .input-group-text {
  background: var(--valiant-card);
  border-color: var(--valiant-line);
  color: var(--valiant-ink);
}

[data-theme="dark"] .eoc .table,
[data-theme="dark"] .eoc .table td,
[data-theme="dark"] .eoc .table th {
  color: var(--valiant-ink);
  border-color: var(--valiant-line);
}

[data-theme="dark"] .eoc .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--valiant-soft);
}

[data-theme="dark"] .eoc .table-striped tbody tr:nth-of-type(even) {
  background-color: transparent;
}

[data-theme="dark"] .eoc .table thead th,
[data-theme="dark"] .eoc .thead-dark th,
[data-theme="dark"] .sticky-top2 tr th {
  background-color: var(--valiant-soft-2);
  color: var(--valiant-muted);
  border-color: var(--valiant-line);
}

[data-theme="dark"] .eoc .form-control {
  background: var(--valiant-input-bg);
  border-color: var(--valiant-line);
  color: var(--valiant-ink);
}

[data-theme="dark"] .eoc .btn-light {
  background: var(--valiant-soft-2);
  border-color: var(--valiant-line);
  color: var(--valiant-ink);
}

/* ==========================================================================
   Pantalla global de carga (showLoadingOverlay / loadingOverlay2)
   ========================================================================== */
[data-theme="dark"] .loading-overlay {
  background-color: hsla(222 30% 6% / 0.78);
  backdrop-filter: blur(2px);
}

[data-theme="dark"] .loading-overlay .spinner {
  border-color: var(--valiant-line);
  border-top-color: var(--valiant-btn-primary-bg);
}

[data-theme="dark"] .loading-overlay .spinner-border {
  color: var(--valiant-btn-primary-bg) !important;
}

[data-theme="dark"] .loading-overlay .progress {
  background-color: var(--valiant-soft-2);
}

[data-theme="dark"] .loading-overlay .progress-bar {
  background-color: var(--valiant-btn-primary-bg);
}

[data-theme="dark"] .loading-overlay .text-muted,
[data-theme="dark"] .loading-overlay #progressLabel {
  color: var(--valiant-muted) !important;
}

/* Barras de scroll y controles nativos en modo oscuro */
[data-theme="dark"] {
  color-scheme: dark;
}

/* ==========================================================================
   Reporte de operaciones y asignación de personal (modo oscuro)
   Controles, niveles, tarjetas de concepto y etiquetas con colores fijos.
   ========================================================================== */
[data-theme="dark"] .planobra-shell,
[data-theme="dark"] .planobra-shell.planobra-asignacion {
  background: transparent !important;
  color: var(--valiant-ink) !important;
}

[data-theme="dark"] .direct-view-switch {
  background: var(--valiant-soft-2) !important;
  border-color: var(--valiant-line) !important;
}

[data-theme="dark"] .direct-view-switch button:not(.active) {
  color: var(--valiant-muted) !important;
  background: transparent !important;
}

[data-theme="dark"] .direct-period-label,
[data-theme="dark"] .obra-ops--photos .direct-period-label,
[data-theme="dark"] .obra-ops--planning .direct-period-label {
  color: var(--valiant-ink-soft) !important;
}

[data-theme="dark"] .direct-period-previous-control,
[data-theme="dark"] .direct-period-next-control,
[data-theme="dark"] .assignment-filter-button,
[data-theme="dark"] .direct-concept-secondary-button {
  background: var(--valiant-soft-2) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-ink-soft) !important;
}

[data-theme="dark"] .assignment-filter-button {
  color: var(--valiant-blue) !important;
  border-color: var(--valiant-blue) !important;
}

[data-theme="dark"] .expand-toggle-btn,
[data-theme="dark"] .obra-ops--photos .photos-expand-control .expand-toggle-btn,
[data-theme="dark"] .obra-ops--planning .assignment-expand-control .expand-toggle-btn {
  background: var(--valiant-soft-2) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-ink-soft) !important;
}

[data-theme="dark"] .direct-alert-backlog {
  background: var(--valiant-warn-soft) !important;
  border-color: var(--valiant-line) !important;
  border-left-color: var(--valiant-warn) !important;
  color: var(--valiant-warn) !important;
}

[data-theme="dark"] summary.tree-toggle,
[data-theme="dark"] .nivel-card,
[data-theme="dark"] .dc-qty {
  background: var(--valiant-card) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
}

[data-theme="dark"] .dc-card {
  color: var(--valiant-ink) !important;
}

[data-theme="dark"] .dc-qty-label,
[data-theme="dark"] .dc-assign-badge.none {
  background: var(--valiant-soft-2) !important;
  color: var(--valiant-muted) !important;
}

[data-theme="dark"] .dc-assign-badge.full,
[data-theme="dark"] .dc-people-btn {
  background: var(--valiant-ok-soft) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-ok) !important;
}

[data-theme="dark"] .dc-level-pending,
[data-theme="dark"] .dc-level-pending.has-pending {
  background: var(--valiant-warn-soft) !important;
  color: var(--valiant-warn) !important;
}

[data-theme="dark"] .dc-late {
  background: var(--valiant-bad-soft) !important;
  color: var(--valiant-bad) !important;
}

[data-theme="dark"] .nx-tag--info {
  background: var(--valiant-blue-soft) !important;
  border-color: transparent !important;
  color: var(--valiant-blue) !important;
}

[data-theme="dark"] .badge-light {
  background: var(--valiant-soft-2) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-muted) !important;
}

/* Estilos en línea con tonos pastel generados por las vistas y el JS */
[data-theme="dark"] [style*="#f8f9fc"],
[data-theme="dark"] [style*="#f8fafc"],
[data-theme="dark"] [style*="#f1f5f9"],
[data-theme="dark"] [style*="#f9fafb"],
[data-theme="dark"] [style*="#f8f9fa"] {
  background: var(--valiant-soft-2) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-ink-soft) !important;
}

[data-theme="dark"] [style*="#ecfdf5"],
[data-theme="dark"] [style*="#d1fae5"],
[data-theme="dark"] [style*="#f0fdf4"],
[data-theme="dark"] [style*="#dcfce7"] {
  background: var(--valiant-ok-soft) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-ok) !important;
}

[data-theme="dark"] [style*="#f0f9ff"],
[data-theme="dark"] [style*="#e0f2fe"],
[data-theme="dark"] [style*="#eff6ff"] {
  background: var(--valiant-blue-soft) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-blue) !important;
}

[data-theme="dark"] [style*="#fef3c7"],
[data-theme="dark"] [style*="#fff7ed"],
[data-theme="dark"] [style*="#fffbeb"],
[data-theme="dark"] [style*="#fef7e0"] {
  background: var(--valiant-warn-soft) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-warn) !important;
}

[data-theme="dark"] [style*="#fee2e2"],
[data-theme="dark"] [style*="#fef2f2"],
[data-theme="dark"] [style*="#fdecec"] {
  background: var(--valiant-bad-soft) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-bad) !important;
}

/* Fondos suaves de estado un poco más visibles sobre superficies oscuras */
[data-theme="dark"] {
  --valiant-ok-soft: rgba(34, 197, 94, 0.14);
  --valiant-warn-soft: rgba(245, 158, 11, 0.14);
  --valiant-bad-soft: rgba(248, 113, 113, 0.14);
  --valiant-blue-soft: rgba(96, 165, 250, 0.14);
}

/* Variables propias de planobra.css y su asignación de personal */
[data-theme="dark"],
[data-theme="dark"] .planobra-shell,
[data-theme="dark"] .planobra-asignacion {
  --planobra-surface: var(--valiant-card);
  --planobra-surface-strong: var(--valiant-card);
  --planobra-surface-soft: var(--valiant-soft);
  --planobra-border: var(--valiant-line);
  --planobra-border-strong: var(--valiant-line);
  --planobra-ink: var(--valiant-ink);
  --planobra-ink-soft: var(--valiant-ink-soft);
  --planobra-muted: var(--valiant-muted);
  --planobra-muted-strong: var(--valiant-ink-soft);
  --planobra-accent: hsl(190 70% 52%);
  --planobra-accent-strong: hsl(190 75% 66%);
  --planobra-accent-soft: rgba(34, 211, 238, 0.12);
  --planobra-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --planobra-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] body .direct-level > summary.nivel-card,
html[data-theme="dark"] body .obra-ops--planning .ops-planning-tree-panel .direct-level > summary.nivel-card,
html[data-theme="dark"] body summary.tree-toggle.nivel-card {
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border-color: var(--valiant-line) !important;
}

html[data-theme="dark"] body .direct-level > summary.nivel-card strong,
html[data-theme="dark"] body .direct-level > summary.nivel-card .text-dark {
  color: var(--valiant-ink) !important;
}

html[data-theme="dark"] .nx-tag.nx-tag--info {
  background: var(--valiant-blue-soft) !important;
  color: var(--valiant-blue) !important;
  border-color: transparent !important;
}

html[data-theme="dark"] .direct-requirement-button {
  background: var(--valiant-soft-2) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-ink-soft) !important;
}

html[data-theme="dark"] .dc-late {
  color: var(--valiant-bad) !important;
}

/* Tablas de DataTables y Bootstrap dentro de vistas y modales (modo oscuro) */
html[data-theme="dark"] table.dataTable tbody tr,
html[data-theme="dark"] table.dataTable tbody tr.odd,
html[data-theme="dark"] table.dataTable tbody tr.even,
html[data-theme="dark"] .table tbody tr,
html[data-theme="dark"] .table-hover tbody tr {
  background-color: transparent !important;
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
html[data-theme="dark"] table.dataTable.stripe tbody tr.odd {
  background-color: var(--valiant-soft) !important;
}

html[data-theme="dark"] table.dataTable tbody tr:hover,
html[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: var(--valiant-soft-2) !important;
}

html[data-theme="dark"] table.dataTable tbody td,
html[data-theme="dark"] table.dataTable tbody th,
html[data-theme="dark"] .table tbody td {
  background-color: transparent;
  color: var(--valiant-ink);
  border-color: var(--valiant-line);
}

html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] .table thead th {
  background-color: var(--valiant-soft-2);
  color: var(--valiant-muted);
  border-color: var(--valiant-line);
}

html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-body p,
html[data-theme="dark"] .modal-body label {
  color: var(--valiant-ink);
}

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

html[data-theme="dark"] .bg-light {
  background-color: var(--valiant-soft) !important;
}

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

html[data-theme="dark"] [style*="#cff4fc"],
html[data-theme="dark"] [style*="#e0f7fa"],
html[data-theme="dark"] [style*="#cffafe"] {
  background: var(--valiant-blue-soft) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-blue) !important;
}

/* ==========================================================================
   Modales y paneles de reporte de operaciones / asignación (modo oscuro)
   ========================================================================== */
html[data-theme="dark"] #modalCapturaCantidad .avance-captura-modal,
html[data-theme="dark"] #modalCapturaCantidad .avance-captura-body,
html[data-theme="dark"] #modalCapturaCantidad .modal-content {
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border-color: var(--valiant-line) !important;
}

html[data-theme="dark"] #modalCapturaCantidad .avance-captura-header {
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border-bottom: 1px solid var(--valiant-line) !important;
}

html[data-theme="dark"] #modalCapturaCantidad .avance-captura-header .modal-title,
html[data-theme="dark"] #modalCapturaCantidad .avance-captura-header .close {
  color: var(--valiant-ink) !important;
}

html[data-theme="dark"] #modalCapturaCantidad .avance-captura-resumen {
  background: var(--valiant-soft) !important;
  border-color: var(--valiant-line) !important;
  border-left-color: var(--valiant-blue) !important;
}

html[data-theme="dark"] #modalCapturaCantidad .avance-captura-resumen > div,
html[data-theme="dark"] #modalCapturaCantidad .avance-captura-resumen > div + div {
  border-color: var(--valiant-line) !important;
}

html[data-theme="dark"] #modalCapturaCantidad .text-muted,
html[data-theme="dark"] #modalCapturaCantidad .avance-material-stock,
html[data-theme="dark"] #modalCapturaCantidad small {
  color: var(--valiant-muted) !important;
}

html[data-theme="dark"] #modalCapturaCantidad h6,
html[data-theme="dark"] #modalCapturaCantidad .font-weight-bold,
html[data-theme="dark"] #modalCapturaCantidad label,
html[data-theme="dark"] #modalCapturaCantidad strong,
html[data-theme="dark"] #modalCapturaCantidad .avance-captura-resumen .font-weight-bold {
  color: var(--valiant-ink) !important;
}

html[data-theme="dark"] #modalCapturaCantidad .avance-materiales-list,
html[data-theme="dark"] #modalCapturaCantidad .avance-personal-list,
html[data-theme="dark"] #modalCapturaCantidad .avance-materiales-toolbar {
  background: var(--valiant-soft) !important;
  border-color: var(--valiant-line) !important;
}

html[data-theme="dark"] #modalCapturaCantidad .avance-materiales-list > div {
  background: var(--valiant-card) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
}

html[data-theme="dark"] #modalCapturaCantidad .avance-materiales-list > div:hover {
  border-color: var(--valiant-blue) !important;
}

html[data-theme="dark"] #modalCapturaCantidad input,
html[data-theme="dark"] #modalCapturaCantidad textarea,
html[data-theme="dark"] #modalCapturaCantidad select {
  background: var(--valiant-input-bg, var(--valiant-soft)) !important;
  color: var(--valiant-ink) !important;
  border-color: var(--valiant-line) !important;
}

html[data-theme="dark"] #modalCapturaCantidad .avance-captura-footer {
  background: var(--valiant-card) !important;
  border-top: 1px solid var(--valiant-line) !important;
}

html[data-theme="dark"] #modalCapturaCantidad .btn-light,
html[data-theme="dark"] #modalCapturaCantidad .avance-btn-cancelar,
html[data-theme="dark"] #modalCapturaCantidad .btn-outline-primary,
html[data-theme="dark"] #modalCapturaCantidad .btn-white {
  background: var(--valiant-soft-2) !important;
  color: var(--valiant-ink-soft) !important;
  border-color: var(--valiant-line) !important;
}

html[data-theme="dark"] #modalCapturaCantidad .avance-material-captured strong {
  color: var(--valiant-blue) !important;
}

/* Panel «Filtrar» (flotante) */
html[data-theme="dark"] .direct-filter-panel,
html[data-theme="dark"] .direct-filter-panel-inner {
  background: var(--valiant-card) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .direct-filter-panel::before {
  background: var(--valiant-card) !important;
  border-color: var(--valiant-line) !important;
}

html[data-theme="dark"] .direct-filter-panel-head strong {
  color: var(--valiant-blue) !important;
}

html[data-theme="dark"] .direct-filter-panel-head button,
html[data-theme="dark"] .direct-filter-panel .direct-period-navigation button,
html[data-theme="dark"] .direct-filter-panel .assignment-secondary-actions button,
html[data-theme="dark"] .direct-filter-panel .direct-period-switch button,
html[data-theme="dark"] .direct-filter-panel .direct-view-switch button {
  background: var(--valiant-soft-2) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-ink-soft) !important;
}

html[data-theme="dark"] .direct-filter-panel .direct-view-switch button.active,
html[data-theme="dark"] .direct-filter-panel .direct-period-switch button.active {
  background: var(--valiant-btn-primary-bg) !important;
  border-color: var(--valiant-btn-primary-bg) !important;
  color: #fff !important;
}

html[data-theme="dark"] .direct-filter-panel .direct-period-label {
  color: var(--valiant-ink) !important;
}

html[data-theme="dark"] .direct-filter-panel .assignment-secondary-actions {
  border-color: var(--valiant-line) !important;
}

/* Modales con tarjeta de vidrio (asignación de personal) */
html[data-theme="dark"] .glass-card,
html[data-theme="dark"] .modal-content.glass-card {
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border-color: var(--valiant-line) !important;
  backdrop-filter: none !important;
}

html[data-theme="dark"] .modal-header.bg-primary,
html[data-theme="dark"] .modal-header.bg-primary.text-white {
  background: var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
  border-bottom: 1px solid var(--valiant-line) !important;
}

html[data-theme="dark"] .modal-header.bg-primary .modal-title,
html[data-theme="dark"] .modal-header.bg-primary .close {
  color: var(--valiant-ink) !important;
}

html[data-theme="dark"] .modal-footer {
  background: transparent;
  border-top-color: var(--valiant-line);
}

html[data-theme="dark"] .modal-header {
  border-bottom-color: var(--valiant-line);
}

html[data-theme="dark"] .input-group-text {
  background: var(--valiant-soft-2) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-muted) !important;
}

html[data-theme="dark"] .modal .btn-outline-primary,
html[data-theme="dark"] .modal .btn-outline-secondary {
  background: var(--valiant-soft-2);
  border-color: var(--valiant-line);
  color: var(--valiant-ink-soft);
}

html[data-theme="dark"] .paginate_button.current,
html[data-theme="dark"] .dataTables_paginate .paginate_button.current {
  background: var(--valiant-btn-primary-bg) !important;
  color: #fff !important;
  border-color: var(--valiant-btn-primary-bg) !important;
}

html[data-theme="dark"] #modalCapturaCantidad .avance-personal-list > div,
html[data-theme="dark"] #modalCapturaCantidad .avance-personal-list > * {
  border-color: var(--valiant-line) !important;
  background: var(--valiant-card) !important;
}

/* ==========================================================================
   Hojas de asignación de personal/conceptos (direct-sheet) en modo oscuro
   ========================================================================== */
html[data-theme="dark"] .direct-sheet-backdrop {
  background: hsla(222 40% 4% / 0.62);
}

html[data-theme="dark"] .direct-sheet {
  background: var(--valiant-card) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
  backdrop-filter: none !important;
  box-shadow: 0 -12px 42px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .direct-sheet-drag-handle {
  background: var(--valiant-line) !important;
}

html[data-theme="dark"] .direct-sheet h3,
html[data-theme="dark"] .direct-sheet-head h3 {
  color: var(--valiant-ink) !important;
  font-family: inherit !important;
}

html[data-theme="dark"] .direct-sheet p,
html[data-theme="dark"] .direct-sheet-head p,
html[data-theme="dark"] .direct-person-role,
html[data-theme="dark"] .direct-requirement-detail,
html[data-theme="dark"] .direct-info-item-meta,
html[data-theme="dark"] .direct-confirm-concept-meta {
  color: var(--valiant-muted) !important;
}

html[data-theme="dark"] .direct-sheet .close {
  color: var(--valiant-muted) !important;
  opacity: 1;
  text-shadow: none;
}

html[data-theme="dark"] .direct-person,
html[data-theme="dark"] .direct-requirement-item,
html[data-theme="dark"] .direct-info-item,
html[data-theme="dark"] .direct-confirm-concept,
html[data-theme="dark"] .direct-confirm-concept.dc-confirm {
  background: var(--valiant-soft) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
}

html[data-theme="dark"] .direct-person:hover {
  border-color: var(--valiant-blue) !important;
  background: var(--valiant-soft-2) !important;
}

html[data-theme="dark"] .direct-person-name,
html[data-theme="dark"] .direct-requirement-role,
html[data-theme="dark"] .direct-info-item-name,
html[data-theme="dark"] .direct-info-item.is-person .direct-info-item-key,
html[data-theme="dark"] .direct-confirm-concept-name,
html[data-theme="dark"] .dc-edit-quantity,
html[data-theme="dark"] .direct-confirm-quantity-editor {
  color: var(--valiant-ink) !important;
}

html[data-theme="dark"] .direct-requirement-meta,
html[data-theme="dark"] .direct-info-item-key,
html[data-theme="dark"] .direct-confirm-concept-key {
  color: var(--valiant-blue) !important;
}

html[data-theme="dark"] .dc-period {
  background: var(--valiant-blue-soft) !important;
  border-color: var(--valiant-line) !important;
}

html[data-theme="dark"] .dc-period-title,
html[data-theme="dark"] .dc-period-summary,
html[data-theme="dark"] .direct-confirm-period {
  color: var(--valiant-blue) !important;
}

html[data-theme="dark"] .dc-period-presets {
  background: var(--valiant-soft-2) !important;
  border-color: var(--valiant-line) !important;
}

html[data-theme="dark"] .dc-period-presets button {
  color: var(--valiant-ink-soft) !important;
}

html[data-theme="dark"] .dc-period-presets button.active {
  background: var(--valiant-btn-primary-bg) !important;
  color: #fff !important;
}

html[data-theme="dark"] .dc-period-fields label {
  color: var(--valiant-muted) !important;
}

html[data-theme="dark"] .dc-period-fields input[type="date"],
html[data-theme="dark"] .dc-edit-quantity input,
html[data-theme="dark"] .direct-confirm-quantity-editor input,
html[data-theme="dark"] .dc-qty-cell.is-input input {
  background: var(--valiant-input-bg, var(--valiant-soft)) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
}

html[data-theme="dark"] .dc-type-badge.ordinario { background: var(--valiant-blue-soft) !important; color: var(--valiant-blue) !important; }
html[data-theme="dark"] .dc-type-badge.extraordinario { background: var(--valiant-bad-soft) !important; color: var(--valiant-bad) !important; }
html[data-theme="dark"] .dc-type-badge.aditiva { background: rgba(167, 139, 250, 0.16) !important; color: hsl(263 85% 78%) !important; }
html[data-theme="dark"] .dc-alt-key,
html[data-theme="dark"] .direct-confirm-quantity-summary span {
  background: var(--valiant-soft-2) !important;
  color: var(--valiant-muted) !important;
}
html[data-theme="dark"] .direct-confirm-quantity-summary span.pending {
  background: var(--valiant-warn-soft) !important;
  color: var(--valiant-warn) !important;
}

html[data-theme="dark"] .dc-lock-banner {
  background: var(--valiant-ok-soft) !important;
  border-color: var(--valiant-line) !important;
  border-left-color: var(--valiant-ok) !important;
  color: var(--valiant-ok) !important;
}

html[data-theme="dark"] .dc-lock-banner button {
  background: var(--valiant-soft-2) !important;
  color: var(--valiant-ok) !important;
  border-color: var(--valiant-ok) !important;
}

html[data-theme="dark"] .direct-info-item.is-person .dc-person-avatar {
  background: var(--valiant-ok-soft) !important;
  color: var(--valiant-ok) !important;
}

html[data-theme="dark"] .direct-info-remove-button,
html[data-theme="dark"] .direct-info-remove-all-button {
  background: var(--valiant-bad-soft) !important;
  border-color: transparent !important;
  color: var(--valiant-bad) !important;
}

html[data-theme="dark"] .direct-info-edit-button {
  background: var(--valiant-blue-soft) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-blue) !important;
}

html[data-theme="dark"] .dc-info-count {
  color: var(--valiant-ink-soft) !important;
}

html[data-theme="dark"] .direct-sheet-actions button {
  background: var(--valiant-soft-2) !important;
  border: 1px solid var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-family: inherit !important;
}

html[data-theme="dark"] .direct-sheet-actions .btn-primary {
  background: var(--valiant-btn-primary-bg) !important;
  border-color: var(--valiant-btn-primary-bg) !important;
  color: #fff !important;
}

html[data-theme="dark"] .direct-sheet-actions .btn-primary:hover {
  background: var(--valiant-btn-primary-hover) !important;
}

html[data-theme="dark"] .direct-confirm-remove,
html[data-theme="dark"] .direct-confirm-remove:hover {
  color: var(--valiant-bad) !important;
}

/* ==========================================================================
   Vistas de obra en modo oscuro: filas de nivel, indicadores y botones de fila
   (avanceDiario/seleccionarAvancePro, estimaciones/seleccionarAvance,
   solicitudMateriales/seleccionarInsumos)
   ========================================================================== */
html[data-theme="dark"] .obra-ops .nivel-card,
html[data-theme="dark"] .obra-ops .tree-toggle.nivel-card {
  background: var(--valiant-card) !important;
  border: 1px solid var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
}

html[data-theme="dark"] .obra-ops .nivel-card:hover,
html[data-theme="dark"] .obra-ops .nivel-card.active {
  background: var(--valiant-soft-2) !important;
}

html[data-theme="dark"] .obra-ops .nivel-card strong,
html[data-theme="dark"] .obra-ops .nivel-card span:not(.badge):not(.nx-tag),
html[data-theme="dark"] .obra-ops .nivel-card .text-dark {
  color: var(--valiant-ink);
}

html[data-theme="dark"] .obra-ops .nivel-card .caret-icon.text-primary {
  color: var(--valiant-blue) !important;
}

html[data-theme="dark"] .obra-ops .indicator-column.tiene-pendientes {
  background: var(--valiant-warn-soft);
  box-shadow: inset 0 0 0 1px var(--valiant-warn);
}

html[data-theme="dark"] .obra-ops .indicator-column.tiene-pendientes .indicator-val {
  color: var(--valiant-warn);
}

html[data-theme="dark"] .obra-ops .indicator-column.tiene-pendientes:hover {
  background: var(--valiant-warn-soft);
}

html[data-theme="dark"] .obra-ops .btn-warning {
  background: var(--valiant-warn-soft) !important;
  border: 1px solid var(--valiant-warn) !important;
  color: var(--valiant-warn) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .obra-ops .btn-warning:hover {
  background: var(--valiant-warn) !important;
  color: var(--valiant-card) !important;
}

html[data-theme="dark"] .obra-ops .btn-icon-circle {
  background: var(--valiant-soft-2) !important;
  border: 1px solid var(--valiant-line) !important;
  color: var(--valiant-ink-soft) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .obra-ops .btn-icon-circle:hover {
  background: var(--valiant-soft) !important;
  color: var(--valiant-ink) !important;
}

html[data-theme="dark"] .obra-ops .catalog-percent-control {
  background: var(--valiant-soft-2) !important;
  border: 1px solid var(--valiant-line) !important;
}

html[data-theme="dark"] .active-requisition-banner .draft-btn-secondary {
  background: var(--valiant-soft-2) !important;
  border: 1px solid var(--valiant-line) !important;
  color: var(--valiant-ink) !important;
}

html[data-theme="dark"] .active-requisition-banner .draft-btn-secondary:hover {
  background: var(--valiant-soft) !important;
}

/* El fondo del body debe seguir el tema: si la vista es corta se veía una franja blanca bajo el contenido. */
html[data-theme="dark"],
html[data-theme="dark"] body:has(.obra-ops) {
  background-color: var(--valiant-bg) !important;
}

html[data-theme="dark"] .obra-ops .db-action-btn:hover,
html[data-theme="dark"] .obra-ops .db-action-btn:focus-visible {
  background-color: var(--valiant-soft-2) !important;
  border-color: var(--valiant-line-strong) !important;
  color: var(--valiant-ink) !important;
}

/* ==========================================================================
   Modal «Datos de la obra y contrato» (estimaciones/partials/modal_datos_obra.php)
   y pestañas de modales de evidencia en modo oscuro
   ========================================================================== */
html[data-theme="dark"] .modal-datos-obra .nav-pills {
  background: var(--valiant-soft) !important;
  border-bottom-color: var(--valiant-line) !important;
}

html[data-theme="dark"] .modal-datos-obra .nav-pills .nav-link {
  background: var(--valiant-card) !important;
  border-color: var(--valiant-line) !important;
  color: var(--valiant-muted) !important;
}

html[data-theme="dark"] .modal-datos-obra .nav-pills .nav-link:hover:not(.active) {
  background: var(--valiant-soft-2) !important;
  color: var(--valiant-ink) !important;
}

html[data-theme="dark"] .modal-datos-obra .nav-pills .nav-link.active {
  background: var(--valiant-card) !important;
  border-color: var(--valiant-line) !important;
  border-bottom-color: var(--valiant-card) !important;
  color: var(--valiant-blue) !important;
}

html[data-theme="dark"] .modal-datos-obra .tab-content,
html[data-theme="dark"] .modal-datos-obra .modal-footer,
html[data-theme="dark"] .modal-datos-obra .firmas-table-container {
  background: var(--valiant-card) !important;
  border-color: var(--valiant-line) !important;
}

html[data-theme="dark"] .modal-datos-obra .alert-info-soft {
  background: var(--valiant-blue-soft) !important;
  color: var(--valiant-ink-soft) !important;
  border-color: var(--valiant-line) !important;
  border-left-color: var(--valiant-blue) !important;
}

html[data-theme="dark"] .modal-datos-obra .alert-info-soft strong,
html[data-theme="dark"] .modal-datos-obra .alert-info-soft span {
  color: var(--valiant-ink-soft) !important;
}

html[data-theme="dark"] .modal-datos-obra .form-group label,
html[data-theme="dark"] .modal-datos-obra .modal-footer .text-muted {
  color: var(--valiant-muted) !important;
}

html[data-theme="dark"] .modal-datos-obra .metric-card {
  background: var(--valiant-soft-2) !important;
  border-color: var(--valiant-line) !important;
}

html[data-theme="dark"] .modal-datos-obra .metric-card label,
html[data-theme="dark"] .modal-datos-obra .section-divider {
  color: var(--valiant-blue) !important;
}

html[data-theme="dark"] .modal-datos-obra .form-control,
html[data-theme="dark"] .modal-datos-obra .custom-select {
  border-color: var(--valiant-line-strong) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .modal-datos-obra .input-group-text {
  background: var(--valiant-soft-2) !important;
  border-color: var(--valiant-line-strong) !important;
  color: var(--valiant-blue) !important;
}

html[data-theme="dark"] .firmas-table th {
  background-color: var(--valiant-soft-2) !important;
  color: var(--valiant-ink-soft) !important;
}

html[data-theme="dark"] .firmas-table td {
  color: var(--valiant-ink) !important;
}

html[data-theme="dark"] .firmas-table tr:hover {
  background-color: var(--valiant-soft-2) !important;
}

html[data-theme="dark"] .firmas-logo-preview {
  background: var(--valiant-soft-2) !important;
  border-color: var(--valiant-line) !important;
}

html[data-theme="dark"] .modal .nav-tabs {
  border-bottom-color: var(--valiant-line) !important;
}

html[data-theme="dark"] .modal .nav-tabs .nav-link {
  color: var(--valiant-blue);
}

html[data-theme="dark"] .modal .nav-tabs .nav-link.active {
  background: var(--valiant-card) !important;
  border-color: var(--valiant-line) var(--valiant-line) var(--valiant-card) !important;
  color: var(--valiant-ink) !important;
}

html[data-theme="dark"] .modal .nav-tabs .nav-link:hover:not(.active) {
  border-color: var(--valiant-line) !important;
  background: var(--valiant-soft-2);
}