/* ============================================================================
   SiRID · ESTILOS GLOBALES CENTRALIZADOS (Directiva de Almacenamiento
   Centralizado · Punto 13). Archivo maestro que gobierna la identidad visual
   del ERP bajo un MODO CLARO FIJO DE GRADO BANCARIO. Normaliza las alturas
   premium (42px) de TODOS los controles por herencia nativa de cascada y
   aplasta cualquier clase oscura en duro del HTML mediante !important.
   Se enlaza al final de los estilos en includes/header.php para garantizar
   la precedencia de cascada sobre Bootstrap/Tailwind/DataTables.
   ========================================================================== */

/* ============================================================================
   1. TOKENS CORPORATIVOS (Modo Claro Fijo · Grado Bancario)
   Espejo exacto del tailwind.config inyectado en includes/header.php.
   ========================================================================== */

/* ============================================================================
   1a. TOASTS · NOTIFICACIONES SAAS SUAVES (Fondo Claro + Letra Fuerte)
   Elimina el fondo oscuro tosco y aplica la receta clara con !important.
   ========================================================================== */
#toast-container {
  width: 420px !important;
  max-width: 92vw !important;
}
.sirid-toast-item {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  border-width: 1px !important;
  border-style: solid !important;
  font-size: 0.8125rem !important;
  line-height: 1.45 !important;
}
/* Éxito: fondo verde ultra-suave + texto/ícono verde esmeralda fuerte */
.sirid-toast-item.bg-ok-bg,
.sirid-toast-item.bg-\[\#ECFDF5\] {
  background-color: var(--ok-bg) !important;
  color: var(--ok) !important;
  border-color: rgba(5, 150, 105, 0.3) !important;
}
/* Error: fondo rojo ultra-suave + texto/ícono rojo fuerte */
.sirid-toast-item.bg-danger-bg,
.sirid-toast-item.bg-\[\#FEF2F2\] {
  background-color: var(--danger-bg) !important;
  color: var(--danger) !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
}
/* Advertencia: fondo ámbar suave + texto/ícono oro/ámbar fuerte */
.sirid-toast-item.bg-warning-bg,
.sirid-toast-item.bg-\[\#FFFBEB\] {
  background-color: var(--warning-bg) !important;
  color: var(--warning) !important;
  border-color: rgba(217, 119, 6, 0.3) !important;
}
/* Neutralización absoluta de cualquier fondo oscuro residual en toasts */
.sirid-toast-item[class*="bg-[#1E2026]"],
.sirid-toast-item[class*="bg-[#1e2026]"],
.sirid-toast-item[class*="bg-black"] {
  background-color: var(--panel) !important;
  color: var(--texto) !important;
}

/* ============================================================================
   1b. FRONTERAS SUTILES DEL CHASIS (Sidebar + Header)
   Líneas divisorias limpias en --borde-medio (#E2E4E8) para que las zonas de
   navegación no se confundan con el área de trabajo. El lienzo central
   (#contenido_principal_sirid) conserva el fondo base #FAFBFC.
   ========================================================================== */
#sidebarSirid {
  border-right: 1px solid var(--borde-medio) !important;
  background-color: var(--sidebar) !important;
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.02);
}
/* Fondo satinado sutilmente diferenciado para el sidebar (estructura el chasis) */
#sidebarSirid {
  background-image: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%) !important;
}
#sidebarSirid nav {
  background-color: transparent !important;
}
/* Barra superior (header interno) con línea divisoria inferior nítida.
   Altura ampliada y padding vertical balanceado para dar aire a los
   componentes; se adapta de forma fluida y responsiva. */
