/* =====================================================================
   ELOISP - folha de estilo unica
   =====================================================================
   Organizacao:
     1. tokens (cores, espacos, tipografia)
     2. tema escuro e densidade
     3. reset e base
     4. layout (lateral, topo, conteudo)
     5. componentes
     6. utilitarios
     7. responsivo e impressao

   Decisoes:
     - Sem framework. O painel tem poucos padroes visuais repetidos muitas
       vezes; um CSS proprio de ~900 linhas carrega mais rapido que qualquer
       biblioteca e nao obriga etapa de build (deploy por FTP continua viavel).
     - `--brand` vem do servidor, por provedor. Todo o resto deriva dela.
     - Densidade `compact` existe porque suporte e financeiro trabalham em
       lista: mais linhas visiveis por tela e ganho real de produtividade.
   ===================================================================== */

/* ------------------------------------------------------------ 1. tokens */
:root {
    /* marca - sobrescrita inline pelo layout, por provedor */
    --brand: #1b64f2;
    --brand-accent: #0ea5a4;

    /* superficies */
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #f9fafb;
    --surface-3: #f1f3f5;
    --overlay: rgba(17, 24, 39, .45);

    /* texto */
    --text: #111827;
    --text-2: #4b5563;
    --text-3: #6b7280;
    --text-inverse: #ffffff;

    /* bordas */
    --border: #e4e7eb;
    --border-strong: #d1d5db;

    /* semantica */
    --success: #15803d;
    --success-bg: #ecfdf3;
    --warning: #b45309;
    --warning-bg: #fffbeb;
    --danger: #b42318;
    --danger-bg: #fef3f2;
    --info: #1b64f2;
    --info-bg: #eff6ff;
    --neutral: #4b5563;
    --neutral-bg: #f3f4f6;

    /* Texto sobre fundo semantico cheio (botao vermelho/verde). No tema
       escuro as cores semanticas clareiam, e branco deixa de ter contraste. */
    --semantic-ink: #ffffff;

    /* espacamento */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;

    /* raio e sombra */
    --r-sm: 5px;
    --r: 8px;
    --r-lg: 12px;
    --r-full: 999px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow: 0 2px 8px rgba(16, 24, 40, .08);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, .14);

    /* tipografia */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
    --fs-xs: 11.5px;
    --fs-sm: 12.5px;
    --fs: 14px;
    --fs-md: 15px;
    --fs-lg: 18px;
    --fs-xl: 22px;
    --fs-2xl: 28px;

    /* medidas de layout */
    --sidebar-w: 248px;
    --topbar-h: 56px;
    --row-h: 44px;
    --field-h: 38px;

    --transition: 140ms ease;
}

/* ------------------------------------------ 2. tema escuro e densidade */

/* `auto` segue o sistema; `dark`/`light` forcam a escolha do usuario */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0f1216;
        --surface: #171b21;
        --surface-2: #1d2229;
        --surface-3: #232931;
        --overlay: rgba(0, 0, 0, .6);

        --text: #e8eaed;
        --text-2: #b4bac3;
        --text-3: #8b929c;

        --border: #2a313a;
        --border-strong: #3a424d;

        --success: #4ade80;
        --success-bg: #0d2818;
        --warning: #fbbf24;
        --warning-bg: #2b1f06;
        --danger: #f87171;
        --danger-bg: #2d1113;
        --info: #7aa6ff;
        --info-bg: #11213d;
        --neutral: #b4bac3;
        --neutral-bg: #232931;
        --semantic-ink: #111827;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow: 0 2px 10px rgba(0, 0, 0, .45);
        --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6);
    }
}

:root[data-theme="dark"] {
    --bg: #0f1216;
    --surface: #171b21;
    --surface-2: #1d2229;
    --surface-3: #232931;
    --overlay: rgba(0, 0, 0, .6);

    --text: #e8eaed;
    --text-2: #b4bac3;
    --text-3: #8b929c;

    --border: #2a313a;
    --border-strong: #3a424d;

    --success: #4ade80;
    --success-bg: #0d2818;
    --warning: #fbbf24;
    --warning-bg: #2b1f06;
    --danger: #f87171;
    --danger-bg: #2d1113;
    --info: #7aa6ff;
    --info-bg: #11213d;
    --neutral: #b4bac3;
    --neutral-bg: #232931;
    --semantic-ink: #111827;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 2px 10px rgba(0, 0, 0, .45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6);
}

/* Densidade compacta: ~30% mais linhas por tela */
:root[data-density="compact"] {
    --fs: 13px;
    --fs-md: 13.5px;
    --sp-4: 12px;
    --sp-5: 18px;
    --row-h: 34px;
    --field-h: 32px;
}

/* ------------------------------------------------------ 3. reset e base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs);
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.3; }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
h4 { font-size: var(--fs); }
p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; font-size: inherit; }

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

.icon { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.skip-link {
    position: absolute; left: -9999px; top: var(--sp-2);
    background: var(--surface); padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r); box-shadow: var(--shadow); z-index: 200;
}
.skip-link:focus { left: var(--sp-2); }

::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); }

/* Scrollbar discreta - a aplicacao tem muitas listas longas */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------ 4. layout */
.app {
    display: grid;
    /* `minmax(0, 1fr)` e nao `1fr`: a coluna de conteudo nao pode crescer com
       o conteudo. Com `1fr` (que e `minmax(auto, 1fr)`) uma tabela larga
       empurra a grade inteira e a pagina ganha rolagem horizontal - o menu
       sai de vista e o topo desalinha. */
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    grid-template-rows: var(--topbar-h) 1fr;
    grid-template-areas: "sidebar topbar" "sidebar content";
    min-height: 100vh;
    min-height: 100dvh;
}

/* ---- lateral */
.sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--border);
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 40;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    height: var(--topbar-h);
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}

.sidebar__logo { max-height: 30px; max-width: 150px; object-fit: contain; }

.sidebar__mark {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    background: var(--brand); color: var(--brand-ink);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm); font-weight: 700;
    flex: 0 0 auto;
}

.sidebar__name {
    font-weight: 600;
    font-size: var(--fs-md);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar__close { display: none; margin-left: auto; background: none; border: 0; color: var(--text-2); cursor: pointer; }

.nav { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-2) var(--sp-2) var(--sp-4); }

.nav__group { border: 0; }
.nav__group[open] .nav__chevron { transform: rotate(180deg); }

.nav__group-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-3);
    cursor: pointer;
    border-radius: var(--r-sm);
    list-style: none;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.nav__group-title::-webkit-details-marker { display: none; }
.nav__group-title:hover { background: var(--surface-2); color: var(--text); }
.nav__chevron { margin-left: auto; transition: transform var(--transition); }

.nav__items { padding-bottom: var(--sp-2); }

