/* ============================================================
   sl-ds.css - Design System SL (Fase 0: fundacao)

   Tokens (--sl-*) e componentes (.sl-*) extraidos do Dashboard.
   Carregado em app.xhtml depois de default.css, com ?v=versao.

   Temas: claro (padrao) e escuro, via html[data-sl-tema]. A cor primaria
   escolhida pelo usuario e' aplicada por sl-tema.js, que sobrescreve
   --sl-primary, --sl-primary-hover, --sl-primary-soft e --sl-on-primary.

   Regras de uso:
   - Classes .sl-* sao opt-in: nada aqui altera telas que nao as usam.
   - Cor, raio, espacamento e fonte vem dos tokens; nao repetir literal.
   - Os valores dos tokens abaixo reproduzem o Dashboard atual;
     o bloco "Reservado" so vale a partir das fases 1-3.
   ============================================================ */

:root {
    /* Cores - marca e texto */
    --sl-primary: #0056B8;
    --sl-primary-hover: #00479a;
    --sl-primary-soft: #e6eefa;
    --sl-on-primary: #ffffff;
    --sl-navy: #003366;
    --sl-heading: #3C5582;
    --sl-text: #333333;
    --sl-muted: #777777;
    --sl-muted-label: #8a8a8a;

    /* Cores - superficies e linhas */
    --sl-bg: #f5f4f4;
    --sl-surface: #ffffff;
    --sl-surface-alt: #fafafa;
    --sl-border: #e2e2e2;
    --sl-track: #eef1f5;
    --sl-chart-paper: #ffffff;

    /* Cores - estados */
    --sl-success: #2E7D32;
    --sl-danger: #C0392B;
    --sl-warning: #DB8532;
    --sl-info: #375671;

    /* Forma e ritmo */
    --sl-radius: 8px;
    --sl-radius-pill: 7px;
    --sl-space-1: 4px;
    --sl-space-2: 8px;
    --sl-space-3: 12px;
    --sl-space-4: 14px;
    --sl-space-5: 18px;

    /* Tipografia */
    --sl-font: Arial, Helvetica, sans-serif;
    --sl-fs-xs: 11px;
    --sl-fs-sm: 12px;
    --sl-fs-md: 13px;
    --sl-fs-kpi: 24px;

    /* Reservado (fases 2-3: campos, botoes, obrigatorio) - ainda sem uso */
    --sl-field-h: 40px;
    --sl-field-r: 10px;
    --sl-field-border: #b7c3d1;
    --sl-field-ring: 3.5px;
    --sl-required-glow: rgba(220, 38, 38, .55);

    /* Fase 1 - casca */
    --sl-header-bg: #003366;
    --sl-header-fg: #ffffff;
    --sl-ctl-h: 36px;
    --sl-ctl-r: 10px;
    --sl-form-h: 52px;
    --sl-label-w: clamp(150px, 15vw, 200px);
    --sl-form-gap: 8px;
    --sl-success-soft: #e5f3e6;
    --sl-danger-soft: #fdeceb;
    --sl-warning-soft: #fff1de;
    --sl-info-soft: #e9f0f6;
}
html[data-sl-densidade="compacta"] {
    --sl-ctl-h: 30px;
    --sl-ctl-r: 8px;
    --sl-form-h: 40px;
    --sl-label-w: clamp(130px, 13vw, 170px);
}

/* ---------- Tema escuro ---------- */
html[data-sl-tema="dark"] {
    color-scheme: dark;
    --sl-primary: #5b9cf0;
    --sl-primary-hover: #7db0f5;
    --sl-primary-soft: #1b2c44;
    --sl-on-primary: #08121f;
    --sl-navy: #dce8fa;
    --sl-heading: #9db5dc;
    --sl-text: #e8edf3;
    --sl-muted: #92a1b2;
    --sl-muted-label: #92a1b2;
    --sl-bg: #0f151c;
    --sl-surface: #18202a;
    --sl-surface-alt: #1e2833;
    --sl-border: #2b3745;
    --sl-track: #2b3745;
    --sl-success: #6cc070;
    --sl-danger: #ff6f64;
    --sl-warning: #f0a24d;
    --sl-info: #8fb2cf;
    --sl-field-border: #43536a;
    --sl-required-glow: rgba(255, 99, 90, .7);
    --sl-header-bg: #1e2833;
    --sl-header-fg: #e8edf3;
    --sl-success-soft: #16301a;
    --sl-danger-soft: #38191a;
    --sl-warning-soft: #34250f;
    --sl-info-soft: #1b2b38;
}
html[data-sl-tema="dark"] .sl-page {
    background: var(--sl-bg);
    color: var(--sl-text);
    padding: var(--sl-space-2);
    border-radius: var(--sl-radius);
}
html[data-sl-tema="dark"] .sl-chart {
    background: var(--sl-chart-paper);
    border-radius: var(--sl-radius);
    padding: var(--sl-space-3);
}

/* ---------- Layout ---------- */
.sl-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sl-space-3);
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.sl-toolbar .ui-selectonebutton .ui-button {
    font-size: var(--sl-fs-xs);
    font-family: var(--sl-font);
}

.sl-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sl-space-4);
    margin-top: var(--sl-space-2);
    align-items: stretch;
}

/* ---------- Card e KPI ---------- */
.sl-card {
    flex: 1 1 210px;
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius);
    padding: var(--sl-space-4) 16px;
    box-sizing: border-box;
}
a.sl-card {
    text-decoration: none;
    cursor: pointer;
}
a.sl-card:hover {
    border-color: var(--sl-primary);
}
.sl-card.sl-card-mini {
    flex-basis: 140px;
}
.sl-card--accent {
    border-left: 4px solid var(--sl-primary);
}
.sl-card-label {
    font-size: var(--sl-fs-xs);
    color: var(--sl-muted-label);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sl-card-value {
    font-size: var(--sl-fs-kpi);
    font-weight: bold;
    color: var(--sl-navy);
    font-family: var(--sl-font);
    margin-top: var(--sl-space-1);
    font-variant-numeric: tabular-nums;
}
.sl-card-hint {
    font-size: var(--sl-fs-xs);
    color: var(--sl-muted);
    margin-top: 5px;
}
.sl-pos {
    color: var(--sl-success);
    font-weight: bold;
}
.sl-neg {
    color: var(--sl-danger);
    font-weight: bold;
}

/* ---------- Secao ---------- */
.sl-section {
    margin-top: var(--sl-space-5);
    font-size: var(--sl-fs-sm);
    font-weight: bold;
    color: var(--sl-heading);
    font-family: var(--sl-font);
    border-bottom: 1px solid var(--sl-border);
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.sl-section-aside {
    font-weight: normal;
    color: var(--sl-danger);
}
.sl-chart {
    margin-top: var(--sl-space-3);
}
.sl-empty {
    font-size: var(--sl-fs-sm);
    color: var(--sl-muted);
    font-style: italic;
    padding: var(--sl-space-4) 0;
}

/* ---------- Barras de proporcao ---------- */
.sl-bars {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 10px;
}
.sl-bar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--sl-fs-sm);
    font-family: var(--sl-font);
}
.sl-bar-name {
    flex: 0 0 180px;
    color: var(--sl-heading);
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sl-bar-track {
    flex: 1;
    height: 14px;
    background: var(--sl-track);
    border-radius: var(--sl-radius-pill);
    overflow: hidden;
    min-width: 60px;
}
.sl-bar-track span {
    display: block;
    height: 100%;
    background: var(--sl-primary);
    border-radius: var(--sl-radius-pill);
}
.sl-bar-value {
    flex: 0 0 130px;
    text-align: right;
    color: var(--sl-text);
    font-variant-numeric: tabular-nums;
}

/* ---------- Alertas ---------- */
.sl-alerts {
    display: flex;
    flex-direction: column;
    gap: var(--sl-space-2);
    margin-top: 10px;
}
.sl-alert {
    display: flex;
    align-items: center;
    gap: var(--sl-space-3);
    padding: 10px var(--sl-space-3);
    border-radius: var(--sl-radius);
    border: 1px solid var(--sl-border);
    background: var(--sl-surface-alt);
}
.sl-alert--critical {
    border-left: 4px solid var(--sl-danger);
}
.sl-alert--warning {
    border-left: 4px solid var(--sl-warning);
}
.sl-alert--info {
    border-left: 4px solid var(--sl-info);
}
.sl-alert-body {
    flex: 1;
    min-width: 0;
}
.sl-alert-title {
    font-size: var(--sl-fs-md);
    font-weight: bold;
    color: var(--sl-heading);
    font-family: var(--sl-font);
}
.sl-alert-detail {
    font-size: var(--sl-fs-xs);
    color: var(--sl-muted);
    margin-top: 2px;
}

@media (max-width: 640px) {
    .sl-bar-name {
        flex: 0 0 110px;
    }
    .sl-bar-value {
        flex: 0 0 100px;
    }
}

/* ---------- Painel Aparencia (criado por sl-tema.js) ---------- */
.sl-tema-painel {
    position: fixed;
    top: 56px;
    right: 16px;
    z-index: 100000;
    width: 300px;
    max-width: calc(100vw - 32px);
    background: var(--sl-surface);
    color: var(--sl-text);
    border: 1px solid var(--sl-border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(16, 32, 56, .28);
    padding: 16px;
    font-family: var(--sl-font);
    font-size: var(--sl-fs-md);
    box-sizing: border-box;
}
.sl-tema-painel[hidden] {
    display: none;
}
.sl-tema-painel h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--sl-heading);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sl-tema-painel h5 {
    margin: 14px 0 8px 0;
    font-size: var(--sl-fs-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sl-muted-label);
}
.sl-tema-esquemas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.sl-tema-opcao {
    border: 2px solid var(--sl-border);
    border-radius: 10px;
    background: var(--sl-surface-alt);
    padding: 8px;
    cursor: pointer;
    text-align: center;
    font: inherit;
    color: var(--sl-text);
}
.sl-tema-opcao[aria-pressed="true"] {
    border-color: var(--sl-primary);
    box-shadow: 0 0 0 3px var(--sl-primary-soft);
}
.sl-tema-opcao:focus-visible,
.sl-tema-cor:focus-visible,
.sl-tema-fechar:focus-visible,
.sl-tema-restaurar:focus-visible {
    outline: 2px solid var(--sl-primary);
    outline-offset: 2px;
}
.sl-tema-mini {
    display: block;
    height: 44px;
    border-radius: 6px;
    margin-bottom: 6px;
    border: 1px solid rgba(128, 128, 128, .35);
    position: relative;
}
.sl-tema-mini i {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 7px;
    border-radius: 4px;
}
.sl-tema-mini--claro {
    background: #f5f4f4;
}
.sl-tema-mini--claro i:first-child {
    top: 9px;
    background: #ffffff;
    height: 14px;
}
.sl-tema-mini--claro i:last-child {
    top: 29px;
    background: #0056B8;
    width: 40%;
    right: auto;
}
.sl-tema-mini--escuro {
    background: #0f151c;
}
.sl-tema-mini--escuro i:first-child {
    top: 9px;
    background: #18202a;
    height: 14px;
}
.sl-tema-mini--escuro i:last-child {
    top: 29px;
    background: #5b9cf0;
    width: 40%;
    right: auto;
}
.sl-tema-cores {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.sl-tema-cor {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--sl-surface);
    box-shadow: 0 0 0 1.5px var(--sl-border);
    cursor: pointer;
    padding: 0;
}
.sl-tema-cor[aria-pressed="true"] {
    box-shadow: 0 0 0 2.5px var(--sl-primary);
}
.sl-tema-livre {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: var(--sl-fs-sm);
    color: var(--sl-muted);
}
.sl-tema-livre input[type="color"] {
    width: 34px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--sl-border);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}
.sl-tema-amostra {
    margin-top: 14px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.sl-tema-amostra .btn {
    background: var(--sl-primary);
    color: var(--sl-on-primary);
    border-radius: 8px;
    padding: 6px 12px;
    font-weight: bold;
    font-size: var(--sl-fs-sm);
}
.sl-tema-amostra .nota {
    font-size: var(--sl-fs-xs);
    color: var(--sl-muted);
}
.sl-tema-rodape {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
}
.sl-tema-restaurar,
.sl-tema-fechar {
    background: transparent;
    border: 1px solid var(--sl-border);
    color: var(--sl-heading);
    border-radius: 8px;
    padding: 5px 12px;
    cursor: pointer;
    font: inherit;
    font-size: var(--sl-fs-sm);
}
.sl-tema-fechar {
    border: 0;
    font-size: 16px;
    padding: 2px 8px;
}

/* ============================================================
   Fase 1 - casca (so' com html[data-sl-visual="novo"])
   Dialogo das telas, botoes, notificacoes. Icones: sl-icones.css.
   ============================================================ */
html[data-sl-visual="novo"] .ui-dialog.ui-widget {
    border-radius: 14px !important;
    box-shadow: 0 0 0 1px rgba(16, 32, 56, .12), 0 2px 6px rgba(16, 32, 56, .16), 0 14px 40px rgba(16, 32, 56, .32), 0 0 26px 2px rgba(16, 32, 56, .14), inset 0 0 34px rgba(16, 32, 56, .2) !important;
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
    html[data-sl-visual="novo"] .ui-dialog.ui-widget {
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--sl-primary) 45%, transparent), 0 2px 6px rgba(16, 32, 56, .16), 0 14px 40px rgba(16, 32, 56, .32), 0 0 40px 6px color-mix(in srgb, var(--sl-primary) 50%, transparent), inset 0 0 40px 2px color-mix(in srgb, var(--sl-primary) 34%, transparent) !important;
    }
}
html[data-sl-visual="novo"] .ui-dialog.ui-widget::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 3px;
    background: linear-gradient(135deg, var(--sl-primary) 0%, transparent 45%, transparent 55%, var(--sl-primary-hover) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: .95;
    pointer-events: none;
    z-index: 1;
}
html[data-sl-visual="novo"] .ui-dialog.ui-widget .ui-dialog-titlebar {
    border-radius: 14px 14px 0 0 !important;
}
html[data-sl-visual="novo"] .ui-dialog.ui-widget .ui-dialog-content {
    border-radius: 0 0 14px 14px;
}
html[data-sl-visual="novo"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    border-radius: 14px;
    padding: 3px;
    background: linear-gradient(135deg, var(--sl-primary) 0%, transparent 45%, transparent 55%, var(--sl-primary-hover) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: .95;
    pointer-events: none;
    z-index: 900;
}
html[data-sl-visual="novo"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    border-radius: 14px;
    box-shadow: inset 0 0 34px rgba(16, 32, 56, .2);
    pointer-events: none;
    z-index: 900;
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
    html[data-sl-visual="novo"] body::before {
        box-shadow: inset 0 0 40px 2px color-mix(in srgb, var(--sl-primary) 34%, transparent);
    }
}
html[data-sl-visual="novo"] .ui-dialog2.ui-dialog {
    background: var(--sl-bg) !important;
    border: 1px solid var(--sl-border) !important;
    border-radius: 14px !important;
}
html[data-sl-visual="novo"] .ui-dialog2 .ui-dialog-titlebar {
    background: var(--sl-header-bg) !important;
    color: var(--sl-header-fg) !important;
    border: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 12px 20px !important;
}
html[data-sl-visual="novo"] .ui-dialog2 .ui-dialog-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
}
html[data-sl-visual="novo"] .ui-dialog2 .ui-dialog-titlebar-icon {
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
}
html[data-sl-visual="novo"] .ui-dialog2 .ui-dialog-titlebar-icon:hover {
    background: rgba(255, 255, 255, .18) !important;
}
html[data-sl-visual="novo"] .ui-dialog2 .ui-dialog-content {
    background: var(--sl-bg) !important;
    color: var(--sl-text);
    padding: 12px 14px !important;
}

html[data-sl-visual="novo"] .ui-button {
    background: var(--sl-surface) !important;
    background-image: none !important;
    border: 1.5px solid var(--sl-field-border) !important;
    border-radius: var(--sl-ctl-r) !important;
    color: var(--sl-heading) !important;
    min-height: var(--sl-ctl-h);
    font-family: var(--sl-font);
    font-size: var(--sl-fs-md) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: background .15s, border-color .15s, color .15s;
}
html[data-sl-visual="novo"] .ui-button .ui-button-text {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}
html[data-sl-visual="novo"] .ui-button:enabled:hover,
html[data-sl-visual="novo"] .ui-button.ui-state-hover,
html[data-sl-visual="novo"] .ui-button:enabled:active,
html[data-sl-visual="novo"] .ui-button.ui-state-active {
    background: var(--sl-primary-soft) !important;
    border-color: var(--sl-primary) !important;
    color: var(--sl-primary) !important;
}
html[data-sl-visual="novo"] .ui-button:focus-visible,
html[data-sl-visual="novo"] .ui-button.ui-state-focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--sl-primary-soft), 0 0 0 4.5px var(--sl-primary) !important;
}
html[data-sl-visual="novo"] .ui-button.ui-state-disabled,
html[data-sl-visual="novo"] .ui-button:disabled {
    opacity: .5;
}