header.sticky,
header[class*="sticky"] {
  border-bottom: 1px solid var(--borde-medio) !important;
  background-color: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  min-height: 64px !important;
}
header.sticky > div,
header[class*="sticky"] > div {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}
/* Cintillo del contribuyente seleccionado: ancho liberado, sin recortes */
.cintillo-contribuyente {
  max-width: 100% !important;
  width: auto !important;
}
.cintillo-contribuyente-texto {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: 420px !important;
}
/* Lienzo central: fondo base nítido, despega del sidebar/header */
#contenido_principal_sirid {
  background-color: var(--contenido-bg) !important;
}
:root {
  --contenido-bg: #f3f5f6;
  --base: #fafbfc;
  --panel: #ffffff;
  --sidebar: #ffffff;
  --borde: #dedede;
  --borde-medio: #e2e4e8;
  --borde-fuerte: #d1d5db;
  --texto: #0a0b0d;
  --texto-sec: #40434a;
  --muted: #7a818c;
  --texto-light: #a0a7b2;
  --primary: #2563eb;
  --primary-light: #3b82f6;
  --primary-dark: #1d4ed8;
  --primary-bg: #eff6ff;
  --primary-hover: #1d4ed8;
  --ok: #059669;
  --ok-bg: #ecfdf5;
  --ok-light: #10b981;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-light: #ef4444;
  --warning: #d97706;
  --warning-bg: #fffbeb;
  --info: #2563eb;
  --info-bg: #eff6ff;
  --accent: #8b5cf6;
  --accent-bg: #f5f3ff;
  --accent-light: #a78bfa;
  --table-stripe: #f9fafb;
  --table-hover: #f3f4f6;
  --table-border: #f0f0f2;
  --hover-bg: #f3f4f6;
  --active-bg: #e5e7eb;
  --selected-bg: #eff6ff;
  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --input-border: #e2e4e8;
  --disabled-bg: #f3f4f6;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-button: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.15);

  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
}

/* ============================================================================
   2. LIENZO BASE · MODO CLARO FIJO (aplasta cualquier fondo oscuro en duro)
   ========================================================================== */
html,
body {
  background-color: var(--base) !important;
  color: var(--texto) !important;
}