.nav__item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 7px var(--sp-3) 7px 30px;
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: var(--fs);
    transition: background var(--transition), color var(--transition);
}
.nav__item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav__item.is-active {
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    color: var(--brand);
    font-weight: 600;
}
.nav__item--solo { padding-left: var(--sp-3); margin-bottom: var(--sp-2); }
.nav__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Selo "ELO": marca o recurso que o ELOISP entrega por conta propria,
   independente do ERP. Ajuda o usuario a entender de onde vem cada tela. */
.nav__tag {
    margin-left: auto;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 1px 4px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--brand-accent) 18%, transparent);
    color: var(--brand-accent);
}

.sidebar__footer {
    flex: 0 0 auto;
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}

.erp-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--fs-xs); font-weight: 600;
    padding: 3px 7px; border-radius: var(--r-full);
    max-width: 150px; overflow: hidden;
}
.erp-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-chip.is-ok { background: var(--success-bg); color: var(--success); }
.erp-chip.is-off { background: var(--warning-bg); color: var(--warning); }

.sidebar__version { font-size: var(--fs-xs); color: var(--text-3); }

.sidebar__scrim {
    position: fixed; inset: 0; background: var(--overlay);
    z-index: 35; border: 0; padding: 0;
}

/* ---- topo */
.topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0 var(--sp-4);
    padding-right: max(var(--sp-4), env(safe-area-inset-right));
    min-width: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 30;
}

.topbar__burger { display: none; background: none; border: 0; color: var(--text); cursor: pointer; padding: var(--sp-2); margin-left: -8px; }
.topbar__spacer { flex: 1 1 auto; }
.topbar__actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }

.topbar__icon {
    position: relative;
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: var(--r-sm);
    color: var(--text-2);
}
.topbar__icon:hover { background: var(--surface-2); color: var(--text); }

.badge-dot {
    position: absolute; top: 6px; right: 6px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 2px var(--surface);
}

.env-chip {
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em;
    padding: 2px 7px; border-radius: var(--r-full);
    background: var(--warning-bg); color: var(--warning);
}

/* ---- busca global */
.search { position: relative; flex: 1 1 auto; max-width: 620px; }

.search__icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }

.search__input {
    width: 100%;
    height: 36px;
    padding: 0 42px 0 34px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--fs);
}
.search__input::placeholder { color: var(--text-3); }
.search__input:focus { outline: none; border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.search__input::-webkit-search-cancel-button { display: none; }

.search__hint {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-family: var(--mono); font-size: 11px;
    padding: 1px 5px; border: 1px solid var(--border-strong);
    border-radius: 4px; color: var(--text-3); background: var(--surface);
}
.search__input:focus ~ .search__hint { display: none; }

.search__results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    max-height: min(70vh, 480px);
    overflow-y: auto;
    z-index: 60;
    padding: var(--sp-1);
}

.search__group { padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }

.search__item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--text);
    cursor: pointer;
}
.search__item { border: 1px solid transparent; }
.search__item:hover { background: var(--surface-2); text-decoration: none; }
/* Item marcado pelas setas: precisa saltar aos olhos, nao so um cinza */
.search__item.is-focused {
    background: color-mix(in srgb, var(--brand) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--brand) 45%, transparent);
    box-shadow: inset 3px 0 0 var(--brand);
    text-decoration: none;
}
.search__item.is-focused .search__item-icon { background: var(--brand); color: var(--brand-ink); }
.search__item.is-focused .search__item-title { color: var(--brand); }
.search__badge { font-weight: 700; flex: 0 0 auto; }
.search__item-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-2); flex: 0 0 auto; }
.search__item-body { min-width: 0; flex: 1 1 auto; }
.search__item-title, .search__item-sub { display: block; }
.search__item-title { font-weight: 600; font-size: var(--fs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search__item-sub { font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search__empty { padding: var(--sp-5); text-align: center; color: var(--text-3); font-size: var(--fs-sm); }
.search__meta { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); color: var(--text-3); border-top: 1px solid var(--border); display: flex; justify-content: space-between; }

/* ---- menu do usuario */
.usermenu { position: relative; }

.usermenu__trigger {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: 4px var(--sp-2) 4px 4px;
    border-radius: var(--r-full);
    cursor: pointer; list-style: none;
    color: var(--text-2);
}
.usermenu__trigger::-webkit-details-marker { display: none; }
.usermenu__trigger:hover { background: var(--surface-2); }

.avatar {
    width: 28px; height: 28px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--brand); color: var(--brand-ink);
    font-size: var(--fs-xs); font-weight: 700;
}
.avatar--lg { width: 44px; height: 44px; font-size: var(--fs); }

.usermenu__info { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.usermenu__info strong { font-size: var(--fs-sm); color: var(--text); }
.usermenu__info small { font-size: var(--fs-xs); color: var(--text-3); }

.usermenu__panel {
    position: absolute; right: 0; top: calc(100% + 6px);
    min-width: 230px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-1);
    z-index: 60;
}
.usermenu__header { padding: var(--sp-3); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-1); display: flex; flex-direction: column; gap: 2px; }
.usermenu__header strong { font-size: var(--fs); }
.usermenu__header small { font-size: var(--fs-sm); color: var(--text-3); }

.usermenu__panel a,
.usermenu__panel button {
    display: flex; align-items: center; gap: var(--sp-2);
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 0; background: none;
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: var(--fs);
    text-align: left;
    cursor: pointer;
}
.usermenu__panel a:hover, .usermenu__panel button:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.usermenu__panel .is-danger { color: var(--danger); }
.usermenu__panel form { margin: 0; border-top: 1px solid var(--border); margin-top: var(--sp-1); padding-top: var(--sp-1); }

/* ---- conteudo
   `env(safe-area-inset-*)` existe porque o layout declara `viewport-fit=cover`:
   sem isso o conteudo passa por baixo do recorte da tela no iPhone. */
.content {
    grid-area: content;
    padding: var(--sp-5);
    padding-right: max(var(--sp-5), env(safe-area-inset-right));
    max-width: 1680px;
    width: 100%;
    min-width: 0;
}

.page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap;
}
.page-header__text { min-width: 0; }
.page-header h1 { margin-bottom: 2px; }
.page-header__sub { color: var(--text-3); font-size: var(--fs-sm); }
.page-header__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* `minmax(0, 1fr)`: a coluna nao pode ser medida pelo conteudo. Na pagina de
   erro com APP_DEBUG=true o rastro da excecao nao quebra linha e esticava a
   coluna para ~820px - a tela de erro, que e onde o usuario ja esta perdido,
   abria rolando para o lado. */
.page-centered {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--sp-4);
    padding-left: max(var(--sp-4), env(safe-area-inset-left));
    padding-right: max(var(--sp-4), env(safe-area-inset-right));
    background: var(--bg);
}

/* ------------------------------------------------------- 5. componentes */