html[data-sl-visual="novo"] .buttonSetting,
html[data-sl-visual="novo"] .buttonSetting2,
html[data-sl-visual="novo"] .buttonSetting3,
html[data-sl-visual="novo"] .buttonSettingAux {
    width: auto !important;
    min-width: 124px;
    height: var(--sl-ctl-h) !important;
    border-radius: var(--sl-ctl-r) !important;
    font-size: var(--sl-fs-sm) !important;
    font-weight: 600 !important;
    margin: 2px 4px 2px 0 !important;
}
html[data-sl-visual="novo"] .buttonSetting2 {
    min-width: 0;
    width: var(--sl-ctl-h) !important;
}
html[data-sl-visual="novo"] .buttonSetting3 {
    min-width: 220px;
}
html[data-sl-visual="novo"] .buttonSetting,
html[data-sl-visual="novo"] .buttonSetting2,
html[data-sl-visual="novo"] .buttonSetting3,
html[data-sl-visual="novo"] .buttonSettingAux {
    background: var(--sl-primary) !important;
    border: 1.5px solid var(--sl-primary) !important;
    color: var(--sl-on-primary) !important;
    padding: 0 16px;
    margin: 0 !important;
}
html[data-sl-visual="novo"] .buttonSetting2 {
    padding: 0;
}
html[data-sl-visual="novo"] .buttonSetting:enabled:hover,
html[data-sl-visual="novo"] .buttonSetting2:enabled:hover,
html[data-sl-visual="novo"] .buttonSetting3:enabled:hover,
html[data-sl-visual="novo"] .buttonSettingAux:enabled:hover {
    background: var(--sl-primary-hover) !important;
    border-color: var(--sl-primary-hover) !important;
    color: var(--sl-on-primary) !important;
}
html[data-sl-visual="novo"] .buttonSetting:has(.iconRemover) {
    background: var(--sl-danger) !important;
    border-color: var(--sl-danger) !important;
    color: #fff !important;
}
html[data-sl-visual="novo"] .buttonSetting:has(.iconRemover):enabled:hover {
    background: color-mix(in srgb, var(--sl-danger) 84%, black) !important;
    border-color: color-mix(in srgb, var(--sl-danger) 84%, black) !important;
}
html[data-sl-visual="novo"] .buttonSetting.ui-state-disabled,
html[data-sl-visual="novo"] .buttonSetting:disabled,
html[data-sl-visual="novo"] .buttonSetting2:disabled,
html[data-sl-visual="novo"] .buttonSetting3:disabled {
    opacity: .4;
}
html[data-sl-visual="novo"] .ui-dialog2 .ui-toolbar .ui-toolbar-group-left,
html[data-sl-visual="novo"] .ui-dialog2 .ui-toolbar .ui-toolbar-group-right {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

html[data-sl-visual="novo"] .ui-growl-item-container {
    background: var(--sl-surface) !important;
    color: var(--sl-text) !important;
    border: 1px solid var(--sl-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(16, 32, 56, .25) !important;
    opacity: 1 !important;
}
html[data-sl-visual="novo"] .ui-growl-item-container.ui-growl-info {
    border-color: var(--sl-info) !important;
}
html[data-sl-visual="novo"] .ui-growl-item-container.ui-growl-warn {
    border-color: var(--sl-warning) !important;
}
html[data-sl-visual="novo"] .ui-growl-item-container.ui-growl-error,
html[data-sl-visual="novo"] .ui-growl-item-container.ui-growl-fatal {
    border-color: var(--sl-danger) !important;
}
html[data-sl-visual="novo"] .ui-growl-title {
    color: var(--sl-heading);
    font-weight: 700;
}
html[data-sl-visual="novo"] .ui-growl-message p {
    color: var(--sl-text);
}
html[data-sl-visual="novo"] .ui-messages-info,
html[data-sl-visual="novo"] .ui-messages-warn,
html[data-sl-visual="novo"] .ui-messages-error,
html[data-sl-visual="novo"] .ui-messages-fatal {
    border-radius: 10px !important;
    background-image: none !important;
    color: var(--sl-text) !important;
}
html[data-sl-visual="novo"] .ui-messages-info {
    background: var(--sl-info-soft) !important;
    border: 1px solid var(--sl-info) !important;
}
html[data-sl-visual="novo"] .ui-messages-warn {
    background: var(--sl-warning-soft) !important;
    border: 1px solid var(--sl-warning) !important;
}
html[data-sl-visual="novo"] .ui-messages-error,
html[data-sl-visual="novo"] .ui-messages-fatal {
    background: var(--sl-danger-soft) !important;
    border: 1px solid var(--sl-danger) !important;
}

.sl-tema-chave {
    width: 100%;
    padding: 10px;
    font-weight: bold;
}

/* ============================================================
   Fase 2 - formularios (so' com html[data-sl-visual="novo"])
   - Grade de formulario em "grupo" rotulo+campo lado a lado (OPT-IN POR TELA): dentro de um contêiner
     com a classe .sl-form, h:panelGrid com td.coluna1/td.coluna2
     vira blocos "rotulo em cima, campo embaixo" distribuidos em
     colunas automaticas. Fora de .sl-form o layout nao muda.
     Uso: <h:panelGroup layout="block" styleClass="sl-form"> em volta
     do conteudo de ui:define name="detalhes".
   - Campos arredondados com borda colorida por estado.
   - Obrigatorio: barra vermelha grossa na borda esquerda do rotulo e do campo (a imagem some).
   - Cadastros: conteudo do dialogo com rolagem e barra de acoes fixa.
   ============================================================ */

html[data-sl-visual="novo"] .ui-dialog2 .ui-dialog-content {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
}
html[data-sl-visual="novo"] .ui-dialog2 .ui-toolbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--sl-bg) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 2px 0 12px 0 !important;
}

html[data-sl-visual="novo"] .sl-form table:has(> tbody > tr > td.coluna1) {
    display: block;
    width: 100% !important;
    position: static !important;
    left: auto !important;
    border-spacing: 0;
}
html[data-sl-visual="novo"] .sl-form table:has(> tbody > tr > td.coluna1) > tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
    gap: 14px 28px;
}
html[data-sl-visual="novo"] .sl-form table:has(> tbody > tr > td.coluna1) > tbody > tr {
    display: flex;
    align-items: stretch;
    min-width: 0;
}
html[data-sl-visual="novo"] .sl-form table:has(> tbody > tr > td.coluna1) > tbody > tr:has(> td:nth-child(3)) {
    grid-column: 1 / -1;
}
html[data-sl-visual="novo"] .sl-form table:has(> tbody > tr > td.coluna1) > tbody > tr:has(> td:nth-child(4)):not(:has(> td:nth-child(5))) {
    display: grid;
    grid-template-columns: var(--sl-label-w) minmax(0, 1fr) calc(var(--sl-label-w) + 28px) minmax(0, 1fr);
}
html[data-sl-visual="novo"] .sl-form table:has(> tbody > tr > td.coluna1) > tbody > tr:has(> td:nth-child(6)):not(:has(> td:nth-child(7))) {
    display: grid;
    grid-template-columns: var(--sl-label-w) minmax(0, 1fr) calc(var(--sl-label-w) + 28px) minmax(0, 1fr) calc(var(--sl-label-w) + 28px) minmax(0, 1fr);
}
html[data-sl-visual="novo"] .sl-form table:has(> tbody > tr > td.coluna1) > tbody > tr > td:nth-child(3),
html[data-sl-visual="novo"] .sl-form table:has(> tbody > tr > td.coluna1) > tbody > tr > td:nth-child(5) {
    margin-left: 28px;
}
html[data-sl-visual="novo"] .sl-form td.coluna1 {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    flex: 0 0 var(--sl-label-w);
    width: var(--sl-label-w) !important;
    min-height: var(--sl-form-h);
    padding: 4px 12px 4px 14px !important;
    background: var(--sl-surface-alt) !important;
    color: var(--sl-heading) !important;
    font-size: var(--sl-fs-md) !important;
    font-weight: 600 !important;
    line-height: 1.25;
    border: 1.5px solid var(--sl-field-border);
    border-right: 0;
    border-radius: var(--sl-ctl-r) 0 0 var(--sl-ctl-r);
    text-align: left;
}
html[data-sl-visual="novo"] .sl-form td.coluna1:has(img[src*="obrigatorio"]) {
    border-left: 4px solid var(--sl-danger);
    padding-left: 11.5px !important;
}
html[data-sl-visual="novo"] .sl-form td.coluna1 > span:has(> img[src*="obrigatorio"]) {
    border-left: 0;
    padding-left: 0;
}
html[data-sl-visual="novo"] .sl-form td.coluna2 {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 !important;
    text-align: left;
    font-size: var(--sl-fs-md) !important;
}
html[data-sl-visual="novo"] .sl-form td.coluna1:empty,
html[data-sl-visual="novo"] .sl-form td.coluna2:empty {
    display: none;
}
html[data-sl-visual="novo"] .sl-form td.coluna2 > span:not([class]) {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
}
html[data-sl-visual="novo"] input[type="text"],
html[data-sl-visual="novo"] input[type="password"],
html[data-sl-visual="novo"] input[type="number"],
html[data-sl-visual="novo"] input[type="email"],
html[data-sl-visual="novo"] input:not([type]),
html[data-sl-visual="novo"] select,
html[data-sl-visual="novo"] textarea {
    border: 1.5px solid var(--sl-field-border);
    border-radius: calc(var(--sl-ctl-r) - 2px);
    background-color: var(--sl-surface);
    color: var(--sl-text);
    text-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
html[data-sl-visual="novo"] input[type="text"]:hover,
html[data-sl-visual="novo"] input[type="password"]:hover,
html[data-sl-visual="novo"] input[type="number"]:hover,
html[data-sl-visual="novo"] input:not([type]):hover,
html[data-sl-visual="novo"] select:hover,
html[data-sl-visual="novo"] textarea:hover {
    border-color: var(--sl-heading);
}
html[data-sl-visual="novo"] input[type="text"]:focus,
html[data-sl-visual="novo"] input[type="password"]:focus,
html[data-sl-visual="novo"] input[type="number"]:focus,
html[data-sl-visual="novo"] input[type="email"]:focus,
html[data-sl-visual="novo"] input:not([type]):focus,
html[data-sl-visual="novo"] select:focus,
html[data-sl-visual="novo"] textarea:focus,
html[data-sl-visual="novo"] input.ui-state-focus,
html[data-sl-visual="novo"] textarea.ui-state-focus {
    background-color: var(--sl-surface);
    color: var(--sl-text);
    border-color: var(--sl-primary);
    box-shadow: 0 0 0 3.5px var(--sl-primary-soft);
    outline: none;
}
html[data-sl-visual="novo"] input[disabled],
html[data-sl-visual="novo"] select[disabled],
html[data-sl-visual="novo"] textarea[disabled] {
    background-color: var(--sl-surface-alt);
    color: var(--sl-muted);
    border-color: var(--sl-border);
}
html[data-sl-visual="novo"] input.ui-state-error,
html[data-sl-visual="novo"] select.ui-state-error,
html[data-sl-visual="novo"] textarea.ui-state-error,
html[data-sl-visual="novo"] .ui-selectonemenu.ui-state-error {
    background: var(--sl-surface) !important;
    background-image: none !important;
    color: var(--sl-text) !important;
    border-color: var(--sl-danger) !important;
}
html[data-sl-visual="novo"] input.ui-state-error:focus,
html[data-sl-visual="novo"] textarea.ui-state-error:focus {
    box-shadow: 0 0 0 3.5px var(--sl-danger-soft);
}
html[data-sl-visual="novo"] .ui-message-error,
html[data-sl-visual="novo"] .ui-message-error-detail {
    color: var(--sl-danger) !important;
    background: transparent !important;
}

html[data-sl-visual="novo"] .sl-form td.coluna2 input[type="text"],
html[data-sl-visual="novo"] .sl-form td.coluna2 input[type="password"],
html[data-sl-visual="novo"] .sl-form td.coluna2 input[type="number"],
html[data-sl-visual="novo"] .sl-form td.coluna2 input[type="email"],
html[data-sl-visual="novo"] .sl-form td.coluna2 input:not([type]),
html[data-sl-visual="novo"] .sl-form td.coluna2 select {
    box-sizing: border-box;
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
    max-width: 100%;
    height: var(--sl-form-h);
    padding: 0 14px;
    font-size: var(--sl-fs-md);
    font-family: var(--sl-font);
    border-radius: 0 var(--sl-ctl-r) var(--sl-ctl-r) 0;
}
html[data-sl-visual="novo"] .sl-form td.coluna2 textarea {
    box-sizing: border-box;
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
    align-self: stretch;
    min-height: calc(var(--sl-form-h) * 2);
    padding: 10px 14px;
    font-size: var(--sl-fs-md);
    font-family: var(--sl-font);
    border-radius: 0 var(--sl-ctl-r) var(--sl-ctl-r) 0;
}
html[data-sl-visual="novo"] .sl-form td.coluna2 select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366768a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}
html[data-sl-visual="novo"] .sl-form td.coluna2 .ui-autocomplete,
html[data-sl-visual="novo"] .sl-form td.coluna2 .ui-calendar,
html[data-sl-visual="novo"] .sl-form td.coluna2 .ui-inputnumber {
    display: block;
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
}
html[data-sl-visual="novo"] .sl-form td.coluna2 .ui-autocomplete > input,
html[data-sl-visual="novo"] .sl-form td.coluna2 .ui-calendar > input {
    width: 100% !important;
}
html[data-sl-visual="novo"] .ui-selectonemenu {
    background: var(--sl-surface) !important;
    background-image: none !important;
    border: 1.5px solid var(--sl-field-border) !important;
    border-radius: calc(var(--sl-ctl-r) - 2px) !important;
    min-height: var(--sl-ctl-h);
    box-shadow: none !important;
}
html[data-sl-visual="novo"] .sl-form td.coluna2 .ui-selectonemenu {
    width: 100% !important;
    box-sizing: border-box;
}
html[data-sl-visual="novo"] .ui-selectonemenu .ui-selectonemenu-label {
    background: transparent !important;
    color: var(--sl-text) !important;
    font-size: var(--sl-fs-md);
    padding: 0 12px;
    line-height: calc(var(--sl-ctl-h) - 3px);
    height: auto;
}
html[data-sl-visual="novo"] .ui-selectonemenu .ui-selectonemenu-trigger {
    background: transparent !important;
    border: 0 !important;
}
html[data-sl-visual="novo"] .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
    background: var(--sl-muted) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
