/* ═══════════════════════════════════════════════════════════════════════════
   MANDACHAMAR — Design System
   Grupo 1119 · MBA CIO/CTO · FIAP

   Escrito MOBILE-FIRST: o estilo base vale para o celular, e as media queries
   só acrescentam o que telas maiores permitem. A ordem é deliberada — a maior
   parte do público abre a plataforma no telefone, muitas vezes em rede fraca,
   às vezes com o problema acontecendo na frente dele.

   Princípios aplicados
     · Alvo de toque nunca menor que 44×44 px (WCAG 2.5.5).
     · Campo de formulário com 16px de fonte — abaixo disso o iOS dá zoom
       automático ao focar e desloca a tela.
     · Navegação principal ao alcance do polegar (barra inferior), não no topo.
     · Tabela vira lista de cartões no celular; ninguém rola tabela na horizontal.
     · Nada depende de hover: no toque, hover não existe.
     · Foco sempre visível, contraste AA, animação respeitando
       prefers-reduced-motion.
     · Área segura de aparelhos com recorte (safe-area-inset).

   Índice
     1. Tokens
     2. Base e tipografia
     3. Estrutura (topo, navegação inferior, menu lateral, conteúdo)
     4. Componentes
     5. Blocos do domínio
     6. Site público
     7. Telas maiores (progressive enhancement)
     8. Impressão e preferências do sistema
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root {
    /* Marca MandaChamar — aço e ferrugem, o vocabulário da oficina.
       Uma rampa só, do mais claro ao mais escuro: 050 → 900. */
    --aco-050: #F2F7FA;
    --aco-100: #D9E6ED;
    --aco-400: #4E87A8;
    --aco-500: #1F5878;   /* ação: preenchimento de botão */
    --aco-600: #17435E;   /* hover e texto de marca sobre fundo claro */
    --aco-700: #123449;   /* a cor da marca: cabeçalho e superfície escura */
    --aco-800: #0C2537;
    --aco-900: #071A26;

    /* A ferrugem é o único ponto de saturação da interface. Aparece no
       logotipo, no selo PRO e nos ícones de seção — nunca em bloco grande. */
    --ferrugem-500: #D2541F;
    --ferrugem-600: #A83F12;
    --ferrugem-100: #FBE4D9;
    --ferrugem-050: #FDF5F1;

    --areia:     #EFE9DE;

    /* Semânticos: verde é "deu certo", não é a marca. */
    --sucesso-600: #0A7350;
    --sucesso-700: #075C40;
    --sucesso-100: #DCF0E7;
    --ambar-500: #96700A;
    --ambar-100: #F8F1DC;
    --vermelho-500: #C4353A;
    --vermelho-100: #FBE7E7;
    --azul-500:  #2F53C7;
    --azul-100:  #E4E9FA;
    --roxo-500:  #6A4BC4;
    --roxo-100:  #ECE7FA;
    --ciano-500: #0A7C90;
    --ciano-100: #DFF2F5;

    --cinza-050: #F5F8FA;
    --cinza-100: #EAEFF3;
    --cinza-200: #DCE4EA;
    --cinza-300: #C2CDD6;
    --cinza-400: #8B9AA6;
    --cinza-500: #5E6E7A;
    --cinza-600: #42525E;

    --texto:        #12222C;
    --texto-suave:  #56666F;
    --fundo:        #F2F5F8;
    --superficie:   #FFFFFF;
    --borda:        #DEE6EC;

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

    --raio-sm: 10px;
    --raio: 14px;
    --raio-lg: 20px;
    --sombra-sm: 0 1px 2px rgba(18, 52, 73, .06), 0 1px 3px rgba(18, 52, 73, .04);
    --sombra: 0 4px 16px rgba(18, 52, 73, .08);
    --sombra-lg: 0 12px 32px rgba(18, 52, 73, .14);

    /* Alturas de estrutura — mudam em telas maiores (seção 7) */
    --topo-altura: 56px;
    --nav-altura: 60px;
    --menu-largura: 0px;

    /* Alvo mínimo de toque */
    --toque: 44px;
}