/* ---- botoes */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: var(--field-h);
    padding: 0 var(--sp-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

.btn--primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn--primary:hover { background: color-mix(in srgb, var(--brand) 88%, #000); }

.btn--danger { background: var(--danger); border-color: var(--danger); color: var(--semantic-ink); }
.btn--danger:hover { background: color-mix(in srgb, var(--danger) 88%, #000); }

.btn--success { background: var(--success); border-color: var(--success); color: var(--semantic-ink); }

.btn--ghost { background: none; border-color: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }

.btn--sm { height: 30px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }

/* Campo compacto para formulario dentro de celula de tabela - usado na
   conferencia da NF-e, onde cada linha tem seu proprio select. */
.select--sm, .input--sm { height: 30px; padding: 0 var(--sp-2); font-size: var(--fs-sm); }
.btn--lg { height: 44px; padding: 0 var(--sp-5); font-size: var(--fs-md); }
.btn--block { width: 100%; }
.btn--icon { width: var(--field-h); padding: 0; }

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* ---- cards */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
.card__header {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
    /* Titulo longo com acao ao lado apertava um ao outro em tela estreita */
    flex-wrap: wrap;
}
.card__title { font-size: var(--fs-md); font-weight: 600; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }

/* Cartao recolhivel: o <summary> com display:flex perde o marcador padrao,
   entao desenhamos o proprio triangulo. */
summary.card__header { cursor: pointer; list-style: none; }
summary.card__header::-webkit-details-marker { display: none; }
summary.card__header::after {
    content: ""; flex: 0 0 auto; margin-left: auto;
    width: 0; height: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 6px solid var(--text-3);
    transition: transform 150ms ease;
}
details[open] > summary.card__header::after { transform: rotate(180deg); }
.card__body { padding: var(--sp-5); }
.card__body--flush { padding: 0; }
.card__footer { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); font-size: var(--fs-sm); color: var(--text-3); }
.card--narrow { max-width: 420px; width: 100%; padding: var(--sp-6); }

/* ---- grid de widgets */
.widgets { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-4); }
.widget { grid-column: span 6; min-width: 0; }
.widget--full { grid-column: span 12; }
.widget--half { grid-column: span 6; }
.widget--quarter { grid-column: span 3; }
.widget--third { grid-column: span 4; }

@media (max-width: 1200px) {
    .widget--quarter { grid-column: span 6; }
}
@media (max-width: 860px) {
    .widget, .widget--half, .widget--quarter, .widget--third, .widget--full { grid-column: span 12; }
}

.widget__loading { display: grid; place-items: center; min-height: 110px; color: var(--text-3); font-size: var(--fs-sm); gap: var(--sp-2); }

/* Skeleton: a sensacao de velocidade importa tanto quanto o tempo real */
.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.3s ease-in-out infinite;
    border-radius: var(--r-sm);
    height: 12px;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Quem pediu menos movimento no sistema tem de valer para a aplicacao toda,
   nao so para o esqueleto de carregamento: a lateral desliza, o toast entra,
   a barra de progresso corre. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- KPI */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-4); }

.kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
    display: flex; flex-direction: column; gap: var(--sp-1);
    position: relative;
    overflow: hidden;
}
.kpi:hover { text-decoration: none; border-color: var(--border-strong); }
.kpi__label { font-size: var(--fs-sm); color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.kpi__value { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.kpi__hint { font-size: var(--fs-sm); color: var(--text-3); }
.kpi__icon { position: absolute; top: var(--sp-4); right: var(--sp-4); opacity: .18; }

.kpi--success .kpi__value { color: var(--success); }
.kpi--warning .kpi__value { color: var(--warning); }
.kpi--danger  .kpi__value { color: var(--danger); }

.trend { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-sm); font-weight: 600; }
.trend--up { color: var(--success); }
.trend--down { color: var(--danger); }
.trend--flat { color: var(--text-3); }

/* ---- tabelas */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); }

/* Ordenacao visivel so no celular, onde o cabecalho da tabela some */
.table-sort {
    display: none;
    align-items: center; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4) 0;
    font-size: var(--fs-sm); color: var(--text-3);
}
.table-sort .select { flex: 1 1 auto; }

.table { width: 100%; border-collapse: collapse; font-size: var(--fs); }

.table th {
    text-align: left;
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-3);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
.table td {
    padding: 0 var(--sp-4);
    height: var(--row-h);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }

.table--clickable tbody tr { cursor: pointer; }
/* `nowrap`: a coluna de valor e estreita e "R$ 6.860,00" quebrava entre o
   simbolo e o numero, o que destroi a leitura de uma coluna de dinheiro. */
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: var(--fs-sm); white-space: nowrap; }
.table td.center, .table th.center { text-align: center; }
.table td.tight { width: 1%; white-space: nowrap; }
.table .muted { color: var(--text-3); }
.table .strong { font-weight: 600; }

.th-sort { color: inherit; display: inline-flex; gap: 3px; }
.th-sort:hover { color: var(--brand); text-decoration: none; }

/* `max-width`: a celula de tabela com largura automatica cresce ate caber o
   texto, entao `.truncate` nunca cortava nada - a coluna "Chamado" chegava a
   500px, a tabela a 1300px e a lista rolava para o lado dentro do cartao.
   Com um teto, a reticencia volta a fazer o trabalho dela. */
.cell-stack { display: flex; flex-direction: column; line-height: 1.25; max-width: 38ch; }
.cell-stack small { color: var(--text-3); font-size: var(--fs-sm); }

/* ---- selos */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.6;
}
.badge--success { background: var(--success-bg); color: var(--success); }
.badge--warning { background: var(--warning-bg); color: var(--warning); }
.badge--danger  { background: var(--danger-bg);  color: var(--danger); }
.badge--info    { background: var(--info-bg);    color: var(--info); }
.badge--neutral { background: var(--neutral-bg); color: var(--neutral); }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dot--success { background: var(--success); }
.dot--warning { background: var(--warning); }
.dot--danger { background: var(--danger); }
.dot--info { background: var(--info); }
.dot--neutral { background: var(--neutral); }

/* ---- alertas */
.alert {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r);
    border: 1px solid transparent;
    margin-bottom: var(--sp-4);
    font-size: var(--fs);
}
.alert > .icon { margin-top: 2px; }
.alert__body { flex: 1 1 auto; min-width: 0; }
.alert__title { font-weight: 600; margin-bottom: 2px; }
.alert__close { margin-left: auto; background: none; border: 0; color: inherit; opacity: .6; cursor: pointer; padding: 0; }
.alert__close:hover { opacity: 1; }

.alert--success { background: var(--success-bg); color: var(--success); border-color: color-mix(in srgb, var(--success) 25%, transparent); }
.alert--warning { background: var(--warning-bg); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 25%, transparent); }
.alert--danger  { background: var(--danger-bg);  color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.alert--info    { background: var(--info-bg);    color: var(--info);    border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.alert--neutral { background: var(--neutral-bg); color: var(--text-2);  border-color: var(--border); }

/* ---- formularios */
.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-4); }
.field { grid-column: span 6; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field--full { grid-column: span 12; }
.field--third { grid-column: span 4; }
.field--quarter { grid-column: span 3; }
@media (max-width: 760px) { .field, .field--third, .field--quarter { grid-column: span 12; } }

.label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 4px; }
.label .req { color: var(--danger); }

