/* ==========================================================================
   SAGP 2.0 — tema da aplicação
   Carregado DEPOIS do Bootstrap 5.3 e dos plugins. Redefine as variáveis do
   próprio Bootstrap para que a marcação existente das views herde a identidade
   sem reescrita. Tokens e justificativas: DESIGN.md na raiz do projeto.
   ========================================================================== */

:root {
    /* Tinta — cromo escuro */
    --sg-ink-900: #08121F;
    --sg-ink-800: #0D1B2C;
    --sg-ink-700: #16283F;
    --sg-ink-600: #23384F;

    /* Petróleo — primária */
    --sg-primary-50:  #E8F5F9;
    --sg-primary-100: #C7E7F0;
    --sg-primary-300: #5FBACD;
    --sg-primary-500: #128BA8;
    --sg-primary-600: #0E7490;
    --sg-primary-700: #0B5B72;

    /* Âmbar — acento. Três degraus: o 500 é a cor da marca mas marca 2,1:1
       sobre branco; o 600 (3,3:1) serve para preenchimento; só o -text passa
       em AA como texto (6,1:1). */
    --sg-accent-50:   #FFF5E1;
    --sg-accent-100:  #F8DCA4;
    --sg-accent-500:  #F2A413;
    --sg-accent-600:  #C87F06;
    --sg-accent-text: #8A5703;

    /* Semânticas */
    --sg-success-50:  #E4F6EF;
    --sg-success-100: #A9DCC8;
    --sg-success-500: #12805C;
    --sg-success-700: #0B5940;
    --sg-danger-50:   #FDECEA;
    --sg-danger-100:  #F2B7B1;
    --sg-danger-500:  #C8352A;
    --sg-danger-700:  #8E241B;

    /* Superfície e texto */
    --sg-canvas: #F3F6F8;
    --sg-surface: #FFFFFF;
    --sg-surface-sunken: #F7F9FB;
    --sg-border: #E3E9EF;
    --sg-border-strong: #CBD6E2;
    --sg-text: #0F1E33;
    --sg-text-muted: #5A6B82;

    --sg-radius-sm: 8px;
    --sg-radius-md: 12px;
    --sg-radius-lg: 16px;
    --sg-radius-pill: 999px;

    --sg-shadow-sm: 0 1px 2px rgba(15,30,51,.06), 0 1px 3px rgba(15,30,51,.05);
    --sg-shadow-md: 0 4px 12px rgba(15,30,51,.07), 0 2px 4px rgba(15,30,51,.04);
    --sg-shadow-lg: 0 16px 40px rgba(8,18,31,.14);

    --sg-ease: cubic-bezier(.2,.7,.3,1);
    --sg-sidebar-width: 260px;
    --sg-focus-ring: 0 0 0 3px rgba(18,139,168,.18);

    --sg-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Ponte com o Bootstrap
   -------------------------------------------------------------------------- */

:root,
[data-bs-theme="light"] {
    --bs-font-sans-serif: var(--sg-font);
    --bs-body-font-family: var(--sg-font);
    --bs-body-font-size: 0.9375rem;
    --bs-body-line-height: 1.55;
    /* body-bg is white on purpose: Bootstrap 5.3 paints fields, menus, modals
       and list groups with it. The gray canvas goes only on <body> (below). */
    --bs-body-bg: var(--sg-surface);
    --bs-body-color: var(--sg-text);
    --bs-emphasis-color: var(--sg-text);
    --bs-secondary-color: var(--sg-text-muted);
    --bs-tertiary-bg: var(--sg-surface-sunken);
    --bs-border-color: var(--sg-border);
    --bs-border-radius: var(--sg-radius-md);
    --bs-border-radius-sm: var(--sg-radius-sm);
    --bs-border-radius-lg: var(--sg-radius-lg);
    --bs-border-radius-xl: var(--sg-radius-lg);

    --bs-primary: #128BA8;
    --bs-primary-rgb: 18, 139, 168;
    --bs-secondary: #5A6B82;
    --bs-secondary-rgb: 90, 107, 130;
    --bs-success: #12805C;
    --bs-success-rgb: 18, 128, 92;
    --bs-danger: #C8352A;
    --bs-danger-rgb: 200, 53, 42;
    --bs-warning: #F2A413;
    --bs-warning-rgb: 242, 164, 19;
    --bs-info: #0E7490;
    --bs-info-rgb: 14, 116, 144;
    --bs-dark: #0F1E33;
    --bs-dark-rgb: 15, 30, 51;
    --bs-light: #F3F6F8;
    --bs-light-rgb: 243, 246, 248;

    --bs-link-color: var(--sg-primary-600);
    --bs-link-color-rgb: 14, 116, 144;
    --bs-link-hover-color: var(--sg-primary-700);
    --bs-link-hover-color-rgb: 11, 91, 114;

    /* Os tokens "-subtle" são compilados com cores fixas e continuariam nas
       cores antigas do Bootstrap. */
    --bs-primary-bg-subtle: var(--sg-primary-50);
    --bs-primary-border-subtle: var(--sg-primary-100);
    --bs-primary-text-emphasis: var(--sg-primary-700);
    --bs-success-bg-subtle: var(--sg-success-50);
    --bs-success-border-subtle: var(--sg-success-100);
    --bs-success-text-emphasis: var(--sg-success-700);
    --bs-danger-bg-subtle: var(--sg-danger-50);
    --bs-danger-border-subtle: var(--sg-danger-100);
    --bs-danger-text-emphasis: var(--sg-danger-700);
    --bs-warning-bg-subtle: var(--sg-accent-50);
    --bs-warning-border-subtle: var(--sg-accent-100);
    --bs-warning-text-emphasis: var(--sg-accent-text);
    --bs-info-bg-subtle: var(--sg-primary-50);
    --bs-info-border-subtle: var(--sg-primary-100);
    --bs-info-text-emphasis: var(--sg-primary-700);
    --bs-secondary-bg-subtle: var(--sg-surface-sunken);
    --bs-secondary-border-subtle: var(--sg-border);
    --bs-secondary-text-emphasis: var(--sg-text-muted);
    --bs-light-bg-subtle: var(--sg-surface-sunken);
    --bs-light-border-subtle: var(--sg-border);
    --bs-code-color: var(--sg-primary-700);
    --bs-highlight-bg: var(--sg-accent-50);
}

body {
    background-color: var(--sg-canvas);
    color: var(--sg-text);
    font-family: var(--sg-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; }

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: -0.02em;
    color: var(--sg-text);
}

h2, .h2, h3, .h3 { font-weight: 800; }

.fw-medium { font-weight: 500 !important; }

.text-muted { color: var(--sg-text-muted) !important; }
.text-dark  { color: var(--sg-text) !important; }

/* .text-warning cai no âmbar 500, que marca 2,1:1 sobre branco. Os prazos
   "vence em menos de 30 dias" usam esta classe e precisam ser lidos. */
.text-warning { color: var(--sg-accent-text) !important; }
.text-info    { color: var(--sg-primary-600) !important; }
.text-primary { color: var(--sg-primary-600) !important; }

.sg-eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sg-text-muted);
}

.sg-numeric, .sg-stat__value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

code {
    color: var(--sg-primary-700);
    background: var(--sg-surface-sunken);
    border: 1px solid var(--sg-border);
    border-radius: 6px;
    padding: .1rem .35rem;
    font-size: 0.8125rem;
}

::selection { background: rgba(18,139,168,.22); }

*:focus-visible { outline: 2px solid var(--sg-primary-500); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Estrutura: barra lateral + área de conteúdo
   -------------------------------------------------------------------------- */

.sg-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

@media (min-width: 992px) {
    .sg-shell { flex-direction: row; }
}

/* O !important e a especificidade dupla não são zelo: acima de 992px o
   Bootstrap aplica `background-color: transparent !important` ao .offcanvas-lg,
   e sem isto a barra perde o fundo escuro no desktop. */
.sg-sidebar,
.sg-sidebar.offcanvas-lg {
    width: var(--sg-sidebar-width);
    background:
        radial-gradient(circle at 12% 0%, rgba(18,139,168,.28), transparent 46%),
        var(--sg-ink-900) !important;
    color: #E6EDF5;
    flex-shrink: 0;
}

@media (min-width: 992px) {
    .sg-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
    }
}

.sg-sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem .9rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

/* The menu scrolls inside the sidebar. Above 992px Bootstrap sets
   `.offcanvas-lg .offcanvas-body { flex-grow: 0; overflow-y: visible }` with a
   more specific selector, which clipped the last menu items off the screen —
   hence the double class and the min-height: 0 on the flex chain. */
.sg-sidebar > .d-flex { min-height: 0; }

.sg-sidebar .sg-sidebar__body,
.sg-sidebar.offcanvas-lg .sg-sidebar__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--sg-ink-600) transparent;
}

.sg-sidebar__nav { flex-grow: 1; padding: .5rem 0; }

.sg-sidebar__section {
    padding: 1.1rem .9rem .35rem 1.35rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(230,237,245,.60); /* 6,2:1 sobre a tinta; a 46% ficava abaixo de 4,5:1 */
}

.sg-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 2px .6rem;
    padding: .6rem .8rem;
    border-radius: var(--sg-radius-md);
    color: rgba(230,237,245,.74);
    font-weight: 600;
    font-size: 0.875rem;
    transition: background-color .16s var(--sg-ease), color .16s var(--sg-ease);
}

.sg-nav-link i { font-size: 1.05rem; opacity: .85; }

.sg-nav-link:hover,
.sg-nav-link:focus-visible {
    background: var(--sg-ink-600);
    color: #fff;
}

.sg-nav-link.active {
    background: var(--sg-ink-700);
    color: #fff;
}

.sg-nav-link.active::before {
    content: "";
    position: absolute;
    left: -.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--sg-accent-500);
}

.sg-nav-link.active i { opacity: 1; color: var(--sg-accent-500); }

.sg-sidebar__user {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .75rem;
    margin: .75rem;
    border-radius: var(--sg-radius-md);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
}

.sg-sidebar__user-name {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.sg-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sg-radius-pill);
    background: linear-gradient(140deg, var(--sg-primary-600), var(--sg-primary-700));
    color: #fff;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: .02em;
}

.sg-role {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sg-accent-500);
}

/* Sair, sobre o cromo escuro: tijolo claro para ler sobre tinta. */
.sg-sidebar .sg-logout {
    color: #F2A39C;
    border: 0;
}

.sg-sidebar .sg-logout:hover { background: rgba(200,53,42,.22); color: #fff; }

/* Marca: monograma "S" sobre bloco petróleo com um degrau âmbar */
.sg-brand { display: flex; align-items: center; gap: .7rem; min-width: 0; }

.sg-brand__mark {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(150deg, var(--sg-primary-600), var(--sg-primary-700));
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.04em;
    overflow: hidden;
}

.sg-brand__mark::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    background: var(--sg-accent-500);
    border-top-left-radius: 4px;
}

.sg-brand__name { display: block; font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.02em; color: #fff; line-height: 1.15; }
.sg-brand__tag  { display: block; font-size: 0.625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sg-accent-500); }

/* Área de conteúdo */
.sg-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Barra do topo: trilha de navegação em eyebrow + notificações + usuário.
   No celular também leva a marca e o botão do menu. */
.sg-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 60px;
    padding: .55rem 1rem;
    background: rgba(243,246,248,.92);
    backdrop-filter: saturate(1.4) blur(8px);
    -webkit-backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--sg-border);
}

@media (min-width: 768px) {
    .sg-topbar { padding: .55rem 2.25rem; }
}

.sg-topbar__left, .sg-topbar__right { display: flex; align-items: center; gap: .6rem; min-width: 0; }

.sg-topbar .sg-brand__name { color: var(--sg-text); }
.sg-topbar .sg-brand__tag { color: var(--sg-text-muted); }

.sg-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sg-text-muted);
    min-width: 0;
}

.sg-crumbs a { color: var(--sg-text-muted); }
.sg-crumbs a:hover { color: var(--sg-primary-600); }
.sg-crumbs__sep { color: var(--sg-border-strong); }
.sg-crumbs__current { color: var(--sg-text); }

/* Botões redondos do topo (notificações, conta) */
.sg-topbar-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 38px;
    min-width: 38px;
    padding: 0 .5rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-pill);
    background: var(--sg-surface);
    color: var(--sg-text-muted);
    transition: border-color .16s var(--sg-ease), color .16s var(--sg-ease), box-shadow .16s var(--sg-ease);
}

.sg-topbar-btn:hover,
.sg-topbar-btn[aria-expanded="true"] {
    border-color: var(--sg-border-strong);
    color: var(--sg-text);
    box-shadow: var(--sg-shadow-sm);
}

.sg-topbar-btn .sg-avatar { width: 30px; height: 30px; font-size: 0.7rem; margin-left: -.25rem; }
.sg-topbar-btn.dropdown-toggle::after { display: none; }

.sg-topbar-btn__count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--sg-radius-pill);
    background: var(--sg-danger-500);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--sg-canvas);
}

.sg-notif-menu { width: 340px; max-width: calc(100vw - 2rem); }
.sg-notif-menu__list { max-height: 360px; overflow-y: auto; }

/* Full width (owner, 29/09/2026: "as grids não vão até o final da página"):
   lists and grids use the whole screen; long forms keep a readable measure
   through their own columns (Bootstrap row/col), not a cap on the page. */
.sg-main {
    flex: 1;
    width: 100%;
    max-width: none;
    padding: 1.25rem 1rem 2rem;
}

@media (min-width: 768px) {
    .sg-main { padding: 1.75rem 2.25rem 2.5rem; }
}

.sg-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    padding: 1rem 1rem 1.5rem;
    font-size: 0.75rem;
    color: var(--sg-text-muted);
    border-top: 1px solid var(--sg-border);
}

@media (min-width: 768px) {
    .sg-footer { padding: 1rem 2.25rem 1.5rem; }
}

/* --------------------------------------------------------------------------
   Cabeçalho das telas (marcação existente das views: .page-header h1)
   -------------------------------------------------------------------------- */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-header h1 {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* O ícone do título vira bloco tonal, como no card de indicador */
.page-header h1 > i.bi {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    border-radius: var(--sg-radius-md);
    font-size: 1.15rem;
    color: var(--sg-primary-600);
    background: var(--sg-primary-50);
}

.page-header .page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* Year in focus on the dashboard: arrows around a select */
.sg-year-picker { display: flex; align-items: center; gap: .4rem; }
.sg-year-picker .form-select { width: auto; min-width: 8.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 575.98px) {
    .page-header h1 { font-size: 1.25rem; }
    .page-header h1 > i.bi { width: 34px; height: 34px; font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--sg-radius-md);
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-focus-box-shadow: var(--sg-focus-ring);
    transition: background-color .16s var(--sg-ease), border-color .16s var(--sg-ease),
                color .16s var(--sg-ease), box-shadow .16s var(--sg-ease), transform .1s var(--sg-ease);
}

.btn:active { transform: translateY(1px); }

/* Preenchimento no 600, não no 500: branco sobre #128BA8 mede 3,97:1 e o
   texto do botão (0.875rem/600) é corpo, não texto grande. No 600 são 5,36:1. */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sg-primary-600);
    --bs-btn-border-color: var(--sg-primary-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sg-primary-700);
    --bs-btn-hover-border-color: var(--sg-primary-700);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #094A5C;
    --bs-btn-active-border-color: #094A5C;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--sg-primary-300);
    --bs-btn-disabled-border-color: var(--sg-primary-300);
}

.btn-outline-primary {
    --bs-btn-color: var(--sg-primary-600);
    --bs-btn-border-color: var(--sg-border-strong);
    --bs-btn-bg: var(--sg-surface);
    --bs-btn-hover-bg: var(--sg-primary-50);
    --bs-btn-hover-color: var(--sg-primary-700);
    --bs-btn-hover-border-color: var(--sg-primary-300);
    --bs-btn-active-bg: var(--sg-primary-100);
    --bs-btn-active-color: var(--sg-primary-700);
    --bs-btn-active-border-color: var(--sg-primary-300);
    --bs-btn-disabled-color: var(--sg-primary-300);
    --bs-btn-disabled-border-color: var(--sg-border);
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sg-ink-700);
    --bs-btn-border-color: var(--sg-ink-700);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sg-ink-600);
    --bs-btn-hover-border-color: var(--sg-ink-600);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sg-ink-800);
    --bs-btn-active-border-color: var(--sg-ink-800);
}

.btn-outline-secondary {
    --bs-btn-color: var(--sg-text-muted);
    --bs-btn-border-color: var(--sg-border-strong);
    --bs-btn-bg: var(--sg-surface);
    --bs-btn-hover-bg: var(--sg-surface-sunken);
    --bs-btn-hover-color: var(--sg-text);
    --bs-btn-hover-border-color: var(--sg-border-strong);
    --bs-btn-active-bg: var(--sg-border);
    --bs-btn-active-color: var(--sg-text);
    --bs-btn-active-border-color: var(--sg-border-strong);
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sg-success-500);
    --bs-btn-border-color: var(--sg-success-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0E6B4D;
    --bs-btn-hover-border-color: #0E6B4D;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sg-success-700);
    --bs-btn-active-border-color: var(--sg-success-700);
}

.btn-outline-success {
    --bs-btn-color: var(--sg-success-500);
    --bs-btn-border-color: rgba(18,128,92,.35);
    --bs-btn-bg: var(--sg-surface);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sg-success-500);
    --bs-btn-hover-border-color: var(--sg-success-500);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sg-success-700);
    --bs-btn-active-border-color: var(--sg-success-700);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sg-danger-500);
    --bs-btn-border-color: var(--sg-danger-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #A82B22;
    --bs-btn-hover-border-color: #A82B22;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sg-danger-700);
    --bs-btn-active-border-color: var(--sg-danger-700);
}

.btn-outline-danger {
    --bs-btn-color: var(--sg-danger-500);
    --bs-btn-border-color: rgba(200,53,42,.35);
    --bs-btn-bg: var(--sg-surface);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sg-danger-500);
    --bs-btn-hover-border-color: var(--sg-danger-500);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sg-danger-700);
    --bs-btn-active-border-color: var(--sg-danger-700);
}

.btn-warning {
    --bs-btn-color: #2A1C00;
    --bs-btn-bg: var(--sg-accent-500);
    --bs-btn-border-color: var(--sg-accent-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sg-accent-600);
    --bs-btn-hover-border-color: var(--sg-accent-600);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sg-accent-text);
    --bs-btn-active-border-color: var(--sg-accent-text);
}

/* Âmbar escurecido: no valor 500 o texto marca 2:1 sobre branco e some. */
.btn-outline-warning {
    --bs-btn-color: var(--sg-accent-text);
    --bs-btn-border-color: rgba(198,127,6,.4);
    --bs-btn-bg: var(--sg-surface);
    --bs-btn-hover-color: #2A1C00;
    --bs-btn-hover-bg: var(--sg-accent-500);
    --bs-btn-hover-border-color: var(--sg-accent-500);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sg-accent-600);
    --bs-btn-active-border-color: var(--sg-accent-600);
}

/* info = petróleo. As variantes trazem #0dcaf0 compilado e não leem --bs-info. */
.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sg-primary-600);
    --bs-btn-border-color: var(--sg-primary-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sg-primary-700);
    --bs-btn-hover-border-color: var(--sg-primary-700);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sg-primary-700);
    --bs-btn-active-border-color: var(--sg-primary-700);
}

.btn-outline-info {
    --bs-btn-color: var(--sg-primary-600);
    --bs-btn-border-color: var(--sg-border-strong);
    --bs-btn-bg: var(--sg-surface);
    --bs-btn-hover-color: var(--sg-primary-700);
    --bs-btn-hover-bg: var(--sg-primary-50);
    --bs-btn-hover-border-color: var(--sg-primary-300);
    --bs-btn-active-color: var(--sg-primary-700);
    --bs-btn-active-bg: var(--sg-primary-100);
    --bs-btn-active-border-color: var(--sg-primary-300);
}

.btn-light {
    --bs-btn-color: var(--sg-text);
    --bs-btn-bg: var(--sg-surface-sunken);
    --bs-btn-border-color: var(--sg-border);
    --bs-btn-hover-color: var(--sg-text);
    --bs-btn-hover-bg: #ECF0F4;
    --bs-btn-hover-border-color: var(--sg-border-strong);
    --bs-btn-active-color: var(--sg-text);
    --bs-btn-active-bg: var(--sg-border);
    --bs-btn-active-border-color: var(--sg-border-strong);
}

.btn-dark {
    --bs-btn-bg: var(--sg-ink-800);
    --bs-btn-border-color: var(--sg-ink-800);
    --bs-btn-hover-bg: var(--sg-ink-700);
    --bs-btn-hover-border-color: var(--sg-ink-700);
}

.btn-link {
    --bs-btn-color: var(--sg-primary-600);
    --bs-btn-hover-color: var(--sg-primary-700);
    --bs-btn-font-weight: 600;
    text-decoration: none;
}

.btn-lg { --bs-btn-padding-y: 0.75rem; --bs-btn-font-size: 1rem; }
.btn-sm { --bs-btn-border-radius: var(--sg-radius-sm); --bs-btn-font-size: 0.8125rem; --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .65rem; }

/* Botão só de ícone vira quadrado e exige title. Classe explícita de propósito:
   `:has(> i:only-child)` também casaria com <a><i></i> Voltar</a>, porque
   :only-child ignora nós de texto. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: .5rem;
    padding-right: .5rem;
    min-width: 2.375rem;
}

.btn-icon.btn-sm { min-width: 2rem; padding-left: .4rem; padding-right: .4rem; }
.btn-icon > i { margin: 0 !important; }

.btn-group > .btn,
.btn-group-sm > .btn { --bs-btn-border-radius: var(--sg-radius-sm); }

.btn:disabled, .btn.disabled { opacity: .55; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
    --bs-card-border-radius: var(--sg-radius-lg);
    --bs-card-inner-border-radius: calc(var(--sg-radius-lg) - 1px);
    --bs-card-border-color: var(--sg-border);
    --bs-card-bg: var(--sg-surface);
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-cap-padding-y: .85rem;
    --bs-card-cap-padding-x: 1.25rem;
    box-shadow: var(--sg-shadow-sm);
}

.card.border-0 { border: 1px solid var(--sg-border) !important; }

.card-header {
    --bs-card-cap-bg: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border-bottom: 1px solid var(--sg-border);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--sg-text);
}

.card-header > span > .bi:first-child,
.card-header > .bi:first-child { color: var(--sg-primary-600); }

.card-footer {
    --bs-card-cap-bg: var(--sg-surface-sunken);
    border-top: 1px solid var(--sg-border);
}

.shadow-sm { box-shadow: var(--sg-shadow-sm) !important; }
.shadow    { box-shadow: var(--sg-shadow-md) !important; }
.shadow-lg { box-shadow: var(--sg-shadow-lg) !important; }

/* Card de indicador: filete superior, eyebrow, número tabular, ícone em bloco */
.sg-stat {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    height: 100%;
    padding: 1.1rem 1.1rem 1rem;
    overflow: hidden;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-lg);
    background: var(--sg-surface);
    box-shadow: var(--sg-shadow-sm);
    color: var(--sg-text);
    transition: transform .18s var(--sg-ease), box-shadow .18s var(--sg-ease), border-color .18s var(--sg-ease);
}

.sg-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--sg-stat-tone, var(--sg-primary-500));
}

a:hover > .sg-stat,
a:focus-visible > .sg-stat {
    transform: translateY(-2px);
    box-shadow: var(--sg-shadow-md);
    border-color: var(--sg-border-strong);
}

.sg-stat__value {
    margin-top: .35rem;
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--sg-text);
}

.sg-stat__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sg-radius-md);
    font-size: 1.3rem;
    color: var(--sg-stat-tone, var(--sg-primary-500));
    background: color-mix(in srgb, var(--sg-stat-tone, var(--sg-primary-500)) 12%, transparent);
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .sg-stat__icon { background: var(--sg-primary-50); }
}

.sg-stat--primary { --sg-stat-tone: var(--sg-primary-500); }
.sg-stat--accent  { --sg-stat-tone: var(--sg-accent-600); }
.sg-stat--success { --sg-stat-tone: var(--sg-success-500); }
.sg-stat--danger  { --sg-stat-tone: var(--sg-danger-500); }

/* Card de link (menu de relatórios): ícone tonal, título, descrição e seta.
   O tom só muda quando o destino pede atenção (prazos a vencer). */
.sg-link-card {
    --sg-link-tone: var(--sg-primary-600);
    --sg-link-tint: var(--sg-primary-50);
    display: flex;
    align-items: center;
    gap: .9rem;
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-lg);
    background: var(--sg-surface);
    box-shadow: var(--sg-shadow-sm);
    color: var(--sg-text);
    transition: transform .18s var(--sg-ease), box-shadow .18s var(--sg-ease), border-color .18s var(--sg-ease);
}

.sg-link-card--accent { --sg-link-tone: var(--sg-accent-text); --sg-link-tint: var(--sg-accent-50); }

.sg-link-card:hover,
.sg-link-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--sg-shadow-md);
    border-color: var(--sg-border-strong);
    color: var(--sg-text);
}

.sg-link-card__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sg-radius-md);
    font-size: 1.25rem;
    color: var(--sg-link-tone);
    background: var(--sg-link-tint);
}

.sg-link-card__title { display: block; font-weight: 700; font-size: 0.9375rem; line-height: 1.3; }
.sg-link-card__desc  { display: block; margin-top: .15rem; font-size: 0.8125rem; color: var(--sg-text-muted); }
.sg-link-card__arrow { color: var(--sg-border-strong); transition: transform .18s var(--sg-ease), color .18s var(--sg-ease); }
.sg-link-card:hover .sg-link-card__arrow { color: var(--sg-link-tone); transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Tabelas (e DataTables)
   -------------------------------------------------------------------------- */

.table {
    --bs-table-color: var(--sg-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--sg-border);
    --bs-table-hover-bg: rgba(18,139,168,.045);
    --bs-table-hover-color: var(--sg-text);
    --bs-table-striped-bg: var(--sg-surface-sunken);
    margin-bottom: 0;
    vertical-align: middle;
}

.table > thead { --bs-table-bg: var(--sg-surface-sunken); }

.table > thead th {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sg-text-muted);
    padding-top: .8rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--sg-border);
    white-space: nowrap;
}

.table > tbody td { padding-top: .75rem; padding-bottom: .75rem; }
.table-sm > tbody td, .table-sm > tbody th { padding-top: .45rem; padding-bottom: .45rem; }
.table-light { --bs-table-bg: var(--sg-surface-sunken); }

/* Tabelas de detalhe (show): rótulo à esquerda em cinza, valor em tinta */
.table-borderless > tbody td.text-muted { font-size: 0.8125rem; font-weight: 600; }

.table-responsive { border-radius: var(--sg-radius-md); }

div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label,
div.dataTables_wrapper div.dataTables_info {
    font-size: 0.8125rem;
    color: var(--sg-text-muted);
}

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    border-color: var(--sg-border-strong);
    border-radius: var(--sg-radius-sm);
}

div.dataTables_wrapper div.dataTables_filter input { min-width: 220px; }

/* "Carregando…": pílula com o spinner do Bootstrap (o texto vem de
   SAGP.gridLanguage.processing); os quatro pontos animados do plugin saem.
   Centrada por margem automática, não por -100px: a largura segue o texto. */
div.dataTables_wrapper div.dataTables_processing {
    top: 50%;
    left: 0;
    right: 0;
    width: max-content;
    max-width: calc(100% - 2rem);
    margin: -1.1rem auto 0;
    padding: .45rem 1rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-pill);
    background: var(--sg-surface);
    box-shadow: var(--sg-shadow-md);
    color: var(--sg-text);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

div.dataTables_wrapper div.dataTables_processing > div:last-child { display: none; }

div.dataTables_wrapper div.dataTables_processing .spinner-border {
    width: .875rem;
    height: .875rem;
    margin-right: .5rem;
    border-width: .14em;
    vertical-align: -.125em;
    color: var(--sg-primary-500);
}

table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:after { color: var(--sg-primary-600); }

/* O plugin pinta o hover com preto a 7,5% (box-shadow) por cima do petróleo
   do tema; volta o hover do tema (DESIGN.md §5, Tabela). */
table.dataTable.table-hover > tbody > tr:hover > * { box-shadow: inset 0 0 0 9999px var(--bs-table-hover-bg); }
table.dataTable.table-hover > tbody > tr:hover > td.dataTables_empty { box-shadow: none; }

/* Estado vazio, busca sem resultado e erro de carga dentro da tabela */
table.dataTable td.dataTables_empty { padding: 2.5rem 1rem; }

.sg-grid__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--sg-text-muted);
    text-align: center;
    white-space: normal;
}

.sg-grid__empty > .bi { margin-bottom: .35rem; font-size: 1.75rem; line-height: 1; color: var(--sg-border-strong); }
.sg-grid__empty > strong { font-size: 0.9375rem; font-weight: 700; color: var(--sg-text); }
.sg-grid__empty--error > .bi { color: var(--sg-danger-500); }

/* --------------------------------------------------------------------------
   Grade de dados — SAGP.grid() em assets/js/app.js (DESIGN.md §10)
   Barra (linhas por página · busca · exportar), tabela, rodapé (contagem ·
   paginação). No cartão .sg-grid-card a tabela vai de borda a borda e só a
   barra e o rodapé ganham respiro.
   -------------------------------------------------------------------------- */

/* scroll-margin: a barra do topo é fixa (60px) e cobriria o início da grade */
.sg-grid { position: relative; scroll-margin-top: 76px; }

.sg-grid__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: .75rem;
}

div.dataTables_wrapper .sg-grid__length label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sg-text-muted);
}

div.dataTables_wrapper .sg-grid__length select.form-select {
    min-width: 5rem;
    font-weight: 600;
    color: var(--sg-text);
    font-variant-numeric: tabular-nums;
}

.sg-grid__tools {
    display: flex;
    flex: 1 1 20rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    min-width: 0;
}

.sg-grid__search { position: relative; flex: 0 1 18rem; min-width: 0; }

.sg-grid__search > .bi {
    position: absolute;
    top: 50%;
    left: .7rem;
    transform: translateY(-50%);
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--sg-text-muted);
    pointer-events: none;
}

.sg-grid__search .form-control { width: 100%; padding-left: 2rem; }

.sg-grid__export { display: flex; }

.sg-grid__body { position: relative; }
.sg-grid__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

div.dataTables_wrapper.sg-grid table.dataTable { margin: 0 !important; }

/* Densidade: listas longas, linha de ~44px com os botões pequenos */
.sg-grid .table > thead th { padding-top: .65rem; padding-bottom: .65rem; }
.sg-grid .table > tbody td { padding-top: .55rem; padding-bottom: .55rem; font-variant-numeric: tabular-nums; }
.sg-grid .table > thead th.sorting_asc,
.sg-grid .table > thead th.sorting_desc { color: var(--sg-text); }

/* Carregando: as linhas atuais esmaecem e a pílula fica no alto da tabela,
   visível mesmo com 250 linhas (no meio ela cairia fora da tela) */
.sg-grid__scroll tbody { transition: opacity .16s var(--sg-ease); }
.sg-grid--busy .sg-grid__scroll tbody { opacity: .45; }
div.dataTables_wrapper.sg-grid div.dataTables_processing { top: 3.25rem; margin-top: 0; }

.sg-grid__actions { display: flex; flex-wrap: nowrap; gap: .25rem; }
td.text-end > .sg-grid__actions { justify-content: flex-end; }
td.text-center > .sg-grid__actions { justify-content: center; }

.sg-grid__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-top: .75rem;
}

div.dataTables_wrapper.sg-grid div.dataTables_info {
    padding: 0;
    font-size: 0.8125rem;
    color: var(--sg-text-muted);
    font-variant-numeric: tabular-nums;
}

