/* ============================================================================
   Pecorino — design system
   Tokens e componentes do desenho entregue em docs/design/. Os valores aqui são
   os do handoff; alterá-los altera o produto inteiro, por isso vivem todos como
   custom properties num sítio só.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

:root {
    /* ─── Cor ───────────────────────────────────────────────────────────── */
    --canvas:        #F5F1E8;
    --canvas-deep:   #EFEAE0;
    --sidebar:       #E9E3D6;
    --surface:       #FFFDF8;
    --ink:           #1A1A18;
    --ink-2:         #2A2823;
    --muted:         #6E6960;
    --muted-2:       #8A8478;
    --faint:         #A9A296;
    --hairline:      #E2DCCE;
    --hairline-glass: rgba(26, 26, 24, .09);
    --divider-glass: rgba(26, 26, 24, .06);
    --accent:        #B4543A;
    --accent-dark:   #8E3F2B;
    --positive:      #5A6B4E;
    --warning:       #8E6B3A;

    --glass:         rgba(255, 253, 248, .52);
    --glass-border:  rgba(255, 255, 255, .60);
    --glass-drawer:  rgba(255, 253, 248, .82);
    --nav-active:    rgba(255, 253, 248, .75);

    /* ─── Tipografia ────────────────────────────────────────────────────── */
    --ui:      'Jost', 'Segoe UI', system-ui, sans-serif;
    --display: 'Cormorant Garamond', Georgia, serif;

    /* ─── Forma e movimento ─────────────────────────────────────────────── */
    --r-card:  8px;
    --r-pill:  999px;
    --r-small: 6px;
    --ease:    cubic-bezier(.4, 0, .2, 1);
    --ease-in: cubic-bezier(.22, 1, .36, 1);
    --t:       all .2s var(--ease);

    --nav-w:   246px;
    --nav-w-collapsed: 76px;

    /* ─── Superfícies que o sistema desenha ─────────────────────────────── */
    /* A aplicação é clara e só clara. Sem isto, quem tem o SO em tema escuro recebe a
       lista suspensa aberta, o botão do seletor de ficheiro e o preenchimento automático
       pintados pelo tema do sistema — cinzento sobre creme. Dar a superfície ao que o
       sistema desenha é o que a regra do .select já dizia fazer; faltava dizê-lo ao
       browser, que é quem decide. */
    color-scheme: light;

    /* Caixa de verificação na cor da tinta em vez do azul do sistema. Estava repetido
       inline em quatro páginas; aqui apanha também as que vierem a seguir. */
    accent-color: var(--ink);
}

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--canvas-deep);
    font-family: var(--ui);
    font-weight: 300;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; transition: var(--t); }
a:hover { color: var(--accent-dark); }

input, textarea, select, button { font-family: var(--ui); }
::placeholder { color: var(--faint); }

/* O foco tem de ser visível: no protótipo as linhas e as linhas de tabela eram
   divs sem foco nenhum. Aqui são <a>/<button> e o anel é obrigatório. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ============================================================================
   Movimento
   ========================================================================= */

@keyframes sFade   { from { opacity: 0 } to { opacity: 1 } }
@keyframes sRise   { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes sBubble { from { opacity: 0; transform: translateY(10px) scale(.98) } to { opacity: 1; transform: none } }
@keyframes sSlideIn{ from { opacity: 0; transform: translateX(38px) } to { opacity: 1; transform: none } }
@keyframes sSheet  { from { transform: translateY(100%) } to { transform: none } }
@keyframes sDots   { 0%, 60%, 100% { transform: translateY(0); opacity: .35 } 30% { transform: translateY(-4px); opacity: 1 } }
@keyframes sSweep  { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes sDrift  { 0% { transform: none } 50% { transform: translate(-70px, 60px) scale(1.12) } 100% { transform: none } }
@keyframes sDrift2 { 0% { transform: scale(1.05) } 50% { transform: translate(90px, -50px) scale(.92) } 100% { transform: scale(1.05) } }

.sr { animation: sRise .55s var(--ease-in) both; }
.sr-1 { animation-delay: .05s } .sr-2 { animation-delay: .10s }
.sr-3 { animation-delay: .18s } .sr-4 { animation-delay: .26s }
.sr-5 { animation-delay: .34s } .sr-6 { animation-delay: .42s }

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

/* ============================================================================
   Fundo: os blobs que ficam por trás do vidro
   ========================================================================= */

.blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
}

.blob--1 {
    width: 720px; height: 720px; top: -280px; right: -200px;
    background: radial-gradient(circle at 40% 40%, rgba(180, 84, 58, .30), rgba(180, 84, 58, 0) 68%);
    animation: sDrift 22s ease-in-out infinite;
}

.blob--2 {
    width: 600px; height: 600px; bottom: -260px; left: -180px;
    background: radial-gradient(circle at 40% 40%, rgba(90, 107, 78, .26), rgba(90, 107, 78, 0) 68%);
    animation: sDrift2 26s ease-in-out infinite;
}

.blob--3 {
    width: 560px; height: 560px; top: 40%; left: 30%;
    background: radial-gradient(circle at 40% 40%, rgba(142, 107, 58, .18), rgba(142, 107, 58, 0) 68%);
    animation: sDrift 24s ease-in-out infinite;
}

/* ============================================================================
   Vidro
   ========================================================================= */

.glass {
    background: var(--surface); /* fallback onde backdrop-filter não existe */
    border: 1px solid var(--glass-border);
    border-radius: var(--r-card);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .glass {
        background: var(--glass);
        -webkit-backdrop-filter: blur(20px) saturate(1.15);
        backdrop-filter: blur(20px) saturate(1.15);
    }
}

/* ============================================================================
   Tipografia
   ========================================================================= */

.eyebrow {
    font-size: 10px; font-weight: 400; letter-spacing: .26em;
    text-transform: uppercase; color: var(--muted-2); margin: 0;
}

.display {
    font-family: var(--display); font-weight: 300; line-height: 1.1;
    margin: 0; color: var(--ink);
}
.display--page   { font-size: 38px; }
.display--auth   { font-size: 44px; }
.display--drawer { font-size: 30px; line-height: 1.15; }
.display--promo  { font-size: 26px; line-height: 1.2; }
.display--kpi    { font-size: 42px; line-height: 1.05; }

.lede {
    font-size: 14px; font-weight: 300; line-height: 1.6;
    color: var(--muted); margin: 0; max-width: 64ch;
}
.meta { font-size: 11px; font-weight: 300; color: var(--muted-2); margin: 0; }
.hint { font-size: 12px; font-weight: 300; color: var(--muted); margin: 0; }

/* ============================================================================
   Botões
   ========================================================================= */

/* Altura fixa, não padding vertical: com padding, dois botões lado a lado saíam com
   alturas diferentes conforme o tamanho da letra. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 24px;
    font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
    border-radius: var(--r-pill); border: 1px solid transparent;
    cursor: pointer; transition: var(--t); white-space: nowrap;
}
.btn:active { transform: scale(.98); }

.btn--primary { background: var(--ink); color: var(--canvas); }
.btn--primary:hover { background: var(--accent); color: var(--canvas); transform: translateY(-1px); }
.btn--primary:active { transform: scale(.98); }

/* Nunca transparente: sobre as superfícies de vidro um botão sem fundo desaparece. */
.btn--outline {
    background: rgba(255, 253, 248, .7); color: var(--ink-2);
    border-color: rgba(26, 26, 24, .16);
}
.btn--outline:hover { background: var(--surface); color: var(--ink); border-color: var(--ink); }

/* Compacto: exportações, ações de gaveta, chips de ação. */
.btn--sm { height: 40px; padding: 0 18px; }

/* As telas de autenticação têm uma ação só, e ela é o assunto da página. */
.auth .btn { height: 52px; padding: 0 42px; font-size: 12px; letter-spacing: .18em; }
.drawer .btn { height: 42px; }

.btn:disabled, .btn[aria-disabled="true"] {
    background: rgba(26, 26, 24, .07); color: var(--faint);
    border-color: transparent; cursor: not-allowed; transform: none;
}
.btn:disabled:hover, .btn[aria-disabled="true"]:hover {
    background: rgba(26, 26, 24, .07); color: var(--faint); transform: none;
}

.link-quiet {
    font-size: 13px; font-weight: 300; color: var(--muted); background: none;
    border: 0; padding: 0; cursor: pointer; transition: var(--t);
}
.link-quiet:hover { color: var(--accent); }

/* ============================================================================
   Pills, chips e estados
   ========================================================================= */

.pillgroup {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--canvas-deep); border-radius: var(--r-pill);
}

