/*
 * Citius – base visual compartilhada: tokens (claro e escuro), base, cabeçalho de página, botões, campos,
 * cartões, tabelas, diálogos, abas, growl, selos (cz-chip) e esqueleto de carregamento (cz-sk).
 *
 * Carregada pelo sistema interno (templates/template.xhtml, logo antes do citius-ui.css) e pela
 * Agência Virtual externa (templates/agenciavirtual/layout.xhtml). O shell do sistema interno (menu,
 * barra superior, conteúdo) e as regras de telas específicas ficam no citius-ui.css.
 */

/* ======================================================================
   Tokens
   ====================================================================== */
:root {
    --cz-ground: #ECF0F6;
    --cz-surface: #FFFFFF;
    --cz-surface-2: #F8FAFC;
    --cz-sunken: #EDF1F6;
    --cz-ink: #18212D;
    --cz-ink-2: #4A5668;
    --cz-muted: #6B778A;
    --cz-border: #E0E5EC;
    --cz-border-strong: #C9D1DC;
    --cz-primary: #1667D9;
    --cz-primary-hover: #0F56BA;
    --cz-primary-soft: #E7F0FD;
    --cz-on-primary: #FFFFFF;
    --cz-side-bg: #0F2747;
    --cz-side-ink: #C5D3E6;
    --cz-side-ink-strong: #FFFFFF;
    --cz-side-muted: #7F93AE;
    --cz-side-hover: #17355E;
    --cz-side-active: #1E4478;
    --cz-side-dot: #5AA2FF;
    --cz-tab-active-bg: #0F2747;
    --cz-tab-active-ink: #FFFFFF;
    /* profundidade das telas de lista */
    --cz-band: linear-gradient(180deg, #DCE6F3 0%, rgba(236, 240, 246, 0) 280px);
    --cz-thead-bg: #E8EEF7;
    --cz-thead-ink: #3E5170;
    --cz-thead-line: #D3DDEB;
    --cz-row-alt: #F7F9FC;
    --cz-row-hover: #EAF2FE;
    --cz-table-bar: #F8FAFD;
    --cz-card-shadow: 0 1px 2px rgba(16, 32, 60, .05), 0 10px 28px -6px rgba(16, 32, 60, .12);
    /* botões secundários: tom suave da própria cor */
    --cz-sec-bg: #DFEAFB;
    --cz-sec-bg-hover: #CCDDF8;
    --cz-sec-ink: #1558BD;
    --cz-success-bg: #DDF1E5;
    --cz-success-bg-hover: #C8E8D5;
    --cz-success-ink: #146C42;
    --cz-warning-bg: #FCEBCF;
    --cz-warning-bg-hover: #F9DDAE;
    --cz-warning-ink: #8A5100;
    --cz-help-bg: #ECE4FA;
    --cz-help-bg-hover: #DDD0F6;
    --cz-help-ink: #6536BD;
    --cz-info-bg: #DAF0FA;
    --cz-info-bg-hover: #C3E6F6;
    --cz-info-ink: #0B6690;
    --cz-bar-rest: #A9C6F2;
    --cz-comp-trib: #6E8BB8;
    --cz-comp-gas: #3F6FB5;
    --cz-comp-custeio: #93A9CC;
    --cz-comp-dep: #B9C7DD;
    --cz-comp-ir: #8291A8;
    --cz-comp-lucro: #157A4A;
    --cz-ok: #157A4A;
    --cz-ok-soft: #E3F4EB;
    --cz-warn: #9A5B00;
    --cz-warn-soft: #FDF1DC;
    --cz-bad: #C0352B;
    --cz-bad-soft: #FBE7E5;
    --cz-info: #1667D9;
    --cz-info-soft: #E7F0FD;
    /* gás em volume (bônus em gás, volumes do EVTE) */
    --cz-gas: #0B7A76;
    --cz-gas-hover: #08625F;
    --cz-gas-soft: #E0F3F1;
    --cz-gas-ink: #085E5A;
    --cz-neutral-soft: #EEF1F5;
    --cz-scrim: rgba(10, 20, 35, .38);
    --cz-shadow: 0 1px 2px rgba(16, 32, 60, .06), 0 4px 16px rgba(16, 32, 60, .06);
    --cz-shadow-lg: 0 12px 40px rgba(16, 32, 60, .18);
    --cz-r: 8px;
    --cz-r-sm: 6px;
    --cz-r-lg: 12px;
    --cz-font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    --cz-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

    --cz-side-w: 264px;
    --cz-rail-w: 68px;
    --cz-topbar-h: 60px;
    --cz-footer-h: 32px;
    --cz-gutter: 24px;
}

html[data-scheme="dark"] {
    color-scheme: dark;
    --cz-ground: #0E131A;
    --cz-surface: #151C25;
    --cz-surface-2: #19212C;
    --cz-sunken: #1E2733;
    --cz-ink: #E6ECF3;
    --cz-ink-2: #B4BFCD;
    --cz-muted: #8793A4;
    --cz-border: #27313E;
    --cz-border-strong: #364252;
    --cz-primary: #5B9BF5;
    --cz-primary-hover: #7AB0F8;
    --cz-primary-soft: #172B47;
    --cz-on-primary: #0B1522;
    --cz-side-bg: #0B1624;
    --cz-side-ink: #A9B8CB;
    --cz-side-hover: #13243A;
    --cz-side-active: #1A3354;
    --cz-tab-active-bg: #1E4478;
    --cz-band: linear-gradient(180deg, #12223A 0%, rgba(14, 19, 26, 0) 280px);
    --cz-thead-bg: #1B2636;
    --cz-thead-ink: #A9B8CB;
    --cz-thead-line: #2C3949;
    --cz-row-alt: #17202B;
    --cz-row-hover: #1A2B42;
    --cz-table-bar: #18212C;
    --cz-card-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -6px rgba(0, 0, 0, .45);
    --cz-sec-bg: #1A2F4D;
    --cz-sec-bg-hover: #22395C;
    --cz-sec-ink: #8DBBFA;
    --cz-success-bg: #143426;
    --cz-success-bg-hover: #1A4231;
    --cz-success-ink: #72D6A1;
    --cz-warning-bg: #3A2B10;
    --cz-warning-bg-hover: #4A3715;
    --cz-warning-ink: #F2C46E;
    --cz-help-bg: #2A2246;
    --cz-help-bg-hover: #352B58;
    --cz-help-ink: #C3A9F7;
    --cz-info-bg: #0F3142;
    --cz-info-bg-hover: #143D52;
    --cz-info-ink: #72CFF2;
    --cz-bar-rest: #2C4A72;
    --cz-comp-trib: #5B79A6;
    --cz-comp-gas: #7AA8EE;
    --cz-comp-custeio: #46628C;
    --cz-comp-dep: #34496A;
    --cz-comp-ir: #6B7B94;
    --cz-comp-lucro: #52C58A;
    --cz-ok: #52C58A;
    --cz-ok-soft: #12301F;
    --cz-warn: #E7AE4B;
    --cz-warn-soft: #33260F;
    --cz-bad: #F07A6F;
    --cz-bad-soft: #3A1916;
    --cz-info: #5B9BF5;
    --cz-info-soft: #172B47;
    /* gás em volume (bônus em gás, volumes do EVTE) */
    --cz-gas: #49C6BE;
    --cz-gas-hover: #6FD4CD;
    --cz-gas-soft: #0E2B2A;
    --cz-gas-ink: #7EDAD3;
    --cz-neutral-soft: #222C38;
    --cz-scrim: rgba(0, 0, 0, .55);
    --cz-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
    --cz-shadow-lg: 0 12px 40px rgba(0, 0, 0, .5);
}

/* ======================================================================
   Base
   ====================================================================== */
html body {
    background: var(--cz-ground);
    color: var(--cz-ink);
    font-family: var(--cz-font);
    -webkit-font-smoothing: antialiased;
}

html body :focus-visible {
    outline: 2px solid var(--cz-primary);
    outline-offset: 2px;
}

/* ======================================================================
   Cabeçalho de página
   ====================================================================== */
.cz-page-head {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.cz-page-head h1 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--cz-ink);
    text-wrap: balance;
}

.cz-page-head .cz-sub {
    margin: 4px 0 0;
    color: var(--cz-muted);
    font-size: 14px;
}

.cz-page-head .cz-sub:empty {
    display: none;
}

/* Barra de ações: vale no cabeçalho de página, na barra dos relatórios e nos rodapés.
   Os botões dentro dela têm a margem zerada (regra abaixo); o espaçamento vem do gap. */
.cz-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.cz-page-head .cz-actions {
    margin-left: auto;
}

.cz-page-head.cz-sticky {
    position: sticky;
    top: var(--cz-topbar-h);
    z-index: 5;
    padding: 12px 0;
    margin-top: -12px;
    background: var(--cz-ground);
}

@media screen and (max-width: 560px) {
    .cz-page-head .cz-actions {
        margin-left: 0;
        width: 100%;
    }

    .cz-page-head .cz-actions > .ui-button.cz-primary {
        flex: 1;
    }
}

/* ======================================================================
   Botões
   ====================================================================== */
html body .ui-button {
    border-radius: var(--cz-r);
    font-family: var(--cz-font);
    font-weight: 700;
}

/* Cor principal só nos botões sem severidade/variante. :where() mantém a especificidade baixa,
   para que as severidades do Diamond (success, help...) e as regras abaixo continuem valendo. */
html body .ui-button:where(:not(.ui-button-success, .ui-button-help, .ui-button-info, .ui-button-warning,
        .ui-button-danger, .ui-button-secondary, .ui-button-outlined, .ui-button-flat, .ui-button-text,
        .cz-neutral, .cz-ghost, .cz-danger-outline, .cz-icon-btn)) {
    background: var(--cz-primary);
    border-color: var(--cz-primary);
    color: var(--cz-on-primary);
}

html body .ui-button:where(:not(.ui-button-success, .ui-button-help, .ui-button-info, .ui-button-warning,
        .ui-button-danger, .ui-button-secondary, .ui-button-outlined, .ui-button-flat, .ui-button-text,
        .cz-neutral, .cz-ghost, .cz-danger-outline, .cz-icon-btn)).ui-state-hover {
    background: var(--cz-primary-hover);
    border-color: var(--cz-primary-hover);
    color: var(--cz-on-primary);
}

html body .ui-button:enabled:focus,
html body .ui-button.ui-state-focus {
    box-shadow: 0 0 0 3px var(--cz-primary-soft);
}

/* Hierarquia nas barras de ações e nos rodapés dos painéis laterais:
   - principal (espaço cz-slot-primary, cz-primary ou botão sem classe): azul cheio;
   - secundário (cz-neutral, ui-button-secondary, botão dividido/de menu sem cor): fundo azul-claro,
     texto azul;
   - cores próprias das telas (success, warning, help, info): versão suave da mesma cor;
   - terciário (cz-ghost): só texto azul;
   - destrutivo (danger): contorno vermelho.
   Os contextos ficam em :where() para não somar especificidade e deixar o cz-slot-primary vencer. */
.cz-actions .ui-button,
.cz-drawer .ui-dialog-footer .ui-button,
.ui-confirm-dialog .ui-confirmdialog-buttonpane .ui-button,
.ui-confirm-dialog .ui-dialog-content .ui-button {
    height: 36px;
    padding: 0 14px;
    margin: 0 !important;
    white-space: nowrap;
}

.cz-actions .ui-button.ui-button-icon-only {
    width: 36px;
    padding: 0;
}

/* Secundário */
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-button.cz-neutral,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-button.ui-button-secondary,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-splitbutton:not([class*="ui-button-"]) > .ui-button,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-splitbutton.ui-button-secondary > .ui-button,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-menubutton:not([class*="ui-button-"]) > .ui-button,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-menubutton.ui-button-secondary > .ui-button,
html body .ui-button.cz-neutral,
html body .ui-menubutton.cz-neutral > .ui-button,
html body .ui-confirm-dialog .ui-button.ui-button-success,
html body .ui-confirm-dialog .ui-button.ui-button-secondary {
    background: var(--cz-sec-bg);
    border: 1px solid transparent;
    color: var(--cz-sec-ink);
}

html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-button.cz-neutral:enabled:hover,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-button.ui-button-secondary:enabled:hover,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-splitbutton:not([class*="ui-button-"]) > .ui-button:enabled:hover,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-splitbutton.ui-button-secondary > .ui-button:enabled:hover,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-menubutton:not([class*="ui-button-"]) > .ui-button:enabled:hover,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-menubutton.ui-button-secondary > .ui-button:enabled:hover,
html body .ui-button.cz-neutral:enabled:hover,
html body .ui-menubutton.cz-neutral > .ui-button:enabled:hover,
html body .ui-confirm-dialog .ui-button.ui-button-success:enabled:hover,
html body .ui-confirm-dialog .ui-button.ui-button-secondary:enabled:hover {
    background: var(--cz-sec-bg-hover);
    border-color: transparent;
    color: var(--cz-sec-ink);
}

/* Cores próprias das telas, em versão suave */
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-button.ui-button-success,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-splitbutton.ui-button-success > .ui-button,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-menubutton.ui-button-success > .ui-button {
    background: var(--cz-success-bg);
    border: 1px solid transparent;
    color: var(--cz-success-ink);
}

html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-button.ui-button-success:enabled:hover,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-splitbutton.ui-button-success > .ui-button:enabled:hover,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-menubutton.ui-button-success > .ui-button:enabled:hover {
    background: var(--cz-success-bg-hover);
    border-color: transparent;
    color: var(--cz-success-ink);
}

html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-button.ui-button-warning,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-splitbutton.ui-button-warning > .ui-button,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-menubutton.ui-button-warning > .ui-button {
    background: var(--cz-warning-bg);
    border: 1px solid transparent;
    color: var(--cz-warning-ink);
}

html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-button.ui-button-warning:enabled:hover,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-splitbutton.ui-button-warning > .ui-button:enabled:hover,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-menubutton.ui-button-warning > .ui-button:enabled:hover {
    background: var(--cz-warning-bg-hover);
    border-color: transparent;
    color: var(--cz-warning-ink);
}

html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-button.ui-button-help,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-splitbutton.ui-button-help > .ui-button,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-menubutton.ui-button-help > .ui-button {
    background: var(--cz-help-bg);
    border: 1px solid transparent;
    color: var(--cz-help-ink);
}

html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-button.ui-button-help:enabled:hover,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-splitbutton.ui-button-help > .ui-button:enabled:hover,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-menubutton.ui-button-help > .ui-button:enabled:hover {
    background: var(--cz-help-bg-hover);
    border-color: transparent;
    color: var(--cz-help-ink);
}

html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-button.ui-button-info,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-splitbutton.ui-button-info > .ui-button,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-menubutton.ui-button-info > .ui-button {
    background: var(--cz-info-bg);
    border: 1px solid transparent;
    color: var(--cz-info-ink);
}

html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-button.ui-button-info:enabled:hover,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-splitbutton.ui-button-info > .ui-button:enabled:hover,
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-menubutton.ui-button-info > .ui-button:enabled:hover {
    background: var(--cz-info-bg-hover);
    border-color: transparent;
    color: var(--cz-info-ink);
}

/* Terciário */
html body .ui-button.cz-ghost,
html body .ui-button.cz-ghost:enabled:hover {
    background: none;
    border-color: transparent;
    color: var(--cz-sec-ink);
}

html body .ui-button.cz-ghost:enabled:hover {
    background: var(--cz-sec-bg);
}

/* Destrutivo */
html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-button.ui-button-danger,
html body .ui-button.cz-danger-outline {
    background: var(--cz-surface);
    border: 1px solid color-mix(in srgb, var(--cz-bad) 45%, transparent);
    color: var(--cz-bad);
}

html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-button.ui-button-danger:enabled:hover,
html body .ui-button.cz-danger-outline:enabled:hover {
    background: var(--cz-bad-soft);
    border-color: var(--cz-bad);
    color: var(--cz-bad);
}

html body .ui-button.ui-button-danger:not(.cz-danger-outline),
html body .ui-confirm-dialog .ui-button.ui-button-danger {
    background: var(--cz-bad);
    border-color: var(--cz-bad);
    color: #fff;
}

html body :where(.cz-actions, .cz-drawer .ui-dialog-footer) .ui-button .ui-icon,
html body .ui-button.cz-neutral .ui-icon,
html body .ui-button.cz-ghost .ui-icon,
html body .ui-menubutton.cz-neutral > .ui-button .ui-icon {
    color: inherit !important;
}

/* Espaço da ação principal nos templates (<span class="cz-slot-primary">): o botão que a tela
   colocar ali fica com a cor principal, qualquer que seja a severidade definida na tela. */
.cz-actions > .cz-slot-primary,
.cz-actions > .cz-slot {
    display: contents;
}

html body .cz-actions .cz-slot-primary .ui-button,
html body .cz-actions .cz-slot-primary .ui-splitbutton > .ui-button,
html body .cz-actions .cz-slot-primary .ui-menubutton > .ui-button {
    background: var(--cz-primary);
    border: 1px solid var(--cz-primary);
    color: var(--cz-on-primary);
}

html body .cz-actions .cz-slot-primary .ui-button:enabled:hover,
html body .cz-actions .cz-slot-primary .ui-splitbutton > .ui-button:enabled:hover,
html body .cz-actions .cz-slot-primary .ui-menubutton > .ui-button:enabled:hover {
    background: var(--cz-primary-hover);
    border-color: var(--cz-primary-hover);
    color: var(--cz-on-primary);
}

/* Blocos que as telas colocam na barra de ações (ex.: <div style="margin-right: .5rem">) */
.cz-actions > div:not(.ui-splitbutton):not(.ui-menubutton):not(.ui-overlaypanel):not(.ui-menu):not(.ui-dialog) {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}

.cz-actions > div:not(.ui-splitbutton):not(.ui-menubutton):not(.ui-overlaypanel):not(.ui-menu):not(.ui-dialog):empty {
    display: none;
}


/* Botão dividido (p:splitButton) e botão de menu na barra de ações: botão e seta lado a lado */
.cz-actions .ui-splitbutton {
    display: inline-flex;
    align-items: stretch;
    position: relative;
    padding-right: 0;
    margin: 0 !important;
}

/* relative (não static): o ícone de cada botão é posicionado em relação ao próprio botão */
.cz-actions .ui-splitbutton > .ui-button {
    position: relative;
    height: 36px;
}

.cz-actions .ui-splitbutton > .ui-button:first-child {
    border-radius: var(--cz-r) 0 0 var(--cz-r);
}

html body .cz-actions .ui-splitbutton > .ui-button.ui-splitbutton-menubutton {
    position: relative;
    top: auto;
    right: auto;
    width: 32px !important;
    min-width: 32px;
    padding: 0;
    margin-left: -1px !important;
    border-radius: 0 var(--cz-r) var(--cz-r) 0;
}

.cz-actions .ui-menubutton {
    display: inline-flex;
    margin: 0 !important;
}

/* ======================================================================
   Campos
   ====================================================================== */
html body .ui-inputfield,
html body.ui-input-filled .ui-inputfield,
html body .ui-input-filled .ui-inputfield {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--cz-border-strong);
    border-radius: var(--cz-r);
    background: var(--cz-surface);
    color: var(--cz-ink) !important;
    font-family: var(--cz-font);
    font-size: 14px;
}