div.dataTables_wrapper.sg-grid div.dataTables_info strong { font-weight: 700; color: var(--sg-text); }

/* Paginação compacta: quadrados de 32px separados, não a barra emendada */
div.dataTables_wrapper.sg-grid div.dataTables_paginate ul.pagination { gap: .25rem; margin: 0; }

div.dataTables_wrapper.sg-grid .pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    margin-left: 0;
    padding: 0 .55rem;
    border-radius: var(--sg-radius-sm);
    line-height: 1;
}

div.dataTables_wrapper.sg-grid .pagination .page-link > .bi { font-size: 0.75rem; }

/* Reticências: texto, não botão */
div.dataTables_wrapper.sg-grid .pagination .page-link[data-dt-idx="ellipsis"] {
    min-width: 1.25rem;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--sg-text-muted);
}

/* Cartão da grade: tabela de borda a borda */
.sg-grid-card > .sg-grid > .sg-grid__toolbar { padding: 1rem 1.25rem 0; }
.sg-grid-card > .sg-grid .sg-grid__scroll { border-top: 1px solid var(--sg-border); }
.sg-grid-card > .sg-grid .table > :not(caption) > tr > :first-child { padding-left: 1.25rem; }
.sg-grid-card > .sg-grid .table > :not(caption) > tr > :last-child { padding-right: 1.25rem; }
.sg-grid-card > .sg-grid .table > tbody > tr:last-child > * { border-bottom-width: 0; }

.sg-grid-card > .sg-grid > .sg-grid__footer {
    margin-top: 0;
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--sg-border);
}

@media (max-width: 575.98px) {
    .sg-grid__tools, .sg-grid__search, .sg-grid__export { flex: 1 1 100%; }
    .sg-grid__export > .btn { flex: 1 1 auto; }
    .sg-grid__footer { justify-content: center; text-align: center; }
    /* No celular: primeira, anterior, a página atual, próxima e última */
    div.dataTables_wrapper.sg-grid .page-item:not(.first):not(.previous):not(.active):not(.next):not(.last) { display: none; }
    .sg-grid-card > .sg-grid > .sg-grid__toolbar { padding: .85rem 1rem 0; }
    .sg-grid-card > .sg-grid > .sg-grid__footer { padding: .75rem 1rem; }
    .sg-grid-card > .sg-grid .table > :not(caption) > tr > :first-child { padding-left: 1rem; }
    .sg-grid-card > .sg-grid .table > :not(caption) > tr > :last-child { padding-right: 1rem; }
}

/* --------------------------------------------------------------------------
   Paginação, abas, listas, trilha
   -------------------------------------------------------------------------- */

.pagination {
    --bs-pagination-color: var(--sg-text-muted);
    --bs-pagination-bg: var(--sg-surface);
    --bs-pagination-border-color: var(--sg-border);
    --bs-pagination-border-radius: var(--sg-radius-sm);
    --bs-pagination-hover-color: var(--sg-primary-700);
    --bs-pagination-hover-bg: var(--sg-primary-50);
    --bs-pagination-hover-border-color: var(--sg-primary-100);
    --bs-pagination-focus-color: var(--sg-primary-700);
    --bs-pagination-focus-bg: var(--sg-primary-50);
    --bs-pagination-focus-box-shadow: var(--sg-focus-ring);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--sg-primary-600);
    --bs-pagination-active-border-color: var(--sg-primary-600);
    --bs-pagination-disabled-color: var(--sg-border-strong);
    --bs-pagination-disabled-bg: var(--sg-surface);
    --bs-pagination-disabled-border-color: var(--sg-border);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--sg-border);
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-link-active-color: var(--sg-primary-700);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;
    gap: .25rem;
}

.nav-tabs .nav-link {
    color: var(--sg-text-muted);
    font-weight: 600;
    font-size: 0.875rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .65rem .9rem;
    margin-bottom: -1px;
    transition: color .16s var(--sg-ease), border-color .16s var(--sg-ease);
}

.nav-tabs .nav-link:hover { color: var(--sg-text); border-bottom-color: var(--sg-border-strong); }
.nav-tabs .nav-link.active { color: var(--sg-primary-700); border-bottom-color: var(--sg-accent-500); }

.list-group {
    --bs-list-group-border-color: var(--sg-border);
    --bs-list-group-action-hover-bg: var(--sg-surface-sunken);
    --bs-list-group-active-bg: var(--sg-primary-600);
    --bs-list-group-active-border-color: var(--sg-primary-600);
}

.breadcrumb {
    --bs-breadcrumb-font-size: 0.8125rem;
    --bs-breadcrumb-divider-color: var(--sg-border-strong);
    --bs-breadcrumb-item-active-color: var(--sg-text-muted);
}

/* --------------------------------------------------------------------------
   Formulários (e Select2)
   -------------------------------------------------------------------------- */

.form-control, .form-select {
    border-color: var(--sg-border-strong);
    border-radius: var(--sg-radius-md);
    padding: .55rem .85rem;
    color: var(--sg-text);
    font-size: 0.9375rem;
    transition: border-color .16s var(--sg-ease), box-shadow .16s var(--sg-ease);
}

.form-control-sm, .form-select-sm { border-radius: var(--sg-radius-sm); padding: .3rem .6rem; font-size: 0.8125rem; }
/* Selects keep room for the arrow: the padding shorthands above would put
   long values under it (Bootstrap reserves 2.25rem on the right) */
.form-select { padding-right: 2.25rem; }
.form-select-sm { padding-right: 2rem; background-position: right .6rem center; }

.form-control:focus, .form-select:focus {
    border-color: var(--sg-primary-500);
    box-shadow: var(--sg-focus-ring);
}

.form-control:disabled, .form-control[readonly] { background-color: var(--sg-surface-sunken); }

.form-label { font-weight: 600; font-size: 0.8125rem; color: var(--sg-text); margin-bottom: .35rem; }
.form-text  { color: var(--sg-text-muted); font-size: 0.8125rem; }

.form-floating > label { color: var(--sg-text-muted); }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--sg-text-muted); }

.input-group-text {
    background: var(--sg-surface-sunken);
    border-color: var(--sg-border-strong);
    color: var(--sg-text-muted);
}

.form-check-input { border-color: var(--sg-border-strong); }

.form-check-input:checked {
    background-color: var(--sg-primary-500);
    border-color: var(--sg-primary-500);
}

.form-check-input:focus {
    border-color: var(--sg-primary-300);
    box-shadow: var(--sg-focus-ring);
}

/* Títulos de seção dentro de formulários (h5.border-bottom) */
.card-body h5.border-bottom,
.card-body h6.border-bottom {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sg-text-muted);
    border-color: var(--sg-border) !important;
}

.select2-container--bootstrap-5 .select2-selection {
    border-color: var(--sg-border-strong);
    border-radius: var(--sg-radius-md);
    min-height: calc(1.55em + 1.1rem + 2px);
    font-size: 0.9375rem;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--sg-primary-500);
    box-shadow: var(--sg-focus-ring);
}

.select2-container--bootstrap-5 .select2-dropdown {
    border-color: var(--sg-border-strong);
    border-radius: var(--sg-radius-md);
    box-shadow: var(--sg-shadow-md);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: var(--sg-primary-50);
    color: var(--sg-primary-700);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    background-color: var(--sg-primary-600);
    color: #fff;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: var(--sg-primary-500);
    box-shadow: var(--sg-focus-ring);
}

/* --------------------------------------------------------------------------
   Badges, alertas
   -------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: .02em;
    line-height: 1.35;
    border-radius: var(--sg-radius-sm);
    padding: .35em .6em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.badge.fs-6 { font-size: 0.8125rem !important; }

.badge.rounded-pill {
    border-radius: var(--sg-radius-pill);
    min-width: 1.6rem;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

/* Badge de status: fundo tonal, texto no degrau de leitura, borda suave.
   Sem isto `bg-warning` sairia com texto branco sobre amarelo (ilegível). */
.badge.bg-primary,
.badge.bg-info      { background-color: var(--sg-primary-50) !important;  color: var(--sg-primary-700); border-color: var(--sg-primary-100); }
.badge.bg-success   { background-color: var(--sg-success-50) !important;  color: var(--sg-success-700); border-color: var(--sg-success-100); }
.badge.bg-danger    { background-color: var(--sg-danger-50) !important;   color: var(--sg-danger-700);  border-color: var(--sg-danger-100); }
.badge.bg-warning   { background-color: var(--sg-accent-50) !important;   color: var(--sg-accent-text); border-color: var(--sg-accent-100); }
.badge.bg-secondary,
.badge.bg-light     { background-color: var(--sg-surface-sunken) !important; color: var(--sg-text-muted); border-color: var(--sg-border); }
.badge.bg-dark      { background-color: var(--sg-ink-800) !important; color: #fff; }

.alert {
    --bs-alert-border-radius: var(--sg-radius-md);
    --bs-alert-padding-y: .8rem;
    --bs-alert-padding-x: 1rem;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    font-size: 0.875rem;
    font-weight: 500;
}

.alert.alert-dismissible { padding-right: 3rem; }

.alert-success { --bs-alert-bg: var(--sg-success-50); --bs-alert-color: var(--sg-success-700); --bs-alert-border-color: rgba(18,128,92,.2); }
.alert-danger  { --bs-alert-bg: var(--sg-danger-50);  --bs-alert-color: var(--sg-danger-700); --bs-alert-border-color: rgba(200,53,42,.2); }
.alert-warning { --bs-alert-bg: var(--sg-accent-50);  --bs-alert-color: #7A4A02; --bs-alert-border-color: rgba(242,164,19,.28); }
.alert-info    { --bs-alert-bg: var(--sg-primary-50); --bs-alert-color: var(--sg-primary-700); --bs-alert-border-color: rgba(18,139,168,.2); }

.progress {
    --bs-progress-bg: var(--sg-border);
    --bs-progress-border-radius: var(--sg-radius-pill);
    --bs-progress-bar-bg: var(--sg-primary-500);
}

/* --------------------------------------------------------------------------
   Sobreposições — modal, menu suspenso, dica
   -------------------------------------------------------------------------- */

.modal-content {
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-lg);
    box-shadow: var(--sg-shadow-lg);
}

.modal-header { border-bottom-color: var(--sg-border); }
.modal-footer { border-top-color: var(--sg-border); gap: .5rem; }
.modal-title  { font-weight: 700; font-size: 1.0625rem; }
.modal-backdrop.show { opacity: .45; background-color: var(--sg-ink-900); }

.dropdown-menu {
    --bs-dropdown-border-color: var(--sg-border);
    --bs-dropdown-border-radius: var(--sg-radius-md);
    --bs-dropdown-link-color: var(--sg-text);
    --bs-dropdown-link-hover-color: var(--sg-text);
    --bs-dropdown-link-hover-bg: var(--sg-surface-sunken);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--sg-primary-600);
    --bs-dropdown-header-color: var(--sg-text-muted);
    --bs-dropdown-font-size: 0.875rem;
    box-shadow: var(--sg-shadow-md);
    padding: .35rem;
}

.dropdown-item { border-radius: var(--sg-radius-sm); font-weight: 500; padding: .45rem .7rem; }
.dropdown-item.text-danger:hover { background: var(--sg-danger-50); color: var(--sg-danger-700) !important; }
.dropdown-header { padding: .5rem .7rem; }

.tooltip {
    --bs-tooltip-bg: var(--sg-ink-800);
    --bs-tooltip-border-radius: var(--sg-radius-sm);
    --bs-tooltip-font-size: 0.75rem;
    --bs-tooltip-opacity: 1;
}

.btn-close:focus { box-shadow: var(--sg-focus-ring); }

/* --------------------------------------------------------------------------
   Painel: atalhos, pendências, atividades, estado vazio
   -------------------------------------------------------------------------- */

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    height: 100%;
    padding: .9rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-md);
    background: var(--sg-surface);
    color: var(--sg-text);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    transition: border-color .16s var(--sg-ease), background-color .16s var(--sg-ease), transform .16s var(--sg-ease);
}

.quick-action i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sg-radius-sm);
    background: var(--sg-primary-50);
    color: var(--sg-primary-600);
    font-size: 1.05rem;
}

.quick-action:hover {
    border-color: var(--sg-primary-300);
    background: var(--sg-primary-50);
    color: var(--sg-primary-700);
    transform: translateY(-1px);
}

.quick-action:hover i { background: var(--sg-surface); }

/* Pendência: filete à esquerda na cor do estado; o ícone repete a cor. */
.alert-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem .85rem;
    margin-bottom: .6rem;
    border: 1px solid var(--sg-border);
    border-left: 3px solid var(--sg-border-strong);
    border-radius: var(--sg-radius-sm);
    background: var(--sg-surface);
    font-size: 0.875rem;
}

.alert-item:last-child { margin-bottom: 0; }
.alert-item.alert-warning { border-left-color: var(--sg-accent-500); background: var(--sg-accent-50); }
.alert-item.alert-danger  { border-left-color: var(--sg-danger-500); background: var(--sg-danger-50); }

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--sg-border);
    font-size: 0.875rem;
}

.activity-item:first-child { padding-top: 0; }
.activity-item:last-child { border-bottom: 0; padding-bottom: 0; }

.activity-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: .4rem;
    border-radius: 50%;
    background: var(--sg-primary-500);
    box-shadow: 0 0 0 3px var(--sg-primary-50);
}

.activity-dot--accent { background: var(--sg-accent-600); box-shadow: 0 0 0 3px var(--sg-accent-50); }

.activity-time {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sg-text-muted);
    font-variant-numeric: tabular-nums;
}

.empty-state {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: var(--sg-text-muted);
}

.empty-state > i { display: block; margin-bottom: .6rem; font-size: 2.25rem; color: var(--sg-border-strong); }
.empty-state > i.text-success { color: var(--sg-success-500) !important; }

/* Entrada suave dos cards do painel */
.fade-in-up { animation: sg-fade-in-up .32s var(--sg-ease) both; }

@keyframes sg-fade-in-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.spinner-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(243,246,248,.7);
}

/* --------------------------------------------------------------------------
   Filtros das listas (views/partials/filter_bar.php)
   Um cartão acima da tabela: campos, resumo do que está sendo mostrado, ações
   e os filtros salvos do usuário em chips.
   -------------------------------------------------------------------------- */

.sg-filter { --bs-card-spacer-y: 1rem; }

/* Grade fluida: os módulos têm de 3 a 5 campos, sem classe de coluna por tela */
.sg-filter__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: .75rem 1rem;
}

.sg-filter__field { min-width: 0; }
.sg-filter__field .form-label { margin-bottom: .3rem; }

/* Resumo à esquerda, ações à direita; em tela estreita as ações descem juntas */
.sg-filter__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-top: 1rem;
}

.sg-filter__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .5rem;
    min-width: 0;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sg-text);
}

.sg-filter__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }

.sg-filter__saved {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px solid var(--sg-border);
}

.sg-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }

/* Chip: o nome aplica o filtro; o × à direita exclui. Borda, não sombra. */
.sg-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    border: 1px solid var(--sg-border-strong);
    border-radius: var(--sg-radius-pill);
    background: var(--sg-surface);
    transition: border-color .16s var(--sg-ease), background-color .16s var(--sg-ease);
}

/* Hover em sunken, não em petróleo 50: a estrela âmbar 600 cai abaixo de 3:1
   sobre o petróleo claro (medido em tests/contrast.php) */
.sg-chip:hover { border-color: var(--sg-primary-300); background: var(--sg-surface-sunken); }

.sg-chip__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    padding: .3rem .4rem .3rem .8rem;
    border-radius: var(--sg-radius-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sg-text);
}

.sg-chip__link:hover { color: var(--sg-primary-700); }

/* O nome completo fica no title e no texto lido pelo leitor de tela */
.sg-chip__name { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Estrela = filtro padrão da lista */
.sg-chip__star { font-size: 0.75rem; color: var(--sg-accent-600); }

/* Chip do filtro que está sendo mostrado: posição atual é âmbar (DESIGN.md §1) */
.sg-chip--active,
.sg-chip--active:hover { border-color: var(--sg-accent-600); background: var(--sg-accent-50); }
.sg-chip--active .sg-chip__link { font-weight: 700; color: var(--sg-accent-text); }
.sg-chip--active .sg-chip__star { color: var(--sg-accent-text); }

.sg-chip__form { display: inline-flex; margin: 0; }

/* Excluir: alvo de 24px (mínimo da WCAG 2.2), cinza em repouso, tijolo só no
   hover — perda de dado, mas não deve gritar ao lado de cada nome */
.btn.sg-chip__remove {
    --bs-btn-color: var(--sg-text-muted);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--sg-danger-700);
    --bs-btn-hover-bg: var(--sg-danger-50);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--sg-danger-700);
    --bs-btn-active-bg: var(--sg-danger-100);
    --bs-btn-active-border-color: transparent;
    --bs-btn-border-radius: var(--sg-radius-pill);
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    margin-right: .2rem;
    padding: 0;
    font-size: 0.6875rem;
}

/* --------------------------------------------------------------------------
   Plugins: FullCalendar, Toastr, SweetAlert2
   -------------------------------------------------------------------------- */

.fc {
    --fc-border-color: var(--sg-border);
    --fc-page-bg-color: var(--sg-surface);
    --fc-neutral-bg-color: var(--sg-surface-sunken);
    --fc-today-bg-color: var(--sg-accent-50);
    --fc-event-bg-color: var(--sg-primary-600);
    --fc-event-border-color: var(--sg-primary-600);
    --fc-button-text-color: var(--sg-text);
    --fc-button-bg-color: var(--sg-surface);
    --fc-button-border-color: var(--sg-border-strong);
    --fc-button-hover-bg-color: var(--sg-surface-sunken);
    --fc-button-hover-border-color: var(--sg-border-strong);
    --fc-button-active-bg-color: var(--sg-primary-50);
    --fc-button-active-border-color: var(--sg-primary-300);
    font-size: 0.8125rem;
}

.fc .fc-button { font-weight: 600; border-radius: var(--sg-radius-sm); padding: .3rem .65rem; text-transform: capitalize; }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active { color: var(--sg-primary-700); }
.fc .fc-button:focus, .fc .fc-button-primary:focus { box-shadow: var(--sg-focus-ring) !important; }
.fc .fc-toolbar-title { font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; text-transform: capitalize; }
.fc .fc-col-header-cell-cushion { font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-text-muted); }
.fc .fc-daygrid-day-number { color: var(--sg-text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.fc .fc-day-today .fc-daygrid-day-number { color: var(--sg-accent-text); font-weight: 800; }

#toast-container > div {
    border-radius: var(--sg-radius-md);
    box-shadow: var(--sg-shadow-lg);
    opacity: 1;
    font-family: var(--sg-font);
    font-size: 0.875rem;
}

#toast-container > div:hover { box-shadow: var(--sg-shadow-lg); }
#toast-container > .toast-success { background-color: var(--sg-success-500); }
#toast-container > .toast-error   { background-color: var(--sg-danger-500); }
#toast-container > .toast-info    { background-color: var(--sg-primary-600); }
#toast-container > .toast-warning { background-color: var(--sg-accent-text); }

.swal2-popup {
    border-radius: var(--sg-radius-lg) !important;
    font-family: var(--sg-font) !important;
    color: var(--sg-text) !important;
}

.swal2-title { font-weight: 800 !important; letter-spacing: -0.02em; font-size: 1.25rem !important; }
.swal2-html-container { color: var(--sg-text-muted) !important; font-size: 0.9375rem !important; }
.swal2-actions { gap: .5rem; }
.swal2-icon.swal2-warning { border-color: var(--sg-accent-500) !important; color: var(--sg-accent-600) !important; }
.swal2-icon.swal2-info { border-color: var(--sg-primary-300) !important; color: var(--sg-primary-500) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(18,128,92,.3) !important; }
.swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--sg-success-500) !important; }

/* --------------------------------------------------------------------------
   Tela de entrada (login, esqueci a senha)
   -------------------------------------------------------------------------- */

/* Painel de marca à esquerda, formulário à direita. Abaixo de 992px o painel
   vira um cabeçalho compacto para o formulário ficar acima da dobra. */
/* On mobile the brand row keeps its natural height; without the explicit rows
   the grid stretched it to fill the screen. */
.sg-login { min-height: 100vh; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }

@media (min-width: 992px) {
    .sg-login { grid-template-columns: 1.05fr 1fr; grid-template-rows: none; }
}

.sg-login__brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.75rem 1.5rem;
    color: #E6EDF5;
    background:
        radial-gradient(circle at 18% 12%, rgba(18,139,168,.42), transparent 52%),
        radial-gradient(circle at 88% 88%, rgba(242,164,19,.20), transparent 46%),
        var(--sg-ink-900);
}

@media (min-width: 992px) {
    .sg-login__brand { padding: 3.5rem 3.25rem; }
}

/* Malha discreta: textura sem virar ornamento */
.sg-login__brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 30% 30%, #000 10%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 30% 30%, #000 10%, transparent 72%);
    pointer-events: none;
}

.sg-login__brand > * { position: relative; z-index: 1; }

.sg-login__title {
    margin: 0 0 .85rem;
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
    color: #fff;
}

.sg-login__lead {
    max-width: 38ch;
    margin: 0;
    font-size: 1rem;
    color: rgba(230,237,245,.74);
}

.sg-login__points { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }

.sg-login__points li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: 0.875rem;
    color: rgba(230,237,245,.8);
}

.sg-login__points i { color: var(--sg-accent-500); font-size: 1rem; line-height: 1.4; }

/* Linha de prazos: a metáfora do produto (vigências e prorrogações), não enfeite */
.sg-timeline {
    display: grid;
    gap: 9px;
    width: min(100%, 300px);
}

.sg-timeline span {
    display: block;
    height: 9px;
    border-radius: var(--sg-radius-pill);
    background: linear-gradient(90deg, var(--sg-primary-300), var(--sg-primary-600));
    transform-origin: left;
    animation: sg-grow .9s var(--sg-ease) both;
}

.sg-timeline span:nth-child(1) { width: 78%; animation-delay: .02s; }
.sg-timeline span:nth-child(2) { width: 54%; margin-left: 18%; animation-delay: .08s; }
.sg-timeline span:nth-child(3) { width: 36%; margin-left: 52%; background: linear-gradient(90deg, #FFC65B, var(--sg-accent-600)); animation-delay: .14s; }
.sg-timeline span:nth-child(4) { width: 62%; margin-left: 8%; animation-delay: .2s; }

@keyframes sg-grow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

@media (max-width: 991.98px) {
    .sg-login__hero, .sg-login__points { display: none; }
}

.sg-login__form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem 3rem;
    background: var(--sg-surface);
}

.sg-login__form-inner { width: 100%; max-width: 400px; }

@media (max-width: 991.98px) {
    .sg-login__form { align-items: flex-start; padding-top: 2rem; }
}

.sg-login__form .form-control { font-size: 1rem; }

.sg-password { position: relative; }

.sg-password .form-control { padding-right: 3rem; }

.sg-password__toggle {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    z-index: 5;
}

.sg-login__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sg-border);
    font-size: 0.75rem;
    color: var(--sg-text-muted);
}

/* --------------------------------------------------------------------------
   Utilidades, impressão, movimento reduzido
   -------------------------------------------------------------------------- */

.min-w-0 { min-width: 0 !important; }

@media (max-width: 575.98px) {
    /* Evita o zoom automático do iOS ao focar um campo */
    .form-control, .form-select { font-size: 16px; }
}

@media print {
    body { background: #fff; }
    .card, .sg-stat { box-shadow: none !important; border-color: #999 !important; }
    .sg-sidebar, .sg-topbar, .sg-footer, .page-actions, .d-print-none { display: none !important; }
    .sg-main { padding: 0; max-width: none; }
}

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

/* ════════════════════════════════════════════════════════════════════
   Ficha de registro — record page (views/cidades/show.php, DESIGN.md §11)
   Key facts in the header, a section nav on the left (a one-line
   scrolling strip below 992px) and the chosen section on the right.
   The nav never wraps, whatever the number of sections.
   ════════════════════════════════════════════════════════════════════ */

/* Key facts: 1px separators come from the container showing through the gap.
   Fixed column counts (1/2/4) so the four facts always fill whole rows. */
.sg-highlights {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    margin: 0 0 1.5rem;
    overflow: hidden;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-lg);
    background: var(--sg-border);
    box-shadow: var(--sg-shadow-sm);
}
@media (min-width: 360px)  { .sg-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sg-highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sg-highlights__item {
    min-width: 0;
    padding: .8rem 1.1rem;
    background: var(--sg-surface);
}
.sg-highlights dt {
    margin-bottom: .2rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sg-text-muted);
}
.sg-highlights dd {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sg-text);
}

/* minmax(0, …) and min-width: 0 — the one-line strip of phones must scroll
   inside its box, never widen the page */
.sg-record { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.sg-record__nav, .sg-record__main { min-width: 0; }

/* Section nav: one tablist, group labels between the buttons */
.sg-recnav {
    position: relative; /* offsetParent of the buttons: the strip scrolls to them */
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: .5rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-lg);
    background: var(--sg-surface);
    box-shadow: var(--sg-shadow-sm);
}
.sg-recnav__group {
    padding: .8rem .7rem .35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sg-text-muted);
}
.sg-recnav__group:first-child { padding-top: .4rem; }

.sg-recnav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .5rem .7rem;
    border: 0;
    border-radius: var(--sg-radius-sm);
    background: transparent;
    color: var(--sg-text);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    transition: background-color .16s var(--sg-ease), color .16s var(--sg-ease);
}
.sg-recnav__link > .bi {
    flex: 0 0 auto;
    font-size: 1rem;
    color: var(--sg-text-muted);
    transition: color .16s var(--sg-ease);
}
.sg-recnav__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sg-recnav__count {
    flex: 0 0 auto;
    min-width: 1.9rem;
    padding: .1rem .45rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-pill);
    background: var(--sg-surface-sunken);
    color: var(--sg-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.sg-recnav__link:hover { background: var(--sg-surface-sunken); }
.sg-recnav__link:hover > .bi { color: var(--sg-primary-600); }
.sg-recnav__link:focus-visible { outline: 0; box-shadow: var(--sg-focus-ring); }

/* Current section: tonal fill + the accent rule, as in the sidebar */
.sg-recnav__link.active { background: var(--sg-primary-50); color: var(--sg-primary-700); }
.sg-recnav__link.active::before {
    content: "";
    position: absolute;
    top: .45rem;
    bottom: .45rem;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--sg-accent-500);
}
.sg-recnav__link.active > .bi { color: var(--sg-primary-600); }
.sg-recnav__link.active .sg-recnav__count {
    border-color: var(--sg-primary-100);
    background: var(--sg-surface);
    color: var(--sg-primary-700);
}

/* A section with no record at all: quieter, still reachable */
.sg-recnav__link.is-empty:not(.active) { color: var(--sg-text-muted); }
.sg-recnav__link.is-empty:not(.active) .sg-recnav__count { background: transparent; }

@media (min-width: 992px) {
    .sg-record {
        grid-template-columns: 15rem minmax(0, 1fr);
        gap: 1.75rem;
        align-items: start;
    }
    .sg-record__nav { position: sticky; top: 76px; }
}

/* Phones and tablets: a sticky one-line strip under the top bar */
@media (max-width: 991.98px) {
    .sg-record__nav { position: sticky; top: 60px; z-index: 1010; }
    .sg-recnav {
        flex-direction: row;
        gap: .25rem;
        padding: .35rem;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .sg-recnav__group { display: none; }
    .sg-recnav__link { flex: 0 0 auto; width: auto; padding: .45rem .7rem; scroll-snap-align: start; }
    .sg-recnav__link.active::before {
        top: auto;
        right: .7rem;
        bottom: 0;
        left: .7rem;
        width: auto;
        height: 3px;
        border-radius: 3px 3px 0 0;
    }
}

/* Header of a section: title + count line on the left, tools on the right */
.sg-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: 1rem;
}
.sg-section-head__title {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sg-text);
}
.sg-section-head__title > .bi { font-size: 1.1rem; color: var(--sg-primary-600); }
.sg-section-head__meta { margin: .2rem 0 0; font-size: 0.875rem; color: var(--sg-text-muted); }
.sg-section-head__tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

@media print {
    .sg-record { display: block; }
    .sg-record__nav { display: none; }
}

/* --------------------------------------------------------------------------
   Cidades ativas e desativadas (rodada 3 — cidades-ativas)
   Filter bar: a 'flag' field (checkbox, e.g. "Mostrar cidades desativadas")
   sits on the baseline of the selects beside it; the "Incluir desativadas"
   switch under a city select is small and muted — it changes the options,
   not the list. DESIGN.md §13.
   -------------------------------------------------------------------------- */

/* The label row of the selects is ~1.8rem tall: the check lines up with their text */
.sg-filter__field--check {
    display: flex;
    align-items: flex-end;
    padding-bottom: .45rem;
}

.sg-filter__field--check .form-check-label { font-size: 0.875rem; font-weight: 600; color: var(--sg-text); }

.sg-filter__more {
    min-height: 0;
    margin: .35rem 0 0;
    font-size: 0.8125rem;
}

.sg-filter__more .form-check-label { color: var(--sg-text-muted); }

/* A row action that posts (Desativar/Reativar cidade): the form is just a
   wrapper, the button keeps the .btn-icon square of its neighbours */
.sg-grid__form { display: inline-flex; margin: 0; }

/* --------------------------------------------------------------------------
   Anexos — download protegido e anexo ausente (DESIGN.md §12)
   views/partials/anexo.php, views/anexos/*. Seção do agente "anexos".
   Pares de cor reaproveitam os já medidos: texto/muted sobre superfície e
   sunken, ícone primary-600 sobre primary-50 (4,81:1), accent-text sobre
   accent-50 (5,63:1), anel accent-600 sobre branco (3,23:1).
   -------------------------------------------------------------------------- */

/* Arquivo: ícone tonal pelo tipo, nome, "PDF · 403 KB" e a seta de baixar.
   Borda, não sombra: separa, não eleva. */
.sg-file {
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: 32rem;
    padding: .6rem .8rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-md);
    background: var(--sg-surface);
    color: var(--sg-text);
    text-decoration: none;
    transition: border-color .16s var(--sg-ease), background-color .16s var(--sg-ease);
}

a.sg-file:hover,
a.sg-file:focus-visible {
    border-color: var(--sg-border-strong);
    background: var(--sg-surface-sunken);
    color: var(--sg-text);
}

.sg-file__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sg-radius-sm);
    font-size: 1.1rem;
    color: var(--sg-primary-600);
    background: var(--sg-primary-50);
}

.sg-file__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.sg-file__name { font-weight: 600; font-size: 0.875rem; line-height: 1.3; overflow-wrap: anywhere; }
.sg-file__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    font-size: 0.75rem;
    color: var(--sg-text-muted);
    font-variant-numeric: tabular-nums;
}
.sg-file__go { flex: 0 0 auto; margin-left: auto; color: var(--sg-primary-600); transition: transform .16s var(--sg-ease), color .16s var(--sg-ease); }
a.sg-file:hover .sg-file__go { color: var(--sg-primary-700); transform: translateY(2px); }

/* Formulário: o arquivo atual fica logo acima do campo, mais baixo */
.sg-file--compact { padding: .45rem .65rem; }
.sg-file--compact .sg-file__icon { width: 30px; height: 30px; font-size: 1rem; }

/* Ausente: atenção é âmbar (DESIGN.md §1) — ícone e borda; o fundo segue
   branco para o texto de apoio manter os 5,44:1 medidos */
.sg-file--missing { border-color: var(--sg-accent-100); }
.sg-file--missing .sg-file__icon { color: var(--sg-accent-text); background: var(--sg-accent-50); }

