/* ==========================================================================
   PayAlfa UI - camada global do painel do lojista (tema claro)
   Carregada pelo header.php DEPOIS do <style> de cada pagina, entao vence a
   cascata. Regra da casa: petroleo e marca, vermelho e erro, verde e dinheiro
   que entrou, ambar e atencao. Papel claro, fio de 1px, sem degrade, sem brilho,
   sem sombra de enfeite. Fonte Public Sans; codigo em IBM Plex Mono.
   ========================================================================== */

:root {
    --pa-bg:        #F3F4F1;
    --pa-bg-2:      #FFFFFF;
    --pa-surface:   #FFFFFF;
    --pa-surface-2: #F7F8F5;
    --pa-surface-3: #ECEEE9;
    --pa-line:      #E4E6E0;
    --pa-line-2:    #D3D6CE;
    --pa-text:      #14181B;
    --pa-text-2:    #4A5258;
    --pa-text-3:    #636B72;
    --pa-brand:     #0D5C63;
    --pa-brand-2:   #0A4B51;
    --pa-brand-3:   #083D42;
    --pa-brand-tint:#E4EFEF;
    --pa-brand-rgb: 13,92,99;
    --pa-ink-rgb:   20,24,27;
    --pa-ok:        #137A43;
    --pa-ok-tint:   #E6F3EA;
    --pa-warn:      #A15C07;
    --pa-warn-tint: #FBF0DC;
    --pa-bad:       #C2331F;
    --pa-bad-tint:  #FBE8E4;
    --pa-r-lg: 10px;
    --pa-r:    6px;
    --pa-r-sm: 4px;
    --pa-font: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pa-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --pa-ease: cubic-bezier(.2,.7,.2,1);

    /* variaveis antigas das paginas apontando pra paleta nova */
    --secondary-black: var(--pa-surface);
    --dark-gray:       var(--pa-surface-2);
    --medium-gray:     var(--pa-line-2);
    --text-gray:       var(--pa-text-2);
    --border-color:    var(--pa-line-2);
    --menu-bg-color:   var(--pa-bg-2);
    --form-control-bg: var(--pa-surface-2);
}