html body textarea.ui-inputfield,
html body.ui-input-filled textarea.ui-inputfield {
    padding: 8px 10px;
}

/* O PrimeFaces também usa ui-inputfield em elementos que não são <input>; o navegador só
   centraliza sozinho o texto de <input>, então estes recebem alinhamento próprio. */

/* Rótulos (p:selectOneMenu, p:cascadeSelect...) */
html body label.ui-inputfield,
html body span.ui-inputfield,
html body.ui-input-filled label.ui-inputfield,
html body.ui-input-filled span.ui-inputfield {
    display: block;
    padding: 8px 10px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Listas de itens (p:selectCheckboxMenu e p:autoComplete múltiplos, p:chips) */
html body ul.ui-inputfield,
html body div.ui-inputfield,
html body.ui-input-filled ul.ui-inputfield,
html body.ui-input-filled div.ui-inputfield {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 4px 8px;
    list-style: none;
    line-height: 20px;
}

/* No p:selectCheckboxMenu múltiplo a borda fica no conjunto, não na lista interna. */
html body .ui-selectcheckboxmenu-multiple ul.ui-inputfield,
html body.ui-input-filled .ui-selectcheckboxmenu-multiple ul.ui-inputfield {
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Botão de calendário do campo de data com a mesma altura do campo */
html body .ui-trigger-calendar .ui-datepicker-trigger.ui-button {
    height: 38px;
    border-radius: 0 var(--cz-r) var(--cz-r) 0;
}

html body .ui-calendar.ui-trigger-calendar input.hasDatepicker {
    border-radius: var(--cz-r) 0 0 var(--cz-r);
}

html body ul.ui-inputfield > li {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

html body ul.ui-inputfield > li input {
    min-height: 28px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: var(--cz-ink);
}

html body .ui-inputfield.ui-state-hover,
html body.ui-input-filled .ui-inputfield.ui-state-hover,
html body.ui-input-filled .ui-inputfield:enabled:hover {
    border-color: var(--cz-muted);
    background: var(--cz-surface);
}

html body .ui-inputfield.ui-state-focus,
html body.ui-input-filled .ui-inputfield.ui-state-focus,
html body.ui-input-filled .ui-inputfield:enabled:focus {
    border-color: var(--cz-primary);
    background: var(--cz-surface);
    box-shadow: 0 0 0 3px var(--cz-primary-soft);
}

html body .ui-inputfield.ui-state-error {
    border-color: var(--cz-bad);
}

html body .ui-selectonemenu,
html body.ui-input-filled .ui-selectonemenu,
html body .ui-selectcheckboxmenu,
html body.ui-input-filled .ui-selectcheckboxmenu,
html body .ui-autocomplete-multiple-container.ui-inputfield {
    border: 1px solid var(--cz-border-strong);
    border-radius: var(--cz-r);
    background: var(--cz-surface);
}

/* O rótulo interno do p:selectOneMenu também tem a classe ui-inputfield: sem borda própria,
   para não duplicar a borda da lista. */
html body .ui-selectonemenu .ui-selectonemenu-label,
html body.ui-input-filled .ui-selectonemenu .ui-selectonemenu-label,
html body .ui-selectonemenu .ui-selectonemenu-label.ui-inputfield,
html body.ui-input-filled .ui-selectonemenu .ui-selectonemenu-label.ui-inputfield {
    min-height: 36px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--cz-r) 0 0 var(--cz-r);
    background: transparent;
    box-shadow: none;
    color: var(--cz-ink) !important;
    line-height: 20px;
}

html body .ui-selectonemenu .ui-selectonemenu-trigger {
    background: transparent;
    border: 0;
    color: var(--cz-muted);
}

html body .ui-selectonemenu.ui-state-focus,
html body .ui-selectcheckboxmenu.ui-state-focus {
    border-color: var(--cz-primary);
    box-shadow: 0 0 0 3px var(--cz-primary-soft);
}

html body .ui-outputlabel,
html body label.ui-outputlabel {
    font-size: 13px;
    font-weight: 700;
    color: var(--cz-ink-2);
}

html body .ui-outputlabel.required::after,
html body .ui-outputlabel .ui-outputlabel-rfi {
    color: var(--cz-bad);
}

/* ======================================================================
   Cartões e painéis
   ====================================================================== */
.citius-shell .card {
    background: var(--cz-surface);
    border: 1px solid var(--cz-border);
    border-radius: 10px;
    box-shadow: var(--cz-card-shadow);
    color: var(--cz-ink);
}

.citius-shell .card.cz-card-flush {
    padding: 0 !important;
    overflow: hidden;
}

/* ======================================================================
   Tabelas
   ====================================================================== */
html body .ui-datatable .ui-datatable-header {
    background: var(--cz-table-bar) !important;
    color: var(--cz-ink) !important;
    border: 0;
    border-bottom: 1px solid var(--cz-border);
    padding: 12px;
}

html body .ui-datatable thead th,
html body .ui-datatable.ui-datatable-gridlines thead > tr > th,
html body .ui-datatable.ui-datatable-sm thead > tr > th {
    background: var(--cz-thead-bg) !important;
    color: var(--cz-thead-ink) !important;
    font-size: 13px;
    font-weight: 700;
    padding: 11px 12px;
    border: 0;
    border-bottom: 1px solid var(--cz-thead-line);
    white-space: nowrap;
}

html body .ui-datatable thead th .ui-commandlink,
html body .ui-datatable thead th .ui-link,
html body th .ui-commandlink,
html body th .ui-link {
    color: inherit !important;
}

html body .ui-datatable thead th.ui-state-active,
html body .ui-datatable thead th.ui-sortable-column.ui-state-active {
    color: var(--cz-primary) !important;
}

html body .ui-datatable thead th .ui-sortable-column-icon {
    color: inherit;
    font-size: 11px;
}

html body .ui-datatable .ui-datatable-data > tr > td,
html body .ui-datatable.ui-datatable-gridlines .ui-datatable-data > tr > td {
    border: 0;
    border-bottom: 1px solid var(--cz-border);
    padding: 10px 12px;
    color: var(--cz-ink);
    vertical-align: middle;
}

html body .ui-datatable.ui-datatable-sm .ui-datatable-data > tr > td {
    padding: 6px 6px !important;
}

/* Cabeçalho da tabela compacta com o mesmo recuo lateral das células, para o título alinhar com o conteúdo */
html body .ui-datatable.ui-datatable-sm thead > tr > th {
    padding: 9px 6px;
}

html body .ui-datatable .ui-datatable-data > tr {
    background: var(--cz-surface);
    color: var(--cz-ink);
}

html body .ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-odd {
    background: var(--cz-row-alt) !important;
}

html body .ui-datatable .ui-datatable-data > tr.ui-state-hover,
html body .ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-state-hover,
html body .ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-odd.ui-state-hover,
html body .ui-datatable .ui-datatable-data > tr:hover {
    background: var(--cz-row-hover) !important;
}

/* marca azul à esquerda da linha sob o mouse */
html body .ui-datatable .ui-datatable-data > tr:hover > td:first-child,
html body .ui-datatable .ui-datatable-data > tr.ui-state-hover > td:first-child,
html body .ui-datatable .ui-datatable-data > tr.ui-state-highlight > td:first-child {
    box-shadow: inset 3px 0 0 var(--cz-primary);
}

html body .ui-datatable .ui-datatable-data > tr.ui-state-highlight {
    background: var(--cz-primary-soft) !important;
    color: var(--cz-ink) !important;
}

html body .ui-datatable .ui-datatable-data > tr.ui-datatable-empty-message > td {
    padding: 48px 16px;
    text-align: center;
    color: var(--cz-muted);
}

html body .ui-datatable table {
    font-variant-numeric: tabular-nums;
}

/* Busca no cabeçalho da tabela (crud-table-header) */
.cz-table-search,
html body .crud-table-header .filter-container {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    height: 36px;
    flex: 1 1 240px;
    max-width: 360px;
}

html body .crud-table-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

html body .crud-table-header .filter-container .pi-search {
    position: absolute;
    left: 10px;
    color: var(--cz-muted);
    z-index: 1;
}

html body .crud-table-header .filter-container .ui-inputfield {
    width: 100%;
    padding-left: 34px;
}

/* Paginação: "1–25 de 100" à esquerda, páginas à direita */
html body .ui-paginator,
html body .ui-datatable .ui-paginator {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 12px !important;
    background: var(--cz-table-bar);
    border: 0;
    border-top: 1px solid var(--cz-border);
    color: var(--cz-muted);
    font-size: 13px;
}

html body .ui-paginator .ui-paginator-current {
    margin-right: auto;
    font-weight: 600 !important;
    color: var(--cz-muted);
    background: none;
}

html body .ui-paginator .ui-paginator-pages {
    display: inline-flex;
    gap: 4px;
    font-weight: 700 !important;
}

html body .ui-paginator .ui-paginator-pages .ui-paginator-page,
html body .ui-paginator .ui-paginator-first,
html body .ui-paginator .ui-paginator-prev,
html body .ui-paginator .ui-paginator-next,
html body .ui-paginator .ui-paginator-last {
    min-width: 32px;
    height: 32px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--cz-r-sm);
    background: none;
    color: var(--cz-ink-2);
    font-weight: 700 !important;
}

html body .ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-hover,
html body .ui-paginator .ui-paginator-first.ui-state-hover,
html body .ui-paginator .ui-paginator-prev.ui-state-hover,
html body .ui-paginator .ui-paginator-next.ui-state-hover,
html body .ui-paginator .ui-paginator-last.ui-state-hover {
    background: var(--cz-sunken);
    border-color: transparent;
    color: var(--cz-ink);
}

html body .ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-active {
    background: var(--cz-primary-soft);
    border-color: transparent;
    color: var(--cz-primary);
}

html body .ui-paginator .ui-state-disabled {
    opacity: .35;
}

html body .ui-paginator .ui-paginator-rpp-options {
    margin-left: 8px;
    min-height: 32px;
    height: 32px;
}

/* Menus sobrepostos (botão de menu, menu do usuário, botão dividido) */
html body .ui-menu.ui-menubutton-menu,
html body .ui-menu.ui-tieredmenu,
html body .ui-splitbuttonmenu {
    padding: 6px;
    border: 1px solid var(--cz-border);
    border-radius: var(--cz-r);
    background: var(--cz-surface);
    box-shadow: var(--cz-shadow-lg);
}

html body .ui-menu.ui-menubutton-menu .ui-menuitem-link,
html body .ui-menu.ui-tieredmenu .ui-menuitem-link {
    border-radius: var(--cz-r-sm);
    font-weight: 600;
    color: var(--cz-ink);
}

html body .ui-menu .ui-menuitem.cz-menu-danger .ui-menuitem-link,
html body .ui-menu .ui-menuitem.cz-menu-danger .ui-menuitem-link .ui-menuitem-icon,
html body .ui-menu .ui-menuitem-link.cz-menu-danger,
html body .ui-menu .ui-menuitem-link.cz-menu-danger .ui-menuitem-icon {
    color: var(--cz-bad) !important;
}

/* ======================================================================
   Diálogos e painel lateral de cadastro
   ====================================================================== */
html body .ui-dialog {
    border: 0;
    border-radius: var(--cz-r-lg);
    background: var(--cz-surface);
    box-shadow: var(--cz-shadow-lg);
    overflow: hidden;
}

html body .ui-dialog .ui-dialog-titlebar,
html body .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-icon {
    color: var(--cz-ink) !important;
}

html body .ui-dialog .ui-dialog-titlebar {
    background: var(--cz-surface) !important;
    background-image: none !important;
    border: 0;
    border-bottom: 1px solid var(--cz-border);
    padding: 16px 20px;
}

html body .ui-dialog .ui-dialog-titlebar .ui-dialog-title {
    font-size: 17px;
    font-weight: 800;
}

html body .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--cz-r);
}