/* Página "Anexos ausentes": cada indicador filtra pelo tipo */
.sg-anexo-stat { display: block; height: 100%; color: inherit; text-decoration: none; border-radius: var(--sg-radius-lg); }
.sg-anexo-stat:focus-visible { outline: none; box-shadow: var(--sg-focus-ring); }
.sg-stat__note { margin-top: .2rem; font-size: 0.8125rem; color: var(--sg-text-muted); }
/* Tipo mostrado agora: posição atual é âmbar; accent-600 dá 3,23:1 no branco */
.sg-stat--selected { border-color: var(--sg-accent-600); box-shadow: inset 0 0 0 1px var(--sg-accent-600), var(--sg-shadow-sm); }
.sg-anexo-name { max-width: 22rem; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
    .sg-file, .sg-file__go { transition: none; }
    a.sg-file:hover .sg-file__go { transform: none; }
}

/* Long text in a grid cell (SAGP.render.text with max): shown whole, never
   cut with "…" — the owner reads the full description in the list. Keeps the
   typed line breaks; a minimum width so the column never shrinks to one word
   per line; long words/URLs break instead of widening the table. */
.sg-cell-long {
    display: block;
    min-width: 16rem;
    max-width: 46rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
    line-height: 1.45;
}


/* --------------------------------------------------------------------------
   Permissões e validação de formulário (rodada 3 — perm-core)
   -------------------------------------------------------------------------- */

/* Validação: o Bootstrap compila o vermelho (#dc3545) e o verde (#198754)
   nas variáveis de formulário e nos ícones SVG dos campos. Aqui passam para
   os tokens: inválido = tijolo (perda), válido = jade (confirmado). Pares
   medidos em tests/contrast.php (texto 4,5:1 sobre a superfície). */
[data-bs-theme="light"],
:root {
    --bs-form-invalid-color: var(--sg-danger-500);
    --bs-form-invalid-border-color: var(--sg-danger-500);
    --bs-form-valid-color: var(--sg-success-500);
    --bs-form-valid-border-color: var(--sg-success-500);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23C8352A'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23C8352A' stroke='none'/%3e%3c/svg%3e");
}

.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"] {
    --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23C8352A'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23C8352A' stroke='none'/%3e%3c/svg%3e");
}

.form-control.is-valid,
.was-validated .form-control:valid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2312805C' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}

.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"] {
    --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2312805C' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}

/* Grade de permissões (views/users/form.php): a coluna Excluir é a ação
   sensível — cabeçalho no degrau de texto do tijolo (eyebrow pequeno pede
   4,5:1 sobre o cabeçalho afundado) e marca preenchida em tijolo, não em
   petróleo: excluir é perda, a cor diz isso antes do rótulo. */
.table > thead th.sg-perm-danger { color: var(--sg-danger-700); }

.form-check-input.sg-perm-delete:checked {
    background-color: var(--sg-danger-500);
    border-color: var(--sg-danger-500);
}

.form-check-input.sg-perm-delete:focus {
    border-color: var(--sg-danger-500);
    box-shadow: 0 0 0 3px rgba(200, 53, 42, .18);
}

/* ==========================================================================
   Ditado por voz — botão de microfone nos campos de texto
   Script: assets/js/ditado.js (SAGP_DITADO). Todo textarea (menos data-ditado="off").
   Tokens: DESIGN.md. Prefixo sg-dictate.

   O campo é envolvido por .sg-dictate (position: relative) e o botão fica no
   canto inferior direito, por dentro da borda. O campo ganha só padding à
   direita: a largura e a altura não mudam, a tela não pula quando o script
   liga. A linha de status fica logo abaixo e só ocupa espaço com texto.

   Ouvindo = tijolo. É a exceção consciente à regra "tijolo é perda": o
   vermelho de gravação (REC) é convenção universal de microfone aberto — o
   Google Docs, o Gemini e o teclado do celular usam o mesmo sinal — e o
   âmbar já significa "posição atual" no menu. O anel pulsa; com movimento
   reduzido ele fica parado.
   ========================================================================== */

.sg-dictate {
    position: relative;
}

/* Room for the button so text never runs under it. Textareas reserve more:
   the button sits clear of the resize grip and of the vertical scrollbar. */
.sg-dictate--area .sg-dictate__field { padding-right: 3.375rem; }
.sg-dictate--line .sg-dictate__field { padding-right: 2.75rem; }
.sg-dictate--sm.sg-dictate--area .sg-dictate__field { padding-right: 2.875rem; }
.sg-dictate--sm.sg-dictate--line .sg-dictate__field { padding-right: 2.25rem; }

/* Icon-only button: square, and its title/aria-label is its only label */
.sg-dictate__btn {
    position: absolute;
    right: .375rem;
    bottom: .375rem;
    z-index: 6; /* above a focused .form-control (z-index 5 in groups) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--sg-radius-sm);
    background: transparent;
    color: var(--sg-text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s var(--sg-ease), color .16s var(--sg-ease),
                border-color .16s var(--sg-ease), box-shadow .18s var(--sg-ease);
}
/* Single-line fields: centred vertically, whatever the field's height */
.sg-dictate--line .sg-dictate__btn { top: 50%; bottom: auto; margin-top: -1rem; }
/* 1.125rem clears the textarea's resize grip and a classic 17px scrollbar */
.sg-dictate--area .sg-dictate__btn { right: 1.125rem; }

.sg-dictate--sm .sg-dictate__btn { width: 1.625rem; height: 1.625rem; font-size: .875rem; }
.sg-dictate--sm.sg-dictate--line .sg-dictate__btn { margin-top: -.8125rem; }
.sg-dictate--sm.sg-dictate--area .sg-dictate__btn { right: .875rem; bottom: .25rem; }

.sg-dictate__btn:hover {
    background: var(--sg-primary-50);
    color: var(--sg-primary-600);
}
.sg-dictate__btn:focus-visible {
    outline: 2px solid var(--sg-primary-500);
    outline-offset: 2px;
}

.sg-dictate__btn.is-listening {
    border-color: var(--sg-danger-500);
    background: var(--sg-danger-500);
    color: #fff; /* 5,25:1 sobre tijolo 500, o mesmo par do btn-danger */
    animation: sg-dictate-pulse 1.6s var(--sg-ease) infinite;
}
.sg-dictate__btn.is-listening:hover {
    border-color: var(--sg-danger-700);
    background: var(--sg-danger-700);
    color: #fff;
}

/* Ring in tijolo 500 (200,53,42) fading out: shadow only, no size change */
@keyframes sg-dictate-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(200,53,42,.45); }
    70%  { box-shadow: 0 0 0 .5rem rgba(200,53,42,0); }
    100% { box-shadow: 0 0 0 0 rgba(200,53,42,0); }
}

/* A field that cannot be edited has nothing to dictate into */
.sg-dictate__field:disabled ~ .sg-dictate__btn,
.sg-dictate__field[readonly] ~ .sg-dictate__btn { display: none; }

/* Bootstrap shows .invalid-feedback as a sibling of the field; the wrapper
   breaks that sibling link, so it is restored one level up */
.sg-dictate:has(.sg-dictate__field.is-invalid) ~ .invalid-feedback,
.was-validated .sg-dictate:has(.sg-dictate__field:invalid) ~ .invalid-feedback { display: block; }

/* Status line under the field: collapsed while empty, so it takes no space.
   The message is the live region; the interim echo is visual only. */
.sg-dictate__status {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .125rem .5rem;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--sg-text-muted);
}
.sg-dictate__status.is-shown { margin-top: .375rem; }

/* Never display:none — a live region hidden and shown together with its
   text is not announced by every screen reader */
.sg-dictate__msg {
    font-weight: 600;
    color: var(--sg-text-muted);
}

.sg-dictate__status.is-listening .sg-dictate__msg { color: var(--sg-text); }
/* Recording dot: tijolo 500 as a graphic mark (5,25:1 on white, 4,84:1 on the canvas; 3:1 needed) */
.sg-dictate__status.is-listening .sg-dictate__msg::before {
    content: "";
    display: inline-block;
    width: .5rem;
    height: .5rem;
    margin-right: .4rem;
    border-radius: 50%;
    background: var(--sg-danger-500);
    vertical-align: .05em;
}
.sg-dictate__status.is-warn .sg-dictate__msg { color: var(--sg-accent-text); }
.sg-dictate__status.is-error .sg-dictate__msg { color: var(--sg-danger-700); }

.sg-dictate__interim {
    min-width: 0;
    font-style: italic;
    color: var(--sg-text-muted);
    overflow-wrap: anywhere;
}
.sg-dictate__interim.is-hint { font-style: normal; }
.sg-dictate__interim:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
    /* app.css shortens every animation to one instant run, which would end
       on the transparent keyframe: a still ring says "listening" instead */
    .sg-dictate__btn.is-listening {
        animation: none;
        box-shadow: 0 0 0 3px rgba(200,53,42,.28);
    }
}

@media print {
    .sg-dictate__btn,
    .sg-dictate__status { display: none !important; }
    .sg-dictate .sg-dictate__field { padding-right: .85rem; }
}


/* --------------------------------------------------------------------------
   Dashboard — rankings e dica dos indicadores (rodada 3 — dashboard)
   views/dashboard/index.php. DESIGN.md §16.
   -------------------------------------------------------------------------- */

/* Dica sob o número do indicador ("com projetos em 2026", "todas · a lista
   não tem ano"): diz o que o número conta quando ele não é "do ano".
   Muted sobre branco, 5,44:1. */
.sg-stat__hint {
    margin-top: .2rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--sg-text-muted);
}

/* Ranking: linhas que são links (abrem a lista filtrada). Uma cor só na barra
   (petróleo 500): o nome já diz o que é cada barra (DESIGN.md §7). A barra
   mede 3,25:1 sobre o trilho e 3,97:1 sobre o branco (3:1 exigido). */
.sg-rank {
    display: grid;
    gap: .15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The position sits on the name's baseline, not in the middle of name + bar
   (the body's baseline is its first line's: the name) */
.sg-rank__row {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .45rem .5rem;
    border-radius: var(--sg-radius-sm);
    color: var(--sg-text);
    text-decoration: none;
    transition: background-color .16s var(--sg-ease), color .16s var(--sg-ease);
}

/* Hover em sunken, como os chips: o nome passa a petróleo 700 (7,23:1) */
.sg-rank__row:hover,
.sg-rank__row:focus-visible {
    background: var(--sg-surface-sunken);
    color: var(--sg-text);
}

.sg-rank__row:hover .sg-rank__name,
.sg-rank__row:focus-visible .sg-rank__name { color: var(--sg-primary-700); }

.sg-rank__pos {
    flex: 0 0 1.5rem;
    text-align: right;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--sg-text-muted);
    font-variant-numeric: tabular-nums;
}

.sg-rank__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.sg-rank__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .4rem;
}

/* The name wraps, never "…": the whole name is what the row is about */
.sg-rank__name {
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
    transition: color .16s var(--sg-ease);
}

.sg-rank__value {
    margin-left: auto;
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--sg-text);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.sg-rank__track {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: var(--sg-radius-pill);
    background: var(--sg-border);
}

/* Width = share of the first row (inline style); a sliver even for tiny values */
.sg-rank__bar {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: inherit;
    background: var(--sg-primary-500);
}

/* "10 de 41 pessoas" no cabeçalho do card */
.sg-rank__meta {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sg-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .sg-rank__row, .sg-rank__name { transition: none; }
}

/* Phones: the year/office picker of the Dashboard takes the whole line and
   wraps (arrows, year, office, "Voltar para 2026" were ~500px on one line) */
@media (max-width: 575.98px) {
    .page-header .page-actions:has(> .sg-year-picker) { width: 100%; }
    .sg-year-picker { flex-wrap: wrap; width: 100%; }
    .sg-year-picker .form-select { flex: 1 1 8.5rem; min-width: 0; }
}

/* --------------------------------------------------------------------------
   Ficha da cidade — seção Arquivos (rodada 3 — cidades-hub)
   views/cidades/tab_arquivos.php, DESIGN.md §18. Cada arquivo é o bloco
   .sg-file da seção "Anexos" (baixar, ou o aviso âmbar de ausente) com as
   ações à direita: Editar (renomear/enviar de novo) e Excluir, botões
   quadrados .btn-icon. Os blocos ocupam a largura toda, para as ações ficarem
   alinhadas numa coluna. No celular os dois botões ficam um sobre o outro.
   Pares de cor: os já medidos em .sg-file, nos badges e nos botões de
   contorno; o filtro Todos/Presentes/Ausentes marcado é petróleo 700 sobre
   petróleo 100 (5,87:1).
   -------------------------------------------------------------------------- */
.sg-filelist {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sg-filelist__item { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.sg-filelist__item[hidden] { display: none; }
.sg-filelist__item > .sg-file { flex: 1 1 auto; min-width: 0; max-width: none; }
.sg-filelist__actions { display: flex; flex: 0 0 auto; gap: .35rem; }

/* "Envie o arquivo de novo em Editar": the word is a button (it opens the
   modal) that reads as a link inside the sentence */
.sg-filelist__inline {
    padding: 0;
    border: 0;
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
    vertical-align: baseline;
}

/* Phones: the two buttons stack beside the block, so the name keeps the width */
@media (max-width: 575.98px) {
    .sg-filelist__actions { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   Auditoria — detalhe do registro (rodada 3 — modules-b)
   views/audit/show.php: os dados antes/depois viram uma tabela de campos;
   um valor aninhado (lista, objeto) sai como JSON escapado neste bloco.
   Texto e fundo reaproveitam tokens já medidos (texto sobre sunken).
   -------------------------------------------------------------------------- */
.sg-audit-json {
    max-height: 16rem;
    overflow: auto;
    padding: .5rem .75rem;
    font-size: 0.75rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--sg-text);
    background: var(--sg-surface-sunken);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-sm);
}

/* --------------------------------------------------------------------------
   Contatos — agenda de órgãos e cartão de pessoa (rodada 3 — contatos-screen)
   views/contatos/index.php, views/cidades/tab_contatos.php,
   views/partials/contato_modal.php, assets/js/contatos.js. DESIGN.md §20.
   Pares de cor reaproveitam os medidos em tests/contrast.php:
   texto e muted sobre superfície e sunken, primary-700 sobre primary-50
   (órgão escolhido), success-500 sobre superfície (ícone do WhatsApp, 3:1
   exigido; mede 4,92:1), badges tonais.
   -------------------------------------------------------------------------- */

/* Busca de pessoas: acima das duas colunas, porque procura em tudo */
.sg-ct-search { margin-bottom: 1.25rem; }
.sg-ct-search .card-body { padding: 1rem 1.25rem; }
.sg-ct-search .form-label { font-weight: 700; }
.sg-ct-search__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.sg-ct-search__row .input-group { flex: 1 1 20rem; max-width: 42rem; }

/* Mestre-detalhe: órgãos à esquerda, pessoas à direita; empilha abaixo de 992px */
.sg-agenda { display: grid; gap: 1.25rem; align-items: start; }
.sg-agenda__side { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.sg-agenda__main { min-width: 0; scroll-margin-top: 76px; }
.sg-agenda__main:focus { outline: 0; }
.sg-agenda__main.is-loading { opacity: .55; pointer-events: none; transition: opacity .16s var(--sg-ease); }

@media (min-width: 992px) {
    .sg-agenda { grid-template-columns: 20rem minmax(0, 1fr); gap: 1.5rem; }
    .sg-agenda__side { position: sticky; top: 76px; max-height: calc(100vh - 96px); }
}

.sg-agenda__side-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    padding: .9rem 1rem .6rem;
}
.sg-agenda__title { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 0.9375rem; font-weight: 700; }
.sg-agenda__title > .bi { color: var(--sg-primary-600); }
.sg-agenda__filters { display: grid; gap: .45rem; padding: 0 1rem .8rem; border-bottom: 1px solid var(--sg-border); }
.sg-agenda__filters .form-check { margin-bottom: 0; font-size: 0.8125rem; }
.sg-agenda__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .4rem; overscroll-behavior: contain; }
.sg-agenda__none { margin: 0; padding: 1rem .75rem; font-size: 0.8125rem; color: var(--sg-text-muted); text-align: center; }

/* No celular a lista não empurra as pessoas para longe: rola dentro do cartão */
@media (max-width: 991.98px) {
    .sg-agenda__list { max-height: 22rem; }
}

.sg-orgaos { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sg-orgaos__group {
    padding: .85rem .6rem .3rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sg-text-muted);
}
.sg-orgaos__group:first-child { padding-top: .3rem; }
.sg-orgaos__hint { display: block; margin-top: .15rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0; line-height: 1.35; text-transform: none; }

/* Item de órgão: o nome quebra linha (nunca reticências), a contagem em pílula */
.sg-orgao {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem .5rem .75rem;
    border-radius: var(--sg-radius-sm);
    color: var(--sg-text);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .16s var(--sg-ease), color .16s var(--sg-ease);
}
.sg-orgao:hover { background: var(--sg-surface-sunken); color: var(--sg-text); }
.sg-orgao:focus-visible { outline: 0; box-shadow: var(--sg-focus-ring); }
.sg-orgao__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sg-orgao__count {
    flex: 0 0 auto;
    min-width: 1.9rem;
    padding: .1rem .45rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-pill);
    background: var(--sg-surface-sunken);
    color: var(--sg-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}
.sg-orgao.is-inactive { color: var(--sg-text-muted); font-weight: 500; }

/* Órgão escolhido: posição atual — fundo tonal e o filete âmbar, como no menu */
.sg-orgao.active { background: var(--sg-primary-50); color: var(--sg-primary-700); }
.sg-orgao.active::before {
    content: "";
    position: absolute;
    top: .45rem;
    bottom: .45rem;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--sg-accent-500);
}
.sg-orgao.active .sg-orgao__count { border-color: var(--sg-primary-100); background: var(--sg-surface); color: var(--sg-primary-700); }

/* Cabeçalho do órgão: aviso "a revisar", endereço e observação */
.sg-orgao-review { align-items: flex-start; }
.sg-orgao-review__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.sg-orgao-info {
    display: grid;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-md);
    background: var(--sg-surface);
    font-size: 0.875rem;
}
.sg-orgao-info__item { display: flex; gap: .6rem; }
.sg-orgao-info__item > .bi { flex: 0 0 auto; margin-top: .1rem; color: var(--sg-text-muted); }
.sg-orgao-info__text { margin: .15rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }

/* Cartões de pessoa: borda, não sombra (separam, não elevam) */
.sg-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.sg-person {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    min-width: 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-lg);
    background: var(--sg-surface);
}
/* Desativado: borda tracejada + selo; o texto não esmaece (o contraste fica) */
.sg-person.is-inactive { border-style: dashed; border-color: var(--sg-border-strong); }
.sg-person__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.sg-person__name { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.sg-person__role { margin: .15rem 0 0; font-size: 0.8125rem; color: var(--sg-text-muted); overflow-wrap: anywhere; }
.sg-person__actions { display: flex; flex: 0 0 auto; gap: .35rem; }
.sg-person__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.sg-person__where { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0; font-size: 0.8125rem; color: var(--sg-text-muted); }
.sg-person__where > .bi { color: var(--sg-primary-600); }
.sg-person__where a { font-weight: 600; }
.sg-person__meios { display: grid; gap: .5rem; margin: 0; padding: .7rem 0 0; list-style: none; border-top: 1px solid var(--sg-border); }
.sg-person__none { margin: 0; padding-top: .7rem; border-top: 1px solid var(--sg-border); font-size: 0.8125rem; color: var(--sg-text-muted); }
/* Observação fechada por padrão (<details>): as notas antigas trazem CPF, RG e
   datas de nascimento, e aberta ela esticaria todo cartão. O resumo é um
   eyebrow muted sobre sunken (5,15:1) com a seta que gira ao abrir. */
.sg-person__note { border-radius: var(--sg-radius-sm); background: var(--sg-surface-sunken); font-size: 0.8125rem; }
.sg-person__note > summary {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-height: 2rem;
    padding: .3rem .75rem;
    border-radius: var(--sg-radius-sm);
    list-style: none;
    cursor: pointer;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sg-text-muted);
}
.sg-person__note > summary::-webkit-details-marker { display: none; }
.sg-person__note > summary > .bi { font-size: .7rem; transition: transform .16s var(--sg-ease); }
.sg-person__note[open] > summary > .bi { transform: rotate(90deg); }
.sg-person__note > summary:hover { color: var(--sg-text); }
.sg-person__note > summary:focus-visible { outline: 0; box-shadow: var(--sg-focus-ring); }
.sg-person__note p { margin: 0; padding: 0 .75rem .6rem; white-space: pre-line; overflow-wrap: anywhere; color: var(--sg-text); }

/* Telefone / e-mail: ícone, valor (tel: / mailto:), WhatsApp, descrição */
.sg-meio { display: flex; align-items: flex-start; gap: .55rem; font-size: 0.875rem; }
.sg-meio__icon { flex: 0 0 auto; margin-top: .15rem; color: var(--sg-text-muted); }
.sg-meio__main { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; min-width: 0; }
.sg-meio__value { font-weight: 600; overflow-wrap: anywhere; }
.sg-meio__label { flex-basis: 100%; font-size: 0.8125rem; color: var(--sg-text-muted); }
/* Alvo de 28px (acima dos 24px da WCAG 2.2); jade = conversa disponível */
.sg-meio__wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--sg-radius-sm);
    color: var(--sg-success-500);
    font-size: 1rem;
    line-height: 1;
    transition: background-color .16s var(--sg-ease), color .16s var(--sg-ease);
}
a.sg-meio__wa:hover { background: var(--sg-success-50); color: var(--sg-success-700); }
a.sg-meio__wa:focus-visible { outline: 0; box-shadow: var(--sg-focus-ring); }

/* Editor: linhas repetíveis de telefone e e-mail */
.sg-meios { margin: 1.5rem 0 0; padding: 0; border: 0; }
.sg-meios__legend {
    display: flex;
    align-items: center;
    gap: .45rem;
    float: none;
    width: auto;
    margin-bottom: .6rem;
    font-size: 0.9375rem;
    font-weight: 700;
}
.sg-meios__legend > .bi { color: var(--sg-primary-600); }
.sg-meios__rows { display: grid; gap: .6rem; margin-bottom: .6rem; }
.sg-meios__rows:empty { display: none; }
.sg-meio-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: .5rem .9rem;
    padding: .75rem .85rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-md);
    background: var(--sg-surface-sunken);
}
.sg-meio-row__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem .75rem; }
.sg-meio-row .form-label { margin-bottom: .25rem; font-size: 0.8125rem; font-weight: 600; }
.sg-meio-row__opts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding-bottom: .3rem; }
.sg-meio-row__opts .form-check { margin: 0; font-size: 0.8125rem; white-space: nowrap; }
.sg-meio-row > .invalid-feedback { grid-column: 1 / -1; margin-top: 0; }

@media (max-width: 575.98px) {
    .sg-meio-row,
    .sg-meio-row__main { grid-template-columns: minmax(0, 1fr); }
    .sg-meio-row__opts { justify-content: space-between; padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sg-orgao,
    .sg-meio__wa,
    .sg-person__note > summary > .bi,
    .sg-agenda__main.is-loading { transition: none; }
}

@media print {
    .sg-agenda { display: block; }
    .sg-agenda__side,
    .sg-ct-search,
    .sg-person__actions { display: none !important; }
}

/* ==========================================================================
   Grade: botão "Colunas" e exportação dividida (rodada 4 — grid-core)
   SAGP.grid em assets/js/app.js; regras em DESIGN.md §10 "Colunas".
   Só pares já medidos em tests/contrast.php: texto e muted sobre superfície e
   afundado, link petróleo 600 sobre branco, texto do âmbar (aviso) sobre
   branco, marca petróleo 500 (indicador de soltar).
   ========================================================================== */

.sg-grid__columns { position: relative; display: flex; }
.sg-colbtn { white-space: nowrap; }
.sg-grid__columns.is-open > .sg-colbtn {
    border-color: var(--sg-border-strong);
    background: var(--sg-surface-sunken);
    color: var(--sg-text);
}

/* Painel: cartão flutuante abaixo do botão, na camada dos menus (1000) */
.sg-colpanel {
    position: absolute;
    top: calc(100% + .375rem);
    right: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    width: 21rem;
    max-width: calc(100vw - 2rem);
    max-height: min(42rem, 78vh);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-md);
    background: var(--sg-surface);
    box-shadow: var(--sg-shadow-lg);
    text-align: left;
}
.sg-colpanel[hidden] { display: none; }

.sg-colpanel__head { display: flex; align-items: flex-start; gap: .75rem; padding: .875rem 1rem .625rem; }
.sg-colpanel__intro { flex: 1 1 auto; min-width: 0; }
.sg-colpanel__title { margin: 0 0 .2rem; }
.sg-colpanel__hint { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--sg-text-muted); }
.sg-colpanel__close { flex: 0 0 auto; margin-top: .125rem; }

.sg-colpanel__list {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: .25rem .5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    border-top: 1px solid var(--sg-border);
    border-bottom: 1px solid var(--sg-border);
}

/* Linha: alça (ou cadeado) · caixa + nome · setas */
.sg-colpanel__item {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    min-height: 2.5rem;
    padding: .2rem .25rem .2rem .35rem;
    border-radius: var(--sg-radius-sm);
    transition: background-color .16s var(--sg-ease), box-shadow .16s var(--sg-ease), opacity .16s var(--sg-ease);
}
.sg-colpanel__item:hover { background: var(--sg-surface-sunken); }
.sg-colpanel__item.is-dragging { opacity: .45; }
/* Onde a coluna arrastada vai entrar: filete petróleo em cima ou embaixo */
.sg-colpanel__item.is-drop-before { box-shadow: inset 0 2px 0 var(--sg-primary-500); }
.sg-colpanel__item.is-drop-after { box-shadow: inset 0 -2px 0 var(--sg-primary-500); }

.sg-colpanel__handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sg-text-muted);
    cursor: grab;
}
.sg-colpanel__item.is-dragging .sg-colpanel__handle { cursor: grabbing; }
.sg-colpanel__handle--lock { cursor: default; }

.sg-colpanel__check { display: flex; align-items: center; gap: .55rem; min-width: 0; min-height: 0; margin: 0; padding-left: 0; }
.sg-colpanel__check .form-check-input { flex: 0 0 auto; float: none; margin: 0; }
.sg-colpanel__check .form-check-label { min-width: 0; font-size: 0.875rem; font-weight: 500; overflow-wrap: anywhere; cursor: pointer; }
/* Coluna fixa: o Bootstrap esmaece o rótulo do checkbox desabilitado a 50% —
   aqui ele continua legível, em muted (a caixa marcada e o cadeado dizem "fixa") */
.sg-colpanel__item.is-locked .form-check-input:disabled ~ .form-check-label {
    color: var(--sg-text-muted);
    opacity: 1;
    cursor: default;
}

.sg-colpanel__move { display: inline-flex; gap: .25rem; }

.sg-colpanel__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem .75rem;
    padding: .5rem 1rem 0;
}
.sg-colpanel__reset { padding-left: 0; padding-right: 0; font-weight: 600; text-decoration: none; }
.sg-colpanel__reset:hover { text-decoration: underline; }
.sg-colpanel__status { flex: 1 1 100%; padding-bottom: .125rem; font-size: 0.75rem; line-height: 1.4; color: var(--sg-text-muted); }
.sg-colpanel__status:empty { display: none; }
/* Falha ao salvar no servidor: atenção (âmbar no degrau de texto), não erro */
.sg-colpanel__status.is-warning { font-weight: 600; color: var(--sg-accent-text); }
.sg-colpanel__tip { display: flex; gap: .4rem; margin: 0; padding: .375rem 1rem .875rem; font-size: 0.75rem; line-height: 1.4; color: var(--sg-text-muted); }

/* Exportar planilha dividido: o botão baixa as colunas visíveis; a seta abre
   "Colunas visíveis" / "Todas as colunas", cada uma com uma linha de ajuda */
.sg-grid__exportmenu { min-width: 15.5rem; }
.sg-grid__exportmenu .dropdown-item { display: flex; flex-direction: column; gap: .05rem; white-space: normal; }
.sg-grid__exportlabel { font-weight: 600; }
.sg-grid__exporthint { font-size: 0.75rem; font-weight: 400; color: var(--sg-text-muted); }
.sg-grid__exportmenu .dropdown-item:active .sg-grid__exporthint,
.sg-grid__exportmenu .dropdown-item.active .sg-grid__exporthint { color: inherit; }

/* Celular: Colunas e Exportar dividem a linha abaixo da busca; o painel vira
   uma folha presa ao pé da tela, sobre a página escurecida (a sombra de
   100vmax faz o fundo; tocar fora fecha) */
@media (max-width: 575.98px) {
    .sg-grid__tools > .sg-grid__columns { flex: 0 0 auto; }
    .sg-grid__tools > .sg-grid__export { flex: 1 1 0; min-width: 0; }
    .sg-grid__export > .sg-grid__exportgroup { flex: 1 1 auto; }
    .sg-grid__exportgroup > .btn:first-child { flex: 1 1 auto; }
    .sg-grid__exportgroup > .dropdown-toggle-split { flex: 0 0 auto; }
    .sg-colpanel {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1055;
        width: auto;
        max-width: none;
        max-height: 82vh;
        padding-bottom: env(safe-area-inset-bottom);
        border-radius: var(--sg-radius-lg) var(--sg-radius-lg) 0 0;
        box-shadow: 0 0 0 100vmax rgba(8, 18, 31, .45), var(--sg-shadow-lg);
    }
    .sg-colpanel__item { min-height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sg-colpanel__item { transition: none; }
}

@media print {
    .sg-grid__columns { display: none !important; }
}

/* --------------------------------------------------------------------------
   Dashboard — mapa por município (rodada 4a — dashboard-mapa)
   views/dashboard/index.php + assets/js/dashboard-mapa.js. DESIGN.md "Mapa do Dashboard".
   Leaflet desenha em SVG; as cores ficam aqui (a folha do Leaflet entra
   ANTES desta, e as regras abaixo têm duas classes, então vencem).
   -------------------------------------------------------------------------- */

/* Escala sequencial de uma cor só (petróleo): mais registros, mais escuro.
   Começa no 100, não no 50: o 50 mede ΔE 2,3 (OKLab ×100) contra o cinza de
   "Sem registros" e as duas classes se confundiriam; o 100 mede 8,1. O 2 é o
   ponto médio OKLab entre 100 e 300 (ΔE 8,7 e 8,9 dos vizinhos); 3→4 e 4→5
   medem 15,1 e 15,4. "Sem registros" é o cinza afundado, sem matiz. */
:root {
    --sg-map-1: var(--sg-primary-100);
    --sg-map-2: #96D1DF;
    --sg-map-3: var(--sg-primary-300);
    --sg-map-4: var(--sg-primary-500);
    --sg-map-5: var(--sg-primary-700);
    --sg-map-empty: var(--sg-surface-sunken);
    --sg-map-line: var(--sg-border-strong);
}

/* The card (#dashMapa): header wraps (title, metric, form) on narrow screens */
.sg-map > .sg-map__head { flex-wrap: wrap; }

.sg-map__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
}

/* Frame: its own stacking context, so the Leaflet panes (z-index 400–1000)
   never climb over the top bar, the offcanvas menu or a modal */
.sg-map__frame {
    position: relative;
    isolation: isolate;
}

.sg-map__canvas {
    position: relative;
    z-index: 0;
    height: 440px;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-md);
    background: var(--sg-surface);
    overflow: hidden;
    transition: opacity .16s var(--sg-ease);
}

.sg-map__canvas.leaflet-container {
    background: var(--sg-surface);
    font-family: var(--sg-font);
    font-size: 0.8125rem;
    color: var(--sg-text);
}

.sg-map__canvas.leaflet-container:focus-visible {
    outline: 0;
    box-shadow: var(--sg-focus-ring);
    border-color: var(--sg-primary-300);
}

