/**
 * BERBERIS OS — Identidad visual (front)
 * Paleta: Navy #0B1F3A · Cyan #00C2D1
 */

/* ── Tokens de marca ── */
:root {
    --brand-navy: #0b1f3a;
    --brand-navy-deep: #061224;
    --brand-navy-mid: #0f2744;
    --brand-navy-soft: #132d4f;
    --brand-cyan: #00c2d1;
    --brand-cyan-dark: #00a8b5;
    --brand-cyan-light: #33d1dd;
    --brand-cyan-glow: rgba(0, 194, 209, 0.28);
}

/* ── Modo claro (estilo operativo clásico + acentos marca) ── */
[data-theme="light"] {
    color-scheme: light;
    --color-sidebar: #0b1f3a;
    --color-sidebar-hover: #132d4f;
    --color-sidebar-active: #1a3a5c;
    --color-accent: #0b1f3a;
    --color-accent-dark: #061224;
    --color-accent-light: #00c2d1;
    --color-surface: #f0f2f5;
    --color-card: #ffffff;
    --color-muted: #64748b;
    --color-border: #e2e8f0;
    --color-text: #1e293b;
    --color-text-soft: #475569;
    --color-topbar: #ffffff;
    --color-input-bg: #ffffff;
    --color-input-text: #334155;
    --color-shadow: rgba(15, 23, 42, 0.08);
    --color-loader-backdrop: rgba(255, 255, 255, 0.94);
    --color-modal-header-start: #0b1f3a;
    --color-modal-header-end: #0f2744;
    --color-focus-ring: rgba(0, 194, 209, 0.2);
    --color-btn-primary-bg: #0b1f3a;
    --color-btn-primary-hover: #061224;
    --color-btn-ghost-hover-bg: #f1f5f9;
    --color-btn-ghost-hover-text: #334155;
    --color-link: #0b1f3a;
    --color-link-hover: #00a8b5;
    --color-surface-elevated: #ffffff;
    --color-text-muted: #64748b;
}

/* ── Modo oscuro (por defecto) ── */
[data-theme="dark"] {
    color-scheme: dark;
    --color-sidebar: #061224;
    --color-sidebar-active: #132d4f;
    --color-accent: #00c2d1;
    --color-accent-dark: #00a8b5;
    --color-accent-light: #33d1dd;
    --color-surface: #0a1628;
    --color-card: #0f1f35;
    --color-muted: #94a3b8;
    --color-border: rgba(148, 163, 184, 0.14);
    --color-text: #e8eef4;
    --color-text-soft: #b8c5d4;
    --color-topbar: #0b1f3a;
    --color-input-bg: #132942;
    --color-input-text: #e8eef4;
    --color-shadow: rgba(0, 0, 0, 0.35);
    --color-loader-backdrop: rgba(6, 18, 36, 0.92);
    --color-modal-header-start: #061224;
    --color-modal-header-end: #0b1f3a;
    --color-focus-ring: rgba(0, 194, 209, 0.22);
    --color-btn-primary-bg: #00c2d1;
    --color-btn-primary-hover: #00a8b5;
    --color-btn-ghost-hover-bg: #132d4f;
    --color-btn-ghost-hover-text: #e8eef4;
    --color-link: #33d1dd;
    --color-link-hover: #00c2d1;
    --color-surface-elevated: #132942;
    --color-text-muted: #8fa3b8;
}

/* ── Base ── */
body {
    background: var(--color-surface);
    color: var(--color-text);
}

a {
    color: var(--color-link);
}

a:hover {
    color: var(--color-link-hover);
}

/* ── Topbar ── */
.topbar {
    background: var(--color-topbar);
    border-bottom-color: var(--color-border);
}

.topbar-title {
    color: var(--color-text);
}

.sidebar-pushmenu,
.topbar-icon-btn,
.topbar-user-trigger {
    background: var(--color-input-bg);
    border-color: var(--color-border);
    color: var(--color-text-soft);
}

.sidebar-pushmenu:hover,
.topbar-icon-btn:hover,
.topbar-user-trigger:hover {
    background: var(--color-sidebar-hover);
    border-color: var(--brand-cyan);
    color: var(--color-text);
}

.topbar-icon-btn.is-dark-active {
    border-color: var(--brand-cyan);
    color: var(--brand-cyan);
}

.theme-toggle [hidden] {
    display: none !important;
}

