/* Componentes reaproveitados por fatura, portal e admin. */

/* --- Cartão ------------------------------------------------------------ */

.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-sm);
    overflow: hidden;
}

.cartao__cabeca {
    padding: var(--e-4);
    border-bottom: 1px solid var(--borda);
    background: var(--superficie-2);
}

.cartao__corpo { padding: var(--e-4); }

.cartao__rodape {
    padding: var(--e-3) var(--e-4);
    border-top: 1px solid var(--borda);
    background: var(--superficie-2);
    font-size: var(--txt-sm);
}

@media (min-width: 640px) {
    .cartao__cabeca, .cartao__corpo { padding: var(--e-5); }
}

/* --- Selo de status ---------------------------------------------------- */

.selo {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    padding: 0.2em 0.7em;
    border-radius: var(--raio-full);
    border: 1px solid transparent;
    font-size: var(--txt-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.selo--ok      { background: var(--acento-suave); color: var(--acento);  border-color: var(--acento-borda); }
.selo--neutro  { background: var(--info-suave);   color: var(--info);    border-color: var(--info-borda); }
.selo--alerta  { background: var(--alerta-suave); color: var(--alerta);  border-color: var(--alerta-borda); }
.selo--aviso   { background: var(--aviso-suave);  color: var(--aviso);   border-color: var(--aviso-borda); }
.selo--parado  { background: var(--parado-suave); color: var(--parado);  border-color: var(--borda-forte); }

/* --- Botão ------------------------------------------------------------- */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    min-height: 44px;             /* alvo de toque confortável no celular */
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio);
    background: var(--superficie);
    color: var(--texto);
    font-size: var(--txt-base);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.botao:hover { background: var(--superficie-3); }
.botao:active { transform: translateY(1px); }
.botao[disabled], .botao[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.botao--principal {
    background: var(--acento);
    border-color: var(--acento);
    color: var(--texto-invertido);
}
.botao--principal:hover {
    background: var(--acento-forte);
    border-color: var(--acento-forte);
    color: var(--texto-invertido);
}

.botao--discreto {
    background: transparent;
    border-color: transparent;
    color: var(--texto-suave);
    font-weight: 500;
}
.botao--discreto:hover { background: var(--superficie-3); color: var(--texto); }

.botao--perigo {
    border-color: var(--alerta-borda);
    color: var(--alerta);
    background: var(--alerta-suave);
}

.botao--largo { width: 100%; }
.botao--pequeno { min-height: 36px; padding: 0.35rem 0.75rem; font-size: var(--txt-sm); }

/* --- Campos ------------------------------------------------------------ */

.campo { display: block; }
.campo + .campo { margin-top: var(--e-4); }

.campo__rotulo {
    display: block;
    margin-bottom: var(--e-1);
    font-size: var(--txt-sm);
    font-weight: 600;
    color: var(--texto-suave);
}

.campo__entrada,
.campo select,
.campo textarea {
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio);
    background: var(--superficie);
    color: var(--texto);
}

.campo__entrada:focus,
.campo select:focus,
.campo textarea:focus {
    border-color: var(--foco);
}

.campo__ajuda {
    margin-top: var(--e-1);
    font-size: var(--txt-sm);
    color: var(--texto-apagado);
}

.campo__erro {
    margin-top: var(--e-1);
    font-size: var(--txt-sm);
    color: var(--alerta);
}

.campo--erro .campo__entrada { border-color: var(--alerta); }

/* Código de acesso: seis dígitos grandes e espaçados */
.campo__codigo {
    font-family: var(--fonte-mono);
    font-size: var(--txt-2xl);
    letter-spacing: 0.4em;
    text-align: center;
    padding-left: 0.4em;
}

/* --- Avisos ------------------------------------------------------------ */

.aviso {
    padding: var(--e-3) var(--e-4);
    border: 1px solid var(--borda);
    border-left-width: 3px;
    border-radius: var(--raio);
    background: var(--superficie-2);
    font-size: var(--txt-sm);
}

.aviso--ok     { background: var(--acento-suave); border-color: var(--acento-borda); border-left-color: var(--acento); }
.aviso--alerta { background: var(--alerta-suave); border-color: var(--alerta-borda); border-left-color: var(--alerta); }
.aviso--info   { background: var(--info-suave);   border-color: var(--info-borda);   border-left-color: var(--info); }
.aviso--atencao{ background: var(--aviso-suave);  border-color: var(--aviso-borda);  border-left-color: var(--aviso); }

/* --- Lista de definição (dados do cliente, da fatura) ------------------ */

.dados {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-3);
    margin: 0;
}

