/* Rota Simples: componentes da ferramenta, sobre o design system (biscaia.css).
   Tudo fica dentro de .rota para não mudar .campo, .secao e .botao do resto do site.
   Layout: formulário à esquerda, resultado à direita; empilha no celular.
   Ordem do resultado: resumo da decisão, depois o detalhe para o cliente (1) e para a empresa (2). */

/* Paleta do Rota Simples: a do Consulta CNPJ, sempre clara (o <html> leva data-theme="light", que
   desliga o modo escuro do biscaia.css), com o azul-marinho um pouco mais claro e fundo branco. */
:root {
    --azul: #1b3f73;
    --azul-hover: #24508f;
    --sobre-azul-suave: #d3deee;
    --fundo: #ffffff;
    --superficie: #ffffff;
    --superficie-2: #f3f6fb;
    --borda: #e3e8f0;
    --destaque-fundo: #eef3fb;
    --trilho: var(--superficie-2);
    color-scheme: light;
}

/* Painéis brancos sobre fundo branco: a borda e uma sombra leve separam os blocos. */
.rota .painel { box-shadow: 0 1px 2px rgba(27, 63, 115, 0.05); }

.rota.conteudo {
    /* Coluna presa à largura da tela: sem isso as tabelas, que não quebram linha, alargam a página no celular. */
    grid-template-columns: minmax(0, 1fr);
    max-width: 1180px;
    padding-block: var(--e-5) var(--e-7);
    gap: var(--e-5);
    font-size: 0.95rem;
    line-height: 1.5;
}

.rota-titulo { display: grid; gap: var(--e-1); }
.rota-titulo h1 { font-size: var(--t-xl); }
.rota-titulo p { color: var(--texto-suave); }

.rota .prazo { background: var(--aviso-fundo); color: var(--aviso); border-radius: var(--raio); padding: 10px 14px; font-size: 0.9rem; }
.rota .colunas { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .rota .colunas { grid-template-columns: minmax(0, 1fr); } }
.rota .painel { background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; padding: 18px; display: grid; gap: 14px; min-width: 0; }
.rota .painel h2 { font-size: 1.05rem; color: var(--destaque); }

