/* ============================================================
   navbar-ucg.css — navbar de usuario (ux-*) y tema claro/oscuro del cascarón.
   Tokens en :root a propósito: dropdowns y modales cuelgan del body.
   ============================================================ */

:root {
    --ux-surface: #ffffff;
    --ux-surface-2: #f8fafc;
    --ux-border: #e4e4e7;
    --ux-ink: #1f2937;
    --ux-sub: #374151;
    --ux-muted: #6b7280;
    --ux-brand: #ff6600;
    --ux-brand-ink: #ff6600;
    --ux-brand-bg: #fff3eb;
    --ux-brand-bd: rgba(255, 102, 0, .25);
    --ux-on-brand: #ffffff;
    --ux-danger-ink: #b91c1c;
    --ux-danger-bg: #fef2f2;
    --ux-hover: #f1f5f9;
    --ux-shadow: 0 12px 32px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06);
    --ux-radius: 10px;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --ux-surface: #111827;
    --ux-surface-2: #172033;
    --ux-border: #2a3547;
    --ux-ink: #e5e7eb;
    --ux-sub: #cbd5e1;
    --ux-muted: #9ca3af;
    --ux-brand: #ff6600;
    --ux-brand-ink: #ffa366;
    --ux-brand-bg: rgba(255, 102, 0, .16);
    --ux-brand-bd: rgba(255, 102, 0, .45);
    --ux-danger-ink: #fca5a5;
    --ux-danger-bg: rgba(220, 38, 38, .16);
    --ux-hover: #1b2638;
    --ux-shadow: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);

    /* Design system ce-* */
    --ce-ink: #e5e7eb;
    --ce-sub: #cbd5e1;
    --ce-muted: #9ca3af;
    --ce-border: #2a3547;
    --ce-bg: #172033;
    --ce-surface: #111827;
    --ce-brand-600: #ff8533;
    --ce-brand-bg: rgba(255, 102, 0, .16);
    --ce-brand-bd: rgba(255, 102, 0, .45);

    /* Tokens legacy del :root de index.html */
    --ink: #e5e7eb;
    --muted: #9ca3af;
    --line: #2a3547;
    --brand-bg: rgba(255, 102, 0, .16);
    --brand-border: rgba(255, 102, 0, .45);
    --brand-600: #ff8533;

    /* MOPHY / Bootstrap */
    --bs-body-bg: #0b1220;
    --bs-body-bg-rgb: 11, 18, 32;
    --bs-body-color: #cbd5e1;
    --bs-border-color: #2a3547;
    --bs-border-color-translucent: rgba(255, 255, 255, .12);
    --bs-link-color: #ff8533;
    --bs-link-hover-color: #ffa366;
    --headerbg: #111827;
    --nav-headbg: #111827;
    --sidebar-bg: #111827;
}

/* ---------- Barra de acciones del navbar ---------- */
.ux-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.header-right.ux-nav, .ux-nav { align-items: center; gap: 10px; }
.ux-nav .ux-nav-item { height: 100%; display: flex; align-items: center; position: relative; }

.ux-i { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ux-i--xl { width: 36px; height: 36px; stroke-width: 1.5; }
.ux-i--chev { width: 16px; height: 16px; color: var(--ux-muted); transition: transform .18s ease; }

.ux-nav .ux-iconbtn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; cursor: pointer;
    border: 1px solid var(--ux-border); border-radius: var(--ux-radius);
    background: var(--ux-surface); color: var(--ux-sub);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ux-nav .ux-iconbtn:hover { background: var(--ux-hover); color: var(--ux-ink); }
.ux-nav .ux-iconbtn:focus-visible, .ux-nav .ux-user:focus-visible, .ux-nav .ux-item:focus-visible, .ux-nav .ux-noti:focus-visible, .ux-nav .ux-notif__pie:focus-visible {
    outline: 2px solid var(--ux-brand); outline-offset: 2px;
}
.ux-nav .ux-iconbtn[aria-expanded="true"] { border-color: var(--ux-brand-bd); color: var(--ux-brand-ink); }
/* Bootstrap pinta una flecha en .dropdown-toggle; estos botones llevan su propio chevron. */
.ux-nav .ux-iconbtn::after, .ux-nav .ux-user::after { display: none; }

.ux-i--luna { display: block; }
.ux-i--sol { display: none; }
html[data-theme="dark"] .ux-i--luna { display: none; }
html[data-theme="dark"] .ux-i--sol { display: block; }

.ux-badge {
    position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--ux-brand); color: var(--ux-on-brand);
    font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
    border: 2px solid var(--ux-surface);
}

.ux-nav .ux-user {
    display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 8px 4px 4px;
    border: 1px solid transparent; border-radius: var(--ux-radius); background: transparent; cursor: pointer;
    color: var(--ux-ink); text-align: left; transition: background .15s ease, border-color .15s ease;
}
.ux-nav .ux-user:hover, .ux-nav .ux-user[aria-expanded="true"] { background: var(--ux-hover); }
.ux-nav .ux-user[aria-expanded="true"] .ux-i--chev { transform: rotate(180deg); }

.ux-avatar {
    position: relative; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ux-brand-bg); color: var(--ux-brand-ink); font-weight: 700; font-size: 15px;
    border: 1px solid var(--ux-border);
}
.ux-avatar::before { content: attr(data-inicial); }
.ux-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ux-avatar--lg { width: 44px; height: 44px; font-size: 18px; }

.ux-user__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ux-user__name { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--ux-ink); }
.ux-user__sub { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ux-muted); font-variant-numeric: tabular-nums; }