.pillgroup__item {
    font-size: 11px; font-weight: 400; letter-spacing: .10em;
    padding: 8px 16px; border-radius: var(--r-pill); border: 0;
    background: transparent; color: var(--muted); cursor: pointer; transition: var(--t);
}
.pillgroup__item:hover { color: var(--ink); }
.pillgroup__item[aria-current="true"] { background: var(--ink); color: var(--canvas); }

.chip {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 300; color: #4A463E;
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--r-pill); padding: 9px 16px;
    cursor: pointer; transition: var(--t); text-align: left;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }

.chip--static { cursor: default; }
.chip--static:hover { border-color: var(--hairline); color: #4A463E; }

.status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 400; letter-spacing: .10em;
    border-radius: var(--r-pill); padding: 5px 12px;
    border: 1px solid currentColor; white-space: nowrap;
}
.status--ok      { color: var(--positive); border-color: #5A6B4E33; }
.status--warning { color: var(--warning);  border-color: #8E6B3A33; }
.status--error   { color: var(--accent);   border-color: #B4543A33; }
.status--muted   { color: var(--muted-2);  border-color: rgba(26, 26, 24, .14); }

.dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.dot--lg { width: 7px; height: 7px; }

/* ============================================================================
   Campos
   ========================================================================= */

.field { display: flex; flex-direction: column; gap: 6px; }

.field__label {
    font-size: 12px; font-weight: 300; letter-spacing: .10em; color: var(--muted-2);
}

/* Desktop: campo sublinhado. Mobile troca para caixa — ver o breakpoint no fim. */
.input {
    width: 100%; border: 0; border-bottom: 1px solid #D9D2C4; background: transparent;
    font-size: 14px; font-weight: 300; color: var(--ink);
    padding: 12px 2px; transition: var(--t);
}
.input:focus { outline: none; border-bottom-color: var(--accent); }
.input--centred { text-align: center; }
.input--password { letter-spacing: .2em; }

.input-box {
    width: 100%; height: 52px; border-radius: 12px;
    border: 1px solid #DCD5C6; background: var(--surface);
    font-size: 14px; font-weight: 300; color: var(--ink); padding: 0 18px;
    transition: var(--t);
}
.input-box:focus { outline: none; border-color: var(--accent); }

/* Lista suspensa: o mesmo campo dos outros, com o chevron do nosso conjunto de ícones em
   vez da seta do sistema — a nativa muda de forma conforme o SO e não é de nenhuma paleta
   nossa. A lista aberta é nossa onde o browser deixa — ver o @supports mais abaixo;
   onde não deixa, é desenhada pelo sistema e dá-se-lhe a superfície, não a forma. */
.select { position: relative; display: block; }

.select > .input {
    appearance: none; -webkit-appearance: none;
    padding-right: 24px; cursor: pointer;
}

.select > .input option { background: var(--surface); color: var(--ink); }

.select > svg {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--muted-2);
    pointer-events: none; transition: var(--t);
}

.select:focus-within > svg { color: var(--accent); }

/* A lista aberta, quando o browser deixa. Chromium 135+ desenha o picker como DOM em vez
   de o pedir ao sistema operativo, e aí ele passa a ser nosso: mesma superfície, mesmo
   raio, mesma tipografia, sem o azul de seleção do SO. Onde não houver suporte — Firefox,
   Safari — o bloco inteiro é ignorado e a lista continua a ser a do sistema, exatamente
   como era. Nada disto é por página: quem escrever um .select novo herda-o. */
@supports (appearance: base-select) {
    .select > .input,
    .select > .input::picker(select) { appearance: base-select; }

    /* O base-select traz seta própria; o chevron do nosso conjunto já está no markup. */
    .select > .input::picker-icon { display: none; }

    /* Traz também cantos próprios, e no desktop o campo é sublinhado, sem raio. O :where
       deixa a especificidade a zero para o breakpoint móvel — que arredonda — continuar a
       mandar. */
    :where(.select) > .input { border-radius: 0; }

    .select > .input::picker(select) {
        min-width: anchor-size(width);
        margin-block-start: 6px; padding: 6px;
        border: 1px solid var(--hairline); border-radius: var(--r-card);
        background: var(--surface); box-shadow: 0 18px 40px rgba(26, 26, 24, .12);
    }

    .select > .input option {
        display: flex; align-items: center; gap: 10px;
        padding: 9px 12px; border-radius: var(--r-small);
        font-size: 14px; font-weight: 300; color: var(--ink);
        background: transparent; transition: var(--t);
    }
    .select > .input option:hover,
    .select > .input option:focus { background: var(--canvas-deep); outline: none; }
    .select > .input option:checked { color: var(--accent); }

    /* A marca de seleção à direita, como nos menus — à esquerda empurrava o texto. */
    .select > .input option::checkmark { order: 1; margin-inline-start: auto; color: var(--accent); }
}

.validation-summary { list-style: none; margin: 0; padding: 0; }
.validation-summary li,
.field-error {
    font-size: 12px; font-weight: 300; color: var(--accent); line-height: 1.5;
}
.validation-summary:empty, .validation-summary ul:empty { display: none; }

/* Medidor de força da senha */
.strength { display: flex; gap: 4px; }
.strength__seg {
    flex: 1; height: 3px; border-radius: 2px; background: rgba(26, 26, 24, .1);
    transition: var(--t);
}
.strength__seg.is-on { background: var(--positive); }

/* ============================================================================
   Shell da aplicação
   ========================================================================= */

/* A navegação não está colada à borda: paira sobre o conteúdo, e o conteúdo passa por
   baixo dela. Por isso o shell não é uma grelha de duas colunas — é uma tela inteira com
   dois elementos posicionados por cima. */
.shell {
    position: relative;
    height: 100dvh;
    overflow: hidden;
    background: var(--canvas-deep);
}

/* ─── Superfície flutuante ──────────────────────────────────────────────── */
/* O desfoque só se vê se houver algo por baixo: são os blobs, que por isso passaram
   para o nível do shell. Sem `backdrop-filter` fica o sólido, e as sombras seguram a
   ilusão de altura na mesma — o layout não depende do efeito. */

.flutuante {
    background: rgba(252, 250, 245, .96);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .7) inset,
        0 12px 30px rgba(26, 26, 24, .10),
        0 30px 66px rgba(26, 26, 24, .10);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .flutuante {
        background: rgba(252, 250, 245, .72);
        -webkit-backdrop-filter: blur(30px) saturate(1.6);
        backdrop-filter: blur(30px) saturate(1.6);
    }
}

/* ─── Navegação ─────────────────────────────────────────────────────────── */

.nav {
    position: absolute; top: 20px; left: 20px; bottom: 20px;
    width: var(--nav-w); z-index: 10;
    padding: 20px 12px;
    border-radius: 20px;
    display: flex; flex-direction: column;
    overflow: hidden;
    transition: width .28s var(--ease);
}
.shell.is-collapsed .nav { width: var(--nav-w-collapsed); }


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

.nav__header {
    display: flex; align-items: center; gap: 10px;
    padding: 0 10px 22px;
}
.nav__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav__mark { width: 22px; height: 22px; object-fit: contain; flex: none; }
.nav__wordmark {
    font-size: 12px; font-weight: 300; letter-spacing: .2em; color: var(--ink);
    white-space: nowrap;
}

.nav__collapse {
    margin-left: auto; width: 28px; height: 28px; flex: none;
    display: grid; place-items: center;
    background: none; border: 0; border-radius: var(--r-small);
    color: var(--muted-2); cursor: pointer; transition: var(--t);
}
.nav__collapse svg { width: 15px; height: 15px; }
.nav__collapse:hover { color: var(--ink); background: rgba(255, 253, 248, .7); }

.nav__group { padding: 0 4px; display: flex; flex-direction: column; gap: 3px; }
.nav__group + .nav__group {
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid rgba(26, 26, 24, .08);
}
.nav__group--scroll { overflow-y: auto; flex: 1 1 auto; min-height: 0; }

.nav__eyebrow { padding: 0 14px 8px; }

.nav__item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 12px;
    font-size: 14px; font-weight: 300; color: var(--muted);
    transition: var(--t);
}
.nav__item:hover { color: var(--ink); background: rgba(239, 234, 224, .6); }
.nav__item svg { flex: none; width: 18px; height: 18px; color: var(--muted-2); }
.nav__item span { white-space: nowrap; overflow: hidden; }