/* ── 2. Base e tipografia ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 16px;
    line-height: 1.55;
    color: var(--texto);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 700; color: var(--aco-700); text-wrap: balance; }
h1 { font-size: 1.375rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
h4 { font-size: .9rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--aco-600); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
small { font-size: .8rem; }
img, svg { max-width: 100%; }

/* Foco sempre visível — quem navega por teclado precisa saber onde está. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--aco-500);
    outline-offset: 2px;
    border-radius: 4px;
}

.texto-suave  { color: var(--texto-suave); }
.texto-mini   { font-size: .8rem; }
.texto-forte  { font-weight: 700; }
.texto-verde  { color: var(--sucesso-600); }
.texto-vermelho { color: var(--vermelho-500); }
.texto-ambar  { color: var(--ambar-500); }
.texto-centro { text-align: center; }
.texto-direita { text-align: right; }
.mono { font-family: var(--fonte-mono); font-size: .85em; }
.sem-margem { margin: 0; }

/* Conteúdo só para leitor de tela */
.apenas-leitor {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Pular para o conteúdo — primeiro item do teclado */
.pular-para-conteudo {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--aco-600); color: #fff;
    padding: .75rem 1rem; border-radius: 0 0 var(--raio-sm) 0;
}
.pular-para-conteudo:focus { left: 0; }

/* ── 3. Estrutura ────────────────────────────────────────────────────────── */
.topo {
    position: fixed;
    inset: 0 0 auto 0;
    height: calc(var(--topo-altura) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) .75rem 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: linear-gradient(100deg, var(--aco-900), var(--aco-600) 72%, var(--aco-500));
    color: #fff;
    z-index: 50;
}
.topo__logo { display: flex; align-items: center; min-height: var(--toque); }
.topo__logo img { height: 26px; display: block; }
.topo__perfil-tag {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 700;
    padding: .18rem .45rem;
    border-radius: 99px;
    background: rgba(210, 84, 31, .20);
    color: #F5A883;
    border: 1px solid rgba(210, 84, 31, .42);
    white-space: nowrap;
}
.topo__espaco { flex: 1; }
.topo__acoes { display: flex; align-items: center; gap: .15rem; }
.topo__link {
    color: rgba(255, 255, 255, .9);
    font-size: .9rem;
    min-width: var(--toque);
    min-height: var(--toque);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    border-radius: var(--raio-sm);
    padding: 0 .5rem;
}
.topo__link:hover { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }
.topo__sino { position: relative; }
.topo__contador {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 18px; height: 18px;
    padding: 0 4px;
    border-radius: 99px;
    background: var(--vermelho-500);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.topo__usuario { display: none; }

.avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aco-400), var(--aco-600));
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex: none;
}
.avatar--grande { width: 56px; height: 56px; font-size: 1.1rem; }

/* Navegação principal do celular: barra inferior, ao alcance do polegar. */
.nav-inferior {
    position: fixed;
    inset: auto 0 0 0;
    height: calc(var(--nav-altura) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    background: var(--superficie);
    border-top: 1px solid var(--borda);
    z-index: 50;
}
.nav-inferior__item {
    flex: 1;
    min-width: 0;
    min-height: var(--toque);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--cinza-500);
    font-size: .68rem;
    font-weight: 600;
    padding: .35rem .2rem;
    position: relative;
}
.nav-inferior__item:hover { text-decoration: none; color: var(--aco-600); }
.nav-inferior__item--ativo { color: var(--aco-600); }
.nav-inferior__item--ativo::before {
    content: '';
    position: absolute;
    top: 0; left: 22%; right: 22%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--aco-500);
}
.nav-inferior__icone { display: flex; line-height: 0; }
.nav-inferior__rotulo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-inferior__contador {
    position: absolute;
    top: 4px;
    margin-left: 20px;
    min-width: 16px; height: 16px;
    border-radius: 99px;
    background: var(--vermelho-500);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    padding: 0 4px;
}

/* Menu lateral: só existe a partir de telas grandes (seção 7) */
.menu { display: none; }

.conteudo {
    padding: calc(var(--topo-altura) + env(safe-area-inset-top) + 1rem) 1rem
             calc(var(--nav-altura) + env(safe-area-inset-bottom) + 1.5rem);
    max-width: 1320px;
    margin-inline: auto;
}

.pagina-cabecalho {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1rem;
}
.pagina-cabecalho p { margin: .15rem 0 0; color: var(--texto-suave); font-size: .9rem; }

