/* ==========================================================================
   Paddock Coworking — design system
   Tokens + BEM, sem framework CSS, sem build (Método Hocsis §6 / §16).
   Contraste conferido para WCAG 2.1 AA.
   ========================================================================== */

:root {
    /* Cor — "paddock" puxa para asfalto e bandeira; acento vermelho de corrida */
    --tinta: #10141a;
    --tinta-suave: #4a5361;
    --tinta-fraca: #6b7480;
    --papel: #ffffff;
    --papel-suave: #f5f6f8;
    --papel-forte: #eceef2;
    --borda: #dfe3e9;
    --borda-forte: #c6ccd6;

    --acento: #c4211b;
    --acento-escuro: #9c1a15;
    --acento-claro: #e63e36;
    --acento-lavado: #fdf0ef;

    --asfalto: #171c24;
    --asfalto-claro: #232b36;

    --sucesso: #0f6e58;
    --sucesso-lavado: #e8f5f1;
    --alerta: #96590a;
    --alerta-lavado: #fdf4e6;
    --erro: #b3211c;
    --erro-lavado: #fdeceb;
    --info: #1d5b91;
    --info-lavado: #eaf2f9;

    /* Espaço — escala de 4px */
    --esp-1: 0.25rem;
    --esp-2: 0.5rem;
    --esp-3: 0.75rem;
    --esp-4: 1rem;
    --esp-5: 1.5rem;
    --esp-6: 2rem;
    --esp-7: 3rem;
    --esp-8: 4rem;
    --esp-9: 6rem;

    --raio: 10px;
    --raio-sm: 6px;
    --raio-lg: 16px;
    --raio-pill: 999px;

    --sombra-sm: 0 1px 2px rgba(16, 20, 26, 0.06), 0 1px 3px rgba(16, 20, 26, 0.08);
    --sombra: 0 4px 6px -1px rgba(16, 20, 26, 0.07), 0 2px 4px -2px rgba(16, 20, 26, 0.06);
    --sombra-lg: 0 12px 20px -8px rgba(16, 20, 26, 0.16), 0 4px 8px -4px rgba(16, 20, 26, 0.08);

    --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fonte-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

    --largura: 1140px;
    --largura-estreita: 720px;
    --transicao: 160ms ease;
}

@media (prefers-color-scheme: dark) {
    :root {
        --tinta: #eef1f5;
        --tinta-suave: #b3bbc7;
        --tinta-fraca: #8b95a3;
        --papel: #12161c;
        --papel-suave: #171c24;
        --papel-forte: #1f2630;
        --borda: #2a323d;
        --borda-forte: #3a434f;

        --acento: #f05249;
        --acento-escuro: #c4211b;
        --acento-claro: #ff6f66;
        --acento-lavado: #2a1614;

        --sucesso: #4cc0a3;
        --sucesso-lavado: #132723;
        --alerta: #e0a355;
        --alerta-lavado: #2a2116;
        --erro: #f2726b;
        --erro-lavado: #2b1917;
        --info: #6fb0e5;
        --info-lavado: #16232e;

        --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --sombra: 0 4px 8px rgba(0, 0, 0, 0.45);
        --sombra-lg: 0 16px 32px rgba(0, 0, 0, 0.55);
    }
}

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

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

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--tinta);
    background: var(--papel);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--esp-3);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
}

