/*
 * Componentes do protótipo que o Cerrado ainda não tem.
 * Usam só os tokens do Cerrado (theme.css, globals.css) para continuar no mesmo visual.
 */

/* Card de indicador (KPI) do dashboard */

.pc-kpi {
    --pc-kpi-cor: var(--cds-color-primary);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 4px;
    padding: 16px 16px 12px 16px;
    background-color: var(--cds-color-white);
    border: 1px solid var(--cds-color-disabled);
    border-radius: 8px;
    box-shadow: var(--cds-panel-shadow);
    overflow: hidden;
}

.pc-kpi::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background-color: var(--pc-kpi-cor);
}

.pc-kpi.primario { --pc-kpi-cor: var(--cds-color-primary-medium); }
.pc-kpi.alerta { --pc-kpi-cor: var(--cds-color-secondary); }
.pc-kpi.critico { --pc-kpi-cor: var(--cds-color-critical); }
.pc-kpi.sucesso { --pc-kpi-cor: var(--cds-color-success); }
.pc-kpi.neutro { --pc-kpi-cor: var(--cds-color-primary-light); }

.pc-kpi-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.pc-kpi-rotulo {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cds-color-neutral-strong);
    text-decoration: none;
}

a.pc-kpi-rotulo:hover {
    color: var(--pc-kpi-cor);
}

.pc-kpi-icone {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--pc-kpi-cor) 12%, var(--cds-color-white));
}

.pc-kpi-icone .cds-icon {
    width: 20px;
    height: 20px;
    fill: var(--pc-kpi-cor);
}

.pc-kpi-valor {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.pc-kpi-numero {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--cds-color-primary-strong);
}

.pc-kpi-unidade {
    font-size: 13px;
    color: var(--cds-color-neutral-strong);
}

.pc-kpi-detalhe {
    font-size: 13px;
    color: var(--cds-color-neutral-strong);
}

.pc-kpi-detalhe strong {
    font-weight: 600;
    color: var(--cds-color-offblack);
    font-variant-numeric: tabular-nums;
}

.pc-kpi-spark {
    height: 40px;
    margin: 0 -4px;
}

/* Barra empilhada: cada segmento recebe a largura em style. */
.pc-kpi-barra {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--cds-color-neutral-wash);
}

.pc-kpi-barra span {
    height: 100%;
}

.pc-kpi-barra .critico { background-color: var(--cds-color-critical); }
.pc-kpi-barra .sucesso { background-color: var(--cds-color-success); }
.pc-kpi-barra .primario { background-color: var(--cds-color-primary-medium); }
.pc-kpi-barra .neutro { background-color: var(--cds-color-neutral-light); }

.pc-kpi-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 12px;
    color: var(--cds-color-neutral-strong);
}

.pc-kpi-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pc-kpi-legenda strong {
    font-weight: 600;
    color: var(--cds-color-offblack);
    font-variant-numeric: tabular-nums;
}

.pc-kpi-legenda i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.pc-kpi-legenda i.critico { background-color: var(--cds-color-critical); }
.pc-kpi-legenda i.sucesso { background-color: var(--cds-color-success); }
.pc-kpi-legenda i.primario { background-color: var(--cds-color-primary-medium); }
.pc-kpi-legenda i.neutro { background-color: var(--cds-color-neutral-light); }

.pc-kpi-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--cds-color-neutral-wash);
}

.pc-kpi-link {
    display: inline-flex;
    align-items: center;
    /* Mesma altura do cds-btn-small, para o rodapé alinhar com ou sem botão. */
    min-height: 26px;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cds-color-primary-medium);
    text-decoration: none;
}

.pc-kpi-link .cds-icon {
    width: 12px;
    height: 12px;
    fill: currentColor;
    transition: transform 0.15s ease-in-out;
}

.pc-kpi-link:hover .cds-icon {
    transform: translateX(2px);
}

/* Listagens */

.pc-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 4px;
}

.pc-filtros {
    align-items: center;
    flex-wrap: wrap;
}

.pc-filtros .cds-content-search-input {
    flex: 0 1 360px;
}

