/*
 * Componentes visuais globais do Painel.
 * Carregado pelo tema global junto com expedit-tokens.css.
 */

/* Skeleton: a tela compoe o layout e controla o ciclo da requisicao. */
.exp-skeleton {
    display: block;
    width: var(--exp-skeleton-width, 100%);
    max-width: 100%;
    height: var(--exp-skeleton-height, 12px);
    border-radius: var(--exp-radius-md);
    background-color: var(--exp-skeleton-bg);
    background-image: linear-gradient(90deg,
        var(--exp-skeleton-bg) 25%,
        var(--exp-skeleton-highlight) 50%,
        var(--exp-skeleton-bg) 75%);
    background-size: 200% 100%;
    animation: exp-skeleton-shimmer var(--exp-skeleton-duration) ease-in-out infinite;
    pointer-events: none;
}

.exp-skeleton--text {
    border-radius: var(--exp-radius-sm);
}

.exp-skeleton--circle {
    flex-shrink: 0;
    width: var(--exp-skeleton-width, 32px);
    height: var(--exp-skeleton-height, 32px);
    border-radius: 50%;
}

.exp-skeleton--button {
    width: var(--exp-skeleton-width, 110px);
    height: var(--exp-skeleton-height, 40px);
}

.exp-skeleton--block {
    height: var(--exp-skeleton-height, 96px);
    border-radius: var(--exp-radius-lg);
}

@keyframes exp-skeleton-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .exp-skeleton {
        animation: none;
        background-image: none;
    }
}

/* Estados de conteudo opt-in: o consumidor controla consulta e visibilidade. */
.exp-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 160px;
    padding: 24px;
    box-sizing: border-box;
    border: 1px dashed var(--exp-color-border);
    border-radius: var(--exp-radius-lg);
    background: var(--exp-color-surface-subtle);
    color: var(--exp-color-text-secondary);
    text-align: center;
    overflow-wrap: anywhere;
}
.exp-state[hidden], .exp-state [hidden] { display: none; }
.exp-state--compact { min-height: 0; padding: 16px; }
.exp-state--loading { border-style: solid; background: var(--exp-color-surface); }
.exp-state--error { border-style: solid; border-color: var(--exp-color-danger); }
.exp-state .exp-state-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--exp-radius-lg);
    background: var(--exp-color-surface-muted);
    color: var(--exp-color-text-muted);
    font-size: 18px;
}
.exp-state-icon svg { width: 24px; height: 24px; }
.exp-state .exp-state-title { margin: 0; color: var(--exp-color-ink); font-size: 14px; font-weight: 600; line-height: 1.45; }
.exp-state .exp-state-copy { max-width: 55ch; margin: 0; color: var(--exp-color-text-secondary); font-size: 12px; line-height: 1.6; }
.exp-state--error .exp-state-title { color: var(--exp-color-danger-text); }
.exp-state--error .exp-state-icon { color: var(--exp-color-danger-text); background: var(--exp-color-danger-subtle); }
.exp-state > .exp-btn { max-width: 100%; margin-top: 4px; white-space: normal; }
.exp-state-placeholder { width: min(220px, 100%); }
.exp-state-placeholder > .exp-skeleton + .exp-skeleton { margin-top: 8px; }
@media (max-width: 600px) { .exp-state { padding: 16px; } }

/* Callout contextual opt-in: informacao por padrao, sem handlers ou foco. */
.exp-callout {
    --exp-callout-bg: var(--exp-color-info-subtle);
    --exp-callout-color: var(--exp-color-info-text);
    --exp-callout-border: color-mix(in srgb, var(--exp-color-info) 30%, transparent);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 14px 16px;
    box-sizing: border-box;
    border: 1px solid var(--exp-callout-border);
    border-radius: var(--exp-radius-lg);
    background: var(--exp-callout-bg);
    color: var(--exp-callout-color);
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.exp-callout[hidden] { display: none; }
.exp-callout--warning {
    --exp-callout-bg: var(--exp-color-warning-subtle);
    --exp-callout-color: var(--exp-color-warning-text);
    --exp-callout-border: color-mix(in srgb, var(--exp-color-warning) 30%, transparent);
}
.exp-callout .exp-callout-icon { flex: none; margin-top: 2px; color: inherit; font-size: 16px; line-height: 1.25; }
.exp-callout .exp-callout-body { flex: 1; min-width: 0; color: inherit; }
.exp-callout .exp-callout-body > p { margin: 0; }
.exp-callout .exp-callout-body > p + p { margin-top: 4px; }
.exp-callout .exp-callout-title { color: inherit; font-weight: 600; }

/* Variante opt-in do SweetAlert2, ativada por customClass.popup. */
.swal2-popup.exp-swal {
    border: 1px solid var(--exp-color-border);
    border-radius: var(--exp-radius-xl);
    background: var(--exp-color-surface);
    color: var(--exp-color-text-primary);
    box-shadow: var(--exp-shadow-soft);
}

.swal2-popup.exp-swal .swal2-title {
    color: var(--exp-color-text-primary);
}

.swal2-popup.exp-swal :is(.swal2-html-container, .swal2-footer) {
    color: var(--exp-color-text-secondary);
}

.swal2-popup.exp-swal .swal2-icon.swal2-success {
    color: var(--exp-color-success);
    border-color: color-mix(in srgb, var(--exp-color-success) 40%, transparent);
}

.swal2-popup.exp-swal .swal2-success-ring {
    border-color: color-mix(in srgb, var(--exp-color-success) 40%, transparent);
}

.swal2-popup.exp-swal :is(.swal2-success-line-tip, .swal2-success-line-long) {
    background-color: var(--exp-color-success);
}

/* O plugin aplica a cor das mascaras do icone em style inline. */
.swal2-popup.exp-swal :is(.swal2-success-circular-line-left, .swal2-success-circular-line-right, .swal2-success-fix) {
    background-color: var(--exp-color-surface) !important;
}

.swal2-popup.exp-swal .swal2-icon.swal2-error {
    color: var(--exp-color-danger);
    border-color: var(--exp-color-danger);
}

.swal2-popup.exp-swal :is(.swal2-x-mark-line-left, .swal2-x-mark-line-right) {
    background-color: var(--exp-color-danger);
}

.swal2-popup.exp-swal .swal2-icon.swal2-warning {
    color: var(--exp-color-warning);
    border-color: var(--exp-color-warning);
}

.swal2-popup.exp-swal .swal2-icon.swal2-info {
    color: var(--exp-color-info);
    border-color: var(--exp-color-info);
}

.swal2-popup.exp-swal .swal2-icon.swal2-question {
    color: var(--exp-color-text-muted);
    border-color: var(--exp-color-border-strong);
}

.swal2-popup.exp-swal .swal2-actions {
    gap: 8px;
}

/* Notificacoes comuns emitidas por Toastr(); plugin conserva timer/callbacks. */
#toastr-container .toastr.exp-toastr {
    position:relative; width:min(320px,calc(100vw - 24px)); max-width:100%;
    padding:14px 48px 14px 44px; opacity:1; background-image:none!important;
    border:1px solid var(--exp-color-border); border-radius:var(--exp-radius-md);
    box-shadow:var(--exp-shadow-soft); background-color:var(--exp-color-info-subtle);
    color:var(--exp-color-info-text); font:13px/1.5 Inter,system-ui,sans-serif;
    overflow-wrap:anywhere;
}
#toastr-container .exp-toastr.toastr-success { background-color:var(--exp-color-success-subtle); color:var(--exp-color-success-text); }
#toastr-container .exp-toastr.toastr-error { background-color:var(--exp-color-danger-subtle); color:var(--exp-color-danger-text); }
#toastr-container .exp-toastr.toastr-warning { background-color:var(--exp-color-warning-subtle); color:var(--exp-color-warning-text); }
#toastr-container .exp-toastr .exp-toastr-icon { position:absolute; top:16px; left:14px; font-size:18px; color:inherit; }
#toastr-container .exp-toastr .toastr-title { font-size:13px; font-weight:600; }
#toastr-container .exp-toastr .toastr-close-button { position:absolute; top:6px; right:6px; float:none; padding:6px; width:36px; height:36px; font-size:20px; line-height:1; color:inherit; background:transparent; mask:none; -webkit-mask:none; border-radius:var(--exp-radius-sm); text-shadow:none; opacity:1; }
#toastr-container .exp-toastr .toastr-close-button:focus-visible { outline:2px solid var(--exp-color-brand-blue)!important; outline-offset:1px; }
#toastr-container:has(.exp-toastr) { max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; }
.swal2-popup.exp-notification-fallback.swal2-toast { width:min(320px,calc(100vw - 24px)); font-size:13px; }
.exp-notification-fallback .swal2-close { color:var(--exp-color-text-secondary); }

/* Shell transitório para formulários de Agenda carregados por AJAX. O modal
 * real continua vindo do endpoint; este só torna o clique imediato. */
