/*
    LEGIT CHECK V3 — base do módulo.
    Usada pela fila (pendentes.tpl.html), pela entrada (entrada.tpl.html) e pelo dialog
    de confirmação, que abre nas duas. O que é de uma tela só fica no <style> dela.

    Layout, espaçamento, texto e chip saem das utilitárias (spacing/flex/style/chips) no
    HTML. Aqui fica o que nenhuma cobre. Cor é sempre token do var.css ou custom property
    local com o motivo ao lado.
*/

.lc3,
.lc3-menu,
.lc3-dialog {
    --lc3-borda: var(--grey-3);
    --lc3-fundo: var(--background-droper);

    /* Versões escuras para TEXTO sobre o fundo claro de cada etapa: o
       --warning/--success/--danger puros não passam no contraste em 12-14px.
       A cor forte (bolinha, borda) continua sendo o token do var.css. */
    --lc3-ambar-texto: #713F12;
    --lc3-verde-texto: #14532D;
    --lc3-vermelho-texto: #7F1D1D;
    --lc3-indigo-texto: #28348A;

    /* CRAM (rosa) e problema/pendência (laranja) não têm tom no var.css. */
    --lc3-rosa: #E11D48;
    --lc3-rosa-fundo: #FFE4E6;
    --lc3-rosa-texto: #881337;
    --lc3-laranja: #EA580C;
    --lc3-laranja-fundo: #FFEDD5;
    --lc3-laranja-texto: #9A3412;
    --lc3-laranja-texto-escuro: #7C2D12;

    /* tempo na fila: 24 a 48 h e 48 h ou mais */
    --lc3-espera-atencao: #B45309;
    --lc3-espera-critico: #B91C1C;
}

/* O painel não tem box-sizing global: largura fixa soma o padding. Reset só aqui. */
.lc3, .lc3 *, .lc3 *::before, .lc3 *::after,
.lc3-dialog, .lc3-dialog *, .lc3-dialog *::before, .lc3-dialog *::after {
    box-sizing: border-box;
}

/* O md-icon tem margin:auto — num flex isso vira espaçador e desalinha o botão. */
.lc3 md-icon,
.lc3-dialog md-icon {
    margin: 0;
}

.lc3-num {
    font-variant-numeric: tabular-nums;
}

/* rastreio e termo de busca longos quebram em vez de empurrar a linha */
.lc3-quebra {
    overflow-wrap: anywhere;
}

/* ---------- cores por etapa e status ---------- */
/* Cada tom define três vars que o chip, a bolinha, o bloco de etapa e o topo
   do card leem: fundo, texto e cor forte. */

.lc3-tom--pronto      { --tom-fundo: var(--warning-color-transparent);   --tom-texto: var(--lc3-ambar-texto);           --tom-forte: var(--warning-color); }
.lc3-tom--semEntrada  { --tom-fundo: var(--grey-2);                      --tom-texto: var(--black-2);                   --tom-forte: var(--black-5); }
.lc3-tom--problema    { --tom-fundo: var(--lc3-laranja-fundo);           --tom-texto: var(--lc3-laranja-texto);         --tom-forte: var(--lc3-laranja); }
.lc3-tom--comprovante { --tom-fundo: var(--secondary-color-transparent); --tom-texto: var(--lc3-indigo-texto);          --tom-forte: var(--secondary-color); }
.lc3-tom--aprovado    { --tom-fundo: var(--success-color-transparent);   --tom-texto: var(--lc3-verde-texto);           --tom-forte: var(--success-color); }
.lc3-tom--reprovado   { --tom-fundo: var(--danger-color-transparent);    --tom-texto: var(--lc3-vermelho-texto);        --tom-forte: var(--danger-color); }
.lc3-tom--cram        { --tom-fundo: var(--lc3-rosa-fundo);              --tom-texto: var(--lc3-rosa-texto);            --tom-forte: var(--lc3-rosa); }
.lc3-tom--pendencia   { --tom-fundo: var(--lc3-laranja-fundo);           --tom-texto: var(--lc3-laranja-texto-escuro);  --tom-forte: var(--lc3-laranja); }
.lc3-tom--finalizado  { --tom-fundo: var(--grey-3);                      --tom-texto: var(--black-1);                   --tom-forte: var(--black-3); }
.lc3-tom--full        { --tom-fundo: var(--grey-2);                      --tom-texto: var(--black-2);                   --tom-forte: var(--black); }
.lc3-tom--busca       { --tom-fundo: var(--secondary-color-transparent); --tom-texto: var(--lc3-indigo-texto);          --tom-forte: var(--secondary-color); }

/* 8px: menor que qualquer ícone ou chip do painel */
.lc3-bolinha {
    display: inline-block;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tom-forte, var(--black-5));
}

