/* ==========================================================================
   SGSAP — componentes próprios
   --------------------------------------------------------------------------
   Última folha da ordem de carregamento: o que estiver aqui vence tudo que
   veio antes. Por isso nenhuma declaração desta camada pode trazer valor de
   cor literal — um `background-color: #fff` aqui apaga o tema escuro inteiro,
   que foi exatamente o defeito corrigido nos campos de formulário.

   Cor sempre por token (sgsap-tokens.css). O teste
   test_componentes_nao_trazem_cor_literal guarda essa regra.
   ========================================================================== */

.center{
margin-left:40%;

}
.contador{
font-size:1!important;
    font-size: 5em !important;
    text-align: center;

}

.errorlist > li{
    display: block !important;
 }

.grafico-card{
border: 1px solid var(--sgsap-border);
border-radius: calc(.35rem - 1px) calc(.35rem - 1px) 0 0;
margin-top: 1em;
}
.tabela-card{
border: 1px var(--sgsap-border);
border-radius: calc(.35rem - 1px) calc(.35rem - 1px) 0 0;
margin-top: 1em;
width: 100%;
}
.collapse-my-menu{
font-size: 12px !important;
cursor: pointer;
margin-top:2px!important;
}

.circulo{
    margin-top: 2em;}

.notificacao{
border: none !important;
}
.topbar.dropdown-list .dropdown-header {
border: 1px solid var(--sgsap-border-subtle);
}

body.sgsap-shell {
    font-family: var(--sgsap-font-body);
    font-size: var(--sgsap-font-size-body);
    background: var(--sgsap-page);
    color: var(--sgsap-text);
    min-height: 100vh;
    overflow-x: clip;
}

.sgsap-shell__wrapper {
    display: flex;
    min-height: 100vh;
}

.sgsap-sidebar {
    min-height: 100vh;
}

.sgsap-sidebar .nav-link {
    font-size: .9rem;
    line-height: 1.35;
    padding: .72rem 1rem;
}

.sgsap-sidebar .sidebar-heading {
    font-size: .78rem;
    letter-spacing: .04em;
}

.sgsap-sidebar__action {
    padding: var(--sgsap-space-3) var(--sgsap-space-3) var(--sgsap-space-2);
}

.sgsap-sidebar__action .btn {
    align-items: center;
    display: flex;
    gap: var(--sgsap-space-2);
    justify-content: center;
}

/* Com o menu recolhido sobra só o ícone; o rótulo sairia cortado. */
.sidebar.toggled .sgsap-sidebar__action .btn span,
.sgsap-sidebar.toggled .sgsap-sidebar__action .btn span {
    display: none;
}

.sgsap-sidebar .sidebar-brand {
    min-height: 4.25rem;
}

.sgsap-sidebar .sgsap-nav-note {
    color: var(--sgsap-nav-text-muted);
    cursor: default;
    font-size: .78rem;
}

.sgsap-sidebar__section > .nav-link {
    color: var(--sgsap-nav-text-strong);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .025em;
    padding-bottom: .55rem;
    padding-top: .55rem;
}

.sgsap-sidebar__section-content { margin: 0 0 .55rem; padding: .15rem 0; }

.sgsap-sidebar__section-link,
.sgsap-sidebar__submenu-link {
    align-items: center;
    color: var(--sgsap-nav-text);
    display: flex;
    font-size: .82rem;
    gap: .45rem;
    line-height: 1.25;
    padding: .42rem 1rem;
}

.sgsap-sidebar__section-link:hover,
.sgsap-sidebar__section-link:focus,
.sgsap-sidebar__submenu-link:hover,
.sgsap-sidebar__submenu-link:focus {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    text-decoration: none;
}

.sgsap-sidebar__section-link:hover i,
.sgsap-sidebar__section-link:focus i,
.sgsap-sidebar__submenu-link:hover i,
.sgsap-sidebar__submenu-link:focus i { color: inherit; }

.sgsap-sidebar__module-group > .sgsap-sidebar__section-link { font-size: .78rem; font-weight: 700; }

.sgsap-sidebar__section-link[data-toggle="collapse"]::after {
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-size: .72rem;
    font-weight: 900;
    margin-left: auto;
}

.sgsap-sidebar__section-link[data-toggle="collapse"].collapsed::after { content: "\f105"; }

.sgsap-sidebar__section > .collapse,
.sgsap-sidebar__section > .collapsing,
.sgsap-sidebar__module-group > .collapse,
.sgsap-sidebar__module-group > .collapsing { margin: 0 !important; }

.sgsap-sidebar__submenu { margin-left: 0; }
.sgsap-sidebar__submenu-link { font-size: .77rem; }

.sgsap-ticket-advanced {
    border: 1px solid var(--sgsap-border);
    border-radius: var(--sgsap-radius-md);
    margin: var(--sgsap-space-4) 0;
    overflow: hidden;
}

.sgsap-ticket-advanced > summary {
    align-items: center;
    background: var(--sgsap-surface-muted);
    cursor: pointer;
    display: flex;
    font-weight: var(--sgsap-font-weight-semibold);
    gap: var(--sgsap-space-2);
    list-style: none;
    padding: var(--sgsap-space-3);
}

.sgsap-ticket-advanced > summary::-webkit-details-marker { display: none; }
.sgsap-ticket-advanced[open] > summary { border-bottom: 1px solid var(--sgsap-border); }
.sgsap-ticket-advanced__content { padding: var(--sgsap-space-3) var(--sgsap-space-3) 0; }