html body .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-icon:hover {
    background: var(--cz-sunken);
}

html body .ui-dialog .ui-dialog-content {
    background: var(--cz-surface);
    color: var(--cz-ink);
    padding: 20px;
}

html body .ui-dialog .ui-dialog-footer {
    background: var(--cz-surface-2);
    border-top: 1px solid var(--cz-border);
    padding: 12px 20px;
    text-align: right;
}

html body .ui-dialog .ui-dialog-footer .ui-button {
    margin: 0 0 0 8px;
}

/* Diálogo de espera e busca de telas mantêm a aparência própria */
html body .ui-dialog.loader,
html body .ui-dialog.spotlight {
    box-shadow: none;
    background: transparent;
}

html body .ui-widget-overlay {
    background: var(--cz-scrim);
}

/* p:dialog styleClass="cz-drawer": painel à direita, altura total. O p:dialog mostra e
   esconde com display inline e marca aria-hidden="false" enquanto aberto. */
html body .ui-dialog.cz-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    /* Mesma largura útil do diálogo antigo (até 1000px de conteúdo), deixando uma faixa da
       lista à vista. Telas específicas podem pedir outra largura com larguraCadastro. */
    width: var(--cz-drawer-w, min(1048px, calc(100vw - 48px))) !important;
    max-width: 100vw;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0;
    border-radius: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