body {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 0.875rem; /* 14px */
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Neutralización absoluta de clases oscuras en duro del HTML */
.bg-\[\#0b0e11\],
.bg-\[\#0B0E11\],
.bg-\[\#14151a\],
.bg-\[\#14151A\],
.bg-\[\#161a1e\],
.bg-\[\#1e2026\],
.bg-\[\#1E2026\],
.bg-\[\#2b3139\],
.bg-\[\#2B3139\],
.bg-\[\#0f1115\],
.bg-\[\#0F1115\],
.bg-\[\#181a20\],
.bg-\[\#181A20\],
.bg-\[\#101318\],
.bg-\[\#101318\] {
  background-color: var(--panel) !important;
}

/* Tipografía exclusiva para Tablas, Números, Montos y RIFs */
.table,
.text-numeric,
.badge-numero,
input[type="number"] {
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   3. SCROLLBARS CLAROS
   ========================================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--base);
}
::-webkit-scrollbar-thumb {
  background: var(--borde-fuerte);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* ============================================================================
   4. INPUTS · ALTURA CORPORATIVA 42px (INMUTABLE) + ESTILO CLARO
   ========================================================================== */
select,
input[type="text"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
textarea,
.form-control,
.form-select {
  height: 42px !important;
  min-height: 42px !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: var(--radius) !important;
  color: var(--texto) !important;
  box-shadow: var(--shadow-xs) !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
textarea {
  height: auto !important;
  min-height: 42px !important;
}
select:focus,
input:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-focus) !important;
  outline: none !important;
}
select:disabled,
input:disabled,
textarea:disabled,
.form-control:disabled,
.form-select:disabled {
  background-color: var(--disabled-bg) !important;
  color: var(--muted) !important;
  cursor: not-allowed;
}
input::placeholder,
textarea::placeholder {
  color: var(--texto-light) !important;
}

input[type="file"]::file-selector-button {
  background: var(--primary-bg);
  color: var(--primary);
  border: 1px solid var(--borde-medio);
  border-radius: var(--radius);
  padding: 6px 12px;
  margin-right: 10px;
  cursor: pointer;
  font-weight: 600;
}
input[type="file"]::file-selector-button:hover {
  background: var(--selected-bg);
}

/* ============================================================================
   5. TABLAS HTML · ENCABEZADOS Y CELDAS COMPACTOS (Modo Claro)
   ========================================================================== */
thead th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-left: 8px;
  padding-right: 8px;
  white-space: nowrap;
  background-color: var(--table-stripe) !important;
  color: var(--texto-sec) !important;
  border-bottom: 1px solid var(--table-border) !important;
}
tbody td {
  font-size: 0.75rem;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-left: 8px;
  padding-right: 8px;
  color: var(--texto) !important;
  border-bottom: 1px solid var(--table-border) !important;
}
tbody tr:nth-child(even) {
  background-color: var(--table-stripe) !important;
}
tbody tr:hover {
  background-color: var(--table-hover) !important;
}

/* ============================================================================
   6. DATATABLES.NET · GRID CLARO NÍTIDO
   ========================================================================== */
table.dataTable {
  font-size: 0.75rem;
  color: var(--texto) !important;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--borde) !important;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background-color: var(--panel) !important;
}
table.dataTable thead th,
table.dataTable tbody td {
  padding: 4px 8px !important;
  font-size: 0.75rem;
  color: var(--texto) !important;
  background-color: transparent !important;
}
table.dataTable thead th {
  background-color: var(--table-stripe) !important;
  color: var(--texto-sec) !important;
  border-bottom: 1px solid var(--table-border) !important;
}
table.dataTable tbody tr {
  background-color: var(--panel) !important;
}
table.dataTable tbody tr:nth-child(even) {
  background-color: var(--table-stripe) !important;
}
table.dataTable tbody tr:hover {
  background-color: var(--table-hover) !important;
}
table.dataTable tbody tr.selected {
  background-color: var(--selected-bg) !important;
  color: var(--texto) !important;
}
table.dataTable tbody tr.selected td {
  color: var(--texto) !important;
}
table.dataTable tbody td {
  border-bottom: 1px solid var(--table-border) !important;
}
table.dataTable tbody tr:last-child td {
  border-bottom: none !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  margin: 2px 0 4px;
  font-size: 0.75rem;
  color: var(--texto-sec) !important;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  padding: 2px 6px;
  font-size: 0.75rem;
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: var(--radius) !important;
  color: var(--texto) !important;
}
.dataTables_wrapper .dataTables_info {
  font-size: 0.6875rem;
  padding-top: 4px;
  color: var(--muted) !important;
}
.dataTables_wrapper .dataTables_paginate {
  font-size: 0.6875rem;
  padding-top: 4px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 1px 8px;
  color: var(--texto-sec) !important;
  border: 1px solid var(--borde) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--panel) !important;
  margin: 0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--hover-bg) !important;
  color: var(--primary) !important;
  border-color: var(--borde-medio) !important;
}

/* ============================================================================
   7. PANELES · TARJETAS · SOMBRAS TRIDIMENSIONALES
   ========================================================================== */
.bg-panel,
.bg-card,
.card,
.panel {
  background-color: var(--panel) !important;
  color: var(--texto) !important;
}
.bg-base {
  background-color: var(--input-bg) !important;
}
.bg-sidebar {
  background-color: var(--sidebar) !important;
}
.bg-card-bg {
  background-color: var(--card-bg) !important;
}

/* Tarjetas con sombra tridimensional y bordes redondeados modernos.
   Borde perimetral nítido en --borde-medio (#E2E4E8) + sombra exacta de la
   receta corporativa para despegar las tarjetas del fondo blanco. */
.card,
.bg-panel,
.bg-card,
.shadow-card,
[class*="card"],
[class*="panel"] {
  border: 1px solid var(--borde-medio) !important;
  border-radius: var(--radius-lg) !important;
  /* box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.05),
    0 1px 3px rgba(0, 0, 0, 0.04) !important; */
  box-shadow: none !important;
}
.card:hover,
.bg-card:hover,
[class*="card"]:hover {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
/* Contenedores de recaudación / KPIs / bloques de gráficos: elevación nítida */
[class*="kpi"],
[class*="recaud"],
[class*="presupuesto"],
[class*="grafico"],
[class*="chart"],
[class*="mora"] {
  border: 1px solid var(--borde-medio) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.05),
    0 1px 3px rgba(0, 0, 0, 0.04) !important;
  background-color: var(--panel) !important;
}

/* Bordes */
.border-borde {
  border-color: var(--borde) !important;
}
.border-borde-medio {
  border-color: var(--borde-medio) !important;
}
.border-borde-fuerte {
  border-color: var(--borde-fuerte) !important;
}

/* ============================================================================
   8. TEXTO · COLORES SEMÁNTICOS
   ========================================================================== */
.text-texto {
  color: var(--texto) !important;
}
.text-texto-sec {
  color: var(--texto-sec) !important;
}
.text-muted {
  color: var(--muted) !important;
}
.text-texto-light {
  color: var(--texto-light) !important;
}
.text-primary {
  color: var(--primary) !important;
}
.text-ok {
  color: var(--ok) !important;
}
.text-danger {
  color: var(--danger) !important;
}
.text-warning {
  color: var(--warning) !important;
}
.text-info {
  color: var(--info) !important;
}
.text-accent {
  color: var(--accent) !important;
}

/* ============================================================================
   9. BADGES / ALERTAS FUNCIONALES DE ESTATUS (Modo Claro)
   ========================================================================== */
.bg-ok,
.bg-ok\/15,
.bg-ok\/10 {
  background-color: var(--ok-bg) !important;
  color: var(--ok) !important;
}
.bg-danger,
.bg-danger\/15,
.bg-danger\/10 {
  background-color: var(--danger-bg) !important;
  color: var(--danger) !important;
}
.bg-warning,
.bg-warning\/15,
.bg-warning\/10 {
  background-color: var(--warning-bg) !important;
  color: var(--warning) !important;
}
.bg-info,
.bg-info\/15,
.bg-info\/10,
.bg-primary,
.bg-primary\/15,
.bg-primary\/10 {
  background-color: var(--info-bg) !important;
  color: var(--info) !important;
}
.bg-accent,
.bg-accent\/15,
.bg-accent\/10 {
  background-color: var(--accent-bg) !important;
  color: var(--accent) !important;
}
.bg-primary-bg {
  background-color: var(--primary-bg) !important;
}
.bg-ok-bg {
  background-color: var(--ok-bg) !important;
}
.bg-danger-bg {
  background-color: var(--danger-bg) !important;
}
.bg-warning-bg {
  background-color: var(--warning-bg) !important;
}
.bg-info-bg {
  background-color: var(--info-bg) !important;
}
.bg-accent-bg {
  background-color: var(--accent-bg) !important;
}

/* ============================================================================
   10. BOTONES · ESTILO CLARO PREMIUM
   ========================================================================== */
.btn,
button.btn,
a.btn {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-button) !important;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.1s ease;
}
.btn:hover {
  box-shadow: var(--shadow-card) !important;
}
.btn:active {
  transform: translateY(1px);
}

/* ============================================================================
   11. MODALES · SOMBRA TRIDIMENSIONAL PROFUNDA
   ========================================================================== */
.modal-content,
.modal,
[class*="modal"] {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-modal) !important;
  border: 1px solid var(--borde) !important;
  background-color: var(--panel) !important;
  color: var(--texto) !important;
}

/* ============================================================================
   12. DROPDOWNS / MENÚS DESPLEGABLES
   ========================================================================== */
.dropdown-menu,
[class*="dropdown"] {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-dropdown) !important;
  border: 1px solid var(--borde) !important;
  background-color: var(--panel) !important;
  color: var(--texto) !important;
}

/* ============================================================================
   12.1 MENÚ DE ACCIONES (3 PUNTOS VERTICALES + DROPDOWN) · HISTORIAL M4
   Menú compacto y responsivo que reemplaza los botones sueltos de la columna
   'Acciones' del historial de liquidaciones de Actividades Económicas.
   ========================================================================== */
.sirid-dd {
  position: relative;
  display: inline-block;
}
.sirid-dd-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius, 8px);
  border: 1px solid var(--borde, #2b3139);
  background-color: var(--panel, #1e2026);
  color: var(--muted, #848e9c);
  cursor: pointer;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}
.sirid-dd-toggle:hover {
  color: var(--accent, #f3ba2f);
  border-color: var(--accent, #f3ba2f);
  background-color: rgba(243, 186, 47, 0.08);
}
.sirid-dd-menu {
  /* position:fixed lo fija el JS (posicionarMenuAcciones) para que el menú
     nunca sea recortado por el overflow-x-auto del contenedor de la tabla.
     El valor inicial absolute es solo un fallback previo al primer anclaje. */
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 9999;
  min-width: 220px;
  max-width: 260px;
  padding: 6px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--borde, #2b3139);
  background-color: var(--panel, #1e2026);
  box-shadow: var(--shadow-dropdown, 0 8px 32px rgba(0, 0, 0, 0.35));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s;
}
.sirid-dd.abierto .sirid-dd-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sirid-dd-head {
  padding: 6px 10px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #848e9c);
  border-bottom: 1px solid var(--borde, #2b3139);
  margin-bottom: 4px;
}
.sirid-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius, 8px);
  background: transparent;
  color: var(--texto, #eaecef);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    color 0.12s ease;
}
.sirid-dd-item:hover {
  background-color: rgba(243, 186, 47, 0.1);
  color: var(--accent, #f3ba2f);
}
.sirid-dd-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--muted, #848e9c);
}
.sirid-dd-item:disabled:hover {
  background-color: transparent;
  color: var(--muted, #848e9c);
}
/* Ítem informativo NO accionable (ej. '✅ FIS- Pagada'): se muestra como
   estado firme dentro del menú, sin hover ni cursor de acción. */
.sirid-dd-info {
  cursor: default;
  color: var(--ok, #0ecb81);
  font-weight: 600;
}
.sirid-dd-info:hover {
  background-color: transparent;
  color: var(--ok, #0ecb81);
}
.sirid-dd-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  font-size: 13px;
  flex-shrink: 0;
}
/* Responsivo: en pantallas muy pequeñas el menú se ancla a la izquierda para
   no desbordar el viewport cuando la fila queda pegada al borde derecho. */
@media (max-width: 480px) {
  .sirid-dd-menu {
    right: auto;
    left: 0;
    min-width: 200px;
  }
}

/* ============================================================================
   12.2 MAPA LEAFLET DE GEORREFERENCIACIÓN (Solicitud de Licencia M3.1)
   Leaflet exige que el contenedor del mapa tenga una ALTURA explícita; sin
   ella el mapa se renderiza con altura 0 y no es visible. Se fija aquí la
   altura del contenedor '#mapa-licencia' de views/solicitar_licencia_view.php.
   ========================================================================== */
#mapa-licencia {
  height: 340px;
  width: 100%;
  border-radius: 0.75rem;
  z-index: 1;
  background-color: var(--base, #0b0e11);
}

/* ============================================================================
   13. ACORDEÓN MULTIANUAL DE VEHÍCULOS (Modo Claro)
   ========================================================================== */
.accordion,
.accordion-item,
[class*="accordion"] {
  background-color: var(--panel) !important;
  color: var(--texto) !important;
  border: 1px solid var(--borde) !important;
  border-radius: var(--radius-md) !important;
}
.accordion-button,
[class*="accordion-button"] {
  background-color: var(--table-stripe) !important;
  color: var(--texto) !important;
  border-radius: var(--radius-md) !important;
}
.accordion-button:not(.collapsed) {
  background-color: var(--selected-bg) !important;
  color: var(--primary) !important;
  box-shadow: none !important;
}

/* ============================================================================
   14. CORRECCIÓN DE FLECHA EN SECTORES (preservado)
   ========================================================================== */
#sector-display {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A818C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.1rem center;
  background-size: 16px 16px;
  padding-right: 2.5rem !important;
  color: var(--texto) !important;
  border-radius: var(--radius) !important;
}
#sector-display .shrink-0 {
  display: none;
}

/* ============================================================================
   15. NEUTRALIZACIÓN DE ESTILOS OSCUROS RESIDUALES (DataTables/Bootstrap)
   ========================================================================== */
.dataTables_wrapper {
  color: var(--texto) !important;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-focus) !important;
}

/* ============================================================================
   16. NORMALIZACIÓN MICRO-TIPOGRÁFICA DE PLACEHOLDERS (Todo el ERP)
   Textos de guía atenuados, cursivos y profesionales, diferenciados del texto
   real digitado. Cobertura multi-navegador completa (WebKit/Blink, Firefox,
   IE/Edge legacy) para el entorno SPA.
   ========================================================================== */
input::placeholder,
textarea::placeholder,
select::placeholder,
.form-control::placeholder,
.form-select::placeholder {
  font-style: italic !important;
  color: var(--texto-light) !important;
  opacity: 0.65 !important;
}
/* WebKit / Blink (Chrome, Safari, Edge moderno) */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder,
.form-control::-webkit-input-placeholder,
.form-select::-webkit-input-placeholder {
  font-style: italic !important;
  color: var(--texto-light) !important;
  opacity: 0.65 !important;
}
/* Firefox (legacy) */
input::-moz-placeholder,
textarea::-moz-placeholder,
select::-moz-placeholder,
.form-control::-moz-placeholder,
.form-select::-moz-placeholder {
  font-style: italic !important;
  color: var(--texto-light) !important;
  opacity: 0.65 !important;
}
/* IE / Edge legacy */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
select:-ms-input-placeholder,
.form-control:-ms-input-placeholder,
.form-select:-ms-input-placeholder {
  font-style: italic !important;
  color: var(--texto-light) !important;
  opacity: 0.65 !important;
}
/* Firefox moderno (pseudo-elemento estándar) */
input::placeholder,
textarea::placeholder,
select::placeholder,
.form-control::placeholder,
.form-select::placeholder {
  font-style: italic !important;
  color: var(--texto-light) !important;
  opacity: 0.65 !important;
}