.input, .select, .textarea {
    width: 100%;
    min-height: var(--field-h);
    padding: 7px var(--sp-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs);
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-3); color: var(--text-3); cursor: not-allowed; }
.input[aria-invalid="true"], .is-invalid { border-color: var(--danger); }
.textarea { min-height: 84px; resize: vertical; line-height: 1.5; }

.select {
    appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.hint { font-size: var(--fs-sm); color: var(--text-3); }
.error-text { font-size: var(--fs-sm); color: var(--danger); display: flex; align-items: center; gap: 4px; }

.input-group { display: flex; }
.input-group .input { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.input-group .btn { border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-left: -1px; }
.input-prefix {
    display: grid; place-items: center;
    padding: 0 var(--sp-3);
    border: 1px solid var(--border-strong);
    border-right: 0;
    border-radius: var(--r-sm) 0 0 var(--r-sm);
    background: var(--surface-2);
    color: var(--text-3);
    font-size: var(--fs-sm);
    white-space: nowrap;
}
.input-prefix + .input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.check { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: var(--fs); }
.check input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }

.switch { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.switch input { appearance: none; width: 36px; height: 20px; border-radius: var(--r-full); background: var(--border-strong); position: relative; cursor: pointer; transition: background var(--transition); flex: 0 0 auto; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform var(--transition); }
.switch input:checked { background: var(--brand); }
.switch input:checked::after { transform: translateX(16px); }

.form-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.form-actions--left { justify-content: flex-start; }

.fieldset { border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-4); margin: 0 0 var(--sp-4); }
.fieldset legend { padding: 0 var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }

/* ---- barra de filtros */
.filters {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    margin-bottom: var(--sp-4);
}
.filters .field { grid-column: unset; flex: 1 1 160px; min-width: 140px; }
.filters__actions { display: flex; gap: var(--sp-2); margin-left: auto; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-full);
    background: var(--surface);
    font-size: var(--fs-sm);
    color: var(--text-2);
    cursor: pointer;
}
.chip:hover { background: var(--surface-2); text-decoration: none; }
.chip.is-active { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

/* ---- paginacao */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; }
.pagination__info { font-size: var(--fs-sm); color: var(--text-3); }
.pagination__pages { display: flex; gap: 4px; }
.pagination__pages a, .pagination__pages span {
    min-width: 32px; height: 32px;
    display: grid; place-items: center;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--text-2);
    padding: 0 6px;
}
.pagination__pages a:hover { background: var(--surface-2); text-decoration: none; }
.pagination__pages .is-current { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.pagination__pages .is-disabled { opacity: .4; pointer-events: none; }

/* ---- estado vazio */
.empty { text-align: center; padding: var(--sp-7) var(--sp-5); color: var(--text-3); }
.empty__icon { width: 48px; height: 48px; margin: 0 auto var(--sp-4); display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--text-3); }
.empty__title { font-size: var(--fs-md); font-weight: 600; color: var(--text); margin-bottom: var(--sp-2); }
.empty__text { max-width: 420px; margin: 0 auto var(--sp-4); font-size: var(--fs-sm); }

/* ---- abas */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--sp-4); overflow-x: auto; }
.tab {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs); font-weight: 500;
    color: var(--text-3);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    background: none; border-top: 0; border-left: 0; border-right: 0;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.is-active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.tab__count { margin-left: 5px; font-size: var(--fs-xs); padding: 1px 6px; border-radius: var(--r-full); background: var(--surface-3); color: var(--text-3); }
.tab.is-active .tab__count { background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand); }

/* ---- lista de definicoes (detalhes de registro) */
.dl { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: var(--sp-2) var(--sp-4); font-size: var(--fs); }
.dl dt { color: var(--text-3); font-size: var(--fs-sm); }
.dl dd { margin: 0; color: var(--text); min-width: 0; word-break: break-word; }
.dl--inline { grid-template-columns: 1fr; gap: var(--sp-3); }
.dl--inline dt { margin-bottom: 1px; }

/* ---- linha do tempo */
.timeline { position: relative; padding-left: var(--sp-5); }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.timeline__item { position: relative; padding-bottom: var(--sp-4); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
    position: absolute; left: calc(-1 * var(--sp-5) + 4px); top: 3px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--border-strong);
}
.timeline__dot--success { border-color: var(--success); background: var(--success); }
.timeline__dot--warning { border-color: var(--warning); background: var(--warning); }
.timeline__dot--danger { border-color: var(--danger); background: var(--danger); }
.timeline__dot--info { border-color: var(--info); background: var(--info); }
.timeline__title { font-size: var(--fs); font-weight: 600; }
.timeline__meta { font-size: var(--fs-sm); color: var(--text-3); }
.timeline__text { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }

