/* ==========================================================================
   IDS TECH — MODULOS BRIDGE CSS
   Puente universal de compatibilidad visual: traduce el vocabulario
   legacy de las vistas internas al Sistema de Diseño IDS Tech.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HEADER CARDS (Encabezados de vistas / módulos)
   -------------------------------------------------------------------------- */
/* Consolidado: .header-card / .header-title / .header-subtitle viven ahora
   en homeids-ui.css (única fuente de verdad). Esta hoja tenía su propia
   versión con !important que le ganaba a las definiciones locales de
   index.html, administracion.html y talento.html, y de paso dejaba sin
   efecto real ~40 estilos inline de color de acento en index.html. No
   redefinir acá: si hace falta un ajuste, va en homeids-ui.css. */

/* --------------------------------------------------------------------------
   2. FORM SECTIONS & CONTENEDORES INTERNOS
   -------------------------------------------------------------------------- */
.form-section,
.content-card,
.panel-card {
  background: var(--surface-raised, #ffffff) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: var(--card-radius) !important;
  padding: 1.75rem 2rem !important;
  box-shadow: var(--depth-1, 0 1px 3px rgba(0, 0, 0, 0.05)) !important;
  margin-bottom: 1.75rem !important;
  transition: border-color var(--motion-fast, 0.15s) ease, box-shadow var(--motion-fast, 0.15s) ease;
}

html.dark-theme .form-section,
html.dark-theme .content-card,
html.dark-theme .panel-card {
  background: var(--surface-raised, #1e293b) !important;
  border-color: var(--border, #334155) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Modificador para un recuadro informativo dentro de un .form-section (ej.
   "Para qué sirve esto" en Fichaje de Visitas) -- antes se armaba con
   background/border inline (#eff6ff/#bfdbfe, fuera de la paleta roja/azul de
   marca) que además .form-section pisaba con su propio !important de fondo y
   borde, dejando el recuadro sin ningún color distintivo (hallazgo
   16/10/2026, auditoría general). El selector compuesto (dos clases) le gana
   en especificidad a la regla base de arriba sin depender del orden de carga.
   Mezcla de --secondary para quedar dentro de la paleta de marca. */
.form-section.form-section--info {
  background: color-mix(in oklab, var(--secondary) 7%, var(--card-bg, #ffffff)) !important;
  border-color: color-mix(in oklab, var(--secondary) 35%, var(--border, #e2e8f0)) !important;
}

html.dark-theme .form-section.form-section--info {
  background: color-mix(in oklab, var(--secondary) 18%, var(--card-bg, #1e293b)) !important;
  border-color: color-mix(in oklab, var(--secondary) 45%, var(--border, #334155)) !important;
}

.section-header {
  font-family: var(--font-heading-bold, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 1.125rem !important;
  color: var(--secondary, #021e40) !important;
  margin-bottom: 1.25rem !important;
  padding-left: 0.75rem !important;
  border-left: 4px solid var(--primary, #bc2422) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

html.dark-theme .section-header {
  color: #f8fafc !important;
  border-left-color: var(--primary, #bc2422) !important;
}

/* --------------------------------------------------------------------------
   3. INPUTS, SELECTS & TEXTAREAS (Solución al doble borde y fondo)
   -------------------------------------------------------------------------- */
.form-group label,
label {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  color: var(--text-dark, #1e293b) !important;
  margin-bottom: 0.35rem !important;
  display: block;
}

html.dark-theme .form-group label,
html.dark-theme label {
  color: #cbd5e1 !important;
}

/* Regla base de inputs normales */
input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  padding: 0.65rem 0.875rem !important;
  border: 1px solid var(--border, #cbd5e1) !important;
  border-radius: var(--card-radius-sm) !important;
  font-size: 0.875rem !important;
  color: var(--text-dark, #0f172a) !important;
  background-color: var(--surface-sunken, #f8fafc) !important;
  transition: border-color var(--motion-fast, 0.15s) ease, box-shadow var(--motion-fast, 0.15s) ease;
  width: 100%;
  box-sizing: border-box;
}

input:focus,
select:focus,
textarea:focus {
  /* El foco usa --secondary (azul), no --primary (rojo): el rojo de marca es
     identidad/acción primaria, no estado de foco -- y tiene que distinguirse
     del hover, que ya usa tonos neutros (hallazgo 16/10/2026, auditoría
     general). Mismo --focus-ring que ya usa el resto de la capa IDS Tech en
     homeids-ui.css, para no duplicar el valor acá. */
  outline: none !important;
  border-color: var(--secondary, #1e42ac) !important;
  background-color: #ffffff !important;
  box-shadow: var(--focus-ring) !important;
}

html.dark-theme input[type="text"],
html.dark-theme input[type="email"],
html.dark-theme input[type="date"],
html.dark-theme input[type="number"],
html.dark-theme input[type="password"],
html.dark-theme input[type="search"],
html.dark-theme select,
html.dark-theme textarea {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html.dark-theme input:focus,
html.dark-theme select:focus,
html.dark-theme textarea:focus {
  background-color: #1e293b !important;
  border-color: var(--secondary, #1e42ac) !important;
  box-shadow: var(--focus-ring) !important;
}

/* Desactivar estilos duplicados para inputs que viven dentro de contenedores .input-tech */
.input-tech input,
.search-box input,
.filter-box input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: inherit !important;
}


/* --------------------------------------------------------------------------
   4. BOTONES DEL SISTEMA (Reemplazo de gradientes desalineados y base .btn)
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  padding: 0.55rem 1.15rem !important;
  border-radius: var(--card-radius-sm) !important;
  background: var(--surface-sunken, #f1f5f9) !important;
  color: var(--secondary, #021e40) !important;
  border: 1px solid var(--border, #cbd5e1) !important;
  cursor: pointer !important;
  transition: background-color var(--motion-fast, 0.15s) ease, color var(--motion-fast, 0.15s) ease,
              border-color var(--motion-fast, 0.15s) ease, transform var(--motion-fast, 0.15s) ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.btn:hover {
  background: #e2e8f0 !important;
  color: #021e40 !important;
  border-color: #94a3b8 !important;
  transform: translateY(-1px) !important;
}

html.dark-theme .btn {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

html.dark-theme .btn:hover {
  background: #334155 !important;
  border-color: #475569 !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary, #bc2422) 0%, #991b1b 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 12px rgba(188, 36, 34, 0.3) !important;
}

.btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(188, 36, 34, 0.45) !important;
  filter: brightness(1.06) !important;
}

.btn-secondary {
  background: var(--surface-sunken, #f1f5f9) !important;
  color: var(--secondary, #021e40) !important;
  border: 1px solid var(--border, #cbd5e1) !important;
}

.btn-secondary:hover {
  background: #e2e8f0 !important;
  color: #021e40 !important;
}

html.dark-theme .btn-secondary {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

html.dark-theme .btn-secondary:hover {
  background: #334155 !important;
}

.btn-outline {
  background: transparent !important;
  color: var(--primary, #bc2422) !important;
  border: 1px solid var(--primary, #bc2422) !important;
}

.btn-outline:hover {
  background: rgba(188, 36, 34, 0.08) !important;
}

.btn-danger {
  background: #ef4444 !important;
  color: #ffffff !important;
  border: 1px solid #dc2626 !important;
}

.btn-danger:hover {
  background: #dc2626 !important;
}

/* --------------------------------------------------------------------------
   7. SEGMENTED CONTROL TABS (Licitaciones y sub-navegaciones)
   -------------------------------------------------------------------------- */
#licitaciones_tabs_wrapper,
.segmented-tabs-wrapper {
  display: inline-flex !important;
  background: var(--surface-sunken, #f1f5f9) !important;
  padding: 3px !important;
  border-radius: var(--card-radius-sm) !important;
  border: 1px solid var(--border, #cbd5e1) !important;
  gap: 3px !important;
}

html.dark-theme #licitaciones_tabs_wrapper,
html.dark-theme .segmented-tabs-wrapper {
  background: #0b1120 !important;
  border-color: #334155 !important;
}

#btn_lic_tab_activas,
#btn_lic_tab_descartadas,
#btn_lic_tab_mis {
  background: transparent !important;
  color: var(--text-muted, #64748b) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.45rem 1rem !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  transform: none !important;
}

#btn_lic_tab_activas:hover,
#btn_lic_tab_descartadas:hover,
#btn_lic_tab_mis:hover {
  color: var(--text-dark, #0f172a) !important;
  background: rgba(0, 0, 0, 0.05) !important;
  transform: none !important;
}

html.dark-theme #btn_lic_tab_activas:hover,
html.dark-theme #btn_lic_tab_descartadas:hover,
html.dark-theme #btn_lic_tab_mis:hover {
  color: #f8fafc !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

#btn_lic_tab_activas.btn-primary,
#btn_lic_tab_descartadas.btn-primary,
#btn_lic_tab_mis.btn-primary {
  background: var(--surface-raised, #ffffff) !important;
  color: var(--secondary, #021e40) !important;
  border: 1px solid var(--border, #cbd5e1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

html.dark-theme #btn_lic_tab_activas.btn-primary,
html.dark-theme #btn_lic_tab_descartadas.btn-primary,
html.dark-theme #btn_lic_tab_mis.btn-primary {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}


/* --------------------------------------------------------------------------
   5. TABLAS & METRIC CARDS (Normalización de tablas internas)
   -------------------------------------------------------------------------- */
table.table-tech,
.table-data,
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

table.table-tech th,
.table-data th,
.data-table th {
  background: var(--surface-sunken, #f8fafc);
  color: var(--text-muted, #64748b);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
  text-align: left;
}

html.dark-theme table.table-tech th,
html.dark-theme .table-data th,
html.dark-theme .data-table th {
  background: #0f172a !important;
  color: #94a3b8 !important;
  border-bottom-color: #334155 !important;
}

table.table-tech td,
.table-data td,
.data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
  color: var(--text-dark, #1e293b);
}

html.dark-theme table.table-tech td,
html.dark-theme .table-data td,
html.dark-theme .data-table td {
  border-bottom-color: #334155 !important;
  color: #f1f5f9 !important;
}

/* --------------------------------------------------------------------------
   6. STAT BOXES & CARDS DE MÓDULOS
   -------------------------------------------------------------------------- */
.stat-card,
.kpi-tile,
.metric-box {
  background: var(--surface-raised, #ffffff) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: var(--card-radius) !important;
  padding: 1.25rem 1.5rem !important;
  box-shadow: var(--depth-1, 0 1px 3px rgba(0, 0, 0, 0.05)) !important;
}

html.dark-theme .stat-card,
html.dark-theme .kpi-tile,
html.dark-theme .metric-box {
  background: var(--surface-raised, #1e293b) !important;
  border-color: var(--border, #334155) !important;
}


/* --------------------------------------------------------------------------
   8. MODAL OVERLAYS & CENTERING (Licitaciones y Modales de Módulos)
   -------------------------------------------------------------------------- */
.modal-overlay,
#licitacion_detalle_overlay,
#informe_estructurado_overlay,
#modal_trazabilidad_datos {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  background: rgba(2, 30, 64, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.5rem !important;
  box-sizing: border-box !important;
}

/* Ocultar explícitamente cuando están cerrados con display: none */
.modal-overlay[style*="display: none"],
.modal-overlay[style*="display:none"],
#licitacion_detalle_overlay[style*="display: none"],
#licitacion_detalle_overlay[style*="display:none"],
#informe_estructurado_overlay[style*="display: none"],
#informe_estructurado_overlay[style*="display:none"],
#modal_trazabilidad_datos[style*="display: none"],
#modal_trazabilidad_datos[style*="display:none"] {
  display: none !important;
}

/* Mostrar cuando se abren con display: flex o block */
.modal-overlay[style*="display: flex"],
.modal-overlay[style*="display:flex"],
.modal-overlay[style*="display: block"],
.modal-overlay[style*="display:block"],
#licitacion_detalle_overlay[style*="display: flex"],
#informe_estructurado_overlay[style*="display: flex"],
#modal_trazabilidad_datos[style*="display: flex"] {
  display: flex !important;
}

.modal-overlay .modal-content,
#licitacion_detalle_overlay .modal-content,
#informe_estructurado_overlay .modal-content {
  background: var(--surface-raised, #ffffff) !important;
  color: var(--text-dark, #0f172a) !important;
  border: 1px solid var(--border, #cbd5e1) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55) !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  padding: 2rem !important;
  width: 100% !important;
  max-width: 680px !important;
  margin: auto !important;
  position: relative !important;
}

html.dark-theme .modal-overlay .modal-content,
html.dark-theme #licitacion_detalle_overlay .modal-content,
html.dark-theme #informe_estructurado_overlay .modal-content {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85) !important;
}


/* Inputs con ícono a la izquierda (evita solapamiento del texto con la lupa) */
#traza_search_input,
#crm_busqueda_input,
#sidebarSearchInput,
.input-with-left-icon input,
.search-box input {
  padding-left: 2.4rem !important;
}


/* --------------------------------------------------------------------------
   9. NAVEGACIÓN POR PESTAÑAS INTERNAS (.tab-button)
   -------------------------------------------------------------------------- */
.tab-button,
button.tab-button {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  padding: 0.6rem 1.15rem !important;
  background: transparent !important;
  color: var(--text-muted, #64748b) !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  position: relative !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color var(--motion-fast, 0.18s) var(--ease-tech, ease),
              background-color var(--motion-fast, 0.18s) var(--ease-tech, ease),
              border-color var(--motion-fast, 0.18s) var(--ease-tech, ease) !important;
}

.tab-button:hover:not(.active):not(.is-active) {
  color: var(--text-dark, #0f172a) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border-bottom-color: var(--border, #cbd5e1) !important;
  transform: none !important;
}

.tab-button:focus-visible {
  /* Mismo criterio: foco en --secondary (azul), no --primary (hallazgo
     16/10/2026, auditoría general). */
  outline: 2px solid var(--secondary, #1e42ac) !important;
  outline-offset: 2px !important;
}

.tab-button.active,
.tab-button.is-active,
.tab-button[aria-selected="true"] {
  color: var(--primary, #bc2422) !important;
  font-weight: 700 !important;
  background: rgba(188, 36, 34, 0.05) !important;
  border-bottom: 3px solid var(--primary, #bc2422) !important;
  box-shadow: none !important;
  transform: none !important;
}

html.dark-theme .tab-button,
html.dark-theme button.tab-button {
  color: #94a3b8 !important;
}

html.dark-theme .tab-button:hover:not(.active):not(.is-active) {
  color: #f8fafc !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-bottom-color: #475569 !important;
}

html.dark-theme .tab-button.active,
html.dark-theme .tab-button.is-active {
  /* antes #f87171 (coral, fuera de paleta): var(--primary-bright) es el
     mismo rojo de marca aclarado para dark mode que ya usa homeids-ui.css. */
  color: var(--primary-bright, var(--primary, #bc2422)) !important;
  background: var(--primary-tint, rgba(165, 19, 23, 0.14)) !important;
  border-bottom-color: var(--primary, #bc2422) !important;
}

/* --------------------------------------------------------------------------
   10. UNIFICACIÓN DE SISTEMAS DE INPUTS (.premium-input, .input-tech)
   -------------------------------------------------------------------------- */
.premium-input {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  width: 100% !important;
  background: var(--surface-raised, #ffffff) !important;
  color: var(--text-dark, #0f172a) !important;
  border: 1px solid var(--border, #cbd5e1) !important;
  border-radius: var(--card-radius-sm) !important;
  padding: 0.65rem 0.875rem !important;
  font-size: 0.875rem !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.premium-input:focus {
  /* Mismo criterio que input:focus más arriba: foco en --secondary (azul),
     no --primary (hallazgo 16/10/2026, auditoría general). */
  border-color: var(--secondary, #1e42ac) !important;
  box-shadow: var(--focus-ring) !important;
  outline: none !important;
}

html.dark-theme .premium-input {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}