h1 { font-size: clamp(1.85rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; }

p { margin: 0 0 var(--esp-4); }

a {
    color: var(--acento);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover { color: var(--acento-escuro); }

img { max-width: 100%; height: auto; display: block; }

hr {
    border: 0;
    border-top: 1px solid var(--borda);
    margin: var(--esp-6) 0;
}

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

/* -------------------------------------------------------------- utilitários */
.container {
    width: 100%;
    max-width: var(--largura);
    margin-inline: auto;
    padding-inline: var(--esp-4);
}

.container--estreito { max-width: var(--largura-estreita); }

.pular-para-conteudo {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--acento);
    color: #fff;
    padding: var(--esp-3) var(--esp-4);
    z-index: 100;
}

.pular-para-conteudo:focus { left: 0; }

.visualmente-oculto {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.texto-suave { color: var(--tinta-suave); }
.texto-fraco { color: var(--tinta-fraca); font-size: 0.875rem; }
.texto-centro { text-align: center; }
.texto-direita { text-align: right; }
.mono { font-family: var(--fonte-mono); font-size: 0.9em; }
.sem-margem { margin: 0; }
.mt-4 { margin-top: var(--esp-4); }
.mt-5 { margin-top: var(--esp-5); }
.mt-6 { margin-top: var(--esp-6); }
.mb-4 { margin-bottom: var(--esp-4); }
.mb-5 { margin-bottom: var(--esp-5); }

.grade {
    display: grid;
    gap: var(--esp-5);
}

.grade--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.linha {
    display: flex;
    gap: var(--esp-3);
    flex-wrap: wrap;
    align-items: center;
}

.linha--entre { justify-content: space-between; }
.linha--fim { justify-content: flex-end; }
.linha--topo { align-items: flex-start; }

/* -------------------------------------------------------------------- botão */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    padding: 0.7rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--raio);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}

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

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

.botao--primario {
    background: var(--acento);
    color: #fff;
}

.botao--primario:hover {
    background: var(--acento-escuro);
    color: #fff;
}

.botao--secundario {
    background: transparent;
    border-color: var(--borda-forte);
    color: var(--tinta);
}

.botao--secundario:hover {
    background: var(--papel-suave);
    color: var(--tinta);
}

.botao--escuro {
    background: var(--asfalto);
    color: #fff;
}