.exp-agenda-modal-loading .exp-modal-body{min-height:270px}
.agenda-form-skeleton{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.agenda-form-skeleton span,.agenda-form-skeleton-footer{display:block;height:42px;border-radius:var(--exp-radius-md);background:linear-gradient(90deg,var(--exp-color-surface-subtle) 25%,var(--exp-color-surface-muted) 50%,var(--exp-color-surface-subtle) 75%);background-size:200% 100%;animation:exp-agenda-form-shimmer 1.15s ease-in-out infinite}
.agenda-form-skeleton span:nth-child(5){grid-column:1/-1;height:80px}
.agenda-form-skeleton span:nth-child(6){width:44%}
.agenda-form-skeleton-footer{width:110px;height:36px}
@keyframes exp-agenda-form-shimmer{to{background-position:-200% 0}}
@media(max-width:640px){.agenda-form-skeleton{grid-template-columns:minmax(0,1fr)}}

/* Graficos em HTML/CSS: composicao e dados continuam no modulo consumidor. */
.exp-chart{min-width:0;color:var(--exp-color-ink);font-size:var(--exp-chart-font-size);font-variant-numeric:tabular-nums}
.exp-chart-track{display:flex;min-width:0;height:var(--exp-chart-track-height);overflow:hidden;border-radius:var(--exp-radius-sm);background:var(--exp-color-surface-muted)}
.exp-chart-track--thin{height:var(--exp-chart-track-thin-height)}
.exp-chart-track>:is(span,i){height:100%;flex-shrink:0}
.exp-chart-legend{display:flex;flex-wrap:wrap;gap:8px 14px;padding:0;list-style:none;font-size:var(--exp-chart-font-size);color:var(--exp-color-text-secondary);font-variant-numeric:tabular-nums}
.exp-chart-legend>:is(span,li){display:inline-flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap;overflow-wrap:anywhere}
.exp-chart-legend :is(b,strong):not(.exp-chart-dot){color:var(--exp-color-ink)}
.exp-chart-dot{display:inline-block;width:var(--exp-chart-dot-size);height:var(--exp-chart-dot-size);flex:0 0 var(--exp-chart-dot-size);border-radius:2px}
.exp-chart :focus-visible{outline:2px solid var(--exp-color-brand-blue);outline-offset:3px}

/* Paginas e tabelas opt-in: nao alteram o container ou o FlexGrid legado. */
.exp-page{box-sizing:border-box;width:100%;max-width:none;min-width:0;margin:0;padding:24px var(--exp-page-gutter,clamp(24px,5%,80px)) 40px;background:var(--exp-color-surface-subtle);color:var(--exp-color-ink);font:13px/1.5 Inter,system-ui,Arial,sans-serif;--exp-button-bg-primary:var(--exp-color-brand-navy)}
.exp-page *{box-sizing:border-box}
/* Fichas de pessoa e processo: base visual opt-in, sem controlar dados ou abas. */
.exp-record{--exp-button-text-secondary:var(--exp-color-ink);min-width:0}
.exp-record .exp-btn{min-height:36px;border-radius:var(--exp-radius-md);font-size:12px;font-weight:500;box-shadow:none}
.exp-record .exp-btn i{color:inherit}
.exp-record .exp-record-title{margin:0;color:var(--exp-color-ink);font-size:22px;line-height:1.3;font-weight:600;overflow-wrap:anywhere}
.exp-record .exp-record-heading{display:flex;align-items:center;flex-wrap:wrap;gap:8px;width:100%;min-width:0}
.exp-record .exp-record-heading>.exp-btn{margin-left:auto;flex:none;white-space:nowrap}
.exp-record .exp-record-tabs{min-width:0;margin:0 0 16px;padding:6px;border:1px solid var(--exp-color-border);border-radius:var(--exp-radius-lg);background:var(--exp-color-surface)}
.exp-record .exp-record-tabs-list{display:flex;flex-wrap:wrap;gap:4px;min-width:0;margin:0;padding:0;border:0;list-style:none;overflow:visible}
.exp-record .exp-record-tab{display:inline-flex;align-items:center;gap:7px;min-height:36px;margin:0;padding:8px 10px;border:0;border-radius:var(--exp-radius-md);background:transparent;font:500 12px/1.5 Inter,system-ui,Arial,sans-serif;color:var(--exp-color-text-secondary);text-decoration:none;white-space:nowrap;cursor:pointer;flex:none}
.exp-record .exp-record-tab i{margin:0;color:var(--exp-color-text-muted)}
.exp-record .exp-record-tab:hover{background:var(--exp-color-surface-subtle)}
.exp-record .exp-record-tab.active{background:var(--exp-color-primary-50);color:var(--exp-color-primary-700);font-weight:600}
.exp-record .exp-record-tab.active i{color:inherit}
.exp-record :is(.exp-btn,.exp-record-tab):focus-visible{outline:2px solid var(--exp-color-brand-blue);outline-offset:2px}
@media(max-width:760px){.exp-record .exp-record-tabs-list{flex-wrap:nowrap!important;overflow-x:auto!important;overscroll-behavior-x:contain;padding-bottom:4px}.exp-record .exp-record-tabs-list>li{flex:none}}
@media(max-width:600px){.exp-record .exp-record-title{font-size:18px}}
/* Base CSS opt-in de formularios de pagina (.exp-form), nao um componente de
   formulario/validacao. Os macros Twig legados nao aderem automaticamente. */
.exp-form{min-width:0;color:var(--exp-color-ink);font:13px/1.5 Inter,system-ui,Arial,sans-serif}
.exp-form .form-label{display:block;margin-bottom:6px!important;font-size:12px!important;font-weight:600!important;color:var(--exp-color-ink)!important}
.exp-form label.block{display:block;margin-bottom:6px!important;font-size:12px;font-weight:600;color:var(--exp-color-ink)}
.exp-form :is(.form-control,.form-select){min-width:0;min-height:40px;padding:8px 11px!important;border:1px solid var(--exp-color-border);border-radius:var(--exp-radius-md);background-color:var(--exp-color-surface)!important;color:var(--exp-color-ink)!important;box-shadow:none;font:13px/1.45 Inter,system-ui,Arial,sans-serif}
.exp-form select:is(.form-control,.form-select){appearance:auto;background-image:none;padding-right:8px!important}
.exp-form textarea.form-control{min-height:80px;resize:vertical}
.exp-form :is(.form-control,.form-select):disabled{background-color:var(--exp-color-surface-muted)!important;color:var(--exp-color-text-muted)!important}
.exp-form :is(input,textarea)::placeholder{color:var(--exp-color-text-muted)}
.exp-form :is(.form-control,.form-select):focus{border-color:var(--exp-color-brand-blue);box-shadow:0 0 0 3px var(--exp-color-primary-50)}
.exp-form .select2-container{min-width:0;max-width:100%;width:100%!important}
.exp-form .select2-selection{min-height:40px!important;background-color:var(--exp-color-surface)!important;border:1px solid var(--exp-color-border)!important;border-radius:var(--exp-radius-md)}
.exp-form .select2-container--disabled .select2-selection{background-color:var(--exp-color-surface-muted)!important}
.exp-form .select2-container--disabled .select2-selection__rendered{color:var(--exp-color-text-muted)!important}
.exp-form .select2-selection__rendered{color:var(--exp-color-ink)!important;font-size:13px;line-height:38px!important}
.exp-form .select2-selection--multiple .select2-selection__rendered{line-height:1.45!important}
.exp-form .select2-selection__choice{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.exp-form .select2-selection__arrow{height:38px!important}
.exp-form :is(.form-text,.helper-text){font-size:12px;color:var(--exp-color-text-muted)}
.exp-form .exp-btn{min-height:40px}
.exp-form :focus-visible{outline:2px solid var(--exp-color-brand-blue);outline-offset:2px}
/* Macros Twig opt-in: base exp-form; nomes/valores/widgets continuam no caller. */
.exp-field{min-width:0}
.exp-field-heading{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-bottom:6px;min-width:0}
.exp-field-heading .form-label{flex:1 1 140px;min-width:0;margin-bottom:0!important;overflow-wrap:anywhere}
.exp-field-heading .exp-btn{min-height:36px;font-size:12px;padding:6px 10px}
.exp-field-input-wrap{position:relative;min-width:0}
.exp-field .exp-field-control{box-sizing:border-box;line-height:1.45!important}
.exp-field textarea.exp-field-control{min-height:80px!important}
.exp-field .exp-field-control--prefix{padding-left:40px!important}
.exp-field .exp-field-control--icon{padding-right:36px!important}
.exp-field select.exp-field-control--icon{appearance:none}
.exp-field .exp-field-adornment,.exp-field .exp-field-prefix{position:absolute;inset:0 12px 0 auto;padding:0;display:flex;align-items:center;pointer-events:none;color:var(--exp-color-text-muted)}
.exp-field .exp-field-prefix{inset:0 auto 0 12px}
.exp-field .exp-field-adornment i,.exp-field .exp-field-prefix span{color:inherit}
.exp-field .select2-container + .exp-field-adornment{display:none}
.exp-grid{min-width:0;width:100%;color:var(--exp-color-ink);font:13px/1.5 Inter,system-ui,Arial,sans-serif;--exp-button-bg-primary:var(--exp-color-brand-navy)}
/* O FlexGrid legado gera bg-white/bg-gray-50; estes aliases preservam as
   superficies semanticas dentro da variante opt-in, inclusive no dark mode. */
.exp-grid>[class*="flexgrid-instance-"]{background:var(--exp-color-surface)!important;border:1px solid var(--exp-color-border);border-radius:var(--exp-radius-lg);box-shadow:none;overflow:hidden}
.exp-grid>[class*="flexgrid-instance-"]>div:first-child{padding:18px 20px;gap:14px;border-color:var(--exp-color-border)!important}
.exp-grid>[class*="flexgrid-instance-"]>div.bg-gray-50{background:var(--exp-color-surface-muted)!important;border-color:var(--exp-color-border)!important}
.exp-grid h2{font-size:16px;font-weight:600;color:var(--exp-color-ink)!important;margin:0}
.exp-grid h2+p{font-size:12px;color:var(--exp-color-text-muted)!important;margin-top:4px}
.exp-grid h2+p:empty{display:none}
.exp-grid.exp-page h2{font-size:22px}
.exp-grid .new-btn-container{flex-wrap:wrap;gap:8px}
.exp-grid .new-btn-container>.exp-btn,.exp-grid [id^=export-dropdown-trigger-]{min-height:40px;font-size:12px;box-shadow:none}
.exp-grid .exp-btn i{color:inherit}
.exp-grid [id^=export-dropdown-trigger-]{border-color:var(--exp-color-border);border-radius:var(--exp-radius-md);color:var(--exp-color-ink)}
.exp-grid .flexgrid-table,.exp-grid .flexgrid-table>*{border-color:var(--exp-color-border)!important}
.exp-grid .flexgrid-fit-wrapper{background:var(--exp-color-surface)}
.exp-grid .flexgrid-table tbody{background:var(--exp-color-surface)!important;border-color:var(--exp-color-border)!important}
.exp-grid .flexgrid-table tbody>tr{border-color:var(--exp-color-border)!important}
.exp-grid .flexgrid-table th{background:var(--exp-color-surface-subtle);color:var(--exp-color-text-muted);font-size:11px;font-weight:600;border-color:var(--exp-color-border)}
.exp-grid .flexgrid-table td{color:var(--exp-color-ink);border-color:var(--exp-color-border)}
.exp-grid .flexgrid-table tbody tr:hover{background:var(--exp-color-selected-bg)}
.exp-grid .flexgrid-table td .exp-icon-btn{width:36px;height:36px;min-width:36px;padding:0;box-shadow:none;color:var(--exp-color-text-secondary)}
.exp-grid .flexgrid-table td .exp-icon-btn i{font-size:18px;color:inherit}
.exp-grid .flexgrid-table td .exp-icon-btn[data-metodo=DELETE]{color:var(--exp-color-danger-text)}
.exp-grid [data-flexgrid-pagination-size] select{height:40px;color:var(--exp-color-ink)!important;border:1px solid var(--exp-color-border);border-radius:var(--exp-radius-md);background:var(--exp-color-surface);appearance:auto;font-size:12px}
.exp-grid [data-flexgrid-pagination-size]{gap:6px;color:var(--exp-color-text-muted)}
/* Compatibilidade dark: html.dark .bg-* usa !important no tema legado.
   O escopo e a especificidade abaixo prevalecem mesmo com CSS injetado depois. */
html.dark .exp-grid>[class*="flexgrid-instance-"],html.dark .exp-grid .flexgrid-table tbody{background:var(--exp-color-surface)!important}
html.dark .exp-grid>[class*="flexgrid-instance-"]>div.bg-gray-50>.text-gray-500{color:var(--exp-color-text-muted)!important}
html.dark .exp-grid .flexgrid-table thead{background:var(--exp-color-surface-subtle)!important}
html.dark .exp-grid .flexgrid-table th{color:var(--exp-color-text-muted)!important}
html.dark .exp-grid .flexgrid-table tbody tr:hover{background:var(--exp-color-selected-bg)!important}
html.dark .exp-grid .flexgrid-skeleton-line{background:var(--exp-color-surface-muted)}
html.dark .exp-grid .flexgrid-skeleton-line::after{background:linear-gradient(90deg,transparent,var(--exp-color-border-strong),transparent)}
html.dark .exp-grid .flexgrid-mobile-cards>div{background:var(--exp-color-surface)!important;border-color:var(--exp-color-border)!important}
html.dark .exp-grid .flexgrid-mobile-card>div:first-child{border-color:var(--exp-color-border)!important}
html.dark .exp-grid .flexgrid-mobile-card details{background:var(--exp-color-surface-muted)!important;border-color:var(--exp-color-border)!important}
html.dark .exp-grid .flexgrid-mobile-card .fg-label{color:var(--exp-color-text-muted)}
html.dark .exp-grid .flexgrid-mobile-card .fg-value{color:var(--exp-color-text-primary)}
html.dark .exp-grid>div.border-t{border-color:var(--exp-color-border)!important}
html.dark .exp-grid [data-flexgrid-pagination-summary]{color:var(--exp-color-text-muted)!important}
html.dark .exp-grid [data-flexgrid-pagination-size] select{background:var(--exp-color-surface)!important;border-color:var(--exp-color-border)!important}
.exp-grid-filters{padding:20px 16px;background:color-mix(in srgb,var(--exp-color-brand-navy) 32%,transparent);backdrop-filter:none;color:var(--exp-color-ink);font:13px/1.45 Inter,system-ui,Arial,sans-serif}
/* O FlexGrid gera utilitarios Tailwind claros. Esta variante cria hierarquia
   entre shell, formulario e rodape sem alterar os hooks nem os controles. */
.exp-grid-filters>div{display:flex;flex-direction:column;max-height:calc(100dvh - 40px);margin:0;min-width:0;overflow:hidden;border:1px solid var(--exp-color-border);border-radius:var(--exp-radius-xl);background:var(--exp-color-surface);box-shadow:var(--exp-shadow-soft)}
.exp-grid-filters>div>div:first-child,.exp-grid-filters>div>div:last-child{flex:none;padding:14px 22px;border-color:var(--exp-color-border);background:var(--exp-color-surface);gap:8px;flex-wrap:wrap}
.exp-grid-filters>div>div:first-child{border-bottom:1px solid var(--exp-color-border)}
.exp-grid-filters>div>div:nth-child(2){overflow:auto;min-height:0;padding:18px 22px;background:var(--exp-color-surface-raised,var(--exp-color-surface-subtle))}
.exp-grid-filters>div>div:last-child{border-top:1px solid var(--exp-color-border)}
.exp-grid-filters h3{font-size:16px;font-weight:600;color:var(--exp-color-ink)}
.exp-grid-filters label{font-size:12px;color:var(--exp-color-text-secondary)}
.exp-grid-filters :is(input:not([type=checkbox]):not([type=radio]),select){height:40px;border-color:var(--exp-color-border);border-radius:var(--exp-radius-md);color:var(--exp-color-ink)!important;background:var(--exp-color-surface);box-shadow:none;font-size:13px}
.exp-grid-filters :is(input:not([type=checkbox]):not([type=radio]),select):disabled{background:var(--exp-color-surface-muted);color:var(--exp-color-text-muted)!important}
.exp-grid-filters :is(input,textarea)::placeholder{color:var(--exp-color-text-muted)}
.exp-grid-filters select{appearance:none}
.exp-grid-filters .exp-btn{min-height:40px}
.exp-grid-filters [data-action].exp-btn,.exp-grid-filters [data-action=close].exp-icon-btn{appearance:none!important;-webkit-appearance:none!important;transition:none!important}
.exp-grid-filters [data-action=close].exp-icon-btn{padding:0!important;border:0!important;background:transparent!important;color:var(--exp-icon-button-color)!important;box-shadow:none!important}
.exp-grid-filters [data-action=close].exp-icon-btn:hover{background:var(--exp-icon-button-hover-bg)!important;color:var(--exp-icon-button-hover-color)!important}
.exp-grid-filters [data-action=close] i{font-size:20px;color:inherit}
.exp-grid-filters [data-action=reset].exp-btn{background:var(--exp-button-bg-secondary)!important;border-color:var(--exp-button-border-secondary)!important;color:var(--exp-button-text-secondary)!important}
.exp-grid-filters [data-action=reset].exp-btn:hover{background:var(--exp-button-bg-secondary-hover)!important}
.exp-grid-filters [data-action=apply].exp-btn{background:var(--exp-button-bg-primary)!important;border-color:var(--exp-button-bg-primary)!important;color:var(--exp-button-text-primary)!important}
.exp-grid-filters [data-action=apply].exp-btn:hover{background:var(--exp-button-bg-primary-hover)!important;border-color:var(--exp-button-bg-primary-hover)!important}
.exp-grid-filters .select2-selection{min-height:40px!important;border:1px solid var(--exp-color-border)!important;background:var(--exp-color-surface)!important;border-radius:var(--exp-radius-md)}
.exp-grid-filters .select2-selection__rendered{color:var(--exp-color-ink);font-size:13px}
.exp-grid-filters :is(input:not([type=checkbox]):not([type=radio]),select):focus,.exp-grid-filters .select2-container--focus .select2-selection,.exp-grid-filters .select2-container--open .select2-selection{border-color:var(--exp-color-brand-blue)!important;box-shadow:0 0 0 3px var(--exp-color-primary-50)!important}
.exp-grid-filters :focus-visible{outline:2px solid var(--exp-color-brand-blue);outline-offset:2px}
/* O tema legado substitui bg-white com !important. Mantemos a elevacao do
   dialogo e o contraste dos controles somente nesta variante do FlexGrid. */
html.dark .exp-grid-filters>div{background:var(--exp-color-surface-raised)!important;border-color:var(--exp-color-border)!important;color:var(--exp-color-text-primary)!important}
html.dark .exp-grid-filters>div>div:first-child,html.dark .exp-grid-filters>div>div:last-child{background:var(--exp-color-surface)!important;border-color:var(--exp-color-border)!important}
html.dark .exp-grid-filters>div>div:nth-child(2){background:var(--exp-color-surface-raised)!important}
html.dark .exp-grid-filters :is(.text-gray-700,.text-gray-600,.text-slate-600){color:var(--exp-color-text-secondary)!important}
html.dark .exp-grid-filters :is(input:not([type=checkbox]):not([type=radio]),select){background:var(--exp-color-surface)!important;border-color:var(--exp-color-border)!important;color:var(--exp-color-text-primary)!important}
html.dark .exp-grid-filters :is(input:not([type=checkbox]):not([type=radio]),select):disabled{background:var(--exp-color-surface-muted)!important;color:var(--exp-color-text-muted)!important}
html.dark .exp-grid-filters .select2-selection{background:var(--exp-color-surface)!important;border-color:var(--exp-color-border)!important}
html.dark .exp-grid-filters .select2-selection__rendered{color:var(--exp-color-text-primary)!important}
/* DateRangePicker e anexado ao body pelo plugin. Os aliases Bootstrap ficam
   restritos ao popup; a mesma paleta atende atalhos e calendario em ambos os temas. */
.daterangepicker {
    --bs-body-bg: var(--exp-dropdown-bg);
    --bs-dropdown-box-shadow: var(--exp-shadow-soft);
    --bs-component-hover-bg: var(--exp-color-selected-bg);
    --bs-component-hover-color: var(--exp-color-selected-text);
    --bs-component-active-bg: var(--exp-button-bg-primary);
    --bs-component-active-color: var(--exp-button-text-primary);
    --bs-gray-200: var(--exp-color-border);
    --bs-gray-500: var(--exp-color-text-muted);
    --bs-gray-600: var(--exp-color-text-secondary);
    --bs-gray-700: var(--exp-color-text-primary);
    --bs-gray-800: var(--exp-color-ink);
    --bs-input-color: var(--exp-color-text-primary);
    --bs-light: var(--exp-button-bg-secondary);
    --bs-light-active: var(--exp-button-bg-secondary-hover);
    --bs-light-inverse: var(--exp-button-text-secondary);
    color: var(--exp-color-text-primary);
    background: var(--exp-dropdown-bg);
    border: 1px solid var(--exp-dropdown-border);
    border-radius: var(--exp-radius-lg);
    box-shadow: var(--exp-shadow-soft);
}
.daterangepicker .ranges {
    background: var(--exp-color-surface);
    border-radius: var(--exp-radius-lg);
}
.daterangepicker .ranges ul {
    width: 168px;
    max-height: min(296px, calc(100dvh - 100px));
    padding: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--exp-color-border-strong) var(--exp-color-surface);
}
.daterangepicker .ranges li {
    padding: 10px 12px;
    border-radius: var(--exp-radius-md);
    color: var(--exp-color-text-secondary);
    font-size: 13px;
    line-height: 1.4;
}
.daterangepicker .ranges li.active,
.daterangepicker .ranges li.active:hover {
    background: var(--exp-color-selected-bg);
    color: var(--exp-color-selected-text);
    font-weight: 600;
    box-shadow: inset 3px 0 var(--exp-color-brand-blue);
}
.daterangepicker.show-calendar .ranges { border-top-left-radius: var(--exp-radius-lg); }
.daterangepicker .drp-calendar th.month { color: var(--exp-color-ink); font-weight: 600; }
.daterangepicker .drp-calendar thead tr:last-child th { color: var(--exp-color-text-muted); }
.daterangepicker .drp-calendar td.today:not(.active) {
    background: var(--exp-color-surface-muted) !important;
    color: var(--exp-color-text-primary) !important;
    box-shadow: inset 0 0 0 1px var(--exp-color-border-strong);
}
.daterangepicker .drp-calendar td.in-range.available:not(.active):not(.off) {
    background: var(--exp-color-selected-bg) !important;
    color: var(--exp-color-selected-text) !important;
}
.daterangepicker .drp-calendar td.active,
.daterangepicker .drp-calendar td.today.active,
.daterangepicker .drp-calendar td.active:hover {
    background: var(--exp-button-bg-primary) !important;
    color: var(--exp-button-text-primary) !important;
}
.daterangepicker .drp-calendar td.disabled,
.daterangepicker .drp-calendar td.disabled:hover {
    background: transparent;
    color: var(--exp-color-text-disabled);
}
.daterangepicker select {
    color: var(--exp-color-text-primary) !important;
    border-color: var(--exp-color-border);
}
.daterangepicker .drp-buttons {
    background: var(--exp-color-surface);
    border-color: var(--exp-color-border);
    border-radius: 0 0 var(--exp-radius-lg) var(--exp-radius-lg);
}
.daterangepicker .drp-selected { color: var(--exp-color-text-secondary); }
.daterangepicker .drp-buttons .btn {
    min-height: 36px;
    border-radius: var(--exp-radius-md);
    font-size: 13px;
}
.daterangepicker .drp-buttons .cancelBtn {
    border: 1px solid var(--exp-button-border-secondary);
    border-color: var(--exp-button-border-secondary) !important;
    color: var(--exp-button-text-secondary);
    background: var(--exp-button-bg-secondary);
}
.daterangepicker .drp-buttons .applyBtn {
    border: 1px solid var(--exp-button-bg-primary);
    color: var(--exp-button-text-primary) !important;
    background: var(--exp-button-bg-primary) !important;
}
.daterangepicker .drp-buttons .applyBtn:hover:not(:disabled) { opacity: var(--exp-button-hover-opacity); }
.daterangepicker .drp-buttons .applyBtn:disabled {
    background: var(--exp-color-surface-muted) !important;
    border-color: var(--exp-color-border);
    color: var(--exp-color-text-disabled) !important;
    opacity: 1;
}
.daterangepicker :is(button,select):focus-visible {
    outline: 2px solid var(--exp-color-brand-blue) !important;
    outline-offset: 2px;
}

/* Variante visual do modal Twig existente; formularios e hooks sao preservados. */
.tailwind-modal.exp-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:109;padding:20px 16px;overflow:hidden;background:color-mix(in srgb,var(--exp-color-brand-navy) 32%,transparent);color:var(--exp-color-ink);font:13px/1.45 Inter,system-ui,Arial,sans-serif;--exp-button-bg-primary:var(--exp-color-brand-blue);--exp-button-text-primary:var(--exp-color-ink)}
.exp-modal.hidden{display:none!important}
.exp-form-modal .form-modal-shell,.exp-form-modal .form-modal-layout{display:flex;flex-direction:column;min-height:0;overflow:hidden;width:100%}
.exp-form-modal .form-modal-layout{flex:1}
.exp-form-modal .exp-modal-body{padding-bottom:18px}
.exp-form-modal .exp-modal-body>.grid{margin:0}
.exp-form-modal .exp-modal-body :is(.exp-confirmation-content,.exp-confirmation-list){display:flex;flex-direction:column;gap:14px;min-width:0}
.exp-form-modal .exp-confirmation-list{margin-block:14px}
.exp-form-modal .exp-modal-body label.exp-confirmation-item{display:flex;align-items:flex-start;gap:12px;padding:14px;margin:0!important;border:1px solid var(--exp-color-border);border-radius:var(--exp-radius-lg);background:var(--exp-color-surface);cursor:pointer}
.exp-form-modal .exp-modal-body label.exp-confirmation-item:has(:checked){border-color:var(--exp-color-brand-blue);background:var(--exp-color-primary-50)}
.exp-form-modal .exp-confirmation-item>input{margin-top:3px!important}
.exp-form-modal .exp-confirmation-item>div{flex:1;min-width:0}
.exp-form-modal .exp-modal-body p{color:var(--exp-color-text-muted);overflow-wrap:anywhere;font-size:12px;line-height:1.5;margin:0}
.exp-form-modal .exp-modal-body .font-semibold{color:var(--exp-color-ink);font-weight:600}
.exp-form-modal .exp-flow-item,.exp-form-modal .exp-flow-notice{padding:14px;border:1px solid var(--exp-color-border);border-radius:var(--exp-radius-lg);background:var(--exp-color-surface-subtle)}
.exp-form-modal .exp-modal-body .exp-flow-notice{border-color:var(--exp-color-warning);background:var(--exp-color-warning-subtle)}
.exp-form-modal .exp-form-label-action{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px}
.exp-form-modal .exp-form-label-action label{margin:0!important}
.exp-form-modal .exp-modal-body .exp-form-label-row{display:flex;align-items:center;min-height:36px;margin:0!important}
.exp-form-modal .exp-form-switch{display:flex;align-items:center;gap:8px;min-height:36px}
.exp-form-modal .sp-original-input-container{width:100%;min-width:0}
.exp-form-modal .sp-original-input-container input{flex:1;min-width:0}
.exp-form-modal .exp-form-label-action .exp-btn{min-height:36px;padding:6px 10px}
.exp-form-modal .exp-modal-body .css-15w92n6{padding:14px;border:1px solid var(--exp-color-border);border-radius:var(--exp-radius-lg);background:var(--exp-color-surface-subtle);box-shadow:none}
.exp-form-modal .exp-modal-body .addNewEvento{display:block}
.timesheet-selection-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.timesheet-selection-modal .timesheet-card{border:1px solid var(--exp-color-border);border-radius:var(--exp-radius-lg);background:var(--exp-color-surface);box-shadow:none;cursor:pointer;min-width:0}
.timesheet-selection-modal .timesheet-card:is(.active,:hover){border-color:var(--exp-color-brand-blue);box-shadow:none;background:var(--exp-color-primary-50)}
.timesheet-selection-content{padding:14px}
.timesheet-selection-summary{display:flex;flex-direction:column;gap:10px}
.timesheet-selection-title{margin:0;color:var(--exp-color-ink);font-size:13px;font-weight:600;overflow-wrap:anywhere}
.timesheet-selection-details{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--exp-color-text-muted);font-size:12px}
.timesheet-selection-info{margin-right:auto;color:var(--exp-color-text-muted);font-size:12px;overflow-wrap:anywhere;min-width:0;flex:1 1 180px}
.timesheet-selection-empty{grid-column:1/-1;padding:20px 0;text-align:center}
@media(max-width:520px){.timesheet-selection-list{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.exp-form-modal .exp-modal-body .row>:is(.col-md-3,.col-md-4,.col-md-9){flex-basis:100%}}
/* Variante opt-in para os modais Bootstrap: o plugin controla abertura e foco. */
.exp-bootstrap-modal{color:var(--exp-color-ink);font:13px/1.45 Inter,system-ui,Arial,sans-serif;--exp-button-bg-primary:var(--exp-color-brand-blue);--exp-button-text-primary:var(--exp-color-ink)}
.exp-bootstrap-modal .modal-dialog{width:var(--exp-modal-width,760px);max-width:calc(100vw - 32px);margin:20px auto;min-height:calc(100% - 40px)}
.exp-bootstrap-modal .modal-content{display:flex;flex-direction:column;max-height:calc(100dvh - 40px);min-height:0;overflow:hidden;border:1px solid var(--exp-color-border);border-radius:var(--exp-radius-xl);background:var(--exp-color-surface);box-shadow:var(--exp-shadow-soft)}
.exp-bootstrap-modal .exp-modal-form{display:flex;flex-direction:column;min-height:0;margin:0;overflow:hidden}
@media(max-width:520px){.exp-bootstrap-modal .modal-dialog{max-width:calc(100vw - 24px);margin:12px auto;min-height:calc(100% - 24px)}.exp-bootstrap-modal .modal-content{max-height:calc(100dvh - 24px)}}
.exp-modal>div:first-child{width:100%;max-width:min(var(--exp-modal-width,900px),calc(100vw - 32px));max-height:calc(100dvh - 40px);border:1px solid var(--exp-color-border);border-radius:var(--exp-radius-xl);background:var(--exp-color-surface);box-shadow:var(--exp-shadow-soft);min-height:0}
:is(.exp-modal,.exp-bootstrap-modal) .exp-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 22px 14px;flex:none;border-bottom:1px solid var(--exp-color-border);background:var(--exp-color-surface)}
:is(.exp-modal,.exp-bootstrap-modal) .exp-modal-header h2{font-size:16px;font-weight:600;color:var(--exp-color-ink);margin:0}
:is(.exp-modal,.exp-bootstrap-modal) .exp-modal-header p{font-size:12px;color:var(--exp-color-text-muted);margin:4px 0 0}
:is(.exp-modal,.exp-bootstrap-modal) .exp-modal-header>.exp-icon-btn{flex:none}
.exp-modal>div:first-child>form{display:flex;flex:1;flex-direction:column;min-height:0;padding:0;overflow:hidden;margin:0}
:is(.exp-modal,.exp-bootstrap-modal) form>*{margin-top:0!important;margin-bottom:0!important}
:is(.exp-modal,.exp-bootstrap-modal) .exp-modal-body{padding:18px 22px 6px;min-height:0;overflow:auto;overscroll-behavior:contain}
:is(.exp-modal,.exp-bootstrap-modal) .modal-form-footer{display:flex;flex:none;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;padding:14px 22px;border-top:1px solid var(--exp-color-border);background:var(--exp-color-surface)}
:is(.exp-modal,.exp-bootstrap-modal) .modal-form-footer>div:empty{display:none}
:is(.exp-modal,.exp-bootstrap-modal) .modal-form-footer.hidden{display:none!important}
:is(.exp-modal,.exp-bootstrap-modal) .modal-form-footer>div:last-child{display:flex;flex-direction:row;gap:8px;flex-wrap:wrap}
:is(.exp-modal,.exp-bootstrap-modal) .modal-form-footer .exp-btn{min-height:40px;font-size:13px;font-weight:600}
:is(.exp-modal,.exp-bootstrap-modal) .exp-btn i{color:inherit}
/* Cadastros compactos: opt-in compartilhado por Pessoas e Configuracao. */
.exp-modal.exp-catalog-modal>.bg-white{background:var(--exp-color-surface)!important}
.exp-catalog-modal .exp-modal-heading-icon{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:var(--exp-radius-lg);background:var(--exp-color-info-subtle);color:var(--exp-color-info-text)}
.exp-catalog-modal .exp-modal-heading-icon i{color:inherit;font-size:18px}
.exp-modal.exp-catalog-modal .exp-modal-body{display:flex;flex-direction:column;gap:16px;padding-bottom:18px}
.exp-modal.exp-catalog-modal .exp-modal-body :where(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea){background-color:var(--exp-color-surface)!important;border-color:var(--exp-color-border)!important;color:var(--exp-color-ink)!important}
.exp-modal.exp-catalog-modal .exp-modal-body :where(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea):focus{border-color:var(--exp-color-brand-blue)!important;box-shadow:0 0 0 3px var(--exp-color-info-subtle)}
.exp-modal.exp-catalog-modal .text-gray-500{color:var(--exp-color-text-muted)!important}
.exp-modal.exp-catalog-modal .text-gray-700{color:var(--exp-color-text-secondary)!important}
.exp-modal.exp-catalog-modal .select2-selection{min-height:40px!important;background-color:var(--exp-color-surface)!important;border-color:var(--exp-color-border)!important}
.exp-modal.exp-catalog-modal .select2-dropdown{background:var(--exp-color-surface);color:var(--exp-color-ink);border-color:var(--exp-color-border)}
.exp-modal.exp-catalog-modal .select2-selection__choice{background:var(--exp-color-surface-muted)!important;color:var(--exp-color-ink)!important;border-color:var(--exp-color-border)!important}
.exp-modal.exp-catalog-modal .select2-selection__choice__remove{color:var(--exp-color-text-secondary)!important}
.exp-modal.exp-catalog-modal .select2-results__option[aria-selected=true]{background:var(--exp-color-selected-bg)!important;color:var(--exp-color-selected-text)!important}
.exp-modal.exp-catalog-modal .select2-results__option--highlighted{background:var(--exp-color-selected-bg-hover)!important;color:var(--exp-color-selected-text)!important}
.exp-modal.exp-catalog-modal .sp-original-input-container{width:100%!important;min-width:0;min-height:40px;border-radius:var(--exp-radius-md)}
.exp-modal.exp-catalog-modal .sp-original-input-container input{min-width:0}
.exp-modal.exp-catalog-modal .sp-container{max-width:100%;z-index:130;background:var(--exp-color-surface);color:var(--exp-color-ink);box-shadow:var(--exp-shadow-soft)}
.exp-modal.exp-catalog-modal :is(.sp-picker-container,.sp-palette-container,.sp-colorize-container){border-color:var(--exp-color-border)!important}
.exp-modal.exp-catalog-modal .sp-input{border-color:var(--exp-color-border)!important}
.exp-modal.exp-catalog-modal .sp-input.sp-validation-error{border-color:var(--exp-color-danger)!important}
.exp-modal.exp-catalog-modal .sp-container button{background:var(--exp-button-bg-secondary);color:var(--exp-button-text-secondary)}
.exp-modal.exp-catalog-modal .sp-container button:hover{background:var(--exp-button-bg-secondary-hover)}
.exp-modal.exp-catalog-modal .sp-container button.sp-choose{background:var(--exp-button-bg-primary);color:var(--exp-button-text-primary)}
.exp-modal.exp-catalog-modal .sp-container button.sp-choose:hover{background:var(--exp-button-bg-primary-hover)}
:is(.exp-modal,.exp-bootstrap-modal).exp-import-modal{--exp-modal-width:680px}
.exp-import-modal .exp-import-template{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 16px;padding:14px;border:1px solid var(--exp-color-border);border-radius:var(--exp-radius-lg);background:var(--exp-color-surface-subtle)}
.exp-import-modal .exp-import-template-copy{display:grid;gap:2px;min-width:0}
.exp-import-modal .exp-import-template-copy strong{color:var(--exp-color-ink);font-size:13px;font-weight:600}
.exp-import-modal .exp-import-template-copy span,.exp-import-modal .exp-import-helper{color:var(--exp-color-text-muted);font-size:12px;line-height:1.45}
.exp-import-modal .exp-import-template-download{flex:none;min-height:36px;font-size:12px;text-decoration:none}
.exp-import-modal .exp-import-file-input{width:100%;min-height:40px;padding:6px 8px!important;border:1px solid var(--exp-color-border);border-radius:var(--exp-radius-md);background:var(--exp-color-surface);color:var(--exp-color-ink)!important;font:13px/1.45 Inter,system-ui,Arial,sans-serif}
.exp-import-modal .exp-import-file-input::file-selector-button{margin-right:10px;padding:5px 8px;border:0;border-radius:var(--exp-radius-sm);background:var(--exp-color-surface-muted);color:var(--exp-color-text-primary);font:600 12px/1.45 Inter,system-ui,Arial,sans-serif;cursor:pointer}
.exp-import-modal .exp-import-file-input:focus{border-color:var(--exp-color-brand-blue);box-shadow:0 0 0 3px var(--exp-color-primary-50);outline:0}
.exp-import-modal .exp-import-helper{display:block;margin-top:6px}