.sgsap-dashboard-detail-title,
.sgsap-dashboard-detail-data dd,
.sgsap-dashboard-panel {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sgsap-code-block {
    background: var(--sgsap-surface-muted);
    border: 1px solid var(--sgsap-border);
    border-radius: var(--sgsap-radius-sm);
    color: var(--sgsap-text);
    font-size: .82rem;
    line-height: 1.5;
    margin: 0;
    max-height: 26rem;
    max-width: 100%;
    overflow: auto;
    padding: var(--sgsap-space-3);
    white-space: pre-wrap;
    word-break: break-word;
}

.sgsap-dashboard-query-preview {
    max-height: 24rem;
    overflow: auto;
}

.sgsap-dashboard-query-preview th,
.sgsap-dashboard-query-preview td {
    max-width: 22rem;
    overflow-wrap: anywhere;
    white-space: normal;
}

.sgsap-shell__content {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 100vh;
    background: var(--sgsap-page);
}

.sgsap-shell__content > main {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

.sgsap-shell__content > main,
.sgsap-shell__content .sgsap-content {
    background: var(--sgsap-page);
}

.sgsap-shell__content .sgsap-content {
    flex: 1 0 auto;
}

.sgsap-topbar {
    min-height: 4.25rem;
    box-shadow: var(--sgsap-shadow-sm) !important;
}

/* Controle de aparência: um gatilho na barra superior e um painel com tema e
   cor. Antes eram dois <select> e um seletor de cor soltos, ocupando metade da
   barra em telas médias. */
.sgsap-appearance__trigger {
    align-items: center;
    color: var(--sgsap-text-muted);
    display: inline-flex;
    gap: .4rem;
    font-size: var(--sgsap-font-size-small);
    text-decoration: none;
}

.sgsap-appearance__trigger:hover,
.sgsap-appearance__trigger[aria-expanded="true"] {
    color: var(--sgsap-text);
    text-decoration: none;
}

.sgsap-appearance__panel {
    min-width: 16rem;
    padding-bottom: var(--sgsap-space-3);
}

.sgsap-appearance__group {
    display: flex;
    flex-direction: column;
    gap: var(--sgsap-space-2);
    padding: var(--sgsap-space-2) var(--sgsap-space-4);
}

.sgsap-appearance__group > label {
    color: var(--sgsap-text-muted);
    font-size: var(--sgsap-font-size-small);
    font-weight: var(--sgsap-font-weight-medium);
    margin: 0;
}

.sgsap-appearance__row {
    align-items: center;
    display: flex;
    gap: var(--sgsap-space-3);
}

.sgsap-appearance__contraste {
    color: var(--sgsap-text-muted);
    font-size: var(--sgsap-font-size-small);
    line-height: 1.35;
    margin: var(--sgsap-space-2) 0 0;
}

.sgsap-appearance__contraste.is-abaixo-do-minimo {
    color: var(--sgsap-danger);
    font-weight: var(--sgsap-font-weight-medium);
}

.sgsap-appearance__row input[type="color"] {
    background: var(--sgsap-surface);
    border: 1px solid var(--sgsap-border);
    border-radius: var(--sgsap-radius-sm);
    cursor: pointer;
    height: 2.25rem;
    padding: .15rem;
    width: 2.75rem;
}

.sgsap-content {
    padding: 0 1.5rem 2rem;
}

.sgsap-feedback {
    min-height: 0;
}

.sgsap-content,
.sgsap-content > .row,
.sgsap-content [class*="col-"] {
    min-width: 0;
}

.chart-area canvas,
.chart-bar canvas,
.chart-pie canvas {
    height: auto !important;
    max-width: 100%;
}

.sgsap-legal {
    background: var(--sgsap-page);
    color: var(--sgsap-text);
    min-height: 100vh;
    padding: clamp(1rem, 4vw, 3rem);
}

.sgsap-legal__documento {
    background: var(--sgsap-surface);
    border: 1px solid var(--sgsap-border);
    border-radius: var(--sgsap-radius-lg);
    box-shadow: var(--sgsap-shadow);
    line-height: 1.65;
    margin: 0 auto;
    max-width: 75ch;
    padding: clamp(1rem, 4vw, 2.5rem);
}

.sgsap-legal__documento h1 {
    font-size: var(--sgsap-font-size-title);
    margin-bottom: var(--sgsap-space-6);
}

.sgsap-skip-link:focus {
    position: fixed;
    z-index: 1100;
    top: .75rem;
    left: .75rem;
    padding: .65rem .9rem;
    color: var(--sgsap-text-inverse);
    background: var(--sgsap-text);
    border-radius: .4rem;
}

.sgsap-shell a:focus-visible,
.sgsap-shell button:focus-visible,
.sgsap-shell input:focus-visible,
.sgsap-shell select:focus-visible,
.sgsap-shell textarea:focus-visible,
.sgsap-shell summary:focus-visible,
.sgsap-shell .table-responsive:focus-visible {
    outline: 3px solid var(--sgsap-focus);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 767.98px) {
    body.sgsap-drawer-open {
        overflow: hidden;
    }

    .sgsap-sidebar {
        bottom: 0;
        box-shadow: var(--sgsap-shadow-lg);
        left: 0;
        max-width: calc(100vw - 3.5rem);
        overflow-x: hidden;
        overflow-y: auto;
        position: fixed;
        top: 0;
        transform: translateX(0);
        transition: transform .2s ease-out;
        width: 18rem !important;
        z-index: 1051;
    }

    .sgsap-sidebar.toggled {
        transform: translateX(-100%);
        width: 18rem !important;
    }

    .sgsap-sidebar-backdrop {
        background: var(--sgsap-backdrop);
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 1050;
    }

    .sgsap-sidebar-backdrop[hidden] {
        display: none;
    }

    .sgsap-content {
        overflow-x: clip;
        padding: 0 .9rem 1.25rem;
    }

    .modal-dialog {
        margin: .75rem;
        max-width: calc(100vw - 1.5rem);
    }

    .sgsap-form input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    .sgsap-form select,
    .sgsap-form textarea {
        max-width: 100%;
        width: 100%;
    }

    .sgsap-topbar {
        margin-bottom: 1rem !important;
    }

    .sgsap-topbar .btn,
    .sgsap-topbar .nav-link,
    .sgsap-form-actions .btn,
    .pagination .page-link {
        min-height: 44px;
        min-width: 44px;
    }
}

.sgsap-ticket-page {
    width: min(100%, 74rem);
    margin: 0 auto;
}

.sgsap-dashboard-page {
    width: min(100%, 78rem);
    margin: 0 auto;
}

.sgsap-dashboard-drawer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.sgsap-dashboard-grid.is-editing [data-dashboard-card] {
    cursor: move;
}

.sgsap-dashboard-grid.is-editing [data-dashboard-card] .sgsap-dashboard-panel {
    outline: 2px dashed var(--sgsap-accent);
    outline-offset: 3px;
}

.sgsap-dashboard-card-controls {
    display: grid;
    grid-template-columns: 2rem 2rem minmax(4.5rem, 1fr) 2rem;
    gap: .35rem;
    padding: .35rem 0;
}

.sgsap-dashboard-card-controls button {
    display: grid;
    width: 2rem;
    min-height: 2rem;
    padding: 0;
    place-items: center;
    color: var(--sgsap-accent-legivel);
    background: var(--sgsap-surface-muted);
    border: 1px solid var(--sgsap-border);
    border-radius: .3rem;
    font-size: .74rem;
}

.sgsap-dashboard-card-controls button[data-dashboard-deactivate] {
    color: var(--sgsap-danger);
}

.sgsap-dashboard-card-controls select {
    width: 100%;
    min-width: 0;
    min-height: 2rem;
    padding: .15rem .3rem;
    color: var(--sgsap-text);
    background: var(--sgsap-surface);
    border: 1px solid var(--sgsap-border);
    border-radius: .3rem;
    font-size: .78rem;
}

.sgsap-dashboard-drawer {
    position: fixed;
    z-index: 1050;
    top: 4.75rem;
    right: 1rem;
    width: min(25rem, calc(100vw - 2rem));
    max-height: calc(100vh - 6rem);
    padding: 1.25rem;
    overflow-y: auto;
    color: var(--sgsap-text);
    background: var(--sgsap-surface);
    border: 1px solid var(--sgsap-border);
    border-radius: var(--sgsap-radius);
    box-shadow: var(--sgsap-shadow-lg);
}

.sgsap-dashboard-drawer__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sgsap-dashboard-drawer h2 { margin: 0; font-size: 1.2rem; font-weight: 800; }
.sgsap-dashboard-drawer p { margin: .35rem 0 0; color: var(--sgsap-text-muted); font-size: .88rem; }
.sgsap-dashboard-drawer label { display: block; margin: 1rem 0 .35rem; font-size: .82rem; font-weight: 700; }
.sgsap-dashboard-tabs { display: flex; gap: .75rem; border-bottom: 1px solid var(--sgsap-border); }
.sgsap-dashboard-tabs button, .sgsap-dashboard-tabs a { padding: .5rem .1rem; color: var(--sgsap-accent-legivel); background: transparent; border: 0; font-weight: 700; }
.sgsap-dashboard-preview { margin-top: 1rem; padding: .8rem; background: var(--sgsap-surface-muted); border-radius: .45rem; }
.sgsap-dashboard-palette { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.sgsap-dashboard-palette button { padding: .35rem .55rem; color: var(--sgsap-text); background: var(--sgsap-surface-muted); border: 1px solid var(--sgsap-border); border-radius: .35rem; font-size: .78rem; font-weight: 700; }

@media (max-width: 575.98px) {
    .sgsap-dashboard-edit-entry,
    .sgsap-dashboard-edit-toolbar { width: 100%; }
    .sgsap-dashboard-edit-entry > .btn,
    .sgsap-dashboard-edit-toolbar > .btn { flex: 1 1 auto; }
    .sgsap-dashboard-drawer { top: 1rem; right: 1rem; max-height: calc(100vh - 2rem); }
}

.sgsap-dashboard-panel {
    overflow: hidden;
    background: var(--sgsap-surface);
    border: 1px solid var(--sgsap-border);
    border-radius: var(--sgsap-radius);
    box-shadow: var(--sgsap-shadow);
}

.sgsap-dashboard-panel__header {
    background: var(--sgsap-surface-muted);
    border-bottom: 1px solid var(--sgsap-border);
}

.sgsap-dashboard-panel__title {
    margin: 0;
    color: var(--sgsap-text);
    font-size: 1rem;
    font-weight: 800;
}

.sgsap-dashboard-panel__title i {
    margin-right: .35rem;
    color: var(--sgsap-accent);
}

.sgsap-dashboard-panel .card-body {
    color: var(--sgsap-text);
    background: var(--sgsap-surface);
}

.sgsap-dashboard-status {
    min-height: 1.25rem;
    margin-bottom: .75rem;
    color: var(--sgsap-text-muted);
    font-size: .82rem;
}

[data-dashboard-state="error"] {
    border-color: var(--sgsap-danger);
}

[data-dashboard-state="empty"] .sgsap-dashboard-status {
    color: var(--sgsap-text-muted);
}

[data-dashboard-state="ready"] .sgsap-dashboard-status {
    display: none;
}

.sgsap-dashboard-empty {
    margin-bottom: 1.25rem;
}

.sgsap-error-page {
    display: grid;
    width: min(100%, 52rem);
    min-height: 55vh;
    margin: 0 auto;
    place-items: center;
}

.sgsap-error-page__panel {
    width: 100%;
    padding: clamp(1.5rem, 4vw, 3rem);
    color: var(--sgsap-text);
    background: var(--sgsap-surface);
    border: 1px solid var(--sgsap-border);
    border-radius: var(--sgsap-radius);
    box-shadow: var(--sgsap-shadow);
    text-align: center;
}

.sgsap-error-page__panel h1 {
    margin: .4rem 0 .75rem;
    color: var(--sgsap-text);
    font-size: var(--sgsap-font-size-title);
    font-weight: 800;
}

.sgsap-error-page__panel p:not(.sgsap-page-header__context) {
    max-width: 38rem;
    margin: 0 auto 1.25rem;
    color: var(--sgsap-text-muted);
    line-height: 1.6;
}

/* Tela de erro: uma referência leve aos arcades espaciais, sem imagens. */
.sgsap-error-page--arcade {
    width: min(100%, 78rem);
    min-height: calc(100vh - 8rem);
}

.sgsap-error-page--arcade .sgsap-error-page__panel {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--sgsap-accent) 42%, var(--sgsap-border));
    background:
        radial-gradient(circle at 12% 18%, var(--sgsap-accent-soft) 0 2px, transparent 3px),
        radial-gradient(circle at 82% 14%, var(--sgsap-accent-soft) 0 1px, transparent 2px),
        radial-gradient(circle at 71% 75%, var(--sgsap-accent-soft) 0 2px, transparent 3px),
        var(--sgsap-surface);
}

.sgsap-error-game {
    width: min(100%, 54rem);
    min-height: 0;
    margin: .75rem auto 1rem;
    padding: .75rem;
    background: #0d1729;
    border: 2px solid var(--sgsap-accent);
    border-radius: var(--sgsap-radius-md);
    box-shadow: inset 0 0 1.5rem rgb(65 128 255 / 18%);
}

.sgsap-error-game__canvas {
    display: block;
    width: 100%;
    height: clamp(14rem, 42vh, 22rem);
    cursor: crosshair;
    touch-action: manipulation;
}

.sgsap-error-game__instructions,
.sgsap-error-game__status {
    margin: .5rem auto !important;
    color: #d9e7ff !important;
    font-size: .8rem;
}

.sgsap-error-game__status {
    min-height: 1.2rem;
    color: #94c5ff !important;
    font-weight: 700;
}

.sgsap-page-header,
.sgsap-section-heading,
.sgsap-filter-form__actions,
.sgsap-ticket-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.sgsap-page-header {
    margin: 1rem 0 1.5rem;
}

.sgsap-page-header__context {
    margin: 0 0 .35rem;
    color: var(--sgsap-accent-legivel);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sgsap-page-header h1,
.sgsap-section-heading h2,
.sgsap-empty-state h3 {
    margin: 0;
    color: var(--sgsap-text);
    font-weight: 800;
}

.sgsap-page-header h1 {
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    letter-spacing: -.025em;
}

.sgsap-page-header__description,
.sgsap-section-heading p,
.sgsap-empty-state p {
    margin: .4rem 0 0;
    color: var(--sgsap-text-muted);
}

.sgsap-filter-panel,
.sgsap-ticket-list {
    margin-bottom: 1.25rem;
    padding: 1.35rem;
    background: var(--sgsap-surface);
    border: 1px solid var(--sgsap-border);
    border-radius: var(--sgsap-radius);
    box-shadow: var(--sgsap-shadow);
}

.sgsap-section-heading {
    margin-bottom: 1.15rem;
}

.sgsap-section-heading h2 {
    font-size: 1.15rem;
}

.sgsap-filter-form label {
    color: var(--sgsap-text);
    font-size: .85rem;
    font-weight: 700;
}

.sgsap-filter-form input,
.sgsap-filter-form select {
    min-height: 2.75rem;
    border-color: var(--sgsap-border);
    color: var(--sgsap-text);
    background-color: var(--sgsap-surface);
}

.sgsap-filter-form__actions {
    justify-content: flex-start;
    margin-top: .25rem;
}

.sgsap-advanced-filter {
    margin: .35rem 0 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--sgsap-border);
}

.sgsap-advanced-filter summary {
    width: fit-content;
    margin-bottom: .85rem;
    color: var(--sgsap-accent-legivel);
    font-weight: 700;
    cursor: pointer;
}

.sgsap-ticket-table {
    margin: 0;
    color: var(--sgsap-text);
}

.sgsap-ticket-table th {
    color: var(--sgsap-text-muted);
    font-size: .75rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-top: 0;
}

.sgsap-ticket-table td,
.sgsap-ticket-table th {
    padding: .95rem .7rem;
    vertical-align: middle;
    border-color: var(--sgsap-border);
}

.sgsap-ticket-actions {
    justify-content: flex-start;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* A coluna de ações comporta os três controles da linha na mesma faixa. Sem
   uma largura mínima, o menu de reticências cai sozinho para baixo quando o
   título ou o setor ocupa mais espaço. */
.sgsap-ticket-table th:last-child,
.sgsap-ticket-table td:last-child {
    min-width: 11.25rem;
    white-space: nowrap;
}

.sgsap-ticket-actions .btn {
    flex: 0 0 auto;
}

.status-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--sgsap-text);
    font-size: .85rem;
    font-weight: 700;
}