/* O ativo é um relevo sobre a superfície flutuante, não outro vidro por cima dela:
   vidro sobre vidro faria a nav parecer duas camadas em vez de uma. */
.nav__item[aria-current="page"] {
    background: rgba(239, 234, 224, .95);
    box-shadow: 0 1px 2px rgba(26, 26, 24, .06);
    color: var(--ink);
}
.nav__item[aria-current="page"] svg { color: var(--accent); }

.nav__group--scroll .nav__item { padding: 10px 14px; font-size: 13px; }
.nav__group--scroll .nav__item svg { width: 17px; height: 17px; }

.nav__footer { margin-top: auto; padding: 16px 4px 0; }

.nav__profile {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 12px;
    background: rgba(239, 234, 224, .85);
    transition: var(--t); min-width: 0;
}
.nav__profile:hover { background: rgba(239, 234, 224, 1); }

.avatar {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--ink); color: var(--canvas);
    font-size: 11px; font-weight: 400; letter-spacing: .04em;
}
.avatar--lg { width: 56px; height: 56px; font-size: 18px; font-weight: 300; }
.avatar--xl { width: 64px; height: 64px; font-size: 20px; font-weight: 300; }

.nav__profile-text { min-width: 0; }
.nav__profile-name {
    font-size: 12px; font-weight: 300; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav__profile-role {
    font-size: 10px; font-weight: 300; letter-spacing: .1em; color: var(--muted-2);
    text-transform: uppercase;
}

/* Colapso: mudança de largura a sério, com os rótulos fora do DOM visual —
   não recortados. */
.shell.is-collapsed .nav__wordmark,
.shell.is-collapsed .nav__item span,
.shell.is-collapsed .nav__eyebrow,
.shell.is-collapsed .nav__profile-text { display: none; }

.shell.is-collapsed .nav__header { flex-direction: column; gap: 12px; padding: 0 0 22px; }
.shell.is-collapsed .nav__collapse { margin-left: 0; transform: scaleX(-1); }
.shell.is-collapsed .nav__item,
.shell.is-collapsed .nav__profile { justify-content: center; padding: 12px 0; }
.shell.is-collapsed .nav__item[aria-current="page"] { padding: 11px 0; }

/* ─── Área de conteúdo ──────────────────────────────────────────────────── */

/* Sem fundo próprio: os blobs do shell têm de se ver por baixo, senão a coluna
   flutuante não tem o que desfocar. */
.main {
    position: absolute; top: 0; right: 0; bottom: 0;
    left: calc(var(--nav-w) + 40px);
    overflow: hidden;
    transition: left .28s var(--ease);
}
.shell.is-collapsed .main { left: calc(var(--nav-w-collapsed) + 40px); }

.page {
    position: absolute; inset: 0; z-index: 1;
    overflow-y: auto;
    padding: 30px 40px 40px;
    animation: sFade .4s both;
}

/* O Assistente gere o seu próprio scroll: a lista é o único scroller. */
.page--flush { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

/* ─── Segunda cápsula: a ação primária da página ────────────────────────── */
/* Só nas telas de administração. Nas outras o cabeçalho já tem controlos à direita
   (o filtro de unidade), e duas barras ali colidiriam. */

.acoes {
    position: absolute; top: 20px; right: 20px; z-index: 12;
    height: 52px; padding: 0 8px; border-radius: 16px;
    display: flex; align-items: center; gap: 8px;
}

.acoes .btn {
    height: 36px; padding: 0 20px;
    font-size: 11px; letter-spacing: .14em;
}

/* ─── Campo de busca ────────────────────────────────────────────────────── */
/* Afunda ligeiramente, ao contrário das barras que levitam: é onde se escreve,
   e a sombra interna é o que o distingue de mais um botão. */

.busca {
    display: flex; align-items: center; gap: 8px;
    width: 232px; height: 36px; padding: 0 6px 0 14px;
    background: var(--surface);
    border: 1px solid rgba(26, 26, 24, .10);
    box-shadow: inset 0 1px 2px rgba(26, 26, 24, .04);
    border-radius: var(--r-pill);
    cursor: text; transition: var(--t);
}
.busca:hover { border-color: rgba(26, 26, 24, .22); }
.busca:focus-within { border-color: var(--accent); }

.busca__lupa { display: flex; color: var(--muted-2); flex: none; }

.busca__campo {
    flex: 1 1 auto; min-width: 0;
    border: 0; background: none; font-size: 13px; font-weight: 300; color: var(--ink);
}
.busca__campo:focus { outline: none; }
.busca__campo::-webkit-search-cancel-button { display: none; }

.busca__atalho { display: flex; gap: 3px; flex: none; }
.busca__atalho kbd {
    display: grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 4px;
    background: rgba(26, 26, 24, .06); border-radius: 5px;
    font-family: var(--ui); font-size: 10px; font-weight: 400; color: var(--muted-2);
}

.busca__limpar {
    display: grid; place-items: center;
    width: 20px; height: 20px; flex: none; border-radius: 50%;
    background: rgba(26, 26, 24, .06); color: var(--muted-2);
    font-size: 14px; line-height: 1; transition: var(--t);
}
.busca__limpar:hover { background: var(--ink); color: var(--canvas); }

.page__header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px; margin-bottom: 26px; flex-wrap: wrap;
}

.page__title-row { display: flex; align-items: center; gap: 14px; margin: 10px 0 8px; }

.icon-chip {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--glass); border: 1px solid rgba(255, 255, 255, .75);
    color: var(--accent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* ============================================================================
   Cartões e grelhas
   ========================================================================= */

.grid { display: grid; gap: 16px; }
.grid--kpi { grid-template-columns: repeat(4, 1fr); }
.grid--split { grid-template-columns: 1.4fr 1fr; align-items: start; }
.grid--duo   { grid-template-columns: 1fr 1fr; align-items: start; }

.card { padding: 22px 24px; }
.card__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 18px;
}

/* ─── KPI ───────────────────────────────────────────────────────────────── */

.kpi { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.kpi__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.kpi__value {
    font-size: 30px; font-weight: 300; letter-spacing: -.015em; line-height: 1;
    color: var(--ink);
}
.kpi__delta { font-size: 12px; font-weight: 400; white-space: nowrap; }
.kpi__delta--up   { color: var(--positive); }
.kpi__delta--down { color: var(--accent); }
.kpi__delta--flat { color: var(--muted-2); }

/* `display:block` explícito: a barra é um <span> e, fora de um contentor flex,
   ficaria inline — altura e largura a zero, sem nada visível. */
.bar { display: block; height: 3px; border-radius: 2px; background: rgba(26, 26, 24, .09); overflow: hidden; }
.bar__fill {
    display: block; height: 100%; border-radius: 2px; background: var(--positive);
    transform-origin: left; animation: sSweep .8s var(--ease-in) both;
}
.bar__fill--accent { background: var(--accent); }
.bar--thick { height: 4px; }

/* ─── Lista de unidades ─────────────────────────────────────────────────── */

/* Nome e valor na mesma linha de base; barra e contagem de comandas na faixa de
   baixo. A contagem tem largura fixa para todas as linhas acabarem no mesmo eixo —
   sem isso, "104 contas" e "9 contas" empurram a barra para sítios diferentes. */
.unitrow {
    display: grid; grid-template-columns: 1fr auto;
    gap: 4px 10px; align-items: baseline;
    padding: 14px 0; border-bottom: 1px solid var(--divider-glass);
}
.unitrow:last-child { border-bottom: 0; padding-bottom: 0; }

.unitrow__name {
    font-size: 13px; font-weight: 300; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.unitrow__value {
    font-size: 14px; font-weight: 400; letter-spacing: -.01em; text-align: right;
}
.unitrow__faixa {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 10px;
}
.unitrow__faixa .bar { flex: 1; height: 7px; border-radius: 4px; }
.unitrow__faixa .bar__fill { border-radius: 4px; }
.unitrow__tickets {
    width: 62px; flex: none; text-align: right;
    font-size: 12px; font-weight: 300; color: var(--muted-2);
}

/* ─── Lista de cargas ───────────────────────────────────────────────────── */

.loadrow {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--divider-glass);
}
.loadrow:last-child { border-bottom: 0; }
.loadrow__body { flex: 1 1 auto; min-width: 0; }
.loadrow__date { display: block; font-size: 13px; font-weight: 300; }
.loadrow__detail { display: block; font-size: 11px; font-weight: 300; color: var(--muted-2); }
.loadrow__status { font-size: 10px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }

/* ─── Cartão promocional escuro ─────────────────────────────────────────── */

.promo {
    display: block; background: var(--ink); border-radius: var(--r-card);
    padding: 24px 26px; transition: var(--t); color: var(--canvas);
}
.promo:hover { background: #221F1C; color: var(--canvas); }
.promo .eyebrow { color: rgba(245, 241, 232, .55); }
.promo__title {
    font-family: var(--display); font-size: 26px; font-weight: 300; line-height: 1.2;
    color: var(--canvas); margin: 10px 0 14px;
}
.promo__cta { font-size: 12px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; }

/* ============================================================================
   Tabelas de administração
   ========================================================================= */

.table { display: block; }
.table__head, .table__row { display: grid; gap: 16px; align-items: center; }

.table__head {
    font-size: 10px; font-weight: 400; letter-spacing: .20em; text-transform: uppercase;
    color: var(--muted-2); padding-bottom: 14px;
    border-bottom: 1px solid var(--hairline-glass);
}

/* A linha é uma <a> para `?detalhe=<id>`: assim tem foco, abre em separador novo e
   sobrevive a um recarregamento — coisas que a div do protótipo não tinha. A margem
   negativa faz o preenchimento da linha selecionada passar para lá do texto. */
.table__row {
    padding: 14px 12px; margin: 0 -12px; border-radius: var(--r-small);
    border-bottom: 1px solid var(--divider-glass);
    font-size: 13px; font-weight: 300; color: var(--ink);
    width: calc(100% + 24px); text-align: left; background: none;
    cursor: pointer; transition: var(--t);
}
.table__row:hover { background: rgba(255, 253, 248, .4); color: var(--ink); }
.table__row[aria-current="true"] { background: rgba(255, 253, 248, .6); }
.table__row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.table__head > :last-child, .table__row > :last-child { text-align: right; }

.table__footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-top: 18px; flex-wrap: wrap;
}

.pager { display: flex; align-items: center; gap: 6px; }
.pager__step {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid rgba(26, 26, 24, .18); background: none; color: var(--ink);
    cursor: pointer; transition: var(--t);
}
.pager__step:hover { border-color: var(--ink); }
.pager__step[aria-disabled="true"] {
    border-color: rgba(26, 26, 24, .08); color: #C6C0B4; cursor: default; pointer-events: none;
}
.pager__page {
    min-width: 30px; height: 30px; padding: 0 8px; border-radius: var(--r-card);
    border: 0; background: none; font-size: 12px; font-weight: 300; color: var(--muted);
    cursor: pointer; transition: var(--t);
}
.pager__page:hover { color: var(--ink); }
.pager__page[aria-current="page"] { background: var(--ink); color: var(--canvas); }

/* Variante de KPI das páginas de administração: valor a 28px e sem barra. */
.kpi--sm .kpi__value { font-size: 28px; }

/* ─── Painel dobrável (formulários de criar/publicar) ───────────────────── */

.dobravel[hidden] { display: none; }
.dobravel { animation: sRise .35s var(--ease-in) both; margin-bottom: 16px; }

/* ─── Zona de largar ficheiro ───────────────────────────────────────────── */

.dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center;
    border: 1px dashed rgba(26, 26, 24, .22); border-radius: var(--r-card);
    padding: 38px 26px; transition: var(--t);
}
.dropzone.is-over { border-color: var(--accent); background: rgba(180, 84, 58, .05); }
.dropzone__titulo { font-family: var(--display); font-size: 26px; font-weight: 300; line-height: 1.2; }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* ─── Drawer de detalhe ─────────────────────────────────────────────────── */

.drawer {
    position: absolute; top: 0; right: 0; bottom: 0; width: 432px; z-index: 30;
    background: var(--glass-drawer);
    -webkit-backdrop-filter: blur(26px) saturate(1.2);
    backdrop-filter: blur(26px) saturate(1.2);
    border-left: 1px solid rgba(255, 255, 255, .8);
    box-shadow: -24px 0 60px rgba(26, 26, 24, .10);
    border-radius: 10px 0 0 10px;
    padding: 30px 32px 36px; overflow-y: auto;
    animation: sSlideIn .32s var(--ease-in) both;
}

.drawer__close {
    position: absolute; top: 22px; right: 24px;
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid rgba(26, 26, 24, .18); background: none; color: var(--ink);
    cursor: pointer; transition: var(--t);
}
.drawer__close:hover { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

.deflist { display: flex; flex-direction: column; }
.deflist__row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 11px 0; border-bottom: 1px solid var(--divider-glass);
}
.deflist__row:last-child { border-bottom: 0; }
.deflist__label { font-size: 12px; font-weight: 300; letter-spacing: .1em; color: var(--muted-2); }
.deflist__value { font-size: 13px; font-weight: 300; text-align: right; }

/* ============================================================================
   Assistente
   ========================================================================= */

.chat { display: grid; grid-template-columns: 1fr 268px; height: 100%; min-height: 0; }

.chat__main { display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; z-index: 1; }

.chat__header {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 20px 40px; border-bottom: 1px solid var(--hairline-glass); flex-wrap: wrap;
}
.chat__title { font-size: 15px; font-weight: 400; margin: 0 0 3px; }
.chat__sub { font-size: 11px; font-weight: 300; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); }