/* Seletor de arquivos opt-in. O input nativo continua sendo a fonte do FormData. */
exp-file-upload { display: block; position: relative; min-width: 0; color: var(--exp-color-ink); }
exp-file-upload .exp-file-upload-ui { display: none; }
exp-file-upload[data-upload-ready] .exp-file-upload-ui { display: block; }
exp-file-upload[data-upload-ready] > input[type="file"],
exp-file-upload .exp-file-upload-status {
    position: absolute !important; width: 1px !important; height: 1px !important;
    min-width: 0 !important; min-height: 0 !important; padding: 0 !important;
    border: 0 !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
exp-file-upload .exp-file-upload-zone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; width: 100%; min-width: 0; min-height: 180px;
    padding: 24px; border: 2px dashed var(--exp-color-border-strong);
    border-radius: var(--exp-radius-lg); background: var(--exp-color-surface-subtle);
    appearance: none; color: var(--exp-color-ink); font: inherit; text-align: center; cursor: pointer;
    transition: background-color var(--exp-transition-base), border-color var(--exp-transition-base);
}
exp-file-upload:not(.is-disabled) .exp-file-upload-zone:hover,
exp-file-upload:focus-within .exp-file-upload-zone { border-color: var(--exp-color-brand-blue); }
exp-file-upload.is-dragging .exp-file-upload-zone { border-color: var(--exp-color-brand-blue); background: var(--exp-color-info-subtle); }
exp-file-upload.has-error .exp-file-upload-zone { border-color: var(--exp-color-danger); }
exp-file-upload .exp-file-upload-icon {
    display: grid; place-items: center; flex: none; width: 48px; height: 48px; color: var(--exp-color-info-text);
}
exp-file-upload .exp-file-upload-icon i { color: inherit; font-size: 32px; }
exp-file-upload .exp-file-upload-copy { display: grid; gap: 6px; min-width: 0; }
exp-file-upload .exp-file-upload-copy strong,
exp-file-upload .exp-file-upload-file strong { color: var(--exp-color-ink); font-size: 13px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
exp-file-upload .exp-file-upload-copy span,
exp-file-upload .exp-file-upload-file span { color: var(--exp-color-text-muted); font-size: 12px; line-height: 1.5; }
exp-file-upload .exp-file-upload-copy strong { font-size: 14px; }
exp-file-upload .exp-file-upload-copy .exp-file-upload-browse { color: var(--exp-color-info-text); font-weight: 600; }
exp-file-upload:not(.is-disabled) .exp-file-upload-zone:is(:hover, :focus-visible) .exp-file-upload-browse { text-decoration: underline; text-underline-offset: 3px; }
exp-file-upload .exp-file-upload-list { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
exp-file-upload .exp-file-upload-list li {
    display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px;
    border: 1px solid var(--exp-color-border); border-radius: var(--exp-radius-md); background: var(--exp-color-surface);
}
exp-file-upload .exp-file-upload-list li > i { flex: none; color: var(--exp-color-info-text); font-size: 20px; }
exp-file-upload .exp-file-upload-file { display: grid; gap: 2px; flex: 1; min-width: 0; }
exp-file-upload .exp-file-upload-list .exp-icon-btn { flex: none; }
exp-file-upload .exp-file-upload-error { margin: 8px 0 0; color: var(--exp-color-danger-text); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
exp-file-upload .exp-file-upload-ui [hidden] { display: none !important; }
exp-file-upload.is-disabled .exp-file-upload-zone { border-color: var(--exp-color-border); cursor: not-allowed; }
exp-file-upload.is-disabled :is(.exp-file-upload-icon, .exp-file-upload-browse) { color: var(--exp-color-text-muted); }
exp-file-upload :is(.exp-file-upload-zone, .exp-icon-btn):focus-visible { outline: 2px solid var(--exp-color-brand-blue); outline-offset: 2px; }
@media (max-width: 600px) {
    exp-file-upload .exp-file-upload-zone { min-height: 160px; gap: 12px; padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { exp-file-upload .exp-file-upload-zone { transition: none; } }

.exp-import-modal .exp-import-progress{height:8px;overflow:hidden;border-radius:var(--exp-radius-pill,9999px);background:var(--exp-color-surface-muted)}
.exp-import-modal .exp-import-progress .progress-bar{background:var(--exp-color-brand-blue);color:transparent}
.exp-import-modal .exp-import-status{margin:0;padding:10px 12px;border:1px solid var(--exp-color-info-subtle);border-radius:var(--exp-radius-md);background:var(--exp-color-info-subtle);color:var(--exp-color-info-text);font-size:12px;line-height:1.45}
.exp-import-modal .exp-import-status.alert-success{border-color:var(--exp-color-success-subtle);background:var(--exp-color-success-subtle);color:var(--exp-color-success-text)}
.exp-import-modal .exp-import-status.alert-warning{border-color:var(--exp-color-warning-subtle);background:var(--exp-color-warning-subtle);color:var(--exp-color-warning-text)}
.exp-import-modal .exp-import-status.alert-danger{border-color:var(--exp-color-danger-subtle);background:var(--exp-color-danger-subtle);color:var(--exp-color-danger-text)}
.exp-import-modal .exp-import-results{overflow:auto;margin:0 0 10px;border:1px solid var(--exp-color-border);border-radius:var(--exp-radius-md);background:var(--exp-color-surface)}
.exp-import-modal .exp-import-results .table{margin:0;color:var(--exp-color-ink)}
.exp-import-modal .exp-import-results :is(th,td){border-color:var(--exp-color-border);background:var(--exp-color-surface);color:inherit}
.exp-import-modal .exp-import-results th{background:var(--exp-color-surface-subtle);color:var(--exp-color-text-muted);font-size:11px;font-weight:600}
@media(max-width:520px){.exp-import-modal .exp-import-template{align-items:flex-start;flex-direction:column}.exp-import-modal .exp-import-template-download{width:100%;justify-content:center}.exp-import-modal .modal-form-footer .exp-btn{width:100%;justify-content:center}}
:is(.exp-modal,.exp-bootstrap-modal) label{font-size:12px;font-weight:600;color:var(--exp-color-ink)!important;margin-bottom:6px!important}
:is(.exp-modal,.exp-bootstrap-modal) label i{color:var(--exp-color-text-muted)}
:is(.exp-modal,.exp-bootstrap-modal) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),select,textarea){width:100%;min-width:0;min-height:40px;padding:8px 11px;border:1px solid var(--exp-color-border);border-radius:var(--exp-radius-md);background:var(--exp-color-surface);color:var(--exp-color-ink)!important;box-shadow:none;font:13px/1.45 Inter,system-ui,Arial,sans-serif}
:is(.exp-modal,.exp-bootstrap-modal) input::placeholder,:is(.exp-modal,.exp-bootstrap-modal) textarea::placeholder{color:var(--exp-color-text-muted)}
:is(.exp-modal,.exp-bootstrap-modal) select{appearance:auto;background-image:none;padding-right:8px!important}
:is(.exp-modal,.exp-bootstrap-modal) textarea{min-height:80px;resize:vertical}
:is(.exp-modal,.exp-bootstrap-modal) :is(input,textarea).shadow-sm{box-shadow:none!important}
:is(.exp-modal,.exp-bootstrap-modal) :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]){padding:8px 11px!important}
:is(.exp-modal,.exp-bootstrap-modal) .relative:has(>.right-0)>input{padding-right:36px!important}
:is(.exp-modal,.exp-bootstrap-modal) .relative:has(>.left-0)>input{padding-left:36px!important}
:is(.exp-modal,.exp-bootstrap-modal) .select2-container{width:100%!important;max-width:100%;min-width:0}
:is(.exp-modal,.exp-bootstrap-modal) .select2-selection{min-height:40px!important;padding:0!important;border:1px solid var(--exp-color-border)!important;border-radius:var(--exp-radius-md);background-color:var(--exp-color-surface)!important}
:is(.exp-modal,.exp-bootstrap-modal) .select2-container--disabled .select2-selection{background-color:var(--exp-color-surface-muted)!important}
:is(.exp-modal,.exp-bootstrap-modal) .select2-container--disabled .select2-selection__rendered{color:var(--exp-color-text-muted)!important}
:is(.exp-modal,.exp-bootstrap-modal) .select2-selection__rendered{color:var(--exp-color-ink)!important;font-size:13px;line-height:38px!important;padding-left:11px!important}
:is(.exp-modal,.exp-bootstrap-modal) .select2-selection--multiple .select2-selection__rendered{line-height:1.45!important;padding:4px 8px!important}
:is(.exp-modal,.exp-bootstrap-modal) .select2-selection__arrow{height:38px!important}
:is(.exp-modal,.exp-bootstrap-modal) :focus-visible{outline:2px solid var(--exp-color-brand-blue);outline-offset:2px}
@media(max-width:600px){.exp-page{padding:18px var(--exp-page-gutter,12px) 28px}.exp-grid>[class*="flexgrid-instance-"]>div:first-child{padding:14px}.exp-grid .new-btn-container{justify-content:flex-start}}
@media(max-width:520px){.tailwind-modal.exp-modal,.exp-grid-filters{padding:12px}.exp-modal>div:first-child,.exp-grid-filters>div{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.exp-modal>div:first-child{max-width:min(var(--exp-modal-width,900px),calc(100vw - 24px))}:is(.exp-modal,.exp-bootstrap-modal) .exp-modal-header,:is(.exp-modal,.exp-bootstrap-modal) .exp-modal-body,:is(.exp-modal,.exp-bootstrap-modal) .modal-form-footer{padding-inline:18px}.exp-grid-filters>div>div:last-child [data-flexgrid-persistence]{width:100%}.exp-grid-filters>div>div:nth-child(2)>div{grid-template-columns:minmax(0,1fr)}}

/* Shell: superficie do header; layout e hooks permanecem no template. */
.header-top.exp-shell-header {
    background-color: var(--exp-shell-header-bg);
    border-bottom: 1px solid var(--exp-shell-header-border);
    box-shadow: var(--exp-shell-header-shadow);
}

/* Campo da busca global no desktop; IDs e comportamento legado permanecem. */
.exp-search-input {
    background-color: var(--exp-color-surface-subtle);
    border-color: var(--exp-color-border-strong);
    border-radius: var(--exp-radius-sm);
    color: var(--exp-color-text-primary);
}

.exp-search-input:hover {
    background-color: var(--exp-color-surface);
}

.exp-search-input::placeholder {
    color: var(--exp-color-text-muted);
}

.exp-search-input:focus {
    border-color: var(--exp-color-brand-blue);
    outline: 2px solid var(--exp-color-brand-blue);
    outline-offset: 0;
}

/* Resultados da busca global: mesmo acabamento no dropdown e na busca ampliada. */
.exp-global-search {
    max-width: calc(100vw - 24px);
    overflow: hidden;
    border: 1px solid var(--exp-color-border);
    border-radius: var(--exp-radius-lg);
    background: var(--exp-color-surface);
    color: var(--exp-color-text-primary);
    box-shadow: var(--exp-shadow-soft);
    font-size: 13px;
    line-height: 1.45;
}
.exp-global-search.hidden,
.exp-global-search .hidden { display: none !important; }
.exp-global-search__tabs { padding: 10px; border-bottom: 1px solid var(--exp-color-border); background: var(--exp-color-surface-subtle); }
.exp-global-search .exp-filter-segment > .exp-btn[aria-pressed=true] { background: var(--exp-color-selected-bg); color: var(--exp-color-selected-text); border-color: var(--exp-color-selected-border); box-shadow: none; }
.exp-global-search__list { margin: 0; padding: 0; list-style: none; max-height: min(384px, calc(100dvh - 150px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--exp-color-border-strong) var(--exp-color-surface); scrollbar-width: thin; }
.exp-global-search__list > li + li { border-top: 1px solid var(--exp-color-border); }
.exp-global-search__item { padding: 12px; cursor: pointer; overflow-wrap: anywhere; background: var(--exp-color-surface); transition: background-color var(--exp-transition-base); }
.exp-global-search__item:hover { background: var(--exp-color-selected-bg); }
.exp-global-search__item:focus-visible,
.exp-global-search__person-link:focus-visible { outline: 2px solid var(--exp-color-brand-blue); outline-offset: -2px; }
.exp-global-search__title { display: block; margin-bottom: 4px; color: var(--exp-color-selected-text); font-size: 15px; font-weight: 600; line-height: 1.4; }
.exp-global-search__info { display: block; color: var(--exp-color-text-secondary); font-size: 12px; font-weight: 400; }
.exp-global-search__info strong { color: var(--exp-color-text-primary); font-weight: 600; }
.exp-global-search__person-link { display: block; margin: -12px; padding: 12px; color: inherit; text-decoration: none; }
.exp-global-search__person-link:hover { color: inherit; }
.exp-global-search :is(.search-empty-state, .search-error-state, .search-end-state) { padding: 18px 12px; color: var(--exp-color-text-muted); font-size: 12px; text-align: center; }
.exp-global-search .search-end-state { padding: 10px 12px; font-size: 11px; }
.exp-global-search .search-error-state { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.exp-global-search .search-retry { min-height: 36px; font-size: 12px; }
.exp-global-search .search-retry:focus-visible { outline: 2px solid var(--exp-color-brand-blue); outline-offset: 2px; }
.exp-global-search__skeleton-card { padding: 12px; }
.exp-global-search__skeleton-card + .exp-global-search__skeleton-card { border-top: 1px solid var(--exp-color-border); }
.exp-global-search__skeleton-title { --exp-skeleton-width: 86%; --exp-skeleton-height: 16px; margin-bottom: 12px; }
.exp-global-search__skeleton-row { display: flex; gap: 8px; margin-top: 8px; }
.exp-global-search__skeleton-row > .exp-skeleton:first-child { --exp-skeleton-width: 28%; --exp-skeleton-height: 10px; }
.exp-global-search__skeleton-row > .exp-skeleton:last-child { --exp-skeleton-width: 58%; --exp-skeleton-height: 10px; }
.exp-global-search__skeleton-line { --exp-skeleton-width: 68%; --exp-skeleton-height: 10px; margin-top: 8px; }
.exp-global-search__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* intl-tel-input: adaptação opt-in, incluindo o popup destacado no body. */
.exp-intl-phone,
.exp-intl-phone-popup {
    --iti-border-color: var(--exp-color-border);
    --iti-country-selector-bg: var(--exp-color-surface);
    --iti-icon-color: var(--exp-color-text-muted);
    --iti-hover-color: var(--exp-color-surface-subtle);
    color: var(--exp-color-text-primary);
    font-size: var(--exp-filter-font-size);
}
.exp-intl-phone.iti { width: 100%; min-width: 0; }
.exp-intl-phone .iti__selected-country { border-radius: var(--exp-radius-md) 0 0 var(--exp-radius-md); }
.exp-intl-phone .iti__selected-country:focus-visible {
    outline: 2px solid var(--exp-color-brand-blue); outline-offset: -2px;
}
.exp-intl-phone-selector.iti__country-selector {
    border-radius: var(--exp-radius-md); box-shadow: var(--exp-shadow-soft);
}
.exp-intl-phone-selector .iti__search-input {
    height: var(--exp-filter-control-height); background: var(--exp-color-surface);
    color: var(--exp-color-text-primary); font: inherit;
}
.exp-intl-phone-selector .iti__search-input::placeholder { color: var(--exp-color-text-muted); }
.exp-intl-phone-selector .iti__country-list { margin: 0; padding: 0; }
.exp-intl-phone-selector .iti__country { color: var(--exp-color-text-primary); }
.exp-intl-phone-selector .iti__dial-code { color: var(--exp-color-text-muted); }
.exp-intl-phone-selector .iti__country[aria-selected="true"] {
    background: var(--exp-color-info-subtle); color: var(--exp-color-info-text);
}

/* Filtros opt-in. Layout da barra e consultas pertencem a cada tela. */
.exp-filter-field {
    display: flex; flex-direction: column; gap: var(--exp-filter-label-gap);
    min-width: 0; max-width: 100%; margin: 0;
}
.exp-filter-field > .exp-filter-label {
    color: var(--exp-color-text-secondary); font-size: var(--exp-filter-font-size);
    font-weight: 600; line-height: 1.5;
}
.exp-filter-field .exp-filter-input {
    box-sizing: border-box; width: 100%; min-width: 0; height: var(--exp-filter-control-height);
    padding: 8px 10px; border: 1px solid var(--exp-color-border); border-radius: var(--exp-radius-md);
    background: var(--exp-color-surface); color: var(--exp-color-ink);
    font: inherit; font-size: var(--exp-filter-font-size); line-height: 1.5;
}
/* Native fallback before Select2 mounts; wrappers with a decorative arrow own it. */
.exp-filter-field select.exp-filter-input { color: var(--exp-color-ink) !important; appearance: auto; cursor: pointer; }
.exp-filter-control:has(> .exp-filter-icon:not(.exp-filter-icon--leading)) > select.exp-filter-input { appearance: none; }
.exp-filter-field .exp-filter-input::placeholder { color: var(--exp-color-text-muted); opacity: 1; }
.exp-filter-field .exp-filter-input:disabled { color: var(--exp-color-text-disabled) !important; cursor: default; background: var(--exp-color-surface-muted); }
.exp-filter-control { position: relative; display: block; min-width: 0; }
.exp-filter-control > select.exp-filter-input { padding-right: 34px; }
.exp-filter-control > .exp-filter-icon {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: var(--exp-color-text-muted); font-size: 10px; pointer-events: none;
}
.exp-filter-control > .exp-filter-icon--leading { left: 12px; right: auto; z-index: 1; font-size: 13px; }
.exp-filter-control--search .exp-filter-input { padding-left: 34px; }
.exp-filter-control:has(.select2-hidden-accessible) > .exp-filter-icon:not(.exp-filter-icon--leading) { display: none; }
.exp-filter-field .exp-filter-input:focus-visible,
.exp-filter-field .select2-selection:focus-visible { outline: 2px solid var(--exp-color-brand-blue); outline-offset: 2px; }
.exp-filter-actions { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px; }
.exp-filter-actions > .exp-btn { min-height: var(--exp-filter-control-height); font-size: var(--exp-filter-font-size); white-space: nowrap; }
.exp-filter-actions > .exp-btn[aria-disabled="true"] { opacity: .7; cursor: default; pointer-events: none; }
.exp-filter-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.exp-filter-chips[hidden] { display: none; }
.exp-btn.exp-filter-chip {
    min-height: 36px; max-width: 100%; padding: 6px 10px; font-size: var(--exp-filter-font-size);
    border-color: var(--exp-color-border); background: var(--exp-color-info-subtle);
    color: var(--exp-color-info-text); text-align: left; text-decoration: none;
}
.exp-filter-chip > span { min-width: 0; overflow-wrap: anywhere; }
.exp-filter-chip > i { flex-shrink: 0; color: inherit; }
.exp-filter-chip:focus-visible { outline: 2px solid var(--exp-color-brand-blue); outline-offset: 2px; }
.exp-filter-segment { display: flex; flex-wrap: wrap; align-items: stretch; gap: 2px; min-height: var(--exp-filter-control-height); padding: 3px; border: 1px solid var(--exp-color-border); border-radius: var(--exp-radius-md); background: var(--exp-color-surface-subtle); }
.exp-filter-segment > .exp-btn { flex: 1; padding: 4px 10px; font-size: var(--exp-filter-font-size); border-color: transparent; background: transparent; color: var(--exp-color-text-secondary); white-space: nowrap; }
.exp-filter-segment > .exp-btn[aria-pressed="true"] { background: var(--exp-color-surface); color: var(--exp-color-ink); box-shadow: var(--exp-shadow-soft); }
.exp-filter-segment > .exp-btn:focus-visible { outline: 2px solid var(--exp-color-brand-blue); outline-offset: 1px; }
.exp-filter-control .select2-container { min-width: 0; max-width: 100%; }
.exp-filter-control .select2-container .select2-selection--single {
    height: var(--exp-filter-control-height) !important; min-height: var(--exp-filter-control-height) !important;
    padding: 0 !important; border: 1px solid var(--exp-color-border) !important;
    border-radius: var(--exp-radius-md); background: var(--exp-color-surface) !important;
}
.exp-filter-control .select2-selection--single .select2-selection__rendered {
    width: 100%; padding: 0 28px 0 10px; line-height: calc(var(--exp-filter-control-height) - 2px);
    color: var(--exp-color-ink); font-size: var(--exp-filter-font-size);
}
.exp-filter-control--search .select2-selection--single .select2-selection__rendered { padding-left: 34px; }
.exp-filter-control .select2-selection--single:has(.select2-selection__clear) .select2-selection__rendered { padding-right: 52px; }
.exp-filter-control .select2-selection__placeholder { color: var(--exp-color-text-muted) !important; }
.exp-filter-control .select2-container .select2-selection--single .select2-selection__arrow {
    position: absolute; top: 0; right: 10px; height: var(--exp-filter-control-height); width: 12px; display: flex; align-items: center; pointer-events: none;
}
.exp-filter-control .select2-container .select2-selection--single .select2-selection__arrow b {
    position: static; width: 6px; height: 6px; margin: -3px 0 0; border: solid var(--exp-color-text-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.exp-filter-control .select2-container .select2-selection--single .select2-selection__clear {
    position: absolute; top: 0; right: 24px; width: 28px; height: calc(var(--exp-filter-control-height) - 2px);
    margin: 0; padding: 0; transform: none; mask: none; -webkit-mask: none;
    background: transparent !important; color: var(--exp-color-text-muted); font-size: 18px;
}
.exp-filter-control .select2-container .select2-selection--single .select2-selection__clear span { display: inline; }
.select2-container--bootstrap5 .select2-selection:focus-visible { outline: 2px solid var(--exp-color-focus-ring,var(--exp-color-primary-700)) !important; outline-offset: 2px; }
.exp-filter-field .select2-container--disabled .select2-selection { background-color: var(--exp-color-surface-muted) !important; }
.exp-filter-field .select2-container--disabled .select2-selection__rendered { color: var(--exp-color-text-muted) !important; }
/* Direct legacy Select2 initializers may still copy form-control without form-select. */
.select2-container--bootstrap5 .select2-selection--single.form-control:not(.form-select):not(.exp-filter-input) { position: relative; padding-right: 34px !important; }
.select2-container--bootstrap5 .select2-selection--single.form-control:not(.form-select) .select2-selection__arrow { position: absolute; top: 0; right: 10px; width: 12px; height: 100%; display: flex; align-items: center; pointer-events: none; }
.select2-container--bootstrap5 .select2-selection--single.form-control:not(.form-select) .select2-selection__arrow b { position: static; width: 6px; height: 6px; margin: -3px 0 0; border: solid var(--exp-color-text-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.select2-container--bootstrap5.select2-container--disabled .select2-selection--single.form-control:not(.form-select) { background-color: var(--exp-color-surface-muted) !important; }
.select2-container--bootstrap5.select2-container--disabled .select2-selection--single.form-control:not(.form-select) .select2-selection__rendered { color: var(--exp-color-text-muted) !important; }

/* Seção recolhível para filtros e configurações secundárias. Usa <details> nativo. */
.exp-filter-section {
    overflow: hidden; border: 1px solid var(--exp-color-border); border-radius: var(--exp-radius-lg);
    background: var(--exp-color-surface); color: var(--exp-color-text-primary);
}
.exp-filter-section-summary {
    display: flex; align-items: center; gap: 12px; padding: 16px; cursor: pointer; list-style: none;
    transition: background-color var(--exp-transition-base);
}
.exp-filter-section-summary:hover { background: var(--exp-color-primary-50); }
.exp-filter-section-summary:focus-visible { outline: 2px solid var(--exp-color-brand-blue); outline-offset: -2px; }
.exp-filter-section-summary::-webkit-details-marker { display: none; }
.exp-filter-section-icon {
    display: grid; flex: none; width: 36px; height: 36px; place-items: center; border: 1px solid var(--exp-color-border);
    border-radius: var(--exp-radius-md); background: var(--exp-color-surface); color: var(--exp-color-brand-blue);
}
.exp-filter-section-content { flex: 1; min-width: 0; }
.exp-filter-section-title { display: block; color: var(--exp-color-text-primary); font-size: 13px; font-weight: 600; }
.exp-filter-section-description { display: block; margin-top: 3px; color: var(--exp-color-text-muted); font-size: 12px; font-weight: 400; line-height: 1.45; }
.exp-filter-section-status {
    flex: none; padding: 4px 8px; border-radius: 999px; background: var(--exp-color-surface-subtle);
    color: var(--exp-color-text-secondary); font-size: 11px; font-weight: 600; white-space: nowrap;
}
.exp-filter-section-chevron { flex: none; color: var(--exp-color-text-muted); transition: transform var(--exp-transition-base); }
.exp-filter-section[open] > .exp-filter-section-summary .exp-filter-section-chevron { transform: rotate(180deg); }
.exp-filter-section-body { border-top: 1px solid var(--exp-color-border); background: var(--exp-color-surface); }
@media (max-width: 520px) {
    .exp-filter-section-summary { align-items: flex-start; padding: 14px; }
    .exp-filter-section-status { margin-top: 2px; }
}

/* Mantem o input nativo e seus eventos; o estilo so entra por adesao. */
input.exp-checkbox[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    flex: none;
    box-sizing: border-box;
    width: var(--exp-checkbox-size);
    height: var(--exp-checkbox-size);
    margin: 0;
    padding: 0;
    border: 1px solid var(--exp-checkbox-border);
    border-radius: var(--exp-checkbox-radius);
    background: var(--exp-checkbox-bg);
    box-shadow: none;
    vertical-align: middle;
    cursor: pointer;
}
input.exp-checkbox[type="checkbox"]::before {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--exp-checkbox-mark);
    clip-path: polygon(14% 40%, 0 54%, 38% 92%, 100% 22%, 85% 8%, 37% 63%);
    opacity: 0;
}
input.exp-checkbox[type="checkbox"]:is(:checked, :indeterminate) {
    border-color: var(--exp-checkbox-selected-bg);
    background: var(--exp-checkbox-selected-bg);
}
input.exp-checkbox[type="checkbox"]:is(:checked, :indeterminate)::before { opacity: 1; }
input.exp-checkbox[type="checkbox"]:indeterminate::before {
    height: 2px;
    clip-path: none;
}
input.exp-checkbox[type="checkbox"]:hover:not(:disabled) { border-color: var(--exp-checkbox-selected-bg); }
input.exp-checkbox[type="checkbox"]:focus-visible {
    outline: 2px solid var(--exp-checkbox-selected-bg);
    outline-offset: 3px;
}
input.exp-checkbox[type="checkbox"]:disabled {
    border-color: var(--exp-color-border-strong);
    background: var(--exp-color-surface-muted);
    cursor: not-allowed;
}
input.exp-checkbox[type="checkbox"]:disabled::before { background: var(--exp-color-text-disabled); }

.exp-checkbox-field { display: flex; align-items: flex-start; gap: 8px; min-height: 24px; }
.exp-checkbox-field > input.exp-checkbox[type="checkbox"] { margin-top: 3px; }
.exp-checkbox-field > label {
    min-width: 0;
    min-height: 24px;
    margin: 0 !important; /* Neutraliza a margem de labels dos modais legados. */
    font-weight: 500;
    line-height: 24px;
    color: var(--exp-color-text-primary);
    cursor: pointer;
}
.exp-checkbox-field > input.exp-checkbox:disabled + label {
    color: var(--exp-color-text-disabled) !important;
    cursor: not-allowed;
}

/* Seletor de colunas do FlexGrid: mantem a logica do grid e adota tokens compartilhados. */
.exp-flexgrid-column-picker-trigger {
    min-height: 40px;
    gap: 8px;
    padding-inline: 10px;
    white-space: nowrap;
}
.exp-flexgrid-column-picker-trigger > i { color: var(--exp-color-text-muted); }
.exp-flexgrid-column-picker-chevron { margin-left: 1px; font-size: 10px; }
.exp-flexgrid-column-picker-menu {
    display: none;
    position: fixed;
    z-index: var(--exp-dropdown-z-index);
    min-width: 232px;
    max-width: min(320px, calc(100vw - 16px));
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--exp-dropdown-border);
    border-radius: var(--exp-dropdown-radius);
    background: var(--exp-dropdown-bg);
    box-shadow: var(--exp-dropdown-shadow);
}
.exp-flexgrid-column-picker-item {
    align-items: center;
    min-height: 36px;
    padding: 6px 8px;
    border-radius: var(--exp-radius-sm);
}
.exp-flexgrid-column-picker-item:not(.exp-flexgrid-column-picker-item--locked):hover {
    background: var(--exp-dropdown-hover-bg);
}
.exp-flexgrid-column-picker-item > input.exp-checkbox[type="checkbox"] { margin-top: 0; }
.exp-flexgrid-column-picker-item > label { flex: 1; min-height: 20px; font-size: 13px; line-height: 20px; }
.exp-flexgrid-column-picker-item--locked { background: var(--exp-color-surface-subtle); }

/* Gerenciador de relacionamentos do FlexGrid: responsaveis, equipes, clientes e marcadores. */
.exp-relation-manager {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    color: var(--exp-color-ink);
    font: 13px/1.45 Inter, system-ui, Arial, sans-serif;
}
.exp-relation-manager.hidden { display: none !important; }
.exp-relation-manager.flex { display: flex !important; }
.exp-relation-manager-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--exp-color-brand-navy) 48%, transparent); backdrop-filter: blur(2px); }
.exp-relation-manager-dialog { position: relative; display: flex; flex-direction: column; width: min(var(--exp-relation-manager-width, 640px), 100%); max-height: calc(100dvh - 40px); min-height: 0; overflow: hidden; border: 1px solid var(--exp-color-border); border-radius: var(--exp-radius-xl); background: var(--exp-color-surface); box-shadow: var(--exp-shadow-soft); outline: 0; }
.exp-relation-manager-header { display: flex; flex: none; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px 14px; border-bottom: 1px solid var(--exp-color-border); background: var(--exp-color-surface); }
.exp-relation-manager-heading { display: flex; min-width: 0; align-items: flex-start; gap: 12px; }
.exp-relation-manager-icon { display: grid; flex: 0 0 auto; width: 40px; height: 40px; place-items: center; border-radius: var(--exp-radius-md); background: var(--exp-color-info-subtle); color: var(--exp-color-info-text); }
.exp-relation-manager-icon > i { font-size: 18px; color: inherit; }
.exp-relation-manager-heading-copy { min-width: 0; }
.exp-relation-manager-heading-copy h2 { margin: 0; color: var(--exp-color-ink); font-size: 16px; font-weight: 600; line-height: 1.4; }
.exp-relation-manager-heading-copy p { margin: 4px 0 0; color: var(--exp-color-text-muted); font-size: 12px; line-height: 1.45; }
.exp-relation-manager-body { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 18px 22px 14px; overflow: hidden; background: var(--exp-color-surface-subtle); }
.exp-relation-manager-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--exp-color-border); border-radius: var(--exp-radius-md); background: var(--exp-color-surface-muted); }
.exp-relation-manager-tab { min-height: 40px; padding: 8px 12px; border: 0; border-radius: var(--exp-radius-sm); background: transparent; color: var(--exp-color-text-muted); font: 600 13px/1.25 Inter, system-ui, Arial, sans-serif; cursor: pointer; transition: background-color var(--exp-transition-base), color var(--exp-transition-base), box-shadow var(--exp-transition-base); }
.exp-relation-manager-tab:hover { color: var(--exp-color-text-primary); }
.exp-relation-manager-tab--active { background: var(--exp-color-surface); color: var(--exp-color-info-text); box-shadow: var(--exp-shadow-soft); }
.exp-relation-manager-tab--active[data-relation-tab="remove"] { color: var(--exp-color-danger-text); }
.exp-relation-manager-tab > span { margin-left: 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.exp-relation-manager-tab:focus-visible { outline: 2px solid var(--exp-color-focus-ring); outline-offset: 2px; }
.exp-relation-manager-search { position: relative; display: flex; align-items: center; flex: none; min-height: 40px; margin-top: 14px; border: 1px solid var(--exp-color-border); border-radius: var(--exp-radius-md); background: var(--exp-color-surface); color: var(--exp-color-text-muted); transition: border-color var(--exp-transition-base), box-shadow var(--exp-transition-base); }
.exp-relation-manager-search:focus-within { border-color: var(--exp-color-brand-blue); box-shadow: none; }
.exp-relation-manager-search > i { flex: 0 0 auto; width: 40px; text-align: center; color: inherit; }
.exp-relation-manager-search input { min-width: 0; flex: 1; height: 38px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--exp-color-ink); font: 13px/1.45 Inter, system-ui, Arial, sans-serif; }
.exp-relation-manager-search input:focus,
.exp-relation-manager-search input:focus-visible { outline: none !important; box-shadow: none !important; }
.exp-relation-manager-search input::placeholder { color: var(--exp-color-text-muted); }
.exp-relation-manager-search .exp-icon-btn { width: 36px; height: 36px; margin-right: 2px; color: var(--exp-color-text-muted); }
.exp-relation-manager-list-heading { display: flex; flex: none; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 14px; }
.exp-relation-manager-list-heading h3 { margin: 0; color: var(--exp-color-ink); font-size: 13px; font-weight: 600; }
.exp-relation-manager-list-heading p { margin: 2px 0 0; color: var(--exp-color-text-muted); font-size: 12px; line-height: 1.4; }
.exp-relation-manager-list-heading button { min-height: 32px; padding: 6px 8px; border: 0; border-radius: var(--exp-radius-sm); background: transparent; color: var(--exp-color-info-text); font: 600 12px/1.35 Inter, system-ui, Arial, sans-serif; cursor: pointer; white-space: nowrap; }
.exp-relation-manager-list-heading button:hover:not(:disabled) { background: var(--exp-color-info-subtle); }
.exp-relation-manager-list-heading button:disabled { color: var(--exp-color-text-disabled); cursor: not-allowed; }
.exp-relation-manager-loading, .exp-relation-manager-empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; min-height: 250px; margin-top: 12px; border: 1px solid var(--exp-color-border); border-radius: var(--exp-radius-lg); background: var(--exp-color-surface); text-align: center; }
.exp-relation-manager-loading.hidden, .exp-relation-manager-error.hidden, .exp-relation-manager-search .exp-icon-btn.hidden { display: none !important; }
.exp-relation-manager-loading.flex { display: flex !important; }
.exp-relation-manager-loading > div { display: grid; justify-items: center; gap: 8px; color: var(--exp-color-text-muted); }
.exp-relation-manager-loading i { color: var(--exp-color-info-text); font-size: 20px; }
.exp-relation-manager-loading p { margin: 0; font-size: 12px; }
.exp-relation-manager-list { display: grid; flex: 1; min-height: 250px; gap: 8px; margin-top: 12px; padding-right: 2px; overflow-y: auto; overscroll-behavior: contain; }
.exp-relation-manager-error { flex: none; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--exp-color-danger-subtle); border-radius: var(--exp-radius-md); background: var(--exp-color-danger-subtle); color: var(--exp-color-danger-text); font-size: 12px; line-height: 1.45; }
.exp-relation-manager-empty { padding: 20px; border-style: dashed; color: var(--exp-color-text-muted); }
.exp-relation-manager-empty > i { color: var(--exp-color-text-disabled); font-size: 24px; }
.exp-relation-manager-empty p { margin: 10px 0 2px; color: var(--exp-color-ink); font-size: 13px; font-weight: 600; }
.exp-relation-manager-empty span { font-size: 12px; }
.exp-relation-manager-item { display: flex; align-items: center; width: 100%; min-height: 64px; margin: 0; gap: 12px; padding: 11px 12px; border: 1px solid var(--exp-color-border); border-radius: var(--exp-radius-lg); background: var(--exp-color-surface); color: var(--exp-color-ink); text-align: left; font: inherit; cursor: pointer; transition: border-color var(--exp-transition-base), background-color var(--exp-transition-base), box-shadow var(--exp-transition-base); }
.exp-relation-manager-item:hover { border-color: var(--exp-color-border-strong); background: var(--exp-color-surface-muted); }
.exp-relation-manager-item--selected, .exp-relation-manager-item--selected:hover { border-color: var(--exp-color-selected-border); background: var(--exp-color-selected-bg); }
.exp-relation-manager-item--selected.exp-relation-manager-item--remove, .exp-relation-manager-item--selected.exp-relation-manager-item--remove:hover { border-color: var(--exp-color-danger); background: var(--exp-color-danger-subtle); }
.exp-relation-manager-item-copy { min-width: 0; flex: 1; }
.exp-relation-manager-item-copy p, .exp-relation-manager-item-copy span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.exp-relation-manager-item-copy p { margin: 0; color: var(--exp-color-ink); font-size: 13px; font-weight: 600; }
.exp-relation-manager-item-copy span { margin-top: 2px; color: var(--exp-color-text-muted); font-size: 12px; }
.exp-relation-manager-item-icon { display: grid; flex: 0 0 auto; width: 40px; height: 40px; place-items: center; border: 1px solid; border-radius: var(--exp-radius-md); background: var(--exp-color-surface); }
.exp-relation-manager-item-icon > i { font-size: 16px; color: inherit; }
.exp-relation-manager-item > input.exp-checkbox[type="checkbox"] { flex: 0 0 auto; margin: 0 0 0 auto; }
.exp-relation-manager-footer { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 22px; border-top: 1px solid var(--exp-color-border); background: var(--exp-color-surface); }
.exp-relation-manager-footer > p { margin: 0; color: var(--exp-color-text-muted); font-size: 12px; line-height: 1.4; }
.exp-relation-manager-footer-actions { display: flex; flex: none; gap: 8px; }
.exp-relation-manager-footer .exp-btn { min-height: 40px; font-size: 13px; font-weight: 600; }
.exp-relation-manager-footer .exp-btn-primary > i { color: inherit; }
@media (max-width: 520px) {
    .exp-relation-manager { padding: 12px; }
    .exp-relation-manager-dialog { max-height: calc(100dvh - 24px); }
    .exp-relation-manager-header { gap: 12px; padding: 16px 18px 12px; }
    .exp-relation-manager-body { padding: 16px 18px 12px; }
    .exp-relation-manager-footer { flex-direction: column; align-items: stretch; padding: 12px 18px; }
    .exp-relation-manager-footer > p { text-align: center; }
    .exp-relation-manager-footer-actions { width: 100%; }
    .exp-relation-manager-footer-actions .exp-btn { flex: 1; justify-content: center; }
}
@media (forced-colors: active) {
    input.exp-checkbox[type="checkbox"] {
        appearance: auto;
        -webkit-appearance: auto;
    }
    input.exp-checkbox[type="checkbox"]::before { display: none; }
    input.exp-checkbox[type="checkbox"]:focus-visible { outline-color: Highlight; }
}