@media (min-width: 480px) {
    .dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dados--linha-unica { grid-template-columns: 1fr; }
}

.dados__item { min-width: 0; }

.dados__rotulo {
    font-size: var(--txt-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texto-apagado);
}

.dados__valor {
    font-size: var(--txt-base);
    color: var(--texto);
    overflow-wrap: anywhere;
}

/* --- Tabela ------------------------------------------------------------ */

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--txt-sm);
}

.tabela th {
    text-align: left;
    font-size: var(--txt-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texto-apagado);
    padding: var(--e-2) var(--e-2);
    border-bottom: 1px solid var(--borda);
}

.tabela td {
    padding: var(--e-3) var(--e-2);
    border-bottom: 1px solid var(--borda);
    vertical-align: top;
}

.tabela tr:last-child td { border-bottom: 0; }
.tabela th:first-child, .tabela td:first-child { padding-left: 0; }
.tabela th:last-child,  .tabela td:last-child  { padding-right: 0; text-align: right; }

.tabela__total td {
    border-top: 2px solid var(--borda-forte);
    border-bottom: 0;
    padding-top: var(--e-3);
    font-weight: 700;
    font-size: var(--txt-md);
}

/* Tabela larga rola dentro da própria caixa; a página nunca rola na horizontal */
.tabela-rolagem {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Bloco de copiar (código Pix) -------------------------------------- */

.copiavel {
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
}

.copiavel__texto {
    padding: var(--e-3);
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio);
    background: var(--superficie-2);
    font-family: var(--fonte-mono);
    font-size: var(--txt-xs);
    line-height: 1.5;
    color: var(--texto-suave);
    overflow-wrap: anywhere;
    user-select: all;
    max-height: 6.5em;
    overflow-y: auto;
}

/* --- Rodapé ------------------------------------------------------------ */

.rodape {
    margin-top: var(--e-7);
    padding-block: var(--e-5);
    border-top: 1px solid var(--borda);
    font-size: var(--txt-sm);
    color: var(--texto-apagado);
    text-align: center;
}

.rodape a { color: var(--texto-suave); }

/* --- Alternador de tema ------------------------------------------------- */

.tema {
    background: transparent;
    border: 1px solid var(--borda);
    border-radius: var(--raio-full);
    width: 36px;
    height: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--texto-suave);
    padding: 0;
}
.tema:hover { background: var(--superficie-3); color: var(--texto); }

/* --- Escolha em cartão ---------------------------------------------------
   Rádio ou caixa de seleção com o cartão inteiro clicável, não só o círculo:
   no celular, acertar um alvo de 16 px é irritação garantida. */

.escolha {
    display: block;
    border: 0;
    padding: 0;
    min-width: 0;

    /* Só as margens laterais e a de baixo: a de cima é da .pilha, e um
       `margin: 0` aqui a apagaria por vir depois na cascata. */
    margin-inline: 0;
    margin-block-end: 0;
}

.escolha legend {
    display: block;
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: var(--e-2);
}

.escolha__opcoes {
    clear: both;
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
}

@media (min-width: 400px) {
    .escolha__opcoes { flex-direction: row; }
    .escolha__opcoes .escolha__item { flex: 1 1 0; }
}

.escolha__item {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    padding: var(--e-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie-2);
    cursor: pointer;
}

.escolha__item:hover { border-color: var(--borda-forte); }

.escolha__item:has(input:checked) {
    border-color: var(--acento-borda);
    background: var(--acento-suave);
}