.lc3-bolinha--grande {
    width: 12px;
    height: 12px;
}

/* chip de status: o ck-chip com as cores do tom */
.lc3-chip.ck-chip {
    --chip-color: var(--tom-texto);
    --chip-bg: var(--tom-fundo);
}

.lc3-chip.ck-chip.lc3-chip--contorno {
    border-color: var(--tom-forte);
}

.lc3-espera--normal  { color: var(--grey-6); }
.lc3-espera--atencao { color: var(--lc3-espera-atencao); }
.lc3-espera--critico { color: var(--lc3-espera-critico); }

/* ---------- página ---------- */

.lc3 {
    display: block;
    min-height: 100vh;
    padding-bottom: 64px;
    background: var(--lc3-fundo);
}

.lc3-rotulo {
    display: block;
    margin-bottom: 6px;
    letter-spacing: .08em;
}

.lc3-eyebrow {
    display: block;
    letter-spacing: .12em;
}

/* Cabeçalho fixo. 64px à direita: o botão do menu do painel é fixo no canto
   superior direito da janela e ficaria por cima do "atualizar". */
.lc3-topo {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--white);
    border-bottom: 1px solid var(--lc3-borda);
}

.lc3-topo__linha {
    padding: 14px 64px 4px 20px;
}

.lc3-circulo.md-button.md-icon-button {
    margin: 0;
    border: 1px solid var(--lc3-borda);
    background: var(--white);
}

@keyframes lc3-girar {
    to { transform: rotate(360deg); }
}

.lc3-girando {
    animation: lc3-girar .9s linear infinite;
}

.lc3-card {
    background: var(--white);
    border: 1px solid var(--lc3-borda);
    border-radius: 16px;
}

.lc3-tecla {
    flex: none;
    min-width: 26px;
    height: 24px;
    padding: 0 7px;
    border: 1px solid var(--lc3-borda);
    border-radius: 6px;
    background: var(--white);
    color: var(--black-4);
    font-family: inherit;
    text-align: center;
}

/* foto 3:4 de 96px */
.lc3-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 128px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--grey-2);
    color: var(--black-5);
}

.lc3-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lc3-copiar.md-button.md-icon-button {
    flex: none;
    margin: 0;
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 5px;
    color: var(--black-4);
}

.lc3-copiar md-icon {
    width: 16px;
    height: 16px;
    min-height: 16px;
    font-size: 16px;
    line-height: 16px;
}

.lc3-acao.md-button {
    margin: 0;
    min-width: 128px;
    height: 44px;
    min-height: 44px;
    line-height: 44px;
    padding: 0 22px;
    border-radius: 10px;
    text-transform: none;
}

.lc3-acao.md-button.lc3-acao--secundaria {
    border: 1px solid var(--lc3-borda);
    background: var(--white);
    color: var(--black-1);
}

/* =========================================================
   DIALOG DE CONFIRMAÇÃO DE ENTRADA (fila e tela de entrada)
   ========================================================= */

.lc3-dialog {
    width: 780px;
    max-width: 96vw;
    border-radius: 20px;
}

.lc3-dialog md-dialog-content {
    padding: 28px;
}

/* foto grande | dados */
.lc3-dialog__corpo {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 28px;
}

.lc3-dialog__foto {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 340px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--grey-2);
    color: var(--black-5);
}

.lc3-dialog__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lc3-dialog__foto md-icon {
    width: 56px;
    height: 56px;
    min-height: 56px;
    font-size: 56px;
}

.lc3-dialog__nome {
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

/* quadro tamanho | rastreio */
.lc3-dialog__quadro {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    border: 1px solid var(--lc3-borda);
    border-radius: 12px;
    background: var(--lc3-fundo);
}

.lc3-dialog__quadro > div {
    padding: 12px 22px 14px;
}

.lc3-dialog__quadro > div + div {
    border-left: 1px solid var(--lc3-borda);
}

/* rótulo | valor */
.lc3-dialog__dados {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    row-gap: 10px;
    margin: 0;
}

.lc3-dialog__dados dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.lc3-dialog__aviso {
    padding: 12px 16px;
    border: 1px solid var(--tom-forte);
    border-radius: 12px;
    background: var(--tom-fundo);
    color: var(--tom-texto);
}

.lc3-dialog__aviso md-icon {
    flex: none;
    color: var(--tom-forte);
}

.lc3-dialog__aviso--atencao { --tom-fundo: var(--warning-color-transparent); --tom-texto: var(--lc3-ambar-texto);     --tom-forte: var(--warning-color); }
.lc3-dialog__aviso--perigo  { --tom-fundo: var(--danger-color-transparent);  --tom-texto: var(--lc3-vermelho-texto); --tom-forte: var(--danger-color); }

.lc3-dialog__fechar.md-button.md-icon-button {
    flex: none;
    margin: -8px -8px 0 0;
}

.lc3-dialog__itens {
    max-height: 168px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--lc3-borda);
    border-radius: 12px;
}