html body .ui-dialog.cz-drawer[aria-hidden="false"] {
    display: flex !important;
    flex-direction: column;
    animation: cz-drawer-in .25s cubic-bezier(.2, .8, .2, 1);
}

html body .ui-dialog.cz-drawer > .ui-dialog-titlebar {
    flex: 0 0 auto;
    padding: 18px 24px;
}

html body .ui-dialog.cz-drawer > .ui-dialog-titlebar .ui-dialog-title {
    font-size: 18px;
}

html body .ui-dialog.cz-drawer > .ui-dialog-content {
    flex: 1 1 auto;
    height: auto !important;
    max-height: none !important;
    overflow: auto;
    padding: 20px 24px;
}

html body .ui-dialog.cz-drawer > .ui-dialog-footer {
    flex: 0 0 auto;
    padding: 14px 24px;
}

/* O PrimeFaces 15 envolve o conteúdo do rodapé num <div> sem classe:
   <div class="ui-dialog-footer"><div>…botões…</div></div>. O espaçamento vai nesse div. */
html body .ui-dialog.cz-drawer > .ui-dialog-footer > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

html body .ui-dialog.cz-drawer > .ui-dialog-footer .ui-button {
    margin: 0;
}

.cz-drawer .cz-meta {
    margin-right: auto;
    color: var(--cz-bad);
    font-size: 12px;
    font-weight: 600;
}