html[data-sl-visual="novo"] .ui-selectonemenu-panel,
html[data-sl-visual="novo"] .ui-autocomplete-panel {
    background: var(--sl-surface) !important;
    border: 1px solid var(--sl-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(16, 32, 56, .25) !important;
    padding: 4px;
}
html[data-sl-visual="novo"] .ui-selectonemenu-panel .ui-selectonemenu-item,
html[data-sl-visual="novo"] .ui-autocomplete-panel .ui-autocomplete-item {
    color: var(--sl-text) !important;
    border-radius: 8px;
    padding: 6px 10px;
}
/* lista de sugestoes com colunas (p:autoComplete + p:column): a tabela e as linhas vem com o fundo claro do tema do
   PrimeFaces (.ui-widget-content) e o texto do DS e' claro no tema escuro - ficava invisivel fora do realce */
html[data-sl-visual="novo"] .ui-autocomplete-panel .ui-autocomplete-table,
html[data-sl-visual="novo"] .ui-autocomplete-panel .ui-autocomplete-table .ui-autocomplete-item {
    background: transparent !important;
    color: var(--sl-text) !important;
}
html[data-sl-visual="novo"] .ui-autocomplete-panel .ui-autocomplete-table th {
    background: var(--sl-primary-soft) !important;
    color: var(--sl-heading) !important;
    border-color: var(--sl-border) !important;
    font-weight: 700;
}
html[data-sl-visual="novo"] .ui-autocomplete-panel .ui-autocomplete-table td {
    border-color: var(--sl-border) !important;
    color: inherit;
}
html[data-sl-visual="novo"] .ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-highlight,
html[data-sl-visual="novo"] .ui-selectonemenu-panel .ui-selectonemenu-item:hover,
html[data-sl-visual="novo"] .ui-autocomplete-panel .ui-autocomplete-item.ui-state-highlight,
html[data-sl-visual="novo"] .ui-autocomplete-panel .ui-autocomplete-item:hover {
    background: var(--sl-primary-soft) !important;
    color: var(--sl-primary) !important;
}

html[data-sl-visual="novo"] .ui-button .ui-icon[class*="ui-icon-"] {
    filter: invert(1) opacity(.7);
}
html[data-sl-visual="novo"][data-sl-tema="dark"] .ui-button .ui-icon[class*="ui-icon-"] {
    filter: none;
}

html[data-sl-visual="novo"] img[src*="obrigatorio"] {
    display: none !important;
}
html[data-sl-visual="novo"] td:has(> img[src*="obrigatorio"]),
html[data-sl-visual="novo"] span:has(> img[src*="obrigatorio"]),
html[data-sl-visual="novo"] div:has(> img[src*="obrigatorio"]),
html[data-sl-visual="novo"] label:has(> img[src*="obrigatorio"]) {
    border-left: 4px solid var(--sl-danger);
    padding-left: 8px;
}
html[data-sl-visual="novo"] td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 input[type="text"],
html[data-sl-visual="novo"] td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 input[type="password"],
html[data-sl-visual="novo"] td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 input[type="number"],
html[data-sl-visual="novo"] td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 input[type="email"],
html[data-sl-visual="novo"] td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 input:not([type]),
html[data-sl-visual="novo"] td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 select,
html[data-sl-visual="novo"] td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 textarea,
html[data-sl-visual="novo"] td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 .ui-selectonemenu {
    border-left: 4px solid var(--sl-danger) !important;
}

.sl-tema-tres {
    grid-template-columns: 1fr 1fr 1fr;
}
.sl-tema-tres .sl-tema-opcao {
    padding: 8px 4px;
    font-size: 11px;
}

html[data-sl-visual="novo"] .sl-form td.coluna2 .ui-selectonemenu {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
    min-height: var(--sl-form-h);
    border-radius: 0 var(--sl-ctl-r) var(--sl-ctl-r) 0 !important;
}
html[data-sl-visual="novo"] .sl-form td.coluna2 .ui-selectonemenu .ui-selectonemenu-label {
    line-height: calc(var(--sl-form-h) - 3px);
}
html[data-sl-visual="novo"] .sl-form td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 input[type="text"],
html[data-sl-visual="novo"] .sl-form td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 input[type="password"],
html[data-sl-visual="novo"] .sl-form td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 input[type="number"],
html[data-sl-visual="novo"] .sl-form td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 input[type="email"],
html[data-sl-visual="novo"] .sl-form td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 input:not([type]),
html[data-sl-visual="novo"] .sl-form td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 select,
html[data-sl-visual="novo"] .sl-form td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 textarea,
html[data-sl-visual="novo"] .sl-form td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 .ui-selectonemenu {
    border-left: 1.5px solid var(--sl-field-border) !important;
}
html[data-sl-visual="novo"] .sl-form td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 input[type="text"]:focus,
html[data-sl-visual="novo"] .sl-form td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 input[type="password"]:focus,
html[data-sl-visual="novo"] .sl-form td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 input[type="number"]:focus,
html[data-sl-visual="novo"] .sl-form td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 input[type="email"]:focus,
html[data-sl-visual="novo"] .sl-form td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 input:not([type]):focus,
html[data-sl-visual="novo"] .sl-form td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 select:focus,
html[data-sl-visual="novo"] .sl-form td.coluna1:has(img[src*="obrigatorio"]) + td.coluna2 textarea:focus {
    border-left-color: var(--sl-primary) !important;
}

/* ---------- Fase 2b - rotulos menores, acessorios alinhados, larguras fluidas ---------- */
html[data-sl-visual="novo"] .sl-form td.coluna1 {
    font-size: 11.5px !important;
    line-height: 1.2;
    padding: 4px 10px 4px 14px !important;
    overflow-wrap: anywhere;
}
html[data-sl-visual="novo"] .sl-form td.coluna2,
html[data-sl-visual="novo"] .sl-form td.coluna2 > span:not([class]) {
    gap: var(--sl-form-gap);
}

html[data-sl-visual="novo"] .sl-form td.coluna2 img[onclick],
html[data-sl-visual="novo"] .sl-form td.coluna2 a > img {
    box-sizing: border-box;
    flex: 0 0 var(--sl-form-h);
    width: var(--sl-form-h);
    height: var(--sl-form-h);
    padding: calc((var(--sl-form-h) - 16px) / 2);
    object-fit: contain;
    background: var(--sl-surface);
    border: 1.5px solid var(--sl-field-border);
    border-radius: var(--sl-ctl-r);
    cursor: pointer;
    position: static !important;
    top: auto !important;
    margin: 0 !important;
    vertical-align: middle;
    transition: border-color .15s, background .15s;
}
html[data-sl-visual="novo"] .sl-form td.coluna2 img[onclick]:hover,
html[data-sl-visual="novo"] .sl-form td.coluna2 a > img:hover {
    border-color: var(--sl-primary);
    background: var(--sl-primary-soft);
}

html[data-sl-visual="novo"] .sl-form td.coluna2 .ui-button {
    box-sizing: border-box;
    flex: 0 0 auto;
    height: var(--sl-form-h) !important;
    min-height: var(--sl-form-h);
    margin: 0 !important;
}
html[data-sl-visual="novo"] .sl-form td.coluna2 .ui-button.ui-button-icon-only {
    width: var(--sl-form-h) !important;
    padding: 0;
}

html[data-sl-visual="novo"] .sl-form td.coluna2 input ~ input,
html[data-sl-visual="novo"] .sl-form td.coluna2 select ~ input,
html[data-sl-visual="novo"] .sl-form td.coluna2 input ~ select,
html[data-sl-visual="novo"] .sl-form td.coluna2 select ~ select,
html[data-sl-visual="novo"] .sl-form td.coluna2 .ui-selectonemenu ~ input,
html[data-sl-visual="novo"] .sl-form td.coluna2 .ui-autocomplete ~ input,
html[data-sl-visual="novo"] .sl-form td.coluna2 img ~ input,
html[data-sl-visual="novo"] .sl-form td.coluna2 .ui-button ~ input {
    border-radius: var(--sl-ctl-r);
}

html[data-sl-visual="novo"] .sl-form td.coluna2 > table:not(:has(> tbody > tr > td.coluna1)) {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    position: static !important;
    left: auto !important;
    border-spacing: 0;
}
html[data-sl-visual="novo"] .sl-form td.coluna2 > table:not(:has(> tbody > tr > td.coluna1)) > tbody {
    display: block;
}
html[data-sl-visual="novo"] .sl-form td.coluna2 > table:not(:has(> tbody > tr > td.coluna1)) > tbody > tr {
    display: flex;
    align-items: center;
    gap: var(--sl-form-gap);
}
html[data-sl-visual="novo"] .sl-form td.coluna2 > table:not(:has(> tbody > tr > td.coluna1)) > tbody > tr > td {
    display: block;
    flex: 0 0 auto;
    min-width: 0;
    padding: 0 !important;
}
html[data-sl-visual="novo"] .sl-form td.coluna2 > table:not(:has(> tbody > tr > td.coluna1)) > tbody > tr > td:has(> input[type="text"]),
html[data-sl-visual="novo"] .sl-form td.coluna2 > table:not(:has(> tbody > tr > td.coluna1)) > tbody > tr > td:has(> select),
html[data-sl-visual="novo"] .sl-form td.coluna2 > table:not(:has(> tbody > tr > td.coluna1)) > tbody > tr > td:has(> .ui-autocomplete) {
    flex: 1 1 0;
}

/* ============================================================
   Fase 3a - tabelas (p:dataTable), so' com html[data-sl-visual="novo"]
   Opt-out: styleClass="slLegadoTb" no p:dataTable.
   ============================================================ */
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) {
    border: 1px solid var(--sl-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--sl-surface);
    color: var(--sl-text);
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) table {
    border-collapse: separate;
    border-spacing: 0;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) .ui-datatable-header {
    background: var(--sl-header-bg) !important;
    color: var(--sl-header-fg) !important;
    font-size: var(--sl-fs-sm);
    font-weight: 600;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 8px 12px;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) .ui-datatable-header .ui-paginator,
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) .ui-datatable-header .ui-paginator * {
    color: var(--sl-header-fg) !important;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) .ui-datatable-header .ui-paginator .ui-paginator-element {
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, .35) !important;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) .ui-datatable-header .ui-paginator .ui-paginator-element:hover:not(.ui-state-disabled) {
    background: rgba(255, 255, 255, .18) !important;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) thead th {
    background: var(--sl-header-bg) !important;
    color: var(--sl-header-fg) !important;
    font-size: var(--sl-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 10px 12px;
    border: 0 !important;
    border-bottom: 1px solid var(--sl-border) !important;
    text-shadow: none;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) thead th.ui-sortable-column:hover {
    background: var(--sl-primary-soft) !important;
    color: var(--sl-primary) !important;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) thead th.ui-state-active {
    color: var(--sl-header-fg) !important;
    box-shadow: inset 0 -3px 0 var(--sl-primary-soft);
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) thead th .ui-selectonemenu {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    height: 30px;
    margin-top: 6px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    background: var(--sl-surface);
    color: var(--sl-text);
    border: 1.5px solid var(--sl-field-border);
    border-radius: var(--sl-ctl-r);
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) thead th input,
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) thead th select {
    box-sizing: border-box;
    height: 30px;
    margin-top: 6px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    background: var(--sl-surface);
    color: var(--sl-text);
    border: 1.5px solid var(--sl-field-border);
    border-radius: var(--sl-ctl-r);
    padding: 0 10px;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr > td {
    background: transparent;
    color: inherit;
    font-size: var(--sl-fs-md);
    line-height: 1.25 !important;
    padding: 10px 12px;
    border: 0 !important;
    border-bottom: 1px solid var(--sl-border) !important;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.ui-widget-content {
    background: var(--sl-surface);
    border: 0;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr:last-child > td {
    border-bottom: 0 !important;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr:hover {
    background: var(--sl-primary-soft) !important;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.ui-state-highlight,
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.ui-state-highlight:hover {
    background: var(--sl-primary) !important;
    color: var(--sl-on-primary) !important;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.ui-state-highlight > td {
    color: var(--sl-on-primary) !important;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) .ui-datatable-empty-message td {
    text-align: center;
    padding: 28px 12px;
    color: var(--sl-muted);
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) .ui-paginator {
    background: var(--sl-surface-alt) !important;
    border: 0 !important;
    border-top: 1px solid var(--sl-border) !important;
    border-radius: 0 !important;
    color: var(--sl-muted);
    font-size: var(--sl-fs-sm);
    padding: 8px 12px;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) .ui-paginator .ui-paginator-page,
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) .ui-paginator .ui-paginator-first,
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) .ui-paginator .ui-paginator-prev,
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) .ui-paginator .ui-paginator-next,
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) .ui-paginator .ui-paginator-last {
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) .ui-paginator .ui-state-active {
    background: var(--sl-primary) !important;
    color: var(--sl-on-primary) !important;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) .ui-paginator a:hover:not(.ui-state-active):not(.ui-state-disabled) {
    background: var(--sl-primary-soft);
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) thead th {
    padding: 10px 8px;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) thead th input,
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) thead th select {
    display: block;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr > td {
    padding: 10px 8px;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr > td:has(> .ui-button) {
    white-space: nowrap;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) thead th .ui-column-title {
    white-space: nowrap;
    overflow-wrap: normal;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr > td {
    color: var(--sl-text) !important;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) thead th {
    letter-spacing: .02em;
}

/* ============================================================
   Fase 3b - paineis, acordeao, abas, fieldset e dialogos secundarios
   So' com html[data-sl-visual="novo"]. Opt-out: styleClass="slLegadoPn".
   Paineis so' viram cartao quando tem titulo (os da casca do app.xhtml nao tem).
   ============================================================ */
html[data-sl-visual="novo"] .ui-panel:not(.slLegadoPn):has(> .ui-panel-titlebar) {
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
}
html[data-sl-visual="novo"] .ui-panel:not(.slLegadoPn):has(> .ui-panel-titlebar) > .ui-panel-titlebar {
    height: auto;
    background: var(--sl-surface-alt) !important;
    color: var(--sl-heading) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sl-border) !important;
    border-radius: 0 !important;
    padding: 10px 14px;
    font-size: var(--sl-fs-md);
    font-weight: 700;
}
html[data-sl-visual="novo"] .ui-panel:not(.slLegadoPn):has(> .ui-panel-titlebar) .ui-panel-title {
    position: static;
    font-weight: 700;
}
html[data-sl-visual="novo"] .ui-panel:not(.slLegadoPn):has(> .ui-panel-titlebar) > .ui-panel-content {
    background: transparent;
    border: 0;
    padding: 14px;
    color: var(--sl-text);
}
html[data-sl-visual="novo"] .ui-panel:not(.slLegadoPn):has(> .ui-panel-titlebar) > .ui-panel-footer {
    background: var(--sl-surface-alt);
    color: var(--sl-muted);
    border: 0;
    border-top: 1px solid var(--sl-border);
    padding: 8px 14px;
    font-size: var(--sl-fs-sm);
}

html[data-sl-visual="novo"] .ui-accordion .ui-accordion-header {
    background: var(--sl-surface-alt) !important;
    color: var(--sl-heading) !important;
    border: 1px solid var(--sl-border) !important;
    border-radius: 10px !important;
    margin-top: 8px;
    padding: 12px 16px 12px 34px;
    font-size: var(--sl-fs-md);
    font-weight: 700;
    text-shadow: none;
}
html[data-sl-visual="novo"] .ui-accordion .ui-accordion-header:first-child {
    margin-top: 0;
}
html[data-sl-visual="novo"] .ui-accordion .ui-accordion-header:hover {
    background: var(--sl-primary-soft) !important;
}
html[data-sl-visual="novo"] .ui-accordion .ui-accordion-header.ui-state-active {
    background: var(--sl-primary) !important;
    color: var(--sl-on-primary) !important;
    border-color: var(--sl-primary) !important;
    border-radius: 10px 10px 0 0 !important;
}
html[data-sl-visual="novo"] .ui-accordion .ui-accordion-header .ui-icon {
    margin-top: -8px;
    left: 12px;
}
html[data-sl-visual="novo"] .ui-accordion .ui-accordion-content {
    background: var(--sl-surface) !important;
    color: var(--sl-text);
    border: 1px solid var(--sl-border) !important;
    border-top: 0 !important;
    border-radius: 0 0 10px 10px;
    padding: 16px;
}

html[data-sl-visual="novo"] .ui-tabs {
    background: transparent;
    border: 0;
    padding: 0;
}
html[data-sl-visual="novo"] .ui-tabs .ui-tabs-nav {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid var(--sl-border) !important;
    border-radius: 0 !important;
    padding: 0;
    font-size: var(--sl-fs-md);
}
html[data-sl-visual="novo"] .ui-tabs .ui-tabs-nav li {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    margin: 0 4px -2px 0;
    top: 0;
}
html[data-sl-visual="novo"] .ui-tabs .ui-tabs-nav li a {
    padding: 10px 16px;
    color: var(--sl-muted) !important;
    font-weight: 700;
}
html[data-sl-visual="novo"] .ui-tabs .ui-tabs-nav li:hover:not(.ui-state-disabled) a {
    color: var(--sl-primary) !important;
}
html[data-sl-visual="novo"] .ui-tabs .ui-tabs-nav li.ui-tabs-selected,
html[data-sl-visual="novo"] .ui-tabs .ui-tabs-nav li.ui-state-active {
    border-bottom-color: var(--sl-primary) !important;
}
html[data-sl-visual="novo"] .ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
html[data-sl-visual="novo"] .ui-tabs .ui-tabs-nav li.ui-state-active a {
    color: var(--sl-primary) !important;
}
html[data-sl-visual="novo"] .ui-tabs .ui-tabs-panels .ui-tabs-panel {
    background: transparent;
    border: 0;
    padding: 8px 2px;
    color: var(--sl-text);
}

html[data-sl-visual="novo"] .ui-fieldset {
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: 12px;
    padding: 12px 16px;
}
html[data-sl-visual="novo"] .ui-fieldset .ui-fieldset-legend {
    height: auto;
    background: var(--sl-surface);
    color: var(--sl-heading);
    border: 1px solid var(--sl-border);
    border-radius: 8px;
    padding: 4px 12px;
    font-size: var(--sl-fs-sm);
    font-weight: 700;
}

html[data-sl-visual="novo"] .ui-dialog:not(.ui-dialog2) {
    background: var(--sl-bg);
    color: var(--sl-text);
    border: 1px solid var(--sl-border);
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(16, 32, 56, .3);
    overflow: hidden;
}
html[data-sl-visual="novo"] .ui-dialog:not(.ui-dialog2) .ui-dialog-titlebar {
    background: var(--sl-header-bg);
    color: var(--sl-header-fg);
    border: 0;
    border-radius: 0;
    padding: 12px 20px;
}
html[data-sl-visual="novo"] .ui-dialog:not(.ui-dialog2) .ui-dialog-title {
    font-size: 15px;
    font-weight: 700;
}
html[data-sl-visual="novo"] .ui-dialog:not(.ui-dialog2) .ui-dialog-titlebar-icon {
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--sl-header-fg);
}
html[data-sl-visual="novo"] .ui-dialog:not(.ui-dialog2) .ui-dialog-titlebar-icon:hover {
    background: rgba(255, 255, 255, .18);
}
html[data-sl-visual="novo"] .ui-dialog:not(.ui-dialog2) .ui-dialog-content {
    background: transparent;
    padding: 16px 20px;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) .ui-datatable-header,
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) thead th,
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr > td {
    font-family: var(--sl-font);
}

/* ============================================================
   Fase 5 - grupos por afinidade (sl-grupo / sl-campo), so com visual novo
   Combina o agrupamento do padraoCadastroV2 (cartoes, rotulo acima do campo,
   varios campos por linha) com o resto do padrao SL (cores, obrigatorio,
   formulario que acompanha a largura da tela).

   Uso:
     <div class="sl-grupos">                       pagina: colunas que acompanham a largura
       <div class="sl-grupo">
         <div class="sl-grupo-titulo">Identificacao</div>
         <div class="sl-grupo-corpo">              grade de 12 colunas
           <div class="sl-campo sl-c4 sl-obrig"><label>Nome</label> ...campo... </div>
   Larguras: sl-c1..sl-c12 (colunas de 12), sl-full (linha inteira).
   Quando o grupo fica estreito (menos de 560px) a grade passa a 6 colunas.
   sl-acc  = campo + botoes de atalho na mesma linha; sl-valor = numero em destaque;
   sl-acoes = linha de botoes; sl-contents = wrapper que nao entra na grade.
   .sl-empilhado em volta de tabelas coluna1/coluna2 poe o rotulo acima do campo.
   ============================================================ */
html[data-sl-visual="novo"] .sl-grupos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
    gap: 16px;
    align-items: start;
}
html[data-sl-visual="novo"] .sl-grupos.sl-grupos-40-60 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}
@media (max-width: 900px) {
    html[data-sl-visual="novo"] .sl-grupos.sl-grupos-40-60 {
        grid-template-columns: minmax(0, 1fr);
    }
}
html[data-sl-visual="novo"] .sl-grupos.sl-grupos-metade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
html[data-sl-visual="novo"] .sl-grupos-metade > .sl-coluna-esquerda {
    order: -1;
}
@media (max-width: 900px) {
    html[data-sl-visual="novo"] .sl-grupos.sl-grupos-metade {
        grid-template-columns: minmax(0, 1fr);
    }
    html[data-sl-visual="novo"] .sl-grupos-metade > .sl-coluna-esquerda {
        order: 0;
    }
}
html[data-sl-visual="novo"] .sl-coluna {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
html[data-sl-visual="novo"] .sl-pilha {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
/* rede de seguranca: contêineres de grupos empilhados (irmaos, ou um deles dentro de um wrapper) ganham o
   espaco padrao de 16px; dentro de .sl-pilha quem espaca e' o gap, entao a margem zera */
html[data-sl-visual="novo"] .sl-grupos:has(~ .sl-grupos),
html[data-sl-visual="novo"] .sl-grupos:has(~ * .sl-grupos) {
    margin-bottom: 16px;
}
html[data-sl-visual="novo"] :is(div, span):not(.sl-contents):not(.sl-pilha):has(> .sl-grupos:last-child):has(~ * .sl-grupos) > .sl-grupos:last-child,
html[data-sl-visual="novo"] :is(div, span):not(.sl-contents):not(.sl-pilha):has(> .sl-grupos:last-child):has(~ .sl-grupos) > .sl-grupos:last-child {
    margin-bottom: 16px;
}
html[data-sl-visual="novo"] .sl-pilha .sl-grupos {
    margin-bottom: 0;
}
html[data-sl-visual="novo"] .sl-grupo {
    background: var(--sl-surface);
    border: 2px solid var(--sl-border);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .10);
    container-type: inline-size;
    min-width: 0;
}
html[data-sl-visual="novo"] .sl-grupo-titulo {
    background: var(--sl-primary-soft);
    color: var(--sl-text);
    border-bottom: 2px solid var(--sl-border);
    border-radius: 10px 10px 0 0;
    padding: 10px 16px;
    font-size: var(--sl-fs-md);
    font-weight: 700;
}
html[data-sl-visual="novo"] .sl-grupo-corpo {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px 16px;
    padding: 16px;
}
html[data-sl-visual="novo"] .sl-campo {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
html[data-sl-visual="novo"] .sl-c1 { grid-column: span 1; }
html[data-sl-visual="novo"] .sl-c2 { grid-column: span 2; }
html[data-sl-visual="novo"] .sl-c3 { grid-column: span 3; }
html[data-sl-visual="novo"] .sl-c4 { grid-column: span 4; }
html[data-sl-visual="novo"] .sl-c5 { grid-column: span 5; }
html[data-sl-visual="novo"] .sl-c6 { grid-column: span 6; }
html[data-sl-visual="novo"] .sl-c7 { grid-column: span 7; }
html[data-sl-visual="novo"] .sl-c8 { grid-column: span 8; }
html[data-sl-visual="novo"] .sl-c9 { grid-column: span 9; }
html[data-sl-visual="novo"] .sl-c10 { grid-column: span 10; }
html[data-sl-visual="novo"] .sl-c11 { grid-column: span 11; }
html[data-sl-visual="novo"] .sl-c12,
html[data-sl-visual="novo"] .sl-full { grid-column: 1 / -1; }
@container (max-width: 560px) {
    html[data-sl-visual="novo"] .sl-grupo-corpo { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    html[data-sl-visual="novo"] .sl-campo,
    html[data-sl-visual="novo"] .sl-c1,
    html[data-sl-visual="novo"] .sl-c2,
    html[data-sl-visual="novo"] .sl-c3,
    html[data-sl-visual="novo"] .sl-c4,
    html[data-sl-visual="novo"] .sl-c5,
    html[data-sl-visual="novo"] .sl-c6 { grid-column: span 3; }
    html[data-sl-visual="novo"] .sl-c7,
    html[data-sl-visual="novo"] .sl-c8,
    html[data-sl-visual="novo"] .sl-c9,
    html[data-sl-visual="novo"] .sl-c10,
    html[data-sl-visual="novo"] .sl-c11,
    html[data-sl-visual="novo"] .sl-c12,
    html[data-sl-visual="novo"] .sl-full { grid-column: 1 / -1; }
}
/* faixas intermediarias para formularios densos: o grupo e' o container, entao reage ao redimensionar a janela.
   sl-r-md-N = ocupa N das 12 colunas quando o grupo tem de 561px a 760px (sl-c2 fica estreito demais ali);
   sl-fluido no grupo = abaixo de 360px todos os campos ocupam a linha inteira. */
@container (min-width: 561px) and (max-width: 760px) {
    html[data-sl-visual="novo"] .sl-campo.sl-r-md-3 { grid-column: span 3; }
    html[data-sl-visual="novo"] .sl-campo.sl-r-md-4 { grid-column: span 4; }
    html[data-sl-visual="novo"] .sl-campo.sl-r-md-6 { grid-column: span 6; }
    html[data-sl-visual="novo"] .sl-campo.sl-r-md-8 { grid-column: span 8; }
    html[data-sl-visual="novo"] .sl-campo.sl-r-md-9 { grid-column: span 9; }
    html[data-sl-visual="novo"] .sl-campo.sl-r-md-12 { grid-column: 1 / -1; }
}
@container (max-width: 360px) {
    html[data-sl-visual="novo"] .sl-fluido .sl-grupo-corpo > .sl-campo,
    html[data-sl-visual="novo"] .sl-fluido .sl-grupo-corpo > .sl-contents > .sl-campo { grid-column: 1 / -1; }
}
html[data-sl-visual="novo"] .sl-contents { display: contents; }
html[data-sl-visual="novo"] .sl-campo label,
html[data-sl-visual="novo"] .sl-campo .sl-rotulo {
    color: var(--sl-heading);
    font-size: var(--sl-fs-sm);
    font-weight: 700;
    line-height: 1.2;
}
html[data-sl-visual="novo"] .sl-campo input[type="text"],
html[data-sl-visual="novo"] .sl-campo input[type="password"],
html[data-sl-visual="novo"] .sl-campo input:not([type]),
html[data-sl-visual="novo"] .sl-campo select {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    height: calc(var(--sl-ctl-h) + 6px);
    padding: 0 12px;
    font-size: var(--sl-fs-md);
    font-family: var(--sl-font);
}
html[data-sl-visual="novo"] .sl-campo textarea {
    box-sizing: border-box;
    width: 100% !important;
    min-height: calc(var(--sl-ctl-h) * 2);
    padding: 8px 12px;
    font-size: var(--sl-fs-md);
    font-family: var(--sl-font);
}
html[data-sl-visual="novo"] .sl-campo select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366768a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}
html[data-sl-visual="novo"] .sl-obrig > label::after,
html[data-sl-visual="novo"] .sl-obrig > .sl-rotulo::after {
    content: " *";
    color: var(--sl-danger);
}
html[data-sl-visual="novo"] .sl-obrig input[type="text"],
html[data-sl-visual="novo"] .sl-obrig input:not([type]),
html[data-sl-visual="novo"] .sl-obrig select,
html[data-sl-visual="novo"] .sl-obrig textarea {
    border-left: 4px solid var(--sl-danger);
}
html[data-sl-visual="novo"] .sl-acc {
    display: flex;
    align-items: center;
    gap: var(--sl-form-gap);
}
html[data-sl-visual="novo"] .sl-acc > select,
html[data-sl-visual="novo"] .sl-acc > input {
    flex: 1 1 0;
}
html[data-sl-visual="novo"] .sl-acc > img {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: calc(var(--sl-ctl-h) + 6px);
    height: calc(var(--sl-ctl-h) + 6px);
    padding: 8px;
    object-fit: contain;
    background: var(--sl-surface);
    border: 1.5px solid var(--sl-field-border);
    border-radius: var(--sl-ctl-r);
    cursor: pointer;
}
html[data-sl-visual="novo"] .sl-ico-btn {
    box-sizing: border-box;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--sl-ctl-h) + 6px);
    height: calc(var(--sl-ctl-h) + 6px);
    background: var(--sl-surface);
    color: var(--sl-heading);
    border: 1.5px solid var(--sl-field-border);
    border-radius: var(--sl-ctl-r);
    cursor: pointer;
}
html[data-sl-visual="novo"] .sl-ico-btn > i {
    display: block;
    width: 16px;
    height: 16px;
}
html[data-sl-visual="novo"] .sl-acc:has(> .sl-ico-btn[title^="Novo"]) > .sl-ico-btn[title="Atualizar lista"] {
    display: none;
}
html[data-sl-visual="novo"] .sl-ico-btn:hover {
    background: var(--sl-primary-soft);
    border-color: var(--sl-primary);
    color: var(--sl-primary);
}
html[data-sl-visual="novo"] .sl-acc > img:hover {
    background: var(--sl-primary-soft);
    border-color: var(--sl-primary);
}
html[data-sl-visual="novo"] .sl-acc > input[type="color"] {
    flex: 0 0 56px !important;
    width: 56px !important;
    padding: 3px;
    cursor: pointer;
}
html[data-sl-visual="novo"] .sl-acc > .ui-autocomplete {
    flex: 1 1 auto;
    min-width: 0;
}
html[data-sl-visual="novo"] .sl-acc > .ui-autocomplete > input {
    width: 100% !important;
}
html[data-sl-visual="novo"] .sl-acc .ui-button {
    flex: 0 0 auto;
    height: calc(var(--sl-ctl-h) + 6px);
}
html[data-sl-visual="novo"] .sl-grupo-corpo .ui-button:not(.ui-state-disabled):not(:disabled),
html[data-sl-visual="novo"] .ui-accordion-content .ui-button:not(.ui-state-disabled):not(:disabled),
html[data-sl-visual="novo"] .sl-ico-btn {
    background: var(--sl-primary-soft) !important;
    border-color: var(--sl-primary) !important;
    color: var(--sl-primary) !important;
}
html[data-sl-visual="novo"] .sl-grupo-corpo .ui-button:not(.ui-state-disabled):not(:disabled):hover,
html[data-sl-visual="novo"] .sl-grupo-corpo .ui-button:not(.ui-state-disabled):not(:disabled):focus,
html[data-sl-visual="novo"] .sl-grupo-corpo .ui-button:not(.ui-state-disabled):not(:disabled).ui-state-hover,
html[data-sl-visual="novo"] .sl-grupo-corpo .ui-button:not(.ui-state-disabled):not(:disabled).ui-state-focus,
html[data-sl-visual="novo"] .ui-accordion-content .ui-button:not(.ui-state-disabled):not(:disabled):hover,
html[data-sl-visual="novo"] .ui-accordion-content .ui-button:not(.ui-state-disabled):not(:disabled):focus,
html[data-sl-visual="novo"] .ui-accordion-content .ui-button:not(.ui-state-disabled):not(:disabled).ui-state-hover,
html[data-sl-visual="novo"] .ui-accordion-content .ui-button:not(.ui-state-disabled):not(:disabled).ui-state-focus,
html[data-sl-visual="novo"] .sl-ico-btn:hover,
html[data-sl-visual="novo"] .sl-ico-btn:focus {
    background: var(--sl-primary) !important;
    border-color: var(--sl-primary) !important;
    color: var(--sl-on-primary) !important;
}
html[data-sl-visual="novo"] .sl-valor {
    display: flex;
    align-items: center;
    min-height: calc(var(--sl-ctl-h) + 6px);
    color: var(--sl-heading);
    font-size: 18px;
    font-weight: 700;
}
html[data-sl-visual="novo"] .sl-valor.sl-situacao-1 { color: var(--sl-info); }
html[data-sl-visual="novo"] .sl-valor.sl-situacao-2 { color: var(--sl-success); }
html[data-sl-visual="novo"] .sl-valor.sl-situacao-3,
html[data-sl-visual="novo"] .sl-valor.sl-situacao-4 { color: var(--sl-danger); }
html[data-sl-visual="novo"] .sl-valor.sl-situacao-5 { color: var(--sl-warning); }
html[data-sl-visual="novo"] .sl-valor.sl-valor-total { color: var(--sl-primary); }
html[data-sl-visual="novo"] .sl-valor.sl-valor-md {
    font-size: 14px;
    line-height: 1.3;
}
html[data-sl-visual="novo"] .sl-valor.sl-valor-sm {
    min-height: var(--sl-ctl-h);
    font-size: var(--sl-fs-sm, 12px);
    font-weight: 600;
    line-height: 1.3;
}
html[data-sl-visual="novo"] .sl-campo.sl-linha-indicadores {
    display: flex;
    flex-direction: row;
    gap: 12px 16px;
}
html[data-sl-visual="novo"] .sl-linha-indicadores > .sl-campo { flex: 1 1 0; grid-column: auto; }
html[data-sl-visual="novo"] .sl-motivo {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sl-heading);
}
html[data-sl-visual="novo"] .sl-motivo.sl-situacao-1 { color: var(--sl-info); }
html[data-sl-visual="novo"] .sl-motivo.sl-situacao-2 { color: var(--sl-success); }
html[data-sl-visual="novo"] .sl-motivo.sl-situacao-3,
html[data-sl-visual="novo"] .sl-motivo.sl-situacao-4 { color: var(--sl-danger); }
html[data-sl-visual="novo"] .sl-motivo.sl-situacao-5 { color: var(--sl-warning); }
html[data-sl-visual="novo"] .sl-dica {
    color: var(--sl-muted);
    font-size: var(--sl-fs-xs);
}
html[data-sl-visual="novo"] .sl-acoes {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* rotulo acima do campo para tabelas coluna1/coluna2 antigas */
html[data-sl-visual="novo"] .sl-empilhado table:has(> tbody > tr > td.coluna1) > tbody {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    gap: 12px 16px;
}
html[data-sl-visual="novo"] .sl-empilhado table:has(> tbody > tr > td.coluna1) > tbody > tr {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
}
html[data-sl-visual="novo"] .sl-empilhado table:has(> tbody > tr > td.coluna1) > tbody > tr:has(> td:nth-child(3)),
html[data-sl-visual="novo"] .sl-empilhado table:has(> tbody > tr > td.coluna1) > tbody > tr:has(> td:nth-child(4)):not(:has(> td:nth-child(5))),
html[data-sl-visual="novo"] .sl-empilhado table:has(> tbody > tr > td.coluna1) > tbody > tr:has(> td:nth-child(6)):not(:has(> td:nth-child(7))) {
    display: grid;
    grid-template-columns: none;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 5px 16px;
}
html[data-sl-visual="novo"] .sl-empilhado table:has(> tbody > tr > td.coluna1) > tbody > tr > td:nth-child(3),
html[data-sl-visual="novo"] .sl-empilhado table:has(> tbody > tr > td.coluna1) > tbody > tr > td:nth-child(5) {
    margin-left: 0;
}
html[data-sl-visual="novo"] .sl-empilhado td.coluna1 {
    display: block;
    flex: none;
    width: auto !important;
    min-height: 0;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    color: var(--sl-heading) !important;
    font-size: var(--sl-fs-sm) !important;
    font-weight: 700 !important;
}
html[data-sl-visual="novo"] .sl-empilhado td.coluna1 img[src*="obrigatorio"] {
    display: none;
}
html[data-sl-visual="novo"] .sl-empilhado td.coluna1:has(img[src*="obrigatorio"])::after {
    content: " *";
    color: var(--sl-danger);
}
html[data-sl-visual="novo"] .sl-empilhado td.coluna2 {
    min-height: calc(var(--sl-ctl-h) + 6px);
}
html[data-sl-visual="novo"] .sl-empilhado td.coluna2 input[type="text"],
html[data-sl-visual="novo"] .sl-empilhado td.coluna2 input[type="password"],
html[data-sl-visual="novo"] .sl-empilhado td.coluna2 input[type="number"],
html[data-sl-visual="novo"] .sl-empilhado td.coluna2 input:not([type]),
html[data-sl-visual="novo"] .sl-empilhado td.coluna2 select,
html[data-sl-visual="novo"] .sl-empilhado td.coluna2 textarea {
    height: calc(var(--sl-ctl-h) + 6px);
    border-radius: var(--sl-ctl-r);
}
html[data-sl-visual="novo"] .sl-empilhado td.coluna2 textarea {
    height: auto;
}
html[data-sl-visual="novo"] .sl-empilhado tr:has(img[src*="obrigatorio"]) > td.coluna2 input[type="text"],
html[data-sl-visual="novo"] .sl-empilhado tr:has(img[src*="obrigatorio"]) > td.coluna2 input:not([type]),
html[data-sl-visual="novo"] .sl-empilhado tr:has(img[src*="obrigatorio"]) > td.coluna2 select {
    border-left: 4px solid var(--sl-danger);
}

/* tabelas de dados dentro de formulario empilhado: largura total, sem os ajustes inline legados */
html[data-sl-visual="novo"] .sl-empilhado .ui-datatable:not(.slLegadoTb) {
    width: 100% !important;
    max-width: 100%;
    left: 0 !important;
    background-color: var(--sl-surface) !important;
}
html[data-sl-visual="novo"] .sl-empilhado .ui-datatable:not(.slLegadoTb) table {
    width: 100%;
    table-layout: auto;
}
html[data-sl-visual="novo"] .sl-empilhado td:has(> .ui-datatable:not(.slLegadoTb)) {
    width: 100%;
}
html[data-sl-visual="novo"] .sl-empilhado table:has(> tbody > tr > td > .ui-datatable:not(.slLegadoTb)),
html[data-sl-visual="novo"] .sl-empilhado table:has(> tbody > tr > td > table > tbody > tr > td > .ui-datatable:not(.slLegadoTb)) {
    width: 100%;
}

/* visual antigo: grupos e campos sem o visual novo ficam legiveis (rotulo acima, campos lado a lado) */
html:not([data-sl-visual="novo"]) .sl-grupos { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-start; }
html:not([data-sl-visual="novo"]) .sl-coluna { flex: 1 1 420px; min-width: 0; }
html:not([data-sl-visual="novo"]) .sl-grupo { margin-bottom: 12px; }
html:not([data-sl-visual="novo"]) .sl-grupo-titulo { font-weight: bold; margin-bottom: 6px; padding-bottom: 3px; border-bottom: 1px solid #c8c8c8; }
html:not([data-sl-visual="novo"]) .sl-grupo-corpo { display: flex; flex-wrap: wrap; gap: 6px 14px; }
html:not([data-sl-visual="novo"]) .sl-campo { flex: 1 1 140px; min-width: 0; }
html:not([data-sl-visual="novo"]) .sl-c12, html:not([data-sl-visual="novo"]) .sl-full { flex-basis: 100%; }
html:not([data-sl-visual="novo"]) .sl-campo > label { display: block; font-weight: bold; }
html:not([data-sl-visual="novo"]) .sl-obrig > label::after { content: " *"; color: #c00; }

/* o CSS do V2 (carregado quando uma tela V2 ja foi aberta) nao pode rebaixar os rotulos dos grupos SL */
html[data-sl-visual="novo"] .ui-dialog2 .fundo .sl-campo > label,
html[data-sl-visual="novo"] .ui-dialog2 .fundo .sl-campo > .sl-rotulo {
    color: var(--sl-heading) !important;
    font-size: var(--sl-fs-sm) !important;
    font-weight: 700 !important;
}
html[data-sl-visual="novo"] .ui-dialog2 .fundo .sl-campo input[type="text"],
html[data-sl-visual="novo"] .ui-dialog2 .fundo .sl-campo input:not([type]),
html[data-sl-visual="novo"] .ui-dialog2 .fundo .sl-campo .ui-inputfield {
    height: calc(var(--sl-ctl-h) + 6px) !important;
    padding: 0 12px !important;
    font-size: var(--sl-fs-md) !important;
    color: var(--sl-text) !important;
    border: 1.5px solid var(--sl-field-border) !important;
    border-radius: var(--sl-ctl-r) !important;
}
html[data-sl-visual="novo"] .ui-dialog2 .fundo .sl-obrig input[type="text"],
html[data-sl-visual="novo"] .ui-dialog2 .fundo .sl-obrig input:not([type]) {
    border-left: 4px solid var(--sl-danger) !important;
}

html[data-sl-visual="novo"] .ui-dialog2 .fundo .sl-campo textarea.ui-inputfield,
html[data-sl-visual="novo"] .sl-campo textarea.ui-inputtextarea {
    height: auto !important;
    min-height: calc(var(--sl-ctl-h) * 2) !important;
    padding: 8px 12px !important;
    background: var(--sl-surface) !important;
    background-image: none !important;
    color: var(--sl-text) !important;
    border: 1.5px solid var(--sl-field-border) !important;
    border-radius: calc(var(--sl-ctl-r) - 2px) !important;
}
html[data-sl-visual="novo"] .ui-dialog2 .fundo .sl-campo textarea.ui-inputfield:hover,
html[data-sl-visual="novo"] .sl-campo textarea.ui-inputtextarea:hover {
    border-color: var(--sl-heading) !important;
}
html[data-sl-visual="novo"] .ui-dialog2 .fundo .sl-campo textarea.ui-inputfield:focus,
html[data-sl-visual="novo"] .sl-campo textarea.ui-inputtextarea:focus {
    border-color: var(--sl-primary) !important;
    box-shadow: 0 0 0 3.5px var(--sl-primary-soft);
}

/* campos soltos na coluna2 de formularios empilhados usam a largura da celula (vence o width inline legado) */
html[data-sl-visual="novo"] .sl-empilhado td.coluna2 > input[type="text"],
html[data-sl-visual="novo"] .sl-empilhado td.coluna2 > input:not([type]),
html[data-sl-visual="novo"] .sl-empilhado td.coluna2 > select,
html[data-sl-visual="novo"] .sl-empilhado td.coluna2 > textarea {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
}
html[data-sl-visual="novo"] .ui-dialog2 .fundo .sl-empilhado td.coluna2 input[type="text"],
html[data-sl-visual="novo"] .ui-dialog2 .fundo .sl-empilhado td.coluna2 input:not([type]),
html[data-sl-visual="novo"] .ui-dialog2 .fundo .sl-empilhado td.coluna2 .ui-inputfield {
    height: calc(var(--sl-ctl-h) + 6px) !important;
    padding: 0 12px !important;
    font-size: var(--sl-fs-md) !important;
    color: var(--sl-text) !important;
    border: 1.5px solid var(--sl-field-border) !important;
    border-radius: var(--sl-ctl-r) !important;
}
html[data-sl-visual="novo"] .ui-dialog2 .fundo .sl-empilhado tr:has(img[src*="obrigatorio"]) > td.coluna2 input[type="text"],
html[data-sl-visual="novo"] .ui-dialog2 .fundo .sl-empilhado tr:has(img[src*="obrigatorio"]) > td.coluna2 input:not([type]) {
    border-left: 4px solid var(--sl-danger) !important;
}
html[data-sl-visual="novo"] .ui-dialog2 .fundo .sl-empilhado td.coluna1,
html[data-sl-visual="novo"] .ui-dialog2 .fundo .sl-empilhado td.coluna1 label {
    color: var(--sl-heading) !important;
}
html[data-sl-visual="novo"] .sl-empilhado td.coluna2:not(:has(> img, > button, > .ui-button, > a, > span:not([id]), > input ~ input, > input ~ select, > select ~ input)) {
    flex-wrap: wrap;
}
html[data-sl-visual="novo"] .sl-empilhado td.coluna2:not(:has(> img, > button, > .ui-button, > a, > span:not([id]), > input ~ input, > input ~ select, > select ~ input)) > input[type="text"],
html[data-sl-visual="novo"] .sl-empilhado td.coluna2:not(:has(> img, > button, > .ui-button, > a, > span:not([id]), > input ~ input, > input ~ select, > select ~ input)) > input:not([type]),
html[data-sl-visual="novo"] .sl-empilhado td.coluna2:not(:has(> img, > button, > .ui-button, > a, > span:not([id]), > input ~ input, > input ~ select, > select ~ input)) > select,
html[data-sl-visual="novo"] .sl-empilhado td.coluna2:not(:has(> img, > button, > .ui-button, > a, > span:not([id]), > input ~ input, > input ~ select, > select ~ input)) > textarea {
    flex: 1 1 100%;
}

/* listas independentes (ex.: enderecos e telefones): lado a lado quando ha espaco, uma abaixo da outra quando nao */
.sl-lados { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.sl-lados > .sl-lado { flex: 1 1 420px; min-width: 0; }
html[data-sl-visual="novo"] .sl-lados .ui-datatable { width: 100% !important; }
.sl-lados > .sl-lado:has(td.coluna1) { flex-basis: 100%; }
html[data-sl-visual="novo"] .sl-lados table:has(> tbody > tr > td.coluna1) { width: 100%; }
html[data-sl-visual="novo"] .sl-lados .ui-panel { width: 100% !important; box-sizing: border-box; }
html[data-sl-visual="novo"] .sl-empilhado table:has(> tbody > tr > td.coluna1) > tbody > tr:has(> td:nth-child(4)):not(:has(> td:nth-child(5))) {
    grid-column: span 2;
}
html[data-sl-visual="novo"] .sl-empilhado td.coluna2:has(> input ~ input) > input:first-of-type { flex: 3 1 0; }
html[data-sl-visual="novo"] .sl-empilhado td.coluna2:has(> input ~ input) > input ~ input { flex: 1 1 0; }
html[data-sl-visual="novo"] .sl-empilhado table:has(> tbody > tr > td.coluna1) > tbody > tr:has(> td.coluna2 > input ~ input) { grid-column: span 2; }

/* rolagem vertical obrigatoria nos dialogos de cadastro/processo (rotulo acima do campo aumenta a altura);
   !important porque o padraoCadastroV2.css, ao ser carregado, poe overflow:hidden em todo .ui-dialog2 */
html[data-sl-visual="novo"] .ui-dialog2 .ui-dialog-content {
    max-height: calc(100vh - 120px);
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
html[data-sl-visual="novo"] .ui-dialog2 .ui-toolbar {
    top: -12px;
    margin-top: -12px;
    padding-top: 14px !important;
}

/* dialogo de cadastro/processo ocupa a altura util da tela; grids internos nao colam nos campos nem na borda inferior */
html[data-sl-visual="novo"] .ui-dialog2 .ui-dialog-content {
    height: calc(100vh - 140px) !important;
    max-height: calc(100vh - 140px);
    padding-bottom: 12px !important;
}
html[data-sl-visual="novo"] .ui-dialog2 .ui-datatable:not(.slLegadoTb) {
    margin-top: 8px;
    margin-bottom: 10px;
}
/* dialogo maximizado: o conteudo ocupa a altura toda da janela (menos a barra de titulo); com calc(100vh - 140px)
   sobravam ~70px vazios embaixo e a listagem ficava com menos linhas do que cabem na tela */
html[data-sl-visual="novo"] .ui-dialog2.ui-dialog-maximized .ui-dialog-content {
    height: calc(100vh - 76px) !important;
    max-height: calc(100vh - 76px) !important;
}
html[data-sl-visual="novo"] .sl-lados { margin: 24px 0; }
html[data-sl-visual="novo"] .ui-dialog2 .sl-lados .ui-datatable:not(.slLegadoTb) { margin: 0; }
html[data-sl-visual="novo"] .sl-empilhado table:has(> tbody > tr > td.coluna1) { padding-bottom: 20px; }

/* campo composto (ex.: RG = numero, orgao, UF, data): ocupa 2 colunas; o rotulo do grupo fica sozinho a esquerda
   e cada parte tem o proprio rotulo acima do campo */
html[data-sl-visual="novo"] .sl-empilhado table:has(> tbody > tr > td.coluna1) > tbody > tr:has(> td.coluna2 > table) {
    grid-column: span 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
}
html[data-sl-visual="novo"] .sl-empilhado tr:has(> td.coluna2 > table) > td.coluna1 {
    align-self: start;
}
html[data-sl-visual="novo"] .sl-empilhado td.coluna2 > table {
    display: block !important;
    width: 100%;
    padding: 0;
}
html[data-sl-visual="novo"] .sl-empilhado td.coluna2 > table > tbody {
    display: grid !important;
    grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 1.4fr) minmax(0, 3fr);
    gap: 5px 10px;
}
html[data-sl-visual="novo"] .sl-empilhado td.coluna2 > table > tbody > tr { display: contents !important; }
html[data-sl-visual="novo"] .sl-empilhado td.coluna2 > table > tbody > tr > td {
    display: block !important;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
html[data-sl-visual="novo"] .sl-empilhado td.coluna2 > table > tbody > tr:first-child > td {
    color: var(--sl-heading);
    font-size: var(--sl-fs-sm);
    font-weight: 700;
}
html[data-sl-visual="novo"] .sl-empilhado td.coluna2 > table input[type="text"],
html[data-sl-visual="novo"] .sl-empilhado td.coluna2 > table select,
html[data-sl-visual="novo"] .sl-empilhado td.coluna2 > table .ui-selectonemenu {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
}

/* botoes de acao da linha (editar, remover...): quadrados, com borda propria e espaco entre si, todos na mesma linha.
   Ate 3 por coluna; mais que isso deve ir para um dialogo de "mais opcoes". */
html[data-sl-visual="novo"] .ui-datatable tbody.ui-datatable-data > tr > td:has(> .ui-button-icon-only) {
    white-space: nowrap;
    min-width: 48px;
}
html[data-sl-visual="novo"] .ui-datatable tbody.ui-datatable-data > tr > td:has(> .ui-button-icon-only ~ .ui-button-icon-only) {
    min-width: 92px;
}
html[data-sl-visual="novo"] .ui-datatable tbody.ui-datatable-data > tr > td:has(> .ui-button-icon-only ~ .ui-button-icon-only ~ .ui-button-icon-only) {
    min-width: 136px;
}
html[data-sl-visual="novo"] .ui-datatable tbody.ui-datatable-data > tr > td > .ui-button.ui-button-icon-only {
    box-sizing: border-box;
    width: 34px !important;
    height: 34px !important;
    margin: 0 4px !important;
    vertical-align: middle;
    background: var(--sl-surface) !important;
    border: 1.5px solid var(--sl-border) !important;
    border-radius: 8px !important;
}
html[data-sl-visual="novo"] .ui-datatable tbody.ui-datatable-data > tr > td > .ui-button.ui-button-icon-only:hover {
    background: var(--sl-primary-soft) !important;
    border-color: var(--sl-primary) !important;
}

/* campo obrigatorio dos componentes mz-* (rotulo com .mz-required): barra vermelha, como nos demais cadastros */
html[data-sl-visual="novo"] .mz-field:has(.mz-required) input[type="text"],
html[data-sl-visual="novo"] .mz-field:has(.mz-required) .mz-input,
html[data-sl-visual="novo"] .mz-field:has(.mz-required) .ui-autocomplete-input {
    border-left: 4px solid var(--sl-danger) !important;
}

/* campos dos componentes mz-*: mesmo tamanho dos campos sl-campo */
html[data-sl-visual="novo"] .mz-field input[type="text"],
html[data-sl-visual="novo"] .mz-field input[type="password"],
html[data-sl-visual="novo"] .mz-field input:not([type]),
html[data-sl-visual="novo"] .mz-field select,
html[data-sl-visual="novo"] .mz-field .ui-autocomplete-input {
    box-sizing: border-box;
    height: calc(var(--sl-ctl-h) + 6px) !important;
    padding: 0 12px;
    font-size: var(--sl-fs-md);
    font-family: var(--sl-font);
}
html[data-sl-visual="novo"] .mz-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366768a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}
/* coluna de acao estreita (largura fixa da tela): os botoes dividem a celula em vez de serem cortados */
html[data-sl-visual="novo"] .ui-datatable tbody.ui-datatable-data > tr > td:has(> .ui-button-icon-only ~ .ui-button-icon-only) > .ui-button.ui-button-icon-only {
    width: min(34px, calc(50% - 8px)) !important;
    margin: 0 4px !important;
}
html[data-sl-visual="novo"] .ui-datatable tbody.ui-datatable-data > tr > td:has(> .ui-button-icon-only ~ .ui-button-icon-only ~ .ui-button-icon-only) > .ui-button.ui-button-icon-only {
    width: min(34px, calc(33% - 8px)) !important;
}

/* ============================================================
   Listagens compactas, listas filhas e cores dos botoes de acao
   ============================================================ */
html[data-sl-visual="novo"] {
    --sl-acao: 26px;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr > td {
    padding: 4px 8px;
}
html[data-sl-visual="novo"] .ui-datatable tbody.ui-datatable-data > tr > td:has(> .ui-button-icon-only) {
    min-width: 40px;
}
html[data-sl-visual="novo"] .ui-datatable tbody.ui-datatable-data > tr > td:has(> .ui-button-icon-only ~ .ui-button-icon-only) {
    min-width: 72px;
}
html[data-sl-visual="novo"] .ui-datatable tbody.ui-datatable-data > tr > td:has(> .ui-button-icon-only ~ .ui-button-icon-only ~ .ui-button-icon-only) {
    min-width: 104px;
}
html[data-sl-visual="novo"] .ui-datatable tbody.ui-datatable-data > tr > td > .ui-button.ui-button-icon-only,
html[data-sl-visual="novo"] .ui-datatable tbody.ui-datatable-data > tr > td:has(> .ui-button-icon-only ~ .ui-button-icon-only) > .ui-button.ui-button-icon-only,
html[data-sl-visual="novo"] .ui-datatable tbody.ui-datatable-data > tr > td:has(> .ui-button-icon-only ~ .ui-button-icon-only ~ .ui-button-icon-only) > .ui-button.ui-button-icon-only {
    width: min(var(--sl-acao), calc(50% - 6px)) !important;
    height: var(--sl-acao) !important;
    margin: 0 3px !important;
    border-radius: 7px !important;
}

/* colunas .sl-col-ajusta: so' a largura do titulo/valor; as demais dividem o resto por percentual */
html[data-sl-visual="novo"] .ui-datatable[id$=":grid"] table:has(.sl-col-ajusta),
html[data-sl-visual="novo"] .ui-datatable.sl-tabela-ajusta table:has(.sl-col-ajusta),
html[data-sl-visual="novo"] .ui-datatable.sl-tabela-filtro table:has(.sl-col-ajusta) {
    table-layout: auto !important;
    width: 100% !important;
}
html[data-sl-visual="novo"] .ui-datatable[id$=":grid"] .sl-col-ajusta,
html[data-sl-visual="novo"] .ui-datatable.sl-tabela-ajusta .sl-col-ajusta,
html[data-sl-visual="novo"] .ui-datatable.sl-tabela-filtro .sl-col-ajusta {
    width: 1%;
    white-space: nowrap;
}

/* titulo de coluna sempre numa linha: a celula da tabelinha do h:panelGrid (titulo + campo de filtro) herdava
   white-space normal / overflow hidden e, em coluna estreita (sl-col-ajusta), quebrava o titulo letra por letra */
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) thead th,
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) thead th table td {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) thead th table td {
    overflow: visible !important;
    min-width: max-content;
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) thead th table {
    width: auto !important;
    min-width: max-content;
}
/* coluna "Acao": largura para ate 3 icones (26px + 3px de margem de cada lado = 32px cada) + padding da celula */
html[data-sl-visual="novo"] .ui-datatable thead th.sl-col-acoes-w {
    width: 112px !important;
    min-width: 112px;
    white-space: nowrap;
}
html[data-sl-visual="novo"] .ui-datatable thead th.sl-col-acoes-w.sl-acao-2 {
    width: 84px !important;
    min-width: 84px;
}

/* coluna de acoes do cadastro padrao: botoes distribuidos de forma uniforme */
html[data-sl-visual="novo"] .ui-datatable tbody.ui-datatable-data > tr > td.sl-col-acoes {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    align-content: space-evenly;
}

html[data-sl-visual="novo"] .ui-datatable.sl-tabela-ajusta thead th,
html[data-sl-visual="novo"] .ui-datatable.sl-tabela-filtro thead th,
html[data-sl-visual="novo"] .ui-datatable.sl-tabela-filtro thead th table td {
    white-space: nowrap !important;
}
html[data-sl-visual="novo"] .ui-datatable.sl-tabela-filtro thead th table td {
    overflow: visible !important;
}
html[data-sl-visual="novo"] .ui-datatable.sl-tabela-filtro thead th table {
    table-layout: auto !important;
    width: auto !important;
    margin: 0 auto;
}
html[data-sl-visual="novo"] .ui-datatable.sl-tabela-ajusta tbody.ui-datatable-data > tr > td.sl-col-acoes,
html[data-sl-visual="novo"] .ui-datatable.sl-tabela-filtro tbody.ui-datatable-data > tr > td.sl-col-acoes {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

/* "mais opcoes": a partir de 4 botoes na celula, 2 ficam e o resto vai para o menu de reticencias (sl-mais-opcoes.js) */
html[data-sl-visual="novo"] .sl-mais-toggle {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: var(--sl-acao);
    height: var(--sl-acao);
    margin: 0 3px;
    border: 1.5px solid var(--sl-field-border);
    border-radius: 7px;
    background: var(--sl-surface);
    color: var(--sl-heading);
    cursor: pointer;
}
html[data-sl-visual="novo"] .sl-mais-toggle:hover,
html[data-sl-visual="novo"] .sl-mais-toggle:focus-visible {
    background: var(--sl-primary);
    border-color: var(--sl-primary);
    color: var(--sl-on-primary);
    outline: none;
}
html[data-sl-visual="novo"] .sl-mais-td {
    white-space: nowrap;
}
html[data-sl-visual="novo"] .sl-mais-pop {
    display: none;
    position: fixed;
    z-index: 100000;
    gap: 6px;
    padding: 6px;
    background: var(--sl-surface);
    border: 1.5px solid var(--sl-border);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
html[data-sl-visual="novo"] .sl-mais-pop.sl-mais-aberto {
    display: flex;
}
html[data-sl-visual="novo"] .sl-mais-pop > .ui-button {
    width: var(--sl-acao) !important;
    height: var(--sl-acao) !important;
    margin: 0 !important;
    border-radius: 7px !important;
}

/* botoes de acao com cor propria: editar (primaria), remover/cancelar (perigo), adicionar/confirmar (sucesso) */
html[data-sl-visual="novo"] .ui-dialog2 .ui-button:not(.buttonSetting):not(.buttonSetting2):not(.buttonSetting3):has(.iconEditar) {
    background: var(--sl-primary-soft) !important;
    border-color: var(--sl-primary) !important;
    color: var(--sl-primary) !important;
}
html[data-sl-visual="novo"] .ui-dialog2 .ui-button:not(.buttonSetting):not(.buttonSetting2):not(.buttonSetting3):has(.iconRemover),
html[data-sl-visual="novo"] .ui-dialog2 .ui-button:not(.buttonSetting):not(.buttonSetting2):not(.buttonSetting3):has(.iconFechar) {
    background: var(--sl-danger-soft) !important;
    border-color: var(--sl-danger) !important;
    color: var(--sl-danger) !important;
}
html[data-sl-visual="novo"] .ui-dialog2 .ui-button:not(.buttonSetting):not(.buttonSetting2):not(.buttonSetting3):has(.iconAdicionar),
html[data-sl-visual="novo"] .ui-dialog2 .ui-button:not(.buttonSetting):not(.buttonSetting2):not(.buttonSetting3):has(.iconOk) {
    background: var(--sl-success-soft) !important;
    border-color: var(--sl-success) !important;
    color: var(--sl-success) !important;
}
html[data-sl-visual="novo"] .ui-dialog2 .ui-button:not(.buttonSetting):not(.buttonSetting2):not(.buttonSetting3):has(.iconEditar):enabled:hover {
    background: var(--sl-primary) !important;
    color: var(--sl-on-primary) !important;
}
html[data-sl-visual="novo"] .ui-dialog2 .ui-button:not(.buttonSetting):not(.buttonSetting2):not(.buttonSetting3):has(.iconRemover):enabled:hover,
html[data-sl-visual="novo"] .ui-dialog2 .ui-button:not(.buttonSetting):not(.buttonSetting2):not(.buttonSetting3):has(.iconFechar):enabled:hover {
    background: var(--sl-danger) !important;
    color: #fff !important;
}
html[data-sl-visual="novo"] .ui-dialog2 .ui-button:not(.buttonSetting):not(.buttonSetting2):not(.buttonSetting3):has(.iconAdicionar):enabled:hover,
html[data-sl-visual="novo"] .ui-dialog2 .ui-button:not(.buttonSetting):not(.buttonSetting2):not(.buttonSetting3):has(.iconOk):enabled:hover {
    background: var(--sl-success) !important;
    color: #fff !important;
}

/* varios botoes no cabecalho de uma lista filha: agrupados a esquerda */
html[data-sl-visual="novo"] .ui-datatable:not([id$=":grid"]) > .ui-datatable-header > .sl-header-botoes {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
}
/* tabela com rolagem: a copia do cabecalho (theadclone) so' serve para medir as colunas, nao pode aparecer */
html[data-sl-visual="novo"] .ui-datatable-scrollable-theadclone th {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    overflow: hidden;
}
html[data-sl-visual="novo"] .ui-datatable-scrollable-theadclone th * {
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
/* checkbox nativo (h:selectBooleanCheckbox) no mesmo visual do p:selectBooleanCheckbox */
html[data-sl-visual="novo"] input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin: 0;
    vertical-align: middle;
    border: 1.5px solid var(--sl-field-border);
    border-radius: 5px;
    background: var(--sl-surface);
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}
html[data-sl-visual="novo"] input[type="checkbox"]:hover:not(:disabled) {
    border-color: var(--sl-primary);
}
html[data-sl-visual="novo"] input[type="checkbox"]:checked {
    background-color: var(--sl-primary);
    border-color: var(--sl-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
}
html[data-sl-visual="novo"] input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--sl-primary-soft), 0 0 0 4.5px var(--sl-primary);
}
html[data-sl-visual="novo"] input[type="checkbox"]:disabled {
    opacity: .4;
    cursor: not-allowed;
}
html[data-sl-visual="novo"] input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin: 0;
    vertical-align: middle;
    border: 1.5px solid var(--sl-field-border);
    border-radius: 50%;
    background: var(--sl-surface);
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}
html[data-sl-visual="novo"] input[type="radio"]:hover:not(:disabled) {
    border-color: var(--sl-primary);
}
html[data-sl-visual="novo"] input[type="radio"]:checked {
    background-color: var(--sl-primary);
    border-color: var(--sl-primary);
    background-image: radial-gradient(circle, #fff 0 30%, transparent 34%);
}
html[data-sl-visual="novo"] input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--sl-primary-soft), 0 0 0 4.5px var(--sl-primary);
}
html[data-sl-visual="novo"] input[type="radio"]:disabled {
    opacity: .4;
    cursor: not-allowed;
}
/* tabela de permissoes: linhas alternadas e destaque ao passar o mouse */
html[data-sl-visual="novo"] .ui-datatable:has(.sl-perm-col) tbody tr.ui-datatable-odd > td {
    background: var(--sl-surface-alt);
}
html[data-sl-visual="novo"] .ui-datatable:has(.sl-perm-col) tbody tr:hover > td {
    background: var(--sl-primary-soft);
}
html[data-sl-visual="novo"] .ui-datatable:has(.sl-perm-col) tbody td {
    border-color: var(--sl-border);
}

/* caixas de selecao do PrimeFaces (p:selectBooleanCheckbox, p:selectCheckboxMenu) */
html[data-sl-visual="novo"] .ui-chkbox-box {
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 1.5px solid var(--sl-field-border) !important;
    border-radius: 5px;
    background: var(--sl-surface) !important;
    box-shadow: none !important;
}
html[data-sl-visual="novo"] .ui-chkbox-box.ui-state-active {
    background: var(--sl-primary) !important;
    border-color: var(--sl-primary) !important;
}
html[data-sl-visual="novo"] .ui-chkbox-box .ui-chkbox-icon {
    filter: brightness(0) invert(1);
}
html[data-sl-visual="novo"] .ui-selectcheckboxmenu {
    box-sizing: border-box;
    width: 100% !important;
    min-height: calc(var(--sl-ctl-h) + 6px);
    border: 1.5px solid var(--sl-field-border) !important;
    border-radius: calc(var(--sl-ctl-r) - 2px);
    background: var(--sl-surface) !important;
    color: var(--sl-text);
}
html[data-sl-visual="novo"] .ui-selectcheckboxmenu .ui-selectcheckboxmenu-label-container,
html[data-sl-visual="novo"] .ui-selectcheckboxmenu .ui-selectcheckboxmenu-trigger {
    background: transparent !important;
    border: 0 !important;
    color: var(--sl-heading);
}
html[data-sl-visual="novo"] .ui-selectcheckboxmenu .ui-selectcheckboxmenu-token {
    background: var(--sl-primary-soft) !important;
    color: var(--sl-primary) !important;
    border: 0 !important;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: var(--sl-fs-sm);
    font-weight: 700;
}
html[data-sl-visual="novo"] .ui-selectcheckboxmenu-panel {
    background: var(--sl-surface) !important;
    color: var(--sl-text);
    border: 1.5px solid var(--sl-border) !important;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
html[data-sl-visual="novo"] .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header {
    background: var(--sl-surface-alt) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sl-border) !important;
}
html[data-sl-visual="novo"] .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-items .ui-selectcheckboxmenu-item:hover {
    background: var(--sl-primary-soft) !important;
}

/* situacao do usuario na lista: etiqueta (ativo/inativo) e linha esmaecida (inativo) */
html[data-sl-visual="novo"] .sl-situacao {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--sl-fs-xs, 11px);
    font-weight: 700;
}
html[data-sl-visual="novo"] .sl-situacao-ativo {
    background: var(--sl-success-soft);
    color: var(--sl-success);
}
html[data-sl-visual="novo"] .sl-situacao-inativo {
    background: var(--sl-danger-soft);
    color: var(--sl-danger);
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.sl-linha-pendente > td {
    background: var(--sl-warning-soft);
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.sl-linha-pendente > td:first-child {
    box-shadow: inset 4px 0 0 var(--sl-warning);
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.sl-linha-inativa > td {
    color: var(--sl-muted);
    background: var(--sl-surface-alt);
}

/* Controle de Acesso: cabecalho das colunas com o titulo e, logo abaixo, o botao de marcar todos, centralizados */
html[data-sl-visual="novo"] .sl-perm-cab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
}
html[data-sl-visual="novo"] .sl-perm-col {
    text-align: center;
    white-space: nowrap;
}
html[data-sl-visual="novo"] .sl-perm-filtro {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
html[data-sl-visual="novo"] .sl-perm-filtro input {
    width: 100% !important;
    box-sizing: border-box;
}

/* lista filha (tabela com titulo): adicionar a esquerda, titulo no meio, paginacao a direita */
html[data-sl-visual="novo"] .ui-datatable:not([id$=":grid"]):has(> .ui-datatable-header) {
    position: relative;
}
html[data-sl-visual="novo"] .ui-datatable:not([id$=":grid"]) > .ui-datatable-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
    text-align: center;
}
html[data-sl-visual="novo"] .ui-datatable:not([id$=":grid"]) > .ui-datatable-header > .ui-button {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}
html[data-sl-visual="novo"] .ui-datatable:not([id$=":grid"]) > .ui-datatable-header + .ui-paginator-top {
    position: absolute;
    top: 0;
    right: 0;
    height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 12px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--sl-header-fg) !important;
}
html[data-sl-visual="novo"] .ui-datatable:not([id$=":grid"]) > .ui-datatable-header + .ui-paginator-top *,
html[data-sl-visual="novo"] .ui-datatable:not([id$=":grid"]) > .ui-datatable-header + .ui-paginator-top a {
    color: var(--sl-header-fg) !important;
}
html[data-sl-visual="novo"] .ui-datatable:not([id$=":grid"]) > .ui-datatable-header + .ui-paginator-top .ui-state-active {
    background: rgba(255, 255, 255, .25) !important;
}
html[data-sl-visual="novo"] .ui-datatable:not([id$=":grid"]) > .ui-datatable-header + .ui-paginator-top a:hover:not(.ui-state-active):not(.ui-state-disabled) {
    background: rgba(255, 255, 255, .18) !important;
}

/* distancias padrao do cadastro/processo: 16px entre titulo da janela, barra de botoes e o conteudo (listagem ou formulario) */
html[data-sl-visual="novo"] .ui-dialog2 .ui-toolbar {
    padding-top: 16px !important;
    padding-bottom: 11px !important;
}
html[data-sl-visual="novo"] .ui-dialog2 .ui-datatable:not(.slLegadoTb)[id$=":grid"] {
    margin-top: 0;
}

/* dialogo de confirmacao (sl-confirmar.js) */
.sl-conf-ov {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .5);
}
.sl-conf-ov.on { display: flex; }
.sl-conf-dlg {
    display: flex;
    flex-direction: column;
    width: min(480px, 100%);
    background: var(--sl-surface, #fff);
    color: var(--sl-text, #333);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(16, 32, 56, .4);
    overflow: hidden;
    font: 13px var(--sl-font, Arial, sans-serif);
}
.sl-conf-tit {
    padding: 12px 18px;
    background: var(--sl-header-bg, #003366);
    color: var(--sl-header-fg, #fff);
    font-weight: 700;
}
.sl-conf-msg {
    padding: 18px;
    line-height: 1.5;
    font-size: 14px;
}
.sl-conf-rod {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--sl-border, #e2e2e2);
    background: var(--sl-surface-alt, #fafafa);
}
.sl-conf-btn {
    min-width: 110px;
    height: 32px;
    padding: 0 16px;
    border-radius: 8px;
    font: 600 12px var(--sl-font, Arial, sans-serif);
    cursor: pointer;
}
.sl-conf-ok {
    background: var(--sl-danger, #C0392B);
    border: 1.5px solid var(--sl-danger, #C0392B);
    color: #fff;
}
.sl-conf-cancelar {
    background: transparent;
    border: 1.5px solid var(--sl-primary, #24374B);
    color: var(--sl-primary, #24374B);
}
.sl-conf-cancelar:hover { background: var(--sl-primary-soft, rgba(36, 55, 75, .1)); }
.sl-conf-btn:focus-visible { outline: 3px solid var(--sl-primary-soft, rgba(36, 55, 75, .3)); outline-offset: 2px; }

/* Compras: passo a passo (p:steps), resumo da compra e rodape dos passos */
html[data-sl-visual="novo"] .ui-steps.sl-passos {
    margin: 0 0 var(--sl-form-gap, 12px);
}
html[data-sl-visual="novo"] .ui-steps.sl-passos > ul {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent;
    border: 0;
}
html[data-sl-visual="novo"] .ui-steps.sl-passos .ui-steps-item {
    flex: 1 1 0;
    width: auto !important;
    margin: 0;
    background: transparent;
    border: 0;
    text-align: center;
}
html[data-sl-visual="novo"] .ui-steps.sl-passos .ui-steps-item .ui-menuitem-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: auto;
    padding: 4px 6px;
    background: transparent;
    cursor: default;
}
html[data-sl-visual="novo"] .ui-steps.sl-passos .ui-steps-item .ui-steps-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 50%;
    background: var(--sl-primary-soft);
    color: var(--sl-primary);
    border: 1.5px solid var(--sl-primary);
    font-weight: 700;
}
html[data-sl-visual="novo"] .ui-steps.sl-passos .ui-steps-item {
    opacity: 1 !important;
}
html[data-sl-visual="novo"] .ui-steps.sl-passos .ui-steps-item .ui-steps-title {
    color: var(--sl-muted);
    font-size: var(--sl-fs-sm, 12px);
    font-weight: 600;
}
html[data-sl-visual="novo"] .ui-steps.sl-passos .ui-steps-item.ui-state-highlight .ui-steps-number {
    background: var(--sl-primary);
    color: var(--sl-on-primary);
}
html[data-sl-visual="novo"] .ui-steps.sl-passos .ui-steps-item.ui-state-highlight .ui-steps-title {
    color: var(--sl-heading);
}
html[data-sl-visual="novo"] .sl-resumo-passo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: var(--sl-form-gap, 12px);
    padding: 10px 14px;
    background: var(--sl-header-bg);
    color: var(--sl-header-fg);
    border-radius: var(--sl-ctl-r);
}
html[data-sl-visual="novo"] .sl-resumo-dados {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
}
html[data-sl-visual="novo"] .sl-resumo-item {
    display: flex;
    flex-direction: column;
    font-weight: 700;
}
html[data-sl-visual="novo"] .sl-resumo-item > small {
    font-weight: 400;
    opacity: .8;
    font-size: var(--sl-fs-xs, 11px);
}
html[data-sl-visual="novo"] .sl-resumo-acoes {
    display: flex;
    gap: 6px;
}
html[data-sl-visual="novo"] .sl-rodape-passo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--sl-form-gap, 12px);
    align-items: center;
}
html[data-sl-visual="novo"] .sl-rodape-passo .ui-button:not(.ui-state-disabled):not(:disabled) {
    background: var(--sl-primary-soft) !important;
    border-color: var(--sl-primary) !important;
    color: var(--sl-primary) !important;
}
html[data-sl-visual="novo"] .sl-rodape-passo .ui-button:not(.ui-state-disabled):not(:disabled):hover,
html[data-sl-visual="novo"] .sl-rodape-passo .ui-button:not(.ui-state-disabled):not(:disabled):focus {
    background: var(--sl-primary) !important;
    border-color: var(--sl-primary) !important;
    color: var(--sl-on-primary) !important;
}
html[data-sl-visual="novo"] .sl-contents {
    display: contents;
}
html[data-sl-visual="novo"] .sl-aviso {
    margin-top: var(--sl-form-gap, 12px);
    padding: 10px 14px;
    background: var(--sl-warning-soft);
    border-left: 4px solid var(--sl-warning);
    border-radius: var(--sl-ctl-r);
    font-weight: 700;
}
html[data-sl-visual="novo"] .ui-datatable.sl-tabela-ajusta thead th .ui-column-title,
html[data-sl-visual="novo"] .ui-datatable.sl-tabela-filtro thead th .ui-column-title {
    white-space: nowrap !important;
}

/* Calendario (p:calendar inline do dialogo F2 e popups) */
html[data-sl-visual="novo"] .ui-datepicker {
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: var(--sl-fs-md, 13px);
}
html[data-sl-visual="novo"] body > .ui-datepicker {
    width: 18em;
    max-width: calc(100vw - 16px);
    padding: 8px;
    background: var(--sl-bg);
    border: 1px solid var(--sl-border);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(16, 32, 56, .3);
}
html[data-sl-visual="novo"] body > .ui-datepicker table.ui-datepicker-calendar td > a,
html[data-sl-visual="novo"] body > .ui-datepicker table.ui-datepicker-calendar td > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    box-sizing: border-box;
}
html[data-sl-visual="novo"] .ui-datepicker .ui-datepicker-header {
    position: relative;
    margin: 0 0 8px;
    padding: 8px 36px;
    background: var(--sl-header-bg);
    color: var(--sl-header-fg);
    border: 0;
    border-radius: var(--sl-ctl-r);
}
html[data-sl-visual="novo"] .ui-datepicker .ui-datepicker-title {
    margin: 0;
    line-height: 1.6;
    text-align: center;
    font-weight: 700;
}
html[data-sl-visual="novo"] .ui-datepicker .ui-datepicker-prev,
html[data-sl-visual="novo"] .ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border: 0;
    background: rgba(255, 255, 255, .18);
    border-radius: 50%;
    cursor: pointer;
}
html[data-sl-visual="novo"] .ui-datepicker .ui-datepicker-prev { left: 6px; }
html[data-sl-visual="novo"] .ui-datepicker .ui-datepicker-next { right: 6px; }
html[data-sl-visual="novo"] .ui-datepicker .ui-datepicker-prev:hover,
html[data-sl-visual="novo"] .ui-datepicker .ui-datepicker-next:hover {
    background: rgba(255, 255, 255, .35);
}
html[data-sl-visual="novo"] .ui-datepicker .ui-datepicker-prev .ui-icon,
html[data-sl-visual="novo"] .ui-datepicker .ui-datepicker-next .ui-icon {
    margin: -8px 0 0 -8px;
    filter: brightness(0) invert(1);
}
html[data-sl-visual="novo"] .ui-datepicker table.ui-datepicker-calendar {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 3px;
}
html[data-sl-visual="novo"] .ui-datepicker table.ui-datepicker-calendar th {
    padding: 4px 0;
    color: var(--sl-heading);
    font-size: var(--sl-fs-xs, 11px);
    font-weight: 700;
    text-align: center;
    background: transparent;
    border: 0;
}
html[data-sl-visual="novo"] .ui-datepicker table.ui-datepicker-calendar td {
    padding: 0;
    background: transparent;
    border: 0;
}
html[data-sl-visual="novo"] .ui-datepicker table.ui-datepicker-calendar td > a,
html[data-sl-visual="novo"] .ui-datepicker table.ui-datepicker-calendar td > span {
    display: block;
    padding: 8px 0;
    text-align: center;
    background: var(--sl-surface-alt);
    color: var(--sl-text);
    border: 1px solid var(--sl-border);
    border-radius: calc(var(--sl-ctl-r) - 2px);
    text-decoration: none;
}
html[data-sl-visual="novo"] .ui-datepicker table.ui-datepicker-calendar td > a:hover,
html[data-sl-visual="novo"] .ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-days-cell-over > a {
    background: var(--sl-primary-soft);
    border-color: var(--sl-primary);
}
html[data-sl-visual="novo"] .ui-datepicker table.ui-datepicker-calendar td > a.ui-state-highlight {
    border-color: var(--sl-primary);
    font-weight: 700;
}
html[data-sl-visual="novo"] .ui-datepicker table.ui-datepicker-calendar td > a.ui-state-active {
    background: var(--sl-primary);
    border-color: var(--sl-primary);
    color: var(--sl-on-primary);
    font-weight: 700;
}
html[data-sl-visual="novo"] .ui-datepicker table.ui-datepicker-calendar td.ui-state-disabled > span,
html[data-sl-visual="novo"] .ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-other-month > span {
    background: transparent;
    border-color: transparent;
    color: var(--sl-muted);
    opacity: .45;
}
html[data-sl-visual="novo"] .ui-calendar-dialog .ui-button {
    width: 100%;
    margin-top: var(--sl-form-gap, 12px);
    background: var(--sl-primary) !important;
    border-color: var(--sl-primary) !important;
    color: var(--sl-on-primary) !important;
}
html[data-sl-visual="novo"] .ui-calendar-dialog .ui-button:hover,
html[data-sl-visual="novo"] .ui-calendar-dialog .ui-button:focus {
    background: var(--sl-primary-hover) !important;
}
html[data-sl-visual="novo"] .ui-calendar-dialog .ui-dialog-content {
    overflow: hidden !important;
}
html[data-sl-visual="novo"] .ui-calendar-dialog .ui-calendar {
    display: block;
}

/* Compras, aba Atualizacao de Preco: cor da linha pela situacao do preco definido */
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.sl-linha-sem-preco > td {
    background: var(--sl-info-soft);
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.sl-linha-sem-preco > td:first-child {
    box-shadow: inset 4px 0 0 var(--sl-info);
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.sl-linha-preco-abaixo > td {
    background: var(--sl-warning-soft);
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.sl-linha-preco-abaixo > td:first-child {
    box-shadow: inset 4px 0 0 var(--sl-warning);
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.sl-linha-preco-acima > td,
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.sl-linha-ok > td {
    background: var(--sl-success-soft);
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.sl-linha-preco-acima > td:first-child,
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.sl-linha-ok > td:first-child {
    box-shadow: inset 4px 0 0 var(--sl-success);
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.sl-linha-preco-50 > td {
    background: var(--sl-danger-soft);
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.sl-linha-preco-50 > td:first-child {
    box-shadow: inset 4px 0 0 var(--sl-danger);
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.sl-linha-rejeitada > td,
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.sl-linha-ruptura > td,
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.sl-linha-vencida > td {
    background: var(--sl-danger-soft);
}
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.sl-linha-rejeitada > td:first-child,
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.sl-linha-ruptura > td:first-child,
html[data-sl-visual="novo"] .ui-datatable:not(.slLegadoTb) tbody.ui-datatable-data > tr.sl-linha-vencida > td:first-child {
    box-shadow: inset 4px 0 0 var(--sl-danger);
}
html[data-sl-visual="novo"] .sl-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 var(--sl-form-gap, 12px);
    font-size: var(--sl-fs-xs, 11px);
    color: var(--sl-muted);
}
html[data-sl-visual="novo"] .sl-rodape-passo .sl-legenda {
    margin: 0 0 0 auto;
    align-items: center;
    justify-content: flex-end;
}
html[data-sl-visual="novo"] .sl-legenda-item::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    vertical-align: -2px;
    border-radius: 3px;
    border: 1px solid var(--sl-border);
}
html[data-sl-visual="novo"] .sl-legenda-sem-preco::before { background: var(--sl-info-soft); border-left: 4px solid var(--sl-info); }
html[data-sl-visual="novo"] .sl-legenda-abaixo::before { background: var(--sl-warning-soft); border-left: 4px solid var(--sl-warning); }
html[data-sl-visual="novo"] .sl-legenda-acima::before { background: var(--sl-success-soft); border-left: 4px solid var(--sl-success); }
html[data-sl-visual="novo"] .sl-legenda-50::before { background: var(--sl-danger-soft); border-left: 4px solid var(--sl-danger); }
html[data-sl-visual="novo"] .sl-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--sl-fs-sm, 11px);
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--sl-text);
    background: var(--sl-surface-alt);
    border: 1px solid var(--sl-border);
}
html[data-sl-visual="novo"] .sl-status-aviso { background: var(--sl-warning-soft); border-color: var(--sl-warning); }
html[data-sl-visual="novo"] .sl-status-info { background: var(--sl-info-soft); border-color: var(--sl-info); }
html[data-sl-visual="novo"] .sl-status-erro { background: var(--sl-danger-soft); border-color: var(--sl-danger); }
html[data-sl-visual="novo"] .sl-status-ok { background: var(--sl-success-soft); border-color: var(--sl-success); }
html[data-sl-visual="novo"] .mz-help-btn.ui-button {
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    padding: 0 !important;
    background: var(--sl-primary-soft) !important;
    border: 1px solid var(--sl-primary) !important;
    box-shadow: none !important;
    vertical-align: middle;
}
html[data-sl-visual="novo"] .mz-help-btn .ui-button-text {
    color: var(--sl-primary) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    padding: 0 !important;
}
html[data-sl-visual="novo"] .mz-aviso-info {
    background: var(--sl-info-soft);
    border-left: 3px solid var(--sl-info);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: var(--sl-fs-sm);
    color: var(--sl-text);
}
html[data-sl-visual="novo"] .sl-sem-quebra .sl-campo label {
    white-space: nowrap;
}
html[data-sl-visual="novo"] .mz-sem-imagem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px;
    border: 2px dashed var(--sl-border);
    border-radius: var(--sl-ctl-r);
    background: var(--sl-surface-alt);
    color: var(--sl-muted);
}
html[data-sl-visual="novo"] .mz-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 8px 12px;
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-ctl-r);
    background: var(--sl-surface-alt);
    color: var(--sl-text);
    font-size: var(--sl-fs-sm, 12px);
}
html[data-sl-visual="novo"] .mz-legenda b {
    color: var(--sl-heading);
    text-decoration: underline dotted;
}
html[data-sl-visual="novo"] .mz-rotulo-ajuda {
    cursor: help;
    white-space: nowrap;
    width: fit-content;
    border-bottom: 1px dotted currentColor;
}
html[data-sl-visual="novo"] .mz-help-panel {
    font-size: var(--sl-fs-sm);
    line-height: 1.5;
    color: var(--sl-text);
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
}
html[data-sl-visual="novo"] .mz-help-panel h4 {
    margin: 10px 0 4px 0;
    font-size: 13px;
    color: var(--sl-heading);
}
html[data-sl-visual="novo"] .mz-help-panel p {
    margin: 0 0 6px 0;
}
html[data-sl-visual="novo"] .mz-help-panel table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
}
html[data-sl-visual="novo"] .mz-help-panel th,
html[data-sl-visual="novo"] .mz-help-panel td {
    padding: 4px 6px;
    border: 1px solid var(--sl-border);
    text-align: left;
}
html[data-sl-visual="novo"] .mz-help-panel th {
    background: var(--sl-surface-alt);
}
html[data-sl-visual="novo"] .mz-help-panel .mz-help-nota {
    margin: 6px 0 0 0;
    padding-top: 5px;
    border-top: 1px dotted var(--sl-border);
    color: var(--sl-muted);
    font-style: italic;
}
html[data-sl-visual="novo"] .mz-help-panel {
    max-width: 480px;
}
html[data-sl-visual="novo"] .mz-help-panel.mz-help-panel-wide {
    max-width: 720px;
}
html[data-sl-visual="novo"] .mz-help-panel td:first-child {
    font-weight: 700;
    white-space: nowrap;
    color: var(--sl-heading);
}
html[data-sl-visual="novo"] .mz-help-status-ok {
    color: var(--sl-success);
    font-weight: 700;
}
html[data-sl-visual="novo"] .mz-help-status-warn {
    color: var(--sl-warning);
    font-weight: 700;
}
html[data-sl-visual="novo"] .mz-help-status-paid {
    color: var(--sl-primary);
    font-weight: 700;
}
html[data-sl-visual="novo"] .mz-faixa-bg-1,
html[data-sl-visual="novo"] .mz-faixa-bg-2,
html[data-sl-visual="novo"] .mz-faixa-bg-3,
html[data-sl-visual="novo"] .mz-faixa-bg-4,
html[data-sl-visual="novo"] .mz-faixa-bg-5 {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    white-space: nowrap;
}
html[data-sl-visual="novo"] .mz-faixa-bg-1 { background: var(--sl-danger-soft); color: var(--sl-danger); }
html[data-sl-visual="novo"] .mz-faixa-bg-2 { background: var(--sl-warning-soft); color: var(--sl-warning); }
html[data-sl-visual="novo"] .mz-faixa-bg-3 { background: var(--sl-info-soft); color: var(--sl-info); }
html[data-sl-visual="novo"] .mz-faixa-bg-4 { background: var(--sl-success-soft); color: var(--sl-success); }
html[data-sl-visual="novo"] .mz-faixa-bg-5 { background: var(--sl-success); color: var(--sl-on-primary); }
html[data-sl-visual="novo"] .mz-aviso-pendencia {
    color: var(--sl-danger);
    font-weight: 700;
    cursor: help;
}
html[data-sl-visual="novo"] .mz-extrato-credito {
    color: var(--sl-success);
    font-weight: 700;
}
html[data-sl-visual="novo"] .mz-extrato-debito {
    color: var(--sl-danger);
    font-weight: 700;
}
html[data-sl-visual="novo"] .mz-saldo-total {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--sl-ctl-r);
    font-size: 16px;
    font-weight: 700;
}
html[data-sl-visual="novo"] .mz-saldo-positivo {
    background: var(--sl-success-soft);
    color: var(--sl-success);
}
html[data-sl-visual="novo"] .mz-saldo-negativo {
    background: var(--sl-danger-soft);
    color: var(--sl-danger);
}
html[data-sl-visual="novo"] .mz-extrato-simulacao {
    background: var(--sl-warning-soft);
    font-style: italic;
}
html[data-sl-visual="novo"] .mz-extrato-badge-simulacao {
    color: var(--sl-warning);
    font-weight: 700;
}
html[data-sl-visual="novo"] .mz-extrato-badge-fechado {
    color: var(--sl-muted);
}
html[data-sl-visual="novo"] .mz-help-status-blocked {
    color: var(--sl-danger);
    font-weight: 700;
}
html[data-sl-visual="novo"] .sl-opcoes {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 4px 0;
}
html[data-sl-visual="novo"] .sl-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--sl-fs-md);
    font-weight: 600;
    color: var(--sl-text);
    cursor: pointer;
}
html[data-sl-visual="novo"] .sl-check input[type="checkbox"] {
    width: var(--sl-ctl-h);
    height: var(--sl-ctl-h);
    flex: none;
}
html[data-sl-visual="novo"] .sl-check input[type="checkbox"]:checked { background-size: 22px; }
html[data-sl-visual="novo"] .sl-campo:has(> .sl-check),
html[data-sl-visual="novo"] .sl-campo:has(> .sl-acc > .sl-check) { justify-content: flex-end; }
html[data-sl-visual="novo"] .sl-radio { border-collapse: separate; border-spacing: 0; }
html[data-sl-visual="novo"] .sl-radio td { padding: 0 24px 0 0; white-space: nowrap; vertical-align: middle; }
html[data-sl-visual="novo"] .sl-radio input[type="radio"] {
    width: var(--sl-ctl-h);
    height: var(--sl-ctl-h);
    flex: none;
}
html[data-sl-visual="novo"] .sl-radio label {
    margin-left: 10px;
    vertical-align: middle;
    font-size: var(--sl-fs-md);
    font-weight: 600;
    color: var(--sl-text);
    cursor: pointer;
}
html[data-sl-visual="novo"] .sl-radio input[type="radio"]:focus + label {
    background-color: transparent;
    border-color: transparent;
    color: var(--sl-text);
}
html[data-sl-visual="novo"] .sl-cab-lista {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    width: 100%;
}
html[data-sl-visual="novo"] .sl-cab-esq {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    justify-self: start;
}
html[data-sl-visual="novo"] .sl-cab-meio {
    justify-self: center;
    text-align: center;
}
html[data-sl-visual="novo"] .sl-cab-dir {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-self: end;
    white-space: nowrap;
}
@media (max-width: 900px) {
    html[data-sl-visual="novo"] .sl-cab-lista { grid-template-columns: 1fr; }
    html[data-sl-visual="novo"] .sl-cab-meio,
    html[data-sl-visual="novo"] .sl-cab-dir { justify-self: start; }
    html[data-sl-visual="novo"] .sl-cab-dir {
        flex-wrap: wrap;
        white-space: normal;
        max-width: 100%;
    }
}
html[data-sl-visual="novo"] .sl-linha {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 16px;
}
html[data-sl-visual="novo"] .sl-linha > .sl-campo-ch {
    grid-column: auto;
    flex: 0 1 calc(var(--ch, 12) * 1ch + 30px);
    min-width: 0;
    max-width: 100%;
}
html[data-sl-visual="novo"] .sl-linha > .sl-campo-fit {
    grid-column: auto;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
}
html[data-sl-visual="novo"] .sl-linha > .sl-campo-resto {
    grid-column: auto;
    flex: 1 1 220px;
    min-width: 0;
}
html[data-sl-visual="novo"] .sl-linha > .sl-campo-cresce {
    grid-column: auto;
    flex: 1 1 calc(var(--ch, 24) * 1ch + 30px);
    min-width: 0;
    max-width: 100%;
}
html[data-sl-visual="novo"] .sl-linha > .sl-full {
    flex: 1 1 100%;
}
html[data-sl-visual="novo"] .sl-linha > .sl-campo:not(.sl-campo-ch):not(.sl-campo-fit):not(.sl-campo-cresce):not(.sl-campo-resto):not(.sl-full) {
    grid-column: auto;
    flex: 1 1 200px;
    min-width: 0;
}
html[data-sl-visual="novo"] .sl-selo {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 3px 14px;
    border: 2px solid var(--sl-border);
    border-radius: 999px;
    background: var(--sl-surface-alt);
    color: var(--sl-text);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}