/* ── Sidebar marca ── */
.sidebar-brand {
    text-decoration: none;
    color: inherit;
    padding: 0.5rem 0.45rem 0.55rem;
    background: var(--brand-navy);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    min-height: auto;
}

.sidebar-brand-frame {
    display: block;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
    background: var(--brand-navy);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.sidebar-brand-logo-full {
    display: block;
    width: 100%;
    height: 3.35rem;
    object-fit: cover;
    object-position: left center;
}

.app-shell.sidebar-collapsed .sidebar-brand {
    padding: 0.55rem 0.4rem;
    justify-content: center;
}

.app-shell.sidebar-collapsed .sidebar-brand-frame {
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 10px;
    margin: 0 auto;
}

.app-shell.sidebar-collapsed .sidebar-brand-logo-full {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 12% center;
}

.app-shell.sidebar-collapsed .sidebar:hover .sidebar-brand-frame,
.app-shell.sidebar-collapsed .sidebar.sidebar-focused .sidebar-brand-frame {
    width: 100%;
    height: auto;
    margin: 0;
}

.app-shell.sidebar-collapsed .sidebar:hover .sidebar-brand-logo-full,
.app-shell.sidebar-collapsed .sidebar.sidebar-focused .sidebar-brand-logo-full {
    height: 3.35rem;
    object-position: left center;
}

/* ── Cards & content ── */
.card,
.modal {
    background: var(--color-card);
    border-color: var(--color-border);
    box-shadow: 0 1px 3px var(--color-shadow);
}

.card-header {
    border-bottom-color: var(--color-border);
    background: var(--color-card);
}

.card-header h3,
.card-header h4 {
    color: var(--color-text);
}

/* ── Forms ── */
.form-input,
select.form-input,
textarea.form-input {
    background: var(--color-input-bg);
    color: var(--color-input-text);
    border-color: var(--color-border);
}

.form-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.form-label {
    color: var(--color-text-soft);
}

/* ── Buttons ── */
.btn-primary {
    background: var(--color-btn-primary-bg);
    border-color: var(--color-btn-primary-bg);
    color: #fff;
}

.btn-primary:hover {
    background: var(--color-btn-primary-hover);
    border-color: var(--color-btn-primary-hover);
    color: #fff;
}

[data-theme="dark"] .btn-primary {
    color: #061224;
    font-weight: 600;
}

.btn-ghost {
    background: var(--color-input-bg);
    color: var(--color-text-soft);
    border-color: var(--color-border);
}

.btn-ghost:hover {
    background: var(--color-btn-ghost-hover-bg);
    color: var(--color-btn-ghost-hover-text);
    border-color: var(--color-border);
}

/* ── Tables ── */
.table th {
    color: var(--color-text-soft);
    border-color: var(--color-border);
}

.table td {
    border-color: var(--color-border);
    color: var(--color-text);
}

.table tbody tr:hover {
    background: rgba(0, 194, 209, 0.06);
}

[data-theme="dark"] .table {
    --bs-table-bg: transparent;
}

/* ── Modales ── */
.modal-header {
    background: linear-gradient(135deg, var(--color-modal-header-start) 0%, var(--color-modal-header-end) 100%);
    border-bottom: 0;
    color: #f8fafc;
}

.modal-header h4 {
    color: #f8fafc;
}

.modal-header .modal-subtitle {
    color: rgba(248, 250, 252, 0.72);
}

.modal-elegant-dialog .modal-header {
    background: linear-gradient(135deg, var(--color-modal-header-start) 0%, var(--color-modal-header-end) 100%);
}

.modal-elegant-dialog .modal-body {
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-card) 42%);
}

.modal-body,
.modal-footer {
    background: var(--color-card);
    border-color: var(--color-border);
}

.modal-close {
    color: rgba(248, 250, 252, 0.8);
}

.modal-close:hover {
    color: #fff;
}

.program-search-header,
.program-search-header h2 {
    color: #f8fafc;
}

.user-sheet-header {
    border-bottom-color: var(--color-border);
}

.user-sheet-header h2 {
    color: var(--color-text);
}

.user-sheet-panel {
    background: var(--color-card);
}

.user-sheet-body {
    background: var(--color-card);
}

/* ── Mi cuenta / panel lateral ── */
[data-theme="dark"] .user-sheet-profile-text strong {
    color: var(--color-text);
}

