/* Gerado por tools/build-css.sh. Nao edite: altere os fontes em public/assets/css/src/ */
@layer reset, tokens, base, layout, components, utilities;

@layer reset {

/* --- reset.css --- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
    min-block-size: 100svh;
    -webkit-font-smoothing: antialiased;
}

img, picture, svg, video {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
}

input, button, textarea, select {
    font: inherit;
    color: inherit;
}

button { background: none; border: 0; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[class], ol[class] { list-style: none; padding: 0; }

table { border-collapse: collapse; }

}

@layer tokens {

/* --- tokens.css --- */
/* ============================================================================
   Camada 1: primitivos. Valor bruto, sem opiniao de uso.
   A escala da marca vem da propria logo: cada tom de 500 a 950 e a conversao
   OKLCH de um pixel real da imagem. O hue 253 e constante em toda ela.
   ========================================================================== */
:root {
    --brand-hue: 253;

    --brand-50:  oklch(0.972 0.016 var(--brand-hue));
    --brand-100: oklch(0.936 0.038 var(--brand-hue));
    --brand-200: oklch(0.868 0.065 var(--brand-hue));
    --brand-300: oklch(0.771 0.104 var(--brand-hue));
    --brand-400: oklch(0.646 0.146 var(--brand-hue));
    --brand-500: oklch(0.568 0.168 var(--brand-hue));
    --brand-600: oklch(0.502 0.152 var(--brand-hue));
    --brand-700: oklch(0.398 0.127 var(--brand-hue));
    --brand-800: oklch(0.328 0.104 var(--brand-hue));
    --brand-900: oklch(0.254 0.079 var(--brand-hue));
    --brand-950: oklch(0.205 0.068 var(--brand-hue));

    /* Neutros levemente tingidos pelo hue da marca: mais elegante que cinza
       puro e praticamente imperceptivel de forma consciente. */
    --gray-0:   oklch(1     0     var(--brand-hue));
    --gray-50:  oklch(0.982 0.004 var(--brand-hue));
    --gray-100: oklch(0.962 0.006 var(--brand-hue));
    --gray-200: oklch(0.922 0.009 var(--brand-hue));
    --gray-300: oklch(0.866 0.012 var(--brand-hue));
    --gray-400: oklch(0.712 0.016 var(--brand-hue));
    --gray-500: oklch(0.572 0.019 var(--brand-hue));
    --gray-600: oklch(0.470 0.019 var(--brand-hue));
    --gray-700: oklch(0.376 0.017 var(--brand-hue));
    --gray-800: oklch(0.286 0.016 var(--brand-hue));
    --gray-900: oklch(0.216 0.014 var(--brand-hue));
    --gray-950: oklch(0.152 0.012 var(--brand-hue));

    --red-100:   oklch(0.932 0.042  25);
    --red-500:   oklch(0.632 0.208  25);
    --red-600:   oklch(0.558 0.198  25);
    --red-900:   oklch(0.322 0.108  25);

    --green-100: oklch(0.942 0.044 152);
    --green-500: oklch(0.652 0.158 152);
    --green-600: oklch(0.568 0.148 152);
    --green-900: oklch(0.332 0.078 152);

    --amber-100: oklch(0.952 0.054  85);
    --amber-500: oklch(0.762 0.158  85);
    --amber-600: oklch(0.678 0.158  85);
    --amber-900: oklch(0.378 0.088  85);

    /* Site publico: salvia (verde calmo) e areia (quente). Tiram o peso do
       azul em quem chega pela primeira vez; a marca fica na logo e no titulo. */
    --sage-hue: 170;
    --sage-50:  oklch(0.972 0.014 var(--sage-hue));
    --sage-100: oklch(0.936 0.028 var(--sage-hue));
    --sage-200: oklch(0.872 0.042 var(--sage-hue));
    --sage-300: oklch(0.784 0.056 var(--sage-hue));
    --sage-500: oklch(0.612 0.068 var(--sage-hue));
    --sage-700: oklch(0.452 0.062 var(--sage-hue));
    --sage-800: oklch(0.372 0.052 var(--sage-hue));
    --sage-900: oklch(0.282 0.040 var(--sage-hue));

    --sand-50:  oklch(0.978 0.012 80);
    --sand-100: oklch(0.952 0.026 80);
    --sand-200: oklch(0.912 0.042 78);
    --sand-300: oklch(0.858 0.062 75);
}

/* ============================================================================
   Camada 2: semanticos. Nomeiam intencao, nunca aparencia.
   Componente le daqui; nunca do primitivo.
   ========================================================================== */
:root {
    color-scheme: light;

    --color-canvas:         var(--gray-100);
    --color-surface:        var(--gray-0);
    --color-surface-raised: var(--gray-0);
    --color-surface-sunken: var(--gray-50);
    --color-surface-hover:  var(--gray-100);

    --color-text:           var(--gray-900);
    --color-text-muted:     var(--gray-600);
    --color-text-subtle:    var(--gray-500);
    --color-text-on-accent: var(--gray-0);

    --color-border:        var(--gray-200);
    --color-border-strong: var(--gray-300);
    --color-border-focus:  var(--brand-500);

    --color-action:        var(--brand-600);
    --color-action-hover:  var(--brand-700);
    --color-action-subtle: var(--brand-50);
    --color-action-text:   var(--brand-700);

    --color-danger:         var(--red-600);
    --color-danger-subtle:  var(--red-100);
    --color-danger-text:    var(--red-900);
    --color-success:        var(--green-600);
    --color-success-subtle: var(--green-100);
    --color-success-text:   var(--green-900);
    --color-warning:        var(--amber-600);
    --color-warning-subtle: var(--amber-100);
    --color-warning-text:   var(--amber-900);

    /* A barra superior e sempre escura, nos dois temas: e a assinatura da
       marca e o fundo sobre o qual a logo foi desenhada. */
    --color-brand-bar: linear-gradient(135deg,
        var(--brand-900) 0%, var(--brand-700) 55%, var(--brand-500) 100%);
    --color-on-brand-bar:       oklch(1 0 0 / 0.84);
    --color-on-brand-bar-hover: oklch(1 0 0);
    --color-brand-bar-hover-bg:        oklch(1 0 0 / 0.14);
    --color-brand-bar-hover-bg-strong: oklch(1 0 0 / 0.24);
    --color-overlay:                   oklch(0 0 0 / 0.5);

    /* Tela de login: fundo da marca, nos dois temas. As luzes radiais imitam
       o brilho da esfera da logo. */
    --color-login-canvas:
        radial-gradient(circle at 20% 15%, oklch(from var(--brand-500) l c h / 0.38), transparent 55%),
        radial-gradient(circle at 85% 80%, oklch(from var(--brand-600) l c h / 0.32), transparent 50%),
        var(--brand-950);

    /* A arte da logo tem fundo branco: no tema escuro ela ganha uma placa
       clara para nao recortar em cima do card. */
    --color-logo-plate: var(--gray-0);

    /* Site publico (pagina inicial). */
    --color-pub-topo:          var(--gray-0);
    --color-pub-hero:          linear-gradient(180deg, var(--sand-50) 0%, var(--sage-50) 100%);
    --color-pub-titulo:        var(--brand-950);
    --color-pub-sol:           var(--sand-300);
    --color-pub-morro-fundo:   var(--sage-100);
    --color-pub-morro-meio:    var(--sage-200);
    --color-pub-morro-frente:  var(--sage-300);
    --color-pub-acento:        var(--sage-700);
    --color-pub-acento-hover:  var(--sage-800);
    --color-pub-sobre-acento:  var(--gray-0);
    --color-pub-acento-suave:  var(--sage-100);
    --color-pub-acento-texto:  var(--sage-800);
    --color-pub-chip:          var(--sand-100);
    --color-pub-chip-texto:    var(--gray-800);
}

/* ---------------------------------------------------------------- dark mode
   Reaponta os semanticos. Nenhum componente e tocado.
   data-theme="dark" e escrito no <html> pelo script anti-flash.
   So na tela: impresso (RAT, termo) sai sempre no tema claro.
   -------------------------------------------------------------------------- */
@media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --color-canvas:         var(--gray-950);
        --color-surface:        var(--gray-900);
        --color-surface-raised: var(--gray-800);
        --color-surface-sunken: var(--gray-950);
        --color-surface-hover:  var(--gray-800);

        --color-text:           var(--gray-100);
        --color-text-muted:     var(--gray-300);
        --color-text-subtle:    var(--gray-400);

        --color-border:        var(--gray-800);
        --color-border-strong: var(--gray-700);

        --color-action:        var(--brand-400);
        --color-action-hover:  var(--brand-300);
        --color-action-subtle: oklch(0.300 0.062 var(--brand-hue));
        --color-action-text:   var(--brand-300);

        --color-danger:         oklch(0.700 0.178  25);
        --color-danger-subtle:  oklch(0.282 0.068  25);
        --color-danger-text:    oklch(0.852 0.078  25);
        --color-success:        oklch(0.722 0.138 152);
        --color-success-subtle: oklch(0.282 0.058 152);
        --color-success-text:   oklch(0.862 0.068 152);
        --color-warning:        oklch(0.802 0.138  85);
        --color-warning-subtle: oklch(0.302 0.058  85);
        --color-warning-text:   oklch(0.882 0.068  85);

        /* Sombra nao funciona no escuro: profundidade vem de superficie. */
        --shadow-sm: none;
        --shadow-md: 0 0 0 1px var(--gray-800);
        --shadow-lg: 0 8px 24px oklch(0 0 0 / 0.5);

        --color-pub-topo:          var(--gray-900);
        --color-pub-hero:          linear-gradient(180deg, var(--gray-950) 0%, oklch(0.240 0.026 var(--sage-hue)) 100%);
        --color-pub-titulo:        var(--gray-50);
        --color-pub-sol:           oklch(0.520 0.050 75);
        --color-pub-morro-fundo:   oklch(0.270 0.022 var(--sage-hue));
        --color-pub-morro-meio:    oklch(0.310 0.030 var(--sage-hue));
        --color-pub-morro-frente:  oklch(0.360 0.038 var(--sage-hue));
        --color-pub-acento:        var(--sage-300);
        --color-pub-acento-hover:  var(--sage-200);
        --color-pub-sobre-acento:  var(--gray-950);
        --color-pub-acento-suave:  oklch(0.300 0.034 var(--sage-hue));
        --color-pub-acento-texto:  var(--sage-200);
        --color-pub-chip:          oklch(0.300 0.026 80);
        --color-pub-chip-texto:    var(--gray-100);
    }
}