.botao--escuro:hover { background: var(--asfalto-claro); color: #fff; }

.botao--fantasma {
    background: transparent;
    color: var(--tinta-suave);
    padding: 0.4rem 0.7rem;
}

.botao--fantasma:hover { background: var(--papel-forte); color: var(--tinta); }

.botao--perigo { background: var(--erro); color: #fff; }
.botao--perigo:hover { background: #8f1a16; color: #fff; }

.botao--bloco { width: 100%; }
.botao--pequeno { padding: 0.4rem 0.8rem; font-size: 0.875rem; }
.botao--grande { padding: 0.9rem 1.75rem; font-size: 1.05rem; }

/* ------------------------------------------------------------------ cartões */
.cartao {
    background: var(--papel);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    padding: var(--esp-5);
    box-shadow: var(--sombra-sm);
}

.cartao--plano {
    display: flex;
    flex-direction: column;
    position: relative;
}

.cartao--destaque {
    border-color: var(--acento);
    box-shadow: var(--sombra-lg);
}

.cartao__selo {
    position: absolute;
    top: calc(-1 * var(--esp-3));
    left: var(--esp-5);
    background: var(--acento);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: var(--esp-1) var(--esp-3);
    border-radius: var(--raio-pill);
}

.cartao__preco {
    display: flex;
    align-items: baseline;
    gap: var(--esp-2);
    margin: var(--esp-3) 0;
}

.cartao__valor {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

.cartao__ciclo { color: var(--tinta-suave); font-size: 0.95rem; }

.cartao__lista {
    list-style: none;
    margin: var(--esp-4) 0;
    padding: 0;
    display: grid;
    gap: var(--esp-2);
    flex: 1;
}

.cartao__lista li {
    padding-left: 1.6rem;
    position: relative;
    font-size: 0.95rem;
}

.cartao__lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.85rem;
    height: 0.5rem;
    border-left: 2px solid var(--sucesso);
    border-bottom: 2px solid var(--sucesso);
    transform: rotate(-45deg);
}

.cartao__lista--negativa li::before {
    border: 0;
    top: 0.62em;
    width: 0.75rem;
    height: 0;
    border-bottom: 2px solid var(--tinta-fraca);
    transform: none;
}

/* -------------------------------------------------------------------- selos */
.selo {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-1);
    padding: 0.2rem 0.6rem;
    border-radius: var(--raio-pill);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.selo--neutro { background: var(--papel-forte); color: var(--tinta-suave); }
.selo--sucesso { background: var(--sucesso-lavado); color: var(--sucesso); }
.selo--alerta { background: var(--alerta-lavado); color: var(--alerta); }
.selo--erro { background: var(--erro-lavado); color: var(--erro); }
.selo--info { background: var(--info-lavado); color: var(--info); }

/* ------------------------------------------------------------------ avisos */
.aviso {
    display: flex;
    gap: var(--esp-3);
    padding: var(--esp-4);
    border-radius: var(--raio);
    border: 1px solid transparent;
    margin-bottom: var(--esp-4);
}

.aviso--sucesso { background: var(--sucesso-lavado); border-color: var(--sucesso); color: var(--sucesso); }
.aviso--erro { background: var(--erro-lavado); border-color: var(--erro); color: var(--erro); }
.aviso--alerta { background: var(--alerta-lavado); border-color: var(--alerta); color: var(--alerta); }
.aviso--info { background: var(--info-lavado); border-color: var(--info); color: var(--info); }

.aviso p:last-child { margin-bottom: 0; }
.aviso strong { color: inherit; }

/* ------------------------------------------------------------- formulários */
.campo { margin-bottom: var(--esp-4); }

.campo__rotulo {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: var(--esp-2);
}

.campo__dica {
    display: block;
    font-size: 0.82rem;
    color: var(--tinta-fraca);
    margin-top: var(--esp-1);
}

.campo__erro {
    display: block;
    font-size: 0.82rem;
    color: var(--erro);
    margin-top: var(--esp-1);
    font-weight: 600;
}

.entrada,
.selecao,
.area-texto {
    width: 100%;
    padding: 0.65rem 0.85rem;
    font: inherit;
    color: var(--tinta);
    background: var(--papel);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-sm);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.entrada:focus,
.selecao:focus,
.area-texto:focus {
    border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-lavado);
    outline: none;
}

.entrada[aria-invalid="true"] { border-color: var(--erro); }

/*
 * Autofill do Chrome: ele força background azul-claro com prioridade que
 * background normal não vence — no tema escuro o campo preenchido ficava
 * branco. O truque é pintar com box-shadow inset e fixar a cor do texto.
 */
.entrada:-webkit-autofill,
.entrada:-webkit-autofill:hover,
.entrada:-webkit-autofill:focus,
.entrada:-webkit-autofill:active,
.selecao:-webkit-autofill,
.area-texto:-webkit-autofill {
    -webkit-text-fill-color: var(--tinta);
    -webkit-box-shadow: 0 0 0 100px var(--papel) inset;
    box-shadow: 0 0 0 100px var(--papel) inset;
    caret-color: var(--tinta);
    border-color: var(--borda-forte);
    /* Adia a transição de fundo para o navegador não repintar de azul */
    transition: background-color 100000s ease-in-out 0s;
}

.entrada:-webkit-autofill:focus {
    border-color: var(--acento);
    -webkit-box-shadow: 0 0 0 100px var(--papel) inset, 0 0 0 3px var(--acento-lavado);
    box-shadow: 0 0 0 100px var(--papel) inset, 0 0 0 3px var(--acento-lavado);
}

/* Firefox tem seu próprio destaque de autofill */
.entrada:autofill {
    background: var(--papel);
    color: var(--tinta);
}

.area-texto { min-height: 8rem; resize: vertical; }

/* ------------------------------------------------------- senha com olhinho */
/*
 * O wrapper envolve APENAS o input. Ancorar no .campo quebraria no login,
 * onde existe o link "esqueci minha senha" logo abaixo do campo.
 */
.senha-wrap {
    position: relative;
    display: block;
}

.senha-wrap .entrada { padding-right: 3rem; }

.olho-senha {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.35rem;
    height: 2.35rem;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--raio-sm);
    color: var(--tinta-fraca);
    cursor: pointer;
    transition: color var(--transicao), background var(--transicao);
}

.olho-senha:hover { color: var(--tinta); background: var(--papel-forte); }
.olho-senha[aria-pressed="true"] { color: var(--acento); }
.olho-senha svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Some com o revelador nativo do Edge para não ficarem dois olhos */
.senha-wrap .entrada::-ms-reveal,
.senha-wrap .entrada::-ms-clear { display: none; }

.selecao {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.5rem;
}

.caixa-marcacao {
    display: flex;
    gap: var(--esp-3);
    align-items: flex-start;
    margin-bottom: var(--esp-3);
    font-size: 0.92rem;
    line-height: 1.5;
}

.caixa-marcacao input {
    margin-top: 0.28rem;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--acento);
    flex-shrink: 0;
}