.cz-drawer .cz-drawer-body {
    border: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    background: none;
}

.cz-drawer .cz-drawer-body > .ui-panel-content {
    padding: 0;
    background: none;
}

@media screen and (max-width: 560px) {
    html body .ui-dialog.cz-drawer {
        width: 100vw !important;
    }

    html body .ui-dialog.cz-drawer > .ui-dialog-titlebar,
    html body .ui-dialog.cz-drawer > .ui-dialog-content,
    html body .ui-dialog.cz-drawer > .ui-dialog-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .cz-drawer .cz-meta {
        display: none;
    }
}

/* Seções dentro do cadastro, para as telas que quiserem agrupar campos */
.cz-section + .cz-section {
    margin-top: 24px;
}

.cz-section > h3 {
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--cz-muted);
}

.cz-section > h3::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--cz-border);
}

@keyframes cz-drawer-in {
    from {
        transform: translateX(100%);
    }
}

/* ======================================================================
   Abas (p:tabView)
   Ativa na cor do menu com texto branco; inativas neutras. As abas com cor própria nas
   telas (customCCB, customProtheus...) têm seletores mais específicos e continuam valendo.
   ====================================================================== */
html body .ui-tabs .ui-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 2px solid var(--cz-tab-active-bg);
}

html body .ui-tabs .ui-tabs-nav li.ui-tabs-header {
    margin: 0;
    padding: 0 !important;
    background: var(--cz-surface-2) !important;
    border: 1px solid var(--cz-border) !important;
    border-bottom: 0 !important;
    border-radius: var(--cz-r) var(--cz-r) 0 0;
    box-shadow: none !important;
}