html[data-sl-visual="novo"] .sl-selo-ok {
    background: var(--sl-success-soft);
    border-color: var(--sl-success);
    color: var(--sl-success);
}
html[data-sl-visual="novo"] .sl-selo-aviso {
    background: var(--sl-warning-soft);
    border-color: var(--sl-warning);
    color: var(--sl-warning);
}
html[data-sl-visual="novo"] .sl-msg {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    padding: 10px 14px;
    border-left: 4px solid var(--sl-border);
    border-radius: var(--sl-ctl-r, 5px);
    background: var(--sl-surface-alt);
    color: var(--sl-text);
    font-size: var(--sl-fs-sm, 12px);
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}
html[data-sl-visual="novo"] .sl-msg-ok {
    background: var(--sl-success-soft);
    border-left-color: var(--sl-success);
}
html[data-sl-visual="novo"] .sl-msg-erro {
    background: var(--sl-danger-soft);
    border-left-color: var(--sl-danger);
}
html[data-sl-visual="novo"] .ui-datatable thead th input[type="checkbox"] {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    padding: 0 !important;
}
html[data-sl-visual="novo"] {
    --sl-nfe-entrada: #1f6fb5;
    --sl-nfe-saida: #c0392b;
}
html[data-sl-visual="novo"] .sl-tipo-entrada .sl-grupo,
html[data-sl-visual="novo"] .sl-tipo-entrada .ui-accordion {
    border-left: 4px solid var(--sl-nfe-entrada);
}
html[data-sl-visual="novo"] .sl-tipo-saida .sl-grupo,
html[data-sl-visual="novo"] .sl-tipo-saida .ui-accordion {
    border-left: 4px solid var(--sl-nfe-saida);
}
html[data-sl-visual="novo"] .sl-grade-4 {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 16px;
}
html[data-sl-visual="novo"] .sl-linha > .sl-grade-4 {
    flex: 1 1 100%;
}
html[data-sl-visual="novo"] .sl-grade-4 > .sl-campo {
    grid-column: auto;
}
@container (max-width: 560px) {
    html[data-sl-visual="novo"] .sl-grade-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
html[data-sl-visual="novo"] .sl-grupos-linha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
    align-items: start;
}
html[data-sl-visual="novo"] .sl-lados > .sl-lado-40 {
    flex: 0 0 calc(40% - 8px);
}
html[data-sl-visual="novo"] .sl-lados > .sl-lado-60 {
    flex: 0 0 calc(60% - 8px);
}
@media (max-width: 900px) {
    html[data-sl-visual="novo"] .sl-lados > .sl-lado-40,
    html[data-sl-visual="novo"] .sl-lados > .sl-lado-60 {
        flex: 1 1 100%;
    }
}
html[data-sl-visual="novo"] .sl-grupos-linha.sl-grupos-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
html[data-sl-visual="novo"] .sl-grupos-linha.sl-grupos-1 {
    grid-template-columns: minmax(0, 1fr);
}
html[data-sl-visual="novo"] .sl-grupos-linha.sl-grupos-2 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
html[data-sl-visual="novo"] .sl-grupos-linha.sl-grupos-2 > .sl-grupo {
    flex: 0 0 auto;
    container-type: normal;
    width: max-content;
    max-width: 100%;
}
@media (max-width: 900px) {
    html[data-sl-visual="novo"] .sl-grupos-linha.sl-grupos-5 {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }
    html[data-sl-visual="novo"] .sl-grupos-linha.sl-grupos-2 > .sl-grupo {
        flex: 1 1 100%;
    }
}