/* ---- barra de progresso */
.progress { height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.progress__bar { height: 100%; border-radius: var(--r-full); background: var(--brand); transition: width 300ms ease; }
.progress__bar--success { background: var(--success); }
.progress__bar--warning { background: var(--warning); }
.progress__bar--danger { background: var(--danger); }
/* Barra composta: segmentos somados lado a lado (recebido + aberto). */
.progress--stack { display: flex; }
.progress--stack .progress__bar { border-radius: 0; flex: 0 0 auto; }

/* ---- grafico de barras simples (sem biblioteca) */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding-top: var(--sp-3); }
.bars__col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; height: 100%; justify-content: flex-end; }
.bars__stack { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 2px; }
.bars__bar { width: 100%; border-radius: 3px 3px 0 0; background: var(--brand); min-height: 2px; transition: height 400ms ease; }
.bars__bar--muted { background: color-mix(in srgb, var(--brand) 25%, transparent); }
.bars__label { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.sparkline { width: 100%; height: 42px; display: block; }
.sparkline path { fill: none; stroke: var(--brand); stroke-width: 2; }
.sparkline .area { fill: color-mix(in srgb, var(--brand) 12%, transparent); stroke: none; }

/* ---- mapa (CTO) */
.map { height: min(70vh, 620px); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); position: relative; }
.map__legend {
    position: absolute; bottom: var(--sp-3); left: var(--sp-3);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); padding: var(--sp-3); font-size: var(--fs-sm);
    box-shadow: var(--shadow); z-index: 5;
}
.map__legend-item { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.map__legend-item:last-child { margin-bottom: 0; }

.cto-canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.cto-canvas:active { cursor: grabbing; }

/* ---- modal */
.modal { border: 0; padding: 0; background: transparent; max-width: min(620px, calc(100vw - 32px)); width: 100%; }
.modal::backdrop { background: var(--overlay); backdrop-filter: blur(2px); }
.modal__box { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.modal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.modal__header h2 { font-size: var(--fs-md); }
.modal__close { background: none; border: 0; color: var(--text-3); cursor: pointer; padding: 4px; }
.modal__close:hover { color: var(--text); }
.modal__body { padding: var(--sp-5); max-height: 65vh; overflow-y: auto; }
.modal__footer { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); background: var(--surface-2); }
.modal__footer:empty { display: none; }

/* ---- toasts */
.toasts {
    position: fixed;
    bottom: max(var(--sp-4), env(safe-area-inset-bottom));
    right: max(var(--sp-4), env(safe-area-inset-right));
    display: flex; flex-direction: column; gap: var(--sp-2);
    z-index: 300; max-width: 380px;
}
.toast {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    font-size: var(--fs);
    animation: toast-in 180ms ease;
}
.toast--success { border-left-color: var(--success); }
.toast--danger { border-left-color: var(--danger); }
.toast--warning { border-left-color: var(--warning); }
.toast__close { margin-left: auto; background: none; border: 0; color: var(--text-3); cursor: pointer; }
@keyframes toast-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

/* ---- tela 360 do cliente */
/* `minmax(0, 1fr)`: com `1fr` a coluna principal crescia ate caber a tabela
   mais larga (o historico de conexoes) e a ficha rolava para o lado. */
.c360 { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.c360 > * { min-width: 0; }
@media (max-width: 1100px) { .c360 { grid-template-columns: minmax(0, 1fr); } }

.c360__identity { display: flex; gap: var(--sp-3); align-items: flex-start; }

/* Equipamentos do cliente: marca e modelo em destaque, o resto em pares
   rotulo/valor compactos - cabe na coluna lateral da ficha. */
.asset { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.asset:last-child { border-bottom: 0; }
.asset__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-1); }
.asset__kind {
    font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-3);
}
.asset__brand { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.asset__facts { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--sp-3); margin: 0; font-size: var(--fs-sm); }
.asset__facts dt { color: var(--text-3); }
.asset__facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.asset__products { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); }
.asset__products li { display: flex; justify-content: space-between; gap: var(--sp-3); }

/* Historico de conexoes: um quadrado por dia. A cor diz de longe em que dia
   a conexao piorou - e o que o atendente olha antes de ler a tabela. */
.conn-strip { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; }
.conn-strip__day {
    display: inline-block; height: 18px; min-width: 6px; border-radius: 3px;
    background: var(--surface-3);
}
.flex .conn-strip__day { width: 10px; height: 10px; vertical-align: middle; }
.conn-strip__day--1 { background: color-mix(in srgb, var(--success) 55%, transparent); }
.conn-strip__day--2 { background: var(--warning); }
.conn-strip__day--3 { background: var(--danger); }

/* ---- migracao entre ERPs */
.migr-pair { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.migr-pair__side { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; }
.migr-pair__arrow { color: var(--text-3); }
.migr-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.migr-card__value { font-size: var(--fs-2xl); font-weight: 700; margin: var(--sp-2) 0; font-variant-numeric: tabular-nums; }
.migr-card__counts { display: flex; flex-wrap: wrap; gap: 4px; }
.migr-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.migr-filters .input { flex: 1 1 220px; }
.migr-filters .select { flex: 0 1 200px; }
.migr-sub { display: block; margin-top: 2px; }
.migr-danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }

/* ---- ficha 360 em abas */
.c360-tabs > .tabs { position: sticky; top: var(--topbar-h, 0); z-index: 5; background: var(--bg); }
.tab-panel[hidden] { display: none; }
/* Aba tecnica numa coluna so: conexao e sinal sobem para logo depois do
   endereco, em vez de esperar equipamentos e anotacoes */