/* Badge semantico; o consumidor escolhe o estado, nao a cor literal. */
.exp-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--exp-status-badge-bg, var(--exp-color-surface-muted));
    color: var(--exp-status-badge-text, var(--exp-color-text-secondary));
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}
.exp-status-badge--success { --exp-status-badge-bg: var(--exp-color-success-subtle); --exp-status-badge-text: var(--exp-color-success-text); }
.exp-status-badge--warning { --exp-status-badge-bg: var(--exp-color-warning-subtle); --exp-status-badge-text: var(--exp-color-warning-text); }
.exp-status-badge--danger { --exp-status-badge-bg: var(--exp-color-danger-subtle); --exp-status-badge-text: var(--exp-color-danger-text); }
.exp-status-badge--info { --exp-status-badge-bg: var(--exp-color-info-subtle); --exp-status-badge-text: var(--exp-color-info-text); }
.exp-status-badge--neutral { --exp-status-badge-bg: var(--exp-color-surface-muted); --exp-status-badge-text: var(--exp-color-text-secondary); }
.exp-status-badge--compact { gap: 5px; padding: 2px 8px; font-size: 11px; }
.exp-status-badge--compact > i { flex: none; color: inherit; font-size: 1em; line-height: inherit; }
.exp-status-badge--wrap { align-items: flex-start; min-width: 0; max-width: 100%; border-radius: var(--exp-radius-md); white-space: normal; }
.exp-status-badge--wrap > span { min-width: 0; overflow-wrap: anywhere; text-align: left; }

