/* =============================================================================
   Radariza — folha de estilo única
   =============================================================================

   Sem framework: as views já usam um vocabulário próprio e pequeno
   (`cartao`, `tabela`, `botao`, `etiqueta`…), e trazer Bootstrap só para
   redesenhar essas mesmas classes acrescentaria 200 KB e uma segunda gramática
   por cima da que já existe.

   A identidade é a do produto: um RADAR. Fundo escuro de instrumento, um verde
   de varredura como cor de ação, e o dado sempre com mais contraste que o
   rótulo — quem usa isto passa o dia lendo tabela de empresa.

   Organização: tokens · base · layout público · painel · componentes ·
   utilitários · responsivo.
   ========================================================================== */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
    /* Superfícies, do fundo para a frente */
    --fundo:          #0b1017;
    --fundo-elevado:  #121a24;
    --superficie:     #161f2b;
    --superficie-alt: #1c2735;
    --borda:          #24303f;
    --borda-forte:    #33445a;

    /* Texto */
    --texto:          #e8eef6;
    --texto-suave:    #9aabc0;
    --texto-fraco:    #6b7d94;

    /* Ação — o verde da varredura do radar */
    --acento:         #22d39a;
    --acento-escuro:  #16a97b;
    --acento-fraco:   rgba(34, 211, 154, .12);

    /* Estados */
    --erro:           #f2555a;
    --erro-fraco:     rgba(242, 85, 90, .12);
    --alerta:         #f0a92b;
    --alerta-fraco:   rgba(240, 169, 43, .12);
    --sucesso:        #22d39a;
    --info:           #4aa8ff;

    --raio:      10px;
    --raio-p:    6px;
    --sombra:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
    --transicao: 140ms ease;

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

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

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

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--fonte);
    font-size: 15px;
    line-height: 1.55;
    color: var(--texto);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .6rem; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; margin-top: 1.6rem; }
h3 { font-size: 1rem; }

p { margin: 0 0 1rem; }

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

code {
    font-family: var(--mono);
    font-size: .875em;
    padding: .12em .38em;
    border-radius: 4px;
    background: var(--superficie-alt);
    color: var(--texto);
}

:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

/* ── Marca ────────────────────────────────────────────────────────────────── */
.marca {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.02em;
    color: var(--texto);
    text-decoration: none;
}
.marca:hover { text-decoration: none; }

/* O ponto de varredura: dá identidade sem exigir arquivo de imagem. */
.marca::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-fraco), 0 0 12px var(--acento);
    flex: none;
}

/* ── Layout público (login, instalação, landing) ─────────────────────────── */
body.publico {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    /* Duas manchas suaves: dá profundidade sem imagem de fundo. */
    background:
        radial-gradient(900px 500px at 12% -8%, rgba(34,211,154,.10), transparent 60%),
        radial-gradient(700px 420px at 100% 0%, rgba(74,168,255,.07), transparent 55%),
        var(--fundo);
}

.cartao-central {
    width: 100%;
    max-width: 480px;
    padding: 2rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--fundo-elevado);
    box-shadow: var(--sombra);
}

.cartao-central > .marca { margin-bottom: 1.5rem; }

/* A tela de instalação pede mais largura: são dois blocos de campos lado a
   lado. Casa pelo mesmo atributo da regra de grade lá embaixo. */
body.publico:has(.formulario[action="/instalacao"]) .cartao-central { max-width: 760px; }

/* ── Painel: casca com barra lateral ──────────────────────────────────────── */
/*
 * A navegação é uma COLUNA À ESQUERDA, e não abas no topo, pelo mesmo motivo do
 * ZappyXPlay: o menu cresce. Abas horizontais cabem enquanto há quatro itens e
 * quebram na primeira seção nova; a coluna comporta dez itens e ainda deixa
 * espaço para contador e tópico.
 */
body.painel {
    background: var(--fundo);
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 56px 1fr;
    grid-template-areas:
        "lateral topo"
        "lateral conteudo";
    min-height: 100vh;
}

