/* ============================================================================
   IDÓNEA · Tema oscuro — hojas de componente de wwwroot/css
   ============================================================================
   Hay componentes que no viven dentro de ninguna vista: el panel de la guía
   «¿Cómo funciona?», el selector de cargos, la tarjeta. Su CSS está en un archivo
   propio y el generador por vista no lo mira, así que en oscuro salían con sus
   blancos.

   Se genera con ARCHIVOS_EJEMPLO/generar-tema-oscuro-vistas.py — no se edita a mano.
   ============================================================================ */

/* ══ idonea-datatable.css ══ */
html[data-theme="dark"] { --idt-primary: var(--r); --idt-primary-dk: var(--r); --idt-primary-soft: var(--rt); --idt-primary-border: var(--l2); --idt-ink: var(--t2); --idt-ink-50: var(--t3); --idt-ink-30: var(--t3); --idt-border: var(--l2); --idt-surface: var(--s1); --idt-blue: var(--in); --idt-blue-soft: var(--int); --idt-blue-border: var(--inb); --idt-red: var(--er); --idt-red-soft: var(--ert); --idt-red-border: var(--erb); --idt-green: var(--ok); --idt-green-soft: var(--okt); --idt-green-border: var(--okb); --idt-purple: #C99BFF; --idt-purple-soft: rgba(168, 85, 247, .13); --idt-purple-border: var(--l2); --idt-orange: var(--wa); --idt-orange-soft: var(--wat); }
html[data-theme="dark"] .idt-table-card { background-color: var(--s2); }
html[data-theme="dark"] .idt-table tbody td { border-bottom-color: var(--l2) !important; }
html[data-theme="dark"] .idt-table tbody tr:hover td { background-color: var(--rt) !important; }
html[data-theme="dark"] .idt-btn-toggle { border-color: var(--erb); }
html[data-theme="dark"] .idt-badge-success { background-color: var(--okt); border-color: var(--okb); color: var(--ok); }
html[data-theme="dark"] .idt-badge-danger { background-color: var(--rt); border-color: var(--l2); color: var(--rl); }
html[data-theme="dark"] .idt-badge-warning { background-color: var(--wat); border-color: var(--wab); color: var(--wa); }
html[data-theme="dark"] .idt-badge-info { background-color: var(--int); border-color: var(--inb); color: var(--in); }
html[data-theme="dark"] .idt-badge-gray { background-color: var(--s3); border-color: var(--l2); color: var(--t3); }
html[data-theme="dark"] .idt-table-card .dataTables_filter input,
html[data-theme="dark"] .idt-table-card .dt-search input { border-color: var(--l2) !important; }
html[data-theme="dark"] .idt-table-card .dataTables_length select,
html[data-theme="dark"] .idt-table-card .dt-length select { border-color: var(--l2) !important; }
html[data-theme="dark"] .idt-table-card .dataTables_info,
html[data-theme="dark"] .idt-table-card .dt-info { color: var(--t3) !important; }
html[data-theme="dark"] .idt-table-card .dt-paging .page-link,
html[data-theme="dark"] .idt-table-card .dataTables_paginate .page-link { border-color: var(--l2) !important; background-color: var(--s2) !important; }
html[data-theme="dark"] .idt-table-card .dt-paging .page-link:hover,
html[data-theme="dark"] .idt-table-card .dataTables_paginate .page-link:hover { background-color: var(--rt) !important; }
html[data-theme="dark"] .idt-table-card .dt-paging .page-item.disabled .page-link,
html[data-theme="dark"] .idt-table-card .dataTables_paginate .page-item.disabled .page-link { color: var(--t3) !important; background-color: var(--s1) !important; border-color: var(--l2) !important; }
html[data-theme="dark"] .idt-tag-blue { background-color: var(--s1); color: var(--in); }
html[data-theme="dark"] .idt-tag-purple { background-color: var(--s1); color: #C99BFF; }
html[data-theme="dark"] .idt-tag-green { background-color: var(--s1); color: var(--ok); }

/* ══ StyleDataTable.css ══ */
html[data-theme="dark"] .btn-pagina { background-color: var(--s1); border-color: var(--l2); color: var(--t2); }
html[data-theme="dark"] .btn-pagina:hover { background-color: var(--s3); }

/* ══ idonea-guia.css ══ */
html[data-theme="dark"] .gu-fondo { background-color: var(--s3); }
html[data-theme="dark"] .gu-panel { background-color: var(--s2); }
html[data-theme="dark"] .gu-cab { border-bottom-color: var(--l2); }
html[data-theme="dark"] .gu-eyebrow { color: var(--rl); }
html[data-theme="dark"] .gu-cab h3 { color: var(--t1); }
html[data-theme="dark"] .gu-x { border-color: var(--l2); background-color: var(--s2); color: var(--t3); }
html[data-theme="dark"] .gu-x:hover { color: var(--rl); }
html[data-theme="dark"] .gu-lede { color: var(--t3); background-color: var(--s1); border-bottom-color: var(--l2); }
html[data-theme="dark"] .gu-tabs { border-bottom-color: var(--l2); }
html[data-theme="dark"] .gu-tab { border-color: var(--l2); background-color: var(--s2); color: var(--t3); }
html[data-theme="dark"] .gu-tab:hover { color: var(--rl); }
html[data-theme="dark"] .gu-sec h4 { color: var(--t1); }
html[data-theme="dark"] .gu-sec p { color: var(--t3); }
html[data-theme="dark"] .gu-sec b { color: var(--t2); }
html[data-theme="dark"] .gu-sec li { color: var(--t3); }
html[data-theme="dark"] .gu-ej { background-color: var(--s1); border-color: var(--l2); color: var(--t2); }
html[data-theme="dark"] .gu-ej b { color: var(--t2); }
html[data-theme="dark"] .gu-ej__t { color: var(--in); }
html[data-theme="dark"] .gu-ej pre { background-color: var(--s2); border-color: var(--l2); color: var(--t2); }
html[data-theme="dark"] .gu-ojo { background-color: var(--s1); border-color: var(--wab); color: var(--wa); }
html[data-theme="dark"] .gu-ojo i { color: var(--wa); }
html[data-theme="dark"] .gu-gana { background-color: var(--s1); border-color: var(--okb); color: var(--t2); }
html[data-theme="dark"] .gu-gana i { color: var(--ok); }
html[data-theme="dark"] .gu-boton { border-top-color: var(--l2); }
html[data-theme="dark"] .gu-boton > i { background-color: var(--s1); color: var(--rl); }
html[data-theme="dark"] .gu-boton > div > b { color: var(--t2); }
html[data-theme="dark"] .gu-boton > div > span { color: var(--t3); }
html[data-theme="dark"] .gu-boton em { color: var(--t3); }
html[data-theme="dark"] .gu-boton em::before { color: var(--t3); }
html[data-theme="dark"] .gu-pie { border-top-color: var(--l2); color: var(--t3); background-color: var(--s1); }

/* ══ idonea-cargos.css ══ */
html[data-theme="dark"] .cg-caja { border-color: var(--l2); background-color: var(--s2); }
html[data-theme="dark"] .cg-op { border-bottom-color: var(--l2); color: var(--t2); }
html[data-theme="dark"] .cg-op:hover,
html[data-theme="dark"] .cg-op.is-marcado { background-color: var(--s1); color: var(--rl); }
html[data-theme="dark"] .cg-op em { color: var(--t3); background-color: var(--s1); border-color: var(--l2); }
html[data-theme="dark"] .cg-nuevo { color: var(--wa); background-color: var(--s1); border-top-color: var(--wab); }
html[data-theme="dark"] .cg-nada { color: var(--t3); }

/* ══ StyleCard.css ══ */

/* ══ StyleTarjetForm.css ══ */
html[data-theme="dark"] body { background-color: var(--int); }
html[data-theme="dark"] .delantera .grupo .label { color: var(--t3); }
html[data-theme="dark"] .trasera .datos #firma .firma p { color: var(--t1); }
html[data-theme="dark"] .trasera .datos #ccv .ccv { background-color: var(--s2); color: var(--t1); }
html[data-theme="dark"] .formulario-tarjeta { background-color: var(--s2); }
html[data-theme="dark"] .formulario-tarjeta label { color: var(--t3); }
html[data-theme="dark"] .formulario-tarjeta input,
html[data-theme="dark"] .formulario-tarjeta select,
html[data-theme="dark"] .btn-enviar { border-color: var(--l2); }
html[data-theme="dark"] .formulario-tarjeta input:hover,
html[data-theme="dark"] .formulario-tarjeta select:hover { border-color: var(--inb); }
html[data-theme="dark"] .formulario-tarjeta .grupo-select:hover i { color: var(--in); }

/* ══ dropdownStyle.css ══ */
html[data-theme="dark"] .dropdown-menu { background-color: var(--s2); }
html[data-theme="dark"] .dropdown-item { color: var(--t2); }
html[data-theme="dark"] .dropdown-item:hover { background-color: var(--s1); color: var(--in); }
html[data-theme="dark"] .dropdown-item.text-danger { color: var(--rl); }
html[data-theme="dark"] .dropdown-item.text-danger:hover { background-color: var(--s1); color: var(--rl); }
html[data-theme="dark"] .dropdown-item.text-success { color: var(--ok); }
html[data-theme="dark"] .dropdown-item.text-success:hover { background-color: var(--s1); color: var(--ok); }
html[data-theme="dark"] .custom-table-responsive th { background-color: var(--s1); }

/* ══ site.css ══ */