/* ---------- Paneles desplegables ---------- */
.ux-nav .ux-menu.dropdown-menu {
    margin-top: 8px; padding: 0; overflow: hidden;
    border: 1px solid var(--ux-border); border-radius: 14px;
    background: var(--ux-surface); color: var(--ux-ink); box-shadow: var(--ux-shadow);
    max-width: calc(100vw - 24px);
}
.ux-nav .ux-perfil.dropdown-menu { width: 340px; padding: 14px 14px 8px; overflow: visible; }
.ux-nav .ux-notif.dropdown-menu { width: 390px; }

.ux-chip {
    display: inline-flex; align-items: center; max-width: 100%; padding: 2px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1.6; text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border: 1px solid var(--ux-border); background: var(--ux-surface-2); color: var(--ux-sub);
}
.ux-chip--brand, .ux-chip--perfil { border-color: var(--ux-brand-bd); background: var(--ux-brand-bg); color: var(--ux-brand-ink); }

/* Cabecera del perfil */
.ux-perfil__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ux-perfil__id { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; flex: 1 1 auto; }
.ux-perfil__nombre { display: flex; align-items: flex-start; gap: 8px; max-width: 100%; }
.ux-perfil__nombre strong { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ux-ink); overflow-wrap: anywhere; }
.ux-perfil__nombre .ce-copy { margin-top: 1px; }

/* Bloque de datos: etiqueta a la izquierda, valor y copiar a la derecha */
.ux-datos { margin: 0 0 8px; padding: 4px 12px; border: 1px solid var(--ux-border); border-radius: var(--ux-radius); background: var(--ux-surface-2); }
.ux-dato { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.ux-dato + .ux-dato { border-top: 1px solid var(--ux-border); }
.ux-dato dt { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; margin: 0; font-size: 13px; font-weight: 500; color: var(--ux-muted); }
.ux-dato dd { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; margin: 0; font-size: 13px; font-weight: 600; color: var(--ux-ink); font-variant-numeric: tabular-nums; }
.ux-dato dd > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Listas de acciones */
.ux-seccion { padding: 8px 6px 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ux-muted); }
.ux-lista { margin: 0; padding: 0; list-style: none; }
.ux-nav .ux-item {
    display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 10px; border-radius: 8px;
    font-size: 14px; font-weight: 400; color: var(--ux-sub); text-decoration: none; cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.ux-nav .ux-item .ux-i { color: var(--ux-muted); }
.ux-nav a.ux-item:hover { background: var(--ux-hover); color: var(--ux-ink); }
.ux-nav a.ux-item:hover .ux-i { color: var(--ux-ink); }
.ux-item__txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-item__nota { font-size: 12px; font-weight: 600; color: var(--ux-brand-ink); }
.ux-nav .ux-item.is-activo { background: var(--ux-brand-bg); color: var(--ux-ink); font-weight: 600; cursor: default; }
.ux-nav .ux-item.is-activo .ux-i { color: var(--ux-brand-ink); }
.ux-sep { height: 1px; margin: 6px -14px; background: var(--ux-border); }
.ux-nav .ux-item--salir, .ux-nav .ux-item--salir .ux-i { color: var(--ux-danger-ink); font-weight: 500; }
.ux-nav a.ux-item--salir:hover { background: var(--ux-danger-bg); color: var(--ux-danger-ink); }
.ux-nav a.ux-item--salir:hover .ux-i { color: var(--ux-danger-ink); }

/* ---------- Panel de notificaciones ---------- */
.ux-notif__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--ux-border); }
.ux-notif__title { font-size: 15px; font-weight: 700; color: var(--ux-ink); }
.ux-notif__list { margin: 0; padding: 0; list-style: none; max-height: 380px; overflow-y: auto; overscroll-behavior: contain; }
.ux-notif__list > li + li { border-top: 1px solid var(--ux-border); }
.ux-nav .ux-noti { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; text-decoration: none; color: inherit; transition: background .12s ease; }
.ux-nav a.ux-noti:hover { background: var(--ux-hover); }
.ux-noti__ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ux-brand-bg); color: var(--ux-brand-ink); }
.ux-noti__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ux-noti__titulo { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--ux-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ux-noti__texto { font-size: 13px; line-height: 1.4; color: var(--ux-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ux-noti__texto:empty { display: none; }
.ux-noti__fecha { font-size: 12px; color: var(--ux-muted); font-variant-numeric: tabular-nums; }
.ux-noti__dot { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--ux-brand); }
.ux-vacio { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 24px; text-align: center; color: var(--ux-muted); }
.ux-vacio .ux-i { opacity: .5; margin-bottom: 6px; }
.ux-vacio strong { font-size: 15px; color: var(--ux-ink); }
.ux-vacio span { font-size: 13px; max-width: 32ch; }
.ux-nav .ux-notif__pie { display: block; padding: 12px 16px; border-top: 1px solid var(--ux-border); background: var(--ux-surface-2); text-align: center; font-size: 13px; font-weight: 600; color: var(--ux-brand-ink); text-decoration: none; }
.ux-nav .ux-notif__pie:hover { background: var(--ux-hover); }

/* ---------- Móvil: solo avatar + chevron ---------- */
@media (max-width: 767px) {
    .ux-user__txt { display: none; }
    .ux-nav { gap: 6px; }
    .ux-nav .ux-nav-item { position: static; }
    .ux-nav .ux-menu.dropdown-menu { position: absolute; right: 8px; left: auto; }
    .ux-nav .ux-perfil.dropdown-menu { width: min(340px, calc(100vw - 16px)); }
    .ux-nav .ux-notif.dropdown-menu { width: min(390px, calc(100vw - 16px)); }
}
@media (prefers-reduced-motion: reduce) {
    .ux-nav .ux-iconbtn, .ux-nav .ux-user, .ux-nav .ux-item, .ux-nav .ux-noti, .ux-i--chev { transition: none; }
}

/* ============================================================
   Tema oscuro del cascarón y componentes compartidos
   ============================================================ */
html[data-theme="dark"] body { background-color: var(--bs-body-bg); color: var(--bs-body-color); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--ux-ink); }
html[data-theme="dark"] .text-black, html[data-theme="dark"] .text-dark { color: var(--ux-ink) !important; }
html[data-theme="dark"] .text-muted { color: var(--ux-muted) !important; }
html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: var(--ux-surface) !important; }
html[data-theme="dark"] hr { border-color: var(--ux-border); opacity: 1; }
html[data-theme="dark"] .header, html[data-theme="dark"] .nav-header { border-bottom: 1px solid var(--ux-border); }
html[data-theme="dark"] .footer { background-color: var(--ux-surface); }
html[data-theme="dark"] .footer .copyright p { color: var(--ux-muted); }