@media screen {
[data-theme="dark"] {
    color-scheme: dark;

    --color-canvas:         var(--gray-950);
    --color-surface:        var(--gray-900);
    --color-surface-raised: var(--gray-800);
    --color-surface-sunken: var(--gray-950);
    --color-surface-hover:  var(--gray-800);

    --color-text:           var(--gray-100);
    --color-text-muted:     var(--gray-300);
    --color-text-subtle:    var(--gray-400);

    --color-border:        var(--gray-800);
    --color-border-strong: var(--gray-700);

    --color-action:        var(--brand-400);
    --color-action-hover:  var(--brand-300);
    --color-action-subtle: oklch(0.300 0.062 var(--brand-hue));
    --color-action-text:   var(--brand-300);

    --color-danger:         oklch(0.700 0.178  25);
    --color-danger-subtle:  oklch(0.282 0.068  25);
    --color-danger-text:    oklch(0.852 0.078  25);
    --color-success:        oklch(0.722 0.138 152);
    --color-success-subtle: oklch(0.282 0.058 152);
    --color-success-text:   oklch(0.862 0.068 152);
    --color-warning:        oklch(0.802 0.138  85);
    --color-warning-subtle: oklch(0.302 0.058  85);
    --color-warning-text:   oklch(0.882 0.068  85);

    --shadow-sm: none;
    --shadow-md: 0 0 0 1px var(--gray-800);
    --shadow-lg: 0 8px 24px oklch(0 0 0 / 0.5);

    --color-pub-topo:          var(--gray-900);
    --color-pub-hero:          linear-gradient(180deg, var(--gray-950) 0%, oklch(0.240 0.026 var(--sage-hue)) 100%);
    --color-pub-titulo:        var(--gray-50);
    --color-pub-sol:           oklch(0.520 0.050 75);
    --color-pub-morro-fundo:   oklch(0.270 0.022 var(--sage-hue));
    --color-pub-morro-meio:    oklch(0.310 0.030 var(--sage-hue));
    --color-pub-morro-frente:  oklch(0.360 0.038 var(--sage-hue));
    --color-pub-acento:        var(--sage-300);
    --color-pub-acento-hover:  var(--sage-200);
    --color-pub-sobre-acento:  var(--gray-950);
    --color-pub-acento-suave:  oklch(0.300 0.034 var(--sage-hue));
    --color-pub-acento-texto:  var(--sage-200);
    --color-pub-chip:          oklch(0.300 0.026 80);
    --color-pub-chip-texto:    var(--gray-100);
}
}

/* ------------------------------------------------- espacamento, tipo, forma */
:root {
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    --gap-tight:   var(--space-2);
    --gap-default: var(--space-4);
    --gap-loose:   var(--space-6);

    --pad-card:    var(--space-5);
    --pad-cell:    var(--space-3);
    --pad-control: var(--space-3);

    /* Telas de operacao (listagens longas) pedem densidade maior sem que
       nenhum componente precise ser tocado. */
    --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;

    --text-h3: clamp(1.125rem, 0.95rem + 0.5vw, 1.25rem);
    --text-h2: clamp(1.25rem,  1.05rem + 0.8vw, 1.5rem);
    --text-h1: clamp(1.5rem,   1.2rem + 1.4vw, 2rem);
    --text-metric: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);

    --leading-tight:  1.2;
    --leading-snug:   1.45;
    --leading-normal: 1.6;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semi:   600;
    --weight-bold:   700;

    --tracking-tight: -0.02em;
    --tracking-wide:   0.06em;

    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-full: 9999px;

    --border-width: 1px;
    --border-accent-width: 4px;  /* faixa lateral de indicador e de alerta */
    --ring-width: 3px;           /* halo de foco em campo */
    --press-offset: 1px;         /* deslocamento do botao pressionado */

    --shadow-sm: 0 1px 2px oklch(0.205 0.068 253 / 0.06);
    --shadow-md: 0 1px 3px oklch(0.205 0.068 253 / 0.09), 0 4px 10px oklch(0.205 0.068 253 / 0.05);
    --shadow-lg: 0 2px 6px oklch(0.205 0.068 253 / 0.09), 0 14px 32px oklch(0.205 0.068 253 / 0.12);

    --duration-fast: 120ms;
    --duration-base: 180ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;

    --measure-app: 75rem;
    --altura-topbar: 3.5rem;     /* logo 2.5rem + respiro: onde o menu lateral gruda */
    --largura-sidebar: 13.5rem;
}

[data-density="compact"] {
    --pad-card: var(--space-4);
    --pad-cell: var(--space-2);
    --gap-default: var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 1ms;
        --duration-base: 1ms;
    }

    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

}

@layer base {

/* --- base.css --- */
body {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: var(--leading-snug);
    color: var(--color-text);
    background: var(--color-canvas);
}

h1, h2, h3 {
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
}

h1 { font-size: var(--text-h1); font-weight: var(--weight-bold); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-semi); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-semi); }

p, li { text-wrap: pretty; }

a { color: var(--color-action-text); }

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

/* O anel de foco sobre a barra escura precisa ser claro para ser visto. */
.l-topbar :focus-visible { outline-color: var(--color-on-brand-bar-hover); }

}

@layer layout {

/* --- layout.css --- */
.l-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: var(--altura-topbar);
    padding: var(--space-2) clamp(var(--space-4), 4vw, var(--space-6));
    background: var(--color-brand-bar);
    box-shadow: var(--shadow-md);
}

.l-topbar__brand { display: inline-flex; align-items: center; }
.l-topbar__brand img { block-size: 2.5rem; inline-size: auto; }

/* Tema e conta, sempre no canto direito. */
.l-topbar__acoes {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
}

/* Menu lateral + conteudo. O menu gruda abaixo da barra e rola sozinho
   quando a lista passa da altura da tela. */
.l-app { display: flex; align-items: flex-start; }

.l-app__conteudo {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-inline-size: 0;
}

.l-sidebar {
    position: sticky;
    inset-block-start: var(--altura-topbar);
    display: flex;
    flex: none;
    flex-direction: column;
    gap: var(--space-1);
    inline-size: var(--largura-sidebar);
    min-block-size: calc(100vh - var(--altura-topbar));
    max-block-size: calc(100vh - var(--altura-topbar));
    overflow-y: auto;
    padding: var(--space-4) var(--space-3);
    border-inline-end: var(--border-width) solid var(--color-border);
    background: var(--color-surface);
}

.l-sidebar__titulo {
    margin: var(--space-4) var(--space-3) var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-subtle);
}

.l-sidebar__link {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-inline-start: var(--border-accent-width) solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.l-sidebar__link:hover { background: var(--color-surface-hover); }

.l-sidebar__link[aria-current="page"] {
    border-inline-start-color: var(--color-action);
    background: var(--color-action-subtle);
    color: var(--color-action-text);
    font-weight: var(--weight-semi);
}

/* Escondido pelo usuario: o conteudo ocupa a largura toda. */
@media (min-width: 48.0625rem) {
    [data-menu="fechado"] .l-sidebar { display: none; }
}

/* Sem JavaScript, na tela estreita o menu vira uma lista acima do conteudo. */
@media (max-width: 48rem) {
    .l-app { flex-direction: column; align-items: stretch; }
    .l-sidebar { position: static; inline-size: auto; min-block-size: 0; max-block-size: none; border-inline-end: 0; }
}

.l-topbar__nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.l-main {
    inline-size: 100%;
    max-inline-size: var(--measure-app);
    margin-inline: auto;
    padding: clamp(var(--space-4), 4vw, var(--space-6))
             clamp(var(--space-4), 4vw, var(--space-6))
             var(--space-7);

    /* Espaco vertical entre as secoes da pagina. Era isto que faltava:
       os cartoes vinham colados porque cada um so tinha margem propria. */
    display: flex;
    flex-direction: column;
    gap: var(--gap-default);
}

.l-footer {
    padding: var(--space-6) var(--space-4) var(--space-7);
    text-align: center;
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
}

/* Cabecalho de pagina: titulo a esquerda, acoes a direita.
   Nunca empilha em tela larga; so quebra quando falta largura de verdade. */
.l-pagehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gap-default);
    flex-wrap: wrap;
}

.l-pagehead__title h1 { margin: 0; }

.l-pagehead__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

@media (max-width: 48rem) {
    .l-topbar { padding-inline: var(--space-4); }
    .l-topbar__brand img { block-size: 2.125rem; }
}

/* Conteudo principal + coluna de apoio. Layout de pagina: media query. */
.l-colunas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-default);
    align-items: start;
}