.lateral {
    grid-area: lateral;
    background: var(--fundo-elevado);
    border-right: 1px solid var(--borda);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.lateral > .marca {
    padding: 0 1.1rem;
    height: 56px;
    flex: none;
    border-bottom: 1px solid var(--borda);
}

.lateral nav { padding: .8rem .6rem; display: flex; flex-direction: column; gap: 1px; }

.lateral nav a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .7rem;
    border-radius: var(--raio-p);
    color: var(--texto-suave);
    font-size: .89rem;
    font-weight: 500;
    transition: background var(--transicao), color var(--transicao);
}
.lateral nav a:hover { background: var(--superficie); color: var(--texto); text-decoration: none; }
.lateral nav a.ativo { background: var(--acento-fraco); color: var(--acento); font-weight: 600; }

/* O quadradinho da esquerda no lugar de um pacote de ícones: 5 KB de CSS em vez
   de 200 KB de fonte para desenhar 10 formas. */
.lateral nav a::before {
    content: "";
    width: 7px; height: 7px; flex: none;
    border-radius: 2px;
    background: currentColor;
    opacity: .45;
}
.lateral nav a.ativo::before { opacity: 1; box-shadow: 0 0 8px currentColor; }

/* Tópico: separa assuntos quando o menu passa de meia dúzia de itens. */
.lateral nav .topico {
    margin: 1.1rem 0 .3rem;
    padding: 0 .7rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--texto-fraco);
}

/* Contador do item (fila de atendimento, jobs pendentes). Número no menu é o
   que faz alguém olhar; escondido na tela, ninguém vê. */
.lateral nav a .contador {
    margin-left: auto;
    min-width: 20px;
    padding: .05rem .35rem;
    border-radius: 999px;
    background: var(--acento);
    color: #06231a;
    font-size: .7rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.barra {
    grid-area: topo;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--borda);
    background: var(--fundo-elevado);
    position: sticky;
    top: 0;
    z-index: 20;
}

.barra .titulo-pagina {
    font-size: .92rem;
    font-weight: 600;
    color: var(--texto-suave);
    margin-right: auto;
}

/* O painel interno se distingue do painel do cliente por uma faixa de cor —
   é a diferença que evita agir na conta errada achando que é a própria. */
.barra--plataforma { border-bottom-color: var(--info); box-shadow: inset 0 -2px 0 var(--info); }
.lateral--plataforma { border-right-color: rgba(74,168,255,.28); }

/*
 * O corpo do painel interno.
 *
 * O aviso da barra some quando a página rola; um fundo levemente frio mantém a
 * distinção visível o tempo todo — quem opera as duas áreas no mesmo dia
 * precisa saber onde está sem procurar.
 */
body.painel--plataforma {
    background:
        radial-gradient(1100px 400px at 50% 0%, rgba(74,168,255,.05), transparent 70%),
        var(--fundo);
}

/* O selo da área, ao lado da marca: "plataforma". */
.marca small {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--info);
    border: 1px solid rgba(74,168,255,.35);
    background: rgba(74,168,255,.10);
    padding: .1rem .35rem;
    border-radius: 4px;
}


.conta {
    display: flex;
    align-items: center;
    gap: .85rem;
    font-size: .85rem;
    color: var(--texto-suave);
}
.conta form { margin: 0; }
.conta button {
    padding: .35rem .7rem;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-p);
    background: transparent;
    color: var(--texto-suave);
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
    transition: var(--transicao);
}
.conta button:hover { border-color: var(--erro); color: var(--erro); }

.conteudo {
    grid-area: conteudo;
    max-width: 1280px;
    width: 100%;
    padding: 1.75rem 1.5rem 4rem;
}

/* ── Cabeçalho de página ──────────────────────────────────────────────────── */
/* Título à esquerda, ação à direita — o botão principal da tela tem lugar fixo,
   e quem procura "onde crio uma lista" olha sempre para o mesmo canto. */