/* ---------- base ---------- */
html body {
    background: var(--pa-bg) !important;
    color: var(--pa-text);
    font-family: var(--pa-font) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .card-title, html body .modal-title {
    font-family: 'Public Sans', sans-serif !important;
    letter-spacing: -0.01em;
}
::selection { background: #CFE3E3; color: var(--pa-text); }
* { scrollbar-width: thin; scrollbar-color: #C9CDC4 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #D5D8D0; border-radius: 10px; border: 2px solid var(--pa-bg); }
::-webkit-scrollbar-thumb:hover { background: #B9BDB4; }
::-webkit-scrollbar-track { background: transparent; }

html body a:focus-visible, html body button:focus-visible, html body .btn:focus-visible,
html body [tabindex]:focus-visible {
    outline: 2px solid var(--pa-brand) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}
html body .text-muted { color: var(--pa-text-3) !important; }
html body .text-success { color: var(--pa-ok) !important; }
html body .text-danger { color: var(--pa-bad) !important; }
html body .text-warning { color: var(--pa-warn) !important; }
html body .text-primary { color: var(--pa-brand) !important; }
html body hr { border-color: var(--pa-line); opacity: 1; }

/* ---------- loader de pagina ---------- */
html body #loader { background: var(--pa-bg) !important; }
html body #loader img { width: 34px; height: 34px; opacity: .8; }

/* ---------- cabecalho ---------- */
html body .app-header {
    background: var(--pa-surface) !important;
    border-bottom: 1px solid var(--pa-line) !important;
    box-shadow: none !important;
}
html body .app-header .header-link {
    color: var(--pa-text-2);
    border-radius: var(--pa-r);
    transition: background .15s ease, color .15s ease;
}
html body .app-header .header-element > .header-link:not(.goal-progress-widget):hover {
    background: var(--pa-surface-2);
    color: var(--pa-text);
}
html body .header-link-icon { font-size: 17px; color: inherit; }
html body .header-icon-badge {
    background: var(--pa-bad) !important;
    box-shadow: 0 0 0 2px var(--pa-bg-2) !important;
    font-weight: 700;
}

/* meta de faturamento */
html body .goal-progress-widget:hover { opacity: 1; }
html body .goal-label { font-size: 12px; font-weight: 500; }
html body .goal-label-text { text-transform: none; letter-spacing: 0; color: var(--pa-text-2); }
html body .goal-label-value { color: var(--pa-text); font-weight: 600; }
html body .goal-progress-bar-wrapper {
    height: 6px; background: var(--pa-surface-3); box-shadow: none; border-radius: 6px;
}
html body .goal-progress-bar-fill {
    background: var(--pa-brand); box-shadow: none; border-radius: 6px; min-width: 6px;
}
html body .goal-progress-bar-fill::after { display: none; }

/* ---------- menu lateral ---------- */
html body .app-sidebar, html body #sidebar.app-sidebar,
html body .main-sidebar-header, html body .main-sidebar {
    background: var(--pa-bg-2) !important;
    border-right: 1px solid var(--pa-line) !important;
    box-shadow: none !important;
}
html body .main-sidebar-header { border-bottom: 1px solid var(--pa-line) !important; border-right: 0 !important; }
html body .main-sidebar { border-right: 0 !important; }
html body .main-sidebar-header .header-logo img { height: 28px !important; max-height: 28px; width: auto; }
/* logo mais claro no fundo escuro (o arquivo e azul fechado) */
html body .header-logo img { filter: none; }
html body .side-menu__item {
    color: var(--pa-text-2) !important;
    border-radius: var(--pa-r) !important;
    margin: 2px 10px !important;
    padding: 9px 12px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    transition: background .15s ease, color .15s ease !important;
}
html body .side-menu__label, html body .side-menu__item.active .side-menu__label { letter-spacing: 0 !important; font-weight: inherit !important; color: inherit !important; }
html body .side-menu__icon { color: var(--pa-text-3) !important; font-size: 16px !important; }
html body .side-menu__item:hover {
    background: var(--pa-surface-2) !important; color: var(--pa-text) !important;
}
html body .side-menu__item:hover .side-menu__icon { color: var(--pa-text-2) !important; }
html body .side-menu__item.active {
    background: var(--pa-brand-tint) !important;
    color: var(--pa-brand-3) !important; font-weight: 600 !important;
}
html body .side-menu__item.active .side-menu__icon { color: var(--pa-brand) !important; }
html body .side-menu__item.active::before { display: none !important; }
html body .slide.has-sub.open > .side-menu__item { background: transparent !important; color: var(--pa-text) !important; }
html body .slide-menu.child1 { position: relative; }
html body .side-menu__item { letter-spacing: 0 !important; }
html body .slide-menu.child1 .side-menu__item {
    font-size: 13px !important; white-space: nowrap; color: var(--pa-text-3) !important;
    padding: 7px 12px 7px 40px !important;
}
html body .slide-menu.child1 .side-menu__item::before { display: none !important; }
html body .slide-menu.child1 .side-menu__item:hover { color: var(--pa-text) !important; background: var(--pa-surface-2) !important; }
html body .slide-menu.child1 .side-menu__item.active {
    color: var(--pa-brand) !important; background: var(--pa-brand-tint) !important;
}
html body .slide-menu .side-menu__label1 { display: none !important; }
html body .side-menu__angle { color: var(--pa-text-3) !important; transition: transform .2s var(--pa-ease) !important; }
.pa-side-title {
    font: 600 11px 'Public Sans', sans-serif; color: var(--pa-text-3);
    padding: 16px 22px 6px; list-style: none;
}
[data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) .pa-side-title,
[data-toggled="close-menu-close"] .pa-side-title { display: none; }

/* ---------- area de conteudo ---------- */
html body .page-header-breadcrumb { margin-top: 1.5rem !important; margin-bottom: 1.25rem !important; }
html body .page-header-breadcrumb .fs-20,
html body .page-header-breadcrumb h1, html body .page-title {
    font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.02em; color: var(--pa-text);
}
html body .sec-label {
    font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--pa-text-2);
}
html body .sec-label::after { background: var(--pa-line); }
html body .sec-label i { color: var(--pa-brand); font-size: 13px; }

/* ---------- cartoes ---------- */
html body .card.custom-card, html body .card {
    background: var(--pa-surface) !important;
    border: 1px solid var(--pa-line) !important;
    border-radius: var(--pa-r-lg) !important;
    box-shadow: none !important;
    color: var(--pa-text);
}
html body .card.custom-card .card-header, html body .card .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--pa-line) !important;
    padding: 14px 18px !important;
}
html body .card.custom-card .card-header::before, html body .card.custom-card .card-title::before { display: none !important; }
html body .card .card-title {
    font-size: 14px !important; font-weight: 600 !important; color: var(--pa-text) !important;
    text-transform: none !important;
}
html body .card .card-footer { background: transparent !important; border-top: 1px solid var(--pa-line) !important; }

/* ---------- botoes: cor cheia, sem pulo, so o tom muda ---------- */
html body .btn {
    text-transform: none !important; letter-spacing: 0 !important;
    border-radius: var(--pa-r) !important;
    font-weight: 600; font-size: 13.5px; padding: 9px 16px;
    box-shadow: none !important; transform: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease !important;
}
html body .btn:active { opacity: .85; }
/* botao cheio usa um azul mais fechado que a cor de marca: branco sobre var(--pa-brand) dava 2,9:1 (minimo 4,5:1) */
html body .btn-primary, html body #notificationModal .btn-primary {
    background: var(--pa-brand) !important; border: 1px solid var(--pa-brand) !important; color: #fff !important;
}
html body .btn-primary:hover, html body #notificationModal .btn-primary:hover {
    background: var(--pa-brand-2) !important; border-color: var(--pa-brand-2) !important;
}
html body .btn-outline-primary { border: 1px solid var(--pa-line-2) !important; color: var(--pa-text) !important; background: transparent !important; }
html body .btn-outline-primary:hover { background: var(--pa-surface-2) !important; border-color: rgba(var(--pa-ink-rgb),0.18) !important; color: var(--pa-text) !important; }
html body .btn-secondary, html body .btn-light, html body .btn-outline-secondary {
    background: var(--pa-surface-2) !important; border: 1px solid var(--pa-line-2) !important; color: var(--pa-text) !important;
}
html body .btn-secondary:hover, html body .btn-light:hover, html body .btn-outline-secondary:hover { background: var(--pa-surface-3) !important; }
html body .btn-success { background: var(--pa-ok) !important; border: 1px solid var(--pa-ok) !important; }
html body .btn-success:hover { background: #0F6436 !important; border-color: #0F6436 !important; }
html body .btn-danger { background: var(--pa-bad) !important; border: 1px solid var(--pa-bad) !important; }
html body .btn-danger:hover { background: #A92A18 !important; border-color: #A92A18 !important; }
html body .btn-warning { background: var(--pa-warn) !important; border: 1px solid var(--pa-warn) !important; color: #fff !important; }
html body .btn-warning:hover { background: #8A4E05 !important; }
html body .btn-info { background: var(--pa-surface-3) !important; border: 1px solid var(--pa-line-2) !important; color: var(--pa-text) !important; }
/* botao desativado: cinza de verdade (petroleo lavado com texto branco dava 2:1 de contraste) */
html body .btn:disabled, html body .btn.disabled {
    background: var(--pa-surface-3) !important; border-color: var(--pa-line-2) !important; color: var(--pa-text-3) !important;
    opacity: 1 !important; cursor: not-allowed; box-shadow: none !important;
}
html body .btn.pa-loading { pointer-events: none; opacity: .75; }
html body .btn-close { filter: none; opacity: .6; }
html body .btn-close:hover { opacity: 1; }

/* ---------- formularios ---------- */
html body .form-control, html body .form-select, html body .input-group-text,
html body .choices__inner, html body textarea.form-control {
    background-color: var(--pa-surface-2) !important;
    border: 1px solid var(--pa-line-2) !important;
    color: var(--pa-text) !important;
    border-radius: var(--pa-r) !important;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
html body .form-control::placeholder { color: var(--pa-text-3) !important; opacity: 1; }
html body .form-control:hover, html body .form-select:hover { border-color: rgba(var(--pa-ink-rgb),0.18) !important; }
html body .form-control:focus, html body .form-select:focus {
    border-color: var(--pa-brand) !important;
    box-shadow: 0 0 0 3px rgba(var(--pa-brand-rgb),0.14) !important;
    background-color: var(--pa-surface-2) !important;
}
html body .form-control:disabled, html body .form-control[readonly] { color: var(--pa-text-2) !important; background-color: var(--pa-surface) !important; }
html body .form-label, html body label { color: var(--pa-text-2); font-size: 13px; font-weight: 500; }
html body .form-check-input { background-color: var(--pa-surface-3); border-color: var(--pa-line-2); }
html body .form-check-input:checked { background-color: var(--pa-brand); border-color: var(--pa-brand); }
html body .form-text { color: var(--pa-text-3); }
html body .input-group > .form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
html body .input-group > :not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
html body input:-webkit-autofill {
    -webkit-text-fill-color: var(--pa-text) !important;
    box-shadow: 0 0 0 100px var(--pa-surface-2) inset !important;
    caret-color: var(--pa-text);
}

/* ---------- tabelas ---------- */
html body .table { color: var(--pa-text) !important; border-color: var(--pa-line) !important; margin-bottom: 0; --bs-table-bg: transparent; }
html body .table > :not(caption) > * > * {
    background: transparent !important; color: inherit; border-bottom: 1px solid var(--pa-line) !important;
    padding: 12px 14px; box-shadow: none !important; vertical-align: middle;
}
html body .table thead th {
    font-size: 12px !important; font-weight: 600 !important; color: var(--pa-text-3) !important;
    text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap;
    background: var(--pa-bg-2) !important; border-bottom: 1px solid var(--pa-line-2) !important;
}
html body .table tbody tr { transition: background .12s ease; }
html body .table tbody tr:hover > * { background: var(--pa-surface-2) !important; }
html body .table tbody tr:last-child > * { border-bottom: 0 !important; }
html body .table-responsive { border-radius: var(--pa-r); }
html body .dataTables_wrapper .dataTables_info, html body .dataTables_wrapper .dataTables_length,
html body .dataTables_wrapper .dataTables_filter { color: var(--pa-text-3) !important; font-size: 13px; }
html body .dataTables_wrapper .dataTables_length select, html body .dataTables_wrapper .dataTables_filter input {
    background: var(--pa-surface-2) !important; border: 1px solid var(--pa-line-2) !important;
    color: var(--pa-text) !important; border-radius: var(--pa-r) !important; padding: 6px 10px;
}
html body .dataTables_empty { color: var(--pa-text-3) !important; padding: 44px 12px !important; }
html body .pagination .page-link, html body .dataTables_paginate .paginate_button {
    background: transparent !important; border: 1px solid var(--pa-line-2) !important;
    color: var(--pa-text-2) !important; border-radius: var(--pa-r) !important;
    margin: 0 2px; font-size: 13px; box-shadow: none !important;
}
html body .pagination .page-link:hover, html body .dataTables_paginate .paginate_button:hover {
    background: var(--pa-surface-2) !important; color: var(--pa-text) !important;
}
html body .pagination .page-item.active .page-link, html body .dataTables_paginate .paginate_button.current {
    background: var(--pa-brand) !important; border-color: var(--pa-brand) !important; color: #fff !important;
}
html body .pagination .page-item.disabled .page-link, html body .dataTables_paginate .paginate_button.disabled { opacity: .4; }

/* ---------- selos ---------- */
html body .badge { font-weight: 600; letter-spacing: 0; border-radius: 6px; padding: 4px 8px; }
html body .badge.bg-success, html body .badge.bg-success-transparent { background: var(--pa-ok-tint) !important; color: var(--pa-ok) !important; }
html body .badge.bg-danger, html body .badge.bg-danger-transparent { background: var(--pa-bad-tint) !important; color: var(--pa-bad) !important; }
html body .badge.bg-warning, html body .badge.bg-warning-transparent { background: var(--pa-warn-tint) !important; color: var(--pa-warn) !important; }
html body .badge.bg-primary, html body .badge.bg-info, html body .badge.bg-primary-transparent { background: var(--pa-brand-tint) !important; color: var(--pa-brand) !important; }
html body .badge.bg-secondary, html body .badge.bg-light { background: var(--pa-surface-3) !important; color: var(--pa-text-2) !important; }
html body .header-icon-badge.badge { color: #fff !important; }

/* ---------- alertas ---------- */
html body .alert { border-radius: var(--pa-r); border: 1px solid var(--pa-line-2); background: var(--pa-surface-2); color: var(--pa-text); font-size: 13.5px; }
html body .alert-success { background: var(--pa-ok-tint) !important; border-color: rgba(52,199,123,.25) !important; color: #0F5B31 !important; }
html body .alert-danger  { background: var(--pa-bad-tint) !important; border-color: rgba(240,82,79,.25) !important; color: #8E2414 !important; }
html body .alert-warning { background: var(--pa-warn-tint) !important; border-color: rgba(245,165,36,.25) !important; color: #7A4604 !important; }
html body .alert-info, html body .alert-primary { background: var(--pa-brand-tint) !important; border-color: rgba(var(--pa-brand-rgb),0.14) !important; color: var(--pa-brand-3) !important; }

/* ---------- modal, dropdown, tooltip ---------- */
html body .modal-backdrop { background: var(--pa-text); }
html body .modal-backdrop.show { opacity: .45; }
html body .modal-content, html body #notificationModal .modal-content {
    background: var(--pa-surface) !important;
    border: 1px solid var(--pa-line-2) !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 80px rgba(var(--pa-ink-rgb),0.1) !important;
}
html body .modal-header, html body #notificationModal .modal-header {
    background: transparent !important; border-bottom: 1px solid var(--pa-line) !important; padding: 16px 20px !important;
}
html body .modal-title { font-size: 16px !important; font-weight: 600 !important; }
html body .modal-footer, html body #notificationModal .modal-footer {
    background: transparent !important; border-top: 1px solid var(--pa-line) !important; padding: 14px 20px !important;
}
html body .modal.fade .modal-dialog { transform: translateY(10px) scale(.985); transition: transform .22s var(--pa-ease), opacity .22s ease; }
html body .modal.show .modal-dialog { transform: none; }
html body .list-group-item { border-color: var(--pa-line) !important; }
html body .list-group-item:hover { background: var(--pa-surface-2); }
html body .list-group-item a:hover { color: var(--pa-text) !important; }

html body .dropdown-menu {
    background: var(--pa-surface) !important; border: 1px solid var(--pa-line-2) !important;
    border-radius: 10px !important; box-shadow: 0 16px 48px rgba(var(--pa-ink-rgb),0.1) !important; padding: 6px !important;
    min-width: 200px;
}
html body .dropdown-item, html body .dropdown-item.active, html body .dropdown-item:focus {
    color: var(--pa-text-2) !important; border-radius: 6px; padding: 9px 10px !important; font-size: 13.5px; font-weight: 500;
    background: transparent !important;
}
html body .dropdown-item:hover { background: var(--pa-surface-2) !important; color: var(--pa-text) !important; }
html body .dropdown-item[href="logout"]:hover { color: var(--pa-bad) !important; }
html body .dropdown-divider { border-color: var(--pa-line) !important; }
html body .tooltip .tooltip-inner { background: #232B38; color: #FFFFFF; font-size: 12px; border-radius: 6px; padding: 6px 9px; }
html body .tooltip .tooltip-arrow::before { border-top-color: #232B38; border-bottom-color: #232B38; }

/* ---------- aviso flutuante (toast) ---------- */
/* estrutura global (23/09): antes cada tela trazia a sua copia; nas que nao traziam, a regra do
   Bootstrap .toast:not(.show){display:none} escondia TODO aviso (Inicio, Links, cripto, interna, webhooks) */
html body .toast-container { z-index: 10000; position: fixed; display: flex; flex-direction: column; width: calc(100vw - 32px); pointer-events: none; }
html body .toast-container .toast { position: relative; display: block !important; width: 100%; overflow: hidden; pointer-events: auto; font-family: var(--pa-font, 'Public Sans'), sans-serif; }
html body .toast-container .toast-content { display: flex; align-items: center; }
html body .toast-container .icon { display: flex; align-items: center; justify-content: center; flex: none; }
html body .toast-container .message { display: flex; flex-direction: column; flex: 1; min-width: 0; }
html body .toast-container .message-text { overflow-wrap: anywhere; }
html body .toast-container .toast-close { position: absolute; cursor: pointer; }
html body .toast-container .toast .progress { position: absolute; bottom: 0; left: 0; width: 100%; border-radius: 0; }
html body .toast-container .toast .progress::before { content: ""; position: absolute; bottom: 0; right: 0; height: 100%; width: 100%; }
html body .toast-container .toast .progress.active::before { animation: pa-toast-progress 5s linear forwards; }
@keyframes pa-toast-progress { 100% { right: 100%; } }
html body .toast-container { top: 16px; right: 16px; max-width: 380px; gap: 8px; }
html body .toast-container .toast {
    background: var(--pa-surface-2) !important;
    border: 1px solid var(--pa-line-2) !important;
    border-left: 1px solid var(--pa-line-2) !important;
    border-radius: 10px !important;
    box-shadow: 0 16px 44px rgba(var(--pa-ink-rgb),0.1) !important;
    padding: 12px 38px 14px 12px !important;
    transform: translateY(-8px); opacity: 0;
    transition: transform .25s var(--pa-ease), opacity .2s ease !important;
}
html body .toast-container .toast.active { transform: none; opacity: 1; }
html body .toast-container .toast .icon {
    width: 32px !important; height: 32px !important; border-radius: 8px !important; font-size: 16px !important;
    background: var(--pa-brand-tint) !important; color: var(--pa-brand) !important;
}
html body .toast-container .toast .icon .toast-check {
    background: transparent !important; width: auto; height: auto; font-size: 16px; color: inherit;
}
html body .toast-container .toast.pa-ok .icon   { background: var(--pa-ok-tint) !important;   color: var(--pa-ok) !important; }
html body .toast-container .toast.pa-bad .icon  { background: var(--pa-bad-tint) !important;  color: var(--pa-bad) !important; }
html body .toast-container .toast.pa-warn .icon { background: var(--pa-warn-tint) !important; color: var(--pa-warn) !important; }
html body .toast-container .message { margin: 0 12px; }
html body .toast-container .message-text.text-1 { font-size: 14px; font-weight: 600; color: var(--pa-text); }
html body .toast-container .message-text.text-2 { font-size: 13px; color: var(--pa-text-2); }
html body .toast-container .toast .progress { height: 2px; background: transparent; }
html body .toast-container .toast .progress::before { background: var(--pa-brand); }
html body .toast-container .toast.pa-ok .progress::before   { background: var(--pa-ok); }
html body .toast-container .toast.pa-bad .progress::before  { background: var(--pa-bad); }
html body .toast-container .toast.pa-warn .progress::before { background: var(--pa-warn); }
html body .toast-close { top: 8px; right: 10px; font-size: 18px; color: var(--pa-text-3); }

/* ---------- barra de abas do celular ---------- */
.pa-tabs { display: none; }
@media (max-width: 767px) {
    .pa-tabs {
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
        background: var(--pa-surface);
        border-top: 1px solid var(--pa-line);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }
    .pa-tab {
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 6px 2px; border: 0; background: none; text-decoration: none;
        color: var(--pa-text-3); font: 500 10.5px 'Public Sans', sans-serif; border-radius: 8px;
        -webkit-tap-highlight-color: transparent; cursor: pointer;
    }
    .pa-tab i { font-size: 19px; line-height: 1; }
    .pa-tab.on { color: var(--pa-brand); }
    .pa-tab:active { background: var(--pa-surface-2); }
    html body .main-content.app-content { padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
    html body .toast-container { top: 12px; right: 12px; left: 12px; width: auto; max-width: none; }
    html body .page-header-breadcrumb .fs-20 { font-size: 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .pa-rise, .pa-skel, .pa-cmd, .pa-cmd-back.on { animation: none !important; }
    html body .modal.fade .modal-dialog { transition: none; transform: none; }
    .pa-bar { transition: none; }
}

/* ==========================================================================
   Painel inicial do lojista
   ========================================================================== */
.pa-dash { padding-bottom: 32px; }
.pa-dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pa-hello-row { display: flex; align-items: center; gap: 6px; }
html body .pa-hello { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--pa-text); }
.pa-eye { background: none; border: 0; padding: 6px; border-radius: 8px; color: var(--pa-text-3); display: inline-flex; cursor: pointer; transition: background .15s ease, color .15s ease; }
.pa-eye:hover { background: var(--pa-surface-2); color: var(--pa-text); }
html body .pa-sub { margin: 4px 0 0; font-size: 13.5px; font-weight: 400 !important; color: var(--pa-text-2) !important; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pa-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pa-text-3); }
.pa-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--pa-ok); }
.pa-live.is-off i { background: var(--pa-warn); }
.pa-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pa-actions .btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; font-size: 13.5px; }
.pa-actions .btn i { font-size: 15px; }
html body #btnActivatePush { border-radius: var(--pa-r) !important; font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; opacity: 1 !important; box-shadow: none !important; color: var(--pa-text-2) !important; }
html body #btnActivatePush.btn-dark { background: transparent !important; border: 1px solid var(--pa-line) !important; color: var(--pa-ok) !important; }

.pa-note {
    display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px;
    background: var(--pa-warn-tint); border: 1px solid rgba(245,165,36,.22); border-radius: var(--pa-r);
    padding: 10px 12px; color: #6E4204;
}
.pa-note[hidden] { display: none; }
.pa-note > i { color: var(--pa-warn); font-size: 15px; margin-top: 1px; }
.pa-note p { margin: 0; font-size: 13px; line-height: 1.5; flex: 1; color: inherit; }
.pa-note-x { background: none; border: 0; color: inherit; opacity: .6; padding: 2px 4px; font-size: 12px; cursor: pointer; border-radius: 4px; }
.pa-note-x:hover { opacity: 1; }

.pa-h2 { font-size: 15px !important; font-weight: 600 !important; margin: 0 !important; color: var(--pa-text); letter-spacing: -0.01em; }
.pa-link { font-size: 13px; font-weight: 500; color: var(--pa-brand); text-decoration: none; white-space: nowrap; }
.pa-link:hover { color: var(--pa-brand-2); text-decoration: underline; }
.pa-icon-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--pa-line-2); background: transparent; color: var(--pa-text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, color .15s ease; }
.pa-icon-btn:hover { background: var(--pa-surface-3); color: var(--pa-text); }
@keyframes pa-spin { to { transform: rotate(360deg); } }
.pa-icon-btn.spinning i { display: inline-block; animation: pa-spin .7s var(--pa-ease); }

.pa-top { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 16px; margin-bottom: 16px; }
.pa-balance, .pa-kpis, .pa-panel {
    background: var(--pa-surface); border: 1px solid var(--pa-line); border-radius: var(--pa-r-lg);
}
.pa-balance { padding: 20px; display: flex; flex-direction: column; }
.pa-balance-label { font-size: 13px; font-weight: 500; color: var(--pa-text-2); }
.pa-balance-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 18px; }
.pa-balance-value { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--pa-text); }
.pa-balance.is-blocked { border-color: rgba(240,82,79,.3); }

/* lista estilo comprovante: rotulo, pontilhado, valor */
.pa-recibo { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pa-recibo > div { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.pa-recibo dt { order: 0; font-weight: 400; color: var(--pa-text-2); white-space: nowrap; }
.pa-recibo dd { order: 2; margin: 0; font-weight: 600; color: var(--pa-text); white-space: nowrap; }
.pa-recibo > div::before { content: ""; order: 1; flex: 1; border-bottom: 1px dotted rgba(var(--pa-ink-rgb),0.144); transform: translateY(-3px); min-width: 12px; }
.pa-recibo .is-bad dd { color: var(--pa-bad); }
.pa-recibo dd.is-in { color: var(--pa-ok); }
.pa-recibo dd.is-out { color: var(--pa-text); }  /* saida nao e erro: vermelho so para alerta */
.pa-recibo .is-total { border-top: 1px solid var(--pa-line); padding-top: 12px; margin-top: 2px; }
.pa-recibo .is-total dt { color: var(--pa-text); font-weight: 600; }
.pa-recibo .is-total dd { font-size: 16px; }
.pa-recibo-link { color: var(--pa-brand); font-size: 12px; margin-left: 4px; }
.pa-recibo--wide { gap: 12px; }

.pa-goal { display: block; margin-top: auto; padding-top: 18px; text-decoration: none; }
.pa-goal-top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--pa-text-2); margin-bottom: 7px; }
.pa-goal-top span:last-child { color: var(--pa-text); font-weight: 600; }
.pa-goal-bar { height: 6px; border-radius: 6px; background: var(--pa-surface-3); overflow: hidden; }
.pa-goal-bar i { display: block; height: 100%; background: var(--pa-brand); border-radius: 6px; transition: width .8s var(--pa-ease); }
.pa-goal:hover .pa-goal-top span:first-child { color: var(--pa-text); }

.pa-kpis { padding: 18px 20px 20px; display: flex; flex-direction: column; }
.pa-kpis-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pa-seg { display: inline-flex; background: var(--pa-bg-2); border: 1px solid var(--pa-line); border-radius: 9px; padding: 3px; gap: 2px; }
.pa-seg button { border: 0; background: transparent; color: var(--pa-text-2); font: 500 13px 'Public Sans', sans-serif; padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: background .15s ease, color .15s ease; white-space: nowrap; }
.pa-seg button:hover { color: var(--pa-text); }
.pa-seg button.on { background: var(--pa-surface); color: var(--pa-text); font-weight: 600; box-shadow: 0 0 0 1px var(--pa-line-2); }
.pa-kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--pa-line); border: 1px solid var(--pa-line); border-radius: 10px; overflow: hidden; flex: 1; }
.pa-kpi { background: var(--pa-surface); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pa-kpi-label { font-size: 13px; color: var(--pa-text-2); display: inline-flex; align-items: center; gap: 6px; }
.pa-kpi-label i { font-size: 12px; color: var(--pa-text-3); cursor: help; }
.pa-kpi-value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--pa-text); line-height: 1.15; align-self: flex-start; min-width: 80px; }
.pa-kpi-delta { font-size: 12.5px; color: var(--pa-text-3); display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px; min-height: 18px; }
.pa-kpi-delta i { font-size: 16px; line-height: 1; margin: 0 -2px 0 -4px; }
.pa-kpi-delta b { font-weight: 600; }
.pa-kpi-delta.is-up b, .pa-kpi-delta.is-up i { color: var(--pa-ok); }
.pa-kpi-delta.is-down b, .pa-kpi-delta.is-down i { color: var(--pa-bad); }