/* com uma tela (dialogo maximizado) aberta, a pagina de tras nao ganha rolagem horizontal */
html[data-sl-visual="novo"]:has(.ui-dialog2.ui-dialog-maximized:not([style*="display: none"])),
html[data-sl-visual="novo"]:has(.ui-dialog2.ui-dialog-maximized:not([style*="display: none"])) body {
    overflow-x: hidden;
}

/* Listagens responsivas (.sl-lista-resp): a coluna de acoes nunca some. Prioridade de colunas por largura da tela
   e, em tela estreita, cada linha vira um cartao de duas linhas (identificacao + situacao / destinatario + total + acoes) */
html[data-sl-visual="novo"] .sl-lista-resp th.sl-rc-dest,
html[data-sl-visual="novo"] .sl-lista-resp td.sl-rc-dest {
    width: 100% !important;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 1300px) {
    html[data-sl-visual="novo"] .sl-lista-resp .sl-rc-tributos,
    html[data-sl-visual="novo"] .sl-lista-resp .sl-rc-finalidade {
        display: none !important;
    }
}
@media (max-width: 1100px) {
    html[data-sl-visual="novo"] .sl-lista-resp .sl-rc-iva,
    html[data-sl-visual="novo"] .sl-lista-resp .sl-rc-totprod {
        display: none !important;
    }
}
@media (max-width: 760px) {
    html[data-sl-visual="novo"] .sl-lista-resp .ui-datatable-tablewrapper,
    html[data-sl-visual="novo"] .sl-lista-resp table,
    html[data-sl-visual="novo"] .sl-lista-resp tbody.ui-datatable-data {
        display: block;
        width: 100% !important;
        min-width: 0;
    }
    html[data-sl-visual="novo"] .sl-lista-resp .ui-datatable-tablewrapper {
        overflow-x: hidden;
    }
    html[data-sl-visual="novo"] .sl-lista-resp table,
    html[data-sl-visual="novo"] .sl-lista-resp tbody.ui-datatable-data,
    html[data-sl-visual="novo"] .sl-lista-resp tbody.ui-datatable-data > tr {
        box-sizing: border-box;
    }
    html[data-sl-visual="novo"] .sl-lista-resp thead {
        display: none;
    }
    html[data-sl-visual="novo"] .sl-lista-resp tbody.ui-datatable-data > tr:not(.ui-datatable-empty-message) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--sl-border);
    }
    html[data-sl-visual="novo"] .sl-lista-resp tbody.ui-datatable-data > tr:not(.ui-datatable-empty-message)::after {
        content: "";
        order: 5;
        flex: 0 0 100%;
        height: 0;
    }
    html[data-sl-visual="novo"] .sl-lista-resp tbody.ui-datatable-data > tr:not(.ui-datatable-empty-message) > td {
        display: block;
        flex: 0 0 auto;
        width: auto !important;
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
        white-space: nowrap;
    }
    html[data-sl-visual="novo"] .sl-lista-resp td.sl-rc-serie { order: 1; }
    html[data-sl-visual="novo"] .sl-lista-resp td.sl-rc-num { order: 2; font-weight: 700; }
    html[data-sl-visual="novo"] .sl-lista-resp td.sl-rc-emissao { order: 3; color: var(--sl-muted); }
    html[data-sl-visual="novo"] .sl-lista-resp td.sl-rc-status { order: 4; margin-left: auto; text-align: right; }
    html[data-sl-visual="novo"] .sl-lista-resp td.sl-rc-dest { order: 6; flex: 1 1 0 !important; min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; }
    html[data-sl-visual="novo"] .sl-lista-resp td.sl-rc-total { order: 7; text-align: right; font-weight: 700; }
    html[data-sl-visual="novo"] .sl-lista-resp td.sl-rc-acoes { order: 8; }
    html[data-sl-visual="novo"] .sl-lista-resp td.sl-rc-serie::before { content: "Série "; color: var(--sl-muted); font-size: var(--sl-fs-xs); }
    html[data-sl-visual="novo"] .sl-lista-resp td.sl-rc-num::before { content: "Nº "; color: var(--sl-muted); font-size: var(--sl-fs-xs); font-weight: 400; }
    html[data-sl-visual="novo"] .sl-lista-resp td.sl-rc-finalidade,
    html[data-sl-visual="novo"] .sl-lista-resp td.sl-rc-totprod,
    html[data-sl-visual="novo"] .sl-lista-resp td.sl-rc-tributos,
    html[data-sl-visual="novo"] .sl-lista-resp td.sl-rc-iva {
        display: none !important;
    }
}