.escolha__item:has(input:focus-visible) {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
}

.escolha__item input { margin-top: 3px; accent-color: var(--acento); }

.escolha__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.escolha__titulo { font-weight: 600; font-size: var(--txt-base); }
.escolha__nota { font-size: var(--txt-xs); color: var(--texto-suave); }

/* Campo curto para número, UF, percentual. */
.campo--curto { max-width: 8rem; }

/* Ação destrutiva discreta dentro de uma lista: parece link, não botão,
   porque um botão vermelho por linha transforma a tela num campo minado. */
.ligacao-perigo {
    background: none;
    border: 0;
    padding: 0;
    min-height: 0;
    font: inherit;
    font-size: var(--txt-sm);
    color: var(--alerta);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.ligacao-perigo:hover { color: var(--texto); }

/* Coluna forçada: lista de interruptores nunca vira grade lado a lado. */
.escolha__opcoes--coluna { flex-direction: column; }

@media (min-width: 400px) {
    .escolha__opcoes--coluna { flex-direction: column; }
    .escolha__opcoes--coluna .escolha__item { flex: 0 0 auto; }
}

/* Botão que se comporta como link, dentro de uma linha de lista. */
.ligacao {
    background: none;
    border: 0;
    padding: 0;
    min-height: 0;
    font: inherit;
    font-size: var(--txt-sm);
    color: var(--acento);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.ligacao + .ligacao { margin-left: var(--e-3); }
.ligacao:hover { color: var(--texto); }

/* --- Abas de filtro -------------------------------------------------------
   Filtro de três opções não merece um <select>: aba mostra as alternativas sem
   exigir um toque para descobri-las. Usado no admin e no portal. */

.abas {
    display: flex;
    gap: var(--e-1);
    overflow-x: auto;
    padding-bottom: 2px;
}

.abas__item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: var(--e-2) var(--e-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio-full);
    background: var(--superficie);
    color: var(--texto-suave);
    text-decoration: none;
    font-size: var(--txt-sm);
}

.abas__item:hover { color: var(--texto); border-color: var(--borda-forte); }

.abas__item--ativo {
    background: var(--acento-suave);
    border-color: var(--acento-borda);
    color: var(--acento);
    font-weight: 600;
}

/* --- Conversa de chamado --------------------------------------------------
   Sem balão colorido de aplicativo de mensagem: o que separa uma fala da outra
   é a borda lateral e o rótulo de quem falou. Fica mais perto de e-mail, que é
   o que isto é. As duas pontas do chamado — cliente e admin — usam o mesmo. */

.conversa { display: flex; flex-direction: column; gap: var(--e-3); }

.fala {
    padding: var(--e-3) var(--e-4);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-left: 3px solid var(--borda-forte);
    border-radius: var(--raio);
}

.fala--cliente { border-left-color: var(--acento); }
.fala--sistema { border-left-color: var(--borda); background: var(--superficie-2); }

/* Nota interna: visualmente distinta para não ser confundida, ao correr o
   olho, com algo que o cliente leu. */
.fala--interna {
    border-left-color: var(--aviso);
    background: var(--aviso-suave);
    border-color: var(--aviso-borda);
}

.fala__quem {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-1) var(--e-3);
    align-items: baseline;
    font-weight: 600;
    font-size: var(--txt-sm);
}

.fala__quando { font-weight: 400; color: var(--texto-apagado); font-size: var(--txt-xs); }

.fala__texto { margin-top: var(--e-2); overflow-wrap: anywhere; }

/* --- Caixa de confirmação -------------------------------------------------
   Alvo grande e texto ao lado, nunca embaixo. Aceite com rótulo distante da
   caixa é aceite que se marca sem ler. */

.confirmacao {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    padding: var(--e-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie-2);
    font-size: var(--txt-sm);
    cursor: pointer;
}

.confirmacao:has(input:checked) {
    border-color: var(--acento-borda);
    background: var(--acento-suave);
}

.confirmacao input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: var(--acento);
}