.cabecalho-pagina {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.cabecalho-pagina h1 { margin-bottom: .15rem; }
.cabecalho-pagina .sub { margin: 0; color: var(--texto-suave); font-size: .89rem; }

/* ── Cartões ──────────────────────────────────────────────────────────────── */
.cartao, .caixa {
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--fundo-elevado);
}

.caixa + .caixa, .cartao + .cartao { margin-top: 1rem; }

/* Grade de indicadores do início. `auto-fit` para não quebrar quando o número
   de cartões mudar — o dashboard vai crescer. */
.cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.cartoes .cartao strong,
.cartoes .cartao b {
    display: block;
    font-size: 1.9rem;
    font-weight: 680;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

/* O rótulo do indicador vem depois do número e precisa pesar menos que ele. */
.cartoes .cartao span,
.cartoes .cartao small {
    display: block;
    margin-top: .3rem;
    font-size: .8rem;
    color: var(--texto-suave);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/*
 * Cartão-indicador com CONTEXTO — o padrão do ZappyXPlay.
 *
 * Um número sozinho não informa: "0 clientes" pode ser catástrofe ou sistema
 * novo. A linha de apoio (`.contexto`) responde "o que isso quer dizer", e o
 * link no rodapé leva a quem quer agir sobre aquilo. Sem essas duas coisas o
 * dashboard vira um painel de números que ninguém usa.
 */
.cartao--indicador {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: 1.15rem 1.25rem 0;
    overflow: hidden;
}
.cartao--indicador .valor {
    font-size: 1.9rem;
    font-weight: 680;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.cartao--indicador .rotulo {
    font-size: .8rem;
    color: var(--texto-suave);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cartao--indicador .contexto {
    margin-top: .4rem;
    font-size: .8rem;
    color: var(--texto-fraco);
    min-height: 1.2em;
}
.cartao--indicador .rodape {
    margin: .9rem -1.25rem 0;
    padding: .5rem 1.25rem;
    border-top: 1px solid var(--borda);
    font-size: .8rem;
    font-weight: 600;
}

/* Tons por natureza do indicador: o olho encontra o alerta sem ler. */
.cartao--bom    { border-color: rgba(34,211,154,.3);  background: linear-gradient(180deg, var(--acento-fraco), transparent 60%), var(--fundo-elevado); }
.cartao--bom    .valor { color: var(--acento); }
.cartao--alerta { border-color: rgba(240,169,43,.32); background: linear-gradient(180deg, var(--alerta-fraco), transparent 60%), var(--fundo-elevado); }
.cartao--alerta .valor { color: var(--alerta); }
.cartao--ruim   { border-color: rgba(242,85,90,.32);  background: linear-gradient(180deg, var(--erro-fraco), transparent 60%), var(--fundo-elevado); }
.cartao--ruim   .valor { color: var(--erro); }
.cartao--frio   { border-color: rgba(74,168,255,.3);  background: linear-gradient(180deg, rgba(74,168,255,.10), transparent 60%), var(--fundo-elevado); }
.cartao--frio   .valor { color: var(--info); }

/* ── Barra de progresso (carga da Receita, uso de plano) ─────────────────── */
.barra-progresso {
    height: 6px;
    border-radius: 999px;
    background: var(--superficie-alt);
    overflow: hidden;
    margin-top: .5rem;
}
.barra-progresso > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--acento);
    transition: width var(--transicao);
}

/* ── Estado vazio ─────────────────────────────────────────────────────────── */
/* Tela sem dado precisa dizer o que fazer, não só "nenhum registro". */
.vazio {
    padding: 2.5rem 1.5rem;
    text-align: center;
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio);
    background: var(--fundo-elevado);
}
.vazio h3 { margin-bottom: .35rem; }
.vazio p { color: var(--texto-suave); font-size: .89rem; margin-bottom: 1rem; }

/* ── Formulários ──────────────────────────────────────────────────────────── */
.formulario { display: flex; flex-direction: column; gap: 1rem; margin: 0; }

.formulario label {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .82rem;
    font-weight: 550;
    color: var(--texto-suave);
}

input, select, textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-p);
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    font-size: .92rem;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