[data-theme="dark"] .user-sheet-profile-text span {
    color: var(--color-muted);
}

[data-theme="dark"] .user-sheet-nav-link {
    color: var(--color-text);
}

[data-theme="dark"] .user-sheet-nav-link svg {
    color: var(--brand-cyan-light);
}

[data-theme="dark"] .user-sheet-nav-link:hover {
    background: rgba(0, 194, 209, 0.08);
}

[data-theme="dark"] .empresa-selector-icon {
    color: var(--brand-cyan-light);
}

[data-theme="dark"] .user-sheet-logout-btn {
    color: var(--color-text-soft);
    border-color: var(--color-border);
}

[data-theme="dark"] .user-sheet-logout-btn:hover {
    color: var(--color-text);
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.35);
}

/* ── Seguridad de cuenta ── */
[data-theme="dark"] .account-security-title,
[data-theme="dark"] .account-card .card-header h3 {
    color: var(--color-text);
}

[data-theme="dark"] .account-security-subtitle,
[data-theme="dark"] .account-help,
[data-theme="dark"] .account-session-info p {
    color: var(--color-text-soft);
}

[data-theme="dark"] .account-help strong,
[data-theme="dark"] .account-session-info p strong {
    color: var(--color-text);
}

[data-theme="dark"] .account-toggle {
    color: var(--color-text);
}

[data-theme="dark"] .account-toggle input[type="checkbox"] {
    accent-color: var(--brand-cyan);
}

[data-theme="dark"] .account-note {
    background: rgba(0, 194, 209, 0.08);
    border-color: rgba(0, 194, 209, 0.22);
    color: var(--color-text-soft) !important;
}

[data-theme="dark"] .account-card .form-input {
    background: var(--color-input-bg);
    border-color: var(--color-border);
    color: var(--color-input-text);
}

[data-theme="dark"] .account-card .form-input:focus {
    border-color: var(--brand-cyan);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

[data-theme="dark"] .account-card .form-label {
    color: var(--color-text-soft);
}

[data-theme="dark"] .user-avatar {
    color: var(--brand-navy-deep);
    font-weight: 700;
}

[data-theme="dark"] .user-sheet-header {
    background: rgba(6, 18, 36, 0.55);
}

[data-theme="dark"] .user-sheet-backdrop {
    background: rgba(2, 8, 18, 0.72);
}

/* ── Login ── */
[data-theme="light"] .login-page,
[data-theme="dark"] .login-page {
    background: linear-gradient(145deg, var(--brand-navy-deep) 0%, var(--brand-navy) 45%, var(--brand-navy-mid) 100%);
}

.login-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    box-shadow: 0 24px 64px rgba(6, 18, 36, 0.45);
}

.login-logo {
    text-align: center;
    margin-bottom: 1.75rem;
}

.login-brand-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    padding: 1.15rem 1.35rem;
    max-width: 100%;
    border-radius: 14px;
    background: linear-gradient(165deg, #f8fafc 0%, #eef4f8 48%, #e8f4f6 100%);
    border: 1px solid rgba(0, 194, 209, 0.45);
    box-shadow:
        0 0 0 1px rgba(11, 31, 58, 0.06) inset,
        0 10px 28px rgba(11, 31, 58, 0.1);
}

[data-theme="dark"] .login-brand-stage {
    background: linear-gradient(165deg, #f1f5f9 0%, #e8eef4 50%, #e2f0f3 100%);
    border-color: rgba(0, 194, 209, 0.55);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.65) inset,
        0 12px 32px rgba(0, 0, 0, 0.28);
}

.login-brand-stage--compact {
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
}