.status-label__dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--sgsap-warning);
}

.status-label--closed .status-label__dot {
    background: var(--sgsap-success);
}

/* O menu "⋯" usa position:fixed via JS: nenhum overflow de pai (tabela,
   card, shell) consegue cortar o painel. */
.sgsap-actions-menu[open] {
    z-index: 40;
}

.sgsap-actions-menu summary {
    list-style: none;
}

.sgsap-actions-menu summary::-webkit-details-marker {
    display: none;
}

.sgsap-actions-menu__content {
    position: fixed;
    z-index: 1200;
    min-width: 13.5rem;
    max-width: min(18rem, calc(100vw - 1rem));
    max-height: min(20rem, calc(100vh - 1rem));
    overflow-y: auto;
    padding: .4rem;
    background-color: var(--sgsap-surface);
    border: 1px solid var(--sgsap-border-strong);
    border-radius: var(--sgsap-radius-md);
    box-shadow: var(--sgsap-shadow-lg);
}

@keyframes sgsap-dropdown-appear {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.sgsap-actions-menu__content a,
.sgsap-actions-menu__content button {
    display: flex;
    align-items: center;
    gap: var(--sgsap-space-2);
    width: 100%;
    padding: .5rem .75rem;
    color: var(--sgsap-text);
    font-size: var(--sgsap-font-size-small);
    font-weight: var(--sgsap-font-weight-medium);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--sgsap-radius-sm);
    cursor: pointer;
    transition: background-color var(--sgsap-transition), color var(--sgsap-transition);
}