input::placeholder { color: var(--texto-fraco); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-fraco);
}

select {
    appearance: none;
    /* A seta é desenhada em SVG embutido: evita um arquivo de imagem só para
       isto e continua nítida em qualquer densidade de tela. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239aabc0' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    padding-right: 2rem;
}

/* Filtros: campos lado a lado, com o botão alinhado à base da linha. */
.formulario--filtros,
.formulario--linha {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
}

.formulario--filtros label,
.formulario--linha label { flex: 1 1 190px; min-width: 0; }

.formulario--filtros .botao,
.formulario--linha .botao { flex: none; }

/*
 * Instalação: os dois blocos de campos em grade.
 *
 * ⚠️ Seletor pelo ATTRIBUTO do form (`action="/instalacao"`), e não por uma
 * classe modificadora: a view usa apenas `class="formulario"`, e inventar aqui
 * um `formulario--instalacao` que ninguém escreve no HTML seria uma regra
 * morta — o tipo de defeito que não dá erro, só não aplica.
 */
.formulario[action="/instalacao"] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
}
.formulario[action="/instalacao"] h2 { flex-basis: 100%; margin-bottom: 0; }
.formulario[action="/instalacao"] label { flex: 1 1 210px; }
.formulario[action="/instalacao"] .botao { flex-basis: 100%; margin-top: .5rem; }

/* ── Botões ───────────────────────────────────────────────────────────────── */
.botao, button[type="submit"]:not(.conta button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .58rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--raio-p);
    background: var(--acento);
    color: #06231a;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transicao);
}

.botao:hover, button[type="submit"]:not(.conta button):hover {
    background: var(--acento-escuro);
    text-decoration: none;
}

.botao:disabled, .botao[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
}

.botao--linha {
    background: transparent;
    border-color: var(--borda-forte);
    color: var(--texto);
}
.botao--linha:hover { background: var(--superficie); border-color: var(--acento); color: var(--acento); }

/* ── Tabelas ──────────────────────────────────────────────────────────────── */
/* O invólucro rola no celular sem espremer as colunas. */
.tabela {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .89rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    overflow: hidden;
    background: var(--fundo-elevado);
}

.tabela thead th {
    padding: .65rem .85rem;
    text-align: left;
    font-size: .74rem;
    font-weight: 620;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texto-suave);
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
}

.tabela tbody td {
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--borda);
    vertical-align: middle;
}

.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: var(--superficie-alt); }

/* Número em tabela alinha à direita e usa dígito de largura fixa: coluna de
   valor que "dança" a cada linha é difícil de comparar de relance. */
.tabela td.numero, .tabela th.numero {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* CNPJ, telefone e afins: monoespaçado para o olho alinhar os dígitos. */
.tabela .mono, .mono { font-family: var(--mono); font-size: .86em; }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
    padding: .65rem 0;
    border-bottom: 1px solid var(--borda);
}
.lista li:last-child { border-bottom: 0; }

/* ── Etiquetas de situação ────────────────────────────────────────────────── */
.etiqueta {
    display: inline-block;
    padding: .18rem .55rem;
    border: 1px solid var(--borda-forte);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--texto-suave);
    background: var(--superficie);
    white-space: nowrap;
}

/*
 * As situações do funil, do frio ao ganho.
 *
 * ⚠️ O nome da classe vem do VALOR gravado no banco
 * (`etiqueta--<?= $lead['situacao'] ?>`), então acrescentar uma situação nova
 * no código sem acrescentar a regra aqui NÃO quebra nada — a etiqueta só fica
 * cinza. É de propósito: falta de cor é degradação suave, não tela quebrada.
 */