.pa-mid { display: grid; grid-template-columns: 1fr minmax(320px, 400px); gap: 16px; align-items: start; }
.pa-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pa-panel { min-width: 0; overflow: hidden; }
.pa-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px 0; }
.pa-panel-sub { font-size: 12.5px; color: var(--pa-text-3); margin-top: 3px; }
.pa-legend { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pa-legend-item { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--pa-text-2); font: 500 13px 'Public Sans', sans-serif; padding: 6px 10px; border-radius: 6px; cursor: pointer; transition: background .15s ease, opacity .15s ease; }
.pa-legend-item i { width: 10px; height: 10px; border-radius: 3px; }
.pa-legend-item:hover { background: var(--pa-surface-2); }
.pa-legend-item:not(.on) { opacity: .4; text-decoration: line-through; }
.pa-report { display: inline-flex !important; align-items: center; gap: 7px; height: 32px; padding: 0 12px !important; font-size: 13px !important; margin-left: 6px; }
.pa-chart-wrap { position: relative; padding: 6px 10px 6px 4px; min-height: 292px; }
#chart-dash { transition: opacity .2s ease; min-height: 280px; }
.pa-chart-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; pointer-events: none; }
.pa-chart-empty[hidden] { display: none; }
.pa-chart-empty strong { font-size: 14px; font-weight: 600; color: var(--pa-text); }
.pa-chart-empty span { font-size: 13px; color: var(--pa-text-3); }
html body .apexcharts-tooltip.apexcharts-theme-dark { background: var(--pa-surface-3) !important; border: 1px solid var(--pa-line-2) !important; box-shadow: 0 12px 32px rgba(var(--pa-ink-rgb),0.1) !important; border-radius: 8px !important; }
html body .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title { background: transparent !important; border-bottom: 1px solid var(--pa-line) !important; font-weight: 600; }
.pa-month { padding: 16px 20px 20px; }