.sgsap-actions-menu__content a:hover,
.sgsap-actions-menu__content button:hover {
    color: var(--sgsap-accent-legivel);
    background: var(--sgsap-surface-muted);
    text-decoration: none;
}

.sgsap-empty-state {
    padding: 3rem 1rem;
    color: var(--sgsap-text-muted);
    text-align: center;
}

.sgsap-empty-state > i {
    margin-bottom: .8rem;
    color: var(--sgsap-accent);
    font-size: 2rem;
}

.sgsap-empty-state h3 {
    font-size: 1.15rem;
}

.sgsap-empty-state .btn {
    margin-top: 1rem;
}

.sgsap-form-page {
    width: min(100%, 70rem);
    margin: 0 auto;
}

.sgsap-form-panel {
    padding: clamp(1rem, 2vw, 1.75rem);
    background: var(--sgsap-surface);
    border: 1px solid var(--sgsap-border);
    border-radius: var(--sgsap-radius);
    box-shadow: var(--sgsap-shadow);
}

.sgsap-form-required-note {
    margin: 0 0 1rem;
    color: var(--sgsap-text-muted);
    font-size: .85rem;
}

/* O asterisco de campo obrigatório, e só ele. A regra antiga pintava qualquer
   <span> dentro de um <label>, então o primeiro rótulo com marcação por dentro
   saiu inteiro em vermelho — foi o que aconteceu com a lista de pessoas. O
   asterisco sempre carrega aria-hidden, porque a informação "obrigatório"
   chega ao leitor de tela pelo próprio campo. */
.sgsap-form-required-note span[aria-hidden],
.sgsap-form label span[aria-hidden] {
    color: var(--sgsap-danger);
}

.sgsap-form fieldset {
    margin: 0 0 1.5rem;
    padding: 0 0 1.25rem;
    border: 0;
    border-bottom: 1px solid var(--sgsap-border);
}

.sgsap-form fieldset:last-of-type {
    margin-bottom: 1rem;
}

.sgsap-form .sgsap-ticket-form__primary-fields {
    border-bottom: 0;
    margin-bottom: .75rem;
    padding-bottom: 0;
}

.sgsap-form legend {
    width: 100%;
    margin-bottom: 1rem;
    padding: 0;
    color: var(--sgsap-text);
    font-size: 1.05rem;
    font-weight: 800;
}

.sgsap-form label {
    color: var(--sgsap-text);
    font-size: .85rem;
    font-weight: 700;
}

.sgsap-form input:not([type="checkbox"]):not([type="file"]),
.sgsap-form select,
.sgsap-form textarea {
    min-height: 2.75rem;
    color: var(--sgsap-text);
    background: var(--sgsap-surface);
    border-color: var(--sgsap-border);
}

.sgsap-form textarea {
    min-height: 9rem;
}

.sgsap-form-errors {
    margin-bottom: 1.25rem;
}

.sgsap-form-errors h2 {
    margin-bottom: .5rem;
}

.sgsap-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
}

.sgsap-detail-page {
    width: min(100%, 74rem);
    margin: 0 auto;
}

.sgsap-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 1rem 0 1.5rem;
}

.sgsap-ticket-code {
    margin: 0 0 .25rem;
    color: var(--sgsap-text-muted);
    font-weight: 700;
}

.sgsap-detail-header h1 {
    max-width: 48rem;
    margin: 0;
    color: var(--sgsap-text);
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -.025em;
}

.sgsap-detail-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: .7rem;
    color: var(--sgsap-text-muted);
    font-size: .85rem;
}

.sgsap-detail-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--sgsap-space-2);
}

.sgsap-detail-actions__group,
.sgsap-detail-actions__workflow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sgsap-space-2);
}

/* Destruir não compete com o próximo passo do atendimento. */
.sgsap-detail-actions__workflow .sgsap-action-form--danger {
    margin-left: auto;
    padding-left: var(--sgsap-space-2);
    border-left: 1px solid var(--sgsap-border-subtle);
}

.sgsap-detail-actions form,
.sgsap-action-form {
    display: inline-flex;
    margin: 0;
}

.sgsap-action-btn {
    align-items: center;
    border-radius: var(--sgsap-radius-md);
    display: inline-flex;
    font-size: var(--sgsap-font-size-small);
    font-weight: var(--sgsap-font-weight-medium);
    gap: .35rem;
    min-height: 2.35rem;
    padding: .45rem .85rem;
    /* Só cor/borda: botão de uso diário não deve “pular” ao passar o mouse. */
    transition: background-color var(--sgsap-transition), border-color var(--sgsap-transition), color var(--sgsap-transition), box-shadow var(--sgsap-transition);
}

.sgsap-action-btn:hover {
    box-shadow: var(--sgsap-shadow-sm);
}

.sgsap-action-btn:focus-visible {
    outline: none;
    box-shadow: var(--sgsap-focus-ring);
}

/* Próximo passo do ciclo: um só, o mais alto da hierarquia. */
.sgsap-next-step {
    box-shadow: var(--sgsap-shadow-sm);
    font-weight: var(--sgsap-font-weight-bold, 700);
}

.sgsap-next-step:hover {
    box-shadow: var(--sgsap-shadow);
}

.sgsap-owner-chip {
    align-items: center;
    background: var(--sgsap-accent-soft);
    border: 1px solid color-mix(in srgb, var(--sgsap-accent) 28%, transparent);
    border-radius: var(--sgsap-radius-pill);
    color: var(--sgsap-accent-legivel);
    display: inline-flex;
    font-size: var(--sgsap-font-size-small);
    font-weight: var(--sgsap-font-weight-medium);
    gap: .4rem;
    min-height: 2.35rem;
    padding: .4rem .9rem;
}

.sgsap-action-btn--primary {
    background-color: var(--sgsap-accent);
    border-color: var(--sgsap-accent);
    color: var(--sgsap-accent-contrast);
    box-shadow: var(--sgsap-shadow-sm);
}

.sgsap-action-btn--primary:hover {
    background-color: var(--sgsap-accent-strong);
    border-color: var(--sgsap-accent-strong);
    color: var(--sgsap-accent-contrast);
}

.sgsap-action-btn--success {
    background-color: var(--sgsap-success-soft);
    border-color: var(--sgsap-success);
    color: var(--sgsap-success);
}

.sgsap-action-btn--success:hover {
    background-color: var(--sgsap-success);
    border-color: var(--sgsap-success);
    color: var(--sgsap-text-inverse);
}

.sgsap-action-btn--danger {
    color: var(--sgsap-danger);
    border-color: var(--sgsap-danger);
    background-color: transparent;
}