@media (max-width: 1100px) {
    .c360--tech > .flex-col { display: contents; }
    .c360--tech .tech-slot { order: var(--o, 9); }
}
/* Quatro abas cabem em 360px: sem icone e com menos respiro */
@media (max-width: 560px) {
    .c360-tabs > .tabs .tab { padding: var(--sp-3) var(--sp-2); font-size: var(--fs-sm); }
    .c360-tabs > .tabs .tab > .icon { display: none; }
    .c360-tabs > .tabs .tab__count { margin-left: 3px; }
}
.tab .icon { vertical-align: -2px; }
.tab__count--alert { background: var(--danger-bg); color: var(--danger); font-weight: 700; }
.tab.is-active .tab__count--alert { background: var(--danger-bg); color: var(--danger); }
.dl--compact { gap: var(--sp-1) var(--sp-3); grid-template-columns: minmax(110px, auto) 1fr; }
.note-item { padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.note-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.os-card { padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.os-card:last-child { border-bottom: 0; }
.os-card--open { border-left: 3px solid var(--warning); padding-left: var(--sp-3); margin-bottom: var(--sp-2); border-bottom: 0; }
.signal-trend__svg { width: 100%; height: 64px; display: block; background: var(--surface-2); border-radius: var(--r-sm); }
.signal-trend__avg { fill: none; stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; }
.signal-trend__min { fill: none; stroke: var(--warning); stroke-width: 1.5; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.signal-trend__limit { stroke: var(--danger); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.signal-trend__key { display: inline-block; width: 12px; height: 2px; vertical-align: middle; margin-right: 3px; }
.signal-trend__key--avg { background: var(--brand); }
.signal-trend__key--min { background: var(--warning); }
.signal-trend__key--limit { background: var(--danger); }

/* ---- mapa da CTO (aba Tecnico) */
.ctomap__canvas { height: 340px; border-radius: var(--r-sm); border: 1px solid var(--border); z-index: 0; }
.ctomap__legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-2); }
.ctomap__key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 3px; }
.ctomap__key--cto { border-radius: 2px; background: #111827; }
.ctomap__key--here { background: transparent; border: 3px solid #7c3aed; width: 12px; height: 12px; }
.ctomap__cto span { display: block; width: 14px; height: 14px; background: #111827; border: 2px solid #fff; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.5); box-sizing: border-box; }
.leaflet-tooltip.ctomap__ctolabel { background: #111827; color: #fff; border: 0; font-weight: 700; font-size: 11px; padding: 1px 6px; }
.leaflet-tooltip.ctomap__ctolabel::before { border-bottom-color: #111827; }
.leaflet-tooltip.ctomap__here { background: #7c3aed; color: #fff; border: 0; font-weight: 600; }
.leaflet-tooltip.ctomap__here::before { border-top-color: #7c3aed; }
.ctomap__row--here td { background: color-mix(in srgb, #7c3aed 8%, transparent); }
@media (max-width: 560px) { .ctomap__canvas { height: 280px; } }

/* ---- provisionamento de ONU */
.prov [hidden] { display: none !important; }
.prov__step { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-size: var(--fs-xs); font-weight: 700; }
.prov-olts { display: grid; gap: var(--sp-2); }
.prov-olt { border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-3); }
.prov-olt__list:empty { display: none; }
.prov-chosen { padding: var(--sp-3); border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--border)); border-radius: var(--r-sm); background: color-mix(in srgb, var(--brand) 6%, transparent); }
.prov__line { display: block; }
.prov-results { display: grid; gap: var(--sp-1); margin-top: var(--sp-2); }
.prov-result { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.prov-result:hover { border-color: var(--brand); }
.prov-submit { position: sticky; bottom: var(--sp-3); z-index: 4; }

/* ---- importacao do authgt */
.authgt-steps { margin: var(--sp-3) 0 0; padding-left: 1.3em; display: grid; gap: var(--sp-4); }
.authgt-steps > li::marker { font-weight: 700; color: var(--brand); }
.authgt-url__row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.authgt-url__row .input { flex: 1 1 280px; }
.authgt-table td:first-child { min-width: 180px; }
details.card > summary { cursor: pointer; list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }

/* Sessao curta salta da tabela; queda provocada por nos fica apagada */
.conn-table tr.conn-row--short td { background: color-mix(in srgb, var(--danger) 7%, transparent); }
.conn-table tr.conn-row--short td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.conn-table tr.conn-row--expected td { opacity: .7; }
.c360__name { font-size: var(--fs-lg); font-weight: 600; line-height: 1.25; }
.c360__meta { font-size: var(--fs-sm); color: var(--text-3); }

.quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--sp-2); }
.quick-action {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: var(--sp-3) var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--text-2);
    font-size: var(--fs-sm);
    text-align: center;
    cursor: pointer;
}
.quick-action:hover { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 5%, var(--surface)); text-decoration: none; }
.quick-action:disabled { opacity: .45; cursor: not-allowed; }
.quick-action__icon { color: inherit; }

.signal { display: flex; align-items: center; gap: var(--sp-3); }
.signal__value { font-family: var(--mono); font-size: var(--fs-lg); font-weight: 700; }
.signal__scale { flex: 1 1 auto; height: 6px; border-radius: var(--r-full); background: linear-gradient(90deg, var(--danger) 0%, var(--warning) 28%, var(--success) 50%, var(--success) 75%, var(--warning) 90%, var(--danger) 100%); position: relative; }
.signal__marker { position: absolute; top: -3px; width: 3px; height: 12px; background: var(--text); border-radius: 2px; transform: translateX(-50%); }

/* ---- pipeline (kanban) */
.kanban { display: flex; gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-3); align-items: flex-start; }
.kanban__col { flex: 0 0 280px; background: var(--surface-2); border-radius: var(--r-lg); border: 1px solid var(--border); }
.kanban__head { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.kanban__title { font-size: var(--fs-sm); font-weight: 600; }
.kanban__body { padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); min-height: 80px; }
.kanban__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-3); font-size: var(--fs-sm); cursor: grab; }
.kanban__card:hover { border-color: var(--border-strong); text-decoration: none; }
.kanban__card.is-dragging { opacity: .5; }
.kanban__col.is-over { background: color-mix(in srgb, var(--brand) 8%, var(--surface-2)); }

/* ---- login */
.login { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: var(--sp-4); background: var(--bg); }
.login__box { width: 100%; max-width: 400px; }
.login__brand { text-align: center; margin-bottom: var(--sp-5); }
.login__logo { max-height: 48px; margin-bottom: var(--sp-3); }
.login__mark { width: 52px; height: 52px; margin: 0 auto var(--sp-3); display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); border-radius: var(--r-lg); font-size: var(--fs-lg); font-weight: 700; }
.login__title { font-size: var(--fs-lg); font-weight: 600; }
.login__sub { font-size: var(--fs-sm); color: var(--text-3); }
.login__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow); }
.login__footer { text-align: center; margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-3); }

/* ---- matriz de capacidades */
.capmatrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-2); }
.capmatrix__item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.capmatrix__src { margin-left: auto; font-size: var(--fs-xs); font-weight: 700; padding: 1px 6px; border-radius: 3px; }
.capmatrix__src--nativo { background: color-mix(in srgb, var(--brand-accent) 18%, transparent); color: var(--brand-accent); }
.capmatrix__src--erp { background: var(--info-bg); color: var(--info); }
.capmatrix__src--indisponivel { background: var(--neutral-bg); color: var(--text-3); }

/* --------------------------------------------------------- 6. utilitarios */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 auto; min-width: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.text-muted { color: var(--text-3); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-lg { font-size: var(--fs-lg); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-brand { color: var(--brand); }
.strong { font-weight: 600; }
.mono { font-family: var(--mono); font-size: var(--fs-sm); }
.num { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.break { word-break: break-word; }

.h2 { font-size: var(--fs-lg); font-weight: 600; }

/* Titulo entre grupos de cartoes (agenda do tecnico, listas por secao). */
.section-title {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs); font-weight: 600; color: var(--text-2);
    margin: var(--sp-5) 0 var(--sp-3);
}
.section-title:first-child { margin-top: 0; }

/* Espelha um icone direcional sem precisar de outro simbolo no sprite. */
.icon.flip { transform: scaleX(-1); }

.divider { height: 1px; background: var(--border); border: 0; margin: var(--sp-4) 0; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

mark { background: color-mix(in srgb, var(--warning) 35%, transparent); color: inherit; padding: 0 1px; border-radius: 2px; }

.copyable { cursor: pointer; border-bottom: 1px dashed var(--border-strong); }
.copyable:hover { border-bottom-color: var(--brand); color: var(--brand); }

/* --------------------------------------------- 7. responsivo e impressao */
@media (max-width: 1024px) {
    /* `minmax(0, 1fr)` pelo mesmo motivo da grade larga: sem isso a tabela
       grande volta a esticar a pagina no tablet. */
    .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topbar" "content"; }

    .sidebar {
        position: fixed; left: 0; top: 0; bottom: 0;
        width: min(290px, 86vw);
        padding-left: env(safe-area-inset-left);
        transform: translateX(-100%);
        transition: transform 200ms ease;
        box-shadow: var(--shadow-lg);
    }
    .app.sidebar-open .sidebar { transform: none; }
    .sidebar__close { display: block; }
    .topbar__burger { display: grid; place-items: center; }
    .content {
        padding: var(--sp-4);
        padding-left: max(var(--sp-4), env(safe-area-inset-left));
        padding-right: max(var(--sp-4), env(safe-area-inset-right));
    }
    .usermenu__info { display: none; }
    .search__hint { display: none; }
}

/* Corpo do contrato gerado, dentro do painel. Serifada e justificada como no
   papel: quem revisa precisa ler o que o cliente vai ler. */
.contract-body {
    white-space: pre-line;
    text-align: justify;
    font-family: Georgia, "Times New Roman", serif;
    font-size: var(--fs);
    line-height: 1.7;
    max-width: 78ch;
}

/* ==========================================================================
   Pesquisa de satisfacao - pagina publica
   A unica tela que o cliente final ve. Ele chega pelo WhatsApp, no celular,
   com pressa: alvo de toque de 44px, uma pergunta por tela, nada de menu.
   ========================================================================== */

body.survey {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--sp-5) var(--sp-4);
    background: var(--surface-2);
}

.survey__box { width: 100%; max-width: 520px; }

.survey__brand { text-align: center; margin-bottom: var(--sp-5); }
.survey__logo { max-height: 56px; max-width: 220px; }
.survey__brandname { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; }

.survey__card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-6) var(--sp-5);
    box-shadow: var(--shadow);
    text-align: center;
}