/* Empty state: adoção por consumidor; o tema mantém a composição legada. */
.exp-empty-state-panel--ds-actions .exp-empty-state-content { min-width: 0; width: 100%; overflow-wrap: anywhere; }
.exp-empty-state-panel--ds-actions .exp-empty-state-title { color: var(--exp-color-ink); }
.exp-empty-state-panel--ds-actions .exp-empty-state-description { color: var(--exp-color-text-secondary); }
.exp-empty-state-panel--ds-actions .exp-empty-state-badge { color: var(--exp-color-info-text); background: var(--exp-color-info-subtle); border-color: var(--exp-color-border); }
.exp-empty-state-panel--ds-actions .exp-empty-state-tip { color: var(--exp-color-text-secondary); background: var(--exp-color-surface-subtle); border-color: var(--exp-color-border); }
.exp-empty-state-panel--ds .exp-empty-state-media { width: min(100%, 240px); padding: 16px; border-color: var(--exp-color-border); border-radius: var(--exp-radius-lg); background: var(--exp-color-info-subtle); box-shadow: none; }
.exp-empty-state-panel--ds .exp-empty-state-media > i { color: var(--exp-color-info-text); font-size: 40px; }
.exp-empty-state-panel--ds .exp-empty-state-content { gap: 14px; }
.exp-empty-state-panel--ds .exp-empty-state-tip { border-style: solid; }
.exp-empty-state-panel--ds .exp-empty-state-actions .exp-btn { min-height: 40px; }
/* O h2+p generico do grid foi criado para subtitulos do cabecalho, nao para este estado. */
.exp-grid .exp-empty-state-panel--ds .exp-empty-state-title { font-size: 20px; line-height: 1.3; }
.exp-grid .exp-empty-state-panel--ds .exp-empty-state-description { margin: 0; color: var(--exp-color-text-secondary) !important; font-size: 14px; }
.exp-empty-state-extra-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.exp-empty-state-panel--ds-actions .exp-empty-state-actions .exp-btn,
.exp-empty-state-extra-actions .exp-btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-decoration: none; }
.exp-empty-state-panel--ds-actions .exp-empty-state-actions .exp-btn:focus-visible,
.exp-empty-state-extra-actions .exp-btn:focus-visible { outline: 2px solid var(--exp-color-brand-blue); outline-offset: 2px; }
@media (max-width: 575px) {
    .exp-empty-state-panel--ds-actions .exp-empty-state-actions .exp-btn,
    .exp-empty-state-extra-actions .exp-btn { width: 100%; min-width: 0; }
}