/* ── 4. Componentes ──────────────────────────────────────────────────────── */
.grade { display: grid; gap: .75rem; grid-template-columns: 1fr; }
.pilha { display: grid; gap: .75rem; }
.linha { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.linha--fim { justify-content: flex-end; }
.linha--entre { justify-content: space-between; }

.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 1rem;
    box-shadow: var(--sombra-sm);
}
.cartao--limpo { padding: 0; overflow: hidden; }
.cartao--destaque { border-color: var(--aco-100); background: linear-gradient(180deg, var(--aco-050), var(--superficie) 60%); }
.cartao__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--borda);
}
.cartao__cabecalho h3 { margin: 0; }
.cartao__corpo { padding: 1rem; }
.cartao__rodape { padding: .8rem 1rem; border-top: 1px solid var(--borda); background: var(--cinza-050); font-size: .85rem; }

/* KPI */
.kpi {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: .9rem 1rem;
    box-shadow: var(--sombra-sm);
    border-left: 3px solid var(--aco-500);
}
.kpi--alerta { border-left-color: var(--ambar-500); }
.kpi--critico { border-left-color: var(--vermelho-500); }
.kpi--neutro { border-left-color: var(--cinza-300); }
.kpi__rotulo {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--cinza-500);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
}
.kpi__valor { font-size: 1.5rem; font-weight: 700; color: var(--aco-700); line-height: 1.15; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.kpi__valor--menor { font-size: 1.2rem; }
.kpi__nota { font-size: .78rem; color: var(--texto-suave); margin-top: .15rem; }

/* Botões — altura mínima de toque em todos os tamanhos */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: var(--toque);
    padding: .6rem 1.05rem;
    border-radius: var(--raio-sm);
    border: 1px solid transparent;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.3;
    transition: background .15s ease, border-color .15s ease, transform .06s ease;
}
.botao:hover { text-decoration: none; }
.botao:active { transform: scale(.985); }
.botao:disabled, .botao[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.botao--primario { background: var(--aco-500); color: #fff; }
.botao--primario:hover { background: var(--aco-600); }
.botao--escuro { background: var(--aco-700); color: #fff; }
.botao--escuro:hover { background: var(--aco-900); }
.botao--contorno { background: var(--superficie); border-color: var(--cinza-300); color: var(--cinza-600); }
.botao--contorno:hover { background: var(--cinza-050); border-color: var(--aco-400); color: var(--aco-600); }
/* Contorno sobre fundo escuro (hero, cabeçalho): fundo transparente, não branco. */
.botao--contorno-claro { background: transparent; border-color: rgba(255, 255, 255, .38); color: #fff; }
.botao--contorno-claro:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.botao--perigo { background: var(--vermelho-500); color: #fff; }
.botao--sutil { background: var(--cinza-100); color: var(--cinza-600); }
.botao--pequeno { min-height: 38px; padding: .35rem .75rem; font-size: .85rem; }
.botao--largo { width: 100%; }
.botao--grande { min-height: 52px; padding: .85rem 1.5rem; font-size: 1rem; }

/* Barra de ação fixa: a ação principal fica sempre visível no celular */
.barra-acao {
    position: sticky;
    bottom: 0;
    margin: 1rem -1rem calc(env(safe-area-inset-bottom) * -1);
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--superficie) 92%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--borda);
    display: flex;
    gap: .5rem;
    z-index: 20;
}
.barra-acao .botao { flex: 1; }

/* Formulários */
.campo { margin-bottom: 1rem; }
.campo label {
    display: block;
    font-size: .87rem;
    font-weight: 600;
    color: var(--cinza-600);
    margin-bottom: .35rem;
}
.campo__dica { font-size: .8rem; color: var(--texto-suave); margin-top: .3rem; }
.campo__erro { font-size: .8rem; color: var(--vermelho-500); margin-top: .3rem; font-weight: 600; }

.entrada, select.entrada, textarea.entrada {
    width: 100%;
    min-height: var(--toque);
    padding: .65rem .8rem;
    border: 1px solid var(--cinza-300);
    border-radius: var(--raio-sm);
    font: inherit;
    /* 16px evita o zoom automático do iOS ao focar o campo */
    font-size: 16px;
    color: var(--texto);
    background: var(--superficie);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.entrada:focus {
    outline: none;
    border-color: var(--aco-500);
    box-shadow: 0 0 0 3px rgba(14, 158, 110, .18);
}
.entrada[aria-invalid="true"] { border-color: var(--vermelho-500); }
textarea.entrada { min-height: 110px; resize: vertical; }
select.entrada { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--cinza-500) 50%), linear-gradient(135deg, var(--cinza-500) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }

.escolhas { display: grid; gap: .5rem; grid-template-columns: 1fr; }
.escolha {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: var(--toque);
    padding: .65rem .8rem;
    border: 1px solid var(--cinza-300);
    border-radius: var(--raio-sm);
    cursor: pointer;
    font-size: .92rem;
    background: var(--superficie);
}
.escolha:hover { border-color: var(--aco-400); }
.escolha input { accent-color: var(--aco-500); width: 20px; height: 20px; flex: none; }
.escolha--marcada { border-color: var(--aco-500); background: var(--aco-050); }

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .22rem .55rem;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}
.badge--verde   { background: var(--sucesso-100); color: var(--sucesso-700); }
.badge--azul    { background: var(--azul-100);     color: var(--azul-500); }
.badge--roxo    { background: var(--roxo-100);     color: var(--roxo-500); }
.badge--ciano   { background: var(--ciano-100);    color: var(--ciano-500); }
.badge--ambar   { background: var(--ambar-100);    color: var(--ambar-500); }
.badge--vermelho{ background: var(--vermelho-100); color: var(--vermelho-500); }
.badge--cinza   { background: var(--cinza-100);    color: var(--cinza-600); }
.badge--marca   { background: var(--ferrugem-100); color: var(--ferrugem-600); }
.badge--pro     { background: var(--ferrugem-500); color: #fff; }

/* ── Tabelas que viram cartões no celular ──────────────────────────────────
   No telefone, uma tabela de 8 colunas é ilegível e rolar na horizontal é
   frustrante. Cada linha vira um cartão e cada célula ganha seu rótulo,
   lido de data-rotulo. Em telas grandes volta a ser tabela (seção 7). */
.tabela-caixa { overflow-x: visible; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela thead { display: none; }
.tabela tbody { display: grid; gap: .6rem; }
.tabela tbody tr {
    display: grid;
    gap: .35rem;
    padding: .85rem 1rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
}
.tabela td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: 0;
    border: 0;
    font-size: .9rem;
    text-align: right;
}
.tabela td::before {
    content: attr(data-rotulo);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--cinza-500);
    text-align: left;
    flex: none;
}
.tabela td:not([data-rotulo])::before { content: none; }
/* A primeira célula é o título do cartão: ocupa a linha inteira */
.tabela td:first-child {
    display: block;
    text-align: left;
    font-size: 1rem;
    padding-bottom: .2rem;
    border-bottom: 1px solid var(--cinza-100);
    margin-bottom: .2rem;
}
.tabela td:first-child::before { display: block; margin-bottom: .1rem; }
.tabela--compacta td { font-size: .87rem; }

/* Toasts — no celular sobem de baixo, acima da navegação */
.toasts {
    position: fixed;
    left: .75rem;
    right: .75rem;
    bottom: calc(var(--nav-altura) + env(safe-area-inset-bottom) + .75rem);
    z-index: 200;
    display: grid;
    gap: .5rem;
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .85rem 1rem;
    border-radius: var(--raio);
    background: var(--superficie);
    box-shadow: var(--sombra-lg);
    border-left: 4px solid var(--aco-500);
    font-size: .9rem;
    animation: subir .25s ease;
}
.toast--erro   { border-left-color: var(--vermelho-500); }
.toast--aviso  { border-left-color: var(--ambar-500); }
.toast__fechar {
    margin-left: auto;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--cinza-400);
    font-size: 1.25rem;
    line-height: 1;
    min-width: var(--toque);
    min-height: var(--toque);
}
@keyframes subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Ícones
   Traçado de 24×24 que herda a cor do texto. Alinha pela linha de base do
   texto ao lado — daí o vertical-align negativo em vez de flex em tudo. */
.icone { flex: none; vertical-align: -.18em; }
.icone--suave { color: var(--texto-suave); }
.icone--marca { color: var(--ferrugem-500); }
.icone--cheia { fill: currentColor; }
.com-icone { display: inline-flex; align-items: center; gap: .4rem; }

/* Ícone dentro de um disco claro — usado quando o ícone é o único elemento
   gráfico da linha (notificação, item de lista) e precisa de peso visual. */
.icone-bolha {
    flex: none;
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--aco-050);
    box-shadow: inset 0 0 0 1px var(--aco-100);
    color: var(--aco-600);
}
.icone-bolha--grande { width: 60px; height: 60px; }