@media (min-width: 60rem) {
    .l-colunas { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .l-colunas--painel { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

}

@layer components {

/* --- components/alert.css --- */
.c-alert {
    inline-size: 100%;
    max-inline-size: var(--measure-app);
    margin-inline: auto;
    margin-block-start: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border-inline-start: var(--border-accent-width) solid currentColor;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.c-alert--success { background: var(--color-success-subtle); color: var(--color-success-text); }
.c-alert--error   { background: var(--color-danger-subtle);  color: var(--color-danger-text); }
.c-alert--warning { background: var(--color-warning-subtle); color: var(--color-warning-text); }

.c-alert--inline { margin: 0 0 var(--space-4); max-inline-size: none; }

/* --- components/assistente.css --- */
/* Assistente de vendas: botao redondo fixo no canto e o balao com o proximo
   passo. E um <details>: sem JavaScript abre e fecha do mesmo jeito. */
.c-assistente {
    position: fixed;
    inset-block-end: var(--space-4);
    inset-inline-end: var(--space-4);
    z-index: var(--z-sticky);
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: var(--space-2);
}

.c-assistente__botao {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border-radius: var(--radius-full);
    background: var(--color-action);
    color: var(--color-text-on-accent);
    box-shadow: var(--shadow-lg);
    list-style: none;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-out);
}
.c-assistente__botao::-webkit-details-marker { display: none; }
.c-assistente__botao:hover { background: var(--color-action-hover); transform: translateY(calc(var(--press-offset) * -2)); }
.c-assistente__botao:focus-visible { outline: var(--ring-width) solid var(--color-border-focus); outline-offset: var(--border-width); }

.c-assistente__avatar { inline-size: 2.5rem; block-size: 2.5rem; }
.c-assistente__rosto { fill: var(--color-surface); }
.c-assistente__olho { fill: var(--color-text); }
.c-assistente__boca { fill: none; stroke: var(--color-text); stroke-width: 1.8; stroke-linecap: round; }
.c-assistente__gravata { fill: var(--color-warning); }

/* "!" quando ha o que fazer hoje. Cor + sinal escrito. */
.c-assistente__aviso {
    position: absolute;
    inset-block-start: calc(var(--space-1) * -1);
    inset-inline-end: calc(var(--space-1) * -1);
    display: grid;
    place-items: center;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    border: var(--border-width) solid var(--color-surface);
    border-radius: var(--radius-full);
    background: var(--color-danger);
    color: var(--color-text-on-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

.c-assistente:not([open])[data-humor="alerta"] .c-assistente__botao { animation: assistente-chama 2.4s var(--ease-out) 3; }

@keyframes assistente-chama {
    0%, 70%, 100% { transform: none; }
    80% { transform: translateY(calc(var(--space-2) * -1)); }
    90% { transform: none; }
}

.c-assistente__balao {
    display: grid;
    gap: var(--space-3);
    inline-size: min(24rem, calc(100vw - var(--space-4) * 2));
    max-block-size: min(36rem, calc(100dvh - 7rem));
    overflow-y: auto;
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-xl);
    border-end-end-radius: var(--radius-sm);
    background: var(--color-surface-raised);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
}

.c-assistente__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }

.c-assistente__nome {
    margin: 0;
    color: var(--color-action-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.c-assistente__fechar { font-size: var(--text-md); line-height: 1; }

.c-assistente__fala { margin: 0; font-size: var(--text-md); line-height: 1.45; }

.c-assistente__meta { display: grid; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.c-assistente__meta .c-progresso__barra { block-size: var(--space-2); }

.c-assistente__passos {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding-inline-start: var(--space-5);
    list-style: decimal;
    font-size: var(--text-sm);
}

.c-assistente__msg {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
}

.c-assistente__canal { margin: 0; font-size: var(--text-xs); font-weight: var(--weight-semi); }
.c-assistente__assunto { margin: 0; font-size: var(--text-xs); }
.c-assistente__texto { font-size: var(--text-sm); resize: vertical; }
.c-assistente__botoes { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.c-assistente__acao { inline-size: 100%; }

.c-assistente__porque {
    margin: 0;
    padding-inline-start: var(--space-3);
    border-inline-start: var(--border-accent-width) solid var(--color-warning);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* Na impressao o assistente nao aparece. */
@media print {
    .c-assistente { display: none; }
}

/* --- components/badge.css --- */
.c-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    line-height: 1.4;
    white-space: nowrap;
}

/* Par fundo suave + texto escuro da mesma familia: passa AA sem esforco,
   o que fundo saturado com texto branco frequentemente nao passa. */
.c-badge--pendente     { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.c-badge--em_andamento { background: var(--color-action-subtle);  color: var(--color-action-text); }
.c-badge--concluido    { background: var(--color-success-subtle); color: var(--color-success-text); }
.c-badge--cancelado    { background: var(--color-danger-subtle);  color: var(--color-danger-text); }
.c-badge--neutro       { background: var(--color-surface-sunken); color: var(--color-text-muted); }

/* Status de chamado. em_atendimento e cancelado reaproveitam as cores acima. */
.c-badge--aberto         { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.c-badge--em_atendimento { background: var(--color-action-subtle);  color: var(--color-action-text); }
.c-badge--resolvido      { background: var(--color-success-subtle); color: var(--color-success-text); }
.c-badge--encerrado      { background: var(--color-surface-sunken); color: var(--color-text-muted); }

/* Etiqueta de tipo: a cor vem do banco, entao o contraste do texto e
   garantido no proprio token, nao no valor gravado. */
/* Etiqueta de tipo. A cor vem do banco, entao ela entra como --tag-color e o
   componente a usa so como fundo tingido e borda: o texto continua sendo o
   token de texto do tema. Cor gravada pelo usuario nunca decide contraste. */
.c-tag {
    --tag-color: var(--color-action);

    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border: var(--border-width) solid color-mix(in oklch, var(--tag-color) 40%, transparent);
    border-radius: var(--radius-full);
    background: color-mix(in oklch, var(--tag-color) 18%, var(--color-surface));
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
}

/* Situacao do projeto. Mesmo par fundo suave + texto escuro dos outros. */
.c-badge--no_prazo { background: var(--color-success-subtle); color: var(--color-success-text); }
.c-badge--atencao  { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.c-badge--critico  { background: var(--color-danger-subtle);  color: var(--color-danger-text); }
.c-badge--pausado  { background: var(--color-surface-sunken); color: var(--color-text-muted); }

/* --- components/button.css --- */
.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding-block: var(--space-3);
    padding-inline: var(--space-5);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-md);
    background: var(--color-action);
    color: var(--color-text-on-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.c-btn:hover { background: var(--color-action-hover); box-shadow: var(--shadow-sm); }
.c-btn:active { transform: translateY(var(--press-offset)); }

.c-btn[disabled], .c-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.c-btn--secondary {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}
.c-btn--secondary:hover { background: var(--color-surface-hover); }

.c-btn--quiet {
    padding-inline: var(--space-3);
    background: none;
    color: var(--color-action-text);
}
.c-btn--quiet:hover { background: var(--color-action-subtle); box-shadow: none; }

/* Botao de acao dentro da barra escura do topo. */
.c-btn--on-bar {
    padding-block: var(--space-2);
    padding-inline: var(--space-3);
    background: none;
    border-radius: var(--radius-full);
    color: var(--color-on-brand-bar);
    font-weight: var(--weight-medium);
}
.c-btn--on-bar:hover {
    background: var(--color-brand-bar-hover-bg);
    color: var(--color-on-brand-bar-hover);
    box-shadow: none;
}

/* Botao so de icone: precisa de rotulo acessivel no HTML. */
.c-btn--icon {
    inline-size: 2.375rem;
    block-size: 2.375rem;
    padding: 0;
    border: var(--border-width) solid var(--color-brand-bar-hover-bg);
    border-radius: var(--radius-full);
    background: var(--color-brand-bar-hover-bg);
    color: var(--color-on-brand-bar-hover);
    font-size: var(--text-md);
}
.c-btn--icon:hover { background: var(--color-brand-bar-hover-bg-strong); box-shadow: none; }

.c-btn--block { inline-size: 100%; }

/* Botao de linha de lista: mesmo peso visual de um rotulo. */
.c-btn--mini {
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    font-size: var(--text-xs);
}

/* --- components/calculo.css --- */
/* Tabela de horas e deslocamento do RAT. Herda tudo de c-table; aqui so
   entram os campos numericos e o total. */
.c-table--calculo td { vertical-align: middle; }

.c-table--calculo .c-field__control {
    inline-size: 7rem;
    padding-block: var(--space-2);
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.c-calculo__par { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.c-calculo__par .c-field__control { inline-size: 5rem; }

.c-calculo__un { font-size: var(--text-xs); color: var(--color-text-subtle); }

.c-calculo__subtotal {
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-semi);
    white-space: nowrap;
    text-align: end;
}

/* Item que o escopo nao cobra: fica visivel, desligado e rotulado. Sumir
   com a linha esconderia a regra em vez de explica-la. */
.c-table--calculo tr.is-off td { opacity: 0.55; }

.c-calculo__fora {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}

.c-calculo__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: var(--border-width) solid var(--color-border);
}

.c-calculo__rotulo {
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}

.c-calculo__total {
    font-size: var(--text-metric);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-tight);
    color: var(--color-action-text);
}

fieldset.c-card { margin: 0; min-inline-size: 0; }
fieldset.c-card > legend { float: left; inline-size: 100%; margin-block-end: var(--space-4); padding: 0; }
fieldset.c-card > legend + * { clear: both; }

/* --- components/card.css --- */
.c-card {
    padding: var(--pad-card);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.c-card__title {
    margin-block-end: var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}

.c-card--danger { border-inline-start: var(--border-accent-width) solid var(--color-danger); }
.c-card--danger .c-card__title { color: var(--color-danger); }

/* Cartao de formulario curto: linha longa demais atrapalha a leitura de
   campos empilhados. */
.c-card--estreito { max-inline-size: 28rem; }

.c-card--success { border-inline-start: var(--border-accent-width) solid var(--color-success); }
.c-card--success .c-card__title { color: var(--color-success-text); }

/* --- components/chamado.css --- */
/* Tela do chamado: ficha de resumo, alertas do protocolo, marcos e linha do
   tempo. So token semantico; nenhum valor bruto. */

.c-ficha {
    container-type: inline-size;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3) var(--space-5);
    margin: 0;
}

@container (min-width: 36rem) {
    .c-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .c-ficha__full { grid-column: 1 / -1; }
}

.c-ficha dt {
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.c-ficha dd { margin: 0; }

.c-alertas {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-alertas__item {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-weight: var(--weight-semi);
}

.c-alertas__item--critico { background: var(--color-danger-subtle);  color: var(--color-danger-text); }
.c-alertas__item--atencao { background: var(--color-warning-subtle); color: var(--color-warning-text); }

.c-marco {
    border-block-start: var(--border-width) solid var(--color-border);
    padding-block: var(--space-3);
}

.c-marco:first-of-type { border-block-start: 0; padding-block-start: 0; }

.c-marco__titulo {
    min-block-size: var(--space-6);
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: var(--weight-semi);
    color: var(--color-action-text);
}

.c-marco[open] > .c-marco__titulo { margin-block-end: var(--space-3); }

.c-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-timeline__item {
    position: relative;
    padding-block: 0 var(--space-4);
    padding-inline-start: var(--space-5);
    border-inline-start: var(--border-width) solid var(--color-border-strong);
}

.c-timeline__item:last-child { padding-block-end: 0; }

.c-timeline__item::before {
    content: "";
    position: absolute;
    inset-block-start: var(--space-1);
    inset-inline-start: calc(var(--space-2) * -1 + var(--border-width) * -0.5);
    inline-size: var(--space-4);
    block-size: var(--space-4);
    border: var(--border-width) solid var(--color-surface);
    border-radius: var(--radius-full);
    background: var(--color-text-subtle);
}

.c-timeline__item--abertura::before,
.c-timeline__item--inicio::before       { background: var(--color-action); }
.c-timeline__item--confirmacao::before,
.c-timeline__item--atualizacao::before  { background: var(--color-warning); }
.c-timeline__item--escalonamento::before,
.c-timeline__item--cancelamento::before { background: var(--color-danger); }
.c-timeline__item--resolucao::before,
.c-timeline__item--encerramento::before { background: var(--color-success); }

.c-timeline__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    align-items: baseline;
    margin: 0;
}

.c-timeline__head time {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.c-timeline__text { margin: var(--space-1) 0 0; }

/* --- components/chart.css --- */
/* Grafico.
   O canvas e a melhoria; a tabela dentro do <figure> e o conteudo real.
   Sem JavaScript ela fica visivel e responde a mesma pergunta. */
.c-chart { margin: 0; }

/* Com maintainAspectRatio desligado o Chart.js copia a altura do pai. Sem
   pai de altura fixa o canvas e o figure crescem um ao outro sem fim. */
.c-chart__area { display: none; }
.js .c-chart__area {
    display: block;
    position: relative;
    block-size: 14rem;
}

.js .c-chart__data {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.c-chart__legend {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-block-start: var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    color: var(--color-text-muted);
}

.c-chart__key {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.c-chart__swatch {
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--swatch, var(--color-action));
}

/* --- components/copy.css --- */
/* Valor para copiar com um clique. O campo e somente leitura e selecionavel,
   entao sem JavaScript continua dando para copiar na mao. */
.c-copy {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}

.c-copy__value {
    flex: 1 1 auto;
    min-inline-size: 0;
    font-family: var(--font-mono);
}

/* --- components/documento.css --- */
/* Folha do RAT. Na tela e um cartao; no papel vira o documento inteiro. */
.c-doc {
    max-inline-size: 48rem;
    margin-inline: auto;
    padding: var(--space-6);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.c-doc__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block-end: var(--space-4);
    border-block-end: var(--border-accent-width) solid var(--color-action);
}

.c-doc__logo {
    block-size: 3rem;
    inline-size: auto;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--color-logo-plate);
}

.c-doc__titulo { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); text-align: end; }
.c-doc__num { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; text-align: end; }

.c-doc__secao {
    margin-block: var(--space-5) 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}

.c-doc__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-3) var(--space-5);
    margin-block: var(--space-3) 0;
}

.c-doc__campo { min-inline-size: 0; }
.c-doc__campo dt { font-size: var(--text-xs); color: var(--color-text-subtle); }
.c-doc__campo dd { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semi); overflow-wrap: anywhere; }

.c-doc__tabela { margin-block-start: var(--space-3); }

.c-doc__texto {
    margin-block: var(--space-3) 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.c-doc__assinaturas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-6);
    margin-block-start: var(--space-7);
    break-inside: avoid;
}

.c-doc__linha {
    padding-block-start: var(--space-2);
    border-block-start: var(--border-width) solid var(--color-border-strong);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* No papel so o documento. O tema escuro nao vale na impressao (tokens.css).
   A tabela nao vira cartoes: a quebra responsiva e por largura disponivel. */
@media print {
    .l-topbar, .l-sidebar, .l-footer, .u-no-print, .c-alert { display: none; }
    .l-main { padding: 0; }
    .c-doc { max-inline-size: none; border: 0; box-shadow: none; padding: 0; }
    .c-doc__tabela thead { display: table-header-group; }
    .c-doc__tabela tr { display: table-row; }
    .c-doc__tabela td, .c-doc__tabela th { display: table-cell; }
    .c-doc__tabela td::before { content: none; }
}

/* --- components/empty.css --- */
.c-empty {
    padding-block: var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.c-empty__title {
    margin-block-end: var(--space-1);
    font-size: var(--text-md);
    font-weight: var(--weight-semi);
    color: var(--color-text);
}

.c-empty__action { margin-block-start: var(--space-4); }

/* Esqueleto de carregamento: usado quando a lista chega por JS. */
.c-skeleton {
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg,
        var(--color-surface-sunken) 25%,
        var(--color-surface-hover) 37%,
        var(--color-surface-sunken) 63%);
    background-size: 400% 100%;
    animation: c-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes c-skeleton-shimmer {
    from { background-position: 100% 50%; }
    to   { background-position: 0 50%; }
}

/* --- components/field.css --- */
/* O formulario e o container das consultas: o grid reage a largura que ele
   tem, nao a da janela, entao o mesmo form serve pagina cheia e coluna. */
.c-form { container-type: inline-size; }

.c-form__grid {
    display: grid;
    grid-template-columns: 1fr;
    /* row-gap explicito. Sem ele os campos ficam colados. */
    gap: var(--space-4) var(--space-5);
}

.c-field { min-inline-size: 0; }

.c-field__label {
    display: block;
    margin-block-end: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-text-muted);
}

.c-field__control {
    inline-size: 100%;
    padding: var(--pad-control);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.c-field__control:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 var(--ring-width) color-mix(in oklch, var(--color-action) 25%, transparent);
}

.c-field__control[readonly] {
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.c-field__control[aria-invalid="true"] { border-color: var(--color-danger); }

textarea.c-field__control { resize: vertical; min-block-size: 5.5rem; }

.c-field__error {
    margin-block-start: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-danger);
}

.c-field__hint {
    margin-block-start: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
}

.c-field--check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.c-field--check input {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    accent-color: var(--color-action);
}

.c-field--check label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

/* Rodape de acoes do formulario: botoes lado a lado, sempre. */
.c-form__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-block-start: var(--space-5);
    padding-block-start: var(--space-5);
    border-block-start: var(--border-width) solid var(--color-border);
}

@container (min-width: 34rem) {
    .c-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .c-field--wide { grid-column: span 2; }
    .c-field--full { grid-column: 1 / -1; }
}

@container (min-width: 56rem) {
    .c-form__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .c-field--wide { grid-column: span 2; }
    .c-field--full { grid-column: 1 / -1; }
}

/* --- components/filters.css --- */
/* Barra de filtros: mesma logica do formulario, mas as acoes ficam sempre
   lado a lado no fim da linha, nunca empilhadas. */
.c-filters { container-type: inline-size; }

.c-filters__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: end;
}

.c-filters__actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: nowrap;
}

.c-filters__actions .c-btn { flex: 1 1 auto; }

@container (min-width: 34rem) {
    .c-filters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .c-filters__field--wide { grid-column: 1 / -1; }
}

@container (min-width: 56rem) {
    /* As quatro colunas de filtro mais a coluna de acoes, que nao estica. */
    .c-filters__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
    .c-filters__field--wide { grid-column: auto; }
    .c-filters__actions .c-btn { flex: 0 0 auto; }
}

/* --- components/funil.css --- */
/* Funil: colunas por etapa. Quebram em linhas conforme o espaco, entao a
   pagina nunca rola na horizontal. */
.c-funil__resumo { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-4); }

.c-funil {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--space-3);
    align-items: start;
}

.c-funil__coluna {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-block-start: var(--border-accent-width) solid var(--color-action);
    border-radius: var(--radius-lg);
    background: var(--color-surface-sunken);
}
.c-funil__coluna[data-etapa="proposta"] { border-block-start-color: var(--color-success); }

.c-funil__titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
}

.c-funil__n {
    min-inline-size: 1.75rem;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    font-size: var(--text-xs);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.c-funil__vazio { margin: 0; font-size: var(--text-xs); color: var(--color-text-subtle); }

.c-funil__card {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
}
.c-funil__card:hover { border-color: var(--color-action); box-shadow: var(--shadow-sm); }
.c-funil__card:focus-visible { outline: var(--ring-width) solid var(--color-border-focus); outline-offset: var(--border-width); }
.c-funil__card.is-atrasado { border-inline-start: var(--border-accent-width) solid var(--color-danger); }

.c-funil__empresa { font-size: var(--text-sm); font-weight: var(--weight-semi); }
.c-funil__meta, .c-funil__acao { font-size: var(--text-xs); color: var(--color-text-muted); }
.c-funil__card.is-atrasado .c-funil__acao strong { color: var(--color-danger-text); }

/* Ficha: historico de contatos. */
.c-historico { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.c-historico__item {
    display: grid;
    gap: var(--space-1);
    padding-inline-start: var(--space-3);
    border-inline-start: var(--border-accent-width) solid var(--color-border-strong);
    font-size: var(--text-sm);
}
.c-historico__item[data-resultado="respondeu"],
.c-historico__item[data-resultado="reuniao"],
.c-historico__item[data-resultado="pediu_proposta"] { border-inline-start-color: var(--color-success); }
.c-historico__item[data-resultado="sem_interesse"] { border-inline-start-color: var(--color-danger); }

.c-historico__quando { font-size: var(--text-xs); color: var(--color-text-muted); }
.c-historico__resumo { color: var(--color-text-muted); }

/* --- components/login.css --- */
.c-login {
    display: grid;
    place-items: center;
    min-block-size: 100svh;
    padding: var(--space-5) var(--space-4);
    background: var(--color-login-canvas);
}

.c-login__card {
    inline-size: 100%;
    max-inline-size: 25rem;
    padding: clamp(var(--space-5), 5vw, var(--space-6));
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.c-login__logo {
    inline-size: 100%;
    max-inline-size: 16rem;
    margin-inline: auto;
}

.c-login__subtitle {
    margin-block: var(--space-1) var(--space-5);
    text-align: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.c-login__theme {
    position: fixed;
    inset-block-start: var(--space-4);
    inset-inline-end: var(--space-4);
    z-index: var(--z-overlay);
}

/* A logo tem fundo branco: no tema escuro ganha respiro para nao destoar. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .c-login__logo {
        padding: var(--space-3);
        border-radius: var(--radius-lg);
        background: var(--color-logo-plate);
    }
}

[data-theme="dark"] .c-login__logo {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-logo-plate);
}

.c-login__aviso { margin-block-end: var(--space-4); }

.c-login__rodape {
    margin-block-start: var(--space-4);
    text-align: center;
}

.c-login__rodape { margin: var(--space-4) 0 0; text-align: center; font-size: var(--text-xs); }
.c-login__rodape a { color: var(--color-text-muted); }

/* --- components/menu.css --- */
/* Menu agrupado da barra superior. E um <details>: abre e fecha sem
   JavaScript; o JS so fecha os outros grupos, fecha no clique fora e no Esc. */
.c-menu { position: relative; }

.c-menu > summary { list-style: none; cursor: pointer; }
.c-menu > summary::-webkit-details-marker { display: none; }

.c-menu__gatilho::after {
    content: "";
    inline-size: 0.4em;
    block-size: 0.4em;
    margin-inline-start: var(--space-1);
    border-inline-end: var(--border-width) solid currentColor;
    border-block-end: var(--border-width) solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform var(--duration-fast) var(--ease-out);
}

.c-menu[open] > .c-menu__gatilho::after { transform: translateY(15%) rotate(-135deg); }

/* Grupo da pagina atual e item atual: o usuario sabe onde esta. */
.c-menu.is-current > .c-menu__gatilho,
.l-topbar__nav > .c-btn--on-bar[aria-current="page"] {
    background: var(--color-brand-bar-hover-bg);
    color: var(--color-on-brand-bar-hover);
}

.c-menu__painel {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2));
    inset-inline-start: 0;
    z-index: var(--z-overlay);
    display: grid;
    gap: var(--space-1);
    min-inline-size: 12rem;
    padding: var(--space-2);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.c-menu--direita .c-menu__painel { inset-inline-start: auto; inset-inline-end: 0; }

.c-menu__item {
    display: block;
    inline-size: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-sm);
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.c-menu__item:hover { background: var(--color-surface-hover); }

.c-menu__item[aria-current="page"] {
    background: var(--color-action-subtle);
    color: var(--color-action-text);
    font-weight: var(--weight-semi);
}

.c-menu__painel form { margin: 0; }

/* --- components/metric.css --- */
.c-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-3);
}

.c-metric {
    position: relative;
    overflow: hidden;
    padding: var(--space-4) var(--space-5);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.c-metric::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--border-accent-width);
    background: var(--color-action);
}

.c-metric--pending::before  { background: var(--color-warning); }
.c-metric--running::before  { background: var(--color-action); }
.c-metric--done::before     { background: var(--color-success); }
.c-metric--soon::before     { background: var(--color-warning); }
.c-metric--soon .c-metric__value { color: var(--color-warning-text); }
.c-metric--late::before     { background: var(--color-danger); }
.c-metric--late .c-metric__value { color: var(--color-danger-text); }

.c-metric__value {
    display: block;
    font-size: var(--text-metric);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
}

.c-metric__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}