.grupo-campos {
    display: grid;
    gap: 0 var(--esp-4);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.conjunto {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: var(--esp-5);
    margin-bottom: var(--esp-5);
}

.conjunto legend {
    font-weight: 700;
    padding-inline: var(--esp-2);
    font-size: 0.95rem;
}

.arquivo {
    display: block;
    padding: var(--esp-4);
    border: 2px dashed var(--borda-forte);
    border-radius: var(--raio);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transicao), background var(--transicao);
}

.arquivo:hover { border-color: var(--acento); background: var(--acento-lavado); }
.arquivo input { display: block; margin: var(--esp-3) auto 0; max-width: 100%; }

/* ------------------------------------------------------------------ tabelas */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    min-width: 34rem;
}

.tabela th,
.tabela td {
    padding: var(--esp-3);
    text-align: left;
    border-bottom: 1px solid var(--borda);
    vertical-align: top;
}

.tabela th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tinta-fraca);
    font-weight: 700;
    white-space: nowrap;
}

.tabela tbody tr:hover { background: var(--papel-suave); }
.tabela td.numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------- cabeçalho site */
.cabecalho {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--papel) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borda);
}

.cabecalho__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    min-height: 4.25rem;
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-3);
    color: var(--tinta);
    text-decoration: none;
    line-height: 1.05;
}

.marca:hover { color: var(--tinta); }
.marca:hover .marca__simbolo { transform: translateY(-1px); }

.marca__simbolo {
    width: 2.15rem;
    height: 2.15rem;
    flex-shrink: 0;
    background: url('../img/simbolo.svg') center / contain no-repeat;
    transition: transform var(--transicao);
}

.marca__texto {
    display: block;
    font-weight: 800;
    font-size: 1.12rem;
    letter-spacing: -0.015em;
}

.marca__texto small {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
    margin-top: 0.15rem;
}

.marca--grande .marca__simbolo { width: 3rem; height: 3rem; }
.marca--grande .marca__texto { font-size: 1.45rem; }
.marca--grande .marca__texto small { font-size: 0.7rem; }

.navegacao { display: flex; align-items: center; gap: var(--esp-1); }

.navegacao a {
    padding: 0.45rem 0.7rem;
    border-radius: var(--raio-sm);
    color: var(--tinta-suave);
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 500;
}

.navegacao a:hover { background: var(--papel-forte); color: var(--tinta); }
.navegacao a[aria-current="page"] { color: var(--acento); font-weight: 700; }

.menu-alternar {
    display: none;
    background: transparent;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-sm);
    padding: 0.45rem 0.6rem;
    cursor: pointer;
    color: var(--tinta);
}

@media (max-width: 900px) {
    .menu-alternar { display: inline-flex; }

    .navegacao {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--papel);
        border-bottom: 1px solid var(--borda);
        padding: var(--esp-3);
        gap: var(--esp-1);
        box-shadow: var(--sombra);
    }

    .navegacao--aberta { display: flex; }
    .navegacao a { padding: 0.7rem; }
}

/* ------------------------------------------------------------------- hero */
.hero {
    padding: var(--esp-8) 0 var(--esp-7);
    background:
        radial-gradient(1000px 400px at 15% -10%, var(--acento-lavado), transparent 65%),
        var(--papel);
}

.hero__grade {
    display: grid;
    gap: var(--esp-7);
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
}

@media (max-width: 900px) {
    .hero { padding: var(--esp-6) 0; }
    .hero__grade { grid-template-columns: 1fr; gap: var(--esp-5); }
}

.hero__etiqueta {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    background: var(--papel-forte);
    color: var(--tinta-suave);
    border-radius: var(--raio-pill);
    padding: 0.3rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: var(--esp-4);
}

.hero__chamada {
    font-size: 1.12rem;
    color: var(--tinta-suave);
    max-width: 34rem;
}

.hero__acoes { display: flex; gap: var(--esp-3); flex-wrap: wrap; margin-top: var(--esp-5); }

.hero__nota { font-size: 0.85rem; color: var(--tinta-fraca); margin-top: var(--esp-4); }