/* Lista de avisos */
.aviso {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .95rem 1.15rem;
    border-bottom: 1px solid var(--cinza-100);
}
.aviso:last-child { border-bottom: 0; }
.aviso--nova { background: var(--aco-050); }
.aviso__texto { flex: 1; min-width: 0; }
.aviso .botao { flex: none; }

/* Estado vazio */
.vazio { text-align: center; padding: 2.25rem 1rem; color: var(--texto-suave); }
.vazio__icone { display: block; margin: 0 auto .6rem; color: var(--cinza-300); }

/* Alertas */
.alerta {
    display: flex;
    gap: .65rem;
    padding: .85rem 1rem;
    border-radius: var(--raio);
    font-size: .9rem;
    border: 1px solid;
    margin-bottom: .75rem;
    align-items: flex-start;
}
.alerta--info    { background: var(--azul-100);     border-color: #C6D2F6; color: #22357F; }
.alerta--sucesso { background: var(--sucesso-100); border-color: #A9E0C9; color: var(--sucesso-700); }
.alerta--aviso   { background: var(--ambar-100);    border-color: #F3DCB3; color: #7A4A00; }
.alerta--erro    { background: var(--vermelho-100); border-color: #F4C9C9; color: #98262B; }

/* Abas / filtros — rolagem horizontal só aqui, onde é esperado */
.abas {
    display: flex;
    gap: .4rem;
    margin-bottom: .9rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.abas::-webkit-scrollbar { display: none; }
.aba {
    flex: none;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: .4rem .85rem;
    border-radius: 99px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--cinza-600);
    background: var(--superficie);
    border: 1px solid var(--borda);
    white-space: nowrap;
}
.aba:hover { text-decoration: none; border-color: var(--aco-400); color: var(--aco-600); }
.aba--ativa { background: var(--aco-700); color: #fff; border-color: var(--aco-700); }
.aba--ativa:hover { color: #fff; border-color: var(--aco-700); }

/* ── 5. Blocos do domínio ────────────────────────────────────────────────── */
.funil { display: grid; gap: .5rem; }
.funil__etapa { display: grid; grid-template-columns: 1fr auto; gap: .25rem .6rem; align-items: center; }
.funil__rotulo { font-size: .85rem; color: var(--cinza-600); }
.funil__valor { font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; }
.funil__barra { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--cinza-100); overflow: hidden; }
.funil__preenchimento { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--aco-400), var(--aco-600)); }

.grafico { display: flex; align-items: flex-end; gap: .4rem; height: 150px; padding-top: .5rem; }
.grafico__coluna { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; height: 100%; justify-content: flex-end; min-width: 0; }
.grafico__barra {
    width: 100%;
    max-width: 40px;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, var(--aco-400), var(--aco-600));
    min-height: 4px;
}
.grafico__barra--secundaria { background: linear-gradient(180deg, #F0A987, #C25E30); }
.grafico__rotulo { font-size: .68rem; color: var(--cinza-500); font-weight: 600; }
.grafico__valor { font-size: .65rem; color: var(--cinza-600); font-weight: 700; }
.legenda { display: flex; gap: .75rem; font-size: .75rem; color: var(--texto-suave); flex-wrap: wrap; }
.legenda__cor { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: .25rem; }

.score { display: inline-flex; align-items: baseline; gap: .1rem; font-weight: 700; color: var(--aco-600); }
.score__num { font-size: 1.1rem; }
.score__max { font-size: .7rem; color: var(--cinza-400); }
.score-barra { height: 6px; border-radius: 99px; background: var(--cinza-100); overflow: hidden; margin-top: .3rem; }
.score-barra__preenchimento { height: 100%; background: linear-gradient(90deg, var(--aco-400), var(--aco-600)); }
.composicao { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .4rem; }
.composicao__item {
    font-size: .68rem;
    padding: .12rem .45rem;
    border-radius: 99px;
    background: var(--cinza-100);
    color: var(--cinza-600);
    font-weight: 600;
}

.proposta {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: .9rem;
    background: var(--superficie);
    display: grid;
    gap: .6rem;
}
.proposta--vencedora { border-color: var(--aco-500); background: var(--aco-050); }
.proposta__topo { display: flex; align-items: flex-start; gap: .6rem; flex-wrap: wrap; }
.proposta__valor { font-size: 1.3rem; font-weight: 700; color: var(--aco-700); margin-left: auto; font-variant-numeric: tabular-nums; }

.linha-tempo { display: grid; gap: 0; padding-left: 1.2rem; }
.linha-tempo__item { position: relative; padding: 0 0 1rem 1.2rem; border-left: 2px solid var(--cinza-200); margin-left: -1.2rem; }
.linha-tempo__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.linha-tempo__ponto { position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--cinza-300); border: 2px solid var(--superficie); }
.linha-tempo__item--feito .linha-tempo__ponto { background: var(--sucesso-600); }
.linha-tempo__item--feito { border-left-color: var(--sucesso-600); }
.linha-tempo__titulo { font-weight: 600; font-size: .9rem; }
.linha-tempo__data { font-size: .78rem; color: var(--texto-suave); }

.estrelas { display: inline-flex; gap: 1px; color: var(--ferrugem-500); vertical-align: -.15em; }
.estrelas .icone--vazia { color: var(--cinza-300); }
.estrelas--grande { gap: 2px; }

.comparativo { width: 100%; border-collapse: collapse; font-size: .88rem; }
.comparativo th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza-500); padding: .5rem .6rem; border-bottom: 1px solid var(--borda); }
.comparativo td { padding: .55rem .6rem; border-bottom: 1px solid var(--cinza-100); }
.medidor { height: 7px; border-radius: 99px; background: var(--cinza-100); overflow: hidden; min-width: 70px; }
.medidor__preenchimento { height: 100%; border-radius: 99px; }
.medidor__preenchimento--acima     { background: var(--sucesso-600); }
.medidor__preenchimento--proximo   { background: var(--ambar-500); }
.medidor__preenchimento--abaixo    { background: var(--vermelho-500); }
.medidor__preenchimento--sem_dados { background: var(--cinza-300); }

/* ── 6. Site público ─────────────────────────────────────────────────────── */
.publico { min-height: 100vh; display: flex; flex-direction: column; background: var(--superficie); }
.publico__topo {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--borda);
    position: sticky;
    top: 0;
    background: color-mix(in srgb, var(--superficie) 94%, transparent);
    backdrop-filter: blur(8px);
    z-index: 30;
}
.publico__topo img { height: 30px; }
.publico__topo .botao { flex: none; }
.publico__conteudo { flex: 1; }
.publico__rodape { background: var(--aco-900); color: rgba(255, 255, 255, .75); padding: 2rem 1rem calc(2rem + env(safe-area-inset-bottom)); font-size: .88rem; }
.publico__rodape img { height: 28px; margin-bottom: .75rem; }