.etiqueta--novo         { color: var(--info);    border-color: rgba(74,168,255,.4);  background: rgba(74,168,255,.10); }
.etiqueta--em_contato   { color: var(--alerta);  border-color: rgba(240,169,43,.4);  background: var(--alerta-fraco); }
.etiqueta--qualificado  { color: #b98bff;        border-color: rgba(185,139,255,.4); background: rgba(185,139,255,.10); }
.etiqueta--proposta     { color: #ff9d5c;        border-color: rgba(255,157,92,.4);  background: rgba(255,157,92,.10); }
.etiqueta--ganho        { color: var(--acento);  border-color: rgba(34,211,154,.45); background: var(--acento-fraco); }
.etiqueta--perdido      { color: var(--erro);    border-color: rgba(242,85,90,.4);   background: var(--erro-fraco); }

/* Situação da organização, no painel da plataforma. */
.etiqueta--ativo        { color: var(--acento);  border-color: rgba(34,211,154,.45); background: var(--acento-fraco); }
.etiqueta--trial        { color: var(--info);    border-color: rgba(74,168,255,.4);  background: rgba(74,168,255,.10); }
.etiqueta--inadimplente { color: var(--alerta);  border-color: rgba(240,169,43,.4);  background: var(--alerta-fraco); }
.etiqueta--suspenso,
.etiqueta--cancelado    { color: var(--erro);    border-color: rgba(242,85,90,.4);   background: var(--erro-fraco); }

/* ── Avisos ───────────────────────────────────────────────────────────────── */
.aviso {
    padding: .7rem .95rem;
    margin-bottom: 1rem;
    border: 1px solid var(--borda-forte);
    border-left: 3px solid var(--texto-suave);
    border-radius: var(--raio-p);
    background: var(--superficie);
    font-size: .88rem;
}

.aviso--erro    { border-left-color: var(--erro);    background: var(--erro-fraco); }
.aviso--sucesso { border-left-color: var(--acento);  background: var(--acento-fraco); }
.aviso--alerta  { border-left-color: var(--alerta);  background: var(--alerta-fraco); }
.aviso--info    { border-left-color: var(--info);    background: rgba(74,168,255,.10); }

.erro-detalhe {
    padding: 1rem;
    border-radius: var(--raio-p);
    background: #0d1219;
    border: 1px solid var(--borda);
    font-family: var(--mono);
    font-size: .8rem;
    color: var(--texto-suave);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Utilitários ──────────────────────────────────────────────────────────── */
.discreto { color: var(--texto-suave); font-size: .85rem; font-weight: 400; }
h1 .discreto, h2 .discreto { font-size: .95rem; margin-left: .4rem; }

section + section { margin-top: 1.75rem; }

/* ── Responsivo ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    /*
     * Abaixo de 900px a coluna lateral vira uma faixa rolável no topo. Não é
     * menu-sanduíche de propósito: um botão que abre gaveta precisa de JS, e o
     * painel tem 6 itens — cabem numa faixa que rola, sem estado escondido.
     */
    body.painel {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "lateral"
            "topo"
            "conteudo";
    }

    .lateral {
        position: static;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--borda);
    }
    .lateral > .marca { border-bottom: 0; }
    .lateral nav {
        flex-direction: row;
        gap: .25rem;
        overflow-x: auto;
        padding: .5rem .75rem .7rem;
    }
    .lateral nav a { white-space: nowrap; }
    /* O tópico só faz sentido numa coluna vertical. */
    .lateral nav .topico { display: none; }

    .barra { padding: 0 1rem; height: 52px; }
    .conteudo { padding: 1.25rem 1rem 3rem; }

    /* Tabela larga: rola em vez de espremer as colunas até ficarem ilegíveis. */
    .tabela { display: block; overflow-x: auto; white-space: nowrap; }

    .formulario--filtros label,
    .formulario--linha label,
    .formulario[action="/instalacao"] label { flex-basis: 100%; }
}

@media (max-width: 480px) {
    .cartao-central { padding: 1.35rem; }
    .cartoes { grid-template-columns: 1fr 1fr; }
    .barra .titulo-pagina { display: none; }
}

/* Quem pediu menos movimento no sistema não deve receber animação daqui. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}