.chat__list {
    flex: 1 1 0; min-height: 0; overflow-y: auto;
    padding: 32px 40px 12px;
    display: flex; flex-direction: column; gap: 24px;
}

.msg { animation: sBubble .45s var(--ease-in) both; }

.msg--user { display: flex; justify-content: flex-end; }
.msg--user .msg__bubble {
    background: var(--ink); color: var(--canvas);
    font-size: 14px; font-weight: 300; line-height: 1.55;
    padding: 14px 22px; border-radius: 20px 20px 4px 20px; max-width: 62%;
}

.msg--bot { display: flex; gap: 14px; max-width: 90%; }
.msg__avatar {
    width: 28px; height: 28px; border-radius: 50%; flex: none;
    display: grid; place-items: center; background: var(--canvas-deep);
}
.msg__avatar img { width: 20px; height: 20px; object-fit: contain; }
.msg__body { min-width: 0; }
/* `pre-wrap` porque a resposta do modelo traz quebras de linha próprias e perdê-las
   estraga listas e comparações. Texto escrito no Razor usa o modificador --copy: com
   pre-wrap, a indentação do próprio ficheiro apareceria na página. */
.msg__text {
    font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--ink-2);
    max-width: 64ch; margin: 0; white-space: pre-wrap;
}
.msg__text--copy { white-space: normal; }