.hero {
    background:
        radial-gradient(900px 380px at 20% -10%, rgba(210, 84, 31, .22), transparent 60%),
        linear-gradient(160deg, var(--aco-900), var(--aco-600) 72%, var(--aco-500));
    color: #fff;
    padding: 2.25rem 1rem 2.5rem;
}
.hero__caixa { max-width: 1120px; margin: 0 auto; display: grid; gap: 1.75rem; }
.hero h1 { color: #fff; font-size: 1.9rem; line-height: 1.15; letter-spacing: -.02em; }
.hero p { color: rgba(255, 255, 255, .85); font-size: 1rem; }
.hero__selo {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: 99px;
    background: rgba(210, 84, 31, .18);
    border: 1px solid rgba(210, 84, 31, .42);
    color: #F5A883;
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: .85rem;
}
.hero__numeros { display: flex; gap: 1.5rem; margin-top: 1.5rem; flex-wrap: wrap; }
.hero__numero strong { display: block; font-size: 1.4rem; color: #fff; }
.hero__numero span { font-size: .78rem; color: rgba(255, 255, 255, .68); }
.hero__cartao {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--raio-lg);
    padding: 1.2rem;
}
.hero__passo { display: flex; gap: .75rem; padding: .6rem 0; }
.hero__passo-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(210, 84, 31, .22);
    color: #F5A883;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .8rem;
    flex: none;
}
.hero__passo strong { display: block; color: #fff; font-size: .92rem; }
.hero__passo span { font-size: .85rem; color: rgba(255, 255, 255, .72); }

.secao { max-width: 1120px; margin: 0 auto; padding: 2.25rem 1rem; }
.secao__titulo { text-align: center; margin-bottom: 1.5rem; }
.secao__titulo p { color: var(--texto-suave); max-width: 44rem; margin: .35rem auto 0; }

.categoria-cartao {
    display: grid;
    gap: .25rem;
    min-height: var(--toque);
    padding: .9rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
    color: var(--texto);
}
.categoria-cartao:hover { border-color: var(--aco-400); text-decoration: none; }
.categoria-cartao__icone { display: flex; color: var(--aco-600); }
.categoria-cartao strong { font-size: .95rem; }
.categoria-cartao span { font-size: .8rem; color: var(--texto-suave); }

.depoimento { padding: 1rem; border-radius: var(--raio); background: var(--cinza-050); border: 1px solid var(--borda); }
.depoimento p { font-size: .92rem; font-style: italic; }

.caixa-auth { max-width: 440px; margin: 1.5rem auto; }
.caixa-auth--larga { max-width: 720px; }
.caixa-auth__topo { text-align: center; margin-bottom: 1.25rem; }
.caixa-auth__topo img { height: 40px; margin-bottom: .85rem; }

.credenciais {
    margin-top: 1rem;
    padding: .85rem 1rem;
    border-radius: var(--raio);
    background: var(--cinza-050);
    border: 1px dashed var(--cinza-300);
    font-size: .82rem;
}
.credenciais table { width: 100%; font-size: .8rem; }
.credenciais td { padding: .2rem 0; }

/* ── 7. Telas maiores ──────────────────────────────────────────────────────
   A partir de 600px os perfis seguem caminhos deliberadamente diferentes:

   · CLIENTE e PRESTADOR usam a plataforma como aplicativo de celular — é onde
     eles estão quando o problema acontece. Em tela grande a interface NÃO
     vira site: continua a mesma coluna de aplicativo, centrada, com a
     navegação no polegar. Uma interface só significa um comportamento só
     para aprender, demonstrar e memorizar.

   · ADMIN é ferramenta de operação: tabela larga, comparativos, menu
     lateral. Em tela grande recebe o layout completo de painel.

   · O site público segue responsivo tradicional — é marketing.            */

@media (min-width: 600px) {
    /* Site público */
    .publico h1 { font-size: 1.5rem; }
    .hero h1 { font-size: 2.3rem; }
    .publico .escolhas { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

    /* Painel de operação */
    .app--admin h1 { font-size: 1.5rem; }
    .app--admin .grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app--admin .grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app--admin .escolhas { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
    .app--admin .pagina-cabecalho { flex-direction: row; align-items: flex-end; justify-content: space-between; }

    /* ── A concha de aplicativo ──────────────────────────────────────────
       Cliente e prestador em qualquer tela grande: a mesma coluna de
       celular, centrada sobre um fundo de palco. Nada muda de lugar em
       relação ao telefone — só o palco em volta.                          */
    .app--cliente, .app--prestador {
        background:
            radial-gradient(720px 420px at 84% -10%, rgba(210, 84, 31, .12), transparent 60%),
            linear-gradient(160deg, #0E2434, #1C4258);
    }
    /* O “aparelho”: a faixa central onde o aplicativo vive */
    .app--cliente::before, .app--prestador::before {
        content: '';
        position: fixed;
        inset: 0 auto 0 50%;
        transform: translateX(-50%);
        width: min(100%, 460px);
        background: var(--fundo);
        box-shadow: 0 0 70px rgba(3, 14, 22, .55);
        z-index: -1;
    }
    .app--cliente .topo, .app--prestador .topo,
    .app--cliente .nav-inferior, .app--prestador .nav-inferior,
    .app--cliente .barra-acao, .app--prestador .barra-acao {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(100%, 460px);
    }
    .app--cliente .conteudo, .app--prestador .conteudo {
        width: min(100%, 460px);
        margin-inline: auto;
    }
    .app--cliente .toasts, .app--prestador .toasts {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(100% - 1.5rem, 430px);
    }
}

@media (min-width: 900px) {
    /* ── Painel de operação em tela cheia ─────────────────────────────── */
    .app--admin { --topo-altura: 64px; --menu-largura: 244px; --nav-altura: 0px; }

    .app--admin .topo { padding-inline: 1.25rem; gap: 1rem; }
    .app--admin .topo__logo img { height: 30px; }
    .app--admin .topo__usuario { display: flex; align-items: center; gap: .5rem; }
    .app--admin .topo__link { padding: 0 .75rem; }

    /* Com mouse, o alcance do polegar não importa: a navegação vai para a lateral */
    .app--admin .nav-inferior { display: none; }

    .app--admin .menu {
        display: block;
        position: fixed;
        top: var(--topo-altura);
        bottom: 0;
        left: 0;
        width: var(--menu-largura);
        background: var(--superficie);
        border-right: 1px solid var(--borda);
        padding: 1rem .75rem;
        overflow-y: auto;
        z-index: 40;
    }
    .app--admin .menu__titulo {
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: var(--cinza-400);
        font-weight: 700;
        padding: .75rem .7rem .35rem;
    }
    .app--admin .menu__item {
        display: flex;
        align-items: center;
        gap: .65rem;
        min-height: var(--toque);
        padding: .55rem .7rem;
        border-radius: var(--raio-sm);
        color: var(--cinza-600);
        font-weight: 500;
        margin-bottom: 2px;
    }
    .app--admin .menu__item:hover { background: var(--cinza-050); color: var(--aco-700); text-decoration: none; }
    .app--admin .menu__item--ativo { background: var(--aco-050); color: var(--aco-600); font-weight: 600; box-shadow: inset 3px 0 0 var(--aco-500); }
    .app--admin .menu__icone { display: flex; flex: none; }
    .app--admin .menu__contador { margin-left: auto; background: var(--vermelho-500); color: #fff; border-radius: 99px; font-size: .7rem; font-weight: 700; padding: 0 .4rem; }
    .app--admin .menu__rodape { margin-top: 1.25rem; padding: .85rem; border-radius: var(--raio); background: var(--aco-050); border: 1px solid var(--aco-100); font-size: .78rem; color: var(--aco-700); }

    .app--admin .conteudo {
        margin-left: var(--menu-largura);
        padding: calc(var(--topo-altura) + 1.5rem) 1.75rem 3rem;
    }

    .app--admin .grade { gap: 1rem; }
    .app--admin .grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .app--admin .grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .app--admin .grade--2-1 { grid-template-columns: 2fr 1fr; }
    .app--admin .grade--1-2 { grid-template-columns: 1fr 2fr; }

    .app--admin .toasts { left: auto; right: 1.25rem; bottom: 1.25rem; max-width: 380px; }

    .app--admin .barra-acao { position: static; margin: 0; padding: 0; background: none; border: 0; backdrop-filter: none; }
    .app--admin .barra-acao .botao { flex: 0 0 auto; }

    /* No painel, a tabela volta a ser tabela */
    .app--admin .tabela-caixa { overflow-x: auto; }
    .app--admin .tabela thead { display: table-header-group; }
    .app--admin .tabela tbody { display: table-row-group; }
    .app--admin .tabela tbody tr { display: table-row; padding: 0; border: 0; border-radius: 0; background: none; border-bottom: 1px solid var(--cinza-100); }
    .app--admin .tabela tbody tr:hover { background: var(--cinza-050); }
    .app--admin .tabela tbody tr:last-child { border-bottom: 0; }
    .app--admin .tabela th {
        text-align: left;
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: var(--cinza-500);
        font-weight: 700;
        padding: .7rem 1rem;
        background: var(--cinza-050);
        border-bottom: 1px solid var(--borda);
        white-space: nowrap;
    }
    .app--admin .tabela td {
        display: table-cell;
        text-align: left;
        padding: .75rem 1rem;
        border: 0;
        border-bottom: 0;
        margin: 0;
        font-size: .88rem;
        vertical-align: middle;
    }
    .app--admin .tabela td::before { content: none; }
    .app--admin .tabela td:first-child { display: table-cell; font-size: .88rem; border-bottom: 0; margin-bottom: 0; padding-bottom: .75rem; }
    .app--admin .tabela td.texto-direita { text-align: right; }
    .app--admin .tabela--compacta td, .app--admin .tabela--compacta th { padding: .55rem .8rem; }

    /* ── Site público em tela cheia ───────────────────────────────────── */
    .hero__caixa { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 2.5rem; }
    .hero { padding: 3.5rem 2rem 3rem; }
    .hero h1 { font-size: 2.6rem; }
    .secao { padding: 3rem 2rem; }
    .publico__topo { padding: 1rem 2rem; }
    .publico__rodape { padding: 2rem; }
    .caixa-auth { margin: 3rem auto; }
}

/* ── 8. Impressão e preferências do sistema ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .topo, .menu, .nav-inferior, .toasts, .botao, .barra-acao, .pular-para-conteudo { display: none !important; }
    .conteudo { margin: 0; padding: 0; }
    .cartao, .kpi { break-inside: avoid; box-shadow: none; }
    .tabela thead { display: table-header-group; }
    .tabela tbody { display: table-row-group; }
    .tabela tbody tr { display: table-row; }
    .tabela td { display: table-cell; text-align: left; }
    .tabela td::before { content: none; }
}