.exp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--exp-button-gap);
    padding: var(--exp-button-padding-y) var(--exp-button-padding-x);
    border: 1px solid transparent;
    border-radius: var(--exp-button-radius);
    font: inherit;
    line-height: 1.5;
    cursor: pointer;
    transition: opacity var(--exp-transition-base),
                background-color var(--exp-transition-base),
                border-color var(--exp-transition-base);
}

.exp-btn:disabled,
.exp-btn.exp-btn-loading {
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none;
}

.exp-btn-primary {
    background-color: var(--exp-button-bg-primary);
    color: var(--exp-button-text-primary);
}

.exp-btn-primary:hover {
    opacity: var(--exp-button-hover-opacity);
}

.exp-btn-green {
    background-color: var(--exp-button-bg-green);
    color: var(--exp-button-text-green);
}

.exp-btn-green:hover {
    background-color: var(--exp-button-bg-green-hover);
}

/* Densidade do header, compartilhada por links e botoes nativos. */
.exp-btn.exp-btn-header {
    font-size: var(--exp-shell-header-action-font-size);
    font-weight: var(--exp-shell-header-action-font-weight);
    text-decoration: none;
    white-space: nowrap;
    --exp-button-padding-x: var(--exp-button-padding-y);
}

.exp-btn.exp-btn-header.exp-btn-primary {
    color: var(--exp-button-text-primary);
}

.exp-btn.exp-btn-header.exp-btn-green {
    color: var(--exp-button-text-green);
}

/* Acao secundaria do header: separa-se da superficie sem competir com Novo. */
.exp-btn.exp-btn-header.exp-btn-secondary {
    background-color: var(--exp-color-surface-subtle);
    border-color: var(--exp-color-border);
}

.exp-btn.exp-btn-header.exp-btn-secondary:hover {
    background-color: var(--exp-color-surface-muted);
}

.exp-btn-header > i {
    color: inherit;
}

.exp-btn-header:focus-visible {
    outline: 2px solid var(--exp-color-brand-blue);
    outline-offset: 2px;
}

/* Acionador do perfil: reaproveita o gap da base e preserva o menu legado. */
.exp-btn.exp-profile-trigger {
    --exp-button-padding-x: var(--exp-shell-profile-padding-x);
    --exp-button-padding-y: var(--exp-shell-profile-padding-y);
    min-width: 0;
    background: transparent;
    color: var(--exp-shell-profile-text);
    font-size: var(--exp-shell-header-action-font-size);
    font-weight: var(--exp-shell-header-action-font-weight);
}

.exp-btn.exp-profile-trigger:hover {
    background: var(--exp-shell-profile-hover-bg);
}

.exp-profile-trigger:focus-visible {
    outline: 2px solid var(--exp-color-brand-blue);
    outline-offset: 2px;
}

.exp-profile-name {
    min-width: 0;
    max-width: var(--exp-shell-profile-name-max-width);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.exp-profile-trigger > i {
    flex-shrink: 0;
    font-size: 0.75em;
    color: inherit;
}

/* Em telas estreitas, o menu lateral ocupa a margem esquerda do header.
 * Os atalhos continuam acessíveis por ícone e o aviso de assinatura pode
 * ocupar uma linha adicional, sem ampliar o documento horizontalmente. */
@media (max-width: 639px) {
    .header-top-content {
        gap: 0.25rem;
        padding-right: 0.5rem !important;
    }

    .header-top-content .header-search {
        flex: 0 0 auto;
        margin-right: 0;
        margin-left: 0;
    }

    .header-top-content .header-top-actions {
        flex: 1 1 0;
        min-width: 0;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.25rem !important;
        margin-left: 0 !important;
    }

    .header-top-actions #timeTarefasTop {
        margin: 0 !important;
    }

    #headerCreateButton > span {
        display: none;
    }

    .header-top-actions .header-subscription {
        min-width: 0;
        max-width: 100%;
    }

    .header-top-actions #subscriptionBanner {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .header-top-actions #subscriptionBanner .msg {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .header-top-actions #subscriptionBanner #btnAssinar {
        flex-shrink: 0;
        margin-left: 0.25rem;
    }

    .header-top-actions #notification-dropdown {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
    }
}

/* Entre celular e desktop, a busca e os atalhos podem ocupar linhas próprias.
 * Isso também cobre notebooks com a sidebar aberta, sem ocultar ações. */
@media (min-width: 640px) and (max-width: 1023px) {
    .header-top-content {
        flex-wrap: wrap;
        gap: 12px;
    }

    .header-top-content .header-search {
        flex: 1 1 180px;
        max-width: none;
        margin: 0 !important;
    }

    .header-top-content .header-search-field {
        width: 100%;
        min-width: 0;
    }

    .header-top-content .header-top-actions {
        flex: 0 1 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
        min-width: 0;
        max-width: 100%;
        gap: 8px !important;
        margin-left: 0 !important;
    }
}

/* Indicador do timesheet; o estado e controlado pelo fluxo existente. */
.exp-btn-header .exp-header-focus-icon {
    display: inline-flex;
    color: inherit;
}

.exp-btn-header .exp-header-focus-icon.is-active {
    color: var(--exp-color-success);
}

.exp-header-focus-icon > i {
    color: inherit;
}

.exp-btn-header .exp-header-focus-chevron {
    font-size: 0.75em;
    color: var(--exp-color-text-muted);
}

/* Painel do timesheet no header: opt-in, sem alterar a pagina de timesheets. */
.exp-timesheet-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 150;
    display: flex;
    flex-direction: column;
    width: min(390px, calc(100vw - 24px));
    max-height: calc(100dvh - 100px);
    overflow: hidden;
    border: 1px solid var(--exp-color-border);
    border-radius: var(--exp-radius-xl);
    background: var(--exp-color-surface-subtle);
    color: var(--exp-color-ink);
    box-shadow: var(--exp-shadow-soft);
    font-size: 13px;
    line-height: 1.5;
}

.exp-timesheet-popover.hidden,
.exp-timesheet-popover .hidden { display: none !important; }
.exp-timesheet-popover :is(h2, h3, p) { margin: 0; }
.exp-timesheet-popover i { color: inherit; }
.exp-timesheet-popover__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: none;
    padding: 16px 18px;
    border-bottom: 1px solid var(--exp-color-border);
    background: var(--exp-color-surface);
}
.exp-timesheet-popover__heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.exp-timesheet-popover__heading > div { min-width: 0; }
.exp-timesheet-popover__header h2 { font-size: 15px; font-weight: 700; color: var(--exp-color-ink); }
.exp-timesheet-popover__header p { margin-top: 2px; font-size: 11px; color: var(--exp-color-text-muted); }
.exp-timesheet-popover__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--exp-radius-md);
    background: var(--exp-color-selected-bg);
    color: var(--exp-color-selected-text);
    font-size: 18px;
}
.exp-timesheet-popover__view,
.exp-timesheet-popover__form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.exp-timesheet-popover__fields,
.exp-timesheet-popover__active-summary { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px; }
.exp-timesheet-popover .form-control { width: 100%; height: 40px; }
.exp-timesheet-popover .form-control:focus {
    outline: none;
    border-color: var(--exp-color-brand-blue);
    box-shadow: 0 0 0 3px var(--exp-color-selected-bg);
}
.exp-timesheet-popover__title-field { position: relative; }
.exp-timesheet-popover__title-field > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--exp-color-text-muted); pointer-events: none; }
.exp-timesheet-popover__title-field .form-control { padding-left: 36px !important; }
.exp-timesheet-popover .exp-timesheet-popover__error { margin-top: 6px; color: var(--exp-color-danger-text); font-size: 12px; }
.exp-timesheet-popover__duration { margin-top: 18px; }
.exp-timesheet-popover__label-row { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 12px; font-weight: 600; }
.exp-timesheet-popover__label-row small { color: var(--exp-color-text-muted); font-size: 11px; font-weight: 400; }
.exp-timesheet-popover__presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.exp-timesheet-popover .exp-btn { min-height: 40px; font-size: 12px; font-weight: 600; text-decoration: none; }
.exp-timesheet-popover .exp-btn > i { color: inherit; }
.exp-timesheet-popover .exp-btn:focus-visible,
.exp-timesheet-popover__link:focus-visible { outline: 2px solid var(--exp-color-brand-blue); outline-offset: 2px; }
.exp-timesheet-popover .timesheet-quick-duration { padding: 6px; white-space: nowrap; }
.exp-timesheet-popover .timesheet-quick-duration[aria-pressed=true] {
    background: var(--exp-color-selected-bg);
    border-color: var(--exp-color-selected-border);
    color: var(--exp-color-selected-text);
}
.exp-timesheet-popover .timesheet-quick-duration[aria-pressed=true]:hover { background: var(--exp-color-selected-bg-hover); }
.exp-timesheet-popover__custom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid var(--exp-color-border);
    border-radius: var(--exp-radius-lg);
    background: var(--exp-color-surface-muted);
    color: var(--exp-color-text-secondary);
    font-size: 11px;
}
.exp-timesheet-popover__custom > span { margin-right: auto; }
.exp-timesheet-popover__custom > div { display: flex; align-items: center; gap: 4px; }
.exp-timesheet-popover__custom .form-control { width: 52px; padding: 6px !important; text-align: center; }
.exp-timesheet-popover__custom label { margin: 0; font-weight: 400; }
.exp-timesheet-popover__submit { padding: 0 18px 18px; flex: none; }
.exp-timesheet-popover__submit .exp-btn { width: 100%; }
.exp-timesheet-popover__footer { padding: 12px 18px; border-top: 1px solid var(--exp-color-border); background: var(--exp-color-surface); flex: none; }
.exp-timesheet-popover__link { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 28px; color: var(--exp-color-text-secondary); font-size: 12px; font-weight: 600; text-decoration: none; border-radius: var(--exp-radius-sm); }
.exp-timesheet-popover__link:hover { color: var(--exp-color-selected-text); }
.exp-timesheet-popover__active-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.exp-timesheet-popover__active-heading > div { min-width: 0; }
.exp-timesheet-popover__active-heading .exp-status-badge { font-size: 10px; flex: none; }
.exp-timesheet-popover__status { display: inline-flex; align-items: center; gap: 6px; color: var(--exp-color-success-text); font-size: 11px; font-weight: 600; }
.exp-timesheet-popover__status > i { font-size: 7px; }
.exp-timesheet-popover__active-heading h3 { margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--exp-color-ink); overflow-wrap: anywhere; }
.exp-timesheet-popover__active-heading p { margin-top: 4px; font-size: 11px; color: var(--exp-color-text-muted); }
.exp-timesheet-popover__timer {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--exp-color-selected-border);
    border-radius: var(--exp-radius-lg);
    background: var(--exp-color-selected-bg);
}
.exp-timesheet-popover__timer > p:first-child { font-size: 11px; font-weight: 600; color: var(--exp-color-text-secondary); }
.exp-timesheet-popover__timer #timesheetActiveTimer { margin-top: 6px; font: 700 30px/1.2 monospace; font-variant-numeric: tabular-nums; color: var(--exp-color-ink); }
.exp-timesheet-popover__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-block: 16px; }

@media (max-width: 639px) {
    /* Ancora no header, nao no botao estreito, para manter as margens da tela. */
    .header-top-actions #timeTarefasTop:has(.exp-timesheet-popover) { position: static; }
    .exp-timesheet-popover { right: 12px; max-height: calc(100dvh - 100% - 22px); }
}

@media (min-width: 640px) {
    .exp-btn.exp-btn-header {
        --exp-button-padding-x: var(--exp-shell-header-action-padding-x);
    }
}

.exp-btn-secondary {
    background-color: var(--exp-button-bg-secondary);
    border-color: var(--exp-button-border-secondary);
    color: var(--exp-button-text-secondary);
}

.exp-btn-secondary:hover {
    background-color: var(--exp-button-bg-secondary-hover);
}

/* Base visual compartilhada; o consumidor controla pagina atual e navegacao. */
.exp-pagination {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
}

.exp-pagination--compact {
    --exp-pagination-size: 32px;
    gap: 6px;
}

.exp-btn.exp-pagination-btn {
    flex: 0 0 auto;
    min-width: var(--exp-pagination-size, 36px);
    height: var(--exp-pagination-size, 36px);
    min-height: var(--exp-pagination-size, 36px);
    padding: 0 6px;
    border-radius: var(--exp-radius-md);
    box-shadow: none;
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.exp-btn.exp-pagination-btn[aria-current="page"] {
    background-color: var(--exp-button-bg-primary);
    border-color: var(--exp-button-bg-primary);
    color: var(--exp-button-text-primary);
    font-weight: 600;
}

.exp-btn.exp-pagination-btn[aria-current="page"]:hover:not(:disabled) {
    opacity: var(--exp-button-hover-opacity);
}

.exp-btn.exp-pagination-btn:disabled {
    background-color: var(--exp-color-surface-muted);
    border-color: var(--exp-color-border);
    color: var(--exp-color-text-muted);
}

.exp-btn.exp-pagination-btn:focus-visible {
    outline: 2px solid var(--exp-color-brand-blue);
    outline-offset: 2px;
}

.exp-pagination-btn > i {
    color: inherit;
}

.exp-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: var(--exp-pagination-size, 36px);
    color: var(--exp-color-text-muted);
    font-size: 13px;
}

.exp-btn-loading {
    position: relative;
}

/* Acao destrutiva de alta enfase (excluir definitivamente, confirmar remocao) */
.exp-btn-danger {
    background-color: var(--exp-button-bg-danger);
    color: var(--exp-button-text-danger);
}

.exp-btn-danger:hover {
    background-color: var(--exp-button-bg-danger-hover);
}

/* Acao destrutiva de baixa enfase (descartar em lista/rodape, sem competir com o CTA) */
.exp-btn-danger-ghost {
    background-color: transparent;
    color: var(--exp-color-text-secondary);
}

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

/* Botao somente com icone; o nome acessivel deve estar no HTML. */
.exp-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: var(--exp-icon-button-size);
    height: var(--exp-icon-button-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--exp-icon-button-color);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--exp-transition-base), color var(--exp-transition-base);
}

.exp-icon-btn > i {
    font-size: var(--exp-icon-button-icon-size);
    color: inherit;
    line-height: 1;
}

.exp-icon-btn:hover {
    background: var(--exp-icon-button-hover-bg);
    color: var(--exp-icon-button-hover-color);
}

.exp-icon-btn:focus-visible {
    outline: 2px solid var(--exp-color-brand-blue);
    outline-offset: 2px;
}

.exp-icon-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.exp-notification-badge {
    position: absolute;
    top: 0;
    right: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: var(--exp-notification-badge-size);
    height: var(--exp-notification-badge-size);
    padding: 0 4px;
    border-radius: 9999px;
    background: var(--exp-notification-badge-bg);
    color: var(--exp-notification-badge-text);
    box-shadow: 0 0 0 1px var(--exp-notification-badge-ring);
    font-size: var(--exp-notification-badge-font-size);
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}

/* O fluxo legado alterna a classe hidden ao atualizar a contagem. */
.exp-notification-badge.hidden {
    display: none;
}

/* Dropdown: links e botoes em Light DOM, sem interferir nos handlers AJAX. */
exp-dropdown {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.exp-btn .exp-dropdown-chevron {
    font-size: 0.75em;
    color: inherit;
}

exp-dropdown > .exp-dropdown-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    transform: translateX(var(--exp-dropdown-offset-x, 0px));
    z-index: var(--exp-dropdown-z-index);
    width: var(--exp-dropdown-width);
    max-width: calc(100vw - 1rem);
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.375rem;
    background: var(--exp-dropdown-bg);
    border: 1px solid var(--exp-dropdown-border);
    border-radius: var(--exp-dropdown-radius);
    box-shadow: var(--exp-dropdown-shadow);
}

exp-dropdown > .exp-dropdown-panel[hidden] {
    display: none !important;
}

/* Compatibilidade com menus legados fechados por jQuery via .hidden. */
exp-dropdown > .exp-dropdown-panel.hidden {
    display: none !important;
}

.exp-dropdown-panel .exp-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: var(--exp-dropdown-item-padding-y) var(--exp-dropdown-item-padding-x);
    border: 0;
    border-radius: var(--exp-radius-sm);
    background: transparent;
    color: var(--exp-dropdown-text);
    font: inherit;
    font-size: var(--exp-dropdown-font-size);
    line-height: 1.5;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.exp-dropdown-panel .exp-dropdown-item:hover,
.exp-dropdown-panel .exp-dropdown-item:focus-visible {
    background: var(--exp-dropdown-hover-bg);
    color: var(--exp-dropdown-text);
}

.exp-dropdown-item:focus-visible {
    outline: 2px solid var(--exp-color-brand-blue);
    outline-offset: -2px;
}

.exp-dropdown-item > i {
    flex: 0 0 1rem;
    text-align: center;
    color: var(--exp-dropdown-icon);
}

.exp-dropdown-item--primary > i {
    color: var(--exp-button-bg-primary);
}

.exp-dropdown-panel .exp-dropdown-item--danger > i {
    color: var(--exp-dropdown-danger-text);
}

.exp-dropdown-panel .exp-dropdown-item--danger {
    color: var(--exp-dropdown-danger-text);
}