.pc-resumo {
    margin-left: auto;
    font-size: 13px;
    color: var(--cds-color-neutral-strong);
}

.pc-resumo strong {
    color: var(--cds-color-offblack);
    font-variant-numeric: tabular-nums;
}

.pc-rodape-lista {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 4px 0 4px;
    font-size: 13px;
    color: var(--cds-color-neutral-strong);
}

.pc-vazio {
    padding: 32px 16px;
    text-align: center;
    color: var(--cds-color-neutral-strong);
}

.pc-vazio strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    color: var(--cds-color-offblack);
}

/* Texto secundário dentro da célula (ex.: "vence em 12 dias") */
.pc-sub {
    display: block;
    font-size: 12px;
    color: var(--cds-color-neutral-strong);
}

/* Ações por linha: botões só com ícone */

.pc-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
}

.pc-acao {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

.pc-acao .cds-icon {
    width: 16px;
    height: 16px;
    fill: var(--cds-color-neutral-medium);
}

.pc-acao:hover {
    background-color: var(--cds-color-primary-wash);
}

.pc-acao:hover .cds-icon {
    fill: var(--cds-color-primary-medium);
}

.pc-acao.critico:hover {
    background-color: var(--cds-color-critical-wash);
}

.pc-acao.critico:hover .cds-icon {
    fill: var(--cds-color-critical);
}

/* Barra de saldo do veículo */

.pc-saldo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}

.pc-saldo-texto {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--cds-color-neutral-strong);
    font-variant-numeric: tabular-nums;
}

.pc-saldo-texto strong {
    color: var(--cds-color-offblack);
}

.pc-saldo .pc-kpi-barra {
    height: 6px;
}

.pc-kpi-barra .alerta { background-color: var(--cds-color-alert); }

/* Formulários */

.pc-form {
    margin: 0 4px;
}

.pc-campo-erro {
    margin-top: 4px;
    font-size: 12px;
    color: var(--cds-color-critical);
}

.pc-ajuda {
    margin-top: 4px;
    font-size: 12px;
    color: var(--cds-color-neutral-strong);
}

/* Valor em destaque no modal de aviso (ex.: senha gerada) */
.pc-destaque:not(:empty) {
    display: block;
    margin-top: 12px;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--cds-color-primary-strong);
    font-variant-numeric: tabular-nums;
}

/* Linha "escolher + Adicionar" acima de uma tabela */
.pc-adicionar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 12px 4px;
}

.pc-adicionar .cds-select {
    flex: 0 1 360px;
}

.pc-sub.critico { color: var(--cds-color-critical); font-weight: 600; }
.pc-sub.alerta { color: var(--cds-color-alert-strong, var(--cds-color-alert)); font-weight: 600; }

/*
 * Tabela do Cerrado sem o table.js: o table.js mede as colunas uma vez, no carregamento,
 * e quebra quando o htmx troca as linhas ou quando a tabela abre vazia.
 * Aqui o navegador calcula as larguras: colunas "fit" do tamanho do conteúdo, "flex" com a sobra.
 */
table.cds-table.pc-tabela {
    display: table;
    table-layout: auto;
}

table.cds-table.pc-tabela thead tr th:first-child {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 8px 0;
}

table.cds-table.pc-tabela thead th {
    cursor: default;
}

table.cds-table.pc-tabela th[column="fit"],
table.cds-table.pc-tabela thead tr th[column="fit"]:first-child {
    width: 1% !important;
    white-space: nowrap;
}

table.cds-table.pc-tabela td {
    white-space: nowrap;
}

/* Indicador de uso do limite de crédito na top bar */

.pc-credito {
    position: relative;
    flex-shrink: 0;
    margin-right: 8px;
}

.pc-credito-botao {
    --pc-cor: var(--cds-color-success);
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 10px 0 6px;
    border: 0;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--cds-color-white);
    font-family: var(--cds-font-family);
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

.pc-credito-botao:hover,
.pc-credito-botao[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.22);
}

.pc-credito-botao.alerta { --pc-cor: var(--cds-color-alert); }
.pc-credito-botao.critico { --pc-cor: var(--cds-color-critical-light, var(--cds-color-critical)); }