/* Painel dos dados da empresa: recolhe para a esquerda e deixa o resultado com a largura toda. */
.rota .formulario-topo { display: flex; align-items: center; gap: 10px; }
.rota .formulario-corpo { display: grid; gap: 14px; min-width: 0; }
.rota .menu-botao {
    display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0;
    border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); color: var(--destaque); cursor: pointer;
}
.rota .menu-botao:hover { border-color: var(--destaque); background: var(--destaque-fundo); }
.rota .colunas.recolhido { grid-template-columns: 58px minmax(0, 1fr); }
.rota .colunas.recolhido .formulario { padding: 10px; }
.rota .colunas.recolhido .formulario-topo h2,
.rota .colunas.recolhido .formulario-corpo { display: none; }
@media (max-width: 860px) {
    .rota .colunas.recolhido { grid-template-columns: minmax(0, 1fr); }
    .rota .colunas.recolhido .formulario-topo h2 { display: block; }
}
/* Busca por CNPJ na base da Receita. */
.rota .busca-cnpj { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.rota .busca-cnpj .botao { justify-self: stretch; }
.rota .cnpj-resultado { display: grid; gap: 2px; padding: 8px 12px; border-radius: var(--raio); background: var(--superficie-2); font-size: 0.85rem; }
.rota .cnpj-resultado[hidden] { display: none; }
.rota .cnpj-resultado.bom { background: var(--bom-fundo); }
.rota .cnpj-resultado.aviso { background: var(--aviso-fundo); color: var(--aviso); }
.rota .cnpj-resultado.ruim { background: var(--ruim-fundo); color: var(--ruim); }

/* Perfis de fornecedor do Simples na DAS: valor, Anexo e remover na 1ª linha; receita na 2ª; crédito embaixo. */
.rota .fornecedores { display: grid; gap: 8px; }
.rota .fornecedores-titulo { font-size: 0.85rem; color: var(--texto-suave); }
.rota .fornecedores-linhas { display: grid; gap: 8px; }
.rota .fornecedor {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 6px 8px; align-items: end;
    padding: 10px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie-2);
}
.rota .fornecedor .campo:nth-of-type(3) { grid-column: 1 / 3; }
.rota .fornecedor-remover {
    grid-column: 3; grid-row: 1; width: 32px; height: 36px; padding: 0; border: 1px solid var(--borda); border-radius: var(--raio);
    background: var(--superficie); color: var(--texto-suave); font-size: 1.1rem; cursor: pointer;
}
.rota .fornecedor-remover:hover { color: var(--ruim); border-color: var(--ruim); }
.rota .fornecedor-remover[hidden], .rota .botao[hidden] { display: none; }
.rota .fornecedor-credito { grid-column: 1 / -1; }
.rota .fornecedor .campo input, .rota .fornecedor .campo select { background: var(--superficie); }
.rota .aviso-sublimite { background: var(--aviso-fundo); color: var(--aviso); border-radius: var(--raio); padding: 8px 12px; font-size: 0.82rem; }
.rota .aviso-sublimite[hidden] { display: none; }
.rota fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
.rota legend { padding: 0; font-weight: 700; margin-bottom: 8px; }
.rota .campo { display: grid; gap: 4px; }
.rota .campo[hidden] { display: none; }
.rota .campo label { font-size: 0.85rem; font-weight: 400; color: var(--texto-suave); }
.rota .campo input[type="text"], .rota .campo input[type="email"], .rota .campo select {
    width: 100%; padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie-2);
    color: var(--texto); font: inherit; font-size: 1rem; font-variant-numeric: tabular-nums;
}
.rota input::placeholder { color: var(--texto-suave); opacity: 0.8; }
.rota input[type="range"] { width: 100%; padding: 0; border: 0; background: none; accent-color: var(--destaque); }
.rota .opcao { display: flex; gap: 8px; align-items: flex-start; font-size: 0.85rem; color: var(--texto-suave); }
.rota .opcao input { margin-top: 3px; accent-color: var(--destaque); }
.rota .dupla { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rota details { border-top: 1px solid var(--borda); padding-top: 10px; }
.rota summary { cursor: pointer; font-size: 0.9rem; color: var(--destaque); }
.rota details .dupla { margin-top: 10px; }
.rota .ajuda { display: grid; gap: 6px; margin-top: 8px; font-size: 0.82rem; color: var(--texto-suave); }
.rota .ajuda ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.rota .ajuda b { color: var(--texto); }
.rota .botao { justify-self: start; }
.rota .botao-pequeno { padding: 7px 12px; font-size: 0.88rem; }
.rota .nota { font-size: 0.82rem; color: var(--texto-suave); }
.rota .exemplo { display: inline-block; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--aviso); background: var(--aviso-fundo); border-radius: var(--raio-p); padding: 2px 8px; justify-self: start; }
.rota .resultado { display: grid; gap: 20px; min-width: 0; }
.rota .resultado[hidden] { display: none; }
.rota .secao { display: grid; gap: 4px; padding-top: 12px; border-top: 2px solid var(--borda); }
.rota .secao .etiqueta { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--destaque); background: none; padding: 0; border-radius: 0; }
.rota .secao h2 { font-size: 1.3rem; }
.rota .conclusao { border-radius: 8px; padding: 18px; display: grid; gap: 6px; }
.rota .conclusao.bom { background: var(--bom-fundo); }
.rota .conclusao.ruim { background: var(--ruim-fundo); }
.rota .conclusao.neutro { background: var(--trilho); }
.rota .conclusao .selo { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.rota .conclusao.bom .selo { color: var(--bom); }
.rota .conclusao.ruim .selo { color: var(--ruim); }
.rota .conclusao.neutro .selo { color: var(--texto-suave); }
.rota .conclusao h2 { font-size: 1.4rem; line-height: 1.25; color: var(--texto); }
.rota .resumo { border-color: var(--destaque); border-width: 2px; }
.rota .resumo h2 { font-size: 1.2rem; color: var(--texto); }
.rota .resumo ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.rota .passos td:first-child { white-space: normal; min-width: 190px; }
.rota .ano { max-width: 140px; }
.rota .leitura { display: grid; gap: 8px; }
.rota .numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 20px; }
.rota .numero .rotulo { font-size: 0.8rem; color: var(--texto-suave); }
.rota .numero .valor { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rota .valor.bom { color: var(--bom); }
.rota .valor.ruim { color: var(--ruim); }
.rota .regua { display: grid; gap: 6px; }
.rota .regua-trilho { position: relative; height: 56px; background: var(--trilho); border-radius: var(--raio-p); overflow: hidden; }
/* Números dentro da régua: o seu percentual em cima, o ponto de virada embaixo, ao lado de cada marca. */
.rota .regua-rotulo { position: absolute; white-space: nowrap; font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; padding-inline: 6px; }
.rota .regua-rotulo-voce { top: 5px; color: var(--destaque); }
.rota .regua-rotulo-virada { bottom: 5px; color: var(--bom); }
.rota .regua-rotulo.a-esquerda { transform: translateX(-100%); }
.rota .regua-rotulo[hidden] { display: none; }
.rota .regua-zona { position: absolute; top: 0; bottom: 0; right: 0; background: var(--bom-fundo); border-left: 2px solid var(--bom); }
.rota .regua-zona[hidden] { display: none; }
.rota .regua-voce { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--destaque); transform: translateX(-1px); }
.rota .regua-legenda { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.82rem; color: var(--texto-suave); }
.rota .regua-legenda b { color: var(--texto); font-variant-numeric: tabular-nums; }
.rota .marca { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: baseline; }
.rota .marca.voce { background: var(--destaque); }
.rota .marca.zona { background: var(--bom-fundo); border: 1px solid var(--bom); }
.rota .grafico svg { width: 100%; height: auto; display: block; }
.rota .grafico text { font-variant-numeric: tabular-nums; }
.rota .barras { display: grid; gap: 12px; }
.rota .barra { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.rota .barra .nome { font-size: 0.9rem; font-weight: 600; }
.rota .barra .trilho { height: 14px; background: var(--trilho); border-radius: 3px; overflow: hidden; }
.rota .barra .preenchido { height: 100%; background: var(--destaque); opacity: 0.55; border-radius: 3px; }
.rota .barra.melhor .preenchido { background: var(--bom); opacity: 1; }
.rota .barra .total { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.rota .barra .delta { grid-column: 2 / 4; font-size: 0.78rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.rota .chip { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bom); background: var(--bom-fundo); border-radius: var(--raio-p); padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
@media (max-width: 520px) { .rota .barra { grid-template-columns: minmax(0, 1fr) auto; } .rota .barra .trilho { grid-column: 1 / 3; grid-row: 2; } .rota .barra .delta { grid-column: 1 / 3; } }
.rota .tabela-caixa { overflow-x: auto; }
.rota table { border-collapse: collapse; width: 100%; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.rota th, .rota td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.rota th:first-child, .rota td:first-child { text-align: left; }
.rota th { color: var(--texto-suave); font-weight: 600; font-size: 0.78rem; }
.rota td.bom { color: var(--bom); }
.rota td.ruim { color: var(--ruim); }
.rota td.melhor { color: var(--bom); font-weight: 700; }
.rota tr.total td { font-weight: 700; }
.rota tr.info td { color: var(--texto-suave); }
.rota .alerta { background: var(--ruim-fundo); color: var(--ruim); border-radius: var(--raio); padding: 10px 14px; }
.rota .alerta[hidden] { display: none; }
.rota .conferencia { font-family: var(--fonte-mono); font-size: 0.78rem; color: var(--texto-suave); }
.rota .conferencia.falhou { color: var(--ruim); }
.rota .relatorio form { display: grid; gap: 10px; }
.rota .retorno { font-size: 0.88rem; }
.rota .retorno.bom { color: var(--bom); }
.rota .retorno.ruim { color: var(--ruim); }

/* Páginas de texto (privacidade). */
.texto-legal { max-width: var(--largura-texto); display: grid; gap: var(--e-3); }
.texto-legal h2 { font-size: var(--t-lg); margin-top: var(--e-3); }
.texto-legal ul { margin: 0; padding-left: 20px; display: grid; gap: var(--e-1); }

/* Cabeçalho da ferramenta com o botão "Bases legais". */
.rota-cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-3); }
.bases-botao { display: inline-flex; align-items: center; gap: 8px; }

/* Gaveta lateral das bases legais (elemento dialog). */
.gaveta {
    margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(600px, 100vw); max-width: 100vw;
    padding: var(--e-5); border: 0; border-left: 3px solid var(--realce); background: var(--superficie); color: var(--texto);
    overflow-y: auto; box-shadow: var(--sombra);
}
.gaveta::backdrop { background: rgba(0, 20, 50, 0.45); }
.gaveta-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-3); }
.gaveta-topo h2 { font-size: var(--t-lg); }
.gaveta .menu-botao {
    display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; font-size: 1.3rem;
    border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); color: var(--texto-suave); cursor: pointer;
}