/* Refetch keeps the frame: the current drawing fades while the new one loads */
.sg-map__frame.is-loading .sg-map__canvas { opacity: .45; }

/* "Carregando o mapa…" — the grid's pill (DESIGN.md §10), at the top of the map */
.sg-map__status {
    position: absolute;
    top: .75rem;
    left: 50%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: max-content;
    max-width: calc(100% - 2rem);
    transform: translateX(-50%);
    padding: .45rem 1rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-pill);
    background: var(--sg-surface);
    box-shadow: var(--sg-shadow-md);
    color: var(--sg-text);
    font-size: 0.8125rem;
    font-weight: 600;
}

.sg-map__status .spinner-border {
    flex: 0 0 auto;
    width: .875rem;
    height: .875rem;
    border-width: .14em;
    color: var(--sg-primary-500);
}

/* Errors (no data, no map library): centred, may wrap, icon in tijolo */
.sg-map__status.is-error {
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--sg-radius-md);
    text-align: left;
}
.sg-map__status.is-error > .bi { flex: 0 0 auto; color: var(--sg-danger-500); }

/* ── Municipalities ─────────────────────────────────────────────── */
/* CSS beats the fill/stroke attributes Leaflet writes on each path */
.sg-map__canvas .sg-map__area {
    fill: var(--sg-map-empty);
    fill-opacity: 1;
    stroke: var(--sg-map-line);
    stroke-width: .6px;
    stroke-opacity: 1;
    transition: fill .16s var(--sg-ease);
}
.sg-map__canvas .sg-map__area--q1 { fill: var(--sg-map-1); }
.sg-map__canvas .sg-map__area--q2 { fill: var(--sg-map-2); }
.sg-map__canvas .sg-map__area--q3 { fill: var(--sg-map-3); }
.sg-map__canvas .sg-map__area--q4 { fill: var(--sg-map-4); }
.sg-map__canvas .sg-map__area--q5 { fill: var(--sg-map-5); }

/* Hovered municipality: tinta outline (the tooltip says the rest) */
.sg-map__canvas .sg-map__area:hover {
    stroke: var(--sg-ink-900);
    stroke-width: 2.5px;
}
.sg-map__canvas .sg-map__area { cursor: grab; }
.sg-map__canvas .sg-map__area.is-link { cursor: pointer; }

/* "Calor": the municipalities go neutral, the heat carries the magnitude */
.sg-map.sg-map--heat .sg-map__canvas .sg-map__area { fill: var(--sg-map-empty); }
/* Leaflet puts every canvas under the SVG of its pane (canvas z-index 100,
   svg 200): the heat must sit over the municipalities, under the dots pane */
.sg-map__canvas .leaflet-map-pane canvas.leaflet-heatmap-layer { z-index: 300; pointer-events: none; }

/* Active client city: white dot, tinta ring (17,8:1 on the empty fill,
   white 7,6:1 on the darkest class) */
.sg-map__canvas .sg-map__client {
    fill: var(--sg-surface);
    stroke: var(--sg-ink-900);
    stroke-width: 1.25px;
}

/* Office seat: âmbar = position (DESIGN.md §1). The 500 alone marks 2,1:1 on
   white, so it wears a tinta ring (18,8:1) and a white halo (7,6:1 on the
   darkest class); the name beside it has a white halo too. */
.sg-map-seat { background: none; border: 0; }
.sg-map-seat__inner { position: relative; display: block; width: 16px; height: 16px; }
.sg-map-seat__dot {
    position: absolute;
    inset: 1px;
    border: 2px solid var(--sg-ink-900);
    border-radius: 50%;
    background: var(--sg-accent-500);
    box-shadow: 0 0 0 2px var(--sg-surface);
}
.sg-map-seat__label {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    color: var(--sg-text);
    text-shadow: 0 0 2px var(--sg-surface), 0 0 2px var(--sg-surface), 0 0 3px var(--sg-surface);
}
.sg-map-seat--left .sg-map-seat__label { left: auto; right: 20px; }

/* Zoom buttons in the theme's shape */
.sg-map__canvas.leaflet-container .leaflet-bar {
    border: 1px solid var(--sg-border-strong);
    border-radius: var(--sg-radius-sm);
    box-shadow: var(--sg-shadow-sm);
}
.sg-map__canvas.leaflet-container .leaflet-bar a {
    width: 32px;
    height: 32px;
    line-height: 30px;
    color: var(--sg-text);
    border-bottom-color: var(--sg-border);
}
.sg-map__canvas.leaflet-container .leaflet-bar a:hover { background: var(--sg-surface-sunken); color: var(--sg-primary-700); }
.sg-map__canvas.leaflet-container .leaflet-bar a:first-child { border-top-left-radius: var(--sg-radius-sm); border-top-right-radius: var(--sg-radius-sm); }
.sg-map__canvas.leaflet-container .leaflet-bar a:last-child { border-bottom-left-radius: var(--sg-radius-sm); border-bottom-right-radius: var(--sg-radius-sm); }

/* Tooltip: the value leads, the name follows (dataviz: values lead) */
.leaflet-tooltip.sg-map-tip {
    display: grid;
    gap: .1rem;
    min-width: 10rem;
    max-width: 16rem;
    padding: .5rem .65rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-sm);
    background: var(--sg-surface);
    box-shadow: var(--sg-shadow-md);
    color: var(--sg-text);
    font-family: var(--sg-font);
    font-size: 0.8125rem;
    line-height: 1.35;
    white-space: normal;
}
.leaflet-tooltip-top.sg-map-tip::before { border-top-color: var(--sg-surface); }
.sg-map-tip__value { font-size: 0.9375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.sg-map-tip__name { font-weight: 600; }
.sg-map-tip__meta,
.sg-map-tip__hint { color: var(--sg-text-muted); font-size: 0.75rem; }

/* ── Legend, list and notes beside the map ──────────────────────── */
.sg-map__legend { margin-bottom: 1rem; }

.sg-map__scale {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    color: var(--sg-text);
    font-variant-numeric: tabular-nums;
}
.sg-map__scale > li { display: inline-flex; align-items: center; gap: .45rem; }

.sg-map__swatch {
    flex: 0 0 auto;
    width: 1.5rem;
    height: .75rem;
    border: 1px solid var(--sg-map-line);
    border-radius: 3px;
}
.sg-map__swatch--q1 { background: var(--sg-map-1); }
.sg-map__swatch--q2 { background: var(--sg-map-2); }
.sg-map__swatch--q3 { background: var(--sg-map-3); }
.sg-map__swatch--q4 { background: var(--sg-map-4); }
.sg-map__swatch--q5 { background: var(--sg-map-5); }
.sg-map__swatch--empty { background: var(--sg-map-empty); }

.sg-map__key-seat {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border: 2px solid var(--sg-ink-900);
    border-radius: 50%;
    background: var(--sg-accent-500);
}
.sg-map__key-client {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border: 1.5px solid var(--sg-ink-900);
    border-radius: 50%;
    background: var(--sg-surface);
}

/* Heat legend: the same five steps as a continuous bar */
.sg-map__scale > li.sg-map__ramp-item { flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: .25rem; }
.sg-map__ramp {
    display: block;
    height: .75rem;
    border: 1px solid var(--sg-map-line);
    border-radius: 3px;
    background: linear-gradient(to right, var(--sg-map-empty), var(--sg-map-1), var(--sg-map-2), var(--sg-map-3), var(--sg-map-4), var(--sg-map-5));
}
.sg-map__ramp-labels { display: flex; justify-content: space-between; gap: .5rem; color: var(--sg-text-muted); font-size: 0.75rem; }

.sg-map__note,
.sg-map__source {
    margin: .6rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--sg-text-muted);
}

.sg-map__top { margin-top: .25rem; }
.sg-map__top .sg-rank__row.is-static:hover { background: transparent; }
.sg-map__top .sg-rank__row.is-static:hover .sg-rank__name { color: inherit; }
.sg-map__uf { font-size: 0.75rem; font-weight: 600; color: var(--sg-text-muted); }

.sg-map__more {
    margin: .5rem 0 0;
    font-size: 0.8125rem;
    color: var(--sg-text-muted);
}

/* "N serviços em cadastros que não são municípios, fora do mapa: …" */
.sg-map__outside {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: .6rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--sg-text-muted);
}
.sg-map__outside > .bi { flex: 0 0 auto; margin-top: .1rem; color: var(--sg-primary-600); }
.sg-map__outside strong { color: var(--sg-text); font-variant-numeric: tabular-nums; }

/* The map card links to the cities' ranking: the fixed top bar must not cover it */
#ranking-cidades { scroll-margin-top: 76px; }

/* Phones and tablets: a shorter map; the legend and the list come under it */
@media (max-width: 991.98px) {
    .sg-map__canvas { height: 320px; }
    .sg-map__controls { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .sg-map__canvas,
    .sg-map__canvas .sg-map__area { transition: none; }
}

/* "Colunas": how many columns are on screen, against the limit (MAX_VISIBLE
   in app.js / GridPrefs::MAX_VISIBLE). Amber text when the limit is reached. */
.sg-colpanel__count { margin: .25rem 0 0; font-size: 0.75rem; font-weight: 600; color: var(--sg-text-muted); font-variant-numeric: tabular-nums; }
.sg-colpanel__count.is-warning { color: var(--sg-accent-text); }

/* --------------------------------------------------------------------------
   Serviços: "Registrar para várias cidades" (rodada 4a — cols-servicos-lote)
   views/servicos/form.php; regras em DESIGN.md §24. Sem cor nova.
   -------------------------------------------------------------------------- */
/* The chosen cities (up to 300 chips) scroll inside the field instead of
   pushing the rest of the form down; the count and the quick buttons sit
   above it. Select2 puts its container right after the <select>. */
.sg-lote-cidades + .select2-container .select2-selection--multiple {
    max-height: 13.5rem;
    overflow-y: auto;
}

/* --------------------------------------------------------------------------
   Configurações: listas de opções dos formulários (rodada 5 — configuracoes)
   views/configuracoes/*, assets/js/configuracoes.js; regras em DESIGN.md
   §"Configurações". Sem cor nova: só tokens --sg-* já medidos.
   -------------------------------------------------------------------------- */

/* The rules (Criar / Editar / Remover / Unificar) above the lists */
.sg-cfg-rules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .75rem;
    margin-bottom: 1.75rem;
}
.sg-cfg-rule {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem 1rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-md);
    background: var(--sg-surface);
}
.sg-cfg-rule strong { display: block; font-size: 0.875rem; }
.sg-cfg-rule p { margin: .15rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--sg-text-muted); }
.sg-cfg-rule__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sg-radius-sm);
    color: var(--sg-primary-600);
    background: var(--sg-primary-50);
}

/* A group of lists: eyebrow heading with the module icon, then link cards */
.sg-cfg-group { margin-bottom: 1.75rem; }
.sg-cfg-group__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .75rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sg-text-muted);
}
.sg-cfg-group__title .bi { font-size: 0.875rem; color: var(--sg-primary-600); }

/* Count of items on a card; repeated names in amber text (attention) */
.sg-cfg-card__meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .4rem; font-size: 0.8125rem; color: var(--sg-text-muted); }
.sg-cfg-card__meta .sg-numeric { font-weight: 800; color: var(--sg-text); }
.sg-cfg-card__warn { font-weight: 600; color: var(--sg-accent-text); }

.sg-cfg-other { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }

/* "#21" next to a name: tells repeated names apart */
.sg-cfg-id { font-size: 0.75rem; font-weight: 600; color: var(--sg-text-muted); font-variant-numeric: tabular-nums; }

/* Live hint under a name field (configuracoes.js): only a warning, the save decides */
.sg-cfg-hint { margin-top: .35rem; font-size: 0.8125rem; line-height: 1.45; }
.sg-cfg-hint:empty { display: none; }
.sg-cfg-hint .bi { margin-right: .2rem; }
.sg-cfg-hint a { color: inherit; font-weight: 700; text-decoration: underline; }
.sg-cfg-hint--exact   { color: var(--sg-danger-700); }
.sg-cfg-hint--similar { color: var(--sg-accent-text); }
.sg-cfg-hint--ok      { color: var(--sg-success-700); }

/* "Já existe algo parecido": icon at the top of a taller alert, the similar
   names, then the two buttons */
.sg-cfg-confirm { align-items: flex-start; }
.sg-cfg-confirm > .bi { margin-top: .15rem; }
.sg-cfg-similar { margin: .4rem 0 .75rem; padding-left: 1.1rem; }
.sg-cfg-similar li { margin: .1rem 0; }

/* "Cadastrar" lines up with the field (below its label), not with the help text */
@media (min-width: 1200px) {
    .sg-cfg-submit { padding-top: calc(0.8125rem * 1.55 + .35rem); }
}

.sg-cfg-search { max-width: 28rem; }

/* Item list: whole names, wrapped, never cut. The scroller is the containing
   block of the visually hidden caption and "Ações" label (position: absolute):
   otherwise they escape it and widen the page on a phone. */
.sg-cfg-scroll { position: relative; }
.sg-cfg-table .sg-cfg-name { min-width: 14rem; white-space: normal; overflow-wrap: anywhere; }
.sg-cfg-table .sg-cfg-extra { max-width: 22rem; font-size: 0.8125rem; overflow-wrap: anywhere; }
.sg-cfg-use { font-size: 0.8125rem; }
.sg-cfg-use__hist { display: inline-block; color: var(--sg-text-muted); }
/* The item just created: amber = current position */
.sg-cfg-row--new > td { background: var(--sg-accent-50); }
.sg-cfg-row--new > td:first-child { box-shadow: inset 3px 0 0 var(--sg-accent-500); }

/* Item page */
.sg-cfg-item-title > span { min-width: 0; overflow-wrap: anywhere; }
.sg-cfg-impact {
    display: flex;
    gap: .6rem;
    padding: .75rem .9rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-sm);
    background: var(--sg-surface-sunken);
    font-size: 0.8125rem;
    color: var(--sg-text);
}
.sg-cfg-impact > .bi { margin-top: .1rem; color: var(--sg-primary-600); }

.sg-cfg-free { display: flex; gap: .75rem; margin-bottom: .5rem; }
.sg-cfg-free > .bi { font-size: 1.5rem; line-height: 1; color: var(--sg-success-500); }
.sg-cfg-block {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .7rem .9rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-sm);
    background: var(--sg-surface-sunken);
    font-size: 0.875rem;
}
.sg-cfg-block > .bi { color: var(--sg-text-muted); }

/* "Onde é usado": one block per place (module › field, count, first records) */
.sg-cfg-usage { padding: .9rem 0; border-top: 1px solid var(--sg-border); }
.sg-cfg-usage__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin: 0 0 .5rem; font-size: 0.875rem; font-weight: 700; }
.sg-cfg-usage__head > .sg-numeric { color: var(--sg-primary-700); }
.sg-cfg-usage__list { margin: 0 0 .4rem; padding: 0; list-style: none; font-size: 0.8125rem; }
.sg-cfg-usage__list li { padding: .25rem 0; border-bottom: 1px dashed var(--sg-border); overflow-wrap: anywhere; }
.sg-cfg-usage__list li:last-child { border-bottom: 0; }
.sg-cfg-usage__title { color: var(--sg-text); }
.sg-cfg-usage--history .sg-cfg-usage__head { font-weight: 600; color: var(--sg-text-muted); }
.sg-cfg-history-title {
    margin: 1.25rem 0 .25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sg-text-muted);
}

/* Unificar (rodada 5b — unificar): the repeated groups on the list page, each
   with its button; on views/configuracoes/unificar.php the item that stays is
   the current position (amber 50 + amber rule, like a row just created),
   "Sai da lista" is the action (primary 700), "Não pode" is neutral (the
   same lock as .sg-cfg-block). Borders separate, no shadow. */
.sg-cfg-dups { align-items: flex-start; }
.sg-cfg-dups > .bi { margin-top: .15rem; }
.sg-cfg-dups__list { margin: .6rem 0 0; padding: 0; list-style: none; }
.sg-cfg-dups__list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .35rem .75rem;
    padding: .4rem 0;
    border-top: 1px solid var(--sg-border);
}
.sg-cfg-dups__names { min-width: 0; overflow-wrap: anywhere; }

.sg-cfg-merge-row--stays > td { background: var(--sg-accent-50); }
.sg-cfg-merge-row--stays > td:first-child { box-shadow: inset 3px 0 0 var(--sg-accent-500); }
.sg-cfg-merge-open { margin-left: .25rem; font-size: 0.8125rem; }
.sg-cfg-merge-status {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    font-size: 0.8125rem;
    font-weight: 600;
}
.sg-cfg-merge-status--stays { color: var(--sg-accent-text); }
.sg-cfg-merge-status--goes  { color: var(--sg-primary-700); }
.sg-cfg-merge-status--kept  { color: var(--sg-text-muted); }
.sg-cfg-merge-moves { margin: 0 0 .25rem; padding: 0; list-style: none; font-size: 0.875rem; }
.sg-cfg-merge-moves li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem 1rem;
    padding: .3rem 0;
    border-bottom: 1px dashed var(--sg-border);
    overflow-wrap: anywhere;
}
.sg-cfg-merge-moves li:last-child { border-bottom: 0; }
.sg-cfg-merge-moves__hist { color: var(--sg-text-muted); }

/* --------------------------------------------------------------------------
   Escritórios: "Revisão dos escritórios" (rodada 4b — escritorios-revisao)
   views/escritorios/_revisao.php. DESIGN.md §13, "Revisão dos escritórios".
   Sugestões lidas dos serviços; nada muda sem o clique do administrador.
   Borda, não sombra: cada sugestão é um item separado, não um card elevado.
   -------------------------------------------------------------------------- */

/* The header button "Revisão" jumps here: clear the sticky top bar */
.sg-esc-review { scroll-margin-top: 76px; }

.sg-esc-review__intro {
    max-width: 72ch;
    margin-bottom: 1.25rem;
    padding: .8rem 1rem;
    border-left: 3px solid var(--sg-primary-500);
    border-radius: 0 var(--sg-radius-sm) var(--sg-radius-sm) 0;
    background: var(--sg-primary-50);
    color: var(--sg-text);
    font-size: 0.875rem;
}
.sg-esc-review__intro p { margin-bottom: .4rem; }

/* Section heading inside the card (Cidades, Funcionários) */
.sg-esc-review__title {
    margin: 1.5rem 0 .25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sg-border);
    font-size: 0.9375rem;
    font-weight: 700;
}
.sg-esc-review__intro + .sg-esc-review__title { margin-top: 0; padding-top: 0; border-top: 0; }
.sg-esc-review__lead { max-width: 80ch; margin-bottom: .75rem; font-size: 0.8125rem; color: var(--sg-text-muted); }

/* One suggestion: the facts on the left, the one button on the right */
.sg-esc-review__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    margin-bottom: .75rem;
    padding: .8rem 1rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-md);
    background: var(--sg-surface);
}
.sg-esc-review__main { flex: 1 1 22rem; min-width: 0; overflow-wrap: anywhere; }
.sg-esc-review__name { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin-bottom: .25rem; font-weight: 600; }
.sg-esc-review__action { flex: 0 0 auto; margin-left: auto; }

/* "Nada para mudar": jade = confirmado (DESIGN.md §1); the text stays in ink */
.sg-esc-review__ok,
.sg-esc-review__tip { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .75rem; font-size: 0.875rem; }
.sg-esc-review__ok > .bi { color: var(--sg-success-500); }
.sg-esc-review__tip { font-size: 0.8125rem; color: var(--sg-text-muted); }
.sg-esc-review__tip > .bi { color: var(--sg-accent-text); }

.sg-esc-review__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }

/* Share next to a count: muted, tabular, never cut */
.sg-esc-review__pct { font-size: 0.75rem; color: var(--sg-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sg-esc-review__table th[scope="row"] { font-weight: 500; }
/* The hidden labels (.visually-hidden) are absolute: without a positioned
   scroll box their containing block is the card, outside the scroll, and on
   a phone they pushed the whole page sideways (measured: 851px at 375px) */
.sg-esc-review .table-responsive { position: relative; }

.sg-esc-review__rest { border-top: 1px solid var(--sg-border); }
.sg-esc-review__more { margin-bottom: .5rem; }
.sg-esc-review__more > summary {
    display: list-item;
    padding: .35rem 0;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sg-primary-600);
}
.sg-esc-review__more > summary:hover { color: var(--sg-primary-700); }
.sg-esc-review__more > summary:focus-visible { outline: 0; box-shadow: var(--sg-focus-ring); border-radius: var(--sg-radius-sm); }
.sg-esc-review__more[open] > summary { margin-bottom: .5rem; }
.sg-esc-review__more .table-responsive { border: 1px solid var(--sg-border); border-radius: var(--sg-radius-md); }

/* Preview of "Aplicar todas as sugestões": one line per employee */
.sg-esc-review__preview { margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }
.sg-esc-review__preview li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem 1rem;
    padding: .45rem 0;
    border-bottom: 1px dashed var(--sg-border);
    overflow-wrap: anywhere;
}
.sg-esc-review__preview li:last-child { border-bottom: 0; }
.sg-esc-review__change { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.sg-esc-review__change > .bi { color: var(--sg-text-muted); }

@media (max-width: 575.98px) {
    .sg-esc-review__action { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Avisos automáticos e notificações (rodada 4b — automacoes)
   views/notifications/index.php, sino de views/layout/header.php, "Sair do
   sistema?" de views/auth/login.php e o botão Sair de views/layout/sidebar.php.
   Regras em DESIGN.md "Avisos automáticos". Sem cor nova: só tokens --sg-* já medidos.
   -------------------------------------------------------------------------- */

/* Icon of a notification: tonal block like the indicator cards; the tone is
   the type (info petróleo, warning âmbar, danger tijolo, success jade) */
.sg-notif__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sg-radius-sm);
    font-size: 1rem;
    color: var(--sg-primary-700);
    background: var(--sg-primary-50);
}
.sg-notif__icon--warning { color: var(--sg-accent-text); background: var(--sg-accent-50); }
.sg-notif__icon--danger  { color: var(--sg-danger-700); background: var(--sg-danger-50); }
.sg-notif__icon--success { color: var(--sg-success-700); background: var(--sg-success-50); }

/* Notifications page: one row per notification, whole texts (never cut) */
.sg-notif-list { margin: 0; padding: 0; list-style: none; }
.sg-notif {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--sg-border);
}
.sg-notif:last-child { border-bottom: 0; }
/* Not read yet: amber rule on the left (attention, §1) and the title in the text colour.
   The fill step of the amber (600, 3.2:1 on white): the 500 marks only 2.1:1 */
.sg-notif.is-unread::before {
    content: "";
    position: absolute;
    left: 0;
    top: .75rem;
    bottom: .75rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--sg-accent-600);
}
/* basis 0: on a phone the text stays beside the icon and only the buttons go to a new line */
.sg-notif__body { flex: 1 1 0%; min-width: 0; }
.sg-notif__title {
    margin: 0 0 .2rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sg-text-muted);
    overflow-wrap: anywhere;
}
.sg-notif.is-unread .sg-notif__title { font-weight: 700; color: var(--sg-text); }
.sg-notif__msg { margin: 0 0 .3rem; font-size: 0.875rem; color: var(--sg-text-muted); overflow-wrap: anywhere; }
.sg-notif__when { font-size: 0.75rem; color: var(--sg-text-muted); font-variant-numeric: tabular-nums; }
.sg-notif__actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.sg-notif-list__more {
    margin: 0;
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--sg-border);
    font-size: 0.8125rem;
    color: var(--sg-text-muted);
}

/* Count beside "Não lidas" / "Todas" */
.sg-notif-tab__count {
    display: inline-block;
    min-width: 1.5rem;
    margin-left: .3rem;
    padding: 0 .4rem;
    border-radius: var(--sg-radius-pill);
    background: var(--sg-surface-sunken);
    color: var(--sg-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.35rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.nav-tabs .nav-link.active .sg-notif-tab__count { background: var(--sg-primary-50); color: var(--sg-primary-700); }

@media (max-width: 575.98px) {
    .sg-notif { flex-wrap: wrap; padding: .9rem 1rem; }
    .sg-notif__actions { width: 100%; justify-content: flex-start; padding-left: calc(32px + .85rem); }
}

/* Bell menu: each item is a POST form (opens and marks read) */
.sg-notif-menu__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem .75rem;
    padding: .25rem .5rem .5rem;
    border-bottom: 1px solid var(--sg-border);
}
.sg-notif-menu__list { margin: 0; padding: .25rem 0; list-style: none; }
.sg-notif-menu__list form { margin: 0; }
.sg-notif-menu__item { display: flex; align-items: flex-start; gap: .6rem; white-space: normal; text-align: left; }
.sg-notif-menu__item .sg-notif__icon { width: 28px; height: 28px; font-size: 0.875rem; }
.sg-notif-menu__text { display: flex; flex-direction: column; min-width: 0; }
.sg-notif-menu__title { font-size: 0.8125rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.sg-notif-menu__when { font-size: 0.75rem; color: var(--sg-text-muted); font-variant-numeric: tabular-nums; }
.sg-notif-menu__item:active .sg-notif-menu__when { color: inherit; }

/* Sair: the sidebar button sits in a form (POST with the token) */
.sg-logout-form { flex: 0 0 auto; margin: 0; }

/* "Sair do sistema?" (a GET to logout asks first) */
.sg-logout-confirm { display: grid; gap: .6rem; }


/* --------------------------------------------------------------------------
   Empresas e papel timbrado (rodada 4b — empresa-core)
   views/empresas/*, views/partials/papel_timbrado.php, views/users/*
   (empresa do usuário). Regras em DESIGN.md "Empresas e papel timbrado".
   A empresa é identidade, não estado: aparece em texto neutro (sem cor por
   empresa); o nome já diz qual é.
   -------------------------------------------------------------------------- */

/* Etiqueta neutra com o nome curto da empresa (listas, resumo) */
.sg-empresa-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .125rem .5rem;
    border: 1px solid var(--sg-border-strong);
    border-radius: var(--sg-radius-pill);
    background: var(--sg-surface);
    color: var(--sg-text);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}
.sg-empresa-tag--vazia {
    border-style: dashed;
    color: var(--sg-text-muted);
    font-weight: 600;
}

/* Cartões da tela Empresas */
.sg-empresa-card { height: 100%; }
.sg-empresa-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 104px;
    padding: 16px 20px;
    background: var(--sg-surface-sunken);
    border-bottom: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-md) var(--sg-radius-md) 0 0;
}
.sg-empresa-card__logo img { max-width: 100%; max-height: 72px; object-fit: contain; }
.sg-empresa-card__mark {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--sg-radius-md);
    background: var(--sg-primary-50);
    color: var(--sg-primary-700);
    font-size: 1.25rem;
    font-weight: 800;
}
.sg-empresa-card__name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.sg-empresa-card__legal { margin: .125rem 0 0; color: var(--sg-text-muted); font-size: 0.875rem; overflow-wrap: anywhere; }
.sg-empresa-card__meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .25rem .75rem;
    margin: .75rem 0 0;
    font-size: 0.875rem;
}
.sg-empresa-card__meta dt { color: var(--sg-text-muted); font-weight: 600; }
.sg-empresa-card__meta dd { margin: 0; overflow-wrap: anywhere; }
.sg-empresa-card.is-inactive .sg-empresa-card__logo img,
.sg-empresa-card.is-inactive .sg-empresa-card__mark { opacity: .55; filter: grayscale(1); }

/* Logo no formulário: prévia do que foi escolhido */
.sg-logo-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.sg-logo-drop__preview {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 96px;
    padding: 8px;
    border: 1px dashed var(--sg-border-strong);
    border-radius: var(--sg-radius-sm);
    background: var(--sg-surface-sunken);
}
.sg-logo-drop__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sg-logo-drop__empty { color: var(--sg-text-muted); font-size: 0.8125rem; text-align: center; }
.sg-logo-drop__fields { flex: 1 1 16rem; min-width: 0; }

/* Sugestão de empresa pelo histórico (formulário de usuário) — acento = atenção */
.sg-sugestao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .625rem .75rem;
    border: 1px solid var(--sg-accent-100);
    border-radius: var(--sg-radius-sm);
    background: var(--sg-accent-50);
    color: var(--sg-text);
    font-size: 0.875rem;
}
.sg-sugestao > .bi { color: var(--sg-accent-text); }
.sg-sugestao__texto { flex: 1 1 14rem; min-width: 0; }