.pc-credito-texto strong {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Anel de progresso: --pc-uso de 0 a 100 */
.pc-anel {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, var(--cds-top-bar-background) 64%, transparent 66%),
        conic-gradient(var(--pc-cor) calc(var(--pc-uso) * 1%), rgba(255, 255, 255, 0.28) 0);
}

.pc-credito-painel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 280px;
    padding: 16px;
    background-color: var(--cds-color-white);
    border-radius: 8px;
    box-shadow: var(--cds-shadow-strong);
}

.pc-credito-painel[hidden] {
    display: none;
}

.pc-credito-titulo {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cds-color-neutral-strong);
}

.pc-credito-uso {
    font-size: 13px;
    color: var(--cds-color-neutral-strong);
}

.pc-credito-uso strong {
    color: var(--cds-color-offblack);
}

.pc-credito-painel dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--cds-color-neutral-wash);
    font-size: 13px;
}

.pc-credito-painel dt {
    color: var(--cds-color-neutral-strong);
}

.pc-credito-painel dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--cds-color-offblack);
    font-variant-numeric: tabular-nums;
}

.pc-credito-painel dd.sucesso {
    color: var(--cds-color-success-strong);
}

@media (max-width: 768px) {
    .pc-credito-texto { display: none; }
    .pc-credito-botao { padding: 0 5px; }
}

/* Conteúdo dos modais carregados pelo htmx (#pc-janela) */

.pc-janela-corpo {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-height: 70vh;
    overflow: auto;
    text-align: left;
}

.pc-resumo-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    font-size: 13px;
    color: var(--cds-color-neutral-strong);
}

.pc-resumo-linha strong {
    color: var(--cds-color-offblack);
    font-variant-numeric: tabular-nums;
}

.pc-cupom {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--cds-color-disabled);
    border-radius: 8px;
    background-color: var(--cds-color-white);
}

.pc-cupom-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--cds-color-offblack);
}

.pc-dir {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

/* Filtros com rótulo (datas e selects) */
.pc-filtro-campo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 160px;
}

.pc-filtro-campo label {
    font-size: 12px;
    color: var(--cds-color-neutral-strong);
}

.pc-filtro-campo .cds-select {
    min-width: 220px;
}

/* Linha de totais acima da lista */
.pc-totais {
    gap: 4px 28px;
    padding: 10px 12px;
}

/* Tabela larga: rola na horizontal em vez de espremer as colunas */
.pc-rolagem-x {
    overflow-x: auto;
}

/* Linha de tabela que abre um detalhe ao clicar */
tr.pc-linha-clicavel {
    cursor: pointer;
}

tr.pc-linha-clicavel:hover td {
    background-color: var(--cds-color-primary-wash);
}

/* Detalhe de título e boleto */

.pc-valor-grande {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 24px;
    font-weight: 700;
    color: var(--cds-color-primary-strong);
    font-variant-numeric: tabular-nums;
}

.pc-dados {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr) auto);
    gap: 6px 16px;
    margin: 0;
    font-size: 13px;
}

.pc-dados dt {
    color: var(--cds-color-neutral-strong);
}

.pc-dados dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--cds-color-offblack);
    font-variant-numeric: tabular-nums;
}

.pc-linha-digitavel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pc-linha-digitavel code,
.pc-chave {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--cds-color-offblack);
    white-space: nowrap;
}

.pc-barras {
    width: 100%;
    height: 56px;
    fill: var(--cds-color-offblack);
}

.pc-filtro-busca {
    flex: 1 1 280px;
}

/* Documentos para imprimir (fatura, DANFE) */

body.pc-doc-corpo {
    height: auto;
    overflow: auto;
    background-color: var(--cds-page-header-background, #e9ebed);
}

.pc-doc-barra {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background-color: var(--cds-top-bar-background);
    color: var(--cds-color-white);
    font-weight: 600;
}

.pc-doc {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: min(210mm, 100% - 32px);
    margin: 24px auto;
    padding: 32px;
    background-color: var(--cds-color-white);
    border-radius: 8px;
    box-shadow: var(--cds-panel-shadow);
    color: var(--cds-color-offblack);
    font-size: 13px;
}

.pc-doc-topo {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--cds-color-primary);
}