.sgsap-action-btn--danger:hover {
    background-color: var(--sgsap-danger);
    color: var(--sgsap-text-inverse);
}

.sgsap-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
    gap: 1.25rem;
    align-items: start;
}

.sgsap-detail-main,
.sgsap-detail-sidebar {
    min-width: 0;
}

.sgsap-detail-section {
    margin-bottom: 1.25rem;
    padding: 1.35rem;
    background: var(--sgsap-surface);
    border: 1px solid var(--sgsap-border);
    border-radius: var(--sgsap-radius);
    box-shadow: var(--sgsap-shadow);
}

.sgsap-detail-section h2 {
    margin: 0;
    color: var(--sgsap-text);
    font-size: 1.1rem;
    font-weight: 800;
}

.sgsap-detail-description {
    margin: 1rem 0 0;
    color: var(--sgsap-text);
    line-height: 1.7;
    white-space: pre-wrap;
}

.sgsap-ticket-meta {
    margin: 1rem 0 0;
}

.sgsap-ticket-meta div {
    padding: .7rem 0;
    border-bottom: 1px solid var(--sgsap-border);
}

.sgsap-ticket-meta div:last-child {
    border-bottom: 0;
}

.sgsap-ticket-meta dt {
    color: var(--sgsap-text-muted);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.sgsap-ticket-meta dd {
    margin: .25rem 0 0;
    color: var(--sgsap-text);
}

.sgsap-image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
}

.sgsap-image-link {
    display: grid;
    gap: .35rem;
    width: 8rem;
    color: var(--sgsap-accent-legivel);
    font-size: .8rem;
    font-weight: 700;
}

.sgsap-image-link img {
    width: 8rem;
    height: 6rem;
    object-fit: cover;
    border: 1px solid var(--sgsap-border);
    border-radius: .5rem;
}

.sgsap-message-list {
    display: grid;
    gap: .75rem;
    margin-top: 1rem;
}

.sgsap-message {
    display: flex;
    gap: .75rem;
    padding: .9rem;
    background: var(--sgsap-surface-muted);
    border: 1px solid var(--sgsap-border);
    border-radius: .6rem;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.sgsap-message__avatar {
    display: grid;
    flex: 0 0 2rem;
    place-items: center;
    width: 2rem;
    height: 2rem;
    color: var(--sgsap-text-inverse);
    background: var(--sgsap-accent);
    border-radius: 50%;
}

.sgsap-message__body {
    min-width: 0;
    flex: 1;
}

.sgsap-message__meta {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    color: var(--sgsap-text);
}

.sgsap-message__meta time {
    color: var(--sgsap-text-muted);
    font-size: .8rem;
}

.sgsap-message__body p {
    margin: .5rem 0 0;
    color: var(--sgsap-text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sgsap-message__attachments {
    display: flex;
    gap: .75rem;
    margin-top: .6rem;
    font-size: .8rem;
}

.sgsap-empty-inline {
    margin: 1rem 0;
    color: var(--sgsap-text-muted);
}

/* Composer de mensagens: o botão só faz sentido com texto. */
.sgsap-message-form .sgsap-message-meta {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    justify-content: space-between;
    margin-top: .4rem;
}

.sgsap-message-form .sgsap-message-contador {
    color: var(--sgsap-text-muted);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.sgsap-message-form .sgsap-message-contador.is-proximo-do-limite {
    color: var(--sgsap-warning);
    font-weight: 700;
}

.sgsap-message-form .sgsap-message-contador.is-no-limite {
    color: var(--sgsap-danger);
    font-weight: 700;
}

.sgsap-message-form button[type="submit"]:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.sgsap-message-form button[type="submit"]:disabled:hover {
    box-shadow: none;
}

.sgsap-message-form,
.sgsap-evaluation-form {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sgsap-border);
}

.sgsap-message-form label,
.sgsap-evaluation-form label {
    color: var(--sgsap-text);
    font-weight: 700;
}

.sgsap-message-form textarea,
.sgsap-evaluation-form textarea,
.sgsap-evaluation-form input {
    width: 100%;
    min-height: 2.75rem;
    padding: .65rem .75rem;
    color: var(--sgsap-text);
    background: var(--sgsap-surface);
    border: 1px solid var(--sgsap-border);
    border-radius: .45rem;
}

.sgsap-message-form textarea,
.sgsap-evaluation-form textarea {
    min-height: 7rem;
}

.sgsap-message-form small {
    display: block;
    margin-top: .4rem;
    color: var(--sgsap-text-muted);
}

@media (max-width: 991.98px) {
    .sgsap-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .sgsap-detail-header {
        flex-direction: column;
    }

    .sgsap-detail-actions {
        justify-content: flex-start;
    }

    .sgsap-detail-actions .btn {
        flex: 1 1 auto;
    }

    .sgsap-detail-actions__workflow .sgsap-action-form--danger {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }

    .sgsap-detail-section {
        padding: 1rem;
    }
}

@media (max-width: 575.98px) {
    .sgsap-form-actions {
        flex-direction: column-reverse;
    }

    .sgsap-form-actions .btn {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .sgsap-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .sgsap-page-header .btn {
        width: 100%;
    }

    .sgsap-filter-panel,
    .sgsap-ticket-list {
        padding: 1rem;
    }

    .sgsap-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .sgsap-ticket-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .sgsap-ticket-table,
    .sgsap-ticket-table tbody,
    .sgsap-ticket-table tr,
    .sgsap-ticket-table td {
        display: block;
        width: 100%;
    }

    .sgsap-ticket-table tr {
        padding: .75rem 0;
        border-bottom: 1px solid var(--sgsap-border);
    }

    .sgsap-ticket-table td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: .35rem 0;
        border: 0;
        text-align: right;
    }

    .sgsap-ticket-table td:last-child {
        min-width: 0;
        white-space: normal;
    }

    .sgsap-ticket-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        white-space: normal;
    }

    .sgsap-ticket-table td::before {
        color: var(--sgsap-text-muted);
        font-size: .75rem;
        font-weight: 700;
        text-align: left;
        text-transform: uppercase;
        content: attr(data-label);
    }

    .sgsap-ticket-table td[colspan] {
        display: block;
        text-align: center;
    }

    .sgsap-ticket-table td[colspan]::before {
        display: none;
    }
}

/* Abas da lista de chamados. Um recorte por aba, com a contagem ao lado para
   a pessoa decidir para onde ir antes de clicar. */
.sgsap-tabs {
    border-bottom: 1px solid var(--sgsap-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sgsap-space-1);
    margin-bottom: var(--sgsap-space-4);
}

.sgsap-tabs__item {
    align-items: center;
    border-bottom: 2px solid transparent;
    color: var(--sgsap-text-muted);
    display: flex;
    gap: var(--sgsap-space-2);
    padding: var(--sgsap-space-2) var(--sgsap-space-3);
    text-decoration: none;
    transition: color var(--sgsap-transition), border-color var(--sgsap-transition);
}

.sgsap-tabs__item:hover {
    color: var(--sgsap-text);
    text-decoration: none;
}

.sgsap-tabs__item.is-atual {
    border-bottom-color: var(--sgsap-accent);
    color: var(--sgsap-accent-contrast);
    background-color: var(--sgsap-accent);
    font-weight: var(--sgsap-font-weight-bold);
}

/* A entrada de edição é um <details>; o <summary> é o botão. O marcador
   nativo sai porque o próprio botão já comunica o estado. */
.sgsap-dashboard-edit-entry {
    margin: 0 0 var(--sgsap-space-4);
    text-align: right;
}

.sgsap-dashboard-edit-entry__toggle {
    cursor: pointer;
    display: inline-block;
    list-style: none;
}

.sgsap-dashboard-edit-entry__toggle::-webkit-details-marker {
    display: none;
}

.sgsap-dashboard-edit-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sgsap-space-2);
    justify-content: flex-end;
    margin-top: var(--sgsap-space-2);
}