/* ---------------------------------------------------------------- seções */
.secao { padding: var(--esp-8) 0; }
.secao--suave { background: var(--papel-suave); }
.secao--escura { background: var(--asfalto); color: #f2f4f7; }
.secao--escura h2, .secao--escura h3 { color: #fff; }
.secao--escura .texto-suave { color: #b9c1cc; }

.secao__cabecalho { max-width: 44rem; margin-bottom: var(--esp-6); }
.secao__cabecalho--centro { margin-inline: auto; text-align: center; }

.olho {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--acento);
    margin-bottom: var(--esp-2);
}

/* ------------------------------------------------------------------ passos */
.passos {
    --passo-tamanho: 2.5rem;
    counter-reset: passo;
    display: grid;
    gap: var(--esp-6) var(--esp-5);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    list-style: none;
    padding: 0;
    margin: 0;
}

/*
 * O recuo do topo precisa acomodar o círculo INTEIRO mais respiro. Com
 * padding menor que o diâmetro, o número encosta no título — foi o que
 * aconteceu antes (círculo 2.25rem sobre padding 2rem).
 */
.passos li {
    counter-increment: passo;
    padding-top: calc(var(--passo-tamanho) + var(--esp-4));
    position: relative;
}

.passos li::before {
    content: counter(passo);
    position: absolute;
    top: 0;
    left: 0;
    width: var(--passo-tamanho);
    height: var(--passo-tamanho);
    border-radius: 50%;
    background: var(--acento);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 16%, transparent);
}

.passos h2,
.passos h3 { margin-bottom: var(--esp-2); }
.passos p { color: var(--tinta-suave); font-size: 0.95rem; margin: 0; }

/* Na seção escura o halo do número precisa de mais presença */
.secao--escura .passos li::before,
.passos--escuro li::before {
    box-shadow: 0 0 0 4px rgba(196, 33, 27, 0.25);
}

/* -------------------------------------------------------------- progresso */
.progresso {
    display: flex;
    gap: var(--esp-2);
    list-style: none;
    margin: 0 0 var(--esp-5);
    padding: 0;
    flex-wrap: wrap;
}

.progresso__item {
    flex: 1 1 7rem;
    padding-top: var(--esp-3);
    border-top: 3px solid var(--borda);
    font-size: 0.8rem;
    color: var(--tinta-fraca);
    font-weight: 600;
}

.progresso__item--feito { border-top-color: var(--sucesso); color: var(--sucesso); }
.progresso__item--atual { border-top-color: var(--acento); color: var(--acento); }

/* ------------------------------------------------------------ painel/admin */
.painel {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    min-height: 100vh;
}

@media (max-width: 900px) {
    .painel { grid-template-columns: 1fr; }
}

.lateral {
    background: linear-gradient(180deg, var(--asfalto) 0%, #12161d 100%);
    color: #dde2e9;
    padding: var(--esp-5) var(--esp-4);
    display: flex;
    flex-direction: column;
    gap: var(--esp-5);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

/*
 * O sidebar é escuro sempre, independente do tema do sistema. Sem forçar a cor
 * aqui, no tema claro o texto herdaria --tinta (escuro) e sumiria no fundo.
 */
.lateral .marca,
.lateral .marca:hover { color: #fff; }

.lateral .marca {
    padding-bottom: var(--esp-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
}

.lateral .marca__simbolo { width: 2.4rem; height: 2.4rem; }
.lateral .marca__texto small { color: #8b95a3; }

.lateral__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--esp-1);
}

.lateral__menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-2);
    padding: 0.6rem 0.75rem;
    border-radius: var(--raio-sm);
    color: #c3cad4;
    text-decoration: none;
    font-size: 0.93rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.lateral__menu a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-left-color: rgba(255, 255, 255, 0.2);
}

.lateral__menu a[aria-current="page"] {
    background: var(--acento);
    color: #fff;
    font-weight: 600;
    border-left-color: #fff;
}

/* Contador de pendências ao lado do item de menu */
.lateral__contador {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-radius: var(--raio-pill);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    min-width: 1.4rem;
    text-align: center;
}

.lateral__menu a[aria-current="page"] .lateral__contador { background: rgba(0, 0, 0, 0.25); }
.lateral__contador--alerta { background: var(--acento); }

.lateral__grupo {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #7d8794;
    font-weight: 700;
    margin: var(--esp-3) 0 var(--esp-1);
    padding-inline: 0.75rem;
}

.lateral__rodape { margin-top: auto; font-size: 0.82rem; color: #8b95a3; }

.conteudo { padding: var(--esp-6) var(--esp-5) var(--esp-8); background: var(--papel-suave); }

@media (max-width: 640px) {
    .conteudo { padding: var(--esp-5) var(--esp-4) var(--esp-7); }
}

.conteudo__cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--esp-4);
    flex-wrap: wrap;
    margin-bottom: var(--esp-5);
}

.painel-bloco {
    background: var(--papel);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    padding: var(--esp-5);
    margin-bottom: var(--esp-5);
}

.painel-bloco__titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    margin-bottom: var(--esp-4);
    flex-wrap: wrap;
}