.pa-today { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--pa-line); border-top: 1px solid var(--pa-line); border-bottom: 1px solid var(--pa-line); margin-top: 14px; }
.pa-today > div { background: var(--pa-surface); padding: 14px 20px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pa-today span { font-size: 12.5px; color: var(--pa-text-2); }
.pa-today strong { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--pa-text); }
.pa-today strong.is-in { color: var(--pa-ok); }
.pa-today small { font-size: 12px; color: var(--pa-text-3); }
.pa-tx { list-style: none; margin: 0; padding: 6px 8px 8px; }
.pa-tx-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; transition: background .12s ease; }
.pa-tx-item:hover { background: var(--pa-surface-2); }
.pa-tx-ico { width: 34px; height: 34px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; background: var(--pa-surface-3); color: var(--pa-text-2); }
.pa-tx-ico.is-in { background: var(--pa-ok-tint); color: var(--pa-ok); }
.pa-tx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pa-tx-name { font-size: 13.5px; font-weight: 500; color: var(--pa-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-tx-doc { font-size: 12px; color: var(--pa-text-3); display: flex; align-items: center; gap: 4px; }
.pa-tx-side { text-align: right; display: flex; flex-direction: column; gap: 1px; flex: none; }
.pa-tx-amount { font-size: 13.5px; font-weight: 600; color: var(--pa-text); white-space: nowrap; }
.pa-tx-amount.is-in { color: var(--pa-ok); }
.pa-tx-meta { font-size: 11.5px; color: var(--pa-text-3); white-space: nowrap; }
html body .btn-copy-pix-key { background: none; border: 0; padding: 2px; color: var(--pa-text-3); cursor: pointer; display: inline-flex; border-radius: 4px; opacity: 0; transition: opacity .12s ease, color .12s ease; }
.pa-tx-item:hover .btn-copy-pix-key, html body .btn-copy-pix-key:focus-visible, html body .btn-copy-pix-key.copied { opacity: 1; }
html body .btn-copy-pix-key:hover { color: var(--pa-text); }
html body .btn-copy-pix-key .icon-check { display: none; }
html body .btn-copy-pix-key.copied .icon-clipboard { display: none; }
html body .btn-copy-pix-key.copied .icon-check { display: inline; color: var(--pa-ok); }
@media (hover: none) { html body .btn-copy-pix-key { opacity: 1; } }

.pa-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 40px 20px 44px; }
.pa-empty > i { font-size: 26px; color: var(--pa-text-3); margin-bottom: 4px; }
.pa-empty strong { font-size: 14px; font-weight: 600; color: var(--pa-text); }
.pa-empty span { font-size: 13px; color: var(--pa-text-3); max-width: 260px; }
.pa-empty .btn { margin-top: 10px; }

html body.privacy-mode .sensitive-masked { letter-spacing: 1px; color: var(--pa-text-3) !important; }

@media (max-width: 1199px) {
    .pa-top { grid-template-columns: 1fr; }
    .pa-mid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .pa-dash-head { align-items: flex-start; }
    html body .pa-hello { font-size: 21px; }
    .pa-actions { width: 100%; }
    .pa-actions .btn-primary, .pa-actions .btn-secondary { flex: 1; justify-content: center; }
    .pa-actions #btnActivatePush { order: 3; width: 100%; justify-content: center; }
    .pa-balance-value { font-size: 30px; }
    .pa-kpi { padding: 14px; }
    .pa-kpi-value { font-size: 19px; min-width: 0; }
    .pa-kpi-delta { font-size: 11.5px; }
    .pa-seg { width: 100%; }
    .pa-seg button { flex: 1; padding: 7px 4px; }
    .pa-panel-head { padding: 14px 16px 0; }
    .pa-month { padding: 14px 16px 16px; }
    .pa-today > div { padding: 12px 16px; }
    .pa-legend { width: 100%; }
    .pa-report { margin-left: auto; }
    .pa-recibo > div { font-size: 13px; }
}
.pa-recibo-hint { font-size: 11.5px; color: var(--pa-text-3); margin-left: 4px; }

.pa-search-btn { align-self: center; }
html body .app-header .header-element { align-items: center; }
@media (max-width: 767px) {
    .pa-tx-liq { display: none; }
    .pa-tx-item { padding: 10px 8px; }
}

/* botao "Ir para a Loja" no estado vazio: o icone herdava o tamanho gigante do icone decorativo */
html body .btn-shop { display: inline-flex !important; align-items: center; gap: 8px; background: var(--pa-brand) !important; color: #fff !important; border-radius: var(--pa-r) !important; padding: 10px 16px !important; font-weight: 600; font-size: 14px; text-decoration: none; box-shadow: none !important; transform: none !important; transition: background-color .15s ease !important; }
html body .btn-shop:hover { background: var(--pa-brand-2) !important; }
html body .btn-shop i { font-size: 16px !important; margin: 0 !important; color: inherit !important; opacity: 1 !important; display: inline !important; }

/* ==========================================================================
   Segunda rodada (auditoria tela a tela, 21/09/2026)
   ========================================================================== */

/* contraste: o texto terciario passava de 3,9:1 pra 5,1:1 sobre a superficie */
:root { --pa-text-3: #636B72; --body-bg-rgb: 243,244,241; --light-rgb: 247,248,245; }

/* botoes e campos herdam a Inter (nas telas avulsas os <button> saiam em Arial) */
html body button, html body input, html body select, html body textarea { font-family: inherit; }

/* Inter em tudo: titulos e numeros ainda vinham em Space Grotesk 800 */
html body .fs-18, html body .fs-20, html body .fs-25,
html body .page-header-breadcrumb, html body .page-header-breadcrumb *:not(i):not([class^="ri-"]):not([class*=" ri-"]):not(.bi), html body .lim-value {
    font-family: 'Public Sans', sans-serif !important;
}
html body .card-body .fs-20, html body .lim-value { font-weight: 700 !important; letter-spacing: -0.02em; }

/* pagina curta nao flutua mais no meio da tela: o titulo fica sempre na mesma altura */
html body .page { justify-content: flex-start !important; }

/* cartoes nao pulam no hover (resto do tema antigo) */
html body .card, html body .card:hover, html body .card.custom-card, html body .card.custom-card:hover {
    transform: none !important; transition: border-color .15s ease !important;
}

/* o hifen de "Segunda-feira" saia largo por causa dos numeros tabulares */
html body .pa-sub { font-feature-settings: "cv11" 1; }
.pa-live { font-feature-settings: "tnum" 1, "cv11" 1; }

/* selo do sino nao cobre mais o icone */
html body .header-icon-badge { top: -3px !important; right: 2px !important; min-width: 16px; padding: 2px 5px !important; font-size: 10px !important; line-height: 12px !important; }
@media (max-width: 767px) { html body .header-icon-badge { top: 6px !important; right: 4px !important; } }

/* ---------- X de fechar dos modais: visivel no escuro e com area de toque ---------- */
html body .btn-close {
    filter: none !important; opacity: .7; width: 36px !important; height: 36px !important; padding: 0 !important;
    border-radius: 8px; box-sizing: border-box;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234A5258'%3E%3Cpath d='M2.1 2.1a.5.5 0 0 1 .7 0L8 7.3l5.2-5.2a.5.5 0 0 1 .7.7L8.7 8l5.2 5.2a.5.5 0 0 1-.7.7L8 8.7l-5.2 5.2a.5.5 0 0 1-.7-.7L7.3 8 2.1 2.8a.5.5 0 0 1 0-.7z'/%3E%3C/svg%3E") center / 13px 13px no-repeat !important;
    transition: background-color .15s ease, opacity .15s ease;
}
html body .btn-close:hover { opacity: 1; background-color: var(--pa-surface-2) !important; }
html body .modal-header .btn-close { margin: -6px -8px -6px auto !important; }
@media (pointer: coarse) { html body .modal-header .btn-close { width: 40px !important; height: 40px !important; } }

/* ---------- botao principal que vinha com class="form-control btn ..." (parecia um campo cinza) ---------- */
html body .form-control.btn, html body input.form-control.btn-primary, html body .form-control.btn-generate-red, html body .form-control.btn-copy-red {
    background-color: var(--pa-brand) !important; border: 1px solid var(--pa-brand) !important; color: #fff !important;
    font-weight: 600 !important; min-height: 44px; cursor: pointer; text-align: center;
}
html body .form-control.btn:hover, html body input.form-control.btn-primary:hover { background-color: var(--pa-brand-2) !important; border-color: var(--pa-brand-2) !important; }
html body .form-control.btn:disabled, html body .form-control.btn.disabled, html body input.form-control.btn-primary:disabled {
    background-color: var(--pa-surface-3) !important; border-color: var(--pa-line-2) !important; color: var(--pa-text-3) !important; opacity: 1 !important; cursor: not-allowed;
}
html body .form-control.btn.btn-secondary, html body .form-control.btn.btn-outline-secondary {
    background-color: var(--pa-surface-2) !important; border-color: var(--pa-line-2) !important; color: var(--pa-text) !important;
}
html body .form-control.btn.btn-danger { background-color: var(--pa-bad) !important; border-color: var(--pa-bad) !important; }
html body .form-control.btn.btn-success { background-color: var(--pa-ok) !important; border-color: var(--pa-ok) !important; }

/* rodape dos modais: botao de largura total, mesmo padrao nos irmaos */
html body #modalConteudo .modal-footer > [class*="col-"] { flex: 1 1 100%; width: 100%; max-width: 100%; margin: 0; }
html body #modalConteudo .modal-footer > [class*="col-"] .btn { width: 100%; min-height: 44px; }
html body .modal-content .list-group-item { background: transparent !important; }
@media (max-width: 767px) { html body #modalConteudo .btn { min-height: 44px; } }

/* caixas do PIN */
html body .box_code { width: 44px; height: 48px; padding: 0 !important; font-size: 18px; text-align: center; }

/* ---------- selo de status (uso: <span class="pa-st is-ok">Pago</span>) ---------- */
.pa-st {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 6px;
    font: 600 12px 'Public Sans', sans-serif; white-space: nowrap; border: 0; cursor: default;
    background: var(--pa-surface-3); color: var(--pa-text-2);
}
.pa-st i { font-size: 13px; }
.pa-st.is-ok   { background: var(--pa-ok-tint);    color: var(--pa-ok); }
.pa-st.is-warn { background: var(--pa-warn-tint);  color: var(--pa-warn); }
.pa-st.is-bad  { background: var(--pa-bad-tint);   color: var(--pa-bad); }
.pa-st.is-info { background: var(--pa-brand-tint); color: var(--pa-brand); }

/* ---------- tabelas de extrato ---------- */
html body .dataTables_wrapper .dataTables_length select {
    background-color: var(--pa-surface-2) !important;
    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='%239BA6B7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3 6 5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 9px center !important; background-size: 12px 12px !important;
    padding-right: 30px !important; -webkit-appearance: none; appearance: none; min-width: 72px;
}
/* paginacao: a borda ficava dupla (no <li> e no <a>) */
html body .dataTables_paginate li.paginate_button, html body .dataTables_paginate li.paginate_button:hover,
html body .dataTables_paginate li.paginate_button.current, html body .dataTables_paginate li.paginate_button.disabled {
    border: 0 !important; background: none !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; box-shadow: none !important;
}
html body .dataTables_paginate .page-link { min-height: 36px; padding: 8px 12px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
html body .dataTables_paginate .page-item.disabled .page-link { opacity: .45; }
@media (max-width: 767px) {
    html body .dataTables_paginate .page-link { min-width: 40px; min-height: 40px; font-size: 14px; }
    html body .dataTables_wrapper .dataTables_filter, html body .dataTables_wrapper .dataTables_filter label { width: 100%; text-align: left; }
    html body .dataTables_wrapper .dataTables_filter input { width: 100%; margin: 6px 0 0; }
}
/* linha-filha do modo responsivo do DataTables (celular) */
html body table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }
html body table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom: 1px solid var(--pa-line) !important; padding: 9px 0 !important; display: flex; justify-content: space-between; gap: 12px; }
html body table.dataTable > tbody > tr.child span.dtr-title { color: var(--pa-text-3); font-weight: 500; min-width: 0; }
html body table.dataTable > tbody > tr.child span.dtr-data { text-align: right; word-break: break-word; }
html body table.dataTable.dtr-column > tbody > tr > td.dtr-control::before,
html body table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before {
    background-color: var(--pa-surface-3) !important; border: 1px solid var(--pa-line-2) !important; box-shadow: none !important; color: var(--pa-text) !important;
}

/* ---------- calendario (flatpickr) ---------- */
html body .flatpickr-calendar {
    background: var(--pa-surface) !important; border: 1px solid var(--pa-line-2) !important; border-radius: 12px !important;
    box-shadow: 0 16px 48px rgba(var(--pa-ink-rgb),0.1) !important; font-family: 'Public Sans', sans-serif !important;
}
html body .flatpickr-calendar::before, html body .flatpickr-calendar::after { display: none !important; }
html body .flatpickr-months .flatpickr-month, html body .flatpickr-current-month, html body .flatpickr-monthDropdown-months,
html body .flatpickr-current-month input.cur-year { color: var(--pa-text) !important; fill: var(--pa-text) !important; background: transparent !important; font-weight: 600 !important; }
html body .flatpickr-months .flatpickr-prev-month svg, html body .flatpickr-months .flatpickr-next-month svg { fill: var(--pa-text-2) !important; }
html body span.flatpickr-weekday { color: var(--pa-text-3) !important; font-weight: 500 !important; background: transparent !important; }
html body .flatpickr-day { color: var(--pa-text) !important; border-radius: 8px !important; border-color: transparent !important; }
html body .flatpickr-day:hover { background: var(--pa-surface-3) !important; }
html body .flatpickr-day.prevMonthDay, html body .flatpickr-day.nextMonthDay, html body .flatpickr-day.flatpickr-disabled { color: var(--pa-text-3) !important; opacity: .55; }
html body .flatpickr-day.today { background: transparent !important; border-color: var(--pa-line-2) !important; }
html body .flatpickr-day.inRange { background: var(--pa-brand-tint) !important; border-color: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
html body .flatpickr-day.selected, html body .flatpickr-day.startRange, html body .flatpickr-day.endRange {
    background: var(--pa-brand) !important; border-color: var(--pa-brand) !important; color: #fff !important; box-shadow: none !important;
}

/* ---------- painel inicial ---------- */
@media (max-width: 1199px) { .pa-top { grid-template-columns: minmax(0, 1fr); } }
.pa-balance, .pa-kpis { min-width: 0; }
.pa-kpi-value { white-space: nowrap; }
/* queda no indicador e atencao (ambar), nao erro (vermelho) */
.pa-kpi-delta.is-down b, .pa-kpi-delta.is-down i { color: var(--pa-warn); }
@media (max-width: 767px) {
    .pa-recibo dt { white-space: normal; min-width: 0; }
    .pa-recibo-hint { display: block; margin-left: 0; }
}
@media (max-width: 420px) {
    .pa-kpi { padding: 12px; }
    .pa-kpi-value { font-size: 17px; letter-spacing: -0.03em; }
}
@media (max-width: 340px) { .pa-kpi-grid { grid-template-columns: 1fr; } }
/* modo privado tambem esconde a meta do cabecalho */
html body.privacy-mode .goal-label-value { visibility: hidden; }
html body.privacy-mode .goal-progress-bar-fill, html body.privacy-mode .pa-goal-bar i { width: 0 !important; }

/* alvos de toque no celular */
@media (pointer: coarse) {
    .pa-eye { padding: 11px; margin: -5px; }
    .pa-icon-btn { width: 40px; height: 40px; }
    .pa-note-x { padding: 12px; margin: -10px -8px; }
    .pa-seg button { padding: 11px 4px; }
    .pa-legend-item { padding: 11px 10px; }
    .pa-report { height: 40px; }
    .pa-actions .btn { height: 44px; }
}

/* barra de abas do celular: some quando um modal abre (antes cobria o botao de confirmar) */
@media (max-width: 767px) {
    .pa-tabs { z-index: 103; }
    html body.modal-open .pa-tabs { display: none; }
}

/* contador no menu lateral (ex.: transacoes em bloqueio cautelar): alerta em ambar */
.pa-menu-count { margin-left: auto; background: var(--pa-warn-tint); color: var(--pa-warn); font: 600 11px 'Public Sans', sans-serif; padding: 2px 7px; border-radius: 10px; line-height: 1.4; }

/* numeros tabulares so onde ha numero */
html body td, html body th, html body input[type="number"], html body .badge, html body .pa-recibo, html body .pa-kpi-value,
html body .pa-balance-value, html body .pa-tx-amount, html body .pa-tx-meta, html body .pa-today strong, html body .pa-kpi-delta,
html body .goal-label-value, html body .card-kpi-value, html body .fs-20, html body .fs-25, html body .lim-value,
html body [class*="amount"], html body [class*="valor"], html body [class*="price"], html body [class*="balance"], html body [class*="saldo"] {
    font-variant-numeric: tabular-nums;
}

/* acessibilidade: foco visivel no menu, link "ir para o conteudo", botao cheio dos modais e do painel no azul acessivel */
html body .side-menu__item:focus-visible { outline: 2px solid var(--pa-brand) !important; outline-offset: -2px; }
html body .slide-menu.child1 .side-menu__item { color: var(--pa-text-2) !important; }
.pa-skip { position: absolute; left: -9999px; top: 8px; z-index: 100001; background: var(--pa-brand); color: #fff; padding: 10px 14px; border-radius: 8px; font: 600 14px 'Public Sans', sans-serif; }
.pa-skip:focus { left: 12px; outline: 2px solid var(--pa-text); }
html body .form-control.btn, html body input.form-control.btn-primary, html body .form-control.btn-generate-red, html body .form-control.btn-copy-red { background-color: var(--pa-brand) !important; border-color: var(--pa-brand) !important; }
html body .form-control.btn:hover, html body input.form-control.btn-primary:hover { background-color: var(--pa-brand-2) !important; border-color: var(--pa-brand-2) !important; }
html body .btn-copy-pix-key { min-width: 28px; min-height: 28px; justify-content: center; }
.pa-note-x { min-width: 28px; min-height: 28px; }
html body .toast-close { background: none; border: 0; }

@media (max-width: 767px) { html body td.dataTables_empty { text-align: left !important; white-space: normal; } }

@media (hover: none) { html body .btn-copy-pix-key { opacity: 1; padding: 12px; margin: -12px -8px -12px -4px; } }

/* ---------- PayAlfa: ajustes do tema claro ---------- */
html body .app-header .header-link-icon {
    background: var(--pa-surface-2) !important; color: var(--pa-text-2) !important;
    box-shadow: inset 0 0 0 1px var(--pa-line) !important;
}
html body .app-header .header-link:hover .header-link-icon { background: var(--pa-surface-3) !important; color: var(--pa-text) !important; }
html body .main-content.app-content > .container-fluid { padding-left: 24px !important; padding-right: 24px !important; }
@media (max-width: 767px) { html body .main-content.app-content > .container-fluid { padding-left: 16px !important; padding-right: 16px !important; } }
html body .apexcharts-text, html body .apexcharts-xaxis-label, html body .apexcharts-yaxis-label { fill: var(--pa-text-3) !important; }
html body .apexcharts-gridline { stroke: var(--pa-line) !important; }
html body code, html body kbd, html body .font-monospace, html body .pa-cod { font-family: var(--pa-mono) !important; }
.pa-menu-count { font-family: var(--pa-font) !important; }
/* menu PayAlfa: grupos abertos, itens mais baixos, titulo de grupo discreto em caixa normal */
html body .side-menu__item { padding: 7px 12px !important; margin: 1px 10px !important; }
html body .side-menu__item .side-menu__icon { font-size: 15px !important; width: 18px; margin-right: 10px !important; }
.pa-side-title { font: 600 11.5px var(--pa-font) !important; color: var(--pa-text-3) !important; padding: 14px 22px 4px !important; letter-spacing: 0; }
html body .main-menu > .slide:last-child { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--pa-line); }
@media (max-width: 767px) { html body .main-sidebar { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; } }

/* variaveis do modelo de tela travadas no PayAlfa (o modelo liga um "modo escuro" que pintava texto quase transparente) */
html, html[data-theme-mode], html[data-theme-mode="dark"], html[data-theme-mode="light"] {
    --primary-rgb: 13, 92, 99; --primary-color: var(--pa-brand);
    --body-bg-rgb: 243, 244, 241; --body-bg-rgb2: 243, 244, 241;
    --default-text-color: var(--pa-text); --text-muted: var(--pa-text-3); --custom-white: #FFFFFF; --custom-black: var(--pa-text);
    --menu-bg: #FFFFFF; --menu-prime-color: var(--pa-text-2); --menu-border-color: var(--pa-line);
    --header-bg: #FFFFFF; --header-prime-color: var(--pa-text-2); --header-border-color: var(--pa-line);
    --default-border: var(--pa-line); --bootstrap-card-border: var(--pa-line); --input-border: var(--pa-line-2);
    --list-hover-focus-bg: var(--pa-surface-2); --default-background: var(--pa-bg); --default-body-bg-color: var(--pa-bg);
    --form-control-bg: #FFFFFF; --light-rgb: 247, 248, 245; --dark-rgb: 20, 24, 27;
}
html body .modal-title { color: var(--pa-text) !important; }

/* bolinha de abrir/fechar a linha da tabela no celular (DataTables responsive):
   o CSS da CDN pinta de verde-limao; aqui fica no tom da casa. */
html body table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
html body table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    background-color: var(--pa-surface-3) !important;
    border: 1px solid var(--pa-line-2) !important;
    color: var(--pa-text-2) !important;
    box-shadow: none !important;
}
html body table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before,
html body table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control::before {
    background-color: var(--pa-brand-tint) !important;
    border-color: var(--pa-brand) !important;
    color: var(--pa-brand) !important;
}
/* campo so de leitura tem que parecer so de leitura (o modal de cripto mostrava "Rede" como se desse pra editar) */
html body .form-control[readonly], html body .form-select[readonly] {
    background-color: var(--pa-surface-2) !important; color: var(--pa-text-2) !important; cursor: default;
}

/* ================== acabamento (23/09) ==================
   O painel estava plano demais: botao chapado, cartao sem papel, aro de foco do
   navegador. Aqui entra o acabamento que separa painel financeiro de modelo
   pronto: profundidade de 1px, aro de foco da casa, tecla que afunda ao apertar
   e numero alinhado. Sem brilho, sem degrade berrante, sem animacao. */

/* --- tecla: base --- */
html body .btn, html body .btn-k, html body .btn-action, html body .btn-cfg,
html body .btn-pagination, html body .btn-preset, html body .modal-preset-btn {
    letter-spacing: -0.006em !important;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease,
                box-shadow .14s ease, transform .07s ease !important;
}
html body .btn:active:not(:disabled):not(.disabled),
html body .btn-k:active:not(:disabled), html body .btn-action:active:not(:disabled),
html body .btn-cfg:active:not(:disabled), html body .btn-pagination:active:not(:disabled) {
    transform: translateY(1px) !important; opacity: 1;
}
/* aro de foco da casa (o azul do navegador entregava o modelo pronto) */
html body .btn:focus-visible, html body .btn-k:focus-visible, html body .btn-action:focus-visible,
html body .btn-cfg:focus-visible, html body .btn-pagination:focus-visible,
html body .btn-preset:focus-visible, html body .modal-preset-btn:focus-visible,
html body a:focus-visible, html body summary:focus-visible, html body [role="button"]:focus-visible {
    outline: 2px solid transparent !important; outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(var(--pa-brand-rgb),0.22) !important;
}

/* --- tecla principal: petroleo com relevo de 1px --- */
html body .btn-primary, html body #notificationModal .btn-primary,
html body .btn-k.black, html body .btn-dark, html body .btn-k.blue,
html body .form-control.btn, html body input.form-control.btn-primary {
    background-image: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0) 58%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 1.5px rgba(10,52,56,0.24) !important;
}
html body .btn-primary:hover, html body #notificationModal .btn-primary:hover,
html body .btn-k.black:hover, html body .btn-dark:hover,
html body .form-control.btn:hover, html body input.form-control.btn-primary:hover {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 2px 4px rgba(10,52,56,0.20) !important;
}
html body .btn-primary:active, html body .btn-k.black:active, html body .btn-dark:active,
html body .form-control.btn:active {
    box-shadow: inset 0 1px 2px rgba(6,38,41,0.30) !important;
}
/* mesmas camadas para as teclas de estado */
html body .btn-success, html body .btn-k.green { box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 1.5px rgba(10,60,36,0.24) !important; }
html body .btn-danger, html body .btn-k.red { box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 1.5px rgba(96,26,15,0.24) !important; }
html body .btn-warning { box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 1.5px rgba(80,46,6,0.24) !important; }
html body .btn-success:active, html body .btn-danger:active, html body .btn-warning:active,
html body .btn-k.green:active, html body .btn-k.red:active { box-shadow: inset 0 1px 2px rgba(0,0,0,0.22) !important; }

/* --- tecla secundaria: papel branco que levanta no toque --- */
html body .btn-secondary, html body .btn-light, html body .btn-outline-secondary,
html body .btn-outline-primary, html body .btn-k.ghost, html body .btn-preset,
html body .modal-preset-btn, html body .btn-pagination {
    box-shadow: 0 1px 1.5px rgba(var(--pa-ink-rgb),0.05) !important;
}
html body .btn-secondary:hover, html body .btn-light:hover, html body .btn-outline-secondary:hover,
html body .btn-outline-primary:hover, html body .btn-k.ghost:hover, html body .btn-preset:hover,
html body .modal-preset-btn:hover, html body .btn-pagination:hover:not(:disabled) {
    box-shadow: 0 2px 4px rgba(var(--pa-ink-rgb),0.07) !important;
}
html body .btn-secondary:active, html body .btn-light:active, html body .btn-outline-secondary:active,
html body .btn-outline-primary:active, html body .btn-k.ghost:active {
    box-shadow: inset 0 1px 2px rgba(var(--pa-ink-rgb),0.10) !important;
}
/* tecla desativada nao levanta nem afunda */
html body .btn:disabled, html body .btn.disabled, html body .btn-k:disabled,
html body .btn-pagination:disabled {
    box-shadow: none !important; transform: none !important;
}
/* acao de linha de tabela continua discreta (sem relevo) */
html body .table-wrap td .btn-k.sm, html body table.t td .btn-k.sm,
html body td .btn-sm.btn-light, html body td .btn-sm.btn-outline-secondary {
    box-shadow: none !important;
}
html body .table-wrap td .btn-k.black.sm, html body table.t td .btn-k.black.sm {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 1px 1.5px rgba(10,52,56,0.22) !important;
}

/* --- papel: cartao com uma sombra de 1px, nao so o fio --- */
html body .card, html body .pa-panel, html body .box, html body .table-wrap {
    box-shadow: 0 1px 2px rgba(var(--pa-ink-rgb),0.035) !important;
}
html body .modal-content, html body .offcanvas {
    box-shadow: 0 18px 44px rgba(var(--pa-ink-rgb),0.16), 0 2px 8px rgba(var(--pa-ink-rgb),0.08) !important;
}
html body .dropdown-menu {
    box-shadow: 0 10px 26px rgba(var(--pa-ink-rgb),0.12), 0 1px 3px rgba(var(--pa-ink-rgb),0.07) !important;
}

/* --- campo: aro da casa no foco, nao o azul do navegador --- */
html body .form-control:focus, html body .form-select:focus, html body textarea:focus,
html body input[type="text"]:focus, html body input[type="email"]:focus,
html body input[type="password"]:focus, html body input[type="number"]:focus,
html body input[type="date"]:focus, html body input[type="search"]:focus, html body select:focus {
    border-color: var(--pa-brand, var(--pa-brand)) !important;
    box-shadow: 0 0 0 3px rgba(var(--pa-brand-rgb),0.14) !important;
    outline: none !important;
}

/* --- numero alinhado em coluna (valor, taxa, data) --- */
html body .card, html body table, html body .pa-recibo, html body .stat, html body .kpi {
    font-variant-numeric: tabular-nums;
}

/* item de menu aberto: traco da casa na lateral, para o lugar onde voce esta
   ficar claro mesmo de relance */
html body .side-menu__item.active {
    box-shadow: inset 3px 0 0 var(--pa-brand) !important;
}
html body .slide-menu.child1 .side-menu__item.active {
    box-shadow: inset 2px 0 0 var(--pa-brand) !important;
}

/* ================== assets de estrutura (23/09) ==================
   Os mesmos blocos do painel inicial em todas as telas: bloco de icone (.pa-tile),
   avatar de iniciais (.pa-av), titulo de pagina com bloco (.pa-page-t), cartao de
   resumo com bloco e estado vazio com desenho. */

html body .pa-tile {
    width: 34px; height: 34px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; background: var(--pa-brand-tint); color: var(--pa-brand); border: 1px solid #CFE0E1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); margin: 0; line-height: 1;
}
html body .pa-tile.is-brand { background: var(--pa-brand); color: #fff; border-color: var(--pa-brand-2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 1px 1.5px rgba(10,52,56,0.24); }
html body .pa-tile.is-ok   { background: var(--pa-ok-tint);   color: var(--pa-ok);   border-color: #BFE0CB; }
html body .pa-tile.is-warn { background: var(--pa-warn-tint); color: var(--pa-warn); border-color: #EBD3A8; }
html body .pa-tile.is-bad  { background: var(--pa-bad-tint);  color: var(--pa-bad);  border-color: #F1C3B9; }
html body .pa-tile.is-mute { background: var(--pa-surface-3); color: var(--pa-text-2); border-color: var(--pa-line-2); }
html body .pa-tile.is-page { width: 44px; height: 44px; font-size: 19px; border-radius: 11px; }

/* titulo de pagina: bloco a esquerda, titulo e frase a direita (sem mexer no h1/p existentes) */
html body .pa-page-t { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-items: center; }
html body .pa-page-t > .pa-tile { grid-row: 1 / 3; }
html body .pa-page-t > h1, html body .pa-page-t > p { grid-column: 2; }

/* avatar de iniciais (nome do pagador, usuario) */
html body .pa-av { position: relative; width: 34px; height: 34px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: .01em; line-height: 1; }
html body .pa-av.tom-1 { background: var(--pa-brand-tint); color: var(--pa-brand); }
html body .pa-av.tom-2 { background: var(--pa-ok-tint); color: var(--pa-ok); }
html body .pa-av.tom-3 { background: var(--pa-warn-tint); color: var(--pa-warn); }
html body .pa-av.tom-4 { background: #E9E7F5; color: #4B3F8F; }
html body .pa-av.tom-5 { background: var(--pa-bad-tint); color: #A92A18; }
html body .pa-av.tom-6 { background: var(--pa-surface-3); color: var(--pa-text-2); }
html body .pa-cell-av { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; vertical-align: middle; }
html body .pa-cell-av > div, html body .pa-cell-av > span:not(.pa-av) { min-width: 0; }
html body td .pa-cell-av .pa-av { width: 30px; height: 30px; font-size: 11px; border-radius: 8px; }

/* cartoes de resumo dos extratos: bloco a esquerda, rotulo e valor a direita */
html body .pa-ex-sum > div, html body .pa-sum-item, html body .hs-stat {
    display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-content: start; align-items: start;
}
html body .pa-ex-sum > div > .pa-tile, html body .pa-sum-item > .pa-tile, html body .hs-stat > .pa-tile { grid-row: 1 / 4; display: inline-flex !important; margin: 0 !important; }
html body .pa-ex-sum > div > span:not(.pa-tile), html body .pa-ex-sum > div > strong,
html body .pa-sum-item > .pa-sum-label, html body .pa-sum-item > .pa-sum-value, html body .pa-sum-item > .pa-sum-hint,
html body .hs-stat > .hs-stat-l, html body .hs-stat > .hs-stat-v { grid-column: 2; }
html body .pa-ex-sum > div > span:not(.pa-tile) { margin-bottom: 4px !important; }
/* cartao de limite: bloco no canto */
html body .lim-card { position: relative; }
html body .lim-card > .pa-tile { position: absolute; top: 14px; right: 14px; }
/* credenciais: bloco antes do titulo da secao */
html body .ky-card-head { display: flex; align-items: flex-start; gap: 12px; }
html body .ky-card-head > div { flex: 1; min-width: 0; }
html body .ky-card-head > .pa-tile { margin-top: 1px; }
/* aplicativo: icone da plataforma no mesmo bloco */
html body .plat-icon { width: 40px !important; height: 40px !important; border-radius: 10px !important; background: var(--pa-brand-tint) !important; color: var(--pa-brand) !important; border: 1px solid #CFE0E1 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7) !important; font-size: 19px !important; }
/* infracoes: os icones dos cartoes no mesmo bloco */
html body .card-kpi-icon { width: 34px !important; height: 34px !important; border-radius: 9px !important; background: var(--pa-brand-tint) !important; color: var(--pa-brand) !important; border: 1px solid #CFE0E1 !important; }
html body .card-kpi-icon svg { width: 16px; height: 16px; }

/* estado vazio: desenho no lugar do icone solto */
html body .pa-empty > i { display: none; }
html body .pa-empty::before {
    content: ""; display: block; width: 120px; height: 64px; margin-bottom: 8px;
    background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Crect x='30' y='4' width='60' height='56' rx='6' fill='%23FFFFFF' stroke='%23D3D6CE'/%3E%3Cpath d='M40 18h40M40 28h28M40 38h34' stroke='%23E4E6E0' stroke-width='3' stroke-linecap='round'/%3E%3Crect x='40' y='46' width='18' height='6' rx='3' fill='%230D5C63' opacity='.55'/%3E%3Cpath d='M78 44l5 5 9-10' fill='none' stroke='%230D5C63' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body .pa-empty.is-busca::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Ccircle cx='54' cy='28' r='18' fill='%23FFFFFF' stroke='%23D3D6CE' stroke-width='2'/%3E%3Cpath d='M67 41l14 14' stroke='%230D5C63' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M46 28h16M54 20v16' stroke='%23E4E6E0' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
    html body .pa-tile.is-page { width: 38px; height: 38px; font-size: 17px; border-radius: 10px; }
    html body .pa-page-t { column-gap: 12px; }
    html body .pa-ex-sum > div, html body .pa-sum-item, html body .hs-stat { grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; }
    html body .pa-ex-sum > div > .pa-tile, html body .pa-sum-item > .pa-tile, html body .hs-stat > .pa-tile { width: 30px; height: 30px; font-size: 14px; border-radius: 8px; }
    html body .hs-stat { align-items: center; }
    html body .hs-stat > .pa-tile { grid-row: 1 / 3; }
    /* no celular o bloco fica na linha do rotulo e o valor usa a largura toda (sete digitos cortavam) */
    html body .pa-ex-sum > div > .pa-tile, html body .pa-sum-item > .pa-tile { grid-row: 1 / 2; }
    html body .pa-ex-sum > div > span:not(.pa-tile), html body .pa-sum-item > .pa-sum-label { align-self: center; margin-bottom: 0 !important; }
    html body .pa-ex-sum > div > strong, html body .pa-sum-item > .pa-sum-value, html body .pa-sum-item > .pa-sum-hint { grid-column: 1 / 3; margin-top: 4px; }
    html body .pa-ex-sum > div > strong { overflow: visible; text-overflow: clip; }
}

/* ================== movimento (23/09) ==================
   Entrada escalonada dos cartoes, bloco de icone que responde ao mouse, barra e
   anel que enchem, valor que conta e saldo que pisca quando muda. Tudo curto
   (menos de 700 ms), com curva suave e desligado para quem pediu menos movimento. */
@keyframes pa-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pa-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(19,122,67,0.45); } 60% { box-shadow: 0 0 0 6px rgba(19,122,67,0); } }
@keyframes pa-flash-ok { 0% { color: var(--pa-ok); text-shadow: 0 0 0 rgba(19,122,67,0); } 30% { text-shadow: 0 0 18px rgba(19,122,67,0.35); } 100% { color: inherit; text-shadow: none; } }
@keyframes pa-flash-bad { 0% { color: var(--pa-bad); } 100% { color: inherit; } }
@keyframes pa-sobe { 0% { opacity: 0; transform: translateY(6px) scale(.9); } 15% { opacity: 1; transform: translateY(0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px); } }
@keyframes pa-desenha { to { stroke-dashoffset: 0; } }
@keyframes pa-brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* entrada escalonada: cada cartao chega 60 ms depois do anterior */
html body .pa-anima .card, html body .pa-anima .pa-panel, html body .pa-anima .pa-band, html body .pa-anima .pa-perf,
html body .pa-anima .pa-ex-sum, html body .pa-anima .pa-sum-item, html body .pa-anima .lim-card, html body .pa-anima .ky-card,
html body .pa-anima .app-card, html body .pa-anima .hs-stats, html body .pa-anima .lj-card, html body .pa-anima .card-kpi,
html body .pa-anima .sett-card, html body .pa-anima .aw-card, html body .pa-anima .pa-note {
    animation: pa-entra .46s cubic-bezier(.2,.7,.2,1) both;
}
html body .pa-anima .pa-band { animation-delay: .02s; }
html body .pa-anima .pa-perf { animation-delay: .08s; }
html body .pa-anima .pa-chart-panel { animation-delay: .14s; }
html body .pa-anima .pa-feed { animation-delay: .20s; }
html body .pa-anima .pa-rail > .pa-panel:nth-child(1) { animation-delay: .10s; }
html body .pa-anima .pa-rail > .pa-panel:nth-child(2) { animation-delay: .16s; }
html body .pa-anima .pa-rail > .pa-panel:nth-child(3) { animation-delay: .22s; }
html body .pa-anima .pa-rail > .pa-panel:nth-child(4) { animation-delay: .28s; }
html body .pa-anima .pa-sum-item:nth-child(2), html body .pa-anima .lim-card:nth-child(2), html body .pa-anima .card-kpi:nth-child(2) { animation-delay: .06s; }
html body .pa-anima .pa-sum-item:nth-child(3), html body .pa-anima .lim-card:nth-child(3) { animation-delay: .12s; }
html body .pa-anima .pa-sum-item:nth-child(4), html body .pa-anima .lim-card:nth-child(4) { animation-delay: .18s; }
html body .pa-anima .ky-card:nth-of-type(2), html body .pa-anima .app-card:nth-of-type(2) { animation-delay: .08s; }
html body .pa-anima .ky-card:nth-of-type(3) { animation-delay: .16s; }
html body .pa-anima .pa-ex-card, html body .pa-anima .pa-ex-busca { animation: pa-entra .46s cubic-bezier(.2,.7,.2,1) .12s both; }
/* modal e menu suspenso nao entram nessa fila */
html body .pa-anima .modal .card, html body .pa-anima .dropdown-menu .card { animation: none; }

/* bloco de icone responde ao mouse do cartao ou link que o contem */
html body .pa-tile { transition: transform .18s cubic-bezier(.2,.7,.2,1), background-color .18s ease, box-shadow .18s ease; }
html body a:hover > .pa-tile, html body a:hover .pa-tile, html body .pa-atalho:hover .pa-tile, html body .pa-sit-item:hover .pa-tile,
html body .pa-kpi:hover > .pa-tile, html body .pa-ex-sum > div:hover > .pa-tile, html body .pa-sum-item:hover > .pa-tile,
html body .lim-card:hover > .pa-tile, html body .hs-stat:hover > .pa-tile, html body .pa-band-figs > div:hover > .pa-tile {
    transform: translateY(-2px) rotate(-4deg) scale(1.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 4px 10px rgba(var(--pa-brand-rgb),0.16);
}
html body .pa-atalho:hover .pa-tile.is-brand { box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 5px 12px rgba(10,52,56,0.32); }
/* avatar cresce um tiquinho na linha */
html body .pa-av { transition: transform .16s ease; }
html body tr:hover .pa-av, html body .pa-tx-item:hover .pa-av, html body .user-card:hover .pa-av { transform: scale(1.08); }
/* indicador do painel: o valor levanta ao passar o mouse */
html body .pa-kpi { transition: background-color .16s ease; }
html body .pa-kpi:hover { background: var(--pa-surface-2) !important; }
/* barra de meta e progresso enchem ao carregar */
html body .pa-goal-bar i, html body .prog-fill, html body .goal-progress-bar-fill { transition: width .9s cubic-bezier(.2,.7,.2,1); }
html body .pa-sit-anel { transition: background .1s linear; }
/* ponto de "ao vivo" pulsa */
html body .pa-live i { animation: pa-pulso 2.2s ease-out infinite; }
html body .pa-live.is-off i { animation: none; }
/* saldo que muda: pisca e solta o valor que entrou */
html body .pa-band-row { position: relative; }
html body .pa-flash-ok { animation: pa-flash-ok 1.6s ease-out; }
html body .pa-flash-bad { animation: pa-flash-bad 1.2s ease-out; }
html body .pa-sobe {
    position: absolute; left: 0; top: -6px; font-size: 14px; font-weight: 700; color: var(--pa-ok); pointer-events: none;
    background: var(--pa-ok-tint); border: 1px solid #BFE0CB; border-radius: 999px; padding: 2px 10px; white-space: nowrap;
    animation: pa-sobe 1.9s cubic-bezier(.2,.7,.2,1) forwards; font-variant-numeric: tabular-nums;
}
html body .pa-sobe.is-out { color: var(--pa-text-2); background: var(--pa-surface-3); border-color: var(--pa-line-2); }
/* linha de tendencia se desenha */
html body .pa-spark path[stroke] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pa-desenha .9s cubic-bezier(.2,.7,.2,1) .15s forwards; }
html body .pa-spark path[fill] { opacity: 0; transition: opacity .5s ease .7s; }
html body .pa-spark.is-on path[fill] { opacity: .09; }
/* esqueleto com brilho passando */
html body .pa-sk, html body .pa-skel {
    background: linear-gradient(90deg, var(--pa-surface-3) 25%, var(--pa-surface-2) 50%, var(--pa-surface-3) 75%) !important;
    background-size: 200% 100% !important; animation: pa-brilho 1.4s linear infinite !important;
}
/* botao principal: no passar do mouse so o tom muda (brilho varrendo o botao foi tirado: le como enfeite de I.A.) */
html body .btn-primary { overflow: hidden; }
html body .btn-primary { position: relative; }
/* linha da tabela: entrada leve quando a tabela redesenha */
html body table.dataTable tbody tr { animation: pa-entra .32s ease both; }
html body table.dataTable tbody tr:nth-child(2) { animation-delay: .03s; }
html body table.dataTable tbody tr:nth-child(3) { animation-delay: .06s; }
html body table.dataTable tbody tr:nth-child(4) { animation-delay: .09s; }
html body table.dataTable tbody tr:nth-child(5) { animation-delay: .12s; }
html body table.dataTable tbody tr:nth-child(n+6) { animation-delay: .15s; }

@media (prefers-reduced-motion: reduce) {
    html body .pa-anima *, html body .pa-tile, html body .pa-av, html body .pa-live i, html body .pa-spark path, html body table.dataTable tbody tr,
    html body .pa-goal-bar i, html body .prog-fill, html body .btn-primary::after { animation: none !important; transition: none !important; }
    html body .pa-spark path[stroke] { stroke-dashoffset: 0; }
    html body .pa-spark path[fill] { opacity: .09; }
}

/* ================== aparencia: cor de destaque e modo escuro (23/09) ==================
   O lojista escolhe no pe do menu. A escolha fica na conta (users.ui_theme / ui_accent) e o
   cabecalho aplica antes da pintura. As tintas derivam da cor por color-mix, entao qualquer
   destaque funciona nos dois modos. */
html[data-pa-accent="oceano"]   { --pa-brand: #1B55B8; --pa-brand-2: #16469A; --pa-brand-3: #103677; --pa-brand-rgb: 27,85,184; }
html[data-pa-accent="ameixa"]   { --pa-brand: #6640A6; --pa-brand-2: #55348B; --pa-brand-3: #43296E; --pa-brand-rgb: 102,64,166; }
html[data-pa-accent="floresta"] { --pa-brand: #1E6B3A; --pa-brand-2: #185830; --pa-brand-3: #124526; --pa-brand-rgb: 30,107,58; }
html[data-pa-accent="terracota"]{ --pa-brand: #A8431F; --pa-brand-2: #8C3719; --pa-brand-3: #6F2C14; --pa-brand-rgb: 168,67,31; }
html[data-pa-accent="grafite"]  { --pa-brand: #37444B; --pa-brand-2: #2B363C; --pa-brand-3: #20292E; --pa-brand-rgb: 55,68,75; }
html[data-pa-accent] { --pa-brand-tint: color-mix(in srgb, var(--pa-brand) 12%, #FFFFFF); }

html[data-pa-theme="dark"] {
    --pa-bg: #101416; --pa-bg-2: #171C1F; --pa-surface: #171C1F; --pa-surface-2: #1D2327; --pa-surface-3: #252C31;
    --pa-line: #2A3237; --pa-line-2: #384148;
    --pa-text: #E9ECEB; --pa-text-2: #B7BEC2; --pa-text-3: #8F979C;
    --pa-ink-rgb: 233,236,235;
    --pa-brand-tint: color-mix(in srgb, var(--pa-brand) 26%, #171C1F);
    --pa-ok: #3DBA72; --pa-ok-tint: #12301F; --pa-warn: #E0A040; --pa-warn-tint: #3A2A0E; --pa-bad: #F0665A; --pa-bad-tint: #3E1A15;
    /* variaveis do modelo (menu, topo, cartao, campo) seguem os tokens */
    --default-border: #2A3237; --bootstrap-card-border: #2A3237; --input-border: #384148;
    --list-hover-focus-bg: #1D2327; --default-background: #101416; --default-body-bg-color: #101416;
    --form-control-bg: #1D2327; --light-rgb: 29,35,39; --dark-rgb: 233,236,235; --custom-white: #171C1F; --default-text-color: #E9ECEB;
    --menu-bg: #171C1F; --menu-border-color: #2A3237; --header-bg: #171C1F; --header-border-color: #2A3237; --menu-prime-color: #B7BEC2;
    color-scheme: dark;
}
html[data-pa-theme="dark"][data-pa-accent="petroleo"], html[data-pa-theme="dark"]:not([data-pa-accent]) { --pa-brand: #3AA5AF; --pa-brand-2: #4FB6BF; --pa-brand-3: #86CFD6; --pa-brand-rgb: 58,165,175; }
html[data-pa-theme="dark"][data-pa-accent="oceano"]   { --pa-brand: #5E96F0; --pa-brand-2: #7AA9F4; --pa-brand-3: #A2C1F7; --pa-brand-rgb: 94,150,240; }
html[data-pa-theme="dark"][data-pa-accent="ameixa"]   { --pa-brand: #9B78D8; --pa-brand-2: #AE91E2; --pa-brand-3: #C5B0EC; --pa-brand-rgb: 155,120,216; }
html[data-pa-theme="dark"][data-pa-accent="floresta"] { --pa-brand: #3E9E62; --pa-brand-2: #57B278; --pa-brand-3: #86C99C; --pa-brand-rgb: 62,158,98; }
html[data-pa-theme="dark"][data-pa-accent="terracota"]{ --pa-brand: #E0764C; --pa-brand-2: #E88E6A; --pa-brand-3: #F0AE94; --pa-brand-rgb: 224,118,76; }
html[data-pa-theme="dark"][data-pa-accent="grafite"]  { --pa-brand: #9AA7AE; --pa-brand-2: #B0BBC1; --pa-brand-3: #C9D1D5; --pa-brand-rgb: 154,167,174; }
/* no escuro a tecla principal fica com a cor cheia mas o texto escuro, para o contraste continuar alto */
html[data-pa-theme="dark"] body .btn-primary, html[data-pa-theme="dark"] body .form-control.btn, html[data-pa-theme="dark"] body input.form-control.btn-primary,
html[data-pa-theme="dark"] body .pa-tile.is-brand, html[data-pa-theme="dark"] body .pa-atalho .pa-tile.is-brand { color: #0E1416 !important; border-color: transparent !important; }
html[data-pa-theme="dark"] body .btn-primary:hover { background: var(--pa-brand-2) !important; border-color: var(--pa-brand-2) !important; }
html[data-pa-theme="dark"] body .btn-primary::after { background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); }
html[data-pa-theme="dark"] body { background: var(--pa-bg) !important; color: var(--pa-text); }
html[data-pa-theme="dark"] body .app-header, html[data-pa-theme="dark"] body .app-sidebar, html[data-pa-theme="dark"] body .main-sidebar-header,
html[data-pa-theme="dark"] body .header-content, html[data-pa-theme="dark"] body .main-header-container {
    background: var(--pa-surface) !important; border-color: var(--pa-line) !important;
}
html[data-pa-theme="dark"] body .side-menu__item { color: var(--pa-text-2) !important; }
html[data-pa-theme="dark"] body .side-menu__item:hover { background: var(--pa-surface-2) !important; color: var(--pa-text) !important; }
html[data-pa-theme="dark"] body .side-menu__item.active { color: var(--pa-brand-3) !important; }
html[data-pa-theme="dark"] body .card, html[data-pa-theme="dark"] body .modal-content, html[data-pa-theme="dark"] body .dropdown-menu,
html[data-pa-theme="dark"] body .offcanvas, html[data-pa-theme="dark"] body .pa-panel, html[data-pa-theme="dark"] body .table-responsive {
    background: var(--pa-surface) !important; border-color: var(--pa-line) !important; color: var(--pa-text);
}
html[data-pa-theme="dark"] body .card-header, html[data-pa-theme="dark"] body .card-footer, html[data-pa-theme="dark"] body .modal-header, html[data-pa-theme="dark"] body .modal-footer { background: transparent !important; border-color: var(--pa-line) !important; }
html[data-pa-theme="dark"] body .form-control, html[data-pa-theme="dark"] body .form-select, html[data-pa-theme="dark"] body .input-group-text, html[data-pa-theme="dark"] body textarea {
    background: var(--pa-surface-2) !important; border-color: var(--pa-line-2) !important; color: var(--pa-text) !important;
}
html[data-pa-theme="dark"] body .form-control::placeholder { color: var(--pa-text-3) !important; }
html[data-pa-theme="dark"] body .form-control[readonly], html[data-pa-theme="dark"] body .form-select[readonly] { background: var(--pa-surface-3) !important; color: var(--pa-text-2) !important; }
html[data-pa-theme="dark"] body table, html[data-pa-theme="dark"] body .table, html[data-pa-theme="dark"] body .table > :not(caption) > * > * { background: transparent !important; color: var(--pa-text) !important; border-color: var(--pa-line) !important; }
html[data-pa-theme="dark"] body thead th { background: var(--pa-surface-2) !important; color: var(--pa-text-2) !important; }
html[data-pa-theme="dark"] body .btn-secondary, html[data-pa-theme="dark"] body .btn-light, html[data-pa-theme="dark"] body .btn-outline-secondary, html[data-pa-theme="dark"] body .btn-outline-primary {
    background: var(--pa-surface-2) !important; border-color: var(--pa-line-2) !important; color: var(--pa-text) !important;
}
html[data-pa-theme="dark"] body .btn-secondary:hover, html[data-pa-theme="dark"] body .btn-light:hover, html[data-pa-theme="dark"] body .btn-outline-secondary:hover { background: var(--pa-surface-3) !important; }
html[data-pa-theme="dark"] body .btn:disabled, html[data-pa-theme="dark"] body .btn.disabled { background: var(--pa-surface-3) !important; color: var(--pa-text-3) !important; }
html[data-pa-theme="dark"] body .pa-tile { border-color: color-mix(in srgb, var(--pa-brand) 35%, var(--pa-surface)); box-shadow: none; }
html[data-pa-theme="dark"] body .pa-tile.is-ok { background: var(--pa-ok-tint); color: var(--pa-ok); border-color: #1E4A30; }
html[data-pa-theme="dark"] body .pa-tile.is-warn { background: var(--pa-warn-tint); color: var(--pa-warn); border-color: #55401A; }
html[data-pa-theme="dark"] body .pa-tile.is-bad { background: var(--pa-bad-tint); color: var(--pa-bad); border-color: #5A2820; }
html[data-pa-theme="dark"] body .pa-av.tom-1 { background: #163A3E; color: #7FCBD2; } html[data-pa-theme="dark"] body .pa-av.tom-2 { background: #12301F; color: #7ED6A0; }
html[data-pa-theme="dark"] body .pa-av.tom-3 { background: #3A2A0E; color: #F0C070; } html[data-pa-theme="dark"] body .pa-av.tom-4 { background: #2A2344; color: #C0AEF0; }
html[data-pa-theme="dark"] body .pa-av.tom-5 { background: #3E1A15; color: #F5A092; } html[data-pa-theme="dark"] body .pa-av.tom-6 { background: #252C31; color: #C4CCD0; }
html[data-pa-theme="dark"] body .pa-st.is-ok { background: var(--pa-ok-tint); color: var(--pa-ok); } html[data-pa-theme="dark"] body .pa-st.is-warn { background: var(--pa-warn-tint); color: var(--pa-warn); }
html[data-pa-theme="dark"] body .pa-st.is-bad { background: var(--pa-bad-tint); color: var(--pa-bad); } html[data-pa-theme="dark"] body .pa-st.is-info { background: var(--pa-brand-tint); color: var(--pa-brand-3); }
html[data-pa-theme="dark"] body .pa-note { background: #2A2210 !important; border-color: #55401A !important; color: #E7C98E !important; }
html[data-pa-theme="dark"] body .pa-band-saldo { background: linear-gradient(180deg, color-mix(in srgb, var(--pa-brand) 14%, var(--pa-surface)) 0%, var(--pa-surface) 76%); }
html[data-pa-theme="dark"] body .pa-band-marca { opacity: .12; }
html[data-pa-theme="dark"] body .pa-sit-anel b { background: var(--pa-surface); }
html[data-pa-theme="dark"] body .pa-atalho, html[data-pa-theme="dark"] body .pa-kpi, html[data-pa-theme="dark"] body .pa-perf, html[data-pa-theme="dark"] body .pa-band { background: var(--pa-surface) !important; border-color: var(--pa-line) !important; }
html[data-pa-theme="dark"] body .pa-band-goal { background: var(--pa-surface-2) !important; }
html[data-pa-theme="dark"] body .pa-sobe { background: var(--pa-ok-tint); border-color: #1E4A30; }
html[data-pa-theme="dark"] body .pa-empty::before { filter: invert(.88) hue-rotate(180deg); }
html[data-pa-theme="dark"] body .apexcharts-tooltip.apexcharts-theme-light { background: var(--pa-surface-2) !important; border-color: var(--pa-line-2) !important; color: var(--pa-text) !important; }
html[data-pa-theme="dark"] body .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title { background: var(--pa-surface-3) !important; border-color: var(--pa-line) !important; }
html[data-pa-theme="dark"] body .apexcharts-gridline { stroke: var(--pa-line) !important; }
html[data-pa-theme="dark"] body .apexcharts-text tspan { fill: var(--pa-text-3) !important; }
html[data-pa-theme="dark"] body .btn-close { filter: invert(1) grayscale(1); opacity: .7; }
html[data-pa-theme="dark"] body .modal-backdrop { background: #000; }
html[data-pa-theme="dark"] body .pa-skel, html[data-pa-theme="dark"] body .pa-sk { background: linear-gradient(90deg, var(--pa-surface-3) 25%, #2C343A 50%, var(--pa-surface-3) 75%) !important; background-size: 200% 100% !important; }
html[data-pa-theme="dark"] body img.pa-logo-escuro-troca { filter: brightness(0) invert(1); }
html[data-pa-theme="dark"] body .pa-toast, html[data-pa-theme="dark"] body .toast { background: var(--pa-surface-2) !important; color: var(--pa-text) !important; border-color: var(--pa-line-2) !important; }
html[data-pa-theme="dark"] body .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--pa-text-2) !important; }
html[data-pa-theme="dark"] body .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--pa-brand-tint) !important; color: var(--pa-brand-3) !important; border-color: transparent !important; }
html[data-pa-theme="dark"] body .btn-refresh-balance, html[data-pa-theme="dark"] body .pa-icon-btn, html[data-pa-theme="dark"] body .pa-eye { background: var(--pa-surface-2) !important; border-color: var(--pa-line-2) !important; color: var(--pa-text-2) !important; }
html[data-pa-theme="dark"] body .pa-seg { background: var(--pa-surface-2) !important; border-color: var(--pa-line) !important; }
html[data-pa-theme="dark"] body .pa-seg button.on { background: var(--pa-surface) !important; color: var(--pa-text) !important; }
html[data-pa-theme="dark"] body .pa-legend-item i { border-top-color: var(--pa-brand); }
html[data-pa-theme="dark"] body .pa-legend-item[data-series="1"] i { border-top-color: var(--pa-text-3); }
html[data-pa-theme="dark"] body .header-element .header-link, html[data-pa-theme="dark"] body .header-icon { color: var(--pa-text-2) !important; }
html[data-pa-theme="dark"] body .pa-cmd, html[data-pa-theme="dark"] body .pa-cmd input { background: var(--pa-surface-2) !important; color: var(--pa-text) !important; border-color: var(--pa-line-2) !important; }

/* ---------- pe do menu: escolha de aparencia ---------- */
html body .pa-aparencia { margin: 10px 10px 16px; padding: 12px 12px 10px; border: 1px solid var(--pa-line); border-radius: var(--pa-r-lg); background: var(--pa-surface-2); }
html body .pa-aparencia-t { font-size: 11.5px; font-weight: 600; color: var(--pa-text-3); margin: 0 0 8px; display: flex; align-items: center; justify-content: space-between; }
html body .pa-modo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; background: var(--pa-surface-3); border: 1px solid var(--pa-line); border-radius: var(--pa-r); padding: 3px; }
html body .pa-modo button { border: 0; background: transparent; border-radius: var(--pa-r-sm); font: 600 12px/1 var(--pa-font); color: var(--pa-text-2); padding: 7px 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: background .14s ease, color .14s ease; }
html body .pa-modo button i { font-size: 13px; }
html body .pa-modo button.on { background: var(--pa-surface); color: var(--pa-text); box-shadow: 0 1px 2px rgba(var(--pa-ink-rgb),0.08); }
html body .pa-cores { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
html body .pa-cor { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; position: relative; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); transition: transform .14s ease; }
html body .pa-cor:hover { transform: scale(1.12); }
html body .pa-cor.on { border-color: var(--pa-text); }
html body .pa-cor.on::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; opacity: .95; }
html body .pa-cor:focus-visible { outline: 2px solid var(--pa-brand); outline-offset: 2px; }
@media (max-width: 991px) { html body .pa-aparencia { margin: 8px 10px 80px; } }

/* logo: no escuro entra a versao com o nome claro (arquivos brand-logos/*-dark.png) */
html body img.desktop-dark, html body img.toggle-dark { display: none !important; }
html[data-pa-theme="dark"] body img.desktop-logo, html[data-pa-theme="dark"] body img.toggle-logo { display: none !important; }
html[data-pa-theme="dark"] body img.desktop-dark { display: block !important; }
html[data-pa-theme="dark"] body .main-sidebar-header img.toggle-dark { display: none !important; }
/* celular no claro: o topo mostrava so o icone (toggle-logo) enquanto o escuro mostrava o logo inteiro; agora os dois mostram icone e nome */
@media (max-width: 991.98px) {
    html:not([data-pa-theme="dark"]) body .app-header .horizontal-logo img.desktop-logo { display: block !important; }
    html:not([data-pa-theme="dark"]) body .app-header .horizontal-logo img.toggle-logo { display: none !important; }
}

/* ---------- menu recolhido no PC (23/09) ----------
   O atributo data-toggled fica no <html>, nao no <body>: as regras antigas com body[data-toggled] nunca valiam,
   e o logo inteiro aparecia cortado no trilho de 80px. Com o mouse em cima o menu abre por cima (data-icon-overlay). */
@media (min-width: 992px) {
    html[data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) body .main-sidebar-header img.desktop-logo,
    html[data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) body .main-sidebar-header img.desktop-dark { display: none !important; }
    html[data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) body .main-sidebar-header img.toggle-logo { display: block !important; }
    html[data-pa-theme="dark"][data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) body .main-sidebar-header img.toggle-logo { display: none !important; }
    html[data-pa-theme="dark"][data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) body .main-sidebar-header img.toggle-dark { display: block !important; }
    html[data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) body .main-sidebar-header .header-logo { justify-content: center; width: 100%; }
    html[data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) body .main-sidebar-header img.mini_logo { height: 30px; width: auto; margin: 0 auto; }
    /* Aparencia no trilho: so os 3 botoes de modo, um embaixo do outro; a caixa inteira volta com o mouse em cima */
    html[data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) body .pa-aparencia { margin: 8px 8px 16px; padding: 6px 4px; }
    html[data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) body .pa-aparencia-t,
    html[data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) body .pa-cores { display: none; }
    html[data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) body .pa-modo { grid-template-columns: minmax(0, 1fr); }
    html[data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) body .pa-modo button { font-size: 0; gap: 0; padding: 8px 0; }
    html[data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) body .pa-modo button i { font-size: 14px; }
    /* cartao da conta: no trilho so as iniciais; com o mouse em cima volta o nome */
    html[data-toggled="icon-overlay-close"]:not([data-icon-overlay="open"]) body .pa-conta-card { justify-content: center; margin: 14px 8px 8px; padding: 8px 4px; }
    html[data-toggled="icon-overlay-close"][data-icon-overlay="open"] body .pa-conta-tx { display: grid !important; }
    html[data-toggled="icon-overlay-close"][data-icon-overlay="open"] body .pa-conta-seta { display: inline-block !important; }
    /* logo do topo: com o menu recolhido ele encostava na borda esquerda da janela */
    html[data-toggled="icon-overlay-close"] body .app-header .header-content-left { padding-left: 12px; }
}

/* folha de atalhos de teclado (tecla ?) */
html body .pa-teclas { position: fixed; inset: 0; background: rgba(16,20,22,.55); z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px; animation: pa-entra .2s ease; }
html body .pa-teclas-in { background: var(--pa-surface); border: 1px solid var(--pa-line); border-radius: var(--pa-r-lg); padding: 20px 22px; width: 100%; max-width: 420px; box-shadow: 0 18px 44px rgba(20,24,27,.18); }
html body .pa-teclas h3 { font-size: 15px; font-weight: 600; margin: 0 0 12px; color: var(--pa-text); }
html body .pa-teclas dl { margin: 0; display: grid; gap: 8px; }
html body .pa-teclas dl > div { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--pa-text-2); }
html body .pa-teclas dt { min-width: 64px; } html body .pa-teclas dd { margin: 0; }
html body .pa-teclas kbd { font: 600 12px var(--pa-mono); background: var(--pa-surface-2); border: 1px solid var(--pa-line-2); border-bottom-width: 2px; border-radius: 4px; padding: 2px 7px; color: var(--pa-text); }
html body .pa-teclas p { margin: 12px 0 0; font-size: 12px; color: var(--pa-text-3); }

/* ================= nivel ALFA: cartao da conta no topo do menu ================= */
html body .pa-conta-card { display: flex; align-items: center; gap: 11px; margin: 14px 10px 8px; padding: 10px 12px; border-radius: 12px; text-decoration: none;
    background: linear-gradient(135deg, #061719, color-mix(in srgb, var(--pa-brand) 45%, #061719)); color: #fff; position: relative; overflow: hidden;
    box-shadow: 0 8px 22px rgba(6,23,25,.18); transition: transform .18s ease, box-shadow .18s ease; }
html body .pa-conta-card::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(127,216,201,.28), transparent 70%); }
html body .pa-conta-card:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(6,23,25,.26); color: #fff; }
html body .pa-conta-av { width: 36px; height: 36px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font: 700 13px var(--pa-font); color: #061719; background: linear-gradient(135deg, #C9F2EA, #7FD8C9); }
html body .pa-conta-tx { min-width: 0; flex: 1; display: grid; gap: 2px; position: relative; z-index: 1; }
html body .pa-conta-tx b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
html body .pa-conta-tx small { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #A9C8C7; }
html body .pa-conta-tx small i { width: 6px; height: 6px; border-radius: 50%; background: #7FD8C9; }
html body .pa-conta-tx small.pend i { background: #E0A040; }
html body .pa-conta-seta { font-size: 12px; color: #86A8A6; position: relative; z-index: 1; }
html[data-toggled="icon-overlay-close"] body .pa-conta-tx, html[data-toggled="icon-overlay-close"] body .pa-conta-seta { display: none; }

/* ================= correcoes do QA do painel (23/09) ================= */
/* celular: com a gaveta do menu aberta, a pagina de tras nao rola junto (pa-ui.js poe a classe) */
html.pa-gaveta-aberta, html.pa-gaveta-aberta body { overflow: hidden !important; overscroll-behavior: none; }
@media (max-width: 991px) { html body .app-sidebar .main-sidebar { overscroll-behavior: contain; } }

/* escuro: o fundo do modal precisa escurecer a pagina em todas as telas (settings e perfil pintavam com a cor do texto, que no escuro e clara) */
html[data-pa-theme="dark"] body .modal-backdrop { background-color: #000 !important; }
html[data-pa-theme="dark"] body .swal2-container.swal2-backdrop-show { background: rgba(0, 0, 0, .55) !important; }
html[data-pa-theme="dark"] body .swal2-popup { background: var(--pa-surface) !important; color: var(--pa-text) !important; border: 1px solid var(--pa-line-2); }
html[data-pa-theme="dark"] body .swal2-title { color: var(--pa-text) !important; }
html[data-pa-theme="dark"] body .swal2-html-container { color: var(--pa-text-2) !important; }
html[data-pa-theme="dark"] body .swal2-input { background: var(--pa-surface-2) !important; color: var(--pa-text) !important; border-color: var(--pa-line-2) !important; }
html[data-pa-theme="dark"] body .swal2-validation-message { background: var(--pa-surface-2) !important; color: var(--pa-bad) !important; }

/* escuro: avisos dentro dos modais. Os includes forcam .alert-warning{color:#7A4604} (contraste 1,78 no fundo escuro) */
html[data-pa-theme="dark"] body #modalConteudo .modal-content .modal-body .alert-warning,
html[data-pa-theme="dark"] body #modalConteudo .modal-content .alert-warning { background: var(--pa-warn-tint) !important; border-color: #55401A !important; color: #F2D29B !important; }
html[data-pa-theme="dark"] body #modalConteudo .modal-content .modal-body .alert-danger,
html[data-pa-theme="dark"] body #modalConteudo .modal-content .alert-danger { background: var(--pa-bad-tint) !important; border-color: #5A2820 !important; color: #F7B5AC !important; }
html[data-pa-theme="dark"] body #modalConteudo .modal-content .modal-body :is(.alert-info, .alert-primary) { background: var(--pa-brand-tint) !important; color: var(--pa-brand-3) !important; }
html[data-pa-theme="dark"] body #modalConteudo .modal-content .modal-body .alert-success { background: var(--pa-ok-tint) !important; border-color: #1E4A30 !important; color: #9EE0B8 !important; }

/* documento (comprovante): papel claro nos dois temas, igual ao arquivo baixado.
   No escuro o logo escuro da PayAlfa sumia no fundo escuro do comprovante. */
html body .pa-papel {
    --pa-surface: #FFFFFF; --pa-surface-2: #F7F8F5; --pa-surface-3: #ECEEE9; --pa-line: #E4E6E0; --pa-line-2: #D3D6CE;
    --pa-text: #14181B; --pa-text-2: #4A5258; --pa-text-3: #636B72; --pa-ink-rgb: 20,24,27;
    --pa-ok: #137A43; --pa-ok-tint: #E6F3EA; --pa-warn: #A15C07; --pa-warn-tint: #FBF0DC; --pa-bad: #C2331F; --pa-bad-tint: #FBE8E4;
    --pa-brand-tint: #E4EFEF; color-scheme: light; color: var(--pa-text);
}
html[data-pa-theme="dark"] body .pa-papel { box-shadow: 0 0 0 1px var(--pa-line); }

/* botao "Exportar CSV": o icone ficava colado no texto */
html body .btn.pa-csv { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* janela "Credenciais geradas" (abre depois que o modal fecha, entao o estilo nao pode morar dentro do modal) */
html body .swal2-popup .pa-cred-l { margin-top: 14px; text-align: left; display: grid; gap: 6px; }
html body .swal2-popup .pa-cred-l strong { font-size: 13px; color: var(--pa-text); }
html body .swal2-popup .pa-cred-l code { display: block; padding: 8px 10px; border: 1px solid var(--pa-line); border-radius: 6px; background: var(--pa-surface-2); color: var(--pa-text); font-family: var(--pa-mono, monospace); font-size: 12px; word-break: break-all; }
html body .swal2-popup .pa-cred-l .btn { justify-self: start; }