/* Ícone e texto do botão vinham colados: o HTML não tem espaço entre eles, e
   com o ícone ausente (fonte bloqueada, por exemplo) o texto encostava. */
.sgsap-dashboard-edit-toolbar .btn {
    align-items: center;
    display: inline-flex;
    gap: .4rem;
}

.sgsap-dashboard-layout-feedback {
    margin: calc(-1 * var(--sgsap-space-2)) 0 var(--sgsap-space-3);
    text-align: right;
}

.sgsap-tabs__contagem {
    background-color: var(--sgsap-surface-muted);
    border-radius: var(--sgsap-radius-pill);
    color: var(--sgsap-text-muted);
    font-size: var(--sgsap-font-size-small);
    padding: 0 .5rem;
}

.sgsap-tabs__item.is-atual .sgsap-tabs__contagem {
    background-color: var(--sgsap-accent-soft);
    color: var(--sgsap-text);
}

/* Migalhas de pão. Só aparecem onde há profundidade real; o último item é o
   lugar atual e não vira link. */
.sgsap-migalhas {
    margin-bottom: var(--sgsap-space-2);
}

.sgsap-migalhas ol {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sgsap-space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.sgsap-migalhas li {
    align-items: center;
    color: var(--sgsap-text-muted);
    display: flex;
    font-size: var(--sgsap-font-size-small);
}

.sgsap-migalhas li + li::before {
    content: "/";
    color: var(--sgsap-border-strong);
    margin: 0 var(--sgsap-space-2);
}

.sgsap-migalhas a {
    color: var(--sgsap-text-muted);
}

.sgsap-migalhas a:hover {
    color: var(--sgsap-accent);
}

.sgsap-migalhas [aria-current="page"] {
    color: var(--sgsap-text);
    font-weight: var(--sgsap-font-weight-medium);
}

/* Ações de linha de tabela: botão e formulário lado a lado sem quebrar. */
.sgsap-acoes-inline {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sgsap-space-2);
}

.sgsap-acoes-inline form {
    margin: 0;
}

/* Campo de posição na tela de ajuste do menu: número curto, alinhado. */
.sgsap-ordem {
    max-width: 5rem;
    text-align: center;
}

.sgsap-sidebar__ajuste {
    font-size: .8rem;
    opacity: .85;
}

/* ==========================================================================
   Telas de autenticação
   --------------------------------------------------------------------------
   O login vinha do template do SB Admin: grade de doze colunas, cartão dentro
   de cartão e uma coluna de imagem que sumia no celular deixando a tela vazia
   no topo. Aqui é um cartão só, centrado, com a marca acima do formulário.
   ========================================================================== */

.sgsap-auth {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: var(--sgsap-space-5) var(--sgsap-space-4);
}

.sgsap-auth__card {
    background-color: var(--sgsap-surface);
    border: 1px solid var(--sgsap-border);
    border-radius: var(--sgsap-radius-lg);
    box-shadow: var(--sgsap-shadow-lg);
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
    max-width: 26rem;
    overflow: hidden;
    width: 100%;
}

.sgsap-auth__marca {
    align-items: center;
    background-color: var(--sgsap-surface-tinted);
    border-bottom: 1px solid var(--sgsap-border-subtle);
    display: flex;
    justify-content: center;
    padding: var(--sgsap-space-5) var(--sgsap-space-5) var(--sgsap-space-4);
}

.sgsap-auth__logo {
    height: auto;
    max-height: 5.5rem;
    max-width: 70%;
    object-fit: contain;
}

.sgsap-auth__conteudo {
    padding: var(--sgsap-space-5);
}

.sgsap-auth__contexto {
    color: var(--sgsap-text-muted);
    font-size: var(--sgsap-font-size-small);
    letter-spacing: .08em;
    margin: 0;
    text-transform: uppercase;
}

.sgsap-auth__titulo {
    font-size: var(--sgsap-font-size-title);
    margin: 0 0 var(--sgsap-space-4);
}

.sgsap-auth__erro {
    background-color: var(--sgsap-danger-soft);
    border-left: 3px solid var(--sgsap-danger);
    border-radius: var(--sgsap-radius-sm);
    color: var(--sgsap-text);
    display: grid;
    gap: var(--sgsap-space-1);
    margin-bottom: var(--sgsap-space-4);
    padding: var(--sgsap-space-3);
}

.sgsap-auth__campo {
    display: grid;
    gap: var(--sgsap-space-1);
    margin-bottom: var(--sgsap-space-3);
}

.sgsap-auth__campo label {
    font-size: var(--sgsap-font-size-small);
    font-weight: var(--sgsap-font-weight-medium);
    margin: 0;
}

.sgsap-auth__enviar {
    margin-top: var(--sgsap-space-2);
    width: 100%;
}

.sgsap-auth__rodape {
    border-top: 1px solid var(--sgsap-border-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sgsap-space-3);
    justify-content: space-between;
    margin-top: var(--sgsap-space-4);
    padding-top: var(--sgsap-space-3);
}

.sgsap-auth__rodape a {
    color: var(--sgsap-accent-legivel);
    font-size: var(--sgsap-font-size-small);
}

@media (min-width: 48rem) {
    /* Em tela larga a marca vai para o lado, e o formulário não estica. */
    .sgsap-auth__card {
        grid-template-columns: 15rem minmax(0, 1fr);
        max-width: 44rem;
    }

    .sgsap-auth__marca {
        border-bottom: 0;
        border-right: 1px solid var(--sgsap-border-subtle);
        padding: var(--sgsap-space-6) var(--sgsap-space-5);
    }

    .sgsap-auth__logo {
        max-height: 9rem;
        max-width: 100%;
    }

    .sgsap-auth__conteudo {
        padding: var(--sgsap-space-6) var(--sgsap-space-5);
    }
}

/* ==========================================================================
   Perfil
   --------------------------------------------------------------------------
   Cabeçalho de identidade com iniciais. Sem foto: uma imagem de perfil pediria
   upload, armazenamento e moderação para resolver um problema que duas letras
   resolvem.
   ========================================================================== */

.sgsap-perfil__cabecalho {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sgsap-space-4);
    margin-bottom: var(--sgsap-space-5);
}

.sgsap-perfil__avatar {
    align-items: center;
    background-color: var(--sgsap-accent);
    border-radius: var(--sgsap-radius-pill);
    color: var(--sgsap-accent-contrast);
    display: flex;
    flex: 0 0 auto;
    font-size: 1.6rem;
    font-weight: var(--sgsap-font-weight-bold);
    height: 4rem;
    justify-content: center;
    letter-spacing: .02em;
    margin: 0;
    width: 4rem;
}

.sgsap-profile-current-photo {
    border-radius: var(--sgsap-radius-pill);
    display: block;
    height: 5rem;
    margin-bottom: var(--sgsap-space-3);
    object-fit: cover;
    width: 5rem;
}

.sgsap-profile-photo-edit {
    display: flex;
    align-items: center;
    gap: var(--sgsap-space-4);
    background: var(--sgsap-surface-tinted);
    border: 1px solid var(--sgsap-border);
    border-radius: var(--sgsap-radius-md);
    padding: var(--sgsap-space-3);
    margin-top: var(--sgsap-space-2);
}