/* Sidebar */
html[data-theme="dark"] .deznav { border-right: 1px solid var(--ux-border); }
html[data-theme="dark"] .deznav .metismenu a, html[data-theme="dark"] .deznav .metismenu ul a { color: var(--ux-sub); }
html[data-theme="dark"] .deznav .metismenu > li > a:hover, html[data-theme="dark"] .deznav .metismenu ul a:hover,
html[data-theme="dark"] .deznav .metismenu ul a:focus, html[data-theme="dark"] .deznav .metismenu ul a.mm-active,
html[data-theme="dark"] .deznav .metismenu > li.mm-active > a { color: var(--ux-brand-ink); }
html[data-theme="dark"] .deznav .metismenu ul { background: transparent; }
html[data-theme="dark"] .menu-search-wrap { background: var(--ux-surface); border-bottom-color: var(--ux-border); }
html[data-theme="dark"] .menu-search-inner { background: var(--ux-surface-2); border-color: var(--ux-border); box-shadow: none; }
html[data-theme="dark"] .menu-search-inner input { color: var(--ux-ink); }
html[data-theme="dark"] .hamburger .line { background: var(--ux-sub); }

/* Cards y paneles */
html[data-theme="dark"] .card {
    --bs-card-bg: #111827;
    --bs-card-cap-bg: #172033;
    --bs-card-border-color: #2a3547;
    background-color: var(--ux-surface); color: var(--bs-body-color); border-color: var(--ux-border);
}
html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer { background-color: var(--ux-surface-2); border-color: var(--ux-border); }
html[data-theme="dark"] .card-title { color: var(--ux-ink); }
html[data-theme="dark"] .page-hero { background: var(--ux-surface); border-color: var(--ux-border); }

/* CodeMirror: su CSS de fabrica es blanco */
html[data-theme="dark"] .CodeMirror { background: var(--ux-surface); color: var(--ux-ink); }
html[data-theme="dark"] .CodeMirror-gutters { background: var(--ux-surface-2); border-right-color: var(--ux-border); }
html[data-theme="dark"] .CodeMirror-linenumber { color: var(--ux-muted); }
html[data-theme="dark"] .CodeMirror-cursor { border-left-color: var(--ux-ink); }
html[data-theme="dark"] .CodeMirror-selected, html[data-theme="dark"] .CodeMirror-focused .CodeMirror-selected { background: rgba(255, 102, 0, .25); }
html[data-theme="dark"] .CodeMirror-line::selection, html[data-theme="dark"] .CodeMirror-line > span::selection { background: rgba(255, 102, 0, .25); }
html[data-theme="dark"] .CodeMirror-activeline-background { background: var(--ux-hover); }
html[data-theme="dark"] .CodeMirror-matchingbracket { color: #86efac !important; }
html[data-theme="dark"] .cm-s-default .cm-keyword { color: var(--ux-brand-ink); }
html[data-theme="dark"] .cm-s-default .cm-string, html[data-theme="dark"] .cm-s-default .cm-string-2 { color: #86efac; }
html[data-theme="dark"] .cm-s-default .cm-number { color: #93c5fd; }
html[data-theme="dark"] .cm-s-default .cm-comment { color: var(--ux-muted); }
html[data-theme="dark"] .cm-s-default .cm-operator, html[data-theme="dark"] .cm-s-default .cm-variable-2 { color: var(--ux-sub); }
html[data-theme="dark"] .cm-s-default .cm-builtin, html[data-theme="dark"] .cm-s-default .cm-atom { color: #93c5fd; }
html[data-theme="dark"] .CodeMirror-hints { background: var(--ux-surface-2); border-color: var(--ux-border); box-shadow: var(--ux-shadow); }
html[data-theme="dark"] .CodeMirror-hint { color: var(--ux-ink); }
html[data-theme="dark"] li.CodeMirror-hint-active { background: var(--ux-brand); color: #fff; }
html[data-theme="dark"] .hero-badge { background: #fff3eb; color: #ff6600; box-shadow: inset 0 0 0 1px rgba(255, 102, 0, .22); }
html[data-theme="dark"] .page-titles { background: var(--ux-surface); }
html[data-theme="dark"] .list-group-item { background: var(--ux-surface); border-color: var(--ux-border); color: var(--ux-sub); }

/* Tablas */
html[data-theme="dark"] .table {
    --bs-table-color: #cbd5e1;
    --bs-table-border-color: #2a3547;
    --bs-table-striped-color: #cbd5e1;
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-hover-color: #e5e7eb;
    --bs-table-hover-bg: rgba(255, 255, 255, .05);
    --bs-table-active-bg: rgba(255, 255, 255, .08);
}
html[data-theme="dark"] .table > thead > tr > th { color: var(--ux-muted); background-color: var(--ux-surface-2); border-color: var(--ux-border); }
html[data-theme="dark"] .table > :not(caption) > * > * { border-color: var(--ux-border); }
html[data-theme="dark"] .table-responsive { background: transparent; }

/* Formularios */
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select,
html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"], html[data-theme="dark"] textarea, html[data-theme="dark"] select {
    background-color: var(--ux-surface-2); color: var(--ux-ink); border-color: var(--ux-border);
}
html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] textarea::placeholder, html[data-theme="dark"] input::placeholder { color: var(--ux-muted); opacity: 1; }
html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-control[readonly] { background-color: #0f1726; color: var(--ux-muted); }
html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { border-color: var(--ux-brand); box-shadow: 0 0 0 3px rgba(255, 102, 0, .25); }
html[data-theme="dark"] label, html[data-theme="dark"] .form-label { color: var(--ux-sub); }
html[data-theme="dark"] .input-group-text { background: var(--ux-surface-2); border-color: var(--ux-border); color: var(--ux-muted); }
html[data-theme="dark"] .form-check-input:not(:checked):not(:indeterminate) { background-color: var(--ux-surface-2); border-color: #4b5563; }

/* Select2 */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: var(--ux-surface-2); border-color: var(--ux-border); }
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ux-ink); }
html[data-theme="dark"] .select2-dropdown { background-color: var(--ux-surface); border-color: var(--ux-border); color: var(--ux-ink); }
html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--ux-surface-2); color: var(--ux-ink); border-color: var(--ux-border); }
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] { background-color: rgba(255, 102, 0, .16); color: var(--ux-ink); }