.lc3-dialog__itens li {
    padding: 8px 12px;
    border-bottom: 1px solid var(--lc3-borda);
}

.lc3-dialog__itens li:last-child {
    border-bottom: none;
}

.lc3-dialog__miniatura {
    flex: none;
    width: 30px;
    height: 40px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--grey-2);
}

.lc3-dialog__miniatura img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lc3-dialog__erro {
    color: var(--danger-color);
}

/* o md-dialog é flex-column e dá order 2 às ações; o rodapé fica com fundo de faixa */
.lc3-dialog__rodape {
    order: 2;
    flex: none;
    padding: 18px 28px;
    border-top: 1px solid var(--lc3-borda);
    background: var(--lc3-fundo);
}

.lc3-dialog .lc3-dialog__rodape .md-button {
    margin: 0;
    height: 52px;
    min-height: 52px;
    line-height: 52px;
    padding: 0 18px 0 24px;
    border-radius: 12px;
    text-transform: none;
}

.lc3-dialog .lc3-dialog__rodape .md-button.lc3-acao--secundaria {
    border: 1px solid var(--grey-4);
    background: var(--white);
    color: var(--black-1);
}

/* Armazenar no índigo do painel (--secondary-color), não no indigo-500 do tema */
md-dialog.lc3-dialog .lc3-dialog__rodape .md-button.lc3-armazenar:not([disabled]) {
    background-color: var(--secondary-color);
    color: var(--white);
}

/* extravio: vermelho da tela, não o deep-orange do md-warn do tema */
md-dialog.lc3-dialog .lc3-dialog__rodape .md-button.lc3-perigo:not([disabled]) {
    background-color: var(--danger-color);
    color: var(--white);
}

/* dica de tecla dentro do botão */
.lc3-dialog__rodape .lc3-tecla {
    line-height: 22px;
}

.lc3-armazenar .lc3-tecla,
.lc3-perigo .lc3-tecla {
    border-color: var(--espelho-border);
    background: transparent;
    color: var(--white);
}

@media (max-width: 599px) {
    .lc3-dialog md-dialog-content {
        padding: 18px;
    }

    .lc3-dialog__corpo {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .lc3-dialog__foto {
        height: 200px;
    }

    /* tamanho em cima, rastreio embaixo: lado a lado o rastreio quebrava no meio */
    .lc3-dialog__quadro {
        grid-template-columns: minmax(0, 1fr);
    }

    .lc3-dialog__quadro > div + div {
        border-left: none;
        border-top: 1px solid var(--lc3-borda);
    }

    .lc3-dialog__dados {
        grid-template-columns: 110px minmax(0, 1fr);
    }

    .lc3-dialog__rodape {
        padding: 14px 18px;
    }

    .lc3-dialog .lc3-dialog__rodape .md-button {
        flex: 1;
    }

    .lc3-dialog__rodape .lc3-tecla {
        display: none;
    }
}

/* ---------- configurações da entrada ---------- */

.lc3-dialog.lc3-config {
    width: 560px;
}

.lc3-config__topo {
    order: 0;
    flex: none;
    padding: 24px 28px 18px;
    border-bottom: 1px solid var(--lc3-borda);
}

.lc3-config__linha {
    padding: 18px 28px;
    border-bottom: 1px solid var(--lc3-borda);
}

.lc3-config__linha:last-child {
    border-bottom: none;
}

/* chave em pílula, como no resto da tela; a do Material 1.1.0 é barra fina + bolinha */
.lc3-dialog md-switch.lc3-config__switch {
    flex: none;
    height: 30px;
    margin: 0;
}

.lc3-dialog md-switch.lc3-config__switch .md-container {
    width: 52px;
    height: 30px;
    margin: 0;
}

.lc3-dialog md-switch.lc3-config__switch .md-bar {
    top: 0;
    left: 0;
    width: 52px;
    height: 30px;
    border-radius: 15px;
    background-color: var(--grey-4);
}

.lc3-dialog md-switch.lc3-config__switch .md-thumb-container {
    top: 3px;
    left: 3px;
    width: 24px;
}

.lc3-dialog md-switch.lc3-config__switch .md-thumb {
    width: 24px;
    height: 24px;
    background-color: var(--white);
    box-shadow: var(--box-shadow);
}

.lc3-dialog md-switch.lc3-config__switch.md-checked .md-bar {
    background-color: var(--secondary-color);
}

.lc3-dialog md-switch.lc3-config__switch.md-checked .md-thumb {
    background-color: var(--white);
}