.sgsap-profile-photo-preview-box {
    flex: 0 0 auto;
}

.sgsap-profile-photo-preview-box .sgsap-profile-current-photo {
    border: 2px solid var(--sgsap-accent);
    border-radius: var(--sgsap-radius-pill);
    box-shadow: var(--sgsap-shadow-sm);
    height: 4.5rem;
    margin-bottom: 0;
    object-fit: cover;
    width: 4.5rem;
}

.sgsap-profile-photo-input {
    flex: 1 1 auto;
}

.sgsap-profile-photo-input input[type="file"] {
    font-size: var(--sgsap-font-size-small);
}

.sgsap-perfil__identidade {
    flex: 1 1 14rem;
}

.sgsap-perfil__identidade h1 {
    margin: 0;
}

.sgsap-perfil__contato {
    color: var(--sgsap-text-muted);
    margin: var(--sgsap-space-1) 0 0;
}

.sgsap-perfil__marcas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sgsap-space-2);
    margin: var(--sgsap-space-2) 0 0;
}

.sgsap-perfil__marca {
    background-color: var(--sgsap-surface-muted);
    border-radius: var(--sgsap-radius-pill);
    color: var(--sgsap-text-muted);
    font-size: var(--sgsap-font-size-small);
    padding: .1rem .65rem;
}

.sgsap-perfil__marca.is-ativo {
    background-color: var(--sgsap-success-soft);
    color: var(--sgsap-success);
}

.sgsap-perfil__marca.is-pendente {
    background-color: var(--sgsap-warning-soft);
    color: var(--sgsap-warning);
}

/* Vazio se parece com vazio: quem bate o olho vê o que falta preencher. */
.sgsap-perfil__vazio {
    color: var(--sgsap-text-muted);
    font-style: italic;
}

.sgsap-perfil__ajuda {
    color: var(--sgsap-text-muted);
    font-size: var(--sgsap-font-size-small);
    margin: var(--sgsap-space-4) 0 0;
}

.sgsap-perfil__ajuda a,
.sgsap-perfil dd a {
    color: var(--sgsap-accent-legivel);
}

/* ==========================================================================
   Seletor de pessoas (Modern Combobox)
   --------------------------------------------------------------------------
   Interface interativa estilo combobox com tags, dropdown suspenso,
   pesquisa em tempo real e avatar de participantes.
   ========================================================================== */

.sgsap-pessoas-select-hidden {
    display: none !important;
}

.sgsap-pessoas {
    position: relative;
    width: 100%;
}

/* Alguns formulários ainda oferecem o botão de cadastro rápido ao lado do
   seletor. O combobox ocupa a largura toda por padrão; dentro de input-group,
   ele precisa ceder espaço ao botão para ele não cair na linha seguinte. */