@media (max-width: 26rem) {
    .c-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Faixa: indicadores colados numa linha so, rotulo em cima. Ocupa pouca
   altura para a lista de trabalho aparecer sem rolar a tela. */
.c-metrics--faixa {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--border-width);
    overflow: hidden;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.c-metrics--faixa .c-metric {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.c-metrics--faixa .c-metric::before { content: none; }

@media (max-width: 40rem) {
    .c-metrics--faixa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- components/navdrawer.css --- */
/* Botao do menu e painel do celular.
   Sem JavaScript o botao nao aparece e o menu lateral fica sempre visivel
   (tela larga) ou vira lista acima do conteudo (tela estreita). O JS marca
   <html class="js">: na tela larga o botao esconde ou mostra o menu; na
   estreita o menu vira painel por cima da pagina. */
.l-topbar__toggle { display: none; }
.js .l-topbar__toggle { display: inline-flex; }

@media (max-width: 48rem) {
    .js .l-sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: var(--z-modal);

        inline-size: min(18rem, 82vw);
        min-block-size: 0;
        max-block-size: none;
        box-shadow: var(--shadow-lg);

        transform: translateX(-100%);
        visibility: hidden;
        transition: transform var(--duration-base) var(--ease-out),
                    visibility var(--duration-base) var(--ease-out);
    }

    .js .l-sidebar.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .l-sidebar__backdrop {
        position: fixed;
        inset: 0;
        z-index: var(--z-overlay);
        background: var(--color-overlay);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--duration-base) var(--ease-out),
                    visibility var(--duration-base) var(--ease-out);
    }

    .l-sidebar__backdrop.is-open { opacity: 1; visibility: visible; }

    .l-topbar__brand img { block-size: 2.125rem; }
}

/* --- components/pagination.css --- */
.c-pagination {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: var(--border-width) solid var(--color-border);
}

.c-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.375rem;
    block-size: 2.375rem;
    padding-inline: var(--space-2);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out);
}

