/* ============================================================
   views.css — OVERRIDES POR-VISTA (gateados, temas oscuro/claro)
   ------------------------------------------------------------
   Corrige colores fijos de los CSS por-vista que no encajan en
   un componente genérico. Agrupado por "lotes" según la vista:
     Lote 1: loans/list, finance/payment-send, loans/detail
     Lote 2: loans/validation-id, system/system-parameter,
             reports/application-pending
     Lote 3: marketing, configurations-seller, homologation, login
   (Lote 4 — SweetAlert2 + inline overrides — vive en vendor.css;
    los .status-* de validation-id viven en badges.css.)
   Clásico intacto (todo bajo html.theme-cg).
   ============================================================ */

/* ----- Lote 1 ----- */
/* iconos de validación (loans/list, finance/payment-send) */
html.theme-cg .checkmark-icon { background: var(--accent); color: #fff; }
html.theme-cg .unchecked-icon { border-color: var(--border); }
/* modal de confirmación (loans/detail) */
html.theme-cg .modal-content { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
/* .btn-accept / .btn-cancel mantienen verde/rojo (legibles en ambos) */

/* ----- Lote 2 ----- */
/* validation-id: tabla/mensajes/toasts pastel -> solo OSCURO (en claro lucen bien) */
html.theme-cg.theme-dark #validation-table thead tr.title th { background: var(--surface-2); color: var(--text); border-bottom-color: var(--border); }
html.theme-cg.theme-dark #validation-table tbody tr:nth-child(even) td { background: var(--surface-2); }
html.theme-cg.theme-dark #validation-table tbody tr:hover td { background: rgba(99, 102, 241, .10); }
html.theme-cg.theme-dark #validation-messages .error,  html.theme-cg.theme-dark #modal-messages .error  { background: rgba(239, 68, 68, .15); border-color: rgba(239, 68, 68, .4); color: #f87171; }
html.theme-cg.theme-dark #validation-messages .notice, html.theme-cg.theme-dark #modal-messages .notice { background: rgba(34, 197, 94, .15); border-color: rgba(34, 197, 94, .4); color: #4ade80; }
html.theme-cg.theme-dark #validation-messages .warning,html.theme-cg.theme-dark #modal-messages .warning{ background: rgba(245, 158, 11, .15); border-color: rgba(245, 158, 11, .4); color: #fbbf24; }
html.theme-cg.theme-dark .toast-success { background: rgba(34, 197, 94, .15); color: #4ade80; }
html.theme-cg.theme-dark .toast-error   { background: rgba(239, 68, 68, .15); color: #f87171; }
html.theme-cg.theme-dark .toast-warning { background: rgba(245, 158, 11, .15); color: #fbbf24; }

/* system-parameter: tarjetas de estado de BD (fondo blanco) */
html.theme-cg #database-status .database-status { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* application-pending: cuerpo del modal blanco + botón color-danger */
html.theme-cg .modal > .body { background: var(--surface); color: var(--text); border-radius: var(--radius-sm); }
html.theme-cg .color-danger { background-color: var(--surface); }
/* (roulette-config se deja intacto: widget de imagen/SVG con switch propio) */

/* ----- Lote 3 ----- */
/* marketing: modal body blanco + X de cierre */
html.theme-cg .modal-body { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
html.theme-cg .modal-close::before,
html.theme-cg .modal-close::after { background-color: var(--text); }
/* marketing/.table-manager (azul claro) -> solo OSCURO */
html.theme-cg.theme-dark .table-manager .payload { background-color: var(--surface-2); }
html.theme-cg.theme-dark .table-manager thead > tr { background-color: var(--surface-2); }
/* configurations-seller: lista de usuarios (gris) -> solo OSCURO (chip .badge azul se mantiene) */
html.theme-cg.theme-dark #select-users { background-color: var(--surface-2); }
/* homologation-detail: icono de subir imagen */
html.theme-cg .add-image-button > .svg-icon { color: var(--muted); }
/* login (main/info, recover/forgotten-password): contenedores */
html.theme-cg a[login] { border-color: var(--border); color: var(--text); }
html.theme-cg a[login]:hover { background-color: var(--surface-3); border-color: var(--accent); }
html.theme-cg #captcha { border-color: var(--border); }
/* switches on/off (.check-container salmón/verde) y overlays (#modal/#background rgba) se dejan */