/* ============================================================
   vendor.css — LIBRERÍAS de terceros + overrides inline
   ------------------------------------------------------------
   Tematiza componentes que no controlamos directamente:
     - jQuery UI (diálogos, autocomplete, menú, tooltip).
     - Datepicker de jQuery UI (solo OSCURO).
     - SweetAlert2 (cargado por CDN).
     - Overrides quirúrgicos de estilos INLINE fijos (solo OSCURO,
       con !important para ganar al atributo style sin tocar las
       plantillas ni el clásico).
   ============================================================ */

/* ----- jQuery UI (diálogos, autocomplete, tooltip) ----- */
html.theme-cg .ui-widget-content,
html.theme-cg .ui-dialog,
html.theme-cg .ui-autocomplete,
html.theme-cg .ui-menu,
html.theme-cg .ui-tooltip {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
html.theme-cg .ui-dialog .ui-dialog-titlebar { background: var(--surface-2); color: var(--text); border: 0; border-bottom: 1px solid var(--border); }
html.theme-cg .ui-dialog .ui-dialog-content { color: var(--text); }
html.theme-cg .ui-menu .ui-menu-item-wrapper { color: var(--text); border-radius: 6px; }
html.theme-cg .ui-menu .ui-menu-item-wrapper.ui-state-active,
html.theme-cg .ui-menu .ui-state-active { background: var(--accent); border-color: transparent; color: #fff; }
html.theme-cg .ui-widget-header { background: var(--surface-2); color: var(--text); border-color: var(--border); }

/* ----- Datepicker (TODOS los temas nuevos, vía tokens) -----
   Antes solo estaba el oscuro con colores fijos; ahora usa tokens, así
   claro/oscuro/ultra y el acento personalizado quedan consistentes. */
html.theme-cg .ui-datepicker { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); color: var(--text); width: auto; z-index: 9999; }
html.theme-cg .ui-datepicker .ui-datepicker-header { background: transparent; border: 0; color: var(--text); }
html.theme-cg .ui-datepicker .ui-datepicker-title select { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 7px; }
html.theme-cg .ui-datepicker th { color: var(--muted); }
html.theme-cg .ui-datepicker td a, html.theme-cg .ui-datepicker td span { color: var(--text); border-radius: 8px; }
html.theme-cg .ui-datepicker td a.ui-state-default { background: var(--surface-2); border: 0; }
html.theme-cg .ui-datepicker td a.ui-state-hover { background: var(--surface-3); color: var(--text); }
html.theme-cg .ui-datepicker td a.ui-state-active,
html.theme-cg .ui-datepicker td a.ui-state-highlight { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }

/* ----- SweetAlert2 (cargado por loadSweetAlert2 desde CDN) ----- */
html.theme-cg .swal2-popup { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
html.theme-cg .swal2-title,
html.theme-cg .swal2-html-container,
html.theme-cg .swal2-html-container .h1,
html.theme-cg .swal2-html-container h1 { color: var(--text); }
html.theme-cg .swal2-close { color: var(--muted); }
html.theme-cg .swal2-close:hover { color: var(--text); }

/* ----- Overrides quirúrgicos de estilos INLINE (solo OSCURO, !important) ----- */
html.theme-cg.theme-dark [style*="#f0f4f8"] { background-color: var(--surface-2) !important; border-color: var(--border) !important; }
html.theme-cg.theme-dark [style*="#1a3a5c"] { color: #cdd6ec !important; }
html.theme-cg.theme-dark [style*="#888"],
html.theme-cg.theme-dark [style*="#999"] { color: var(--muted) !important; }
html.theme-cg.theme-dark [style*="#ca001b"] { color: #f87171 !important; }
html.theme-cg.theme-dark [style*="solid #ccc"] { border-color: var(--border) !important; }