/* Conteúdo das bases legais, na gaveta e na página /bases-legais. */
.bases-legais { display: grid; gap: var(--e-5); font-size: 0.95rem; line-height: 1.55; }
.bases-legais section { display: grid; gap: var(--e-3); }
.bases-legais h2 { font-size: var(--t-md); color: var(--destaque); }
.bases-legais .roteiro { margin: 0; padding-left: 22px; display: grid; gap: var(--e-3); }
.bases-legais .roteiro strong { display: block; }
.bases-legais .fonte { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--texto-suave); }
.bases-legais details { border-top: 1px solid var(--borda); padding: 10px 0 2px; }
.bases-legais summary { cursor: pointer; font-weight: 600; color: var(--texto); }
.bases-legais details p { margin-top: 6px; }
.bases-legais .normas { margin: 0; padding-left: 20px; display: grid; gap: var(--e-1); }

/* O atributo hidden vence o display dos componentes (painel, selo, botão etc.). */
.rota [hidden] { display: none !important; }

/* Abas "Uma empresa" e "Grupo de empresas". */
.abas { display: flex; gap: 4px; border-bottom: 2px solid var(--borda); }
.abas .aba {
    padding: 10px 18px; margin-bottom: -2px; border: 0; border-bottom: 3px solid transparent; background: none;
    font: inherit; font-weight: 600; color: var(--texto-suave); cursor: pointer;
}
.abas .aba:hover { color: var(--destaque); }
.abas .aba[aria-selected="true"] { color: var(--destaque); border-bottom-color: var(--realce); }
.aba-painel { display: grid; gap: 20px; min-width: 0; }

/* Modo grupo: um cartão por empresa. */
.rota .grupo-empresas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.rota .empresa-grupo { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie-2); }
.rota .empresa-grupo .campo input, .rota .empresa-grupo .campo select { background: var(--superficie); }
.rota .empresa-grupo-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.rota .empresa-grupo-topo .fornecedor-remover { grid-column: auto; grid-row: auto; }
.rota .grupo-avisos { display: grid; gap: 8px; }
.rota .grupo-avisos:empty { display: none; }
.rota .grupo-resumo, .rota .grupo-regras { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.rota td .escolha { display: block; font-size: 0.75rem; color: var(--texto-suave); }