.painel-bloco__titulo h2,
.painel-bloco__titulo h3 { margin: 0; font-size: 1.05rem; }

/* ---------------------------------------------------------------- métricas */
.metricas {
    display: grid;
    gap: var(--esp-4);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin-bottom: var(--esp-5);
}

.metrica {
    background: var(--papel);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: var(--esp-4);
}

.metrica__rotulo {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tinta-fraca);
    font-weight: 700;
    margin-bottom: var(--esp-2);
}

.metrica__valor {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.metrica__nota { font-size: 0.82rem; color: var(--tinta-fraca); margin-top: var(--esp-1); }
.metrica--alerta .metrica__valor { color: var(--erro); }
.metrica--sucesso .metrica__valor { color: var(--sucesso); }

/* ------------------------------------------------------------------- listas */
.lista-registros { list-style: none; margin: 0; padding: 0; }

.lista-registros li {
    padding: var(--esp-4) 0;
    border-bottom: 1px solid var(--borda);
}

.lista-registros li:last-child { border-bottom: 0; padding-bottom: 0; }
.lista-registros li:first-child { padding-top: 0; }

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

.registro__titulo { font-weight: 600; }
.registro__meta { font-size: 0.84rem; color: var(--tinta-fraca); }
.registro__corpo { font-size: 0.93rem; color: var(--tinta-suave); margin-top: var(--esp-2); }

.vazio {
    text-align: center;
    padding: var(--esp-6) var(--esp-4);
    color: var(--tinta-fraca);
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio);
}

.vazio p { margin-bottom: var(--esp-2); }

/* ------------------------------------------------------------------- extras */
.definicoes {
    display: grid;
    gap: var(--esp-3) var(--esp-5);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin: 0;
}

.definicoes dt {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tinta-fraca);
    font-weight: 700;
}

.definicoes dd { margin: 0 0 var(--esp-3); font-weight: 500; }

.pix-qr {
    display: grid;
    gap: var(--esp-4);
    justify-items: center;
    text-align: center;
}

.pix-qr img {
    width: min(260px, 100%);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: #fff;
    padding: var(--esp-3);
}

.pix-copia {
    width: 100%;
    font-family: var(--fonte-mono);
    font-size: 0.78rem;
    word-break: break-all;
    background: var(--papel-forte);
    border-radius: var(--raio-sm);
    padding: var(--esp-3);
    border: 1px solid var(--borda);
    text-align: left;
}

.detalhe {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    margin-bottom: var(--esp-3);
    background: var(--papel);
}

.detalhe > summary {
    cursor: pointer;
    padding: var(--esp-4);
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: var(--esp-3);
    align-items: center;
}

.detalhe > summary::after {
    content: "+";
    font-size: 1.3rem;
    line-height: 1;
    color: var(--acento);
    font-weight: 400;
}

.detalhe[open] > summary::after { content: "\2212"; }
.detalhe__corpo { padding: 0 var(--esp-4) var(--esp-4); color: var(--tinta-suave); }

.conversa { display: grid; gap: var(--esp-3); margin-bottom: var(--esp-4); }

.mensagem {
    padding: var(--esp-3) var(--esp-4);
    border-radius: var(--raio);
    background: var(--papel-forte);
    font-size: 0.93rem;
}

.mensagem--equipe { background: var(--info-lavado); border-left: 3px solid var(--info); }
.mensagem__meta { font-size: 0.78rem; color: var(--tinta-fraca); margin-bottom: var(--esp-1); }