.c-pagination__link:hover { background: var(--color-surface-hover); }

.c-pagination__link[aria-current="page"] {
    background: var(--color-action);
    border-color: var(--color-action);
    color: var(--color-text-on-accent);
}

/* --- components/pendencia.css --- */
/* Linha de pendencia do projeto. */
.c-pendencias {
    container-type: inline-size;
    overflow: hidden;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.c-pendencia {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-2) var(--space-3);
    border-block-end: var(--border-width) solid var(--color-border);
}

.c-pendencia:last-child { border-block-end: 0; }
.c-pendencia__corpo { min-inline-size: 0; }

.c-pendencia__check {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin-block-start: var(--space-1);
    accent-color: var(--color-action);
}

/* Sem JavaScript o botao envia; com ele, marcar a caixa ja envia. */
.js .c-pendencia__enviar { display: none; }

.c-pendencia__texto {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    overflow-wrap: anywhere;
    cursor: pointer;
}

.c-pendencia.is-done .c-pendencia__texto {
    text-decoration: line-through;
    color: var(--color-text-subtle);
}

.c-pendencia__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin-block-start: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.c-pendencia__prazo.is-late { color: var(--color-danger-text); font-weight: var(--weight-semi); }
.c-pendencia__prazo.is-soon { color: var(--color-warning-text); font-weight: var(--weight-semi); }

/* Responder/editar na propria linha. <details> abre e fecha sem JavaScript. */
.c-pendencia__editar { margin-block-start: var(--space-2); }
.c-pendencia__editar > summary { list-style: none; }
.c-pendencia__editar > summary::-webkit-details-marker { display: none; }
.c-pendencia__editar[open] > summary { margin-block-end: var(--space-2); }

.c-pendencia__form {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
}