/* Folha de prévia (Empresas › Papel timbrado): a página como sai no papel */
.sg-papel {
    max-width: 21cm;
    margin: 0 auto;
    padding: 1cm;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-sm);
    background: #fff;
    box-shadow: var(--sg-shadow-md);
}
.sg-papel__amostra { width: 100%; margin: 0 0 12px; border-collapse: collapse; font-size: 0.8125rem; }
.sg-papel__amostra th,
.sg-papel__amostra td { padding: 4px 6px; border-bottom: 1px solid var(--sg-border); text-align: left; vertical-align: top; }
.sg-papel__amostra th { color: var(--sg-text-muted); font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* Papel timbrado — cabeçalho (views/partials/papel_timbrado.php).
   Só na impressão; com 'tela' => true aparece também na tela. */
.sg-timbrado,
.sg-timbrado-fim { display: none; }
.sg-timbrado--tela,
.sg-timbrado-fim--tela { display: block; }

.sg-timbrado { margin: 0 0 12px; color: var(--sg-text); }
.sg-timbrado__topo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--sg-ink-900);
}
.sg-timbrado__logo { flex: 0 0 auto; max-width: 4.5cm; max-height: 1.6cm; object-fit: contain; }
.sg-timbrado__dados { flex: 1 1 auto; min-width: 0; }
.sg-timbrado__nome {
    margin: 0;
    font-size: 11pt;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.sg-timbrado__linha {
    margin: 1px 0 0;
    color: var(--sg-text-muted);
    font-size: 7.5pt;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.sg-timbrado__titulo { padding-top: 8px; }
.sg-timbrado__eyebrow {
    margin: 0;
    color: var(--sg-text-muted);
    font-size: 6.5pt;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.sg-timbrado__h {
    margin: 0;
    font-size: 13pt;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.sg-timbrado__sub { margin: 2px 0 0; font-size: 8.5pt; }
.sg-timbrado__emissao { margin: 2px 0 0; color: var(--sg-text-muted); font-size: 7pt; }

/* Papel timbrado — fim: local e data, linha de assinatura com quem assina */
.sg-timbrado-fim { margin-top: 24px; color: var(--sg-text); }
.sg-timbrado-fim__assinatura { width: 8cm; max-width: 100%; margin: 0 auto; text-align: center; }
.sg-timbrado-fim__local { margin: 0 0 28px; font-size: 8.5pt; }
.sg-timbrado-fim__linha { border-top: 1px solid var(--sg-ink-900); }
.sg-timbrado-fim__nome { margin: 4px 0 0; font-size: 9pt; font-weight: 700; }
.sg-timbrado-fim__cargo { margin: 0; color: var(--sg-text-muted); font-size: 8pt; }
.sg-timbrado-fim__rodape {
    margin: 20px 0 0;
    padding-top: 6px;
    border-top: 1px solid var(--sg-border);
    color: var(--sg-text-muted);
    font-size: 7.5pt;
}

@media print {
    .sg-timbrado { display: block; break-inside: avoid; }
    .sg-timbrado-fim { display: block; }
    .sg-timbrado-fim__assinatura { break-inside: avoid; }
    .sg-papel { max-width: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; }

    /* A page with a letterhead prints as a compact report (~9.5 pt, system font) */
    html:has(.sg-timbrado) { font-size: 9.5pt; }
    html:has(.sg-timbrado) body {
        background: #fff;
        color: #000;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    }
    html:has(.sg-timbrado__h) .page-header,
    html:has(.sg-timbrado) .alert-dismissible { display: none !important; }
    html:has(.sg-timbrado) thead { display: table-header-group; }
    html:has(.sg-timbrado) tr,
    html:has(.sg-timbrado) img { break-inside: avoid; }
    html:has(.sg-timbrado) h1,
    html:has(.sg-timbrado) h2,
    html:has(.sg-timbrado) h3 { break-after: avoid; }
    /* Tables: tight rows, text from the top of the cell (long descriptions) */
    html:has(.sg-timbrado) .table { font-size: 9pt; }
    html:has(.sg-timbrado) .table > :not(caption) > * > * { padding: 2px 5px; vertical-align: top; }
}


/* --------------------------------------------------------------------------
   Cidades: relatório da cidade e ações rápidas (rodada 4b — mod-cidades)
   views/cidades/relatorio.php (DESIGN.md "Relatório da cidade") e a faixa
   "Nesta cidade" de views/cidades/show.php. O relatório é um documento: cor
   só na tela (bordas e texto em tons de tinta); no papel, preto e cinza.
   -------------------------------------------------------------------------- */

/* "Nesta cidade": atalhos para cadastrar um registro já com a cidade escolhida */
.sg-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: -0.5rem 0 1.5rem;
}
.sg-quick__label {
    margin-right: .25rem;
    color: var(--sg-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Opções do relatório (só na tela) */
.sg-crel-opcoes { margin-bottom: 1rem; }
.sg-crel-opcoes legend { float: none; width: auto; margin-bottom: .5rem; font-size: 0.875rem; }
.sg-crel-opcoes__secoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .25rem 1rem;
}

/* A folha: texto compacto; números em colunas alinhadas */
.sg-crel { font-size: 0.8125rem; line-height: 1.35; color: var(--sg-text); }
.sg-crel-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6em;
    height: 1.6em;
    padding: 0 .3em;
    border: 1px solid var(--sg-ink-900);
    border-radius: 4px;
    font-size: .85em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.sg-crel-nada { color: var(--sg-text-muted); }
.sg-crel-sub { display: block; color: var(--sg-text-muted); font-size: .92em; }

/* Resumo: cada seção com o número e a contagem */
.sg-crel-resumo {
    margin: 0 0 10px;
    padding: 6px 10px 8px;
    border: 1px solid var(--sg-border-strong);
    border-radius: 6px;
    break-inside: avoid;
}
.sg-crel-resumo__titulo,
.sg-crel-grupo__titulo {
    margin: 0 0 4px;
    color: var(--sg-text-muted);
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.sg-crel-resumo__lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sg-crel-resumo__item { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sg-crel-resumo__nome { font-weight: 700; }
.sg-crel-resumo__valor { margin-left: auto; color: var(--sg-text-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* Seção numerada em caixa de borda fina */
.sg-crel-secao {
    margin: 0 0 10px;
    padding: 6px 10px 8px;
    border: 1px solid var(--sg-border-strong);
    border-radius: 6px;
}
.sg-crel-secao__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 1.08em;
    font-weight: 800;
    letter-spacing: -0.01em;
    break-after: avoid;
}
.sg-crel-secao__meta { margin-left: auto; color: var(--sg-text-muted); font-size: .82em; font-weight: 600; letter-spacing: 0; }
.sg-crel-vazio { margin: 0; color: var(--sg-text-muted); }
/* A section with nothing to list is one line: number, name, "Nenhum … em 2026." */
.sg-crel-secao--vazia { padding-block: 4px; }
.sg-crel-secao--vazia .sg-crel-secao__titulo { margin: 0; }

/* Dados do município: quatro grupos, rótulo curto em negrito + valor */
.sg-crel-grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.sg-crel-grupo { min-width: 0; break-inside: avoid; }
.sg-crel-campos { margin: 0; }
.sg-crel-campo {
    display: grid;
    grid-template-columns: 9.5em minmax(0, 1fr);
    gap: 6px;
    padding: 1px 0;
    border-bottom: 1px solid var(--sg-border);
}
.sg-crel-campo dt { font-weight: 700; }
.sg-crel-campo dd { margin: 0; overflow-wrap: anywhere; }

/* Tabelas compactas: textos inteiros (quebram linha, nunca cortam) */
.sg-crel-tabela { width: 100%; border-collapse: collapse; }
.sg-crel-tabela--estreita { width: auto; min-width: 60%; }
.sg-crel-tabela th,
.sg-crel-tabela td {
    padding: 2px 5px;
    border-bottom: 1px solid var(--sg-border);
    text-align: left;
    vertical-align: top;
}
.sg-crel-tabela th {
    color: var(--sg-text-muted);
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.sg-crel-tabela td.sg-crel-texto { white-space: pre-line; overflow-wrap: anywhere; }
.sg-crel-tabela .sg-crel-id,
.sg-crel-tabela .sg-crel-data { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sg-crel-tabela .sg-crel-num-col { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sg-crel-tabela .sg-crel-codigo { font-variant-numeric: tabular-nums; }
.sg-crel-meio { display: block; overflow-wrap: anywhere; }

/* Arquivos: só os nomes, em duas colunas */
.sg-crel-lista { margin: 0; padding-left: 1.6em; columns: 2; column-gap: 24px; }
.sg-crel-lista li { break-inside: avoid; overflow-wrap: anywhere; }

/* On screen the paper never widens the page: a wide table scrolls inside it */
@media screen {
    .sg-crel { max-width: 100%; overflow-x: auto; }
}
@media (max-width: 575.98px) {
    .sg-papel.sg-crel { padding: 12px; }
    .sg-crel-resumo__lista,
    .sg-crel-grupos { grid-template-columns: minmax(0, 1fr); }
    .sg-crel-lista { columns: 1; }
}

@media print {
    .sg-crel { font-size: 8.5pt; color: #000; }
    .sg-crel-tabela { font-size: 8pt; }
    .sg-crel-num { border-color: #000; }
    .sg-crel-resumo,
    .sg-crel-secao { border-color: #888; border-radius: 0; }
    .sg-crel-secao { box-decoration-break: clone; -webkit-box-decoration-break: clone; }
    /* Short sections never split; a long table keeps its title with the first rows */
    .sg-crel-secao--dados,
    .sg-crel-secao--arquivos,
    .sg-crel-secao--vazia { break-inside: avoid; }
    .sg-crel-tabela thead { display: table-header-group; }
    .sg-crel-tabela tr { break-inside: avoid; }
    .sg-crel-tabela th,
    .sg-crel-tabela td,
    .sg-crel-campo { border-bottom-color: #ccc; }
    .sg-crel-resumo__lista,
    .sg-crel-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sg-crel-lista { columns: 2; }
}

/* --------------------------------------------------------------------------
   Serviços, Ofícios e Senhas: lista de cidades e menos passos (rodada 4b — mod-servicos)
   views/{servicos,oficios,senhas}/form.php — DESIGN.md "Serviços, Ofícios e
   Senhas: empresa, exclusão pelo autor e menos passos". Sem cor nova: borda
   e tinta do tema; petróleo 50/700 no aviso de cópia (6,85:1), âmbar -text
   nos avisos de atenção (6,1:1).
   -------------------------------------------------------------------------- */

/* The city checkbox list of "Novo serviço": every city at once, in columns */
.sg-cidades {
    min-width: 0;
    margin: 0;
    padding: .75rem 1rem 1rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-md);
}
.sg-cidades > legend {
    float: none;
    width: auto;
    padding: 0 .25rem;
    margin-left: -.25rem;
}
.sg-cidades__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}
.sg-cidades__busca {
    position: relative;
    flex: 1 1 10rem; /* the text stays beside the icon down to 320px */
    max-width: 20rem;
}
.sg-cidades__busca > .bi {
    position: absolute;
    top: 50%;
    left: .625rem;
    transform: translateY(-50%);
    color: var(--sg-text-muted);
    pointer-events: none;
}
.sg-cidades__busca > .form-control { padding-left: 2rem; }
.sg-cidades__total {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.sg-cidades__sugestao { margin: 0 0 .25rem; }
.sg-cidades__sugestao .btn-link,
.sg-form-sugestao .btn-link { padding: 0; }

/* One group per office, then "Outros cadastros" (not municipalities) */
.sg-cidades__grupo {
    min-width: 0;
    margin: .75rem 0 0;
    padding: .5rem 0 0;
    border: 0;
    border-top: 1px solid var(--sg-border);
}
.sg-cidades__grupo--outros { border-top-style: dashed; }
.sg-cidades__titulo {
    float: none;
    width: auto;
    margin: 0 0 .25rem;
    color: var(--sg-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.sg-cidades__conta {
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
/* Alphabetical top to bottom, as many columns as fit; two on a phone, so the
   80 cities take half the scroll */
.sg-cidades__lista {
    column-width: 12rem;
    column-gap: 1.5rem;
}
@media (max-width: 575.98px) {
    .sg-cidades { padding: .75rem; }
    .sg-cidades__lista { column-count: 2; column-width: auto; column-gap: 1rem; }
    .sg-cidades__busca { max-width: none; }
}
.sg-cidades__item {
    break-inside: avoid;
    margin-bottom: 0;
    padding-top: .125rem;
    padding-bottom: .125rem;
}
.sg-cidades__item > .form-check-label { overflow-wrap: anywhere; }
.sg-cidades__vazio { margin: .75rem 0 0; color: var(--sg-text-muted); }

/* "Cópia do serviço #12 …" at the top of a duplicated form */
.sg-form-origem {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: 0 0 1rem;
    padding: .5rem .75rem;
    border: 1px solid var(--sg-primary-100);
    border-radius: var(--sg-radius-sm);
    background: var(--sg-primary-50);
    color: var(--sg-primary-700);
    font-size: 0.875rem;
}

/* "Escolha o arquivo … de novo" / "Digite a senha de novo": attention, not error */
.sg-form-arquivo {
    display: flex;
    align-items: baseline;
    gap: .375rem;
    margin: 0 0 .5rem;
    color: var(--sg-accent-text);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* "Usar a última: Itabaiana" under a city select */
.sg-form-sugestao { margin: .25rem 0 0; }

/* --------------------------------------------------------------------------
   Relatórios — papel (rodada 4b — mod-painel-relatorios)
   views/reports/result.php, modo Imprimir. A tabela larga rola de lado só na
   tela (celular); na impressão fica sem rolagem — o Chrome não quebra em
   páginas um bloco com overflow, e a última folha sairia em branco.
   DESIGN.md "Painel e relatórios por empresa".
   -------------------------------------------------------------------------- */
@media screen {
    .sg-papel__tabela { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* --------------------------------------------------------------------------
   Dashboard no celular: seletores e indicadores (rodada 4b — corretor)
   Até 575px o seletor de escritório e o de empresa ocupam cada um a linha
   inteira (com 390px "Todos os escritórios" saía cortado). No cartão de
   indicador em meia largura (.col-6, os do Dashboard) o ícone sobe para
   cima do rótulo, menor: com 390px o cartão tem 134px úteis e
   "PRORROGAÇÕES" (107px) passava por baixo do ícone de 44px; empilhado,
   rótulo, número e dica usam a largura toda. O cartão de largura inteira
   (Anexos ausentes) fica como está. Cores e tokens: os mesmos do .sg-stat
   (nenhum par novo de contraste).
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .sg-year-picker select[name="esc"],
    .sg-year-picker select[name="emp"] { flex: 1 1 100%; }

    .col-6 .sg-stat { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .5rem; }
    .col-6 .sg-stat__icon { order: -1; width: 32px; height: 32px; font-size: 1rem; }
}

/* Long unbroken text (e-mails, URLs) wraps instead of widening the page or
   being cut — the owner wants texts whole (views/cidades/show.php key facts) */
.sg-break-anywhere { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   Grupos de cidades de cada pessoa (grupos-cidades)
   views/servicos/form.php + assets/js/grupos-cidades.js — DESIGN.md "Grupos
   de cidades de cada pessoa". A linha "Meus grupos" logo abaixo dos botões
   "Marcar todas de …". Sem cor nova: o botão do grupo é o mesmo
   btn-outline-primary dos escritórios; pressionado (todas as cidades do
   grupo marcadas) usa o estado ativo do tema, primary-700 sobre primary-100
   (5,85:1), e o ícone troca para o marcador com visto — a cor não é o único
   sinal. O rótulo é o eyebrow do tema (muted, 5,44:1); o aviso de cidades
   que ficaram de fora usa accent-text sobre a superfície (6,1:1).
   -------------------------------------------------------------------------- */
.sg-cidades__meus { margin: 0 0 .5rem; }
.sg-cidades__meus-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.sg-cidades__meus-rotulo {
    color: var(--sg-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.sg-cidades__meus-lista {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    min-width: 0;
}
/* A long group name (up to 60 characters) wraps inside its button */
.sg-cidades__meus-lista > .btn {
    max-width: 100%;
    text-align: left;
    overflow-wrap: anywhere;
}
.sg-cidades__meus-vazio {
    color: var(--sg-text-muted);
    font-size: 0.8125rem;
}
/* Up to 20 groups with 3 actions each: the menu scrolls instead of leaving the
   screen; wide enough for "Trocar pelas cidades marcadas" on one line */
.sg-cidades__menu {
    min-width: min(18rem, calc(100vw - 2rem));
    max-width: min(22rem, calc(100vw - 2rem));
    max-height: min(22rem, 60vh);
    overflow-y: auto;
}
.sg-cidades__menu .dropdown-header,
.sg-cidades__menu .dropdown-item {
    white-space: normal;
    overflow-wrap: anywhere;
}
/* The group's name heads its actions: text colour, not the muted header */
.sg-cidades__menu .dropdown-header {
    color: var(--sg-text);
    font-weight: 700;
}
.sg-cidades__aviso {
    margin: 0;
    color: var(--sg-text-muted);
    font-size: 0.8125rem;
}
.sg-cidades__aviso:not(:empty) { margin-top: .375rem; }
.sg-cidades__aviso--atencao {
    color: var(--sg-accent-text);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Seleção do Dashboard nas listas (rodada 5 — contexto; DESIGN.md "Seleção do
   Dashboard nas listas"). views/partials/context_notice.php: a slim line at
   the top of the filter card of a list or report that opened on the year,
   office and company chosen on the Dashboard, with "Limpar". Amber = current
   position (DESIGN.md §1), the same fill as the active saved-filter chip.
   Pairs measured in tests/contrast.php: text / accent-50, icon accent-text /
   accent-50, filete accent-600 / the card's surface; the button keeps the
   white fill of .btn-outline-secondary (muted / surface).
   -------------------------------------------------------------------------- */
.sg-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin: 0 0 1rem;
    padding: .5rem .5rem .5rem .75rem;
    border: 1px solid var(--sg-accent-100);
    border-left: 3px solid var(--sg-accent-600);
    border-radius: var(--sg-radius-sm);
    background: var(--sg-accent-50);
}
.sg-context__icon { flex: none; color: var(--sg-accent-text); }
.sg-context__text {
    flex: 1 1 10rem; /* the text stays beside the icon down to 320px */
    min-width: 0;
    margin: 0;
    font-size: 0.875rem;
    color: var(--sg-text);
    overflow-wrap: anywhere;
}
.sg-context__text strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.sg-context__form { display: flex; margin: 0 0 0 auto; }


/* --------------------------------------------------------------------------
   Filtro avançado e Imprimir / PDF das listas (rodada 6 — nucleo; DESIGN.md
   §35 "Filtro avançado e impressão das listas").
   - .sg-adv*: the panel of views/partials/filter_bar.php (rows built by
     assets/js/filtro-avancado.js), its button with the count, the chips of
     the conditions applied. A sunken panel separated by a border (no
     shadow); primary = the actions; amber = the count of what is applied
     (current position, as the active saved-filter chip).
   - .sg-grid__print: the grid's "Imprimir / PDF" beside "Exportar planilha".
   - .sg-impressao*: the print page (views/lista/imprimir.php): a toolbar on
     screen, the sheet (.sg-papel) with the letterhead and a compact table
     (8.5 pt); on paper, black on white, thead on every page, rows never split.
   Pairs measured in tests/contrast.php (the "Filtro avançado" and
   "Impressão" lines).
   -------------------------------------------------------------------------- */

.sg-adv__painel {
    margin-top: 1rem;
    padding: .875rem 1rem 1rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-md);
    background: var(--sg-surface-sunken);
}
.sg-adv__cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .75rem; margin-bottom: .5rem; }
.sg-adv__titulo { margin: 0; }
.sg-adv__ajuda { margin: 0; font-size: 0.8125rem; color: var(--sg-text-muted); }
.sg-adv__linhas { margin: 0; padding: 0; list-style: none; }

/* One condition: "Se/e/ou" · Campo · Condição · Valor · × */
.sg-adv__linha {
    display: grid;
    grid-template-columns: 2rem minmax(0, 15rem) minmax(0, 12rem) minmax(0, 1fr) auto;
    grid-template-areas: "liga campo cond valor remover";
    gap: .5rem;
    align-items: start;
    padding: .5rem 0;
}
.sg-adv__linha + .sg-adv__linha { border-top: 1px solid var(--sg-border); }
.sg-adv__liga {
    grid-area: liga;
    align-self: center;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sg-text-muted);
}
.sg-adv__campo { grid-area: campo; min-width: 0; }
.sg-adv__cond { grid-area: cond; min-width: 0; }
.sg-adv__valor { grid-area: valor; min-width: 0; }
.sg-adv__valor[hidden] { display: none; }
.btn.sg-adv__remover {
    grid-area: remover;
    --bs-btn-color: var(--sg-text-muted);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--sg-danger-700);
    --bs-btn-hover-bg: var(--sg-danger-50);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--sg-danger-700);
    --bs-btn-active-bg: var(--sg-danger-100);
    width: 2rem;
    height: 2rem;
    padding: 0;
}
.sg-adv__valor-campos { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sg-adv__valor-campos > .form-control,
.sg-adv__valor-campos > .form-select,
.sg-adv__valor-campos > .select2-container { flex: 1 1 9rem; min-width: 0; }
.sg-adv__valor-campos--dias > .form-control { flex: 0 1 7rem; }
/* "entre": the two values side by side, "e" between them (they stack when narrow) */
.sg-adv__valor-campos--par > .form-control { flex-basis: 8rem; }
.sg-adv__e { flex: none; font-size: 0.8125rem; color: var(--sg-text-muted); }
.sg-adv__vazio { margin: .25rem 0 0; font-size: 0.8125rem; color: var(--sg-text-muted); }

.sg-adv__pe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-top: .5rem;
    padding-top: .75rem;
    border-top: 1px solid var(--sg-border);
}
.sg-adv__modo { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.sg-adv__modo-titulo { float: left; width: auto; margin: 0; padding: 0; font-size: 0.8125rem; font-weight: 700; line-height: 1.5; color: var(--sg-text); }
.sg-adv__modo .form-check-inline { margin: 0; }
.sg-adv__modo .form-check-label { font-size: 0.875rem; }
.sg-adv__botoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }

/* The bar's button (opens the panel): the count of conditions applied, amber (what is on now) */
.sg-adv__abrir { white-space: nowrap; }
.sg-adv__conta {
    margin-left: .25rem;
    border: 1px solid var(--sg-accent-100);
    background: var(--sg-accent-50);
    color: var(--sg-accent-text);
    font-variant-numeric: tabular-nums;
}

/* Chips of the conditions applied: the whole sentence (wraps, never cut) and × */
.sg-adv__ativos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin-top: .75rem;
}
.sg-adv__chip { border-radius: var(--sg-radius-md); }
.sg-adv__chip-texto {
    min-width: 0;
    padding: .3rem .4rem .3rem .8rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sg-text);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Select2 inside the panel: the small fields' height */
.sg-adv .select2-container--bootstrap-5 .select2-selection { min-height: calc(1.5em + .5rem + 2px); font-size: 0.875rem; }

@media (max-width: 767.98px) {
    .sg-adv__linha {
        grid-template-columns: 1.75rem minmax(0, 1fr) auto;
        grid-template-areas:
            "liga campo remover"
            ".    cond  ."
            ".    valor .";
    }
    .sg-adv__botoes { margin-left: 0; width: 100%; }
    .sg-adv__botoes > .btn { flex: 1 1 auto; }
}

/* "Imprimir / PDF" beside the export; on a phone it takes its own line if needed */
.sg-grid__export { flex-wrap: wrap; gap: .5rem; }
.sg-grid__print { white-space: nowrap; }
@media (max-width: 575.98px) {
    .sg-grid__export > .sg-grid__print { flex: 1 1 auto; }
}

/* ── Print page (views/lista/imprimir.php) ─────────────────────────────── */
.sg-impressao-pagina { min-height: 100vh; background: var(--sg-canvas); color: var(--sg-text); }
.sg-impressao__barra {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--sg-border);
    background: var(--sg-surface);
}
.sg-impressao__info { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; min-width: 0; }
.sg-impressao__info .sg-eyebrow { flex: 1 1 100%; }
.sg-impressao__nome { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.sg-impressao__qtd { font-size: 0.875rem; color: var(--sg-text-muted); font-variant-numeric: tabular-nums; }
.sg-impressao__acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.sg-impressao__dica {
    flex: 1 1 100%;
    margin: 0;
    padding: .5rem .75rem;
    border: 1px solid var(--sg-primary-100);
    border-left: 3px solid var(--sg-primary-600);
    border-radius: var(--sg-radius-sm);
    background: var(--sg-primary-50);
    font-size: 0.875rem;
    color: var(--sg-text);
}
.sg-impressao__dica[hidden] { display: none; }
.sg-impressao__dica > .bi { color: var(--sg-primary-700); }

.sg-impressao { margin: 1rem auto 2rem; }
.sg-papel.sg-impressao--paisagem { max-width: 29.7cm; }
.sg-impressao__contagem { margin: 0 0 6px; font-size: 8.5pt; font-weight: 700; font-variant-numeric: tabular-nums; }
.sg-impressao__aviso {
    margin: 0 0 8px;
    padding: 4px 8px;
    border: 1px solid var(--sg-accent-100);
    border-left: 3px solid var(--sg-accent-600);
    border-radius: var(--sg-radius-sm);
    background: var(--sg-accent-50);
    font-size: 8.5pt;
    color: var(--sg-text);
}
.sg-impressao__aviso > .bi { color: var(--sg-accent-text); }
.sg-impressao__vazio { margin: 0; color: var(--sg-text-muted); }
.sg-impressao__rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.sg-impressao__tabela { width: 100%; border-collapse: collapse; font-size: 8.5pt; line-height: 1.3; color: var(--sg-text); }
.sg-impressao__tabela th,
.sg-impressao__tabela td {
    padding: 3px 5px;
    border-bottom: 1px solid var(--sg-border);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere; /* a long token (link, code) never widens the sheet */
}
/* Text columns keep a readable width (6em): "anywhere" alone would squeeze a
   city down to broken words beside a long description */
.sg-impressao__tabela td:not(.sg-impressao__num):not(.sg-impressao__data) { min-width: 6em; }
.sg-impressao__tabela thead th {
    border-bottom: 1.5px solid var(--sg-ink-900);
    font-size: 7pt;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sg-text-muted);
    overflow-wrap: normal;
}
.sg-impressao__tabela .sg-impressao__num { text-align: right; white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
.sg-impressao__tabela .sg-impressao__data { text-align: center; white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
/* The total closes the table once: a row group, not a footer repeated on every page */
.sg-impressao__total { display: table-row-group; }
.sg-impressao__tabela .sg-impressao__total th,
.sg-impressao__tabela .sg-impressao__total td { border-top: 1.5px solid var(--sg-ink-900); border-bottom: 0; font-weight: 800; }

@media (max-width: 575.98px) {
    .sg-papel.sg-impressao { margin: .5rem; padding: 12px; }
}

@media print {
    .sg-impressao-pagina { min-height: 0; background: #fff; color: #000; }
    .sg-papel.sg-impressao,
    .sg-papel.sg-impressao--paisagem { max-width: none; margin: 0; }
    .sg-impressao__rolagem { overflow: visible; }
    .sg-impressao__tabela { color: #000; }
    .sg-impressao__tabela thead { display: table-header-group; }
    .sg-impressao__tabela tr { break-inside: avoid; page-break-inside: avoid; }
    .sg-impressao__tabela thead th { color: #333; }
    .sg-impressao__aviso { background: #fff; }
}


/* --------------------------------------------------------------------------
   Imprimir / PDF e Filtro avançado — acabamento medido (rodada 6 —
   conferir-impressao; DESIGN.md §41). Refines the nucleo's block above,
   measured on the Chrome PDF of every list and on every list page with the
   advanced panel open at 1280, 390 and 320 px.
   Print page (views/lista/imprimir.php):
   - .sg-impressao__tabela--medida: the view gives each column a share of the
     sheet (<colgroup>), so the 6em floor of text cells goes (it made an
     almost empty "Anexo" 6em wide while "Cidade" wrapped);
   - .sg-impressao__cod: codes (CNPJ, telephone, process) never break;
   - .sg-impressao__linha-total: the total is the last row of the body, its
     label never breaks inside the word, and it stays on the sheet of the
     last rows;
   - screen: no phantom vertical scrollbar on the table (the hidden caption
     is 1px taller than its box); on a phone the table keeps the paper's
     width and scrolls inside the sheet (as it prints), and the toolbar does
     not stick.
   Lists: the grid's scroll box contains its positioned content; the advanced
   panel shows the chosen field and values whole and, on a phone, gives them
   the panel's whole width.
   No new colour: the "Papel" label is muted text on the surface (measured in
   tests/contrast.php).
   -------------------------------------------------------------------------- */
.sg-impressao__tabela--medida td:not(.sg-impressao__num):not(.sg-impressao__data) { min-width: 0; }
.sg-impressao__tabela .sg-impressao__cod { white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
/* The total: the last row of the body, never alone on a sheet (Chrome keeps a
   row with "break-before: avoid" with the one before it; a row group of its
   own was left alone on a last sheet — measured) */
.sg-impressao__tabela .sg-impressao__linha-total > th,
.sg-impressao__tabela .sg-impressao__linha-total > td { border-top: 1.5px solid var(--sg-ink-900); border-bottom: 0; font-weight: 800; }
.sg-impressao__tabela .sg-impressao__linha-total > th { text-align: left; overflow-wrap: normal; }
.sg-impressao__linha-total { break-before: avoid; page-break-before: avoid; }

.sg-impressao__papel { display: flex; align-items: center; gap: .5rem; }
.sg-impressao__rotulo { font-size: 0.8125rem; font-weight: 600; color: var(--sg-text-muted); }

@media screen {
    .sg-impressao__rolagem { overflow-y: hidden; }
}
@media screen and (max-width: 767.98px) {
    .sg-impressao__tabela--medida { min-width: 19cm; }
    .sg-impressao--paisagem .sg-impressao__tabela--medida { min-width: 27.7cm; }
}
@media screen and (max-width: 575.98px) {
    .sg-impressao__barra { position: static; }
}

/* Lists: the hidden words of a missing attachment ("Arquivo não encontrado",
   .visually-hidden = absolute) were placed against .sg-grid__body, outside
   the scroll box, and widened the whole page: Serviços at 390 px was 621 px
   wide, with sideways scrolling (measured) */
.sg-grid__scroll { position: relative; }

/* Filtro avançado: the chosen field and the chosen values show whole (they
   wrap, never "…"); on a phone "Se/e/ou" and × share the first line and the
   field, condition and value take the panel's whole width — at 320 px they
   were 130 px wide and showed "Tipo de pr…" (measured) */
.sg-adv .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
.sg-adv .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
/* "Se/e/ou" on the line of the field, also beside a tall list of chosen values */
.sg-adv__liga { align-self: start; padding-top: .45rem; }
@media (max-width: 575.98px) {
    .sg-adv__painel { padding: .75rem; }
    .sg-adv__linha {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "liga  remover"
            "campo campo"
            "cond  cond"
            "valor valor";
        row-gap: .375rem;
    }
}

/* ── Validade das licenças (DESIGN.md §42, licencas-validade) ─────────── */
/* A long grid header that may break in two lines: "Data de saída
   (validade)" took 200 px on one line and pushed the Licenças grid 53 px
   past its box at 1280 px (measured); in two lines it takes ~120 px. Only
   the header: the cells keep their own rules. */
.table > thead th.sg-th-quebra { white-space: normal; min-width: 6.5rem; }

/* ── Validade 31 a 90 dias (licenças) ────────────────────────────────────
   Attention, but farther than 30 days: amber text in an amber outline on
   the surface — a step below the filled amber of "Vence em até 30 dias".
   Not petróleo: primary is action/navigation (DESIGN.md §1).
   Contrast: accent-text / surface (tests/contrast.php). */
.badge.sg-badge-aviso {
    color: var(--sg-accent-text);
    background: var(--sg-surface);
    border: 1px solid var(--sg-accent-100);
}

/* ── Produtividade da equipe (DESIGN.md §45, produtividade) ─────────────
   views/produtividade/index.php + _ranking.php. Only existing tokens: the
   pairs are the ones already measured (muted on canvas and surface,
   petróleo 600 link on surface). */
/* The "what is counted" line under the filters: muted on the canvas (5,1:1) */
.sg-prod__nota {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: -.25rem 0 1rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--sg-text-muted);
}
.sg-prod__nota > i { flex: 0 0 auto; margin-top: .1rem; color: var(--sg-primary-600); }
.sg-prod__nota strong { color: var(--sg-text); font-weight: 700; }

/* The team chart: a fixed height, so the card does not grow with the width */
.sg-prod__grafico { position: relative; height: 280px; }
@media (min-width: 992px) { .sg-prod__grafico { height: 400px; } }

/* A number that opens "Ver as ações": the look of a link, the size of the cell */
.btn.sg-prod__ver {
    padding: 0;
    border: 0;
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
    color: var(--sg-primary-600);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    vertical-align: baseline;
}
.btn.sg-prod__ver:hover,
.btn.sg-prod__ver:focus-visible { color: var(--sg-primary-700); text-decoration-style: solid; }
.sg-prod__total { font-weight: 800; color: var(--sg-text); }

/* A ranking row that is not a link: no hover */
.sg-prod .sg-rank__row.is-static:hover { background: transparent; }
.sg-prod .sg-rank__row.is-static:hover .sg-rank__name { color: inherit; }

/* "Ver as ações": one line per record — when, what (whole text), open */
.sg-prod__acoes-nota { margin-bottom: .75rem; font-size: 0.8125rem; color: var(--sg-text-muted); }
.sg-prod__acoes { margin: 0; padding: 0; list-style: none; }
.sg-prod__acao {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr) auto;
    align-items: start;
    gap: .25rem .75rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--sg-border);
}
.sg-prod__acao:last-child { border-bottom: 0; }
.sg-prod__quando { font-size: 0.8125rem; color: var(--sg-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sg-prod__oque { min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
@media (max-width: 575.98px) {
    .sg-prod__acao { grid-template-columns: minmax(0, 1fr) auto; }
    .sg-prod__quando { grid-column: 1 / -1; }
    .sg-prod__grafico { height: 240px; }
}

/* ==========================================================================
   Histórico de alterações — o cadeado de cada ficha (rodada 28/09/2026 —
   historico-registro). DESIGN.md "Histórico de alterações (cadeado)".
   Só o administrador geral vê. Linha do tempo: um cartão por alteração, com
   filete e ponto na cor da ação (a palavra no selo diz o mesmo — a cor não é
   o único sinal). O que saiu é tijolo 50/700 riscado, o que entrou é jade
   50/700: perda e confirmação (pares medidos em tests/contrast.php).
   ========================================================================== */

/* O botão do cadeado nas fichas: quadrado (.btn-icon), neutro */
.sg-hist-botao > .bi { font-size: 1rem; }

.sg-hist-page { min-width: 0; }
.sg-hist-page__sub { margin: .35rem 0 0; color: var(--sg-text-muted); overflow-wrap: anywhere; }
.sg-hist-page__resumo { margin: 0 0 .75rem; font-size: 0.875rem; color: var(--sg-text-muted); }

/* Filtros: quem, campo e período */
.sg-hist-filtros { margin-bottom: 1rem; }
.sg-hist-filtros .card-body { display: flex; flex-direction: column; gap: 1rem; }
.sg-hist-filtros__grupo { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.sg-hist-chip__texto { white-space: normal; overflow-wrap: anywhere; }
.sg-hist-chip__n {
    display: inline-block;
    min-width: 1.5rem;
    padding: .05rem .45rem;
    border-radius: var(--sg-radius-pill);
    background: var(--sg-surface-sunken);
    color: var(--sg-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}
.sg-chip--active .sg-hist-chip__n { background: var(--sg-surface); color: var(--sg-accent-text); }
.sg-hist-filtros__periodo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.sg-hist-filtros__periodo .form-control { width: 11rem; max-width: 100%; }
.sg-hist-filtros__botoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.sg-hist-filtros__ajuda { font-size: 0.8125rem; color: var(--sg-text-muted); }

/* A linha do tempo */
.sg-hist { position: relative; margin: 0; padding: 0 0 0 1.5rem; list-style: none; }
.sg-hist::before {
    content: "";
    position: absolute;
    top: .75rem;
    bottom: .75rem;
    left: .4rem;
    width: 2px;
    background: var(--sg-border-strong);
}
.sg-hist__item {
    --sg-hist-tom: var(--sg-text-muted);
    position: relative;
    margin-bottom: .75rem;
    padding: .85rem 1rem;
    border: 1px solid var(--sg-border);
    border-left: 3px solid var(--sg-hist-tom);
    border-radius: var(--sg-radius-md);
    background: var(--sg-surface);
    min-width: 0;
}
.sg-hist__item::before {
    content: "";
    position: absolute;
    top: 1.05rem;
    left: calc(-1.5rem + .4rem - .3rem + 1px);
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--sg-hist-tom);
    box-shadow: 0 0 0 3px var(--sg-canvas);
}
.sg-hist__item:focus { outline: none; box-shadow: var(--sg-focus-ring); }
.sg-hist__item--success   { --sg-hist-tom: var(--sg-success-500); }
.sg-hist__item--warning   { --sg-hist-tom: var(--sg-accent-text); } /* accent-600 on canvas measures 2,98:1 */
.sg-hist__item--danger    { --sg-hist-tom: var(--sg-danger-500); }
.sg-hist__item--info      { --sg-hist-tom: var(--sg-primary-500); }
.sg-hist__item--secondary { --sg-hist-tom: var(--sg-text-muted); }

.sg-hist__head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; font-size: 0.875rem; }
.sg-hist__acao { font-size: 0.75rem; }
.sg-hist__quem, .sg-hist__quando { display: inline-flex; align-items: baseline; gap: .35rem; min-width: 0; overflow-wrap: anywhere; }
.sg-hist__quem { font-weight: 700; color: var(--sg-text); }
.sg-hist__quando { color: var(--sg-text-muted); }
.sg-hist__origem {
    padding: .05rem .5rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-pill);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sg-text-muted);
}
.sg-hist__audit { margin-left: auto; font-size: 0.8125rem; font-weight: 600; }
.sg-hist__nota { margin: .5rem 0 0; font-size: 0.875rem; color: var(--sg-text-muted); overflow-wrap: anywhere; }

/* Cada campo: rótulo · antes → depois */
.sg-hist__campos { display: flex; flex-direction: column; gap: .5rem; margin: .65rem 0 0; padding: 0; list-style: none; }
.sg-hist__campo {
    display: grid;
    grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
    align-items: baseline;
    gap: .25rem .75rem;
    padding-top: .5rem;
    border-top: 1px solid var(--sg-border);
}
.sg-hist__campo:first-child { padding-top: 0; border-top: 0; }
.sg-hist__rotulo { font-size: 0.875rem; font-weight: 600; color: var(--sg-text); overflow-wrap: anywhere; }
.sg-hist__valores { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; min-width: 0; overflow-wrap: anywhere; }
.sg-hist__antes, .sg-hist__depois { padding: .05rem .4rem; border-radius: 4px; }
.sg-hist__antes { background: var(--sg-danger-50); color: var(--sg-danger-700); text-decoration: line-through; text-decoration-thickness: 1px; }
.sg-hist__depois { background: var(--sg-success-50); color: var(--sg-success-700); font-weight: 600; }
.sg-hist__seta { color: var(--sg-text-muted); }
.sg-hist__vazio { color: var(--sg-text-muted); font-style: italic; }
.sg-hist__segredo { display: inline-flex; align-items: baseline; gap: .35rem; color: var(--sg-text-muted); font-style: italic; }

/* Texto longo: inteiro, com as palavras que mudaram marcadas */
.sg-hist__texto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; min-width: 0; }
.sg-hist__versao { min-width: 0; padding: .5rem .75rem; border: 1px solid var(--sg-border); border-radius: var(--sg-radius-sm); background: var(--sg-surface-sunken); }
.sg-hist__corpo { margin: .25rem 0 0; font-size: 0.875rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.sg-hist__seg { padding: 0 .1rem; border-radius: 3px; }
.sg-hist__seg--saiu { background: var(--sg-danger-50); color: var(--sg-danger-700); text-decoration: line-through; text-decoration-thickness: 1px; }
.sg-hist__seg--entrou { background: var(--sg-success-50); color: var(--sg-success-700); font-weight: 600; text-decoration: none; }

/* Dados de um cadastro ou de uma exclusão: recolhidos, abrem ao imprimir */
.sg-hist__dados { margin-top: .65rem; }
.sg-hist__dados > summary { width: fit-content; font-size: 0.875rem; font-weight: 600; color: var(--sg-primary-600); cursor: pointer; }
.sg-hist__dados > summary:hover { color: var(--sg-primary-700); }
.sg-hist__lista { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); gap: .25rem .75rem; margin: .5rem 0 0; font-size: 0.875rem; }
.sg-hist__lista dt { font-weight: 600; overflow-wrap: anywhere; }
.sg-hist__lista dd { margin: 0; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.sg-hist__mais { display: flex; justify-content: center; margin: 1rem 0; }

@media (max-width: 767.98px) {
    .sg-hist__texto { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    .sg-hist { padding-left: 1.1rem; }
    .sg-hist::before { left: .25rem; }
    .sg-hist__item { padding: .75rem .8rem; }
    .sg-hist__item::before { left: calc(-1.1rem + .25rem - .3rem + 1px); }
    .sg-hist__campo, .sg-hist__lista { grid-template-columns: minmax(0, 1fr); }
    .sg-hist__audit { margin-left: 0; }
    .sg-hist-filtros__periodo > div:not(.sg-hist-filtros__botoes) { flex: 1 1 8rem; }
    .sg-hist-filtros__periodo .form-control { width: 100%; }
}
@media print {
    .sg-hist-filtros, .sg-hist__mais, .sg-hist__audit { display: none !important; }
    .sg-hist__item { break-inside: avoid; border-color: #CBD6E2; }
    .sg-hist__item::before { box-shadow: none; }
}
/* A filter whose options are long ("Esta semana (28/09 a 04/10/2026)"): two
   columns of the bar from 768 px, so the chosen text shows whole (at 12rem it
   was cut to "Este mês (01/09 a 30/0"); one column on phones */
@media (min-width: 768px) {
    .sg-filter__field--wide { grid-column: span 2; }
}
/* The grid's count headers wrap in two lines (the columns' text-nowrap is
   for the numbers only): one line per header made the table 1.6x wider
   than the card at 1280 px */
.sg-prod .sg-grid .table > thead th { white-space: normal !important; min-width: 5rem; vertical-align: bottom; }
.sg-prod .sg-grid .table > thead th:first-child { min-width: 10rem; }
/* Print of a list: a number column's HEADER may wrap between words (the
   numbers themselves stay on one line). With nine counts, "Serviços
   registrados", "Engenharia cadastrados"… on one line each took the whole
   sheet and squeezed the names to "Jhennife r Barros" (Produtividade,
   measured at 1280 px); other lists' short headers do not change. */
.sg-impressao__tabela thead th.sg-impressao__num { white-space: normal; overflow-wrap: normal; }

/* --------------------------------------------------------------------------
   Engenharia: abas do projeto, Topografia e Testes (28/09/2026 — topografia-nucleo)
   views/engenharia/{form,show,index}.php, _topografia_form.php,
   _testes_form.php, _topografia_show.php, _topo_arquivos.php;
   assets/js/topografia.js; DESIGN.md §46.
   Cor com significado: jade = feito/concluída, âmbar = em andamento,
   contorno cinza = falta, cinza chapado = não se aplica / sem informação.
   O estado nunca é só cor: vem com símbolo (✓ ◐ ○ —) e palavra.
   Pares medidos em tests/contrast.php (seção "Topografia").
   -------------------------------------------------------------------------- */
.sg-eng-tabs { gap: .25rem; }
.sg-eng-tabs .nav-link { display: inline-flex; align-items: center; gap: .45rem; }
.sg-eng-tabcard { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }

/* Pill of a tab and chip of a stage: the same four tones */
.sg-tab-pill,
.sg-topo-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border: 1px solid transparent;
    border-radius: var(--sg-radius-pill);
    font-weight: 700;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.sg-tab-pill { padding: .05rem .5rem; font-size: 0.6875rem; white-space: nowrap; }
.sg-topo-chip { padding: .1rem .5rem; font-size: 0.75rem; font-weight: 600; overflow-wrap: anywhere; }
.sg-tab-pill--done,     .sg-topo-chip--done     { background: var(--sg-success-50); color: var(--sg-success-700); border-color: var(--sg-success-100); }
.sg-tab-pill--progress, .sg-topo-chip--progress { background: var(--sg-accent-50); color: var(--sg-accent-text); border-color: var(--sg-accent-100); }
.sg-tab-pill--todo,     .sg-topo-chip--todo     { background: var(--sg-surface); color: var(--sg-text-muted); border-color: var(--sg-border-strong); }
.sg-tab-pill--none,     .sg-topo-chip--none     { background: var(--sg-surface-sunken); color: var(--sg-text-muted); }

/* The list's column: three chips, wrapped when narrow, never cut */
.sg-topo-cell { min-width: 10rem; }
.sg-topo-chips { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.sg-topo-none { font-size: 0.8125rem; color: var(--sg-text-muted); }

/* Page: the objetivo and the city on top */
.sg-eng-summary { overflow-wrap: anywhere; }
.sg-eng-summary__goal { margin: .15rem 0 .5rem; font-size: 1.0625rem; font-weight: 700; overflow-wrap: anywhere; }
.sg-eng-summary__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem; font-size: 0.875rem; color: var(--sg-text-muted); }
.sg-eng-summary__meta strong { color: var(--sg-text); }
.sg-eng-values { padding: 1rem; border: 1px solid var(--sg-border); border-radius: var(--sg-radius-md); background: var(--sg-surface-sunken); }
.sg-eng-followup { overflow-wrap: anywhere; }

/* Head of a tab: who executes it, and its action */
.sg-topo-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--sg-text-muted);
}
.sg-topo-intro .sg-eyebrow { margin-right: .35rem; }

/* "Sem informação" of an old project: a dashed box, not an alert */
.sg-topo-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px dashed var(--sg-border-strong);
    border-radius: var(--sg-radius-md);
    background: var(--sg-surface-sunken);
    color: var(--sg-text);
}
.sg-topo-empty > .bi { font-size: 1.25rem; color: var(--sg-text-muted); }
.sg-topo-empty[hidden] { display: none; }

/* One stage (a fieldset on the form, a section on the page) */
.sg-topo-stage {
    min-width: 0;
    margin: 0 0 1rem;
    padding: 1rem 1.25rem 1.25rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-lg);
}
.sg-topo-stage:last-child { margin-bottom: 0; }
.sg-topo-stage__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    float: none;
    width: auto;
    margin: 0 0 .85rem;
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--sg-text);
}
.sg-topo-stage__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--sg-radius-pill);
    background: var(--sg-surface-sunken);
    border: 1px solid var(--sg-border-strong);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* Facts of a stage on the page: label (eyebrow) over value, in a fluid grid */
.sg-topo-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .75rem 1rem;
    margin: 0 0 .75rem;
}
.sg-topo-facts__wide { grid-column: 1 / -1; }
.sg-topo-facts dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-text-muted); }
.sg-topo-facts dd { margin: .15rem 0 0; overflow-wrap: anywhere; }
.sg-topo-obs { margin: 0 0 .75rem; padding: .75rem .9rem; border-radius: var(--sg-radius-md); background: var(--sg-surface-sunken); overflow-wrap: anywhere; }

/* Files: "Remover" beside each one (loss: tijolo only when chosen) */
.sg-topo-remove {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .6rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-sm);
    font-size: 0.8125rem;
    color: var(--sg-text-muted);
    cursor: pointer;
    white-space: nowrap;
}
.sg-topo-remove:hover { border-color: var(--sg-border-strong); color: var(--sg-text); }
.sg-topo-file--removed .sg-file { opacity: .6; border-style: dashed; }
.sg-topo-file--removed .sg-file__name { text-decoration: line-through; }
.sg-topo-file--removed .sg-topo-remove { border-color: var(--sg-danger-100); color: var(--sg-danger-700); }
.sg-topo-file-error { margin-top: .35rem; font-size: 0.8125rem; font-weight: 600; color: var(--sg-danger-700); }

/* Testes: one box per type, its laudo under it */
.sg-topo-tests { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.sg-topo-test { padding: .65rem .85rem; border: 1px solid var(--sg-border); border-radius: var(--sg-radius-md); }
.sg-topo-test__laudo { margin-top: .5rem; padding-left: 1.5rem; }
.sg-topo-test__laudo[hidden] { display: none; }
.sg-topo-test__name { margin: 0 0 .35rem; font-weight: 600; }
.sg-topo-test__name:only-child { margin-bottom: 0; }
.sg-topo-na { margin-top: .85rem; padding-top: .85rem; border-top: 1px dashed var(--sg-border); }

/* Phones: the four tabs in two columns (no sideways scroll), each label may wrap */
@media (max-width: 575.98px) {
    .sg-eng-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
    .sg-eng-tabs .nav-item { min-width: 0; }
    .sg-eng-tabs .nav-link { width: 100%; flex-wrap: wrap; padding: .55rem .6rem; font-size: 0.8125rem; text-align: left; }
    .sg-topo-stage { padding: .85rem .85rem 1rem; }
    .sg-topo-test__laudo { padding-left: 0; }
    /* A file takes the whole width; "Remover" goes under it, on the right */
    .sg-topo-file { flex-wrap: wrap; }
    .sg-topo-file > .sg-file { flex-basis: 100%; }
    .sg-topo-file .sg-filelist__actions { flex-direction: row; margin-left: auto; }
}
@media print {
    .sg-topo-remove, .sg-topo-empty .btn { display: none !important; }
}

/* ==========================================================================
   "Cadastrado por / Última alteração" (DESIGN.md §44 — ultima-alteracao)
   The line at the foot of every record page and edit form, for everyone:
   views/partials/ultima_alteracao.php and contatos.js registroLine().
   Discreet: muted text (5,44:1 on white, 5,0:1 on the canvas, measured in
   tests/contrast.php), the names in 600. Parts wrap whole at 390 px; the
   text is never cut. Screen only (d-print-none): papers name users by ID.
   ========================================================================== */
.sg-registro {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem 1.1rem;
    margin: 1rem 0 0;
    overflow: hidden; /* clips the "·" of a part that wrapped to the start of a line */
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--sg-text-muted);
}
.sg-registro__icone { flex: none; margin-right: -.6rem; }
.sg-registro__parte { position: relative; min-width: 0; overflow-wrap: anywhere; }
/* The "·" between the parts sits in the gap, left of the second part: when
   the second part wraps, it falls outside the box and is clipped — never a
   dot dangling at a line end */
.sg-registro__parte + .sg-registro__parte::before {
    content: "·";
    position: absolute;
    left: -.8rem;
    width: .5rem;
    text-align: center;
}
.sg-registro__nome { font-weight: 600; }
.sg-registro time { font-variant-numeric: tabular-nums; }
.sg-registro time[title] { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
/* Inside a Contatos card: under a thin rule, a step smaller */
/* Under a page title (the history page) */
.page-header .sg-registro { margin-top: .5rem; }
.sg-registro--card { margin: 0; padding-top: .55rem; border-top: 1px solid var(--sg-border); font-size: 0.75rem; }
/* One part per line on a phone and inside a card (narrow): no icon, no dot */
@media (max-width: 575.98px) {
    .sg-registro { flex-direction: column; gap: .15rem; }
    .sg-registro__icone { display: none; }
}
.sg-registro--card { flex-direction: column; gap: .1rem; }
.sg-registro--card .sg-registro__icone { display: none; }

/* ==========================================================================
   Topografia: folha "Imprimir topografia e testes" (28/09/2026 —
   topografia-extras; DESIGN.md §46 "Lembretes, painel e impressão")
   views/engenharia/imprimir_topografia.php. The report styles (.sg-crel-*)
   do the boxes, fields and tables; this block only lays the fields out in
   two columns and draws the two signature lines (name printed under each).
   Ink tones only: a document, no colour. Measured (Chrome PDF): a usual
   project 1 page; the longest (2 × 3.000-character observations, 12
   people per stage, 18 files) 2 pages.
   ========================================================================== */
.sg-topo-print__campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
}
.sg-topo-print__largo { grid-column: 1 / -1; }
.sg-topo-print__texto { white-space: pre-line; overflow-wrap: anywhere; }
.sg-topo-print__pessoa { display: inline-block; margin-right: 12px; }
.sg-topo-print__obs { padding: 1px 0; border-bottom: 1px solid var(--sg-border); }
.sg-topo-print__obs p { margin: 0; }
.sg-topo-print__assinaturas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 28px 0 0;
    break-inside: avoid;
}
.sg-topo-print__assinatura { min-width: 0; text-align: center; }
.sg-topo-print__linha { border-top: 1px solid var(--sg-ink-900); }
.sg-topo-print__nome { margin: 4px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.sg-topo-print__papel { margin: 0; color: var(--sg-text-muted); font-size: .9em; }
@media (max-width: 575.98px) {
    .sg-topo-print__campos,
    .sg-topo-print__assinaturas { grid-template-columns: minmax(0, 1fr); }
}
@media print {
    /* A long section may continue on the next page (two A4 pages even for
       the longest case); its title never stays alone at a page's foot
       (.sg-crel-secao__titulo) and a field line never splits */
    .sg-topo-print__secao .sg-crel-campo:not(.sg-topo-print__largo) { break-inside: avoid; }
    .sg-topo-print__campos,
    .sg-topo-print__assinaturas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sg-topo-print__linha { border-top-color: #000; }
    .sg-topo-print__obs { border-bottom-color: #ccc; }
}

/* ==========================================================================
   Topografia — conferência visual (28/09/2026 — topografia-conferir-visual;
   DESIGN.md §48). Fixes measured in Chrome at 1280, 390 and 320 px on the
   topography screens (list, project page, form, printed sheet). The blocks
   above ("Engenharia: abas…", "Topografia: folha…") stay as they were;
   this one comes after them and wins where it says so.
   ========================================================================== */

/* A chip that wraps (tests done: "Absorção do solo, Percolação, Sondagem,
   Sondagem SPT") is a rounded box with the symbol on its first line: the
   pill radius drew a four-line chip as an ellipse with the ✓ halfway down
   its side. A one-line chip (22 px high) keeps the same pill shape. */
.sg-topo-chip { align-items: baseline; border-radius: 11px; }

/* List and city page column: the two stage chips always share the first
   line and the tests go under them, so every row has the same shape. At
   10rem the widest pair ("— Levant." + "◐ Desenho", 166 px) did not fit and
   rows broke in different places (two or three lines). A stage chip never
   breaks inside ("◐ Desen/ho"); the tests chip may wrap. */
.sg-topo-chips { min-width: 10.5rem; }
.sg-topo-chips > .sg-topo-chip { padding-inline: .4rem; }
.sg-topo-chips > .sg-topo-chip:not(:nth-child(3)):not(.sg-topo-chip--none) { white-space: nowrap; }

/* Form: the stage title sits INSIDE its box, as on the project page. With
   float: none the legend sat on the top border (the fieldset notch), the
   number circle crossed by the line. */
fieldset.sg-topo-stage > legend.sg-topo-stage__title { float: left; width: 100%; }
fieldset.sg-topo-stage > legend.sg-topo-stage__title + * { clear: left; }

/* The quick filter "Topografia": two columns of the bar from 768 px, so
   "Etapa parada há 15 dias ou mais" shows whole (at 214 px it read "Etapa
   parada há 15 dias"). The same rule as .sg-filter__field--wide. */
@media (min-width: 768px) {
    .sg-filter__field:has(#sgFilter-engenharia-topografia) { grid-column: span 2; }
}

@media (max-width: 575.98px) {
    /* Tabs: icon, label and pill flow as text. As a wrapping flex row the
       icon sat alone on one line, the label on two more and the pill on a
       fourth (113 px high next to a 40 px neighbour); now 74 px, and both
       tabs of a row have the same height (the active underline lines up). */
    .sg-eng-tabs .nav-item { display: flex; }
    .sg-eng-tabs .nav-link { display: block; align-self: stretch; line-height: 1.35; }
    .sg-eng-tabs .nav-link > .bi { margin-right: .3rem; }
    .sg-eng-tabs .nav-link > .sg-tab-pill { margin-left: .15rem; vertical-align: .08em; }

    /* Page: the dates of a stage two by two (one per row made a 3-date
       stage 170 px tall at 390 px) */
    .sg-topo-facts { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }

    /* File fields: the button on top, the "Nenhum arquivo escolhido" line
       under it. Side by side the browser cut the text in the middle
       ("Nenh…lhido" at 390 px; only "N" in a laudo at 320 px). */
    .sg-topo-stage input[type="file"].form-control { font-size: .8125rem; }
    .sg-topo-stage input[type="file"].form-control::file-selector-button {
        display: block;
        width: calc(100% + 1.5rem);
        margin: -.375rem -.75rem .375rem;
        border-width: 0 0 var(--bs-border-width);
        border-radius: 0;
    }
    .sg-topo-test { padding: .6rem .65rem; }
}

/* --- The printed sheet (views/engenharia/imprimir_topografia.php) -------- */
/* People: "Irailton · Topógrafo, Mario, José Sátiro" — separated by commas
   in the page itself; with spaces only, "Mario José Sátiro" read as one name */
.sg-topo-print__pessoa { display: inline; margin-right: 0; }
/* Observations: a ruled area — the system's text, then lines to write by
   hand (four while the stage is open, two for a closed stage without text,
   one after a text). Real borders: a repeating-gradient background came out
   of Chrome's PDF as a grey band, not lines. */
.sg-topo-print__obs { border-bottom: 0; }
.sg-topo-print__pauta > span { display: block; height: 1.8em; border-bottom: 1px solid var(--sg-border-strong); }
/* An empty date or people field of an open stage: its underline is a line
   to write on (no "—"), a little taller */
.sg-topo-print__branco { min-height: 1.9em; }
/* The desenho has no visit date: Início starts a row, so Início and
   Conclusão sit side by side in both stages */
.sg-topo-print__novalinha { grid-column-start: 1; }
/* Place and date to fill, then the two signatures (room to sign above the line) */
.sg-topo-print__fecho { margin: 20px 0 0; break-inside: avoid; }
.sg-topo-print__fecho .sg-topo-print__assinaturas { margin-top: 40px; }
.sg-topo-print__local { margin: 0; }
.sg-topo-print__preencher { display: inline-block; height: 1em; border-bottom: 1px solid var(--sg-ink-900); vertical-align: baseline; }
.sg-topo-print__preencher--local { width: 16em; max-width: 55%; }
.sg-topo-print__preencher--data { width: 7em; }

/* On a phone screen, the tests and files tables become one block per row
   (the name on its line, then stage · size · date). As tables the file
   names broke every few letters ("Levanta/mento", "Fotos_d/o_marc") in a
   55 px column, and a long laudo name pushed the table out of the paper. */
@media screen and (max-width: 575.98px) {
    .sg-topo-print__linhas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .sg-topo-print__linhas,
    .sg-topo-print__linhas tbody,
    .sg-topo-print__linhas tr { display: block; width: 100%; min-width: 0; }
    .sg-topo-print__linhas tr { padding: 4px 0; border-bottom: 1px solid var(--sg-border); }
    .sg-topo-print__linhas td { display: inline; padding: 0; border: 0; color: var(--sg-text-muted); }
    .sg-topo-print__linhas td:first-child { display: block; color: var(--sg-text); font-weight: 600; }
    .sg-topo-print__linhas td + td + td::before { content: " · "; }
    /* A narrower label column: the value keeps room at 320 px */
    .sg-topo-print__secao .sg-crel-campo { grid-template-columns: 7.5em minmax(0, 1fr); }
}
@media print {
    .sg-topo-print__pessoa { white-space: nowrap; }
    .sg-topo-print__secao .sg-topo-print__branco { border-bottom-color: #8A8A8A; }
    .sg-topo-print__pauta > span { border-bottom-color: #8A8A8A; }
    .sg-topo-print__preencher { border-bottom-color: #000; }
}

/* ── Produtividade da equipe no Dashboard (DESIGN.md "Produtividade no Dashboard") ──
   views/dashboard/index.php #dashProdutividade: the ranking is the page's
   partial (views/produtividade/_ranking.php, .sg-rank). Only measured pairs:
   text on surface (16,75:1), muted on surface (5,44:1) and on the footer's
   sunken (5,15:1). Counts in the text colour: they are counts, not states. */
.sg-dash-prod > .card-header { flex-wrap: wrap; }
/* The switch reload lands on this card: clear of the fixed top bar */
#dashProdutividade { scroll-margin-top: 76px; }
.sg-dash-prod__scope { margin: 0 0 1rem; font-size: 0.8125rem; line-height: 1.45; color: var(--sg-text-muted); }
.sg-dash-prod__label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; margin-bottom: .35rem; }
.sg-dash-prod__team { height: 100%; padding: 1rem; border: 1px solid var(--sg-border); border-radius: var(--sg-radius-md); }
.sg-dash-prod__total {
    margin-top: .15rem;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--sg-text);
    font-variant-numeric: tabular-nums;
}
.sg-dash-prod__hint { margin: .25rem 0 .75rem; font-size: 0.8125rem; color: var(--sg-text-muted); }
/* One line per module: the name wraps whole (never "…"), the number on the right */
.sg-dash-prod__mods {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: .15rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sg-dash-prod__mods > li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    padding: .3rem 0;
    border-bottom: 1px solid var(--sg-border);
    font-size: 0.875rem;
}
.sg-dash-prod__mod { min-width: 0; overflow-wrap: anywhere; color: var(--sg-text); }
.sg-dash-prod__n { font-weight: 800; color: var(--sg-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sg-dash-prod__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.sg-dash-prod__note { font-size: 0.8125rem; color: var(--sg-text-muted); }

/* ==========================================================================
   Fechamento — conferência visual (28/09/2026 — fechamento-conferir-visual;
   DESIGN.md §52). Fixes measured in Chrome at 1280, 390 and 320 px (read-
   only server, real data) on the screens of this round: Engenharia page,
   form and "Preencher topografia e testes", Dashboard, Auditoria, Usuários,
   Anexos ausentes, Configurações, Escritórios, city page, the print page.
   The blocks above stay as they were; this one comes last and wins where
   it says so.
   ========================================================================== */

/* Agenda (Dashboard): the days of the neighbouring months were muted at
   FullCalendar's opacity .3 — #CED3DA on white, 1,51:1. Now full opacity,
   weight 400 on the sunken tone: they still read "outside the month" (the
   background says it) and pass (muted / sunken 5,15:1). */
.fc .fc-daygrid-day.fc-day-other { background: var(--sg-surface-sunken); }
.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-top { opacity: 1; }
.fc .fc-day-other .fc-daygrid-day-number { font-weight: 400; }
/* Agenda title: "Setembro de 2026", not "Setembro De 2026" (capitalize
   raised every word); only the first letter goes up */
.fc .fc-toolbar-title { text-transform: none; }
.fc .fc-toolbar-title::first-letter { text-transform: uppercase; }

/* Record pages: a card header with only an icon and a text (Serviço,
   Ofício, Projeto, Licença, Prorrogação, Senha, Auditoria) had the icon at
   the left edge and the title pushed to the right edge (space-between
   between the icon and the bare text). The title now follows its icon. A
   header with any other element (span, button, badge) keeps its layout. */
.card-header:has(> .bi:first-child):not(:has(> :not(.bi))) { justify-content: flex-start; gap: 0; }

/* select2's empty label ("Todos", "Escolha o campo") was the framework's
   #6C757D (4,69:1) beside the native placeholders in text-muted (5,44:1):
   one grey for every empty field of the filter bar */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__placeholder { color: var(--sg-text-muted); }

/* Filter bar switch (Usuários: "Só usuários sem permissões"): a label that
   wraps kept its switch by the first line, higher than the switches beside
   it. The switch now sits by the LAST line, so every switch of the row and
   the value of the select beside them share one line. A one-line label is
   unchanged. */
.sg-filter__field--check .form-switch { display: flex; align-items: flex-end; gap: .5em; padding-left: 0; }
.sg-filter__field--check .form-switch .form-check-input { float: none; flex: none; margin: 0 0 .25em; }

/* Anexos ausentes: five kinds since Topografia e testes — at four per row
   the fifth card sat alone on a second row. From 1280 px the five share one
   row; the kind's name keeps two lines, so the five numbers line up (a two-
   line name — "Arquivos das cidades", "Topografia e testes" — pushed its
   number 14 px lower). Under 1280 px the layout is unchanged. */
@media (min-width: 1280px) {
    .row:has(> .col-xl-3 > .sg-anexo-stat) > .col-xl-3 { flex: 1 0 0%; width: auto; }
    .sg-anexo-stat .sg-eyebrow { min-height: 2lh; }
}

@media (max-width: 575.98px) {
    /* City page, key facts: one per line. In two columns (360–575 px) the
       CNPJ broke at its hyphen ("08.786.626/0001-" / "87") and the e-mail
       in the middle of a word */
    .sg-highlights { grid-template-columns: minmax(0, 1fr); }
    /* Key/value tables of a card (city page: Prefeitura, Prefeito,
       Contador): a long e-mail pushed the table out of the card and the
       page scrolled sideways at 320 px (359 px wide) */
    .card-body > .table-borderless td { overflow-wrap: anywhere; }
}

/* Print page, "Papel": three letterheads since SOLUFIRME — at 320 px the
   group ran past the screen (355 px, sideways scroll on every list's
   print). On a phone the group wraps under "Papel" when it does not fit,
   its buttons share the width. */
@media screen and (max-width: 575.98px) {
    .sg-impressao__papel { flex-wrap: wrap; row-gap: .35rem; }
    .sg-impressao__papel > .btn-group { flex: 1 1 auto; }
    .sg-impressao__papel > .btn-group > .btn { flex: 1 1 auto; padding-inline: .5rem; }
}

/* --------------------------------------------------------------------------
   Relatórios = espelho da lista (28/09/2026 — relatorios-espelho, DESIGN.md
   §"Relatórios = espelho da lista"). A saved filter is the person's report
   (its columns, order and search); the report open on a list shows its
   notice; the Relatórios page has three sections. Primary tone: a report is
   navigation, not a warning — the accent stays with deadlines.
   -------------------------------------------------------------------------- */

/* The report open on a list (views/partials/filter_bar.php): its name and actions */
.sg-relatorio {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .5rem .75rem;
    margin: 0 0 1rem;
    padding: .65rem .75rem;
    border: 1px solid var(--sg-primary-100);
    border-left: 3px solid var(--sg-primary-600);
    border-radius: var(--sg-radius-sm);
    background: var(--sg-primary-50);
}
.sg-relatorio__icon { flex: none; margin-top: .1rem; font-size: 1.125rem; color: var(--sg-primary-600); }
.sg-relatorio__texto { flex: 1 1 16rem; min-width: 0; }
.sg-relatorio__nome {
    margin: .1rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--sg-text);
    overflow-wrap: anywhere;
}
.sg-relatorio__dica { margin: .15rem 0 0; font-size: 0.8125rem; color: var(--sg-text); }
.sg-relatorio__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.sg-relatorio__acoes form { margin: 0; }
.sg-relatorio__acoes .btn-link { color: var(--sg-primary-700); }

/* Saved filters are reports now, with names like "Obras de escola acima de
   R$ 100 mil, maiores primeiro": the name wraps inside its chip, never cut
   with "…" (it also pushed the page past 320 px) */
.sg-filter__saved .sg-chips { min-width: 0; }
.sg-filter__saved .sg-chip__name {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* A report of the team among the saved-filter chips: people icon, read only */
.sg-chip--equipe { border-style: dashed; }
.sg-chip--equipe .sg-chip__star { color: var(--sg-primary-600); }

/* "Salvar filtro": the line that says the screen is kept too */
.sg-filter__relatorio { display: flex; gap: .4rem; align-items: flex-start; margin: 0 0 .75rem; color: var(--sg-text-muted); }
.sg-filter__relatorio .bi { color: var(--sg-primary-600); }

/* "Da equipe" badge (Relatórios page) */
.badge.sg-badge-equipe {
    background-color: var(--sg-primary-50);
    color: var(--sg-primary-700);
    border: 1px solid var(--sg-primary-100);
    font-weight: 600;
}

/* The Relatórios page: intro line and its three sections */
.sg-rel-intro { margin: .25rem 0 0; font-size: 0.875rem; color: var(--sg-text-muted); max-width: 48rem; }
.sg-rel-secao { margin: 0 0 2rem; }
.sg-rel-secao__cabeca { margin: 0 0 .85rem; }
.sg-rel-secao__cabeca .sg-eyebrow { margin: 0; }
.sg-rel-secao__titulo { margin: .1rem 0 0; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; }
.sg-rel-secao__dica { margin: .2rem 0 .75rem; font-size: 0.8125rem; color: var(--sg-text-muted); max-width: 48rem; }
.sg-rel-secao__cabeca .sg-rel-secao__dica { margin-bottom: 0; }
.sg-rel-sub {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 1.5rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.sg-rel-sub .bi { color: var(--sg-primary-600); }

/* One saved report: name, list, filters / columns / order in words, actions */
.sg-rel-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sg-rel-item {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    min-width: 0;
    padding: .9rem 1rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-lg);
    background: var(--sg-surface);
    box-shadow: var(--sg-shadow-sm);
}
.sg-rel-item__cabeca { display: flex; align-items: flex-start; gap: .75rem; }
.sg-rel-item__icone {
    flex: none;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sg-radius-md);
    font-size: 1.125rem;
    color: var(--sg-primary-600);
    background: var(--sg-primary-50);
}
.sg-rel-item__nome { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.sg-rel-item__nome a { color: var(--sg-text); text-decoration: none; }
.sg-rel-item__nome a:hover, .sg-rel-item__nome a:focus-visible { color: var(--sg-primary-700); text-decoration: underline; }
.sg-rel-item__modulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    margin: .15rem 0 0;
    font-size: 0.8125rem;
    color: var(--sg-text-muted);
}
.sg-rel-item__marca { display: inline-flex; align-items: center; gap: .25rem; color: var(--sg-accent-text); font-weight: 600; }
.sg-rel-item__dados { display: grid; gap: .35rem; margin: 0; font-size: 0.8125rem; }
.sg-rel-item__dados > div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .5rem; }
.sg-rel-item__dados dt {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sg-text-muted);
    padding-top: .1rem;
}
.sg-rel-item__dados dd { margin: 0; color: var(--sg-text); overflow-wrap: anywhere; }
.sg-rel-item__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: auto;
    padding-top: .65rem;
    border-top: 1px solid var(--sg-border);
}
.sg-rel-item__acoes form { margin: 0; }
@media (max-width: 575.98px) {
    .sg-rel-item__dados > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .sg-relatorio__acoes { flex: 1 1 100%; }
}

/* ==========================================================================
   Engenharia: cinco etapas (28/09/2026 — etapas-construir; DESIGN.md §46
   "Cinco etapas"). Topografia, Desenho, Levantamento (aba "Topografia e
   Levantamento"), Testes em campo e Relatório com ART (aba "Testes"). Only
   tokens already measured: muted text on surface, the company tag, the
   four chip tones. Comes after the topography blocks and wins where it says.
   ========================================================================== */
/* Who executes a stage, at the end of its title ("Executada por SOLUFIRME") */
.sg-topo-stage__by {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--sg-text-muted);
}
/* The test types of "Testes em campo": boxes side by side, wrapping */
.sg-topo-types-box { min-width: 0; margin: 0; padding: 0; border: 0; }
.sg-topo-types-box > legend { float: none; width: auto; font-size: inherit; }
.sg-topo-types { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.sg-topo-types .form-check { margin-bottom: 0; }

/* The list's column "Etapas": five marks in two lines — [Topo] [Desenho]
   [Levant.] over [Testes: SPT, Percolação] [ART]. A stage mark never breaks
   inside; only the tests' mark (its types) and a grey "sem informação"
   line may wrap. Every row has the same shape. */
.sg-topo-cell { min-width: 14.5rem; }
.sg-topo-chips { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .25rem; min-width: 14.5rem; }
.sg-topo-chips__linha { display: flex; flex-wrap: wrap; gap: .25rem; }
.sg-topo-chips__linha > .sg-topo-chip { padding-inline: .4rem; white-space: nowrap; }
.sg-topo-chips__linha > .sg-topo-chip--longo,
.sg-topo-chips__linha > .sg-topo-chip--none { white-space: normal; }

/* Printed sheet: the test types as boxes to tick; three signatures (the
   ISNEP sheet: levantamento, testes, relatório) share one row on paper */
.sg-topo-print__tipos { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.sg-topo-print__tipo { white-space: nowrap; }
@media print {
    .sg-topo-print__assinaturas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Paper: the owner's print model (compact, ~7.5 pt, two A4 pages at most) */
@media print {
    .sg-crel.sg-topo-print { font-size: 7.5pt; line-height: 1.3; }
    .sg-topo-print .sg-crel-tabela { font-size: 7.5pt; }
    .sg-topo-print .sg-topo-print__fecho .sg-topo-print__assinaturas { margin-top: 32px; }
}

/* --------------------------------------------------------------------------
   Contagem e totais em todo relatório (28/09/2026 — totais-contagem,
   DESIGN.md §54). Every report says how many records it has (top and end);
   value columns get a totals row the reader can switch off.
   - .sg-sem-totais on <html> (views/partials/totais_interruptor.php) hides
     every [data-sg-total] row, on screen AND on paper: the sheet follows the
     switch. !important beats the inline display of the summaries' tfoot.
   - .sg-totais-interruptor: the switch on the print toolbar (screen only);
     its note says when the totals cover more rows than the page shows.
   - The count lines: bold tabular figures in the table's own size.
   No new colour: text and muted text on the surface (tests/contrast.php).
   -------------------------------------------------------------------------- */
.sg-sem-totais [data-sg-total] { display: none !important; }
.sg-totais-interruptor { display: flex; flex-wrap: wrap; align-items: center; column-gap: .6rem; margin: 0; min-height: 0; }
.sg-totais-interruptor .form-check-input { flex: none; cursor: pointer; }
.sg-totais-interruptor .form-check-label { font-size: 0.875rem; font-weight: 600; color: var(--sg-text); cursor: pointer; }
.sg-totais-interruptor__nota { flex: 1 1 100%; font-size: 0.8125rem; color: var(--sg-text-muted); font-variant-numeric: tabular-nums; }
.sg-impressao__fim { margin: 6px 0 0; font-size: 8.5pt; font-weight: 700; font-variant-numeric: tabular-nums; break-before: avoid; page-break-before: avoid; }
.sg-relatorio__opcoes { margin: 0 0 1rem; }
.sg-relatorio__contagem { margin: 0 0 .5rem; font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sg-text); }
.sg-relatorio__contagem--fim { margin: .5rem 0 0; break-before: avoid; page-break-before: avoid; }
.sg-crel-tabela .sg-crel-total > th,
.sg-crel-tabela .sg-crel-total > td { border-top: 1.5px solid var(--sg-ink-900); border-bottom: 0; color: var(--sg-text); font-size: inherit; font-weight: 800; letter-spacing: 0; text-transform: none; }
.sg-crel-total { break-before: avoid; page-break-before: avoid; }
.sg-hist-page__fim { margin-top: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@media print {
    .sg-relatorio__contagem { font-size: 8.5pt; color: #000; }
    .sg-crel-tabela .sg-crel-total > th,
    .sg-crel-tabela .sg-crel-total > td { color: #000; border-top-color: #000; }
}

/* ── Produtividade no Dashboard: seletor de período no celular ──────────── */
.sg-dash-prod__periodo { width: auto; min-width: 11rem; max-width: 100%; }

/* ── Contatos: sino junto do nome de quem recebe os avisos ──────────────────
   Amber = attention (DESIGN.md §1); accent-text on the card surface is
   5.6:1 (icon needs 3:1). The "Recebe avisos" tag below repeats it in words. */
.sg-person__aviso { color: var(--sg-accent-text); margin-right: .375rem; font-size: .9em; vertical-align: -.05em; }

/* ── Variáveis em textos: {cidade}, {prefeito}, {data}… (28/09/2026 —
   variaveis-descricao, DESIGN.md §55) ──────────────────────────────────────
   The box under a long text field (views/partials/variaveis_texto.php,
   assets/js/variaveis-texto.js). Colour with meaning:
   - chips are actions → primary tonal (primary-700 on primary-50, 4.5:1+);
   - the preview is information → sunken surface with the 3px primary rule;
   - a value missing in some city blocks the save → danger-700 on danger-50;
   - an unknown {token} or a city typed by hand is attention → accent-text on
     accent-50 / on the sunken preview.
   Everything wraps (chips, names, long texts): no "…", no sideways scroll at
   320 px. Pairs measured in tests/contrast.php. */
.sg-var { margin-top: .5rem; min-width: 0; }
.sg-var__barra { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sg-var__rotulo {
    color: var(--sg-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.sg-var__chips { display: flex; flex-wrap: wrap; gap: .375rem; min-width: 0; }
.sg-var__chip {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .375rem;
    max-width: 100%;
    padding: .25rem .625rem;
    border: 1px solid var(--sg-primary-100);
    border-radius: var(--sg-radius-pill);
    background: var(--sg-primary-50);
    color: var(--sg-primary-700);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s var(--sg-ease), box-shadow .15s var(--sg-ease), transform .15s var(--sg-ease);
}
.sg-var__chip:hover { border-color: var(--sg-primary-500); box-shadow: var(--sg-shadow-sm); }
.sg-var__chip:active { transform: translateY(1px); }
.sg-var__chip:focus-visible { outline: 0; border-color: var(--sg-primary-500); box-shadow: var(--sg-focus-ring); }
.sg-var__chip-token { padding: 0; background: none; color: inherit; font-size: 0.8125rem; font-weight: 700; }
.sg-var__chip-nome { font-weight: 500; }
.sg-var__dica { margin: .375rem 0 0; font-size: 0.8125rem; color: var(--sg-text-muted); overflow-wrap: anywhere; }
.sg-var__status { margin: 0; font-size: 0.8125rem; color: var(--sg-text-muted); }
.sg-var__status:empty { display: none; }
.sg-var__previa {
    margin-top: .5rem;
    padding: .625rem .75rem;
    border: 1px solid var(--sg-border);
    border-left: 3px solid var(--sg-primary-500);
    border-radius: var(--sg-radius-sm);
    background: var(--sg-surface-sunken);
    min-width: 0;
}
.sg-var__previa-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; }
.sg-var__previa-titulo { font-size: 0.8125rem; color: var(--sg-text-muted); overflow-wrap: anywhere; }
.sg-var__previa-titulo strong { color: var(--sg-text); font-weight: 700; }
.sg-var__previa-mais { font-variant-numeric: tabular-nums; }
.sg-var__outra,
.sg-var__todas,
.sg-var__trocar { padding: 0; font-size: 0.8125rem; font-weight: 600; text-align: left; }
.sg-var__previa-texto { margin: .375rem 0 0; color: var(--sg-text); font-size: 0.9375rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.sg-var__falta { padding: 0 .2em; border-radius: 4px; background: var(--sg-danger-50); color: var(--sg-danger-700); font-weight: 700; }
.sg-var__desconhecida { padding: 0 .2em; border-radius: 4px; background: var(--sg-accent-50); color: var(--sg-accent-text); font-weight: 700; }
.sg-var__avisos { display: grid; gap: .25rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.sg-var__avisos[hidden] { display: none; }
.sg-var__aviso { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .375rem; font-size: 0.8125rem; font-weight: 600; }
.sg-var__aviso > .bi { flex: none; }
.sg-var__aviso > span { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.sg-var__aviso--erro { color: var(--sg-danger-700); }
.sg-var__aviso--info { color: var(--sg-accent-text); }
@media (prefers-reduced-motion: reduce) {
    .sg-var__chip { transition: none; }
    .sg-var__chip:active { transform: none; }
}
/* Phones: the chips show the token only (several per line); the full name
   stays in the chip's title and aria-label */
@media (max-width: 575.98px) {
    .sg-var__chip-nome { display: none; }
    .sg-var__chip { padding: .3125rem .625rem; }
}

/* ── Variáveis: "Ver todas as cidades" (prévia de todo o lote) ─────────────
   Every chosen city's final text; the ones that would be refused are marked
   with the loss tone (danger-50 background, text in the body colour). */
.sg-var__previa-acoes { display: inline-flex; flex-wrap: wrap; gap: 0 .25rem; }
.sg-var__lista {
    margin: .75rem 0 0; padding: 0; list-style: none; max-height: 20rem; overflow: auto;
    border: 1px solid var(--sg-border); border-radius: var(--sg-radius-sm, 8px); background: var(--sg-surface);
}
.sg-var__lista-item { padding: .5rem .75rem; border-bottom: 1px solid var(--sg-border); font-size: .875rem; line-height: 1.45; overflow-wrap: anywhere; color: var(--sg-text); }
.sg-var__lista-item:last-child { border-bottom: 0; }
.sg-var__lista-item--erro { background: var(--sg-danger-50); box-shadow: inset 3px 0 0 var(--sg-danger-500); }
.sg-var__lista-nota { font-weight: 600; color: var(--sg-danger-700); }

/* ==========================================================================
   Meu perfil (DESIGN.md §57 — meu-perfil): avatar com foto ou iniciais,
   atalho do usuário no menu e a tela do perfil. Bloco próprio: só classes
   .sg-avatar--*, .sg-sidebar__me, .sg-perfil-*, .sg-tema-opcao*,
   .sg-senha-regras* e .sg-user-cell*.
   ========================================================================== */
:root {
    /* Iniciais: oito matizes em ordem fixa (a ordem da paleta dos gráficos,
       escurecidas onde o branco não passava). A cor é a identidade da pessoa:
       sai do id (id % 8), não muda de uma tela para outra. Texto branco em
       peso 800 passa AA (4,5:1) em todas — medido em tests/contrast.php. */
    --sg-avatar-1: #0E7490;
    --sg-avatar-2: #8A5703;
    --sg-avatar-3: #12805C;
    --sg-avatar-4: #C8352A;
    --sg-avatar-5: #3F6FC4;
    --sg-avatar-6: #A2571A;
    --sg-avatar-7: #4A7A22;
    --sg-avatar-8: #B03A72;
}
.sg-avatar--c1 { background: var(--sg-avatar-1); }
.sg-avatar--c2 { background: var(--sg-avatar-2); }
.sg-avatar--c3 { background: var(--sg-avatar-3); }
.sg-avatar--c4 { background: var(--sg-avatar-4); }
.sg-avatar--c5 { background: var(--sg-avatar-5); }
.sg-avatar--c6 { background: var(--sg-avatar-6); }
.sg-avatar--c7 { background: var(--sg-avatar-7); }
.sg-avatar--c8 { background: var(--sg-avatar-8); }
.sg-avatar--foto { display: inline-block; padding: 0; object-fit: cover; background: var(--sg-surface-sunken); }
.sg-avatar--sm { width: 28px; height: 28px; font-size: 0.625rem; }
.sg-avatar--lg {
    width: 104px;
    height: 104px;
    font-size: 2.25rem;
    letter-spacing: 0;
    box-shadow: 0 0 0 4px var(--sg-surface), 0 0 0 5px var(--sg-border);
}

/* Menu: avatar + nome abrem o perfil; o ativo leva o filete do acento */
.sg-sidebar__me {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex: 1 1 auto;
    min-width: 0;
    margin: -.35rem;
    padding: .35rem;
    border-radius: var(--sg-radius-sm);
    color: inherit;
    text-decoration: none;
    transition: background-color .18s var(--sg-ease), box-shadow .18s var(--sg-ease);
}
.sg-sidebar__me:hover,
.sg-sidebar__me:focus-visible { background: rgba(255,255,255,.07); color: inherit; }
.sg-sidebar__me.active { background: rgba(255,255,255,.06); box-shadow: inset 3px 0 0 var(--sg-accent-500); }
.sg-sidebar__me .sg-avatar--foto { box-shadow: 0 0 0 2px rgba(255,255,255,.16); }

/* Perfil: identidade e foto */
.sg-perfil-id .card-body { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; }
.sg-perfil-id__foto { margin: .25rem 0 .75rem; }
.sg-perfil-id__nome { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.sg-perfil-id__email { margin: 0; font-size: 0.875rem; color: var(--sg-text-muted); overflow-wrap: anywhere; }
.sg-perfil-id__papel { margin-top: .25rem; color: var(--sg-accent-text); }
.sg-perfil-id__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1rem 0 .5rem; }
.sg-perfil-foto { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; }
.sg-perfil-foto .form-control { max-width: 16rem; }
.sg-perfil-status { margin: .5rem 0 0; font-size: 0.8125rem; font-weight: 600; color: var(--sg-text-muted); }
.sg-perfil-status:empty { display: none; }
.sg-perfil-status.is-ok { color: var(--sg-success-700); }
.sg-perfil-status.is-erro { color: var(--sg-danger-700); }
.sg-perfil-acessos { display: grid; gap: .375rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.sg-perfil-acessos__item { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 0.875rem; }

/* Perfil: tema — três cartões com uma miniatura da tela */
.sg-tema-opcoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.sg-tema-opcao {
    position: relative;
    display: grid;
    align-content: start;
    gap: .375rem;
    margin: 0;
    padding: .75rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-md);
    background: var(--sg-surface);
    cursor: pointer;
    transition: border-color .18s var(--sg-ease), box-shadow .18s var(--sg-ease);
}
.sg-tema-opcao:hover { border-color: var(--sg-border-strong); }
.sg-tema-opcao__input { position: absolute; top: .75rem; right: .75rem; opacity: 0; pointer-events: none; }
.sg-tema-opcao:has(.sg-tema-opcao__input:checked) { border-color: var(--sg-primary-600); box-shadow: 0 0 0 1px var(--sg-primary-600); }
.sg-tema-opcao:has(.sg-tema-opcao__input:focus-visible) { outline: 2px solid var(--sg-primary-500); outline-offset: 2px; }
.sg-tema-opcao:has(.sg-tema-opcao__input:checked) .sg-tema-opcao__nome { color: var(--sg-primary-700); }
/* The miniatures show each theme, so their colours are fixed (not tokens) */
.sg-tema-opcao__previa { display: flex; height: 56px; overflow: hidden; border: 1px solid var(--sg-border); border-radius: var(--sg-radius-sm); }
.sg-tema-opcao__barra,
.sg-tema-opcao__previa--light .sg-tema-opcao__barra { flex: 0 0 28%; background: #08121F; }
.sg-tema-opcao__linhas {
    flex: 1 1 auto;
    background:
        linear-gradient(#FFFFFF, #FFFFFF) 8px 8px / calc(100% - 16px) 14px no-repeat,
        linear-gradient(#FFFFFF, #FFFFFF) 8px 28px / 55% 18px no-repeat,
        #F3F6F8;
}
.sg-tema-opcao__previa--dark .sg-tema-opcao__barra { background: #050B14; }
.sg-tema-opcao__previa--dark .sg-tema-opcao__linhas {
    background:
        linear-gradient(#16283F, #16283F) 8px 8px / calc(100% - 16px) 14px no-repeat,
        linear-gradient(#16283F, #16283F) 8px 28px / 55% 18px no-repeat,
        #0D1B2C;
}
.sg-tema-opcao__previa--auto .sg-tema-opcao__linhas {
    background:
        linear-gradient(#FFFFFF, #FFFFFF) 8px 8px / calc(100% - 16px) 14px no-repeat,
        linear-gradient(#FFFFFF, #FFFFFF) 8px 28px / 55% 18px no-repeat,
        linear-gradient(135deg, #F3F6F8 50%, #0D1B2C 50%);
}
.sg-tema-opcao__nome { display: flex; align-items: center; gap: .375rem; font-weight: 700; color: var(--sg-text); }
.sg-tema-opcao__dica { font-size: 0.8125rem; line-height: 1.4; color: var(--sg-text-muted); }

/* Perfil: senha — regras conferidas enquanto digita */
.sg-perfil-senha { margin: 0; }
.sg-senha-regras { display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; margin: .75rem 0 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--sg-text-muted); }
.sg-senha-regras__item { display: inline-flex; align-items: center; gap: .375rem; }
.sg-senha-regras__item.is-ok { color: var(--sg-success-700); }
.sg-senha-regras__item.is-falha { color: var(--sg-danger-700); }
.sg-perfil-senha__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: 1rem; }
.sg-perfil-senha__rodape > p { flex: 1 1 16rem; }
.sg-perfil-senha__rodape > .btn { margin-left: auto; }
.sg-perfil-sair { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--sg-border); }
.sg-perfil-sair > summary { font-size: 0.875rem; font-weight: 600; color: var(--sg-primary-600); cursor: pointer; }
.sg-perfil-sair__form { margin-top: .75rem; }
.sg-perfil-sair__linha { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
.sg-perfil-sair__campo { flex: 1 1 14rem; min-width: 0; }

/* Perfil: avisos no aparelho (administrador geral) */
.sg-perfil-aparelho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    padding: .75rem 1rem;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-md);
    background: var(--sg-surface-sunken);
}
.sg-perfil-aparelho .sg-perfil-status { flex: 1 1 16rem; margin: 0; }
.sg-perfil-niveis { display: grid; gap: .625rem; }
.sg-perfil-nivel .form-text { margin-top: .125rem; }
.sg-perfil-silencio { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.sg-perfil-silencio > div { flex: 0 1 9rem; }

/* Usuários: foto ou iniciais ao lado do nome, na lista */
.sg-user-cell { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.sg-user-cell__texto { min-width: 0; }

@media (max-width: 767.98px) {
    .sg-tema-opcoes { grid-template-columns: 1fr; }
    .sg-tema-opcao { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: .75rem; }
    .sg-tema-opcao__previa { grid-row: span 2; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    .sg-sidebar__me,
    .sg-tema-opcao { transition: none; }
}

/* ==========================================================================
   Aplicativo instalável e avisos no aparelho (29/09/2026 — pwa-push)
   Bloco da barra lateral (views/partials/pwa_app.php + assets/js/pwa.js):
   "Instalar o SAGP" (só quando o navegador oferece, ou no iPhone com a ajuda)
   e, para o administrador geral, "Avisos no aparelho". Sobre o cromo escuro,
   no desenho dos itens do menu. Estado com significado: jade = ligados,
   tijolo claro = bloqueados, neutro = desligados.
   ========================================================================== */
.sg-app {
    display: grid;
    gap: 2px;
    margin: 0 .6rem;
    padding-top: .5rem;
    border-top: 1px solid rgba(255,255,255,.08);
}
.sg-app__btn {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    padding: .6rem .8rem;
    border: 0;
    border-radius: var(--sg-radius-md);
    background: transparent;
    color: rgba(230,237,245,.74);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    transition: background-color .16s var(--sg-ease), color .16s var(--sg-ease);
}
.sg-app__btn i { font-size: 1.05rem; opacity: .85; }
.sg-app__btn:hover,
.sg-app__btn:focus-visible { background: var(--sg-ink-600); color: #fff; }
.sg-app__btn:focus-visible { outline: 2px solid var(--sg-accent-500); outline-offset: 2px; }
.sg-app__btn:disabled { opacity: .6; cursor: progress; }
.sg-app__label { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.sg-app__state {
    flex: 0 0 auto;
    padding: .1rem .5rem;
    border-radius: var(--sg-radius-pill);
    background: rgba(255,255,255,.08);
    color: rgba(230,237,245,.80);
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
}
.sg-app__btn[data-state="on"] i { color: #9BE3C4; opacity: 1; }
.sg-app__btn[data-state="on"] .sg-app__state { background: rgba(18,128,92,.30); color: #9BE3C4; }
.sg-app__btn[data-state="blocked"] .sg-app__state { background: rgba(200,53,42,.24); color: #F2A39C; }
.sg-app__help {
    margin: 0 .8rem .5rem 2.65rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgba(230,237,245,.80);
}
.sg-app__help strong { color: #fff; }
@media (prefers-reduced-motion: reduce) {
    .sg-app__btn { transition: none; }
}

/* ==========================================================================
   Tema escuro (29/09/2026 — tema-escuro; DESIGN.md "Tema escuro")
   A escolha é de cada pessoa (Meu perfil: Claro, Escuro, Automático). O
   layout grava em <html> data-theme="light|dark|auto" e data-bs-theme; no
   "Automático" um script de uma linha no <head> acompanha o aparelho antes
   da primeira pintura. Tudo o que muda de cor está nos tokens abaixo:
     1. papéis novos (preenchimento x texto) com os valores do tema claro;
     2. os tokens escuros — o mesmo bloco duas vezes (escolha "Escuro" e
        "Automático" com o aparelho no escuro), gerado de uma fonte só e
        conferido por tests/contrast.php;
     3. componentes que usavam um degrau com dois papéis passam a ler o papel;
     4. plugins com cor gravada na folha deles (Select2, Leaflet, SweetAlert2);
     5. o papel (.sg-papel, papel timbrado) é SEMPRE claro, e a impressão
        também: os tokens escuros valem só para a tela (@media screen).
   ========================================================================== */

/* 1. Papéis — no claro, exatamente os valores de antes */
:root {
    --sg-fill-primary: var(--sg-primary-600);
    --sg-fill-primary-hover: var(--sg-primary-700);
    --sg-fill-success-active: var(--sg-success-700);
    --sg-fill-danger-active: var(--sg-danger-700);
    --sg-fill-warning-active: var(--sg-accent-text);
    --sg-success-ink: var(--sg-success-500);
    --sg-danger-ink: var(--sg-danger-500);
    --sg-warning-ink: #7A4A02;
    --sg-glass: rgba(243,246,248,.92);
    --sg-veil: rgba(243,246,248,.7);
    --sg-row-hover: rgba(18,139,168,.045);
    --sg-btn-light-hover: #ECF0F4;
    --sg-field-bg: var(--sg-surface);
    --sg-field-disabled-bg: var(--sg-surface-sunken);
    --sg-chrome-edge: transparent;
    --sg-close-filter: none;
    --sg-map-client-fill: var(--sg-surface);
    --sg-map-ring: var(--sg-ink-900);
    --sg-map-hover: var(--sg-ink-900);
    --sg-chart-grid: #E3E9EF;
    --sg-chart-tooltip: #0D1B2C;
    --sg-backdrop-opacity: .45;
}

/* 2. Tokens escuros — só na tela; o papel impresso é sempre claro */
@media screen {
    :root[data-theme="dark"],
    :root[data-bs-theme="dark"] {
        color-scheme: dark;

        /* Superfície e texto: tinta em três degraus, do fundo ao cartão (o cromo
           da barra lateral continua o mais escuro, #08121F) */
        --sg-canvas: #0E1A2A;
        --sg-surface: #15243A;
        --sg-surface-sunken: #111E31;
        --sg-border: #26374F;
        --sg-border-strong: #3B5070;
        --sg-text: #E6EDF5;
        --sg-text-muted: #9CAEC4;

        /* Degraus tonais (-50 fundo, -100 borda) escurecidos; degraus de texto
           (-600, -700, -text) clareados. Os de preenchimento (-500) ficam. */
        --sg-primary-50:  #0F3244;
        --sg-primary-100: #1A4B60;
        --sg-primary-300: #2D7E97;
        --sg-primary-500: #1A96B5;
        --sg-primary-600: #4DB9D3;
        --sg-primary-700: #8AD5E7;
        --sg-accent-50:   #35270C;
        --sg-accent-100:  #5C4313;
        --sg-accent-500:  #F2A413;
        --sg-accent-600:  #D98C0A;
        --sg-accent-text: #F5BC4E;
        --sg-success-50:  #0E3328;
        --sg-success-100: #1C5944;
        --sg-success-500: #12805C;
        --sg-success-700: #62D0A3;
        --sg-danger-50:   #3B1817;
        --sg-danger-100:  #6B2C26;
        --sg-danger-500:  #C8352A;
        --sg-danger-700:  #FF9E94;

        --sg-shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
        --sg-shadow-md: 0 4px 12px rgba(0,0,0,.40), 0 2px 4px rgba(0,0,0,.25);
        --sg-shadow-lg: 0 16px 40px rgba(0,0,0,.55);
        --sg-focus-ring: 0 0 0 3px rgba(77,185,211,.6);

        /* Papéis: preenchimento com texto branco continua escuro (5,4:1) */
        --sg-fill-primary: #0E7490;
        --sg-fill-primary-hover: #0B5B72;
        --sg-fill-success-active: #0B5940;
        --sg-fill-danger-active: #8E241B;
        --sg-fill-warning-active: #8A5703;
        --sg-success-ink: #62D0A3;
        --sg-danger-ink: #FF9E94;
        --sg-warning-ink: #F5BC4E;
        --sg-glass: rgba(14,26,42,.9);
        --sg-veil: rgba(14,26,42,.72);
        --sg-row-hover: rgba(77,185,211,.07);
        --sg-btn-light-hover: #1C2D45;
        --sg-field-bg: #0F1B2C;
        --sg-field-disabled-bg: #1B2A40;
        --sg-chrome-edge: rgba(255,255,255,.07);
        --sg-close-filter: invert(1) grayscale(100%) brightness(200%);
        --sg-map-client-fill: #E6EDF5;
        --sg-map-ring: #08121F;
        --sg-map-hover: #FFFFFF;
        --sg-chart-grid: #26374F;
        --sg-chart-tooltip: #23384F;
        --sg-backdrop-opacity: .72;

        /* Mapa: no escuro a escala sobe para o claro (mais registros, mais luz) */
        --sg-map-1: #173F50;
        --sg-map-2: #1C5C71;
        --sg-map-3: #1F7E97;
        --sg-map-4: #3AA6C1;
        --sg-map-5: #8FD6E7;
        --sg-map-empty: #111E31;
        --sg-map-line: #33475F;

        /* Bootstrap: os valores literais da ponte e as variáveis que ele só
           redefine no próprio tema escuro */
        --bs-body-color-rgb: 230, 237, 245;
        --bs-body-bg-rgb: 21, 36, 58;
        --bs-emphasis-color-rgb: 230, 237, 245;
        --bs-secondary-color-rgb: 156, 174, 196;
        --bs-secondary-bg: #1B2A40;
        --bs-secondary-bg-rgb: 27, 42, 64;
        --bs-tertiary-color: #9CAEC4;
        --bs-tertiary-color-rgb: 156, 174, 196;
        --bs-tertiary-bg-rgb: 17, 30, 49;
        --bs-link-color-rgb: 77, 185, 211;
        --bs-link-hover-color-rgb: 138, 213, 231;
        --bs-border-color-translucent: rgba(255,255,255,.12);
        --bs-highlight-color: #E6EDF5;
        --bs-heading-color: inherit;
        --bs-light: #1B2A40;
        --bs-light-rgb: 27, 42, 64;
        --bs-form-valid-color: #62D0A3;
        --bs-form-invalid-color: #FF9E94;
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239CAEC4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.4%29'/%3e%3c/svg%3e");
        --dt-row-stripe: 255, 255, 255;
        --dt-row-hover: 255, 255, 255;
        --dt-column-ordering: 255, 255, 255;
        --dt-html-background: #15243A;
    }
}

@media screen and (prefers-color-scheme: dark) {
    :root[data-theme]:not([data-theme="light"]) {
        color-scheme: dark;

        /* Superfície e texto: tinta em três degraus, do fundo ao cartão (o cromo
           da barra lateral continua o mais escuro, #08121F) */
        --sg-canvas: #0E1A2A;
        --sg-surface: #15243A;
        --sg-surface-sunken: #111E31;
        --sg-border: #26374F;
        --sg-border-strong: #3B5070;
        --sg-text: #E6EDF5;
        --sg-text-muted: #9CAEC4;

        /* Degraus tonais (-50 fundo, -100 borda) escurecidos; degraus de texto
           (-600, -700, -text) clareados. Os de preenchimento (-500) ficam. */
        --sg-primary-50:  #0F3244;
        --sg-primary-100: #1A4B60;
        --sg-primary-300: #2D7E97;
        --sg-primary-500: #1A96B5;
        --sg-primary-600: #4DB9D3;
        --sg-primary-700: #8AD5E7;
        --sg-accent-50:   #35270C;
        --sg-accent-100:  #5C4313;
        --sg-accent-500:  #F2A413;
        --sg-accent-600:  #D98C0A;
        --sg-accent-text: #F5BC4E;
        --sg-success-50:  #0E3328;
        --sg-success-100: #1C5944;
        --sg-success-500: #12805C;
        --sg-success-700: #62D0A3;
        --sg-danger-50:   #3B1817;
        --sg-danger-100:  #6B2C26;
        --sg-danger-500:  #C8352A;
        --sg-danger-700:  #FF9E94;

        --sg-shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
        --sg-shadow-md: 0 4px 12px rgba(0,0,0,.40), 0 2px 4px rgba(0,0,0,.25);
        --sg-shadow-lg: 0 16px 40px rgba(0,0,0,.55);
        --sg-focus-ring: 0 0 0 3px rgba(77,185,211,.6);

        /* Papéis: preenchimento com texto branco continua escuro (5,4:1) */
        --sg-fill-primary: #0E7490;
        --sg-fill-primary-hover: #0B5B72;
        --sg-fill-success-active: #0B5940;
        --sg-fill-danger-active: #8E241B;
        --sg-fill-warning-active: #8A5703;
        --sg-success-ink: #62D0A3;
        --sg-danger-ink: #FF9E94;
        --sg-warning-ink: #F5BC4E;
        --sg-glass: rgba(14,26,42,.9);
        --sg-veil: rgba(14,26,42,.72);
        --sg-row-hover: rgba(77,185,211,.07);
        --sg-btn-light-hover: #1C2D45;
        --sg-field-bg: #0F1B2C;
        --sg-field-disabled-bg: #1B2A40;
        --sg-chrome-edge: rgba(255,255,255,.07);
        --sg-close-filter: invert(1) grayscale(100%) brightness(200%);
        --sg-map-client-fill: #E6EDF5;
        --sg-map-ring: #08121F;
        --sg-map-hover: #FFFFFF;
        --sg-chart-grid: #26374F;
        --sg-chart-tooltip: #23384F;
        --sg-backdrop-opacity: .72;

        /* Mapa: no escuro a escala sobe para o claro (mais registros, mais luz) */
        --sg-map-1: #173F50;
        --sg-map-2: #1C5C71;
        --sg-map-3: #1F7E97;
        --sg-map-4: #3AA6C1;
        --sg-map-5: #8FD6E7;
        --sg-map-empty: #111E31;
        --sg-map-line: #33475F;

        /* Bootstrap: os valores literais da ponte e as variáveis que ele só
           redefine no próprio tema escuro */
        --bs-body-color-rgb: 230, 237, 245;
        --bs-body-bg-rgb: 21, 36, 58;
        --bs-emphasis-color-rgb: 230, 237, 245;
        --bs-secondary-color-rgb: 156, 174, 196;
        --bs-secondary-bg: #1B2A40;
        --bs-secondary-bg-rgb: 27, 42, 64;
        --bs-tertiary-color: #9CAEC4;
        --bs-tertiary-color-rgb: 156, 174, 196;
        --bs-tertiary-bg-rgb: 17, 30, 49;
        --bs-link-color-rgb: 77, 185, 211;
        --bs-link-hover-color-rgb: 138, 213, 231;
        --bs-border-color-translucent: rgba(255,255,255,.12);
        --bs-highlight-color: #E6EDF5;
        --bs-heading-color: inherit;
        --bs-light: #1B2A40;
        --bs-light-rgb: 27, 42, 64;
        --bs-form-valid-color: #62D0A3;
        --bs-form-invalid-color: #FF9E94;
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239CAEC4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.4%29'/%3e%3c/svg%3e");
        --dt-row-stripe: 255, 255, 255;
        --dt-row-hover: 255, 255, 255;
        --dt-column-ordering: 255, 255, 255;
        --dt-html-background: #15243A;
    }
}

/* 3. Componentes que passam a ler o papel (no claro, o mesmo valor de antes) */
.btn-primary,
.btn-info {
    --bs-btn-bg: var(--sg-fill-primary);
    --bs-btn-border-color: var(--sg-fill-primary);
    --bs-btn-hover-bg: var(--sg-fill-primary-hover);
    --bs-btn-hover-border-color: var(--sg-fill-primary-hover);
}
.btn-info {
    --bs-btn-active-bg: var(--sg-fill-primary-hover);
    --bs-btn-active-border-color: var(--sg-fill-primary-hover);
}
.btn-success,
.btn-outline-success {
    --bs-btn-active-bg: var(--sg-fill-success-active);
    --bs-btn-active-border-color: var(--sg-fill-success-active);
}
.btn-outline-success { --bs-btn-color: var(--sg-success-ink); }
.btn-danger,
.btn-outline-danger {
    --bs-btn-active-bg: var(--sg-fill-danger-active);
    --bs-btn-active-border-color: var(--sg-fill-danger-active);
}
.btn-outline-danger { --bs-btn-color: var(--sg-danger-ink); }
.btn-warning {
    --bs-btn-active-bg: var(--sg-fill-warning-active);
    --bs-btn-active-border-color: var(--sg-fill-warning-active);
}
.btn-light { --bs-btn-hover-bg: var(--sg-btn-light-hover); }
.btn-close:not(.btn-close-white) { filter: var(--sg-close-filter); }

.pagination {
    --bs-pagination-active-bg: var(--sg-fill-primary);
    --bs-pagination-active-border-color: var(--sg-fill-primary);
}
.dropdown-menu { --bs-dropdown-link-active-bg: var(--sg-fill-primary); }
.list-group {
    --bs-list-group-active-bg: var(--sg-fill-primary);
    --bs-list-group-active-border-color: var(--sg-fill-primary);
}
.fc {
    --fc-event-bg-color: var(--sg-fill-primary);
    --fc-event-border-color: var(--sg-fill-primary);
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    background-color: var(--sg-fill-primary);
}
#toast-container > .toast-info    { background-color: var(--sg-fill-primary); }
#toast-container > .toast-warning { background-color: var(--sg-fill-warning-active); }

.sg-avatar { background: linear-gradient(140deg, var(--sg-fill-primary), var(--sg-fill-primary-hover)); }
.sg-brand__mark { background: linear-gradient(150deg, var(--sg-fill-primary), var(--sg-fill-primary-hover)); }
/* Barra lateral: no escuro, um filete separa o cromo do fundo do conteúdo */
.sg-sidebar { box-shadow: inset -1px 0 0 var(--sg-chrome-edge); }
.sg-topbar { background: var(--sg-glass); }
.spinner-overlay { background: var(--sg-veil); }
.table { --bs-table-hover-bg: var(--sg-row-hover); }
.alert-warning { --bs-alert-color: var(--sg-warning-ink); }

/* Texto e ícone em jade/tijolo: o 500 é preenchimento; no escuro o texto sobe
   para o degrau claro (-ink). No claro -ink = 500, como antes. */
.text-success { color: var(--sg-success-ink) !important; }
.text-danger  { color: var(--sg-danger-ink) !important; }
.empty-state > i.text-success { color: var(--sg-success-ink) !important; }
.sg-grid__empty--error > .bi,
.sg-map__status.is-error > .bi { color: var(--sg-danger-ink); }
.sg-meio__wa,
.sg-cfg-free > .bi,
.sg-esc-review__ok > .bi { color: var(--sg-success-ink); }
.sg-stat--success { --sg-stat-tone: var(--sg-success-ink); }
.sg-stat--danger  { --sg-stat-tone: var(--sg-danger-ink); }

/* Campos: fundo próprio (no claro, a superfície branca de sempre) */
.form-control,
.form-select { background-color: var(--sg-field-bg); }
.form-control:focus,
.form-select:focus { background-color: var(--sg-field-bg); }
.form-control:disabled,
.form-control[readonly] { background-color: var(--sg-field-disabled-bg); }
.modal-backdrop.show { opacity: var(--sg-backdrop-opacity); }

/* Mapa do Dashboard: anel e ponto da cidade cliente, contorno do hover */
.sg-map__canvas .sg-map__area:hover { stroke: var(--sg-map-hover); }
.sg-map__canvas .sg-map__client { fill: var(--sg-map-client-fill); stroke: var(--sg-map-ring); }
.sg-map__key-client { border-color: var(--sg-map-ring); background: var(--sg-map-client-fill); }
.sg-map__canvas.leaflet-container .leaflet-bar a { background-color: var(--sg-surface); }

/* SweetAlert2: o cartão e os remendos brancos do ícone de sucesso */
.swal2-popup { background: var(--sg-surface) !important; }
.swal2-icon.swal2-success [class^=swal2-success-circular-line],
.swal2-icon.swal2-success .swal2-success-fix { background-color: var(--sg-surface) !important; }

/* 4. Plugins com cor gravada na folha deles — só no escuro */
@media screen {
    :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection,
    :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
        background-color: var(--sg-field-bg);
        color: var(--sg-text);
    }
    :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single { background-image: var(--bs-form-select-bg-img); }
    :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
    :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice { color: var(--sg-text); }
    :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder,
    :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__message,
    :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group,
    :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--disabled { color: var(--sg-text-muted); }
    :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
        border-color: var(--sg-border-strong);
        background: var(--sg-surface-sunken);
    }
    :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__clear,
    :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__choice__remove { filter: invert(1) brightness(1.4); }
    :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
        background-color: var(--sg-surface);
        color: var(--sg-text);
    }
    :root[data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--disabled .select2-selection {
        background-color: var(--sg-field-disabled-bg);
        color: var(--sg-text-muted);
        border-color: var(--sg-border);
    }
    :root[data-bs-theme="dark"] .sg-map__canvas.leaflet-container .leaflet-bar a.leaflet-disabled {
        background-color: var(--sg-surface-sunken);
        color: var(--sg-text-muted);
    }
    :root[data-bs-theme="dark"] .sg-map__canvas .leaflet-control-attribution {
        background: rgba(21,36,58,.85);
        color: var(--sg-text-muted);
    }
    :root[data-bs-theme="dark"] .sg-map__canvas .leaflet-control-attribution a { color: var(--sg-primary-600); }
    :root[data-bs-theme="dark"] .swal2-close { color: var(--sg-text-muted); }
    :root[data-bs-theme="dark"] .swal2-close:hover { color: var(--sg-text); }
    :root[data-bs-theme="dark"] .swal2-input,
    :root[data-bs-theme="dark"] .swal2-textarea,
    :root[data-bs-theme="dark"] .swal2-select {
        background: var(--sg-field-bg);
        color: var(--sg-text);
        border-color: var(--sg-border-strong);
    }
    :root[data-bs-theme="dark"] .swal2-validation-message {
        background: var(--sg-surface-sunken);
        color: var(--sg-text);
    }
    /* O cabeçalho timbrado mostrado na tela (prévia da empresa) é papel */
    :root[data-bs-theme="dark"] .sg-timbrado--tela,
    :root[data-bs-theme="dark"] .sg-timbrado-fim--tela {
        padding: 12px;
        border-radius: var(--sg-radius-sm);
        background: #fff;
    }
}

/* 5. Papel: a folha na tela (.sg-papel) e o papel timbrado são sempre claros.
   Os tokens claros voltam dentro dela (cópia de :root, conferida por
   tests/contrast.php); no tema claro isto não muda nada. */
.sg-papel,
.sg-timbrado--tela,
.sg-timbrado-fim--tela {
    color-scheme: light;
    --sg-ink-900: #08121F;
    --sg-ink-800: #0D1B2C;
    --sg-ink-700: #16283F;
    --sg-ink-600: #23384F;
    --sg-primary-50:  #E8F5F9;
    --sg-primary-100: #C7E7F0;
    --sg-primary-300: #5FBACD;
    --sg-primary-500: #128BA8;
    --sg-primary-600: #0E7490;
    --sg-primary-700: #0B5B72;
    --sg-accent-50:   #FFF5E1;
    --sg-accent-100:  #F8DCA4;
    --sg-accent-500:  #F2A413;
    --sg-accent-600:  #C87F06;
    --sg-accent-text: #8A5703;
    --sg-success-50:  #E4F6EF;
    --sg-success-100: #A9DCC8;
    --sg-success-500: #12805C;
    --sg-success-700: #0B5940;
    --sg-danger-50:   #FDECEA;
    --sg-danger-100:  #F2B7B1;
    --sg-danger-500:  #C8352A;
    --sg-danger-700:  #8E241B;
    --sg-canvas: #F3F6F8;
    --sg-surface: #FFFFFF;
    --sg-surface-sunken: #F7F9FB;
    --sg-border: #E3E9EF;
    --sg-border-strong: #CBD6E2;
    --sg-text: #0F1E33;
    --sg-text-muted: #5A6B82;
    --sg-shadow-sm: 0 1px 2px rgba(15,30,51,.06), 0 1px 3px rgba(15,30,51,.05);
    --sg-shadow-md: 0 4px 12px rgba(15,30,51,.07), 0 2px 4px rgba(15,30,51,.04);
    --sg-shadow-lg: 0 16px 40px rgba(8,18,31,.14);
    --sg-focus-ring: 0 0 0 3px rgba(18,139,168,.18);
    --sg-fill-primary: var(--sg-primary-600);
    --sg-fill-primary-hover: var(--sg-primary-700);
    --sg-fill-success-active: var(--sg-success-700);
    --sg-fill-danger-active: var(--sg-danger-700);
    --sg-fill-warning-active: var(--sg-accent-text);
    --sg-success-ink: var(--sg-success-500);
    --sg-danger-ink: var(--sg-danger-500);
    --sg-warning-ink: #7A4A02;
    --sg-row-hover: rgba(18,139,168,.045);
    --sg-field-bg: var(--sg-surface);
    --sg-field-disabled-bg: var(--sg-surface-sunken);
    --bs-body-bg: var(--sg-surface);
    --bs-body-color: var(--sg-text);
    --bs-emphasis-color: var(--sg-text);
    --bs-secondary-color: var(--sg-text-muted);
    --bs-tertiary-bg: var(--sg-surface-sunken);
    --bs-border-color: var(--sg-border);
    --bs-link-color: var(--sg-primary-600);
    --bs-link-color-rgb: 14, 116, 144;
    --bs-link-hover-color: var(--sg-primary-700);
    --bs-link-hover-color-rgb: 11, 91, 114;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-code-color: var(--sg-primary-700);
    --bs-highlight-bg: var(--sg-accent-50);
    --bs-highlight-color: #212529;
    --bs-border-color-translucent: rgba(0,0,0,.175);
    color: var(--sg-text);
}

/* ==========================================================================
   Perfil, aplicativo e tema escuro — conferência visual (29/09/2026 —
   perfil-pwa-conferir-visual; complementa DESIGN.md §57–§59). Medido no
   Chrome, claro e escuro, a 1280, 390 e 320 px, em ~30 telas. Este bloco
   vem por último e só usa tokens já medidos em tests/contrast.php.
   ========================================================================== */

/* Iniciais na cor da pessoa. O bloco do tema escuro redeclara
   .sg-avatar { background: gradiente petróleo } depois do bloco do perfil,
   com a mesma força: as oito cores sumiam e todo mundo ficava petróleo (no
   claro e no escuro). Com duas classes a cor vence em qualquer ordem. */
.sg-avatar.sg-avatar--c1 { background: var(--sg-avatar-1); }
.sg-avatar.sg-avatar--c2 { background: var(--sg-avatar-2); }
.sg-avatar.sg-avatar--c3 { background: var(--sg-avatar-3); }
.sg-avatar.sg-avatar--c4 { background: var(--sg-avatar-4); }
.sg-avatar.sg-avatar--c5 { background: var(--sg-avatar-5); }
.sg-avatar.sg-avatar--c6 { background: var(--sg-avatar-6); }
.sg-avatar.sg-avatar--c7 { background: var(--sg-avatar-7); }
.sg-avatar.sg-avatar--c8 { background: var(--sg-avatar-8); }
.sg-avatar.sg-avatar--foto { background: var(--sg-surface-sunken); }

/* Nome no pé do menu e no resumo do usuário: inteiro, nunca "…". Um login
   em forma de e-mail (robertoclebio@easyweb.com.br) mostrava 120 de 226 px */
.sg-sidebar__me .sg-sidebar__user-name.text-truncate,
.text-truncate[data-summary="name"],
.text-truncate[data-summary="email"] {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Tela de entrada no escuro: o rótulo flutuante ganhava um "selo" com o
   fundo do cartão (--bs-body-bg) sobre o campo, que é mais escuro */
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-select ~ label::after { background-color: var(--sg-field-bg); }

/* SweetAlert2 com os botões dele (buttonsStyling, como as perguntas de
   "Avisos" da barra lateral): roxo #7066E0 no confirmar e anel roxo no
   foco. Aqui eles seguem os botões do sistema — confirmar em petróleo,
   "Desligar" em tijolo, fechar neutro. O SagpSwal (botões Bootstrap) não usa
   estas classes e não muda. */
.swal2-actions .swal2-styled {
    margin: 0;
    padding: .55rem 1.1rem;
    border-radius: var(--sg-radius-sm);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    background-image: none;
    transition: background-color .16s var(--sg-ease), box-shadow .16s var(--sg-ease);
}
.swal2-actions .swal2-styled.swal2-confirm { background-color: var(--sg-fill-primary); color: #fff; }
.swal2-actions .swal2-styled.swal2-confirm:hover { background-color: var(--sg-fill-primary-hover); background-image: none; }
.swal2-actions .swal2-styled.swal2-deny { background-color: var(--sg-danger-500); color: #fff; }
.swal2-actions .swal2-styled.swal2-deny:hover { background-color: var(--sg-fill-danger-active); background-image: none; }
.swal2-actions .swal2-styled.swal2-cancel {
    background-color: transparent;
    color: var(--sg-text);
    box-shadow: inset 0 0 0 1px var(--sg-border-strong);
}
.swal2-actions .swal2-styled.swal2-cancel:hover { background-color: var(--sg-btn-light-hover); background-image: none; }
.swal2-actions .swal2-styled:focus,
.swal2-actions .swal2-styled.swal2-cancel:focus { box-shadow: var(--sg-focus-ring); }
.swal2-actions .swal2-styled.swal2-cancel:focus { box-shadow: inset 0 0 0 1px var(--sg-border-strong), var(--sg-focus-ring); }

/* Meu perfil, miniatura "Automático": metade clara, metade escura, cada
   barra na cor da sua metade. O corte diagonal passava por cima das barras
   brancas e deixava um "dente" que parecia defeito */
.sg-tema-opcao__previa--auto .sg-tema-opcao__linhas {
    position: relative;
    background:
        linear-gradient(#FFFFFF, #FFFFFF) 8px 8px / calc(100% - 16px) 14px no-repeat,
        linear-gradient(#FFFFFF, #FFFFFF) 8px 28px / 55% 18px no-repeat,
        #F3F6F8;
}
.sg-tema-opcao__previa--auto .sg-tema-opcao__linhas::after {
    content: "";
    position: absolute;
    inset: 0 0 0 50%;
    /* the same two bars, continued on the dark half (55% + 8px of the whole
       = 10% + 8px of this half) */
    background:
        linear-gradient(#16283F, #16283F) 0 8px / calc(100% - 8px) 14px no-repeat,
        linear-gradient(#16283F, #16283F) 0 28px / calc(10% + 8px) 18px no-repeat,
        #0D1B2C;
}

/* Tabelas de chave/valor dos cartões (ficha da cidade: Prefeitura, Prefeito,
   Contador) em qualquer largura: um e-mail longo passava da borda do cartão
   a 1280 px. Só a coluna do valor quebra; o rótulo fica inteiro. */
.card-body > .table-borderless td:last-child { overflow-wrap: anywhere; }

/* Papel timbrado no celular: a margem de 1 cm da folha deixava 212 px para
   o conteúdo e a amostra passava da tela (347 px a 320). Na tela pequena a
   folha fica com a margem do cartão e a palavra longa da amostra quebra; a
   impressão não muda. */
@media screen and (max-width: 575.98px) {
    .sg-papel { padding: 12px; }
    .sg-papel__amostra td:last-child { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
    .swal2-actions .swal2-styled { transition: none; }
}

/* ==========================================================================
   Registro rápido de serviço (DESIGN.md §60 — registro-rapido, 29/09/2026)
   The round button in the bottom-right corner of every page and its panel
   (views/partials/registro_rapido.php, assets/js/registro-rapido.js).
   Colour with meaning: the button is an action (primary fill, white icon);
   the dot on it is "attention" (amber: a text not sent yet); the panel's
   answer is jade when saved and brick when refused. The tokens below point
   at the theme's roles, so the dark theme needs no copy of its own:
   --sg-primary-600 is the fill itself in the light theme (no visible edge)
   and a light petrol edge in the dark one (the fill alone gives 2.9:1 over a
   dark card; the edge gives 6.8:1). Measured in tests/contrast.php.
   ========================================================================== */
:root {
    --sg-rapido-size: 56px;
    --sg-rapido-gap: 24px;
    --sg-rapido-bg: var(--sg-fill-primary);
    --sg-rapido-bg-hover: var(--sg-fill-primary-hover);
    --sg-rapido-edge: var(--sg-primary-600);
    --sg-rapido-dot: var(--sg-accent-500);
    --sg-rapido-dot-ring: var(--sg-ink-900);
    --sg-rapido-z: 1035; /* above the sticky top bar (1020), below offcanvas (1045) and modals (1055) */
}

/* The end of the page is never under the button: the footer leaves room for it */
.sg-com-rapido .sg-footer {
    padding-bottom: calc(1.5rem + var(--sg-rapido-size) + var(--sg-rapido-gap));
}

.sg-rapido {
    position: fixed;
    right: calc(var(--sg-rapido-gap) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--sg-rapido-gap) + env(safe-area-inset-bottom, 0px));
    z-index: var(--sg-rapido-z);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none; /* only the button and the panel take clicks */
}
.sg-rapido > * { pointer-events: auto; }
.sg-rapido [hidden] { display: none !important; }
.sg-rapido--coberto,
body.swal2-shown .sg-rapido { display: none; }

.sg-rapido__botao {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--sg-rapido-size);
    height: var(--sg-rapido-size);
    padding: 0;
    border: 2px solid var(--sg-rapido-edge);
    border-radius: 50%;
    background: var(--sg-rapido-bg);
    color: #FFFFFF;
    font-size: 1.5rem;
    line-height: 1;
    box-shadow: var(--sg-shadow-lg);
    cursor: pointer;
    transition: transform .18s var(--sg-ease), background-color .18s var(--sg-ease), box-shadow .18s var(--sg-ease);
}
.sg-rapido__botao:hover { background: var(--sg-rapido-bg-hover); transform: translateY(-2px); }
.sg-rapido__botao:active { transform: translateY(0); }
.sg-rapido__botao:focus-visible { outline: 3px solid var(--sg-primary-500); outline-offset: 3px; }
.sg-rapido__icone--fechar { display: none; }
.sg-rapido--aberto .sg-rapido__icone { display: none; }
.sg-rapido--aberto .sg-rapido__icone--fechar { display: block; font-size: 1.25rem; }

/* A text typed and not sent yet (the draft): amber dot with a dark ring */
.sg-rapido__marca {
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--sg-rapido-dot);
    border: 3px solid var(--sg-rapido-dot-ring);
}

.sg-rapido__painel {
    width: min(400px, calc(100vw - 32px));
    max-height: calc(100vh - var(--sg-rapido-size) - 2 * var(--sg-rapido-gap) - 24px);
    max-height: calc(100dvh - var(--sg-rapido-size) - 2 * var(--sg-rapido-gap) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
    background: var(--sg-surface);
    color: var(--sg-text);
    border: 1px solid var(--sg-border-strong);
    border-radius: var(--sg-radius-lg);
    box-shadow: var(--sg-shadow-lg);
    transform-origin: bottom right;
    animation: sg-rapido-entra .18s var(--sg-ease);
}
@keyframes sg-rapido-entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.sg-rapido__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.sg-rapido__cabeca { min-width: 0; }
.sg-rapido__titulo {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sg-text);
}
.sg-rapido__campo + .sg-rapido__campo { margin-top: 12px; }
.sg-rapido__form .form-label { margin-bottom: 4px; }

/* Recent cities: one click picks the city */
.sg-rapido__recentes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.sg-rapido__chip {
    max-width: 100%;
    padding: 4px 10px;
    border: 1px solid var(--sg-border-strong);
    border-radius: var(--sg-radius-pill);
    background: var(--sg-surface-sunken);
    color: var(--sg-text);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: border-color .15s var(--sg-ease), background-color .15s var(--sg-ease), color .15s var(--sg-ease);
}
.sg-rapido__chip:hover { border-color: var(--sg-primary-600); color: var(--sg-primary-700); }
.sg-rapido__chip.is-on { background: var(--sg-primary-50); border-color: var(--sg-primary-600); color: var(--sg-primary-700); }
.sg-rapido__chip:focus-visible { outline: 2px solid var(--sg-primary-500); outline-offset: 2px; }

/* City combobox: the list sits under the field, in the panel's flow (never clipped) */
.sg-combo { position: relative; }
.sg-combo__lista {
    list-style: none;
    margin: 4px 0 0;
    padding: 4px;
    max-height: 13.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--sg-surface);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius-md);
}
.sg-combo__opcao {
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
    border-radius: var(--sg-radius-sm);
    cursor: pointer;
}
.sg-combo__opcao:hover,
.sg-combo__opcao.is-ativa { background: var(--sg-primary-50); }
.sg-combo__nome { font-size: 0.875rem; font-weight: 600; color: var(--sg-text); overflow-wrap: anywhere; }
.sg-combo__grupo { font-size: 0.75rem; color: var(--sg-text-muted); }
.sg-combo__opcao[aria-selected="true"] .sg-combo__nome { font-weight: 800; color: var(--sg-primary-700); }
.sg-combo__vazio { padding: 8px 10px; font-size: 0.8125rem; color: var(--sg-text-muted); }

.sg-rapido__nota { margin-top: 4px; font-size: 0.75rem; color: var(--sg-text-muted); }
.sg-rapido__linha {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--sg-text-muted);
}
.sg-rapido__quando { font-weight: 600; color: var(--sg-text); }
.sg-rapido__conta { font-variant-numeric: tabular-nums; }
.sg-rapido__conta--perto { color: var(--sg-accent-text); font-weight: 700; }

.sg-rapido__status { margin-top: 12px; font-size: 0.8125rem; }
.sg-rapido__status:empty { display: none; }
.sg-rapido__status--ok,
.sg-rapido__status--erro {
    padding: 8px 10px;
    border: 1px solid;
    border-radius: var(--sg-radius-sm);
    overflow-wrap: anywhere;
}
.sg-rapido__status--ok { background: var(--sg-success-50); border-color: var(--sg-success-100); color: var(--sg-success-700); }
.sg-rapido__status--erro { background: var(--sg-danger-50); border-color: var(--sg-danger-100); color: var(--sg-danger-700); }
.sg-rapido__status a { color: inherit; font-weight: 700; text-decoration: underline; }

.sg-rapido__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-top: 12px;
}
.sg-rapido__completo { font-size: 0.8125rem; font-weight: 600; }
.sg-rapido__dica { margin: 8px 0 0; font-size: 0.75rem; color: var(--sg-text-muted); }
.sg-rapido__toast-link { color: #FFFFFF; font-weight: 700; text-decoration: underline; }

/* Phones: a bottom sheet the width of the screen; its own X closes it */
@media (max-width: 575.98px) {
    :root { --sg-rapido-size: 52px; --sg-rapido-gap: 16px; }
    .sg-rapido__painel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-height: calc(100vh - 48px);
        max-height: calc(100dvh - 48px);
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        border-bottom: 0;
        border-radius: var(--sg-radius-lg) var(--sg-radius-lg) 0 0;
        transform-origin: bottom center;
    }
    .sg-rapido--aberto .sg-rapido__botao { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sg-rapido__botao,
    .sg-rapido__chip { transition: none; }
    .sg-rapido__botao:hover { transform: none; }
    .sg-rapido__painel { animation: none; }
}

/* ==========================================================================
   Registro rápido — ajustes da conferência visual (registro-rapido-visual,
   29/09/2026). Measured in Chrome at 1920/1280/390/320 px, light and dark,
   on Painel, Serviços, Novo serviço, ficha da cidade, Produtividade and
   Meu perfil:
   1. Keyboard focus on the panel's buttons ("Registrar" and the X): the
      Bootstrap ring alone (3px at 18%) measured 1.25:1 on the white panel,
      barely visible. They get the system's own outline (*:focus-visible:
      2px primary-500): 3.97:1 light, 4.51:1 dark.
   2. The panel never climbs over the sticky top bar (60px). With the city
      list open at 1280x800 it reached 36px from the top and covered half of
      the theme and notice buttons; on a 320x568 phone the sheet covered
      their bottom 12px. --sg-rapido-topo keeps the top bar + 8px free.
   3. The clock and "Hoje, 29/09/2026 às 14:32" had ~1px between them: a 4px
      gap, like the other icon + text pairs.
   ========================================================================== */
:root {
    --sg-rapido-topo: 68px; /* sticky top bar (60px) + 8px */
}

.sg-rapido .btn:focus-visible {
    outline: 2px solid var(--sg-primary-500);
    outline-offset: 2px;
}

/* Bottom edge of the panel = gap + button + 12px (the column's gap); its top stays under the top bar */
.sg-rapido__painel {
    max-height: calc(100vh - var(--sg-rapido-size) - var(--sg-rapido-gap) - 12px - var(--sg-rapido-topo));
    max-height: calc(100dvh - var(--sg-rapido-size) - var(--sg-rapido-gap) - 12px - var(--sg-rapido-topo));
}

.sg-rapido__quando {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

@media (max-width: 575.98px) {
    .sg-rapido__painel {
        max-height: calc(100vh - var(--sg-rapido-topo));
        max-height: calc(100dvh - var(--sg-rapido-topo));
    }
}