.msg__meta {
    font-size: 11px; font-weight: 300; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted-2); margin: 0 0 8px;
}

.exports { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.exports__note { font-size: 11px; font-weight: 300; color: var(--faint); }

/* Indicador de consulta em curso. Aparece ao submeter e vive até a página
   navegar — não há AJAX, o ciclo é o do pedido. */
.typing { display: flex; gap: 14px; align-items: center; }
.typing[hidden] { display: none; }
.typing__pill {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--r-pill); padding: 10px 18px;
}
.typing__dots { display: inline-flex; gap: 4px; }
.typing__dots i {
    width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
    animation: sDots 1.1s ease-in-out infinite;
}
.typing__dots i:nth-child(2) { animation-delay: .18s }
.typing__dots i:nth-child(3) { animation-delay: .36s }
.typing__label {
    font-size: 11px; font-weight: 300; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted);
}

.composer { padding: 16px 40px 26px; border-top: 1px solid var(--hairline-glass); }
/* Uma linha que rola, e não duas que enrolam: assim a altura do compositor não muda
   consoante o número de sugestões. */
.composer__suggestions { display: flex; gap: 8px; flex-wrap: nowrap; margin-bottom: 12px; }
.composer__suggestions .chip { flex: none; }

.composer__row {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--r-pill); padding: 8px 10px 8px 24px;
    transition: var(--t);
}
.composer__row:focus-within { border-color: var(--accent); }