.input-group > .sgsap-pessoas {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

.input-group > .sgsap-pessoas .sgsap-pessoas__controle {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.sgsap-pessoas__controle {
    align-items: center;
    background-color: var(--sgsap-surface);
    border: 1px solid var(--sgsap-border);
    border-radius: var(--sgsap-radius-md);
    cursor: pointer;
    display: flex;
    gap: var(--sgsap-space-2);
    height: auto;
    justify-content: space-between;
    min-height: 2.75rem;
    padding: .35rem .75rem;
    transition: border-color var(--sgsap-transition), box-shadow var(--sgsap-transition);
}

.sgsap-pessoas__controle:hover {
    border-color: var(--sgsap-border-strong);
}

.sgsap-pessoas__controle:focus,
.sgsap-pessoas__controle.is-aberto {
    border-color: var(--sgsap-accent);
    box-shadow: var(--sgsap-focus-ring);
    outline: 0;
}

.sgsap-pessoas__escolhidas {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sgsap-space-2);
    flex: 1 1 auto;
    list-style: none;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.sgsap-pessoas__nenhuma {
    color: var(--sgsap-text-muted);
    font-size: var(--sgsap-font-size-small);
    user-select: none;
}

.sgsap-pessoas__selecionada {
    color: var(--sgsap-text);
    font-size: var(--sgsap-font-size-small);
    font-weight: var(--sgsap-font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgsap-pessoas__seta {
    color: var(--sgsap-text-muted);
    flex: 0 0 auto;
    font-size: .85rem;
    transition: transform var(--sgsap-transition);
}

.sgsap-pessoas__controle.is-aberto .sgsap-pessoas__seta {
    transform: rotate(180deg);
}

.sgsap-pessoas__etiqueta {
    align-items: center;
    background-color: var(--sgsap-surface-tinted);
    border: 1px solid var(--sgsap-border);
    border-radius: var(--sgsap-radius-pill);
    color: var(--sgsap-text);
    display: inline-flex;
    font-size: var(--sgsap-font-size-small);
    gap: var(--sgsap-space-2);
    padding: .15rem .45rem .15rem .25rem;
    transition: background-color var(--sgsap-transition);
}

.sgsap-pessoas__etiqueta-avatar {
    align-items: center;
    background-color: var(--sgsap-accent);
    border-radius: var(--sgsap-radius-pill);
    color: var(--sgsap-accent-contrast);
    display: inline-flex;
    font-size: .65rem;
    font-weight: var(--sgsap-font-weight-bold);
    height: 1.35rem;
    justify-content: center;
    line-height: 1;
    width: 1.35rem;
}

.sgsap-pessoas__etiqueta-nome {
    font-weight: var(--sgsap-font-weight-medium);
}

.sgsap-pessoas__remover {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--sgsap-radius-pill);
    color: var(--sgsap-text-muted);
    cursor: pointer;
    display: inline-flex;
    font-size: 1.1rem;
    height: 1.2rem;
    justify-content: center;
    line-height: 1;
    margin-left: 2px;
    padding: 0;
    width: 1.2rem;
}

.sgsap-pessoas__remover:hover {
    background-color: var(--sgsap-danger-soft);
    color: var(--sgsap-danger);
}

/* Painel Dropdown */
.sgsap-pessoas__painel {
    background-color: var(--sgsap-surface-raised);
    border: 1px solid var(--sgsap-border);
    border-radius: var(--sgsap-radius-md);
    box-shadow: var(--sgsap-shadow-lg);
    left: 0;
    margin-top: var(--sgsap-space-1);
    padding: var(--sgsap-space-2);
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1050;
}

.sgsap-pessoas__busca-wrapper {
    align-items: center;
    display: flex;
    margin-bottom: var(--sgsap-space-2);
    position: relative;
}

.sgsap-pessoas__busca-wrapper .sgsap-pessoas__busca-icone,
.sgsap-pessoas__busca-icone {
    color: var(--sgsap-text-muted);
    font-size: .85rem;
    left: .75rem;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.sgsap-pessoas__painel .sgsap-pessoas__busca.form-control,
.sgsap-pessoas__busca-wrapper .sgsap-pessoas__busca,
.sgsap-pessoas__busca {
    font-size: var(--sgsap-font-size-small);
    padding-left: 2.25rem;
    padding-right: .75rem;
}

/* Esconde o X nativo de input[type=search] que empurra o texto. */
.sgsap-pessoas__busca::-webkit-search-cancel-button,
.sgsap-pessoas__busca::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.sgsap-pessoas__toolbar {
    align-items: center;
    border-bottom: 1px solid var(--sgsap-border-subtle);
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--sgsap-space-2);
    padding: 0 var(--sgsap-space-1) var(--sgsap-space-2);
}

.sgsap-pessoas__contador {
    color: var(--sgsap-text-muted);
    font-size: .75rem;
    font-weight: var(--sgsap-font-weight-medium);
}

.sgsap-pessoas__acoes {
    align-items: center;
    display: flex;
    gap: var(--sgsap-space-1);
}

.sgsap-pessoas__btn-acao {
    background: transparent;
    border: 0;
    color: var(--sgsap-accent-legivel);
    cursor: pointer;
    font-size: .75rem;
    font-weight: var(--sgsap-font-weight-medium);
    padding: 0 var(--sgsap-space-1);
}

.sgsap-pessoas__btn-acao:hover {
    text-decoration: underline;
}

.sgsap-pessoas__divisor {
    color: var(--sgsap-border-strong);
    font-size: .7rem;
}

.sgsap-pessoas__lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 14rem;
    overflow-y: auto;
    padding-right: var(--sgsap-space-1);
}

.sgsap-pessoas__item {
    align-items: center;
    border-radius: var(--sgsap-radius-sm);
    cursor: pointer;
    display: flex;
    gap: var(--sgsap-space-2);
    padding: .35rem .5rem;
    transition: background-color var(--sgsap-transition);
}

.sgsap-pessoas__item:hover {
    background-color: var(--sgsap-surface-hover);
}

.sgsap-pessoas__item.is-selecionado {
    background-color: var(--sgsap-surface-tinted);
}

.sgsap-pessoas__checkbox {
    cursor: pointer;
    margin: 0;
}

.sgsap-pessoas__avatar {
    align-items: center;
    background-color: var(--sgsap-accent-soft);
    border-radius: var(--sgsap-radius-pill);
    color: var(--sgsap-accent-strong);
    display: inline-flex;
    font-size: .7rem;
    font-weight: var(--sgsap-font-weight-bold);
    height: 1.75rem;
    justify-content: center;
    line-height: 1;
    width: 1.75rem;
}

.sgsap-pessoas__info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.sgsap-pessoas__nome {
    color: var(--sgsap-text);
    font-size: var(--sgsap-font-size-small);
    font-weight: var(--sgsap-font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgsap-pessoas__usuario {
    color: var(--sgsap-text-muted);
    font-size: .75rem;
}

.sgsap-pessoas__vazio {
    color: var(--sgsap-text-muted);
    font-size: var(--sgsap-font-size-small);
    padding: var(--sgsap-space-3);
    text-align: center;
}

/* Catálogos pesquisáveis: o select nativo permanece como fallback sem JS. */
.sgsap-search-select__native {
    display: none !important;
}

.sgsap-search-select {
    position: relative;
    width: 100%;
}

.sgsap-search-select__trigger.form-control {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: var(--sgsap-space-2);
    justify-content: space-between;
    padding: .375rem .75rem;
    text-align: left;
}

.sgsap-search-select__trigger:focus,
.sgsap-search-select__trigger.is-open {
    border-color: var(--sgsap-accent);
    box-shadow: var(--sgsap-focus-ring);
    outline: 0;
}

.sgsap-search-select__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgsap-search-select__arrow {
    color: var(--sgsap-text-muted);
    font-size: .8rem;
    transition: transform var(--sgsap-transition);
}

.sgsap-search-select__trigger.is-open .sgsap-search-select__arrow {
    transform: rotate(180deg);
}

.sgsap-search-select__panel {
    background-color: var(--sgsap-surface-raised);
    border: 1px solid var(--sgsap-border);
    border-radius: var(--sgsap-radius-md);
    box-shadow: var(--sgsap-shadow-lg);
    left: 0;
    margin-top: var(--sgsap-space-1);
    padding: var(--sgsap-space-2);
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1050;
}

.sgsap-search-select__input.form-control {
    font-size: var(--sgsap-font-size-small);
    min-height: 2.35rem;
}

.sgsap-search-select__options {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--sgsap-space-2);
    max-height: 14rem;
    overflow-y: auto;
}

.sgsap-search-select__option {
    background: transparent;
    border: 0;
    border-radius: var(--sgsap-radius-sm);
    color: var(--sgsap-text);
    cursor: pointer;
    font-size: var(--sgsap-font-size-small);
    padding: .45rem .55rem;
    text-align: left;
}

.sgsap-search-select__option:hover,
.sgsap-search-select__option:focus,
.sgsap-search-select__option.is-selected {
    background-color: var(--sgsap-surface-tinted);
    outline: 0;
}

.sgsap-search-select__empty {
    color: var(--sgsap-text-muted);
    font-size: var(--sgsap-font-size-small);
    margin: var(--sgsap-space-3) 0 var(--sgsap-space-1);
    text-align: center;
}

/* Formulário de Estoque e Produtos */
.sgsap-form-card {
    background-color: var(--sgsap-surface);
    border: 1px solid var(--sgsap-border);
    border-radius: var(--sgsap-radius-md);
    box-shadow: var(--sgsap-shadow-sm);
    margin-bottom: var(--sgsap-space-4);
    padding: var(--sgsap-space-4);
}
.sgsap-form-card__header {
    align-items: center;
    border-bottom: 1px solid var(--sgsap-border-subtle);
    display: flex;
    gap: var(--sgsap-space-2);
    margin-bottom: var(--sgsap-space-3);
    padding-bottom: var(--sgsap-space-2);
}
.sgsap-form-card__icon {
    align-items: center;
    background-color: var(--sgsap-accent-soft);
    border-radius: var(--sgsap-radius-md);
    color: var(--sgsap-accent-strong);
    display: inline-flex;
    font-size: 1rem;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}
.sgsap-form-card__title {
    font-size: 1.05rem;
    font-weight: var(--sgsap-font-weight-bold);
    margin: 0;
}
.sgsap-estoque-tipo-grid {
    display: grid;
    gap: var(--sgsap-space-3);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-bottom: var(--sgsap-space-3);
}
.sgsap-estoque-tipo-card {
    background-color: var(--sgsap-surface-raised);
    border: 2px solid var(--sgsap-border);
    border-radius: var(--sgsap-radius-md);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--sgsap-space-2);
    padding: var(--sgsap-space-3);
    position: relative;
    transition: border-color var(--sgsap-transition), background-color var(--sgsap-transition), box-shadow var(--sgsap-transition);
}
.sgsap-estoque-tipo-card:hover {
    border-color: var(--sgsap-border-strong);
    box-shadow: var(--sgsap-shadow-sm);
}
.sgsap-estoque-tipo-card.is-selected {
    background-color: var(--sgsap-surface-tinted);
    border-color: var(--sgsap-accent);
    box-shadow: var(--sgsap-focus-ring);
}
.sgsap-estoque-tipo-card__badge {
    align-items: center;
    display: flex;
    font-size: 1.25rem;
    gap: var(--sgsap-space-2);
    font-weight: var(--sgsap-font-weight-bold);
}
.sgsap-estoque-tipo-card__desc {
    color: var(--sgsap-text-muted);
    font-size: var(--sgsap-font-size-small);
    line-height: 1.4;
    margin: 0;
}
.sgsap-unit-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sgsap-space-1);
    margin-top: var(--sgsap-space-1);
}
.sgsap-unit-pill {
    background-color: var(--sgsap-surface-muted);
    border: 1px solid var(--sgsap-border-subtle);
    border-radius: var(--sgsap-radius-pill);
    color: var(--sgsap-text-muted);
    cursor: pointer;
    font-size: .75rem;
    font-weight: var(--sgsap-font-weight-medium);
    padding: .15rem .55rem;
    transition: background-color var(--sgsap-transition), color var(--sgsap-transition);
}
.sgsap-unit-pill:hover {
    background-color: var(--sgsap-surface-hover);
    color: var(--sgsap-text);
}