.survey__icon { color: var(--brand); margin-bottom: var(--sp-3); }
.survey__title { font-size: var(--fs-xl); margin: 0 0 var(--sp-2); }
.survey__question { font-size: var(--fs-lg); color: var(--text-2); margin: 0 0 var(--sp-5); }
.survey__text { color: var(--text-2); margin: 0 0 var(--sp-3); }
.survey__score-echo { font-size: var(--fs-lg); margin: var(--sp-3) 0; }

/* A escala: radio escondido, caixa visivel. Funciona sem JavaScript, o que
   importa porque o navegador embutido do WhatsApp as vezes bloqueia script. */
.survey__scale { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.survey__score input { position: absolute; opacity: 0; width: 0; height: 0; }

.survey__scorebox {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    border: 2px solid var(--border-strong);
    border-radius: var(--r);
    background: var(--surface);
    font-size: var(--fs-lg);
    font-weight: 600;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.survey__score input:checked + .survey__scorebox {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-ink);
    transform: scale(1.08);
}

.survey__score input:focus-visible + .survey__scorebox { outline: 2px solid var(--brand); outline-offset: 2px; }
.survey__scorebox:hover { border-color: var(--brand); }

/* CSAT tem 5 opcoes e cabe mais largo; NPS tem 11 e aperta no celular. */
.survey__scale--csat .survey__scorebox { min-width: 56px; }
.survey__scale--nps  .survey__scorebox { min-width: 40px; font-size: var(--fs); }

.survey__legend {
    display: flex;
    justify-content: space-between;
    margin: var(--sp-2) 0 var(--sp-5);
    font-size: var(--fs-xs);
    color: var(--text-3);
}

.survey__label { display: block; text-align: left; font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.survey__optional { color: var(--text-3); font-weight: 400; }
.survey__submit { width: 100%; margin-top: var(--sp-4); justify-content: center; }
.survey__note { font-size: var(--fs-xs); color: var(--text-3); margin: var(--sp-4) 0 0; }
.survey__footer { text-align: center; font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--sp-4); }

@media (max-width: 420px) {
    .survey__scale--nps .survey__scorebox { min-width: 36px; min-height: 40px; }
}

/* ==========================================================================
   Visor de log
   Uma linha por registro, mais recente no topo. A faixa colorida na esquerda
   permite achar o erro passando o olho, sem filtrar por nivel.
   ========================================================================== */

.log { max-height: 70vh; overflow: auto; }

.log__line {
    display: flex;
    gap: var(--sp-3);
    align-items: baseline;
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
    font-size: var(--fs-sm);
}

.log__line:hover { background: var(--surface-2); }

.log__line--warning  { border-left-color: var(--warning); }
.log__line--error    { border-left-color: var(--danger); }
.log__line--critical { border-left-color: var(--danger); background: var(--danger-bg); }

.log__ts     { flex: 0 0 62px; color: var(--text-3); font-size: var(--fs-xs); }
.log__level  { flex: 0 0 76px; }
.log__tenant { flex: 0 0 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log__msg    { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.log__ctx summary { cursor: pointer; color: var(--text-3); font-family: var(--mono); }
.log__ctx pre     { margin: var(--sp-2) 0 0; }

@media (max-width: 640px) {
    .log__line { flex-wrap: wrap; }
    .log__ts, .log__level, .log__tenant { flex: 0 0 auto; }
    .log__msg { flex: 1 1 100%; }
}

@media (max-width: 640px) {
    .content {
        padding: var(--sp-3);
        padding-left: max(var(--sp-3), env(safe-area-inset-left));
        padding-right: max(var(--sp-3), env(safe-area-inset-right));
        padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom));
    }
    .card__body, .card__header { padding: var(--sp-4); }
    .page-header { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
    .page-header__actions { width: 100%; }
    /* `140px` e nao `auto`: com `auto` cada acao virava uma linha inteira e a
       tela de O.S., que tem cinco, empurrava a lista para fora da primeira
       dobra. Assim caber duas por linha e o padrao. */
    .page-header__actions .btn { flex: 1 1 140px; }

    /* Quatro indicadores em quatro linhas empurram o conteudo para fora da
       tela. Dois por linha, com numero um pouco menor, cabem na primeira
       dobra - que e onde o indicador serve para algo. */
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
    .kpi { padding: var(--sp-3); }
    .kpi__value { font-size: var(--fs-xl); }

    /* "Filtrar" ganha a linha: e o alvo de toque que fecha a tarefa */
    .filters { padding: var(--sp-3); }
    .filters__actions { margin-left: 0; width: 100%; }
    .filters__actions .btn--primary { flex: 1 1 auto; }

    .modal__footer .btn { flex: 1 1 auto; }
    .table th, .table td { padding: 0 var(--sp-3); }
    /* O selo de ambiente so interessa a quem desenvolve e rouba o espaco da
       busca, que e a acao mais usada do topo. */
    .env-chip { display: none; }
    .toasts { left: var(--sp-3); right: var(--sp-3); max-width: none; }

    /* Botao de formulario ocupa a linha quando nao cabe lado a lado: alvo de
       toque maior e nada de acao principal encolhida no canto. */
    .form-actions { flex-wrap: wrap; }
    .form-actions .btn { flex: 1 1 140px; }

    /* Tabela vira cartao: tecnico em campo usa celular.
       A classe e aplicada pelo JS a toda tabela com cabecalho (menos
       `table--grid`), porque sao ~140 tabelas escritas a mao e marcar uma por
       uma deixaria a maioria de fora. O rotulo de cada celula tambem vem do
       cabecalho, pelo JS - sem ele a celula ficaria sem dizer o que e. */
    .table--stack > thead { display: none; }

    .table--stack > :is(tbody, tfoot) > tr {
        display: block;
        padding: var(--sp-3);
        border-bottom: 1px solid var(--border);
    }

    /* `td` **e** `th`: ha linha de corpo e de rodape feita de `th` (totais do
       DRE, saldo do fluxo de caixa). Deixar o `th` como `table-cell` mantinha
       o `white-space: nowrap` do cabecalho, e era ele quem esticava a tabela
       para fora do cartao. */
    .table--stack > :is(tbody, tfoot) > tr > :is(td, th) {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: var(--sp-3);
        height: auto; min-height: 0;
        padding: 3px 0;
        border: 0;
        position: static;
        background: none;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .table--stack > :is(tbody, tfoot) > tr > :is(td, th)::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: var(--fs-sm); color: var(--text-3); font-weight: 600;
    }

    /* No modo cartao a celula nao tem largura de coluna para se apoiar: texto
       com `nowrap` (que no desktop vira reticencias) passa a definir a largura
       minima e estica a tabela para fora do cartao. Aqui o texto quebra em
       varias linhas, que e o certo em cartao - e a largura volta a ser a da
       tela. */
    .table--stack .truncate {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    .table--stack > :is(tbody, tfoot) > tr > :is(td, th) > * { min-width: 0; max-width: 100%; }
    .table--stack > :is(tbody, tfoot) > tr .nowrap { white-space: normal; }

    /* A primeira coluna e o nome da coisa (cliente, chamado, produto). Em
       cartao ela vira o titulo: linha inteira, sem rotulo ao lado. Com o
       rotulo, o titulo ficava espremido na metade direita e a lista deixava
       de ser varrida com o olho. */
    .table--stack > tbody > tr > :is(td, th):first-child[data-label]:not([data-label=""]) {
        display: block;
        margin-bottom: var(--sp-1);
        padding-bottom: var(--sp-2);
        border-bottom: 1px dashed var(--border);
        font-size: var(--fs-md);
    }
    .table--stack > tbody > tr > :is(td, th):first-child[data-label]:not([data-label=""])::before {
        display: none;
    }

    /* Celula sem rotulo (coluna de acoes) nao ganha prefixo vazio no meio */
    .table--stack > tbody > tr > td[data-label=""] { justify-content: flex-end; }
    /* Celula mesclada (titulo de secao no DRE, totais) ocupa a linha inteira */
    .table--stack > :is(tbody, tfoot) > tr > :is(td, th):not([data-label]) { justify-content: flex-start; }
    .table--stack > :is(tbody, tfoot) > tr > :is(td, th):not([data-label])::before { display: none; }
    /* Numero alinhado a direita em coluna nao faz sentido em pilha. O `nowrap`
       do desktop tambem sai: aqui sobra largura e o valor pode quebrar. */
    .table--stack > :is(tbody, tfoot) > tr > :is(td, th).num {
        text-align: right;
        white-space: normal;
    }
    .table--stack > tbody > tr > td.tight { width: auto; white-space: normal; }
    /* Acao em lista precisa de alvo de toque, nao de icone de 30px */
    .table--stack > tbody > tr > td .btn--sm { height: 36px; min-width: 36px; }

    /* Ordenacao no celular: com o cabecalho escondido, o unico caminho e este */
    .table-sort { display: flex; }

    /* Ficha de registro: rotulo em cima do valor. Em duas colunas sobravam
       ~200px para endereco, e-mail e linha digitavel. */
    .dl { grid-template-columns: 1fr; gap: var(--sp-3); }
    .dl dt { margin-bottom: 1px; }
}

/* ============================================================== mapa
   Mapa da planta sobre OpenStreetMap. A altura e fixa em viewport porque
   mapa que cresce com o conteudo rola junto com a pagina e fica
   impossivel de arrastar. */

.map-shell { display: flex; flex-direction: column; gap: var(--sp-3); }

.map-toolbar {
    display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap;
}

.map-search { position: relative; flex: 1 1 320px; min-width: 240px; display: flex; align-items: center; }
.map-search .icon { position: absolute; left: 10px; color: var(--text-3); pointer-events: none; }
.map-search .input { padding-left: 32px; }

.map-search__results {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1000;
    max-height: 320px; overflow: auto;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); box-shadow: var(--shadow);
}

.map-search__item {
    display: flex; gap: var(--sp-2); align-items: center; width: 100%;
    padding: var(--sp-2) var(--sp-3); border: 0; background: none; cursor: pointer; text-align: left;
}
.map-search__item:hover { background: var(--surface-2); }
.map-search__text { display: flex; flex-direction: column; min-width: 0; }
.map-search__empty { padding: var(--sp-3); color: var(--text-3); font-size: var(--fs-sm); }

.map-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.chip--toggle { cursor: pointer; user-select: none; opacity: 0.55; }
.chip--toggle.is-active { opacity: 1; border-color: var(--brand); }

.map-body { display: flex; gap: var(--sp-3); align-items: stretch; }

.map-canvas {
    flex: 1 1 auto; height: 68vh; min-height: 420px;
    border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
    background: var(--surface-2);
}

.map-panel {
    width: 340px; flex: 0 0 340px; max-height: 68vh; overflow: auto;
    border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
}
.map-panel__empty { padding: var(--sp-5); text-align: center; color: var(--text-3); }
.map-panel__head {
    display: flex; justify-content: space-between; gap: var(--sp-2); align-items: flex-start;
    padding: var(--sp-3); border-bottom: 1px solid var(--border);
}
.map-panel__body { padding: var(--sp-3); }

.map-clients { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-2); }
.map-client {
    display: flex; gap: var(--sp-2); align-items: center;
    padding: 6px var(--sp-2); border-radius: var(--r-sm);
    color: inherit; text-decoration: none;
}
.map-client:hover { background: var(--surface-2); }
.map-client__body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }

.map-legend {
    display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center;
    font-size: var(--fs-sm); color: var(--text-2);
}
.map-legend .dot { margin-right: 4px; }

/* Leaflet dentro do tema: o padrao dele e claro e destoa no modo escuro */
.leaflet-container { font: inherit; background: var(--surface-2); }
.leaflet-popup-content-wrapper, .leaflet-tooltip {
    background: var(--surface); color: var(--text); border-radius: var(--r-sm);
}
.leaflet-tooltip { border: 1px solid var(--border); box-shadow: var(--shadow); }
.leaflet-bar a { background: var(--surface); color: var(--text); border-color: var(--border); }
.leaflet-bar a:hover { background: var(--surface-2); }
/* O credito do OSM vinha com fundo branco fixo e virava um retangulo aceso
   no tema escuro. */
.leaflet-control-attribution {
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    color: var(--text-3);
    font-size: 10px;
}
.leaflet-control-attribution a { color: var(--text-2); }

@media (max-width: 1024px) {
    .map-body { flex-direction: column; }
    .map-panel { width: auto; flex: 1 1 auto; max-height: none; }
    .map-canvas { height: 52vh; }
}

@media print {
    .sidebar, .topbar, .page-header__actions, .filters, .pagination, .toasts,
    .quick-actions, .chips, .table-sort, .skip-link, .alert__close { display: none !important; }
    /* O embrulho de rolagem corta a tabela no papel */
    .table-wrap { overflow: visible !important; }
    .app { display: block; }
    .content { padding: 0; max-width: none; }
    .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
    body { background: #fff; color: #000; font-size: 11pt; }
    a { color: #000; text-decoration: none; }
    .table th { background: #f0f0f0 !important; }
}