.c-pendencia__form-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* Nova pendencia: texto e botao numa linha, opcoes na seguinte. */
.c-nova-pendencia {
    container-type: inline-size;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    padding: var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.c-nova-pendencia__opcoes {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.c-nova-pendencia__opcoes > .c-field__control { flex: 1 1 8rem; min-inline-size: 0; inline-size: auto; }
.c-nova-pendencia .c-field__control,
.c-pendencia__form .c-field__control { padding-block: var(--space-2); }

/* Prioridade: rotulo com borda na cor da familia; o texto diz o nivel. */
.c-prio {
    padding-inline: var(--space-1);
    border: var(--border-width) solid currentColor;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.c-prio--alta  { color: var(--color-danger-text); }
.c-prio--media { color: var(--color-warning-text); }
.c-prio--baixa { color: var(--color-text-subtle); }

/* Resposta registrada na pendencia. */
.c-resposta {
    margin-block-start: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-inline-start: var(--border-accent-width) solid var(--color-action);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--color-surface-sunken);
    font-size: var(--text-sm);
}

.c-resposta__rotulo {
    display: block;
    margin-block-end: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}

.c-resposta__texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* --- components/projeto.css --- */
/* Cartao de projeto. A situacao e faixa lateral + etiqueta: cor sozinha
   nunca carrega a informacao. */
.c-projetos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
    gap: var(--gap-default);
}

.c-projetos--coluna { grid-template-columns: minmax(0, 1fr); }

.c-projeto {
    display: grid;
    gap: var(--space-2);
    min-inline-size: 0;
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-inline-start: var(--border-accent-width) solid var(--color-text-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.c-projeto[data-situacao="no_prazo"] { border-inline-start-color: var(--color-success); }
.c-projeto[data-situacao="atencao"]  { border-inline-start-color: var(--color-warning); }
.c-projeto[data-situacao="critico"]  { border-inline-start-color: var(--color-danger); }
.c-projeto[data-situacao="pausado"]  { border-inline-start-color: var(--color-text-subtle); }

.c-projeto.is-selected { outline: var(--border-accent-width) solid var(--color-action); outline-offset: calc(var(--border-width) * -1); }

.c-projeto__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.c-projeto__nome {
    min-inline-size: 0;
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--weight-semi);
    overflow-wrap: anywhere;
}

.c-projeto__nome a { color: inherit; text-decoration: none; }
.c-projeto__nome a:hover { color: var(--color-action-text); text-decoration: underline; }

.c-projeto__meta {
    margin: var(--space-1) 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    overflow-wrap: anywhere;
}

.c-projeto__next { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }

.c-projeto__notas summary {
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    color: var(--color-action-text);
}

.c-projeto__notas-texto {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.c-projeto__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.c-projeto__foot a:not(.c-btn) { color: var(--color-action-text); font-weight: var(--weight-semi); }
.c-projeto__foot .c-btn { margin-inline-start: auto; }

/* Cabecalho de secao fora de cartao: titulo + acao discreta. */
.c-secao-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.c-secao-head__titulo {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semi);
}

/* Filtro em pilulas. O atual e marcado por aria-current, nao por classe. */
.c-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.c-chip {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.75rem;
    padding: var(--space-1) var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-xs);
    text-decoration: none;
}

.c-chip:hover { border-color: var(--color-action); }

.c-chip[aria-current="true"] {
    border-color: var(--color-action);
    background: var(--color-action);
    color: var(--color-text-on-accent);
}

/* --- components/prospeccao.css --- */
/* Prospeccao: o que falta na ficha fica marcado no proprio campo e listado
   ao lado. A marca e cor + etiqueta escrita: cor sozinha nao informa. */
.c-field.is-falta .c-field__label::after,
.c-field__label.is-falta::after,
.c-passo.is-falta > .c-passo__titulo::after {
    content: "falta";
    margin-inline-start: var(--space-2);
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-warning-subtle);
    color: var(--color-warning-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    text-transform: none;
    letter-spacing: 0;
}

.c-field.is-falta .c-field__control { border-color: var(--color-warning); }
.c-passo.is-falta { border-inline-start: var(--border-accent-width) solid var(--color-warning); }

.c-falta { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.c-falta__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.c-falta__item::before {
    content: "";
    flex: none;
    inline-size: 0.875rem;
    block-size: 0.875rem;
    border: var(--border-width) solid var(--color-warning);
    border-radius: var(--radius-sm);
}

.c-duvida {
    margin: 0;
    padding: var(--space-3);
    border-inline-start: var(--border-accent-width) solid var(--color-action);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--color-surface-sunken);
    font-size: var(--text-sm);
}

.c-levantamento__atencao { color: var(--color-danger-text); font-weight: var(--weight-semi); }

/* --- components/publico.css --- */
/* Pagina institucional (raiz do site). Mesmo vocabulario de tokens do
   sistema; mobile primeiro; tema claro e escuro herdados dos tokens.
   Paleta propria (salvia e areia, tokens --color-pub-*): quem chega pela
   primeira vez deve sentir calma, nao uma tela de sistema. */

.l-publico {
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
}

.l-publico main { flex: 1 0 auto; }

/* ------------------------------------------------------------------ topo */
.c-pub-topo {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-block-end: var(--border-width) solid var(--color-border);
    background: var(--color-pub-topo);
    color: var(--color-text);
}

.c-pub-topo__marca {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-pub-titulo);
    text-decoration: none;
}

.c-pub-topo__marca img {
    display: block;
    inline-size: auto;
    block-size: 3.25rem;
    border-radius: var(--radius-md);
    background: var(--color-logo-plate);
}