html body .ui-tabs .ui-tabs-nav li.ui-tabs-header a {
    display: block;
    padding: 8px 14px;
    margin: 0;
    color: var(--cz-ink-2) !important;
    font-weight: 700;
    background: none;
    border: 0;
}

html body .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-hover {
    background: var(--cz-sunken) !important;
}

html body .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-hover a {
    color: var(--cz-ink) !important;
}

html body .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-active,
html body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-header.ui-state-active {
    background: var(--cz-tab-active-bg) !important;
    border-color: var(--cz-tab-active-bg) !important;
}

html body .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-active a,
html body .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-active .ui-icon {
    color: var(--cz-tab-active-ink) !important;
}

html body .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-focus a {
    outline: 2px solid var(--cz-primary);
    outline-offset: -2px;
    box-shadow: none;
}

html body .ui-tabs .ui-tabs-panels {
    background: none;
    border: 0;
    color: var(--cz-ink);
}

/* ======================================================================
   Mensagens rápidas (p:growl)
   ====================================================================== */
html body .ui-growl .ui-growl-item-container {
    border: 0;
    border-radius: var(--cz-r);
    box-shadow: var(--cz-shadow-lg);
}

/* ======================================================================
   Selos de situação (cz-chip)
   ====================================================================== */
.cz-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.cz-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.cz-chip small {
    margin-right: 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--cz-muted);
}