.pc-doc-topo h1 {
    margin: 0;
    font-size: 20px;
    color: var(--cds-color-primary);
}

.pc-doc-topo p {
    margin: 4px 0 0 0;
    color: var(--cds-color-neutral-strong);
}

.pc-doc-id {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}

.pc-doc-id span {
    font-size: 12px;
    color: var(--cds-color-neutral-strong);
}

.pc-doc-id strong {
    font-size: 18px;
}

.pc-doc-bloco {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pc-doc-bloco h2 {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cds-color-neutral-strong);
}

.pc-doc-colunas {
    flex-direction: row;
    gap: 32px;
}

.pc-doc-colunas dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    flex: 1;
    margin: 0;
}

.pc-doc-colunas dt {
    color: var(--cds-color-neutral-strong);
}

.pc-doc-colunas dd {
    margin: 0;
    font-weight: 600;
}

.pc-doc-valores {
    flex-direction: row;
    gap: 8px;
}

.pc-doc-valores div {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--cds-color-disabled);
    border-radius: 6px;
}

.pc-doc-valores span {
    font-size: 12px;
    color: var(--cds-color-neutral-strong);
}

.pc-doc-valores strong {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.pc-doc-valores .pc-doc-total {
    border-color: var(--cds-color-primary);
    background-color: var(--cds-color-primary-wash);
}

.pc-doc-valores .pc-doc-total strong {
    color: var(--cds-color-primary);
}

.pc-doc-rodape {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--cds-color-disabled);
    font-size: 12px;
    color: var(--cds-color-neutral-strong);
}

@media print {
    body.pc-doc-corpo { background: none; }
    .pc-doc-barra { display: none; }
    .pc-doc { width: auto; margin: 0; padding: 0; box-shadow: none; }
}

.pc-doc .cds-table-simple thead th,
.pc-doc .cds-table-simple tbody td {
    padding: 6px 8px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Configurações: lista de regras com chave liga/desliga */
.pc-regras {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 8px 24px;
    padding: 4px 0 8px 0;
}

.pc-regra {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--cds-color-offblack);
    cursor: pointer;
}

.pc-regra strong {
    font-weight: 600;
}

.pc-regra .cds-switch {
    flex-shrink: 0;
    margin-top: 2px;
}

.pc-contrato {
    padding: 4px 0 8px 0;
    font-size: 14px;
}

.pc-celula-pilha {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* Bloqueio de funcionalidades por usuário */
.pc-bloqueios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.pc-bloqueio-card {
    gap: 4px;
    padding: 12px 16px;
}

.pc-bloqueio-card h3 {
    margin: 0 0 4px 0;
    font-size: 15px;
}

.pc-bloqueio-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 40px;
}

.pc-bloqueio-linha .pc-regra {
    padding: 4px 0;
    align-items: center;
}

.pc-bloqueio-ate {
    width: 150px;
}

.pc-bloqueio-ate[hidden] {
    display: none;
}

/* Marca enviada pelo proprietário */
.cds-main-menu-btn.pc-main-menu-logo {
    width: auto;
    padding: 0 12px;
}

.pc-logo-topo {
    display: block;
    max-height: 28px;
    max-width: 120px;
    object-fit: contain;
}

.pc-logo-login {
    max-height: 48px;
    max-width: 240px;
    object-fit: contain;
}

body.pc-login-fundo {
    background: url("/marca/fundo") center / cover no-repeat;
}

/* Área do proprietário: envio de marca */
.pc-marca {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
    gap: 24px;
    padding-bottom: 8px;
}