.composer__input {
    flex: 1 1 auto; border: 0; background: none; font-size: 14px; font-weight: 300;
    color: var(--ink); padding: 8px 0;
}
.composer__input:focus { outline: none; }

.composer__send {
    width: 42px; height: 42px; border-radius: 50%; flex: none;
    display: grid; place-items: center; border: 0;
    background: var(--ink); color: var(--canvas); cursor: pointer; transition: var(--t);
}
.composer__send:hover { background: var(--accent); }
.composer__send:active { transform: scale(.94); }
.composer__send:disabled { background: rgba(26, 26, 24, .12); color: var(--faint); cursor: not-allowed; }

/* ─── Rail de conversas ─────────────────────────────────────────────────── */

.rail {
    background: var(--canvas-deep); border-left: 1px solid rgba(26, 26, 24, .08);
    display: flex; flex-direction: column; min-height: 0; position: relative; z-index: 1;
}
/* O atributo `hidden` é a verdade em ecrã pequeno, onde o rail é uma folha. Em
   ecrã grande é uma coluna e está sempre lá — daí a sobreposição. */
.rail[hidden] { display: flex; }

.rail-toggle { display: none; }

/* Recolher o rail só faz sentido onde ele é coluna; em folha quem abre e fecha é o
   .rail-toggle do cabeçalho. A preferência é do utilizador e fica no browser — mesma
   mecânica da coluna de navegação. Sem JavaScript fica aberto, que é o padrão. */
.rail-collapse { display: none; }

@media (min-width: 1024px) {
    .rail-collapse {
        display: grid; place-items: center; width: 28px; height: 28px; flex: none;
        background: none; border: 0; border-radius: var(--r-small);
        color: var(--muted-2); cursor: pointer; transition: var(--t);
    }
    .rail-collapse svg { width: 15px; height: 15px; }
    .rail-collapse:hover { color: var(--ink); background: rgba(255, 253, 248, .7); }

    /* Recolhido é uma tira, não o desaparecimento da coluna: o botão que reabre vive
       lá dentro, e a tira é o que o mantém alcançável. Mesma largura da navegação
       recolhida, para as duas tiras do ecrã terem a mesma medida. */
    .chat.is-rail-collapsed { grid-template-columns: 1fr var(--nav-w-collapsed); }
    .chat.is-rail-collapsed .rail__list { display: none; }
    .chat.is-rail-collapsed .rail__head {
        flex-direction: column; align-items: center; gap: 12px; padding: 22px 0 14px;
    }
    .chat.is-rail-collapsed .rail__head .eyebrow { display: none; }
    .chat.is-rail-collapsed .rail-collapse { transform: scaleX(-1); }
}
.rail__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 20px 14px;
}
.rail__new {
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid rgba(26, 26, 24, .18); background: none; color: var(--ink);
    cursor: pointer; transition: var(--t); font-size: 14px; line-height: 1;
}
.rail__new:hover { border-color: var(--accent); color: var(--accent); }
.rail__list { overflow-y: auto; flex: 1 1 auto; min-height: 0; }