.exp-dropdown-panel .exp-dropdown-item--danger:hover,
.exp-dropdown-panel .exp-dropdown-item--danger:focus-visible {
    background: var(--exp-dropdown-danger-hover-bg);
    color: var(--exp-dropdown-danger-text);
}

.exp-dropdown-panel .exp-dropdown-divider {
    height: 1px;
    margin: 0.375rem 0;
    background: var(--exp-dropdown-border);
}

.exp-dropdown-item:disabled,
.exp-dropdown-item[aria-disabled="true"] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Avatar individual */
exp-avatar {
    --exp-avatar-size: var(--exp-avatar-size-md);
    --exp-avatar-font-size: 0.75rem;
    display: inline-flex;
    width: var(--exp-avatar-size);
    height: var(--exp-avatar-size);
    flex: 0 0 var(--exp-avatar-size);
    vertical-align: middle;
}

exp-avatar[data-size="xs"] {
    --exp-avatar-size: var(--exp-avatar-size-xs);
    --exp-avatar-font-size: 0.625rem;
}

exp-avatar[data-size="sm"] {
    --exp-avatar-size: var(--exp-avatar-size-sm);
    --exp-avatar-font-size: 0.6875rem;
}

exp-avatar[data-size="lg"] {
    --exp-avatar-size: var(--exp-avatar-size-lg);
    --exp-avatar-font-size: 1rem;
}

exp-avatar[data-size="xl"] {
    --exp-avatar-size: var(--exp-avatar-size-xl);
    --exp-avatar-font-size: 1.5rem;
}

/* Tamanhos customizados acompanham o circulo; font-size-px explicito prevalece. */
exp-avatar[data-size-px] {
    --exp-avatar-font-size: calc(var(--exp-avatar-size) * 0.5);
}

exp-avatar[data-shape="rounded"] .exp-avatar-content {
    border-radius: var(--exp-radius-lg);
}

.exp-avatar-content {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 9999px;
    background: var(--exp-avatar-bg, var(--exp-color-primary-600));
    color: var(--exp-avatar-text);
    font-size: var(--exp-avatar-font-size);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    letter-spacing: normal;
    user-select: none;
}

.exp-avatar-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

exp-avatar[data-state="unassigned"] .exp-avatar-content {
    background: var(--exp-avatar-bg-unassigned);
    border: 1.5px dashed var(--exp-avatar-border-color, #d9b564);
    color: var(--exp-avatar-text-color, #c98a12);
}

exp-avatar[data-tone="danger"] .exp-avatar-content {
    --exp-avatar-bg-unassigned: var(--exp-color-danger-subtle);
    --exp-avatar-border-color: var(--exp-color-danger);
    --exp-avatar-text-color: #c2362f;
}

/* Grupo de avatares */
exp-avatar-group {
    display: inline-flex;
    align-items: center;
    padding-left: 0.5rem;
}

exp-avatar-group > exp-avatar,
exp-avatar-group > a.exp-avatar-group-link {
    position: relative;
    margin-left: var(--exp-avatar-group-gap);
}

exp-avatar-group > exp-avatar,
exp-avatar-group > a.exp-avatar-group-link > exp-avatar {
    border: 2px solid var(--exp-avatar-border);
    border-radius: 9999px;
}

exp-avatar-group > exp-avatar:first-child,
exp-avatar-group > a.exp-avatar-group-link:first-child {
    margin-left: 0;
}

exp-avatar-group > a.exp-avatar-group-link {
    display: inline-flex;
    flex: none;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    border-radius: 50%;
    text-decoration: none;
}

exp-avatar-group > a.exp-avatar-group-link[hidden] { display: none !important; }
exp-avatar-group > a.exp-avatar-group-link:is(:hover, :focus-visible) { z-index: 1; }
exp-avatar-group > a.exp-avatar-group-link:focus-visible { outline: 2px solid var(--exp-color-brand-blue); outline-offset: 2px; }

.exp-avatar-group-more {
    display: inline-flex;
    width: var(--exp-avatar-size, var(--exp-avatar-size-md));
    height: var(--exp-avatar-size, var(--exp-avatar-size-md));
    align-items: center;
    justify-content: center;
    margin-left: var(--exp-avatar-group-gap);
    border: 2px solid var(--exp-avatar-border);
    border-radius: 9999px;
    background: var(--exp-color-surface-muted);
    color: var(--exp-color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 700;
}

/* Modal de filtros independente */
exp-modal-filtros {
    position: fixed;
    inset: 0;
    z-index: var(--exp-filtros-z-index);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--exp-filtros-overlay);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

exp-modal-filtros[hidden] {
    display: none !important;
}

exp-modal-filtros:not([data-inicializado]) {
    display: none;
}

body.exp-modal-filtros-aberto {
    overflow: hidden;
}

.exp-modal-filtros__dialogo {
    display: flex;
    width: 100%;
    max-width: var(--exp-filtros-largura);
    max-height: calc(100vh - 2rem);
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--exp-filtros-raio);
    background: var(--exp-color-surface);
    box-shadow: var(--exp-filtros-sombra);
}

.exp-modal-filtros__cabecalho,
.exp-modal-filtros__rodape {
    display: flex;
    align-items: center;
    padding: var(--exp-filtros-padding-y) var(--exp-filtros-padding-x);
}

.exp-modal-filtros__cabecalho {
    justify-content: space-between;
    border-bottom: 1px solid var(--exp-color-border);
}

.exp-modal-filtros__titulo {
    margin: 0;
    color: var(--exp-color-text-primary);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.75rem;
}

.exp-modal-filtros__fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 0;
    border-radius: var(--exp-radius-md);
    background: transparent;
    color: var(--exp-color-text-secondary);
    cursor: pointer;
}

.exp-modal-filtros__fechar:hover {
    background: #f3f4f6;
}

.exp-modal-filtros__corpo {
    min-height: 0;
    padding: var(--exp-filtros-padding-y) var(--exp-filtros-padding-x);
    overflow-y: auto;
}

.exp-modal-filtros__rodape {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    border-top: 1px solid var(--exp-color-border);
}

.exp-modal-filtros__persistencia {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: auto;
    color: var(--exp-color-text-muted);
    font-size: 0.875rem;
    cursor: pointer;
}

.exp-modal-filtros__persistencia input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--exp-button-bg-primary);
}

.exp-filtros-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--exp-filtros-gap);
}

@media (min-width: 768px) {
    .exp-filtros-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .exp-filtros-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .exp-modal-filtros__rodape {
        align-items: stretch;
    }

    .exp-modal-filtros__persistencia {
        width: 100%;
        margin-bottom: 0.25rem;
    }

    .exp-modal-filtros__rodape .exp-btn {
        flex: 1 1 0;
    }
}

/* =====================================================================
   Timeline de auditoria compartilhada (<exp-auditoria-timeline>)
   Mecanismo comum a Processo (layout zig-zag) e Agenda (layout compacto).
   Escopo por tag + classes eatl-* (nunca IDs): a matriz de aceite preve
   duas instancias vivas ao mesmo tempo (ficha de Processo + modal Agenda).
   A politica de cada tela (badges, avatar, drawer) mora no adaptador; aqui
   ficam trilha, cards, agrupamento por dia, sentinela e estados.
   ===================================================================== */
exp-auditoria-timeline {
    display: block;
    --eatl-line: #e2e8f0;
    color: #0f172a;
    padding: 1.25rem 1.5rem 1.5rem;
}

/* area rolavel real: raiz do IntersectionObserver */
exp-auditoria-timeline .eatl-scroll {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    max-height: 1103px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 0.25rem 0.25rem 0.5rem;
}
exp-auditoria-timeline .eatl-scroll::-webkit-scrollbar { width: 10px; }
exp-auditoria-timeline .eatl-scroll::-webkit-scrollbar-track { background: transparent; }
exp-auditoria-timeline .eatl-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1; border-radius: 999px;
    border: 3px solid transparent; background-clip: content-box;
}
exp-auditoria-timeline .eatl-scroll { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }

exp-auditoria-timeline .eatl-day {
    position: sticky; top: 0; z-index: 4; width: max-content;
    display: flex; align-items: center;
    margin: 1rem auto 0.6rem; padding: 0.28rem 0.8rem;
    font-size: 0.72rem; font-weight: 600; color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0; border-radius: 999px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
exp-auditoria-timeline .eatl-day:first-child { margin-top: 0; }

/* trilho central unico e continuo */
exp-auditoria-timeline .eatl-track { position: relative; --gutter: 18rem; }
/* bottom = var: no fim do historico a linha para no ultimo ponto (sem "rabo" apontando
   para o nada); com mais paginas, --eatl-line-fim fica 0 e a linha desce normalmente. */
exp-auditoria-timeline .eatl-track::before {
    content: ""; position: absolute; top: 0; bottom: var(--eatl-line-fim, 0); left: 50%;
    width: 2px; transform: translateX(-50%); background: var(--eatl-line); z-index: 0;
}

exp-auditoria-timeline .eatl-row {
    position: relative; display: grid;
    grid-template-columns: 1fr 1fr; column-gap: var(--gutter); align-items: center;
}
exp-auditoria-timeline .eatl-row.left .eatl-card { grid-column: 1; }
exp-auditoria-timeline .eatl-row.right .eatl-card { grid-column: 2; }
exp-auditoria-timeline .eatl-row + .eatl-row { margin-top: -3rem; }
exp-auditoria-timeline .eatl-day + .eatl-row { margin-top: 0; }

exp-auditoria-timeline .eatl-dot {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
    width: 0.8rem; height: 0.8rem; border-radius: 50%;
    background: #94a3b8; box-shadow: 0 0 0 3px #fff;
}
exp-auditoria-timeline .eatl-card::after {
    content: ""; position: absolute; top: 50%; width: calc(var(--gutter) / 2); height: 2px;
    background: var(--eatl-line); transform: translateY(-50%); z-index: 0;
}
exp-auditoria-timeline .eatl-row.left .eatl-card::after { left: 100%; }
exp-auditoria-timeline .eatl-row.right .eatl-card::after { right: 100%; }

exp-auditoria-timeline .eatl-card {
    position: relative; z-index: 1; text-align: left; border: 1px solid transparent;
    border-radius: 0.85rem; padding: 1rem 2.6rem 2.1rem 1.2rem; margin: 0.4rem 0;
    background: #f8fafc; border-color: #e2e8f0;
    transition: all 0.15s ease; cursor: default;
}
exp-auditoria-timeline .eatl-card.clickable { cursor: pointer; }
exp-auditoria-timeline .eatl-card.clickable:hover,
exp-auditoria-timeline .eatl-card.clickable:focus-visible {
    z-index: 3; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08); transform: translateY(-1px);
}
exp-auditoria-timeline .eatl-card.has-tags { padding-right: 7rem; }