.login-brand-img {
    display: block;
    max-width: min(280px, 100%);
    width: 100%;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

[data-theme="dark"] .login-card .form-label {
    color: #d1dae6;
    font-weight: 500;
}

[data-theme="dark"] .login-card .form-input {
    background: var(--brand-navy-soft);
    border-color: rgba(148, 163, 184, 0.28);
    color: #f1f5f9;
}

[data-theme="dark"] .login-card .form-input::placeholder {
    color: #94a3b8;
}

[data-theme="dark"] .login-card .form-input:focus {
    border-color: var(--brand-cyan);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.login-logo p,
.login-tagline {
    color: var(--color-text-soft);
    font-size: 0.8125rem;
    margin: 0.35rem 0 0;
    line-height: 1.45;
}

[data-theme="dark"] .login-tagline {
    color: #c5d0dc;
}

.login-tagline strong {
    color: var(--color-text);
    font-weight: 600;
}

.login-logo h1 {
    color: var(--color-text);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
}

[data-theme="dark"] .login-remember label {
    color: #b8c5d4;
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.login-remember label {
    font-size: 0.8125rem;
    color: var(--color-muted);
    margin: 0;
}

.login-submit {
    width: 100%;
    justify-content: center;
    padding: 0.65rem;
}

.login-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    margin-top: 1rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: transparent;
    color: var(--color-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.login-theme-toggle:hover {
    border-color: var(--brand-cyan);
    color: var(--brand-cyan);
}

/* ── Navegación ── */
[data-theme="dark"] .nav-link {
    color: #b8c5d4;
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
    color: #f8fafc;
}

[data-theme="dark"] .content {
    background: var(--color-surface);
}

[data-theme="dark"] .badge-info {
    background: rgba(0, 194, 209, 0.18);
    color: var(--brand-cyan-light);
}

[data-theme="dark"] .venta-show .card-header {
    background: var(--color-card);
    color: var(--color-text);
}

[data-theme="dark"] .reservas-observaciones .card-header {
    background: var(--brand-navy);
}

.btn:focus-visible {
    outline-color: var(--brand-cyan);
}

.program-search-header {
    background: linear-gradient(135deg, var(--color-modal-header-start) 0%, var(--color-modal-header-end) 100%);
}

/* ── Page loader ── */
.page-loader-backdrop {
    background: var(--color-loader-backdrop);
}

/* ── Stats / dashboard ── */
.stat-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
}

.stat-value,
.stat-label {
    color: var(--color-text);
}

.stat-label {
    color: var(--color-muted);
}

[data-theme="dark"] .stat-card {
    background: linear-gradient(180deg, rgba(15, 31, 53, 0.95) 0%, rgba(10, 22, 40, 0.98) 100%);
    border-color: rgba(148, 163, 184, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .stat-value {
    color: var(--color-text);
}

[data-theme="dark"] .stat-icon.blue {
    background: rgba(37, 99, 235, 0.16);
    color: #60a5fa;
}

[data-theme="dark"] .stat-icon.green {
    background: rgba(16, 185, 129, 0.16);
    color: #34d399;
}

[data-theme="dark"] .stat-icon.amber {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}

[data-theme="dark"] .stat-icon.purple {
    background: rgba(124, 58, 237, 0.16);
    color: #a78bfa;
}

[data-theme="dark"] .stat-icon.red {
    background: rgba(239, 68, 68, 0.16);
    color: #f87171;
}

[data-theme="dark"] .card {
    background: linear-gradient(180deg, rgba(15, 31, 53, 0.98) 0%, rgba(10, 22, 40, 0.98) 100%);
    border-color: rgba(148, 163, 184, 0.14);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .card-header {
    background: rgba(6, 18, 36, 0.45);
    border-bottom-color: rgba(148, 163, 184, 0.12);
}

[data-theme="dark"] .recent-program {
    background: rgba(19, 41, 66, 0.72);
    border-color: rgba(148, 163, 184, 0.14);
}

[data-theme="dark"] .recent-program:hover,
[data-theme="dark"] .recent-program:focus {
    background: rgba(0, 194, 209, 0.1);
    border-color: rgba(0, 194, 209, 0.32);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .recent-program-name {
    color: var(--color-text);
}

[data-theme="dark"] .recent-program-amount {
    color: var(--brand-cyan-light);
}

[data-theme="dark"] .recent-program .badge-info {
    background: rgba(0, 194, 209, 0.14);
    color: var(--brand-cyan-light);
    border: 1px solid rgba(0, 194, 209, 0.22);
}

[data-theme="dark"] .recent-program-vendedor .table-user-name {
    color: var(--color-text-soft);
}

[data-theme="dark"] .op-tooltip {
    background: var(--brand-navy-mid);
    border: 1px solid rgba(0, 194, 209, 0.22);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* FullCalendar — modo oscuro */
[data-theme="dark"] .fc-theme-standard .fc-scrollgrid,
[data-theme="dark"] .fc-theme-standard td,
[data-theme="dark"] .fc-theme-standard th {
    border-color: var(--color-border);
}

[data-theme="dark"] .fc .fc-col-header-cell-cushion,
[data-theme="dark"] .fc .fc-daygrid-day-number,
[data-theme="dark"] .fc .fc-toolbar-title {
    color: var(--color-text);
}

[data-theme="dark"] .fc .fc-daygrid-day.fc-day-today {
    background: rgba(0, 194, 209, 0.08);
}

[data-theme="dark"] .fc .fc-button-primary {
    background: var(--color-input-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .fc .fc-button-primary:not(:disabled).fc-button-active,
[data-theme="dark"] .fc .fc-button-primary:not(:disabled):active,
[data-theme="dark"] .fc .fc-button-primary:not(:disabled):hover {
    background: rgba(0, 194, 209, 0.14);
    border-color: rgba(0, 194, 209, 0.35);
    color: var(--brand-cyan-light);
}

[data-theme="dark"] .fc .fc-daygrid-day-frame {
    background: rgba(6, 18, 36, 0.35);
}

[data-theme="dark"] .fc-event {
    border: none;
    box-shadow: 0 2px 8px rgba(0, 194, 209, 0.2);
}

[data-theme="dark"] .fc-event .fc-event-main,
[data-theme="dark"] .fc-event .fc-event-title {
    color: var(--brand-navy-deep);
    font-weight: 600;
}

.presentacion-metric,
.presentacion-field-value {
    background: var(--color-input-bg);
    border-color: var(--color-border);
}

.presentacion-metric strong,
.presentacion-field-value {
    color: var(--color-text);
}

/* ── Alerts ── */
.alert {
    border-color: var(--color-border);
}

[data-theme="dark"] .alert-success {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
}

[data-theme="dark"] .alert-warning {
    background: rgba(245, 158, 11, 0.12);
    color: #fcd34d;
}

[data-theme="dark"] .alert-danger {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

[data-theme="dark"] .alert-info {
    background: rgba(0, 194, 209, 0.12);
    color: var(--brand-cyan-light);
}

/* ── Footer ── */
.app-footer {
    border-top-color: var(--color-border);
    color: var(--color-muted);
    background: var(--color-card);
}

/* ── SweetAlert adaptación básica ── */
[data-theme="light"] .swal2-styled.swal2-cancel {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
}

[data-theme="light"] .swal2-styled.swal2-cancel:hover {
    background-color: #e2e8f0 !important;
    color: #334155 !important;
}

[data-theme="dark"] .swal2-popup {
    background: var(--color-card);
    color: var(--color-text);
}

/* ── Select2 ── */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background: var(--color-input-bg);
    color: var(--color-input-text);
    border-color: var(--color-border);
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
    background: var(--color-card);
    border-color: var(--color-border);
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option {
    color: var(--color-text);
}

/* ── Indicadores ticker ── */
.indicators-ticker {
    background: var(--brand-navy);
    border-color: var(--color-border);
}

.indicators-ticker-item {
    color: #e8eef4;
}

/* ── Loading spinner genérico ── */
.loading-spinner {
    border-color: var(--color-border);
    border-top-color: var(--color-accent);
}

/* ── Venta show / tabs (modo oscuro) ── */
[data-theme="dark"] .venta-show-title {
    color: var(--color-text);
}

[data-theme="dark"] .venta-show-subtitle,
[data-theme="dark"] .venta-tab-loading,
[data-theme="dark"] .venta-stub-panel {
    color: var(--color-muted);
}

[data-theme="dark"] .venta-tabs-nav {
    background: linear-gradient(180deg, var(--color-card) 0%, var(--color-surface) 100%);
}

[data-theme="dark"] .venta-tab {
    color: var(--color-muted);
}

[data-theme="dark"] .venta-tab.is-active {
    color: var(--brand-cyan);
    background: var(--color-card);
    box-shadow: inset 0 -2px 0 var(--brand-cyan);
}

[data-theme="dark"] .venta-stub-panel h4 {
    color: var(--color-text);
}

[data-theme="dark"] .reservas-day-tab.is-active {
    background: var(--brand-cyan);
    border-color: var(--brand-cyan-dark);
}

[data-theme="dark"] .presentacion-card,
[data-theme="dark"] .presentacion-stat-card {
    background: var(--color-card);
    border-color: var(--color-border);
}

[data-theme="dark"] .presentacion-card-head h4,
[data-theme="dark"] .presentacion-timeline-content header {
    color: var(--color-text);
}

[data-theme="dark"] .presentacion-card-subtitle,
[data-theme="dark"] .presentacion-timeline-content p {
    color: var(--color-muted);
}

[data-theme="dark"] .data-table tbody tr:hover {
    background: rgba(0, 194, 209, 0.08);
}

[data-theme="dark"] .modal-elegant {
    background: rgba(6, 18, 36, 0.72);
}


/* ── Modo oscuro: insignias, confirmaciones y componentes de permisos ── */
[data-theme="dark"] .badge-success { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; }
[data-theme="dark"] .badge-warning { background: rgba(251, 191, 36, 0.16); color: #fcd34d; }
[data-theme="dark"] .badge-danger { background: rgba(248, 113, 113, 0.16); color: #fca5a5; }

[data-theme="dark"] .usuario-extendido,
[data-theme="dark"] .marca-extras .usuario-opcion:not(.es-fija):has(input:checked) .usuario-opcion-texto::after {
    background: rgba(251, 191, 36, 0.16);
    color: #fcd34d;
}

[data-theme="dark"] .usuario-aviso { background: rgba(0, 194, 209, 0.09); border-color: rgba(0, 194, 209, 0.4); }
[data-theme="dark"] .usuario-seg button.es-activo { color: #04252a; }
[data-theme="dark"] .usuario-opcion-marca { border-color: #64748b; }
[data-theme="dark"] .usuario-modulo[open] { box-shadow: 0 2px 14px rgba(0, 194, 209, 0.1); }
[data-theme="dark"] .roles-item.es-activo { background: rgba(0, 194, 209, 0.1); }

/* Confirmaciones (SweetAlert2) y avisos flotantes */
[data-theme="dark"] .swal2-popup { background: var(--color-card); color: var(--color-text); border: 1px solid var(--color-border); }
[data-theme="dark"] .swal2-title,
[data-theme="dark"] .swal2-html-container { color: var(--color-text); }
[data-theme="dark"] .swal2-actions .swal2-cancel { background: var(--color-surface-elevated); color: var(--color-text); }
[data-theme="dark"] .swal2-actions .swal2-confirm { background: var(--color-btn-primary-bg); color: #04252a; }

/* Formularios y tablas */
[data-theme="dark"] select.form-input option { background: var(--color-card); color: var(--color-text); }
[data-theme="dark"] ::placeholder { color: var(--color-text-muted); opacity: 1; }
[data-theme="dark"] .data-table tbody tr { border-color: var(--color-border); }
[data-theme="dark"] .table-wrap { scrollbar-color: #334155 transparent; }
[data-theme="dark"] .modal-footer { background: var(--color-card); }
[data-theme="dark"] .pagination .btn:disabled { opacity: .45; }
[data-theme="dark"] .pestana.es-activa { box-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
[data-theme="dark"] .pestana-cuenta { background: rgba(148, 163, 184, .2); }


/* ── Autenticador y política de acceso (BER-068) ── */
[data-theme="dark"] .autenticador-num { color: var(--brand-navy-deep); }

[data-theme="dark"] .bloqueo-aviso {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.3);
    color: #fca5a5;
}

[data-theme="dark"] .bloqueo-aviso .bloqueo-ayuda { color: var(--color-text-soft); }

[data-theme="dark"] .bloqueo-icono {
    background: rgba(248, 113, 113, 0.16);
    color: #fca5a5;
}

/* Select2 (bootstrap-5) con los tokens del tema. Prefijo `body`: el CSS del tema se carga despues de este archivo y empataba en especificidad. */
body .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--color-card);
    color: var(--color-text);
    border-color: var(--color-border);
}
body .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
body .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder { color: var(--color-text); }
body .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder { color: var(--color-text-muted); }
body .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear { color: var(--color-muted); }
body .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear:hover { color: var(--color-danger); }
body .select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--color-card);
    border-color: var(--color-border);
    color: var(--color-text);
}
body .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}
body .select2-container--bootstrap-5 .select2-results__option { color: var(--color-text); background-color: transparent; }
body .select2-container--bootstrap-5 .select2-results__option--highlighted,
body .select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected],
body .select2-container--bootstrap-5 .select2-results__option.select2-results__option--highlighted { background-color: color-mix(in srgb, var(--color-accent-light) 22%, var(--color-card)); color: var(--color-text); }
body .select2-container--bootstrap-5 .select2-results__option--selected,
body .select2-container--bootstrap-5 .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) { background-color: color-mix(in srgb, var(--color-accent-light) 12%, var(--color-card)); color: var(--color-text); font-weight: 600; }
body .select2-container--bootstrap-5 .select2-results__option--disabled,
body .select2-container--bootstrap-5 .select2-results__message { color: var(--color-text-muted); }
body .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b,
body .select2-container--bootstrap-5 .select2-selection--single::after { border-top-color: var(--color-muted); }
body .select2-container--bootstrap-5.select2-container--disabled .select2-selection { background-color: var(--color-surface); opacity: .7; }
html[data-theme="dark"] body .select2-container--bootstrap-5 .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 12px 12px;
}
body .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { padding-right: 2rem; }

/* Servicio + botón «+» compacto en la misma fila */
.servicio-fila { display: flex; align-items: stretch; gap: .4rem; }
.servicio-fila .select2-container { flex: 1 1 auto; min-width: 0; width: auto !important; }
.btn-icono-mas {
    flex: none; width: 2.375rem; min-height: 38px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.25rem; font-weight: 600; line-height: 1;
    border: 1px solid var(--color-border); border-radius: 6px;
    background: var(--color-card); color: var(--color-text);
}
.btn-icono-mas:hover:not(.is-permiso-off) { border-color: var(--color-accent-light); color: var(--color-accent-light); }

/* Fila de 4 columnas (Hora, Descuento, Venta, Neto) */
.form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .form-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .form-grid-4 { grid-template-columns: 1fr; } }

/* Cierre animado de modales: el fondo sigue visible mientras se desvanece y luego `hidden` lo oculta (display discreto) */
.modal-backdrop {
    transition: opacity .25s ease, display .32s allow-discrete;
}
.modal-backdrop[hidden] { opacity: 0; pointer-events: none; }
.modal-backdrop .modal { transition: opacity .32s cubic-bezier(.22, 1, .36, 1), transform .32s cubic-bezier(.22, 1, .36, 1); }
.modal-backdrop[hidden] .modal { opacity: 0; transform: translateY(16px) scale(.97); }
@media (max-width: 767.98px) { .modal-backdrop[hidden] .modal { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
    .modal-backdrop, .modal-backdrop .modal { transition: none !important; }
}

/* Barra de acciones solo-icono de la ficha: usa tokens para verse bien en oscuro y claro */
.presentacion-actions-grid { background: var(--color-surface); border-top-color: var(--color-border); }
.presentacion-action { background: var(--color-card); border-color: var(--color-border); color: var(--color-text-soft); }
.presentacion-action:hover { background: var(--color-surface-elevated); border-color: var(--color-accent-light); color: var(--color-text); }
.presentacion-action.presentacion-action--primary { background: var(--color-accent-light); border-color: var(--color-accent-light); color: #04252a; }

/* Descargo previo a descargar archivos con datos personales: usa tokens, se ve igual de legible en claro y oscuro */
.descargo-texto p { margin: 0 0 .65rem; line-height: 1.5; color: var(--color-text); }
.descargo-casilla { display: flex; gap: .6rem; align-items: flex-start; margin-top: .85rem; padding: .7rem .8rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.descargo-casilla input { margin-top: .2rem; flex: none; }
.descargo-casilla:focus-within { border-color: var(--color-accent-light); }

/* BER-161: contratos. Texto legible en claro y oscuro con los tokens del tema; los desplegables se animan al abrir y cerrar. */
.contrato-texto { max-height: 420px; overflow-y: auto; padding: 14px 18px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-card); color: var(--color-text); line-height: 1.55; scroll-behavior: smooth; }
.contrato-texto h2 { font-size: 1rem; margin: 18px 0 8px; } .contrato-texto p { margin: 0 0 9px; }
.contrato-marca { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: rgba(251, 191, 36, .18); color: #b45309; }
[data-theme="dark"] .contrato-marca { color: #fcd34d; }
.contrato-form { display: grid; gap: 12px; max-width: 560px; }
.contrato-firma { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .4s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; }
.contrato-firma.es-visible { max-height: 900px; opacity: 1; }
.contrato-preview { transition: opacity .25s ease; } .contrato-preview.es-cargando { opacity: .45; }
.contrato-hash { font-family: ui-monospace, monospace; font-size: .75rem; word-break: break-all; }
@media (prefers-reduced-motion: reduce) { .contrato-firma, .contrato-preview { transition: none; } }