.c-pub-topo__nome { display: grid; line-height: var(--leading-tight); }
.c-pub-topo__nome strong { font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.c-pub-topo__nome span { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

.c-pub-topo__nav {
    display: none;
    gap: var(--space-5);
    margin-inline: auto;
}

.c-pub-topo__nav a {
    color: var(--color-text);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.c-pub-topo__nav a:hover { color: var(--color-pub-acento); text-decoration: underline; text-underline-offset: var(--space-1); }

/* Botao de acesso sempre no canto direito. */
.c-pub-topo__acesso { margin-inline-start: auto; }

@media (min-width: 48rem) {
    .c-pub-topo { padding-inline: var(--space-6); }
    .c-pub-topo__nav { display: flex; }
    .c-pub-topo__acesso { margin-inline-start: 0; }
}

/* No celular o nome ao lado da logo so cabe abaixo do botao. */
@media (max-width: 30rem) {
    .c-pub-topo__nome span { display: none; }
}

/* ------------------------------------------------------------------ hero */
.c-pub-hero {
    position: relative;
    overflow: hidden;
    padding: var(--space-8) var(--space-4) 11rem;
    background: var(--color-pub-hero);
    color: var(--color-text);
}

.c-pub-hero__texto {
    position: relative;
    z-index: 1;
    max-inline-size: 48rem;
    margin-inline: auto;
}

.c-pub-hero h1 {
    margin: 0 0 var(--space-4);
    font-size: var(--text-h1);
    line-height: 1.15;
    letter-spacing: var(--tracking-tight);
    color: var(--color-pub-titulo);
}

.c-pub-hero__lead {
    margin: 0 0 var(--space-6);
    font-size: var(--text-lg);
    color: var(--color-text-muted);
}

/* "O que acontece depois que voce chama": previsibilidade logo abaixo dos
   botoes, que e o que tira a ansiedade de quem esta com algo parado. */
.c-pub-depois__titulo {
    margin: var(--space-6) 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-pub-titulo);
}

.c-pub-depois {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding-inline-start: var(--space-5);
    list-style: decimal;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.c-pub-hero__nota {
    margin: var(--space-4) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Paisagem: decoracao pura, atras do texto, presa ao pe do hero. */
.c-pub-paisagem {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    inline-size: 100%;
    block-size: 13rem;
    pointer-events: none;
}

.c-pub-paisagem__sol    { fill: var(--color-pub-sol); }
.c-pub-paisagem__fundo  { fill: var(--color-pub-morro-fundo); }
.c-pub-paisagem__meio   { fill: var(--color-pub-morro-meio); }
.c-pub-paisagem__frente { fill: var(--color-pub-morro-frente); }

@media (min-width: 48rem) {
    .c-pub-hero { padding-block-end: 14rem; }
    .c-pub-paisagem { block-size: 17rem; }
}

.c-pub-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.c-btn--grande-pub {
    min-block-size: var(--space-7);
    padding-inline: var(--space-6);
    font-size: var(--text-md);
}

/* Acao principal do site publico: salvia no lugar do azul do sistema. */
.c-btn--pub { background: var(--color-pub-acento); color: var(--color-pub-sobre-acento); }
.c-btn--pub:hover { background: var(--color-pub-acento-hover); }

/* --------------------------------------------------------------- secoes */
.c-pub-secao {
    max-inline-size: 64rem;
    margin-inline: auto;
    padding: var(--space-7) var(--space-4);
}

.c-pub-secao h2 {
    margin-block: 0 var(--space-5);
    font-size: var(--text-h2);
    color: var(--color-pub-titulo);
}

.c-pub-secao--alt {
    max-inline-size: none;
    background: var(--color-pub-acento-suave);
}

.c-pub-secao--alt > * {
    max-inline-size: 64rem;
    margin-inline: auto;
}

/* A secao e o container: o @container dos cards consulta o ancestral, nunca
   o proprio elemento (sem isto a grade ficava sempre em uma coluna). */
.c-pub-secao { container-type: inline-size; }

.c-pub-cards {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

@container (min-width: 40rem) {
    .c-pub-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 60rem) {
    .c-pub-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.c-pub-card {
    padding: var(--space-5);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    border-block-start: var(--border-accent-width) solid var(--color-pub-acento);
    background: var(--color-surface);
}

.c-pub-card h3 { margin: 0 0 var(--space-2); font-size: var(--text-h3); }
.c-pub-card p  { margin: 0; color: var(--color-text-muted); }

.c-pub-etapas {
    display: grid;
    gap: var(--space-4);
    margin: 0 auto var(--space-6);
    padding: 0;
    list-style: none;
}

@media (min-width: 48rem) {
    .c-pub-etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.c-pub-etapa {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}

.c-pub-etapa__num {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    inline-size: var(--space-6);
    block-size: var(--space-6);
    border-radius: var(--radius-full);
    background: var(--color-pub-acento);
    color: var(--color-pub-sobre-acento);
    font-weight: var(--weight-bold);
}

.c-pub-etapa h3 { margin: 0 0 var(--space-1); font-size: var(--text-md); }
.c-pub-etapa p  { margin: 0; color: var(--color-text-muted); }

.c-pub-setores__titulo { margin-block: 0 var(--space-3); font-size: var(--text-md); }

/* Frase de apoio abaixo de uma lista (fabricantes, clientes). So texto:
   marca de terceiro aparece pelo nome, nunca pelo logotipo. */
.c-pub-nota {
    margin-block: var(--space-5) 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.c-pub-nota--setores { margin-block: 0 var(--space-3); }

.c-pub-setores {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.c-pub-setores li {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-pub-chip);
    color: var(--color-pub-chip-texto);
    font-weight: var(--weight-semi);
    font-size: var(--text-sm);
}

.c-pub-contato {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-lg);
}

.c-pub-contato span {
    display: inline-block;
    min-inline-size: 6rem;
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}

.c-pub-contato a { color: var(--color-pub-acento-texto); }

.c-pub-rodape {
    padding: var(--space-5) var(--space-4);
    border-block-start: var(--border-width) solid var(--color-border);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.c-pub-rodape p { margin: 0; }
.c-pub-rodape a { color: inherit; }

/* Documento longo (politica de privacidade): leitura confortavel. */
.c-pub-doc { max-inline-size: 48rem; line-height: 1.6; }
.c-pub-doc h1 { margin: 0 0 var(--space-3); font-size: var(--text-h1); color: var(--color-pub-titulo); }
.c-pub-doc h2 { margin: var(--space-7) 0 var(--space-3); font-size: var(--text-h3); }
.c-pub-doc h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-md); }
.c-pub-doc p, .c-pub-doc ul, .c-pub-doc ol { margin: 0 0 var(--space-3); }
.c-pub-doc ul { list-style: disc; padding-inline-start: var(--space-5); }
.c-pub-doc ol { list-style: decimal; padding-inline-start: var(--space-5); }
.c-pub-doc a { color: var(--color-pub-acento-texto); }

.c-pub-doc__tabela {
    container-type: inline-size;
    margin: 0 0 var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.c-pub-doc__tabela table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.c-pub-doc__tabela th,
.c-pub-doc__tabela td { padding: var(--space-2) var(--space-3); text-align: start; vertical-align: top; border-block-end: var(--border-width) solid var(--color-border); }
.c-pub-doc__tabela th { background: var(--color-pub-acento-suave); font-weight: var(--weight-semi); }
.c-pub-doc__tabela tr:last-child td { border-block-end: 0; }

/* Estreito: cada linha vira um cartao com o rotulo da coluna. */
@container (max-width: 36rem) {
    .c-pub-doc__tabela thead { display: none; }
    .c-pub-doc__tabela tr { display: block; padding-block: var(--space-2); border-block-end: var(--border-width) solid var(--color-border); }
    .c-pub-doc__tabela td { display: block; border: 0; padding-block: var(--space-1); }
    .c-pub-doc__tabela td::before { content: attr(data-label); display: block; font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--color-text-muted); }
}

/* ----------------------------------------------------- pagina de servico */
/* Topo sem paisagem: trilha, H1 e a chamada do WhatsApp. */
.c-pub-hero--servico { padding-block: var(--space-6) var(--space-7); }

.c-pub-trilha { margin-block-end: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.c-pub-trilha ol { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; list-style: none; }
.c-pub-trilha li + li::before { content: "›"; margin-inline-end: var(--space-2); color: var(--color-text-muted); }
.c-pub-trilha a { color: var(--color-pub-acento-texto); }
.c-pub-trilha [aria-current="page"] { color: var(--color-text); font-weight: var(--weight-semi); }

/* Bloco de leitura centralizado (o .c-pub-doc sozinho alinha a esquerda). */
.c-pub-secao.c-pub-doc { max-inline-size: calc(48rem + 2 * var(--space-4)); margin-inline: auto; }
.c-pub-doc h2:first-child { margin-block-start: 0; }

.c-pub-faq { display: grid; gap: var(--space-3); }

.c-pub-faq__item {
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.c-pub-faq__item summary {
    min-block-size: var(--space-7);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    font-weight: var(--weight-semi);
    color: var(--color-pub-titulo);
}

.c-pub-faq__item p { margin: 0; padding: 0 var(--space-4) var(--space-4); color: var(--color-text-muted); }

.c-pub-chamada {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.c-pub-chamada p { margin: 0; max-inline-size: 36rem; font-size: var(--text-lg); }

/* Container dos cards de "Outros servicos": o @container de .c-pub-cards
   consulta o ancestral, entao ele precisa existir para virar 2 e 3 colunas. */
.c-pub-outros { container-type: inline-size; }

/* "Saiba mais" do card e titulos linkados em "Outros servicos". */
.c-pub-card .c-pub-card__mais { margin-block-start: var(--space-3); }
.c-pub-card .c-pub-card__mais a,
.c-pub-card__link { color: var(--color-pub-acento-texto); font-weight: var(--weight-semi); }
.c-pub-card__link { display: inline-block; min-block-size: var(--space-6); }

/* --- components/stepper.css --- */
/* Etapa do projeto. A barra e decorativa; quem anuncia a posicao e o
   aria-label do container e o rotulo abaixo dela. */
.c-stepper { display: grid; gap: var(--space-2); }

.c-stepper__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--space-1);
}

.c-stepper__step {
    block-size: var(--space-1);
    border-radius: var(--radius-full);
    background: var(--color-border);
}

.c-stepper__step.is-done    { background: color-mix(in oklch, var(--color-action) 45%, var(--color-surface)); }
.c-stepper__step.is-current { background: var(--color-action); }

.c-stepper__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}

/* --- components/table.css --- */
.c-table-wrap { container-type: inline-size; }

.c-table {
    inline-size: 100%;
    font-size: var(--text-sm);
}

.c-table th,
.c-table td {
    padding: var(--pad-cell) var(--space-3);
    text-align: start;
    vertical-align: top;
    border-block-end: var(--border-width) solid var(--color-border);
}

.c-table th {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
    background: var(--color-surface-sunken);
    white-space: nowrap;
}

.c-table tbody tr { transition: background var(--duration-fast) var(--ease-out); }
.c-table tbody tr:hover { background: var(--color-surface-hover); }
.c-table tbody tr:last-child td { border-block-end: 0; }

.c-table td[data-type="number"],
.c-table__time {
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-semi);
    white-space: nowrap;
}

.c-table__meta {
    display: block;
    margin-block-start: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}

.c-table tr.is-done td { opacity: 0.62; }
.c-table tr.is-cancelled td { opacity: 0.5; }
.c-table tr.is-cancelled td strong { text-decoration: line-through; }

/* Abaixo de 46rem de espaco disponivel a tabela vira lista de cartoes.
   Cada td exibe o nome da coluna via data-label; sem ele a celula fica
   sem rotulo no celular. */
@container (max-width: 46rem) {
    .c-table, .c-table thead, .c-table tbody,
    .c-table tr, .c-table th, .c-table td { display: block; }

    .c-table thead {
        /* 1px aqui nao e decisao de design: e o idioma de ocultar
           visualmente mantendo o cabecalho para o leitor de tela. */
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .c-table tbody tr {
        margin-block-end: var(--space-3);
        border: var(--border-width) solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-surface-sunken);
    }

    .c-table tbody tr:last-child { margin-block-end: 0; }

    .c-table td {
        display: flex;
        gap: var(--space-4);
        align-items: flex-start;
        justify-content: space-between;
        text-align: end;
    }

    .c-table td:last-child { border-block-end: 0; }
    .c-table td:empty { display: none; }

    .c-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: var(--text-xs);
        font-weight: var(--weight-bold);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        color: var(--color-text-muted);
        text-align: start;
    }
}

/* Cabecalho ordenavel. E um link de verdade: funciona sem JavaScript,
   abre em nova aba e entra no historico do navegador. */
.c-table__sort {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.c-table__sort:hover { color: var(--color-action-text); }
.c-table__sort.is-active { color: var(--color-action-text); }

/* --- components/venda.css --- */
/* Vendas: progresso do checklist, lista de propostas e checklist em passos. */

/* ---------------------------------------------------------------- progresso */
.c-progresso { display: grid; gap: var(--space-2); }

.c-progresso__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.c-progresso__titulo { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semi); }

.c-progresso__pct {
    font-size: var(--text-metric);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-success-text);
    font-variant-numeric: tabular-nums;
}

.c-progresso__barra {
    block-size: var(--space-3);
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--color-surface-sunken);
}

.c-progresso__feito {
    display: block;
    block-size: 100%;
    inline-size: var(--pct, 0%);
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-action), var(--color-success));
    transition: inline-size var(--duration-fast) var(--ease-out);
}