exp-auditoria-timeline .eatl-head { display: flex; align-items: flex-start; gap: 0.7rem; }
exp-auditoria-timeline .eatl-meta { min-width: 0; flex: 1; }
exp-auditoria-timeline .eatl-name { font-size: 0.85rem; font-weight: 700; line-height: 1.15; }
exp-auditoria-timeline .eatl-time { font-size: 0.72rem; font-weight: 500; color: #64748b; margin-top: 0.05rem; }
exp-auditoria-timeline .eatl-desc { font-size: 0.86rem; font-weight: 600; margin-top: 0.45rem; line-height: 1.3; }
exp-auditoria-timeline .eatl-sub { font-size: 0.78rem; color: #64748b; margin-top: 0.25rem; line-height: 1.35; }

exp-auditoria-timeline .eatl-tags {
    position: absolute; top: 0.8rem; right: 0.8rem;
    display: flex; align-items: center; gap: 0.35rem;
}
/* chip de badge reutilizavel (layout; cores vem por inline style de cada adaptador) */
exp-auditoria-timeline .eatl-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.68rem; font-weight: 600; padding: 0.2rem 0.55rem;
    border-radius: 999px; white-space: nowrap;
}
exp-auditoria-timeline .eatl-ver {
    position: absolute; bottom: 0.7rem; right: 0.9rem; display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.7rem; font-weight: 600; color: #94a3b8; transition: color 0.15s ease;
}
exp-auditoria-timeline .eatl-tags,
exp-auditoria-timeline .eatl-ver { pointer-events: none; }
exp-auditoria-timeline .eatl-card.clickable:hover .eatl-ver,
exp-auditoria-timeline .eatl-card.clickable:focus-visible .eatl-ver { color: #4f46e5; }

exp-auditoria-timeline .eatl-more { display: flex; justify-content: center; margin-top: 1.25rem; }
exp-auditoria-timeline .eatl-empty { text-align: center; padding: 3rem 1rem; color: #94a3b8; }

/* scroll infinito */
exp-auditoria-timeline .eatl-sentinela { min-height: 1px; text-align: center; }
exp-auditoria-timeline .eatl-mais-spin { display: none; padding: 0.85rem 0 0.35rem; font-size: 0.8rem; color: #94a3b8; }
exp-auditoria-timeline .eatl-sentinela.carregando .eatl-mais-spin { display: inline-block; }

/* fim da lista */
exp-auditoria-timeline .eatl-fim {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 1.1rem 0 0.4rem; font-size: 0.75rem; color: #94a3b8;
}
exp-auditoria-timeline .eatl-fim::before,
exp-auditoria-timeline .eatl-fim::after { content: ""; width: 1.75rem; height: 1px; background: #e2e8f0; }

/* empty/erro/loading: sem trilho central */
exp-auditoria-timeline .eatl-track.eatl-vazio::before { display: none; }

/* ---- variante compacta (Agenda dentro do modal) e colapso mobile do zig-zag ---- */
exp-auditoria-timeline[data-layout="compact"] { padding: 1rem; }
exp-auditoria-timeline[data-layout="compact"] .eatl-scroll { max-height: 60vh; }
exp-auditoria-timeline[data-layout="compact"] .eatl-track::before { left: 1rem; }
exp-auditoria-timeline[data-layout="compact"] .eatl-row { grid-template-columns: 1fr; }
exp-auditoria-timeline[data-layout="compact"] .eatl-row.left .eatl-card,
exp-auditoria-timeline[data-layout="compact"] .eatl-row.right .eatl-card { grid-column: 1; margin-left: 2.5rem; }
exp-auditoria-timeline[data-layout="compact"] .eatl-row + .eatl-row { margin-top: 0.4rem; }
exp-auditoria-timeline[data-layout="compact"] .eatl-dot { left: 1rem; }
exp-auditoria-timeline[data-layout="compact"] .eatl-row.left .eatl-card::after,
exp-auditoria-timeline[data-layout="compact"] .eatl-row.right .eatl-card::after { left: -1.5rem; right: auto; width: 1.5rem; }
exp-auditoria-timeline[data-layout="compact"] .eatl-day { margin-left: 0; margin-right: auto; }

@media (max-width: 680px) {
    exp-auditoria-timeline { padding: 1rem; }
    exp-auditoria-timeline .eatl-track::before { left: 1rem; }
    exp-auditoria-timeline .eatl-row { grid-template-columns: 1fr; }
    exp-auditoria-timeline .eatl-row.left .eatl-card,
    exp-auditoria-timeline .eatl-row.right .eatl-card { grid-column: 1; margin-left: 2.5rem; }
    exp-auditoria-timeline .eatl-dot { left: 1rem; }
    exp-auditoria-timeline .eatl-row.left .eatl-card::after,
    exp-auditoria-timeline .eatl-row.right .eatl-card::after { left: -1.5rem; right: auto; width: 1.5rem; }
    exp-auditoria-timeline .eatl-day { margin-left: 0; margin-right: auto; }
}

/* Feedback assíncrono global -------------------------------------------------
 * A percepção de andamento é específica ao contexto: navegação recebe uma
 * barra discreta após pequeno atraso; ações bloqueiam apenas o próprio
 * controle. Nunca reutilizar `body.loaded` para esse estado.
 */
.exp-feedback-navigation-progress {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1100;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 140ms ease;
}

.exp-feedback-navigation-progress__bar {
    display: block;
    width: 34%;
    height: 100%;
    border-radius: 0 999px 999px 0;
    background: var(--exp-button-bg-primary);
    box-shadow: 0 0 14px color-mix(in srgb, var(--exp-button-bg-primary) 48%, transparent);
    transform: translateX(-120%);
}

body.exp-feedback-navigation-visible .exp-feedback-navigation-progress {
    opacity: 1;
}

body.exp-feedback-navigation-visible .exp-feedback-navigation-progress__bar {
    animation: exp-feedback-progress 1.15s ease-in-out infinite;
}

@keyframes exp-feedback-progress {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(360%); }
}

.exp-feedback-blocking {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--exp-color-surface-muted) 62%, transparent);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.exp-feedback-blocking[hidden] {
    display: none;
}

.exp-feedback-spinner {
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid color-mix(in srgb, var(--exp-button-bg-primary) 18%, transparent);
    border-top-color: var(--exp-button-bg-primary);
    border-radius: 999px;
    animation: exp-feedback-spin 700ms linear infinite;
}

@keyframes exp-feedback-spin {
    to { transform: rotate(360deg); }
}

.exp-feedback-action-pending {
    position: relative;
    pointer-events: none;
    cursor: wait !important;
    opacity: 0.68;
}

.exp-feedback-action-pending::after {
    content: '';
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 0.4rem;
    vertical-align: -0.08rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: exp-feedback-spin 700ms linear infinite;
}

/* Shell transitório da Agenda: carregado globalmente porque antecede o
 * fragmento /agenda/home; permanece específico da tela e usa só tokens. */
.agenda-navigation-shell .agenda_content {
    overflow: hidden;
}

.agenda-navigation-shell-controls {
    display: grid;
    grid-template-columns: 96px minmax(120px, 1fr) 208px;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.agenda-navigation-shell-control,
.agenda-navigation-shell-date,
.agenda-navigation-shell-event {
    display: block;
    border-radius: var(--exp-radius-sm);
    background: linear-gradient(
        90deg,
        var(--exp-color-surface-subtle) 25%,
        var(--exp-color-surface-muted) 50%,
        var(--exp-color-surface-subtle) 75%
    );
    background-size: 200% 100%;
    animation: exp-agenda-navigation-shell-shimmer 1.2s ease-in-out infinite;
}

.agenda-navigation-shell-control {
    justify-self: end;
    width: 100%;
    height: 36px;
}

.agenda-navigation-shell-control--compact {
    justify-self: start;
    width: 92px;
}

.agenda-navigation-shell-control--title {
    justify-self: center;
    width: min(180px, 100%);
    height: 20px;
}

.agenda-navigation-shell-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--exp-color-border);
    border-radius: var(--exp-radius-md);
}

.agenda-navigation-shell-day {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 92px;
    padding: 10px;
    border-right: 1px solid var(--exp-color-border);
    border-bottom: 1px solid var(--exp-color-border);
}

.agenda-navigation-shell-day:nth-child(7n) {
    border-right: 0;
}

.agenda-navigation-shell-date {
    width: 28px;
    height: 12px;
    justify-self: end;
}

.agenda-navigation-shell-event {
    width: 100%;
    height: 20px;
}

.agenda-navigation-shell-event--short {
    width: 78%;
}

.agenda-navigation-shell-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes exp-agenda-navigation-shell-shimmer {
    to { background-position: -200% 0; }
}

@media (max-width: 600px) {
    .agenda-navigation-shell-controls {
        grid-template-columns: 72px minmax(80px, 1fr) 108px;
        gap: 10px;
        margin-bottom: 12px;
    }

    .agenda-navigation-shell-control--compact {
        width: 72px;
    }

    .agenda-navigation-shell-day {
        min-height: 64px;
        gap: 7px;
        padding: 6px;
    }

    .agenda-navigation-shell-event {
        height: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .exp-feedback-navigation-progress__bar,
    .exp-feedback-spinner,
    .exp-feedback-action-pending::after,
    .agenda-navigation-shell-control,
    .agenda-navigation-shell-date,
    .agenda-navigation-shell-event {
        animation-duration: 1.8s;
    }
}

/* =====================================================================
   Tema escuro: ajustes sobre FUNDOS de marca.
   --exp-color-brand-navy permanece #11114B nos dois temas; --exp-color-ink
   muda para tinta clara no dark. Aliases locais escolhem os fundos. Aqui:
   (1) texto branco sobre esses fundos (o DS usava color:surface, agora escuro);
   (2) botoes primarios de modal solidos; (3) scrims mais opacos.
   ===================================================================== */

/* Variante dark dos modais: fundo navy constante com texto branco; consumidores
   com par primario proprio podem sobrescrever esses aliases no seu escopo. */
html.dark :is(.exp-modal, .exp-bootstrap-modal, .tailwind-modal.exp-modal) {
    --exp-button-bg-primary: var(--exp-color-brand-navy);
    --exp-button-text-primary: #fff;
}

/* Texto branco sobre os fundos de marca (tabs ativas, paginacao, KPIs, toast, apply).
   Esses trechos usam background:brand-navy + color:surface; no escuro surface ficou
   escuro, entao forcamos branco para manter o contraste do estado ativo. */
html.dark :is(
    .exp-grid-filters [data-action="apply"].exp-btn,
    .exp-agenda-page #kt_calendar_app .fc-button-active,
    .ci-page .op-filter[aria-pressed="true"],
    .reminder-tabs [aria-selected="true"],
    .reminder-status-filters .filter-tab[aria-pressed="true"],
    #documentosPage .documents-pagination nav > button[data-page],
    #pessoasPage .buttonsGraph.active,
    .atualizacao-navigation .exp-btn[aria-current="page"],
    .processos-page .processos-chart .filter-btn.active,
    .dashboard-processos .dp-kpi.dp-total,
    .crm-toast
) {
    color: #fff;
}

/* scrims de overlay (filtro do grid e modal tailwind) — mais opacos no escuro */
html.dark .exp-grid-filters,
html.dark .tailwind-modal.exp-modal {
    background: rgba(2, 7, 20, 0.64);
}
/* Componente global: configuracao de recorrencia da agenda. */
/* Regras de display abaixo nao devem anular o atributo hidden controlado pelo JS. */
exp-recurrence-config [hidden] {
    display: none !important;
}

exp-recurrence-config {
    display: block;
    width: 100%;
    /* Texto/icone de destaque legivel nos dois temas; info-text so existe no escuro. */
    --exp-recurrence-accent: var(--exp-color-info-text, var(--exp-color-primary-700));
    --exp-recurrence-tint: color-mix(in srgb, var(--exp-color-brand-blue) 8%, var(--exp-color-surface));
}

.exp-recurrence-config {
    overflow: hidden;
    border: 1px solid var(--exp-color-border);
    border-radius: var(--exp-radius-xl, 16px);
    background: var(--exp-color-surface);
}

.exp-recurrence-config__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: var(--exp-color-surface-subtle);
}

.exp-recurrence-config__intro {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.exp-recurrence-config__header-icon,
.exp-recurrence-config__choice-icon,
.exp-recurrence-config__summary-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.exp-recurrence-config__header-icon {
    width: 40px;
    height: 40px;
    color: var(--exp-recurrence-accent);
    background: color-mix(in srgb, var(--exp-color-brand-blue) 16%, var(--exp-color-surface));
}

.exp-recurrence-config__intro h3,
.exp-recurrence-config__intro p,
.exp-recurrence-config__field-group,
.exp-recurrence-config__field-group legend,
.exp-recurrence-config__help,
.exp-recurrence-config__summary p {
    margin: 0;
}

.exp-recurrence-config__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.exp-recurrence-config__intro h3 {
    color: var(--exp-color-text-primary);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.exp-recurrence-config__status {
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--exp-color-text-muted);
    background: var(--exp-color-surface-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.exp-recurrence-config__status.is-active {
    color: var(--exp-recurrence-accent);
    background: color-mix(in srgb, var(--exp-color-brand-blue) 16%, var(--exp-color-surface));
}

.exp-recurrence-config__intro p,
.exp-recurrence-config__help,
.exp-recurrence-config__choice-copy small,
.exp-recurrence-config__summary-help {
    color: var(--exp-color-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.exp-recurrence-config__intro p {
    margin-top: 2px;
}

/* Native checkbox switch; the recurrence selector remains a compatibility alias. */
.exp-switch,
.exp-recurrence-config__switch {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    cursor: pointer;
}

.exp-switch > input,
.exp-recurrence-config__switch input,
.exp-recurrence-config__choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.exp-switch > span,
.exp-recurrence-config__switch > span {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: var(--exp-color-border-strong);
    transition: background-color 160ms ease;
}

.exp-switch > span::after,
.exp-recurrence-config__switch > span::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--exp-color-surface);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
    content: '';
    transition: transform 160ms ease;
}

.exp-switch > input:checked + span,
.exp-recurrence-config__switch input:checked + span {
    background: var(--exp-color-brand-blue);
}

.exp-switch > input:checked + span::after,
.exp-recurrence-config__switch input:checked + span::after {
    transform: translateX(20px);
}

.exp-switch > input:focus-visible + span,
.exp-recurrence-config__switch input:focus-visible + span,
.exp-recurrence-config__choice input:focus-visible + .exp-recurrence-config__choice-icon {
    outline: 3px solid color-mix(in srgb, var(--exp-color-brand-blue) 32%, transparent);
    outline-offset: 2px;
}

.exp-switch > input:disabled + span {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .exp-switch > span,
    .exp-switch > span::after {
        transition: none;
    }
}

.exp-recurrence-config__body {
    border-top: 1px solid var(--exp-color-border);
}

.exp-recurrence-config__field-group {
    min-width: 0;
    padding: 20px;
    border: 0;
}

.exp-recurrence-config__field-group + .exp-recurrence-config__field-group {
    border-top: 1px solid var(--exp-color-border);
}

.exp-recurrence-config__field-group legend {
    display: flex;
    float: left;
    align-items: center;
    gap: 8px;
    width: 100%;
    color: var(--exp-color-text-primary);
    font-size: 14px;
    font-weight: 700;
}

.exp-recurrence-config__field-group legend > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: var(--exp-color-text-secondary);
    background: var(--exp-color-surface-muted);
    font-size: 11px;
}

.exp-recurrence-config__help {
    clear: both;
    padding: 4px 0 0 32px;
}

.exp-recurrence-config__choices {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.exp-recurrence-config__mode-choices,
.exp-recurrence-config__scope-choices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.exp-recurrence-config__ending-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.exp-recurrence-config__choice {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--exp-color-border);
    border-radius: 12px;
    color: var(--exp-color-text-primary);
    background: var(--exp-color-surface);
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.exp-recurrence-config__choice:hover {
    border-color: color-mix(in srgb, var(--exp-color-brand-blue) 50%, var(--exp-color-border));
    background: var(--exp-color-surface-subtle);
}

.exp-recurrence-config__choice.is-selected {
    border-color: var(--exp-color-brand-blue);
    background: var(--exp-recurrence-tint);
    box-shadow: 0 0 0 1px var(--exp-color-brand-blue);
}

.exp-recurrence-config__choice-icon {
    width: 40px;
    height: 40px;
    color: var(--exp-color-text-muted);
    background: var(--exp-color-surface-muted);
    transition: color 160ms ease, background-color 160ms ease;
}

/* Primario azul da marca com texto marinho, como nos botoes do modal. */
.is-selected > .exp-recurrence-config__choice-icon {
    color: var(--exp-color-brand-navy);
    background: var(--exp-color-brand-blue);
}

.exp-recurrence-config__choice-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.exp-recurrence-config__choice-copy strong {
    color: var(--exp-color-text-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.exp-recurrence-config__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: var(--exp-color-brand-navy);
    background: var(--exp-color-brand-blue);
    font-size: 10px;
    visibility: hidden;
}

.is-selected > .exp-recurrence-config__check {
    visibility: visible;
}

.exp-recurrence-config__date {
    display: grid;
    gap: 6px;
    max-width: 280px;
    margin-top: 16px;
    color: var(--exp-color-text-secondary);
    font-size: 12px;
    font-weight: 600;
}

.exp-recurrence-config__date .form-control {
    min-height: 40px;
    border-color: var(--exp-color-border-strong);
    border-radius: 10px;
    color: var(--exp-color-text-primary);
    background: var(--exp-color-surface);
}

.exp-recurrence-config__date .form-control[aria-invalid="true"] {
    border-color: var(--exp-color-danger);
}

.exp-recurrence-config__summary {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    border-top: 1px solid color-mix(in srgb, var(--exp-color-brand-blue) 20%, var(--exp-color-border));
    background: var(--exp-recurrence-tint);
}

.exp-recurrence-config__summary > div {
    min-width: 0;
}

.exp-recurrence-config__summary-icon {
    width: 36px;
    height: 36px;
    color: var(--exp-color-brand-navy);
    background: var(--exp-color-brand-blue);
    font-size: 14px;
}

.exp-recurrence-config__summary-label {
    color: var(--exp-recurrence-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.exp-recurrence-config__summary-message {
    margin-top: 4px !important;
    color: var(--exp-color-text-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.exp-recurrence-config__summary-message:focus {
    outline: none;
}

.exp-recurrence-config__summary-help {
    margin-top: 4px !important;
}

.exp-recurrence-config__summary.is-error {
    border-top-color: color-mix(in srgb, var(--exp-color-danger) 30%, var(--exp-color-border));
    background: var(--exp-color-danger-subtle);
}

.exp-recurrence-config__summary.is-error .exp-recurrence-config__summary-icon {
    color: var(--exp-color-surface);
    background: var(--exp-color-danger);
}

.exp-recurrence-config__summary.is-error .exp-recurrence-config__summary-label,
.exp-recurrence-config__summary.is-error .exp-recurrence-config__summary-message {
    color: var(--exp-color-danger-text);
}

@media (max-width: 768px) {
    .exp-recurrence-config__mode-choices,
    .exp-recurrence-config__ending-choices,
    .exp-recurrence-config__scope-choices {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .exp-recurrence-config__header,
    .exp-recurrence-config__field-group,
    .exp-recurrence-config__summary {
        padding: 16px;
    }

    .exp-recurrence-config__intro {
        align-items: flex-start;
    }

    .exp-recurrence-config__date {
        max-width: none;
    }
}

/* Product glyphs: matching tiles, distinct product colors and one-shot motion. */
.exp-product-glyph {--product-glyph-bg:var(--exp-color-brand-navy);--product-glyph-end:var(--exp-color-primary-900);--product-glyph-ink:var(--exp-color-primary-50);position:relative;isolation:isolate;flex-shrink:0;pointer-events:none;border:0;border-radius:var(--exp-radius-sm);background:linear-gradient(145deg,var(--product-glyph-bg),var(--product-glyph-end));color:var(--product-glyph-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--product-glyph-ink) 16%,transparent)}
.exp-product-glyph--write {--product-glyph-bg:var(--exp-color-primary-600);--product-glyph-end:var(--exp-color-primary-700)}
.exp-product-glyph > i {position:relative;z-index:1;color:inherit;font-size:inherit}
.exp-product-glyph::after {content:"";position:absolute;left:22%;bottom:8%;width:56%;height:2px;border-radius:2px;background:currentColor;opacity:0;transform:scaleX(0);transform-origin:left}
.exp-product-glyph--search::before {content:"";position:absolute;left:19%;top:28%;width:32%;height:1px;border-radius:1px;background:currentColor;box-shadow:0 4px currentColor,0 8px currentColor;opacity:0;transform:translateY(2px)}
.exp-product-glyph > .exp-product-glyph__pen {position:absolute;right:8%;top:35%;font-size:.62em!important;opacity:0;transform:translate(3px,-4px)}
@media(prefers-reduced-motion:no-preference) {
 .exp-product-trigger:is(:hover,:focus-within) .exp-product-glyph--search > i {animation:exp-product-scan 1.2s cubic-bezier(.22,.61,.36,1) both}
 .exp-product-trigger:is(:hover,:focus-within) .exp-product-glyph--search::before {animation:exp-product-found 1.2s ease-out both}
 .exp-product-trigger:is(:hover,:focus-within) .exp-product-glyph::after {animation:exp-product-line 1s ease both}
 .exp-product-trigger:is(:hover,:focus-within) .exp-product-glyph--write > .exp-product-glyph__pen {animation:exp-product-write 1s ease both}
}
@keyframes exp-product-scan {0%,100%{transform:translate(0,0) scale(1)}20%{transform:translate(3px,-2px) scale(.82)}48%{transform:translate(3px,3px) scale(.82)}68%,80%{transform:translate(4px,1px) scale(.9)}}
@keyframes exp-product-found {0%,100%{opacity:0;transform:translateY(2px)}20%,65%{opacity:.55;transform:translateY(0)}80%{opacity:.2;transform:translateY(0)}}
@keyframes exp-product-line {0%,40%{opacity:0;transform:scaleX(0)}75%,100%{opacity:.65;transform:scaleX(1)}}
@keyframes exp-product-write {0%{opacity:0;transform:translate(3px,-4px)}20%{opacity:1;transform:translate(-5px,0)}40%{opacity:1;transform:translate(1px,1px)}50%{transform:translate(-4px,3px)}75%{opacity:1;transform:translate(2px,4px)}100%{opacity:0;transform:translate(4px,-3px)}}
/* Reautenticação preservando a página e seus formulários. */
.exp-session-dialog {
    box-sizing: border-box;
    font: 13px/1.45 Inter, system-ui, Arial, sans-serif;
    width: min(480px, calc(100vw - 24px));
    height: fit-content;
    max-width: none;
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: 18px;
    border: 1px solid var(--exp-color-border);
    border-radius: var(--exp-radius-xl);
    background: var(--exp-color-surface);
    color: var(--exp-color-ink);
    box-shadow: var(--exp-shadow-soft);
    overflow: auto;
}
.exp-session-dialog[open] { display: flex; flex-direction: column; gap: 12px; }
.exp-session-dialog::backdrop { background: var(--exp-filtros-overlay); }
.exp-session-header, .exp-session-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; }
.exp-session-header h2 { margin: 0; font-size: 18px; font-weight: 600; }
.exp-session-dialog p { margin: 0; font-size: 13px; }
.exp-session-header > div { min-width: 0; }
.exp-session-header > button { flex-shrink: 0; }
.exp-session-dialog .exp-session-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .08em; color: var(--exp-color-text-muted); margin-bottom: 4px; }
.exp-session-form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.exp-session-form .form-control { box-sizing: border-box; width: 100%; }
.exp-session-password { display: flex; align-items: stretch; gap: 8px; }
.exp-session-password input { flex: 1; min-width: 0; }
.exp-session-password button { flex-shrink: 0; font-size: 12px; }
.exp-session-link { color: var(--exp-color-primary-700); text-underline-offset: 3px; align-self: flex-end; }
.exp-session-message { color: var(--exp-color-danger-text); overflow-wrap: anywhere; }
.exp-session-message:empty { display: none; }
.exp-session-form[aria-busy="true"] .exp-session-message { color: var(--exp-color-text-muted); }
.exp-session-footer { flex-direction: column; border-top: 1px solid var(--exp-color-border); padding-top: 16px; margin-top: 4px; }
.exp-session-footer > a { width: 100%; box-sizing: border-box; }
.exp-session-footer p { color: var(--exp-color-text-muted); font-size: 12px; text-align: center; }
.exp-session-dialog :is(button, a, input):focus-visible { outline: 2px solid var(--exp-color-brand-blue); outline-offset: 3px; }
@media (max-width: 520px) {
    .exp-session-dialog { padding: 12px; }
    .exp-session-footer { flex-wrap: wrap; }
    .exp-session-footer > * { width: 100%; }
}