.cz-chip--ok { background: var(--cz-ok-soft); color: var(--cz-ok); }
.cz-chip--warn { background: var(--cz-warn-soft); color: var(--cz-warn); }
.cz-chip--bad { background: var(--cz-bad-soft); color: var(--cz-bad); }
.cz-chip--info { background: var(--cz-info-soft); color: var(--cz-info); }
.cz-chip--neutral { background: var(--cz-neutral-soft); color: var(--cz-ink-2); }
/* Estado com cor vinda do cadastro (ex.: estado de aprovação do prospect) */
/* Estado com a cor do cadastro: ponto na cor exata, fundo e borda tingidos, texto legível nos dois temas */
.cz-chip--estado {
    background: color-mix(in srgb, var(--cz-estado) 16%, var(--cz-surface));
    border: 1px solid color-mix(in srgb, var(--cz-estado) 45%, transparent);
    color: var(--cz-ink);
}
.cz-chip--estado::before { background: var(--cz-estado); }
.cz-chip--estado:empty { display: none; }

/* Subtítulo do cabeçalho com nome e selos lado a lado */
.cz-page-head .cz-sub:has(.cz-chip) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

/* ======================================================================
   Esqueleto de carregamento com a estrutura das telas (sistema interno e Agência Virtual)
   Peças em WEB-INF/templates/skeleton/*.xhtml
   ====================================================================== */