.c-progresso__frase { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ------------------------------------------------------------ lista */
.c-vendas {
    overflow: hidden;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.c-venda {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-block-end: var(--border-width) solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
}

.c-venda:last-child { border-block-end: 0; }
.c-venda:hover { background: var(--color-surface-hover); }

.c-venda__estado {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    text-align: center;
    white-space: nowrap;
}

.c-venda[data-resultado="pendente"]  .c-venda__estado { background: var(--color-action-subtle);  color: var(--color-action-text); }
.c-venda[data-resultado="ganho"]     .c-venda__estado { background: var(--color-success-subtle); color: var(--color-success-text); }
.c-venda[data-resultado="em_aberto"] .c-venda__estado { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.c-venda[data-resultado="perdido"]   .c-venda__estado,
.c-venda[data-resultado="cancelado"] .c-venda__estado { background: var(--color-danger-subtle);  color: var(--color-danger-text); }
.c-venda[data-resultado="declinado"] .c-venda__estado { background: var(--color-surface-sunken); color: var(--color-text-muted); }

.c-venda__corpo { display: grid; min-inline-size: 0; }
.c-venda__titulo { font-size: var(--text-sm); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-venda__meta { font-size: var(--text-xs); color: var(--color-text-subtle); }
.c-venda__valor { font-size: var(--text-sm); font-weight: var(--weight-semi); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 40rem) {
    .c-venda { grid-template-columns: minmax(0, 1fr) auto; }
    .c-venda__estado { grid-column: 1 / -1; justify-self: start; }
}

/* ------------------------------------------------------------ barras */
.c-barras { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

.c-barras__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
}

.c-barras__valor { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.c-barras__trilha { grid-column: 1 / -1; block-size: var(--space-2); border-radius: var(--radius-full); background: var(--color-surface-sunken); }
.c-barras__barra { display: block; block-size: 100%; inline-size: var(--pct, 0%); border-radius: var(--radius-full); background: var(--color-success); }
.c-barras__barra--perda { background: var(--color-danger); }

/* ------------------------------------------------------------ checklist */
.c-passo { display: grid; gap: var(--space-3); margin: 0; min-inline-size: 0; }

.c-passo__titulo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    font-size: var(--text-md);
    font-weight: var(--weight-semi);
}

.c-passo__num {
    display: inline-grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: var(--radius-full);
    background: var(--color-action);
    color: var(--color-text-on-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
}

/* Passo 3 depende do resultado. Sem suporte a :has todos aparecem e o
   servidor descarta o que nao vale. */
@supports selector(:has(*)) {
    .c-checklist [data-se] { display: none; }

    .c-checklist:has(input[name="resultado"][value="ganho"]:checked)     [data-se~="ganho"],
    .c-checklist:has(input[name="resultado"][value="perdido"]:checked)   [data-se~="perdido"],
    .c-checklist:has(input[name="resultado"][value="declinado"]:checked) [data-se~="declinado"],
    .c-checklist:has(input[name="resultado"][value="cancelado"]:checked) [data-se~="cancelado"],
    .c-checklist:has(input[name="resultado"][value="em_aberto"]:checked) [data-se~="em_aberto"] { display: grid; }

    /* "Aditivo de" so aparece quando o tipo e aditivo. */
    .c-checklist [data-se-tipo] { display: none; }
    .c-checklist:has(select[name="tipo"] option[value="aditivo"]:checked) [data-se-tipo="aditivo"] { display: block; }
}

/* Opcoes em cartao: e um radio, o cartao inteiro e clicavel. */
.c-opcoes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.c-opcoes--resultado { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }

.c-opcao {
    position: relative;
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
}

.c-opcoes--chips .c-opcao { padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); }

.c-opcao input { position: absolute; opacity: 0; inline-size: var(--border-width); block-size: var(--border-width); }
.c-opcao:hover { border-color: var(--color-action); }
.c-opcao:has(input:focus-visible) { outline: var(--ring-width) solid var(--color-action); outline-offset: var(--border-width); }

.c-opcao__titulo { font-size: var(--text-sm); font-weight: var(--weight-semi); }
.c-opcao__frase { font-size: var(--text-xs); color: var(--color-text-muted); }

.c-opcao:has(input:checked) { border-color: var(--color-action); background: var(--color-action-subtle); }
.c-opcao[data-valor="ganho"]:has(input:checked)     { border-color: var(--color-success); background: var(--color-success-subtle); }
.c-opcao[data-valor="perdido"]:has(input:checked),
.c-opcao[data-valor="cancelado"]:has(input:checked) { border-color: var(--color-danger);  background: var(--color-danger-subtle); }
.c-opcao[data-valor="em_aberto"]:has(input:checked) { border-color: var(--color-warning); background: var(--color-warning-subtle); }

.c-check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semi); }
.c-check input { inline-size: 1.125rem; block-size: 1.125rem; accent-color: var(--color-action); }

/* Painel lateral com o que veio dos documentos. */
.c-levantamento__sub {
    margin: var(--space-3) 0 var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}

.c-levantamento__texto { margin: 0; font-size: var(--text-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.c-levantamento__pasta { font-size: var(--text-xs); color: var(--color-text-subtle); }
.c-levantamento__lista { margin: 0; padding-inline-start: var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); }

/* --- components/visita.css --- */
/* Passo a passo da visita em campo. Pensado para celular em uso com uma mao:
   alvos grandes, uma etapa aberta por vez, so token semantico. */

.c-passos {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-passo {
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.c-passo.is-atual {
    border-color: var(--color-action);
    box-shadow: var(--shadow-sm);
}

.c-passo.is-futuro { opacity: 0.6; }

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

.c-passo__num {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    inline-size: var(--space-6);
    block-size: var(--space-6);
    border-radius: var(--radius-full);
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
    font-weight: var(--weight-bold);
}

.c-passo.is-atual .c-passo__num { background: var(--color-action); color: var(--color-text-on-accent); }
.c-passo.is-feito .c-passo__num { background: var(--color-success-subtle); color: var(--color-success-text); }

.c-passo__titulo {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--weight-semi);
}

.c-passo__feito {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-success-text);
}

.c-passo__corpo { margin-block-start: var(--space-4); }

.c-passo__resumo { margin: 0 0 var(--space-2); }

.c-btn--grande {
    inline-size: 100%;
    min-block-size: var(--space-7);
    font-size: var(--text-md);
}

/* Item do checklist */
.c-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
}

.c-item__texto {
    padding: 0;
    font-weight: var(--weight-semi);
}

/* Botoes de opcao grandes (OK / Nao OK / N/A) sobre radio nativo. */
.c-opcoes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.c-opcoes__item { position: relative; }

.c-opcoes__item input {
    position: absolute;
    opacity: 0;
    inset: 0;
}

.c-opcoes__item span {
    display: grid;
    place-items: center;
    min-block-size: var(--space-6);
    padding: var(--space-2);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-weight: var(--weight-semi);
    cursor: pointer;
}

.c-opcoes__item input:focus-visible + span { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.c-opcoes__item--ok  input:checked + span { background: var(--color-success-subtle); border-color: var(--color-success); color: var(--color-success-text); }
.c-opcoes__item--nok input:checked + span { background: var(--color-danger-subtle);  border-color: var(--color-danger);  color: var(--color-danger-text); }
.c-opcoes__item--na  input:checked + span { background: var(--color-surface-sunken); border-color: var(--color-text-muted); }

/* Botao de foto: o input fica sobre o rotulo, entao o toque abre a camera. */
.c-foto {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.c-foto__input {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    opacity: 0;
    cursor: pointer;
}

.c-foto__input:focus-visible + .c-foto__info { outline: 2px solid var(--color-border-focus); }
.c-foto:focus-within .c-foto__botao { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

/* Sem JavaScript o input nativo aparece normalmente. */
html:not(.js) .c-foto__input { position: static; opacity: 1; inline-size: auto; }
html:not(.js) .c-foto__botao { display: none; }

.c-galeria {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.c-galeria img {
    display: block;
    inline-size: 7.5rem;
    block-size: 7.5rem;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--color-border);
}

.c-galeria--mini { margin: 0; gap: var(--space-2); }
.c-galeria--mini img { inline-size: 4rem; block-size: 4rem; }

.c-galeria__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-inline-size: 7.5rem;
}

.c-galeria__pdf {
    display: grid;
    place-items: center;
    inline-size: 7.5rem;
    block-size: 7.5rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
    font-weight: var(--weight-bold);
}

.c-galeria--mini .c-galeria__pdf { inline-size: 4rem; block-size: 4rem; }

.c-galeria__legenda { font-size: var(--text-xs); overflow-wrap: anywhere; }

.c-resumo-check {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Lista de caixas de selecao (equipe em campo). */
.c-escolhas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0;
    padding: 0;
    border: 0;
}

.c-escolhas > legend { inline-size: 100%; margin-block-end: var(--space-2); }

.c-escolhas__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--space-6);
}

.c-field__control--curto { max-inline-size: 5rem; }

.c-timeline__prova { margin: var(--space-1) 0 0; }

/* Termo de ciencia para impressao. */
.c-termo { max-inline-size: 48rem; line-height: 1.6; }
.c-termo h2 { font-size: var(--text-h3); margin-block-end: var(--space-4); }
.c-termo ol { padding-inline-start: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.c-termo__assinatura { margin-block-start: var(--space-7); }
.c-termo__linha { margin-block-start: var(--space-7); margin-block-end: 0; }

@media print {
    .l-topbar, .l-sidebar, .l-footer, .u-no-print, .c-alert { display: none; }
    .c-termo { border: 0; box-shadow: none; padding: 0; }
}

/* Aprovacao de compromissos dos tecnicos. */
.c-aprovacoes {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-aprovacoes__item {
    display: grid;
    gap: var(--space-3);
    padding-block-end: var(--space-4);
    border-block-end: var(--border-width) solid var(--color-border);
}

.c-aprovacoes__item:last-child { border-block-end: 0; padding-block-end: 0; }

.c-aprovacoes__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.c-aprovacoes__recusa {
    display: flex;
    gap: var(--space-2);
    flex: 1 1 16rem;
}

@container (min-width: 48rem) {
    .c-aprovacoes__item { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

.c-conflito ul { margin: var(--space-2) 0; padding-inline-start: var(--space-5); }

}

@layer utilities {

/* --- utilities.css --- */
/* Poucas e cirurgicas. Utilitario que vira meia biblioteca deixa de ser
   utilitario e passa a competir com o componente. */

/* Empilha filhos com espaco consistente, sem margem em cascata. */
.u-stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap-default);
}

.u-stack--tight { gap: var(--gap-tight); }

/* Agrupa itens na horizontal. So quebra quando realmente falta largura,
   e nunca estica um item para ocupar a linha inteira. */
.u-cluster {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.u-cluster > * { flex: 0 0 auto; }

.u-list { display: flex; flex-direction: column; }

.u-list > li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding-block: var(--space-3);
    border-block-end: var(--border-width) solid var(--color-border);
}

.u-list > li:first-child { padding-block-start: 0; }
.u-list > li:last-child { padding-block-end: 0; border-block-end: 0; }

.u-muted { color: var(--color-text-muted); font-size: var(--text-sm); }
.u-subtle { color: var(--color-text-subtle); font-size: var(--text-sm); }

.u-inline { display: inline-flex; }

/* Texto livre do usuario: respeita as quebras de linha digitadas. */
.u-pre-line { white-space: pre-line; }

.u-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

}