/* Dropdowns, modales, pestañas, paginación, avisos */
html[data-theme="dark"] .dropdown-menu:not(.ux-menu) { background-color: var(--ux-surface); border: 1px solid var(--ux-border); color: var(--ux-sub); }
html[data-theme="dark"] .dropdown-menu:not(.ux-menu) .dropdown-item { color: var(--ux-sub); }
html[data-theme="dark"] .dropdown-menu:not(.ux-menu) .dropdown-item:hover { background: var(--ux-hover); color: var(--ux-ink); }
html[data-theme="dark"] .dropdown-divider { border-color: var(--ux-border); }
html[data-theme="dark"] .modal-content { background-color: var(--ux-surface); color: var(--bs-body-color); border-color: var(--ux-border); }
html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--ux-border); }
html[data-theme="dark"] .modal-title { color: var(--ux-ink); }
html[data-theme="dark"] .nav-tabs { border-color: var(--ux-border); }
html[data-theme="dark"] .nav-tabs .nav-link { color: var(--ux-muted); }
html[data-theme="dark"] .nav-tabs .nav-link.active { background: var(--ux-surface); color: var(--ux-ink); border-color: var(--ux-border) var(--ux-border) var(--ux-surface); }
html[data-theme="dark"] .page-link { background: var(--ux-surface); border-color: var(--ux-border); color: var(--ux-sub); }
html[data-theme="dark"] .page-item.active .page-link { background: var(--ux-brand); border-color: var(--ux-brand); color: var(--ux-on-brand); }
html[data-theme="dark"] .page-item.disabled .page-link { background: var(--ux-surface-2); color: var(--ux-muted); }
html[data-theme="dark"] .btn-light, html[data-theme="dark"] .btn-outline-secondary { background: var(--ux-surface-2); border-color: var(--ux-border); color: var(--ux-sub); }
html[data-theme="dark"] .swal2-popup { background: var(--ux-surface); color: var(--ux-sub); }
html[data-theme="dark"] .swal2-title, html[data-theme="dark"] .swal2-html-container, html[data-theme="dark"] .swal2-content { color: var(--ux-ink); }
html[data-theme="dark"] .daterangepicker { background: var(--ux-surface); border-color: var(--ux-border); color: var(--ux-sub); }
html[data-theme="dark"] .daterangepicker td.available:hover, html[data-theme="dark"] .daterangepicker .calendar-table { background: var(--ux-surface); }
html[data-theme="dark"] .daterangepicker td.off { background: var(--ux-surface); color: #6b7280; }

/* Componentes ce-* */
html[data-theme="dark"] .ce-copy { background: var(--ux-surface); }

/* Franja de auditoría y panel principal (panel.html) */
html[data-theme="dark"] .aud-foot { background: var(--ux-surface); box-shadow: none; }
html[data-theme="dark"] {
    --panel-ink: #e5e7eb; --panel-sub: #cbd5e1; --panel-muted: #9ca3af; --panel-line: #2a3547;
    --panel-bg: #0b1220; --panel-white: #111827; --panel-brand-bg: rgba(255, 102, 0, .16);
    --panel-brand-bd: rgba(255, 102, 0, .45); --panel-brand-dark: #ff8533;
    --panel-tag-bg: rgba(255, 102, 0, .16); --panel-tag-ink: #ffa366;
    --panel-warn-bg: rgba(217, 119, 6, .16); --panel-warn-ink: #fcd34d; --panel-warn-bd: rgba(217, 119, 6, .5);
    --panel-shadow: none; --panel-shadow-hover: 0 8px 24px rgba(0, 0, 0, .5);
}

/* El logotipo trae texto oscuro: invert + hue-rotate lo aclara y devuelve el naranja a su tono */
html[data-theme="dark"] .nav-header .brand-logo img { filter: invert(1) hue-rotate(180deg); }

/* El buscador del menu dibuja su propia caja: el estilo generico de inputs no debe pintarle borde */
html[data-theme="dark"] #menuSearchInput { background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* Imagenes e iconos oscuros */
html[data-theme="dark"] img[src$="/iconos/hombre.png"], html[data-theme="dark"] img[src$="/iconos/mujer.png"] { background-color: #cbd5e1; }
html[data-theme="dark"] img[src$="/images/pdf.png"] { background-color: #e5e7eb; border-radius: 6px; padding: 2px; box-sizing: border-box; }
html[data-theme="dark"] img[src*="UCGPosgrados-ICONO"] { filter: invert(1); }
html[data-theme="dark"] svg [fill="#000000"], html[data-theme="dark"] svg[fill="#000000"], html[data-theme="dark"] svg [fill="#000"], html[data-theme="dark"] svg[fill="#000"] { fill: var(--ux-sub); }
html[data-theme="dark"] svg [stroke="#000000"], html[data-theme="dark"] svg [stroke="#000"], html[data-theme="dark"] svg [stroke="#94a3b8"] { stroke: var(--ux-muted); }
html[data-theme="dark"] svg [fill="#6b7280"], html[data-theme="dark"] svg [fill="#857b71"] { fill: var(--ux-muted); }

/* Boton secundario legacy (morado): en oscuro sigue el lenguaje ce-* */
html[data-theme="dark"] .btn-secondary { background-color: var(--ux-brand-bg); border-color: var(--ux-brand-bd); color: var(--ux-brand-ink); }
html[data-theme="dark"] .btn-secondary:hover, html[data-theme="dark"] .btn-secondary:focus { background-color: rgba(255, 102, 0, .26); border-color: var(--ux-brand); color: var(--ux-ink); }
html[data-theme="dark"] .btn-outline-secondary:hover { background: var(--ux-hover); color: var(--ux-ink); }

/* Sombras: sobre oscuro hay que oscurecer, no aclarar */
html[data-theme="dark"] .card { box-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .25); }
html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown-menu:not(.ux-menu),
html[data-theme="dark"] .select2-dropdown, html[data-theme="dark"] .daterangepicker, html[data-theme="dark"] .swal2-popup { box-shadow: var(--ux-shadow); }

/* Graficos: Chartist, ApexCharts y Highcharts reaccionan al toggle por CSS */
html[data-theme="dark"] .ct-label { color: var(--ux-muted); fill: var(--ux-muted); }
html[data-theme="dark"] .ct-grid { stroke: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .chartist-tooltip { background: var(--ux-surface-2); color: var(--ux-ink); }
html[data-theme="dark"] .apexcharts-text, html[data-theme="dark"] .apexcharts-xaxis-label, html[data-theme="dark"] .apexcharts-yaxis-label { fill: var(--ux-muted); }
html[data-theme="dark"] .apexcharts-legend-text { color: var(--ux-sub) !important; }
html[data-theme="dark"] .apexcharts-gridline, html[data-theme="dark"] .apexcharts-xaxis-tick, html[data-theme="dark"] .apexcharts-xaxis line, html[data-theme="dark"] .apexcharts-yaxis line { stroke: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .apexcharts-tooltip, html[data-theme="dark"] .apexcharts-xaxistooltip, html[data-theme="dark"] .apexcharts-yaxistooltip { background: var(--ux-surface-2); border-color: var(--ux-border); color: var(--ux-ink); box-shadow: var(--ux-shadow); }
html[data-theme="dark"] .apexcharts-tooltip-title, html[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title { background: var(--ux-surface); border-bottom-color: var(--ux-border); color: var(--ux-ink); }
html[data-theme="dark"] .apexcharts-menu { background: var(--ux-surface-2); border-color: var(--ux-border); color: var(--ux-ink); }
html[data-theme="dark"] .apexcharts-menu-item:hover { background: var(--ux-hover); }
html[data-theme="dark"] .apexcharts-toolbar svg { fill: var(--ux-muted); }
html[data-theme="dark"] .highcharts-background { fill: transparent; }
html[data-theme="dark"] .highcharts-title, html[data-theme="dark"] .highcharts-subtitle, html[data-theme="dark"] .highcharts-axis-title,
html[data-theme="dark"] .highcharts-axis-labels text, html[data-theme="dark"] .highcharts-legend-item text, html[data-theme="dark"] .highcharts-data-label text { fill: var(--ux-sub) !important; color: var(--ux-sub) !important; }
html[data-theme="dark"] .highcharts-grid-line, html[data-theme="dark"] .highcharts-axis-line, html[data-theme="dark"] .highcharts-tick { stroke: rgba(255, 255, 255, .14); }
html[data-theme="dark"] .highcharts-tooltip-box { fill: var(--ux-surface-2); stroke: var(--ux-border); }
html[data-theme="dark"] .highcharts-tooltip text { fill: var(--ux-ink) !important; }

/* Popups de plugins: select2, bootstrap-select, daterangepicker */
html[data-theme="dark"] .select2-results__option { color: var(--ux-sub); }
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--ux-brand-bg); border-color: var(--ux-brand-bd); color: var(--ux-ink); }
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ux-muted); }
html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single { background-color: #0f1726; }
html[data-theme="dark"] .select2-container--default .select2-results__option--disabled { color: var(--ux-muted); }
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle { background-color: var(--ux-surface-2); border-color: var(--ux-border); color: var(--ux-ink); }
html[data-theme="dark"] .bootstrap-select .dropdown-menu li a { color: var(--ux-sub); }
html[data-theme="dark"] .bootstrap-select .dropdown-menu li.active a, html[data-theme="dark"] .bootstrap-select .dropdown-menu li a:hover { background: var(--ux-hover); color: var(--ux-ink); }
html[data-theme="dark"] .bootstrap-select .bs-searchbox input { background: var(--ux-surface-2); color: var(--ux-ink); border-color: var(--ux-border); }
html[data-theme="dark"] .daterangepicker .calendar-table, html[data-theme="dark"] .daterangepicker .drp-calendar { background: var(--ux-surface); border-color: var(--ux-border); }
html[data-theme="dark"] .daterangepicker td, html[data-theme="dark"] .daterangepicker th { color: var(--ux-sub); }
html[data-theme="dark"] .daterangepicker td.available:hover, html[data-theme="dark"] .daterangepicker th.available:hover { background: var(--ux-hover); color: var(--ux-ink); }
html[data-theme="dark"] .daterangepicker td.in-range { background: var(--ux-brand-bg); color: var(--ux-ink); }
html[data-theme="dark"] .daterangepicker td.active, html[data-theme="dark"] .daterangepicker td.active:hover { background: var(--ux-brand); color: var(--ux-on-brand); }
html[data-theme="dark"] .daterangepicker td.off, html[data-theme="dark"] .daterangepicker td.disabled { color: var(--ux-muted); opacity: .6; }
html[data-theme="dark"] .daterangepicker .drp-buttons { border-top-color: var(--ux-border); }
html[data-theme="dark"] .daterangepicker .ranges li { background: var(--ux-surface-2); border-color: var(--ux-border); color: var(--ux-sub); }
html[data-theme="dark"] .daterangepicker .ranges li:hover { background: var(--ux-hover); }
html[data-theme="dark"] .daterangepicker .ranges li.active { background: var(--ux-brand); color: var(--ux-on-brand); }
html[data-theme="dark"] .daterangepicker::before { border-bottom-color: var(--ux-border); }
html[data-theme="dark"] .daterangepicker::after { border-bottom-color: var(--ux-surface); }
html[data-theme="dark"] .daterangepicker select.monthselect, html[data-theme="dark"] .daterangepicker select.yearselect { background-color: var(--ux-surface-2); color: var(--ux-ink); border-color: var(--ux-border); }

/* CKEditor 4 (skin moono-lisa): barra, pie, paneles y dialogos */
html[data-theme="dark"] .cke_chrome { border-color: var(--ux-border); background: var(--ux-surface); box-shadow: none; }
html[data-theme="dark"] .cke_top, html[data-theme="dark"] .cke_bottom { background: var(--ux-surface-2); border-color: var(--ux-border); box-shadow: none; }
html[data-theme="dark"] .cke_toolgroup, html[data-theme="dark"] .cke_combo_button { background: var(--ux-surface); border-color: var(--ux-border); box-shadow: none; }
html[data-theme="dark"] a.cke_button:hover, html[data-theme="dark"] a.cke_button_on, html[data-theme="dark"] a.cke_combo_button:hover { background: var(--ux-hover); border-color: var(--ux-border); }
html[data-theme="dark"] .cke_button_icon, html[data-theme="dark"] .cke_combo_arrow { filter: invert(.85); }
html[data-theme="dark"] .cke_combo_text, html[data-theme="dark"] .cke_path_item, html[data-theme="dark"] .cke_path_empty, html[data-theme="dark"] .cke_button_label { color: var(--ux-sub); text-shadow: none; }
html[data-theme="dark"] .cke_dialog_body, html[data-theme="dark"] .cke_dialog_contents, html[data-theme="dark"] .cke_dialog_footer { background: var(--ux-surface); border-color: var(--ux-border); color: var(--ux-sub); }
html[data-theme="dark"] .cke_dialog_title { background: var(--ux-surface-2); color: var(--ux-ink); border-color: var(--ux-border); }
html[data-theme="dark"] .cke_panel, html[data-theme="dark"] .cke_menu_panel { background: var(--ux-surface); border-color: var(--ux-border); }
html[data-theme="dark"] .cke_dialog_ui_input_text input, html[data-theme="dark"] .cke_dialog_ui_input_select select, html[data-theme="dark"] .cke_dialog_ui_input_textarea textarea { background: var(--ux-surface-2); color: var(--ux-ink); border-color: var(--ux-border); }

/* Logotipo con texto oscuro fuera de la cabecera (paginas de error, acceso denegado) */
html[data-theme="dark"] img[src$="/logo/ucasagrande_logo.png"], html[data-theme="dark"] img[src$="/logo/Logo_UCG_POSGRADOS-01.png"], html[data-theme="dark"] img[src$="/logo/logoPosgrados.png"] { filter: invert(1) hue-rotate(180deg); }
html[data-theme="dark"] .apexcharts-title-text, html[data-theme="dark"] .apexcharts-subtitle-text { fill: var(--ux-ink); }

/* Campos de fecha/hora y demás tipos de input */
html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="time"], html[data-theme="dark"] input[type="month"],
html[data-theme="dark"] input[type="week"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="url"] {
    background-color: var(--ux-surface-2); color: var(--ux-ink); border-color: var(--ux-border);
}
html[data-theme="dark"] input::-webkit-calendar-picker-indicator { filter: invert(.8); }

/* Plantilla legacy (style.css / theme.min.css): tablas, negritas y botones */
html[data-theme="dark"] .table { color: var(--bs-table-color); }
html[data-theme="dark"] .table strong, html[data-theme="dark"] .table b { color: var(--ux-ink); }
html[data-theme="dark"] .table-light, html[data-theme="dark"] .table-light > tr > * {
    --bs-table-bg: var(--ux-surface-2); --bs-table-color: var(--ux-ink); background-color: var(--ux-surface-2); color: var(--ux-ink);
}
html[data-theme="dark"] .btn-default { color: var(--ux-sub); border-color: var(--ux-border); }
html[data-theme="dark"] .border-dark { border-color: var(--ux-border) !important; }
html[data-theme="dark"] .text-info { color: #a5b4fc !important; }
html[data-theme="dark"] .text-white h1, html[data-theme="dark"] .text-white h2, html[data-theme="dark"] .text-white h3,
html[data-theme="dark"] .text-white h4, html[data-theme="dark"] .text-white h5, html[data-theme="dark"] .text-white h6 { color: #fff; }
html[data-theme="dark"] .bg-warning.text-dark, html[data-theme="dark"] .bg-info.text-dark,
html[data-theme="dark"] .bg-success.text-dark, html[data-theme="dark"] .bg-white.text-dark.badge { color: #1f2937 !important; }

/* Alertas: fondo teñido y texto claro */
html[data-theme="dark"] .alert { --bs-alert-color: var(--ux-sub); --bs-alert-bg: var(--ux-surface-2); --bs-alert-border-color: var(--ux-border); background: var(--ux-surface-2); color: var(--ux-sub); border-color: var(--ux-border); }
html[data-theme="dark"] .alert-success { --bs-alert-color: #86efac; background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .35); color: #bbf7d0; }
html[data-theme="dark"] .alert-info { --bs-alert-color: #7dd3fc; background: rgba(56, 189, 248, .12); border-color: rgba(56, 189, 248, .35); color: #bae6fd; }
html[data-theme="dark"] .alert-warning { --bs-alert-color: #fcd34d; background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .38); color: #fde68a; }
html[data-theme="dark"] .alert-danger { --bs-alert-color: #fca5a5; background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .38); color: #fecaca; }
html[data-theme="dark"] .alert-primary { background: var(--ux-brand-bg); border-color: var(--ux-brand-bd); color: var(--ux-brand-ink); }
html[data-theme="dark"] .alert .alert-heading, html[data-theme="dark"] .alert h1, html[data-theme="dark"] .alert h2, html[data-theme="dark"] .alert h3,
html[data-theme="dark"] .alert h4, html[data-theme="dark"] .alert h5, html[data-theme="dark"] .alert h6 { color: inherit; }
html[data-theme="dark"] .alert .text-muted { color: var(--ux-muted) !important; }

/* Badges "light" de la plantilla: fondo translúcido y texto aclarado */
html[data-theme="dark"] .light.badge-success { background-color: rgba(43, 193, 85, .16); color: #86efac !important; }
html[data-theme="dark"] .light.badge-info { background-color: rgba(129, 140, 248, .18); color: #c7d2fe !important; }
html[data-theme="dark"] .light.badge-primary { background-color: var(--ux-brand-bg); color: var(--ux-brand-ink) !important; }
html[data-theme="dark"] .light.badge-secondary { background-color: rgba(172, 57, 212, .22); color: #f0abfc !important; }
html[data-theme="dark"] .light.badge-warning { background-color: rgba(254, 128, 36, .16); color: #fdba74 !important; }
html[data-theme="dark"] .light.badge-danger { background-color: rgba(255, 46, 46, .16); color: #fca5a5 !important; }
html[data-theme="dark"] .light.badge-dark, html[data-theme="dark"] .light.badge-default,
html[data-theme="dark"] .badge-light { background-color: rgba(203, 213, 225, .12); color: var(--ux-sub) !important; }
html[data-theme="dark"] [style*="color:green"], html[data-theme="dark"] [style*="color: green"] { color: #4ade80 !important; }

/* Offcanvas (drawers laterales) */
html[data-theme="dark"] .offcanvas { --bs-offcanvas-bg: var(--ux-surface); --bs-offcanvas-color: var(--ux-sub); background-color: var(--ux-surface); color: var(--ux-sub); border-color: var(--ux-border); }
html[data-theme="dark"] .offcanvas-header { border-color: var(--ux-border); }
html[data-theme="dark"] .offcanvas-title:not(.text-white) { color: var(--ux-ink); }

/* Botones outline de la plantilla */
html[data-theme="dark"] .btn-outline-info { color: #a5b4fc; border-color: rgba(165, 180, 252, .5); }
html[data-theme="dark"] .btn-outline-info:hover { background: rgba(165, 180, 252, .14); color: #c7d2fe; }
html[data-theme="dark"] .badge.bg-dark { background-color: #334155 !important; }

/* Cabecera legacy de index.html */
html[data-theme="dark"] .page-header { background-color: var(--ux-surface-2); border-bottom-color: var(--ux-border); }
html[data-theme="dark"] .page-action .btn { background-color: var(--ux-surface-2); border-color: var(--ux-border); color: var(--ux-sub); }

/* Calendario pickadate */
html[data-theme="dark"] .picker__holder, html[data-theme="dark"] .picker__box { background: var(--ux-surface); border-color: var(--ux-border); }
html[data-theme="dark"] .picker__month, html[data-theme="dark"] .picker__year, html[data-theme="dark"] .picker__day { color: var(--ux-sub); }
html[data-theme="dark"] .picker__weekday, html[data-theme="dark"] .picker__day--outfocus, html[data-theme="dark"] .picker__day--disabled { color: var(--ux-muted); }
html[data-theme="dark"] .picker__day--infocus:hover, html[data-theme="dark"] .picker__day--outfocus:hover { background: var(--ux-hover); color: var(--ux-ink); }
html[data-theme="dark"] .picker__day--highlighted, html[data-theme="dark"] .picker__day--selected { background: var(--ux-brand); color: var(--ux-on-brand, #fff); }
html[data-theme="dark"] .picker__day--disabled { background: var(--ux-surface-2); }
html[data-theme="dark"] .picker__footer .picker__button--today, html[data-theme="dark"] .picker__footer .picker__button--clear,
html[data-theme="dark"] .picker__footer .picker__button--close { background: var(--ux-surface-2); border-color: var(--ux-border); color: var(--ux-sub); }
html[data-theme="dark"] .picker__select--month, html[data-theme="dark"] .picker__select--year { background: var(--ux-surface-2); border-color: var(--ux-border); color: var(--ux-ink); }

/* Hero oscuro de Meet: su texto usa --paper-2, que el tema aclara como fondo */
html[data-theme="dark"] .meet-hero { color: #f4f6f9; }

/* Utilidades Tailwind (pantallas con cdn.tailwindcss.com) */
html[data-theme="dark"] .text-slate-900, html[data-theme="dark"] .text-slate-800, html[data-theme="dark"] .text-on-surface { color: var(--ux-ink); }
html[data-theme="dark"] .text-slate-700, html[data-theme="dark"] .text-slate-600, html[data-theme="dark"] .text-on-surface-variant { color: var(--ux-sub); }
html[data-theme="dark"] .text-slate-500 { color: var(--ux-muted); }
html[data-theme="dark"] .bg-slate-50, html[data-theme="dark"] .bg-slate-100, html[data-theme="dark"] .bg-surface-container-lowest,
html[data-theme="dark"] .bg-surface-container-low { background-color: var(--ux-surface); }
html[data-theme="dark"] .bg-surface-container, html[data-theme="dark"] .bg-surface-container-high { background-color: var(--ux-surface-2); }
html[data-theme="dark"] .border-slate-100, html[data-theme="dark"] .border-slate-200, html[data-theme="dark"] .border-slate-300,
html[data-theme="dark"] .border-slate-200\/80, html[data-theme="dark"] .border-outline-variant, html[data-theme="dark"] .border-outline-variant\/20,
html[data-theme="dark"] .border-outline-variant\/30 { border-color: var(--ux-border); }
html[data-theme="dark"] .hover\:bg-slate-50:hover, html[data-theme="dark"] .hover\:bg-surface-container-high:hover { background-color: var(--ux-hover); }

/* Tabla rayada del cm-content-box y pestañas tipo pill */
html[data-theme="dark"] .cm-content-box .cm-content-body .table td { color: var(--bs-table-color); }
html[data-theme="dark"] .nav-pills .nav-link.active, html[data-theme="dark"] .nav-pills .show > .nav-link { color: #fff !important; }
html[data-theme="dark"] .text-on-surface-variant\/60, html[data-theme="dark"] .text-on-surface-variant\/40 { color: var(--ux-muted); }
html[data-theme="dark"] .bg-white\/90 { background-color: var(--ux-surface-2); }
html[data-theme="dark"] .cm-content-box { background: var(--ux-surface); }
html[data-theme="dark"] .cm-content-box .cm-content-body, html[data-theme="dark"] .cm-content-box.style-1 .content-title { border-color: var(--ux-border); }

/* Cerrar de Bootstrap: X blanca propia; ningún fondo de módulo debe taparla */
html[data-theme="dark"] .btn-close {
    filter: none; opacity: .7; background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e5e7eb'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important; background-position: center !important; background-size: 1em auto !important;
    border: 0 !important; box-shadow: none;
}
html[data-theme="dark"] .btn-close:hover, html[data-theme="dark"] .btn-close:focus { opacity: 1; }
html[data-theme="dark"] .border-light { border-color: var(--ux-border) !important; }
html[data-theme="dark"] .text-secondary { color: #d8a8ea !important; }
html[data-theme="dark"] input[type="file"] { color: var(--ux-sub); }
html[data-theme="dark"] input[type="file"]::file-selector-button, html[data-theme="dark"] input[type="file"]::-webkit-file-upload-button {
    background: var(--ux-surface-2); color: var(--ux-ink); border: 0; border-right: 1px solid var(--ux-border);
}

/* SweetAlert: sweet2/sweetalert2.css fija grises con !important y swal-ucg.css un confirmar crema */
html[data-theme="dark"] .swal2-popup .swal2-title { color: var(--ux-ink) !important; }
html[data-theme="dark"] .swal2-popup .swal2-content, html[data-theme="dark"] .swal2-popup .swal2-html-container { color: var(--ux-sub) !important; }
html[data-theme="dark"] .swal2-popup .swal2-confirm { background-color: var(--ux-brand-bg) !important; border-color: var(--ux-brand-bd) !important; color: var(--ux-brand-ink) !important; }
html[data-theme="dark"] .swal2-popup .swal2-confirm:hover { background-color: var(--ux-brand) !important; border-color: var(--ux-brand) !important; color: #fff !important; }
html[data-theme="dark"] .swal2-popup .swal2-cancel { background-color: var(--ux-surface-2) !important; border: 1px solid var(--ux-border) !important; color: var(--ux-sub) !important; }
html[data-theme="dark"] .swal2-popup .swal2-cancel:hover { background-color: var(--ux-hover) !important; color: var(--ux-ink) !important; }
html[data-theme="dark"] .swal2-popup.swal2-toast { box-shadow: var(--ux-shadow); border: 1px solid var(--ux-border); }
/* style.css pinta los enlaces #7e7e7e; :where() no sube la especificidad, así los enlaces de módulo conservan su color */
:where(html[data-theme="dark"]) a { color: var(--ux-sub); }