.rail__item { display: block; padding: 12px 20px; transition: var(--t); }
.rail__item:hover { background: rgba(255, 253, 248, .45); }
.rail__item[aria-current="true"] {
    background: rgba(255, 253, 248, .7); box-shadow: inset 2px 0 0 var(--accent);
}
.rail__title {
    font-size: 13px; font-weight: 300; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail__meta { font-size: 11px; font-weight: 300; color: var(--muted-2); }

/* Tabela dentro de uma resposta */
.answer-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
.answer-table th {
    font-size: 10px; font-weight: 400; letter-spacing: .20em; text-transform: uppercase;
    color: var(--muted-2); text-align: left; padding-bottom: 10px;
    border-bottom: 1px solid var(--hairline-glass);
}
.answer-table td {
    font-weight: 300; padding: 10px 0; border-bottom: 1px solid var(--divider-glass);
}
.answer-table th + th, .answer-table td + td { text-align: right; padding-left: 16px; }
.answer-table__wrap { overflow-x: auto; }

.answer-chart { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.answer-chart__row { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 300; }
.answer-chart__label { width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.answer-chart__track { flex: 1 1 auto; height: 1.1rem; background: rgba(26, 26, 24, .07); border-radius: 3px; }
.answer-chart__fill {
    display: block; height: 100%; border-radius: 3px; background: var(--ink);
    transform-origin: left; animation: sSweep .8s var(--ease-in) both;
}
.answer-chart__value { width: 7rem; text-align: right; }

/* ============================================================================
   Shell de autenticação
   ========================================================================= */

.auth {
    position: relative; min-height: 100dvh;
    display: grid; place-items: center;
    background: var(--canvas); padding: 40px 24px;
}
.auth--deep { background: var(--canvas-deep); }

.auth__col {
    position: relative; z-index: 1;
    width: 440px; max-width: 100%;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    animation: sFade .4s both;
}
.auth__col--wide { width: 720px; text-align: left; align-items: stretch; }

.auth__mark { width: 48px; height: auto; display: block; }
.auth__wordmark {
    font-size: 15px; font-weight: 300; letter-spacing: .26em; color: var(--ink);
    margin: 14px 0 26px;
}
.auth__body { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--muted); max-width: 38ch; }
.auth__form { width: 100%; display: flex; flex-direction: column; gap: 18px; margin: 30px 0 22px; }

.auth__note {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 300; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted-2);
}

.auth__card {
    background: rgba(255, 253, 248, .6); border: 1px solid var(--glass-border);
    border-radius: var(--r-card); padding: 22px 24px; text-align: left; width: 100%;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

/* ─── Gate do contrato ──────────────────────────────────────────────────── */

.gate {
    width: 720px; max-width: 100%; border-radius: 10px; padding: 44px 48px;
    position: relative; z-index: 1; animation: sRise .55s var(--ease-in) both;
}
.gate__doc {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--hairline-glass);
}
.gate__doc:last-of-type { border-bottom: 0; }

.gate__check { display: grid; place-items: center; }
.gate__check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.gate__box {
    width: 22px; height: 22px; border-radius: 4px; flex: none;
    border: 1px solid rgba(26, 26, 24, .28); background: var(--surface);
    display: grid; place-items: center; transition: var(--t);
    color: transparent; font-size: 13px; line-height: 1;
}
.gate__check input:checked + .gate__box { background: var(--ink); border-color: var(--ink); color: #fff; }
.gate__check input:focus-visible + .gate__box { outline: 2px solid var(--accent); outline-offset: 2px; }

.gate__name { font-size: 14px; font-weight: 300; }
.gate__meta { font-size: 11px; font-weight: 300; color: var(--muted-2); }
.gate__read { font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); background: none; border: 0; cursor: pointer; }
.gate__read:hover { color: var(--accent-dark); }

.gate__text {
    grid-column: 1 / -1; margin: 0 0 18px;
    max-height: 22rem; overflow-y: auto; white-space: pre-wrap;
    font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--ink-2);
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--r-small); padding: 18px 20px;
}

.gate__footer {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 26px; flex-wrap: wrap;
}

/* ============================================================================
   Barra de separadores (mobile)
   ========================================================================= */

.tabbar { display: none; }

/* ============================================================================
   Utilitários
   ========================================================================= */