/* ------------------------------------------------------------------ agenda */
.agenda {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    font-size: 0.85rem;
    min-width: 40rem;
}

.agenda th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tinta-fraca);
    font-weight: 700;
    padding: var(--esp-2);
    white-space: nowrap;
}

.agenda th[scope="row"] {
    text-transform: none;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--tinta-suave);
    width: 4.5rem;
}

.agenda td {
    padding: 0;
    height: 2.9rem;
    vertical-align: top;
}

.agenda__vaga {
    height: 100%;
    border: 1px dashed var(--borda);
    border-radius: var(--raio-sm);
    display: grid;
    place-items: center;
    color: var(--tinta-fraca);
    font-size: 0.75rem;
    background: var(--papel);
}

.agenda__ocupado {
    height: 100%;
    border-radius: var(--raio-sm);
    padding: 0.3rem 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.1rem;
    overflow: hidden;
    border-left: 3px solid;
}

.agenda__ocupado strong {
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agenda__ocupado span { font-size: 0.72rem; opacity: 0.85; }

.agenda__ocupado--confirmada {
    background: var(--sucesso-lavado);
    border-left-color: var(--sucesso);
    color: var(--sucesso);
}

.agenda__ocupado--solicitada {
    background: var(--alerta-lavado);
    border-left-color: var(--alerta);
    color: var(--alerta);
}

.agenda__ocupado--realizada {
    background: var(--papel-forte);
    border-left-color: var(--borda-forte);
    color: var(--tinta-suave);
}

.agenda-navegacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    flex-wrap: wrap;
    margin-bottom: var(--esp-4);
}

.agenda-legenda {
    display: flex;
    gap: var(--esp-4);
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--tinta-fraca);
    margin-top: var(--esp-3);
}

.agenda-legenda span { display: inline-flex; align-items: center; gap: 0.35rem; }

.agenda-legenda i {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 3px;
    display: inline-block;
}

/* ------------------------------------------------------------------ rodapé */
.rodape {
    background: var(--asfalto);
    color: #b9c1cc;
    padding: var(--esp-7) 0 var(--esp-5);
    margin-top: var(--esp-8);
}

.rodape a { color: #dde2e9; text-decoration: none; }
.rodape a:hover { color: #fff; text-decoration: underline; }

.rodape__grade {
    display: grid;
    gap: var(--esp-5);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: var(--esp-6);
}

.rodape h4 {
    color: #fff;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--esp-3);
}

.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); font-size: 0.92rem; }

.rodape__base {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: var(--esp-4);
    font-size: 0.84rem;
    display: flex;
    justify-content: space-between;
    gap: var(--esp-4);
    flex-wrap: wrap;
}

/* ------------------------------------------------------------------ auth */
.auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--esp-5);
    background:
        radial-gradient(800px 400px at 50% 0%, var(--acento-lavado), transparent 70%),
        var(--papel-suave);
}

.auth__cartao {
    width: 100%;
    max-width: 27rem;
    background: var(--papel);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    padding: var(--esp-6);
    box-shadow: var(--sombra-lg);
}

.auth__cartao--largo { max-width: 34rem; }
.auth__topo { text-align: center; margin-bottom: var(--esp-5); }
.auth__topo .marca { justify-content: center; margin-bottom: var(--esp-4); }
.auth__rodape { text-align: center; margin-top: var(--esp-5); font-size: 0.9rem; color: var(--tinta-suave); }

/* ------------------------------------------------------------------ erros */
.pagina-erro {
    min-height: 70vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--esp-6);
}

.pagina-erro__codigo {
    font-size: clamp(4rem, 14vw, 8rem);
    font-weight: 800;
    line-height: 1;
    color: var(--acento);
    letter-spacing: -0.04em;
}

/* ------------------------------------------------------------------ print */
@media print {
    .cabecalho,
    .rodape,
    .lateral,
    .botao,
    .menu-alternar { display: none !important; }

    .painel { grid-template-columns: 1fr; }
    .conteudo { padding: 0; background: #fff; }
    body { color: #000; background: #fff; }
    .cartao, .painel-bloco { border: 1px solid #ccc; box-shadow: none; }
}

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