.pc-marca-atual,
.pc-marca-envio {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.pc-marca-envio label {
    font-size: 14px;
}

.pc-marca-previa {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 420px;
    min-height: 96px;
    border: 1px solid var(--cds-color-disabled);
    border-radius: 8px;
    overflow: hidden;
}

/* A logomarca aparece sobre o azul da barra superior e do login. */
.pc-previa-logo {
    padding: 16px;
    background-color: var(--cds-top-bar-background);
}

.pc-previa-logo img {
    max-height: 64px;
    max-width: 100%;
}

.pc-previa-fundo img {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
}

.pc-previa-vazia {
    color: var(--cds-color-neutral-strong);
    background-color: var(--cds-color-neutral-wash);
}

/* Célula de tabela com texto longo que pode quebrar linha */
table.cds-table.pc-tabela td .pc-quebra,
table.cds-table.pc-tabela td .pc-quebra a {
    white-space: normal;
    height: auto;
}

.pc-botao-alinhado {
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .pc-marca { grid-template-columns: 1fr; }
}

/* Marca › Cores do portal */
.pc-cores {
    display: grid;
    grid-template-columns: minmax(320px, 5fr) minmax(360px, 7fr);
    gap: 12px;
    margin: 0 4px;
    align-items: start;
}

.pc-cores-escolha,
.pc-cores-previa {
    gap: 8px;
    padding: 12px 16px 16px 16px;
}

.pc-modelos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.pc-modelo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--cds-color-disabled);
    border-radius: 8px;
    background-color: var(--cds-color-white);
    font-family: var(--cds-font-family);
    font-size: 13px;
    color: var(--cds-color-offblack);
    text-align: left;
    cursor: pointer;
}

.pc-modelo:hover {
    border-color: var(--cds-color-neutral-light);
}

.pc-modelo.ativo {
    border-color: var(--cds-color-primary-medium);
    box-shadow: 0 0 0 2px var(--cds-color-primary-weak);
}

.pc-modelo-cores {
    display: flex;
    flex-shrink: 0;
}

.pc-modelo-cores i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--cds-color-white);
}

.pc-modelo-cores i + i {
    margin-left: -6px;
}

.pc-cor-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pc-cor-campo {
    display: flex;
    gap: 8px;
}

.pc-cor-roda {
    flex-shrink: 0;
    width: 44px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--cds-color-disabled);
    border-radius: 6px;
    background: var(--cds-color-white);
    cursor: pointer;
}

.pc-previa-portal {
    overflow: hidden;
    border: 1px solid var(--cds-color-disabled);
    border-radius: 8px;
    background-color: var(--cds-page-header-background);
}

.pc-previa-topo {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
    padding: 0 12px;
    background-color: var(--cds-top-bar-background);
    color: var(--cds-color-white);
    font-size: 13px;
}

.pc-previa-topo strong {
    white-space: nowrap;
}

.pc-previa-menu {
    display: flex;
    gap: 12px;
    height: 100%;
}

.pc-previa-menu span {
    display: flex;
    align-items: center;
    opacity: 0.8;
}

.pc-previa-menu span.ativo {
    opacity: 1;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--cds-color-secondary);
}

.pc-previa-credito {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 3px 10px 3px 4px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    white-space: nowrap;
    --pc-cor: var(--cds-color-success);
}

.pc-previa-corpo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.pc-previa-corpo .cds-page-header-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
}

.pc-previa-corpo .pc-kpi {
    margin: 0;
    max-width: 320px;
}

.pc-previa-tags {
    display: flex;
    gap: 6px;
}

.pc-contraste {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    font-size: 13px;
}

.pc-contraste .ok strong { color: var(--cds-color-success-strong); }
.pc-contraste .ruim strong { color: var(--cds-color-critical); }

@media (max-width: 992px) {
    .pc-cores { grid-template-columns: 1fr; }
}

/* Assinatura eletrônica do motorista (Cobranças) */
.pc-assinatura {
    margin: 0;
    padding: 16px;
    border: 1px dashed var(--cds-color-neutral-light);
    border-radius: 8px;
    background: var(--cds-color-white);
    color: var(--cds-color-offblack);
    text-align: center;
}
.pc-assinatura-traco {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0 auto;
}
.pc-assinatura figcaption {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--cds-color-neutral-wash);
    font-size: 12px;
    color: var(--cds-color-neutral-strong);
}