.stack   { display: flex; flex-direction: column; }
.stack-6 { gap: 6px } .stack-10 { gap: 10px } .stack-16 { gap: 16px } .stack-24 { gap: 24px }
.row     { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.push    { margin-left: auto; }
.scroll-x { overflow-x: auto; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }
.text-right { text-align: right; }
.text-positive { color: var(--positive) } .text-accent { color: var(--accent) }
.text-muted-2 { color: var(--muted-2) }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Os scrollers internos escondem a barra nativa — a página não abana. */
.page, .chat__list, .rail__list, .nav__group--scroll, .drawer { scrollbar-width: none; }
.page::-webkit-scrollbar, .chat__list::-webkit-scrollbar, .rail__list::-webkit-scrollbar,
.nav__group--scroll::-webkit-scrollbar, .drawer::-webkit-scrollbar { display: none; }

/* ============================================================================
   Responsivo
   1280px  nav só com ícones
   1024px  sem nav lateral, barra de separadores em baixo, KPI 2×2
   ========================================================================= */

@media (max-width: 1279px) {
    .nav { width: var(--nav-w-collapsed); }
    .main { left: calc(var(--nav-w-collapsed) + 40px); }
    .nav__wordmark, .nav__item span, .nav__eyebrow, .nav__profile-text { display: none; }
    .nav__header { flex-direction: column; gap: 12px; padding: 0 0 22px; }
    .nav__collapse { display: none; }
    .nav__item, .nav__profile { justify-content: center; padding: 12px 0; }
    .chat { grid-template-columns: 1fr 232px; }
}

@media (max-width: 1023px) {
    .nav { display: none; }
    .main, .shell.is-collapsed .main { left: 0; }

    /* A cápsula paira sobre o conteúdo, por isso a área rolável precisa de folga no
       fim — senão o último registo fica debaixo dela. O assistente fica de fora: ele
       não rola a página, rola a lista, e é o compositor que trata da folga. Sem o
       `:not`, esta regra roubava-lhe 100px de altura de conversa. */
    .page:not(.page--flush) { padding: 22px 20px 100px; }

    /* Com a barra de ações há duas cápsulas empilhadas: 56+20 da navegação, mais
       52+16 desta. */
    .main--com-acoes .page:not(.page--flush) { padding-bottom: 164px; }

    /* Largura toda: com 232px de busca mais a ação, a cápsula não cabia em 375px e
       saía pela esquerda fora do ecrã. */
    .acoes {
        top: auto; bottom: calc(92px + env(safe-area-inset-bottom));
        left: 16px; right: 16px;
        justify-content: space-between;
    }
    .busca { width: auto; flex: 1 1 auto; min-width: 0; }

    /* Num telemóvel não há tecla ⌘ nem Ctrl para carregar. */
    .busca__atalho { display: none; }

    .grid--kpi { grid-template-columns: repeat(2, 1fr); }
    .grid--split, .grid--duo { grid-template-columns: 1fr; }

    .display--page { font-size: 30px; }
    .display--auth { font-size: 38px; }

    /* Drawer vira folha inferior */
    .drawer {
        top: auto; left: 0; right: 0; bottom: 0; width: auto;
        max-height: 80dvh; border-radius: 22px 22px 0 0;
        border-left: 0; border-top: 1px solid rgba(255, 255, 255, .8);
        box-shadow: 0 -24px 60px rgba(26, 26, 24, .12);
        padding: 22px 22px calc(26px + env(safe-area-inset-bottom));
        animation: sSheet .3s var(--ease-in) both;
    }
    .drawer::before {
        content: ""; display: block; width: 38px; height: 4px; border-radius: 2px;
        background: rgba(26, 26, 24, .18); margin: 0 auto 16px;
    }

    .scrim {
        position: absolute; inset: 0; z-index: 29;
        background: rgba(26, 26, 24, .32); animation: sFade .25s both;
    }

    /* Assistente: sem rail, folha a partir do cabeçalho */
    .chat { grid-template-columns: 1fr; }
    .rail {
        position: absolute; left: 0; right: 0; bottom: 0; top: auto; z-index: 30;
        max-height: 80dvh; border-radius: 22px 22px 0 0;
        border-left: 0; border-top: 1px solid var(--hairline);
        background: var(--surface);
        box-shadow: 0 -24px 60px rgba(26, 26, 24, .12);
        animation: sSheet .3s var(--ease-in) both;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .rail[hidden] { display: none; }

    .rail-toggle {
        display: grid; place-items: center; width: 40px; height: 40px; flex: none;
        border-radius: 50%; border: 1px solid rgba(26, 26, 24, .18);
        background: none; color: var(--ink); cursor: pointer; font-size: 15px;
        transition: var(--t);
    }
    .rail-toggle:hover { border-color: var(--accent); color: var(--accent); }

    .chat__header { padding: 16px 20px; }
    .chat__list { padding: 22px 20px 12px; gap: 20px; }
    /* O compositor fica acima da cápsula, não por baixo dela. */
    .composer { padding: 12px 20px calc(88px + env(safe-area-inset-bottom)); }

    .msg--user .msg__bubble { max-width: 82%; border-radius: 18px 18px 4px 18px; }
    .msg--bot { max-width: 100%; }
    .msg__text { line-height: 1.62; }

    /* Ações de seguimento passam a botões de largura total */
    .exports { flex-direction: column; align-items: stretch; }
    .exports .btn { width: 100%; min-height: 44px; }

    /* Campos passam a caixa */
    .input {
        height: 52px; border: 1px solid #DCD5C6; border-radius: 12px;
        background: var(--surface); padding: 0 18px; text-align: left; letter-spacing: normal;
    }
    .input:focus { border-color: var(--accent); }
    .select > .input { padding-right: 46px; }
    .select > svg { right: 18px; }
    .auth__col { width: 100%; padding: 0 10px; }
    .auth__form { gap: 6px; }
    .btn { height: 52px; padding: 0 28px; font-size: 12px; }
    .btn--sm { height: 42px; padding: 0 18px; }
    .auth .btn { height: 52px; width: 100%; }
    .drawer .btn { height: 50px; width: 100%; }

    .gate { padding: 26px 20px; border-radius: 0; border: 0; background: none; }

    /* Cápsula inferior: largura pelo conteúdo, centrada, a pairar sobre a página.
       O wrapper não intercepta toques — só a cápsula é que os recebe. */
    .tabbar {
        display: flex; justify-content: center;
        position: absolute; left: 0; right: 0;
        bottom: calc(20px + env(safe-area-inset-bottom));
        z-index: 20; pointer-events: none;
    }
    .tabbar__capsula {
        display: flex; align-items: center; gap: 4px;
        height: 56px; padding: 0 8px; border-radius: 20px;
        pointer-events: auto;
    }
    .tabbar__item {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        height: 44px; min-width: 52px; padding: 0 14px; border-radius: 16px;
        color: var(--muted-2); transition: var(--t);
    }
    .tabbar__item svg { width: 19px; height: 19px; flex: none; }

    /* O rótulo só aparece no ativo, e é isso que muda a largura da cápsula ao
       trocar de aba. A transição trata do resto. */
    .tabbar__rotulo { display: none; font-size: 12px; font-weight: 400; white-space: nowrap; }
    .tabbar__item[aria-current="page"] {
        background: var(--ink); color: var(--canvas); padding: 0 18px;
    }
    .tabbar__item[aria-current="page"] .tabbar__rotulo { display: inline; }

    /* A tabela vira cartões. Cada célula traz o seu rótulo em `data-rotulo`, por isso
       não é preciso repetir a linha inteira num segundo bloco de marcação. */
    .table__head { display: none; }
    .table__row {
        display: block !important; padding: 16px 18px; margin: 0 0 10px;
        background: var(--surface); border: 1px solid var(--hairline);
        border-radius: var(--r-card); width: 100%;
    }
    .table__row > * { display: block; overflow: visible; white-space: normal; }
    .table__row > * + * { margin-top: 10px; }
    .table__row > :last-child { text-align: left; }

    .table__row > [data-rotulo]::before {
        content: attr(data-rotulo); display: block; margin-bottom: 2px;
        font-size: 10px; font-weight: 400; letter-spacing: .20em; text-transform: uppercase;
        color: var(--muted-2);
    }
    /* O primeiro campo é o título do cartão e dispensa rótulo. */
    .table__row > :first-child { font-size: 15px; font-weight: 400; }
    .table__row > :first-child::before { content: none; }
}

@media (max-width: 560px) {
    .grid--kpi { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .kpi { padding: 14px 16px; border-radius: 12px; }
    .kpi__top { flex-direction: column; align-items: flex-start; gap: 0; }
    .kpi__value { font-size: 24px; line-height: 1; }
    .kpi__delta { font-size: 11px; font-weight: 400; margin-top: 7px; }

    /* Rótulo com altura fixa, para os quatro cartões alinharem mesmo quando um
       deles precisa de duas linhas. */
    .kpi .eyebrow { height: 24px; }

    /* Sem barra de progresso nos cartões: as percentagens eram arbitrárias e a
       barra ficava solta no pé. */
    .kpi .bar { display: none; }
    .page__header { gap: 14px; }
    .answer-chart__label { width: 7rem; }
    .answer-chart__value { width: 5.5rem; font-size: 12px; }
}

/* ============================================================================
   Avisos
   ========================================================================= */

.alert {
    border-radius: var(--r-small); padding: 14px 18px;
    font-size: 13px; font-weight: 300; line-height: 1.6;
    margin-bottom: 16px;
}
.alert-success { background: rgba(90, 107, 78, .10); color: var(--positive); }
.alert-danger  { background: rgba(180, 84, 58, .10); color: var(--accent); }
.alert-warning { background: rgba(142, 107, 58, .12); color: var(--warning); }