.cz-sk {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cz-sk-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.cz-sk-grow {
    flex: 1 1 auto;
}

/* peça alinhada à direita numa grade (ex.: valor de um par rótulo e valor alinhado à direita) */
html body .cz-sk-direita {
    justify-self: end;
}

.cz-sk-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cz-sk-card {
    background: var(--cz-surface);
    border: 1px solid var(--cz-border);
    border-radius: var(--cz-r-lg);
    padding: 14px 16px;
    min-width: 0;
}

.cz-sk-card.cz-sk-flush {
    padding: 0;
    overflow: hidden;
}

.cz-sk-pad {
    padding: 14px 16px;
}

.cz-sk-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.cz-sk-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    align-items: end;
}

.cz-sk-kpis {
    display: grid;
    grid-template-columns: repeat(var(--cz-sk-kpis, 4), minmax(0, 1fr));
    gap: 16px;
}

/* Mesma divisão da tela: coluna de barras à esquerda e lista à direita */
.cz-sk-split {
    display: grid;
    grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.cz-sk-split--op {
    grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
}

.cz-sk-par {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Botões em pílula acima de uma lista (ex.: situações da lista de trocas de titularidade) */
.cz-sk-pilulas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Filas de trabalho (cz-pnl-filas): número, título e legenda, link */
.cz-sk-filas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 10px;
}

.cz-sk-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--cz-r);
    background: var(--cz-surface-2);
}

.cz-sk-barra {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.cz-sk-thead {
    padding: 10px 16px;
    background: var(--cz-thead-bg);
}

.cz-sk-linha {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    border-top: 1px solid var(--cz-border);
}

.cz-sk-colunas {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
    gap: 10px;
    padding-top: 8px;
    border-bottom: 1px solid var(--cz-border);
}

/* Visão geral do contrato: coluna principal e lateral, como a tela */
.cz-sk-vg {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 16px;
    align-items: start;
}

.cz-sk-barras {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 160px;
    padding-top: 8px;
}

@media (max-width: 1200px) {
    .cz-sk-vg {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cz-sk-abas {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 4px 4px 10px;
    border-bottom: 1px solid var(--cz-border);
}

.cz-sk-etapas {
    display: grid;
    grid-template-columns: repeat(var(--cz-sk-etapas, 4), minmax(0, 1fr));
    gap: 12px;
    margin: 6px 0 12px;
}

.cz-sk-etapa {
    padding: 10px 12px;
    border: 1px solid var(--cz-border);
    border-radius: var(--cz-r);
}

.cz-sk-fluxo-motivos {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--cz-border);
}

@media (max-width: 1100px) {
    /* colunas secundárias de uma linha de tabela: somem em tela estreita, como no reflow da tabela */
    html body .cz-sk-so-largo {
        display: none;
    }

    .cz-sk-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cz-sk-split,
    .cz-sk-split--op,
    .cz-sk-par {
        grid-template-columns: minmax(0, 1fr);
    }

    .cz-sk-etapas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .cz-sk-kpis {
        grid-template-columns: minmax(0, 1fr);
    }

    .cz-sk-barra {
        grid-template-columns: 110px minmax(0, 1fr) 28px;
    }
}

/* Peças de esqueleto para listas e formulários */
.cz-sk-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

html body .ui-skeleton.cz-sk-primario {
    background: color-mix(in srgb, var(--cz-primary) 22%, var(--cz-sunken));
}

.cz-sk-atalhos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    padding: 14px var(--cz-gutter, 16px);
    border-bottom: 1px solid var(--cz-border);
}

.cz-sk-grupo {
    display: flex;
    align-items: center;
    gap: 8px;
}

html body .ui-skeleton.cz-sk-busca {
    margin-left: auto;
    max-width: 100%;
}

.cz-sk-rodape {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--cz-border);
}

.cz-sk-campos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: 14px 16px;
}

/* Contrato: menu de abas agrupadas à esquerda e seção à direita */
.cz-sk-lateral {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* Aba EVTE do prospect (skeleton/evte.xhtml) */
.cz-sk-evte-trilha {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.cz-sk-evte-passo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.cz-sk-evte-cab {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cz-border);
}

.cz-sk-evte-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cz-sk-evte-kv {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 16px;
}

.cz-sk-evte-kpi {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: .6rem .9rem;
    border: 1px solid var(--cz-border);
    border-radius: 10px;
    background: var(--cz-surface-2);
}

html body .ui-skeleton.cz-sk-evte-dir {
    align-self: flex-end;
}

.cz-sk-evte-grupos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 28px;
}

.cz-sk-evte-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px solid var(--cz-border);
}

.cz-sk-evte-dre {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

@media (max-width: 900px) {
    .cz-sk-evte-trilha,
    .cz-sk-evte-grupos,
    .cz-sk-evte-dre {
        grid-template-columns: minmax(0, 1fr);
    }
}

html body .ui-skeleton.cz-sk-rotulo {
    margin-top: 6px;
}

@media (max-width: 900px) {
    .cz-sk-lateral {
        grid-template-columns: minmax(0, 1fr);
    }
}