/* Responsividade automatica das listagens (sl-lista.js): colunas escondidas por falta de espaco e modo cartao em tela estreita */
html[data-sl-visual="novo"] .ui-datatable .sl-auto-oculta {
    display: none !important;
}
html[data-sl-visual="novo"] .ui-datatable.ui-datatable-scrollable.sl-auto-ativa .ui-datatable-scrollable-header-box table,
html[data-sl-visual="novo"] .ui-datatable.ui-datatable-scrollable.sl-auto-ativa .ui-datatable-scrollable-body table {
    width: 100% !important;
    table-layout: auto;
}
html[data-sl-visual="novo"] .ui-datatable.ui-datatable-scrollable.sl-auto-cartao .ui-datatable-scrollable-header {
    display: none;
}
html[data-sl-visual="novo"] .ui-datatable.ui-datatable-scrollable.sl-auto-cartao .ui-datatable-scrollable-body,
html[data-sl-visual="novo"] .ui-datatable.ui-datatable-scrollable.sl-auto-cartao .ui-datatable-scrollable-body table {
    width: 100% !important;
    overflow-x: hidden;
}
html[data-sl-visual="novo"] .ui-datatable.sl-auto-cartao .ui-datatable-tablewrapper,
html[data-sl-visual="novo"] .ui-datatable.sl-auto-cartao table,
html[data-sl-visual="novo"] .ui-datatable.sl-auto-cartao tbody.ui-datatable-data {
    display: block;
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}
html[data-sl-visual="novo"] .ui-datatable.sl-auto-cartao thead {
    display: none;
}
html[data-sl-visual="novo"] .ui-datatable.sl-auto-cartao tbody.ui-datatable-data > tr:not(.ui-datatable-empty-message) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    padding: 10px 12px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--sl-border);
}
html[data-sl-visual="novo"] .ui-datatable.sl-auto-cartao tbody.ui-datatable-data > tr:not(.ui-datatable-empty-message) > td {
    display: block;
    min-width: 0;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    text-align: left !important;
}
html[data-sl-visual="novo"] .ui-datatable.sl-auto-cartao td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--sl-muted);
    font-size: var(--sl-fs-xs);
    font-weight: 700;
}
html[data-sl-visual="novo"] .ui-datatable.sl-auto-cartao td.sl-col-acoes,
html[data-sl-visual="novo"] .ui-datatable.sl-auto-cartao td:has(.ui-button) {
    grid-column: 1 / -1;
    justify-self: end;
    overflow: visible;
    white-space: nowrap;
}
html[data-sl-visual="novo"] .ui-datatable.sl-auto-cartao td.sl-col-acoes::before,
html[data-sl-visual="novo"] .ui-datatable.sl-auto-cartao td:has(.ui-button)::before {
    display: none;
}