/* ==========================================================================
   BENTO DO PAINEL DO CLIENTE
   Compartilhado por /Views/Home/Index.cshtml (desktop) e IndexMobile.cshtml.
   Fonte unica do design aprovado no mockup — mexer aqui vale pros dois.
   Cores saem de token porque o tema (claro/escuro) e' escolha do usuario,
   nao do SO: nao da' pra usar prefers-color-scheme.
   ========================================================================== */

/* ==================================================================
   BENTO do painel do cliente — layout do mockup aprovado.
   Assinaturas visuais do print: rotulo de secao minusculo em
   maiusculas MUITO espacadas, numeros tabulares, painel aninhado
   dentro do card, trilha de 5 etapas, caixinhas de data, botoes
   delineados e barra de aging segmentada.
   Cores vem de token (o tema e' escolhido pelo usuario, nao pelo SO,
   entao nao da' pra usar prefers-color-scheme). Botao solido usa cor
   de marca fixa + texto branco: se banca sozinho nos dois temas.
   ================================================================== */
/* O site nao aplica box-sizing:border-box global. Sem isto, um botao com
   width:100% + padding horizontal estoura o card (aconteceu com o "Montar
   nova cotacao" em 375px). Escopo restrito ao bento pra nao mexer no resto. */
.hlb-grid,
.hlb-grid *,
.hlb-grid *::before,
.hlb-grid *::after { box-sizing: border-box; }

.hlb-grid {
    --hlb-teal: #00897B;
    --hlb-teal-esc: #00695C;
    /* ouro de TEXTO: corBadgeWarnText escurece no tema claro (#946B2D) e
       clareia no escuro (#FFD691). O corDDc (#BB985D) fica em 2.6:1 sobre
       o creme — ilegivel num rotulo de 8.5px. */
    --hlb-ouro: var(--corBadgeWarnText);
    --hlb-linha: var(--corBordaMedia);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
    padding: 16px 22px 20px;
    align-items: stretch;
}

.hlb-card {
    grid-column: span 12;
    min-width: 0; /* sem isso o conteudo largo estoura a coluna do grid */
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    background: var(--corFundoCard);
    /* corBorda e nao corBordaLeve: no escuro corBordaLeve (#3A3A3A) fica
       a 7 pontos do fundo (#2A2A2A) e a borda some. */
    border: 1px solid var(--corBorda);
    overflow: hidden;
}

.hlb-card--ped { grid-column: span 7; }
.hlb-card--fin { grid-column: span 5; }
.hlb-card--ter { grid-column: span 4; }

/* --- cabecalho: rotulo minusculo, super espacado, discreto --- */
.hlb-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 14px 18px 10px;
}

.hlb-head h3 {
    margin: 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--corTextoSuave);
    white-space: nowrap;
}

.hlb-head-sub {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--corTextoMedio);
    white-space: nowrap;
}
.hlb-head-sub::before { content: "·"; margin-right: 8px; opacity: .6; }

.hlb-head-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--hlb-ouro);
}
.hlb-head-link > i.material-icons { font-size: 13px; padding: 0; }
.hlb-head-link:hover { color: var(--hlb-ouro); text-decoration: underline; }

.hlb-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 4px 16px 16px;
}

/* numeros do painel: tabulares, levemente espacados (igual ao print) */
.hlb-num { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

/* ==================== CARD DO PEDIDO ==================== */

/* painel aninhado — a "caixa dentro da caixa" do mockup */
.hlp {
    border-radius: 12px;
    border: 1px solid var(--hlb-linha);
    background: var(--corFundoCardAlt);
    padding: 14px 14px 12px;
}
.hlp + .hlp { margin-top: 12px; }

.hlp-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hlp-nf { flex: 0 0 auto; text-align: left; }
.hlp-nf span {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--corTextoSuave);
}
.hlp-nf strong {
    display: block;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--corTextoPrimario);
    font-variant-numeric: tabular-nums;
}

.hlp-tit { flex: 1 1 auto; min-width: 0; }
.hlp-tit p { margin: 0; }
.hlp-tra {
    font-size: 15px;
    font-weight: 800;
    color: var(--corTextoPrimario);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hlp-sub {
    margin-top: 2px !important;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--corTextoSecundario);
    font-variant-numeric: tabular-nums;
}

/* botao solido de marca — texto branco se banca nos dois temas */
.hlb-btn-solido {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: none;
    border-radius: 9px;
    background: var(--hlb-teal);
    color: #FFF;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.hlb-btn-solido > i.material-icons { font-size: 16px; padding: 0; color: #FFF; }
.hlb-btn-solido,
.hlb-btn-solido:hover { text-decoration: none; }
.hlb-btn-solido:hover { background: var(--hlb-teal-esc); color: #FFF; }
.hlb-btn-solido[disabled] { opacity: .6; cursor: default; }

/* --- trilha de 5 etapas --- */
.hlp-steps {
    display: flex;
    align-items: flex-start;
    margin: 16px 2px 0;
}
.hlp-step {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 0; /* o label nao pode empurrar a trilha; ele transborda centralizado */
}
.hlp-step-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--hlb-linha);
    flex: 0 0 auto;
}
.hlp-step.done .hlp-step-dot { background: var(--hlb-teal); }
.hlp-step.now .hlp-step-dot {
    width: 15px;
    height: 15px;
    margin: -3px 0;
    background: transparent;
    border: 3px solid var(--hlb-ouro);
}
.hlp-step-lbl {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--corTextoSuave);
    white-space: nowrap;
}
.hlp-step.done .hlp-step-lbl { color: var(--corTextoMedio); }
.hlp-step.now .hlp-step-lbl { color: var(--hlb-ouro); }
/* O passo tem width:0 e o rotulo fica centrado nesse ponto — nas pontas
   metade do texto escapava do card ("PEDIDO" a' esquerda, "ENTREGA" a'
   direita). Desloca meia largura pra dentro: o primeiro alinha a esquerda
   pelo ponto, o ultimo alinha a direita. O ponto nao sai do lugar. */
.hlp-step:first-child .hlp-step-lbl { transform: translateX(50%); }
.hlp-step:last-child  .hlp-step-lbl { transform: translateX(-50%); }

.hlp-step-linha {
    flex: 1 1 auto;
    height: 2px;
    margin-top: 3.5px;
    background: var(--hlb-linha);
    border-radius: 2px;
    min-width: 8px;
}
.hlp-step-linha.done { background: var(--hlb-teal); }

/* --- nota de situacao --- */
.hlp-nota {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--corBadgeWarnBg);
    border: 1px solid var(--corBordaMedia);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--corBadgeWarnText);
}
.hlp-nota::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-top: 6px;
    border-radius: 50%;
    background: currentColor;
}
.hlp-nota.ok { background: var(--corBadgeOkBg); color: var(--corBadgeOkText); }

/* --- caixinhas de data --- */
.hlp-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 12px;
}
.hlp-stat {
    border-radius: 9px;
    border: 1px solid var(--hlb-linha);
    padding: 8px 10px;
    min-width: 0;
}
.hlp-stat span {
    display: block;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--corTextoSuave);
}
.hlp-stat strong {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 700;
    color: var(--corTextoPrimario);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- botoes delineados --- */
.hlp-acoes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
}
.hlb-btn-linha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 8px;
    border: 1px solid var(--hlb-linha);
    border-radius: 9px;
    background: transparent;
    color: var(--corTextoPrimario);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hlb-btn-linha > i.material-icons { font-size: 15px; padding: 0; }
.hlb-btn-linha,
.hlb-btn-linha:hover { text-decoration: none; }
.hlb-btn-linha:hover { background: var(--corFundoHover); color: var(--corTextoPrimario); }
.hlb-btn-linha[disabled] { opacity: .55; cursor: default; }

/* --- painel "nenhum outro pedido" --- */
.hlp-vazio { display: flex; align-items: center; gap: 14px; }
.hlp-vazio-txt { flex: 1 1 auto; min-width: 0; }
.hlp-vazio-txt p { margin: 0; }
.hlp-vazio-tit { font-size: 14px; font-weight: 800; color: var(--corTextoPrimario); }
.hlp-vazio-sub { margin-top: 2px !important; font-size: 11.5px; font-weight: 600; color: var(--corTextoSecundario); }

/* lista compacta dos demais pedidos em aberto */
.hlp-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 2px;
    border-top: 1px solid var(--corBordaLeve);
}
.hlp-mini:first-child { border-top: none; }
/* linha com pedido de verdade abre o modal de itens; cotacao nao tem o que abrir */
.hlp-mini.hlb-ver-itens { cursor: pointer; }
.hlp-mini.hlb-ver-itens:hover .hlp-mini-id { text-decoration: underline; }
.hlp-mini-id { font-size: 12px; font-weight: 800; color: var(--corTextoPrimario); white-space: nowrap; }
.hlp-mini-st { flex: 1 1 auto; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--corTextoSuave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hlp-mini-val { font-size: 12.5px; font-weight: 800; color: var(--corTextoPrimario); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==================== CARD FINANCEIRO ==================== */

/* alerta de vencidos */
.hlf-alerta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    border-radius: 12px;
    background: var(--corBadgeCritBg);
    border: 1px solid var(--corBadgeCritText);
}
.hlf-alerta-txt { flex: 1 1 auto; min-width: 0; }
.hlf-alerta-lbl {
    margin: 0;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--corBadgeCritText);
}
.hlf-alerta-val {
    margin: 3px 0 0 !important;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.2px;
    color: var(--corBadgeCritText);
    font-variant-numeric: tabular-nums;
}
.hlf-alerta-bts { flex: 0 0 auto; display: flex; gap: 7px; }

.hlb-btn-crit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border-radius: 9px;
    border: 1px solid var(--corBadgeCritText);
    background: var(--corBadgeCritText);
    color: var(--corFundoCard);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.hlb-btn-crit > i.material-icons { font-size: 15px; padding: 0; }
.hlb-btn-crit,
.hlb-btn-crit:hover { text-decoration: none; }
.hlb-btn-crit.vazado { background: transparent; color: var(--corBadgeCritText); }
.hlb-btn-crit:hover { opacity: .85; color: var(--corFundoCard); }
.hlb-btn-crit.vazado:hover { color: var(--corBadgeCritText); }
.hlb-btn-crit[disabled] { opacity: .55; cursor: default; }

/* linha "a vencer nos proximos 30 dias" */
.hlf-prox {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 16px;
}
.hlf-prox-lbl { flex: 1 1 auto; font-size: 12.5px; font-weight: 600; color: var(--corTextoMedio); }
.hlf-prox-val {
    font-size: 20px;
    font-weight: 800;
    color: var(--corTextoPrimario);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* barra de aging segmentada */
.hlf-barra {
    display: flex;
    gap: 3px;
    margin-top: 10px;
    height: 7px;
}
.hlf-barra span { display: block; border-radius: 3px; min-width: 0; }
.hlf-barra .seg-venc { background: var(--corBadgeCritText); }
.hlf-barra .seg-7    { background: var(--hlb-ouro); }
.hlf-barra .seg-15   { background: var(--hlb-teal); }
.hlf-barra .seg-30   { background: var(--hlb-linha); }
.hlf-barra .seg-nada { background: var(--corBordaLeve); flex: 1 1 auto; }

.hlf-leg { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; }
.hlf-leg-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--corTextoSuave);
}
.hlf-leg-item::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.hlf-leg-item.l-venc::before { background: var(--corBadgeCritText); }
.hlf-leg-item.l-7::before    { background: var(--hlb-ouro); }
.hlf-leg-item.l-15::before   { background: var(--hlb-teal); }
.hlf-leg-item.l-30::before   { background: var(--hlb-linha); }

/* linhas de titulo, com a barrinha colorida a' esquerda */
.hlf-lista { margin-top: 14px; }
.hlf-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 0 9px 11px;
    border-left: 3px solid var(--hlb-ouro);
    margin-bottom: 3px;
}
.hlf-row.is-venc { border-left-color: var(--corBadgeCritText); }
.hlf-row-info { flex: 1 1 auto; min-width: 0; }
.hlf-row-nf {
    margin: 0;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--corTextoPrimario);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hlf-row-sub {
    margin: 2px 0 0 !important;
    font-size: 11px;
    font-weight: 600;
    color: var(--corTextoSecundario);
}
.hlf-row.is-venc .hlf-row-sub { color: var(--corBadgeCritText); }
.hlf-row-val {
    font-size: 13px;
    font-weight: 800;
    color: var(--corTextoPrimario);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hlf-vazio { padding: 22px 4px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--corTextoSuave); }

/* ==================== LINHA DE BAIXO ==================== */

/* --- ultimos pedidos --- */
.hlu-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 0;
    border-top: 1px solid var(--corBordaLeve);
}
.hlu-row:first-child { border-top: none; }
.hlu-nf { flex: 0 0 auto; text-align: center; min-width: 34px; }
.hlu-nf span {
    display: block;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--corTextoSuave);
}
.hlu-nf strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--corTextoPrimario);
    font-variant-numeric: tabular-nums;
}
.hlu-info { flex: 1 1 auto; min-width: 0; }
.hlu-info p { margin: 0; }
.hlu-val { font-size: 14px; font-weight: 800; color: var(--corTextoPrimario); font-variant-numeric: tabular-nums; }
.hlu-sub { margin-top: 1px !important; font-size: 11px; font-weight: 600; color: var(--corTextoSecundario); }

.hlu-rodape {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--corBordaLeve);
}
.hlu-rodape span { flex: 1 1 auto; font-size: 11.5px; font-weight: 600; color: var(--corTextoSecundario); }
.hlu-rodape strong { font-size: 14px; font-weight: 800; color: var(--corTextoPrimario); font-variant-numeric: tabular-nums; }

/* --- cotacoes --- */
.hlc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--corBordaLeve);
    cursor: pointer;
}
.hlc-row:first-child { border-top: none; }
.hlc-row:hover .hlc-tit { text-decoration: underline; }
.hlc-info { flex: 1 1 auto; min-width: 0; }
.hlc-info p { margin: 0; }
.hlc-tit { font-size: 13.5px; font-weight: 800; color: var(--corTextoPrimario); }
.hlc-sub { margin-top: 2px !important; font-size: 11px; font-weight: 600; color: var(--corTextoSecundario); }

.hlc-badge {
    flex: 0 0 auto;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 5px;
    white-space: nowrap;
    background: var(--corFundoCardAlt);
    color: var(--corTextoSuave);
}
.hlc-badge.b-voce { background: var(--corBadgeWarnBg); color: var(--corBadgeWarnText); }
.hlc-badge.b-analise { background: var(--corBadgeOkBg); color: var(--corBadgeOkText); }

.hlc-cta { margin-top: 14px; }
.hlc-cta .hlb-btn-solido { width: 100%; justify-content: center; }

/* --- seu carrinho: unico card com fundo proprio (igual ao mockup) --- */
.hlb-card--car {
    grid-column: span 4;
    background: linear-gradient(160deg, #0B5C50 0%, #063D35 100%);
    border-color: #0B5C50;
    /* o card se banca sozinho: cores fixas, nao depende do tema */
    color: #EAF5F1;
}
.hlb-card--car .hlb-head h3,
.hlb-card--car .hlb-head-sub { color: #8FBDB2; }
.hlb-card--car .hlb-head-sub::before { content: none; }
.hlb-card--car .hlb-head-sub { margin-left: auto; }

.hlk-topo { display: flex; align-items: center; gap: 14px; padding: 4px 2px 2px; }
.hlk-qtd {
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    color: #FFF;
    font-variant-numeric: tabular-nums;
}
.hlk-topo-txt p { margin: 0; }
.hlk-lbl { font-size: 13px; font-weight: 700; color: #EAF5F1; }
.hlk-val {
    margin-top: 1px !important;
    font-size: 20px;
    font-weight: 800;
    color: #7FE3C0;
    font-variant-numeric: tabular-nums;
}

.hlk-painel {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.10);
}
.hlk-painel-top { display: flex; align-items: baseline; gap: 10px; }
.hlk-painel-tit { flex: 1 1 auto; margin: 0; font-size: 12.5px; font-weight: 700; color: #FFF; }
.hlk-painel-tag { font-size: 12px; font-weight: 800; color: #F0C475; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hlk-painel-sub { margin: 4px 0 0 !important; font-size: 11px; font-weight: 500; line-height: 1.4; color: #A8CFC4; }

.hlk-barra {
    height: 6px;
    margin-top: 9px;
    border-radius: 3px;
    background: rgba(255,255,255,0.14);
    overflow: hidden;
}
.hlk-barra i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #4ECFA3, #A8E6A3);
}
.hlk-ok {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 8px 0 0 !important;
    font-size: 11.5px;
    font-weight: 700;
    color: #A8E6A3;
}
.hlk-ok > i.material-icons { font-size: 15px; padding: 0; color: #A8E6A3; }

.hlk-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.hlk-fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    border: none;
    border-radius: 9px;
    background: #F4EAD5;
    color: #0B3B34;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
.hlk-fechar > i.material-icons { font-size: 16px; padding: 0; color: #0B3B34; }
.hlk-fechar { text-decoration: none; }
.hlk-fechar:hover { background: #FFF; color: #0B3B34; text-decoration: none; }
.hlk-ver {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 9px;
    background: transparent;
    color: #EAF5F1;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.hlk-ver { text-decoration: none; }
.hlk-ver:hover { background: rgba(255,255,255,0.08); color: #FFF; text-decoration: none; }

.hlk-vazio { padding: 16px 2px 6px; }
.hlk-vazio p { margin: 0; }
.hlk-vazio-tit { font-size: 14px; font-weight: 800; color: #FFF; }
.hlk-vazio-sub { margin-top: 3px !important; font-size: 11.5px; font-weight: 500; color: #A8CFC4; }

@media (max-width: 1100px) {
    .hlb-card--ped,
    .hlb-card--fin { grid-column: span 12; }
    /* ultimos + cotacoes dividem a linha; o carrinho pega a linha inteira
       (sozinho em meia largura ele deixava um vao ao lado) */
    .hlb-card--ter { grid-column: span 6; }
    .hlb-card--car { grid-column: span 12; }
}

/* Em telas bem estreitas o cabecalho (rotulo + sub + link) nao cabe numa
   linha so' e o "Historico" era cortado. Deixa quebrar: o link desce
   alinhado a' direita em vez de sumir. */
@media (max-width: 560px) {
    /* Cinco rotulos nao cabem em 375px — "Pedido/Faturado" e "Transito/
       Entrega" se sobrepunham. Mostra so' o da etapa atual: os pontos ja'
       dao o progresso (verde = feito, anel dourado = agora) e a faixa
       logo abaixo diz a situacao por extenso. */
    .hlp-step:not(.now) .hlp-step-lbl { display: none; }
    .hlp-step.now .hlp-step-lbl { font-size: 9.5px; }

    .hlb-head { flex-wrap: wrap; row-gap: 3px; }
    .hlb-head h3 { letter-spacing: 0.1em; }
    .hlb-head-link { margin-left: auto; }
}

@media (max-width: 768px) {
    .hlb-grid { padding: 12px 14px 16px; gap: 12px; }
    .hlf-alerta { flex-wrap: wrap; }
    .hlf-alerta-bts { width: 100%; }
    .hlf-alerta-bts button { flex: 1 1 auto; justify-content: center; }
    .hlp-stats { grid-template-columns: repeat(2, 1fr); }
    .hlp-acoes { grid-template-columns: 1fr; }
    .hlp-top { flex-wrap: wrap; }
    .hlp-top .hlb-btn-solido { width: 100%; justify-content: center; }
    .hlb-card--ter,
    .hlb-card--car { grid-column: span 12; }
}

/* ==========================================================================
   MODAL DE ITENS DO PEDIDO
   O usuario pediu que "ver itens" resolvesse ali mesmo, sem jogar pra uma
   lista generica. A caixa e' montada por JS (nenhum markup duplicado nas
   duas views). Em telas estreitas vira folha de baixo pra cima.
   ========================================================================== */
.hlb-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0,0,0,0.55);
}
.hlb-modal.aberto { display: flex; }
.hlb-modal * { box-sizing: border-box; }

.hlb-modal-caixa {
    width: 100%;
    max-width: 620px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: var(--corFundoCard);
    border: 1px solid var(--corBorda);
    box-shadow: 0 24px 64px rgba(0,0,0,0.32);
    overflow: hidden;
}

.hlb-modal-topo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px 13px;
    border-bottom: 1px solid var(--corBordaLeve);
}
.hlb-modal-topo > div { flex: 1 1 auto; min-width: 0; }
.hlb-modal-lbl {
    margin: 0;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--corTextoSuave);
}
.hlb-modal-tit {
    margin: 2px 0 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--corTextoPrimario);
    letter-spacing: -0.2px;
}
.hlb-modal-sub {
    margin: 2px 0 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--corTextoSecundario);
}
.hlb-modal-x {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--corBordaMedia);
    border-radius: 9px;
    background: transparent;
    color: var(--corTextoPrimario);
    cursor: pointer;
}
.hlb-modal-x > i.material-icons { font-size: 19px; padding: 0; }
.hlb-modal-x:hover { background: var(--corFundoHover); }

.hlb-modal-corpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 18px 14px;
}

.hlb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--corBordaLeve);
}
.hlb-item:last-child { border-bottom: none; }
.hlb-item-foto {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 9px;
    border: 1px solid var(--corBordaLeve);
    background: var(--corFundoCardAlt);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hlb-item-foto img { width: 100%; height: 100%; object-fit: contain; }
.hlb-item-foto > i.material-icons { font-size: 20px; padding: 0; color: var(--corTextoSuave); }

.hlb-item-main { flex: 1 1 auto; min-width: 0; }
.hlb-item-main p { margin: 0; }
.hlb-item-nome {
    font-size: 13px;
    font-weight: 700;
    color: var(--corTextoPrimario);
    line-height: 1.3;
}
.hlb-item-meta {
    margin-top: 2px !important;
    font-size: 11px;
    font-weight: 600;
    color: var(--corTextoSecundario);
}

.hlb-item-dir { flex: 0 0 auto; text-align: right; }
.hlb-item-dir p { margin: 0; }
.hlb-item-qtd {
    font-size: 11px;
    font-weight: 600;
    color: var(--corTextoSecundario);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hlb-item-val {
    margin-top: 1px !important;
    font-size: 13px;
    font-weight: 800;
    color: var(--corTextoPrimario);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hlb-modal-rodape {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-top: 1px solid var(--corBordaLeve);
    background: var(--corFundoCardAlt);
}
.hlb-modal-total { flex: 1 1 auto; min-width: 0; }
.hlb-modal-total span {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--corTextoSuave);
}
.hlb-modal-total strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: var(--corTextoPrimario);
    font-variant-numeric: tabular-nums;
}
.hlb-modal-rodape .hlb-btn-linha,
.hlb-modal-rodape .hlb-btn-solido { flex: 0 0 auto; }

.hlb-modal-msg {
    padding: 30px 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--corTextoSecundario);
}

@media (max-width: 620px) {
    .hlb-modal { padding: 0; align-items: flex-end; }
    .hlb-modal-caixa {
        max-width: none;
        max-height: 92%;
        border-radius: 16px 16px 0 0;
        border-bottom: none;
    }
    .hlb-modal-rodape { flex-wrap: wrap; }
    .hlb-modal-rodape .hlb-btn-linha,
    .hlb-modal-rodape .hlb-btn-solido { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   PAINEL DE RASTREIO (SSW)
   O resultado saia com as classes .hl-dash-exp-ssw-* do painel antigo, que
   so' tinham CSS no <style> do desktop — no mobile vinha sem estilo, e no
   desktop dependia de regras marcadas pra remocao. Agora e' autossuficiente.
   ========================================================================== */
.hlb-ssw {
    margin: 10px 10px 0;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid var(--corBordaMedia);
    background: var(--corFundoCard);
}
.hlb-ssw-previsao {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--corBordaLeve);
    font-size: 12px;
    font-weight: 800;
    color: var(--corTextoPrimario);
}
.hlb-ssw-previsao > i.material-icons { font-size: 15px; padding: 0; color: var(--hlb-teal); }

.hlb-ssw-eventos {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 210px;
    overflow-y: auto;
}
.hlb-ssw-evento {
    padding: 7px 0 7px 13px;
    border-left: 2px solid var(--corBordaMedia);
}
/* o evento mais recente vem primeiro do SSW */
.hlb-ssw-evento:first-child { border-left-color: var(--hlb-teal); }
.hlb-ssw-evento-data {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--corTextoSecundario);
    font-variant-numeric: tabular-nums;
}
.hlb-ssw-evento-status {
    margin-top: 1px;
    font-size: 12px;
    font-weight: 800;
    color: var(--corTextoPrimario);
    line-height: 1.35;
}
.hlb-ssw-evento:first-child .hlb-ssw-evento-status { color: var(--corBadgeOkText); }
.hlb-ssw-evento-det {
    margin-top: 1px;
    font-size: 11px;
    font-weight: 500;
    color: var(--corTextoSecundario);
    line-height: 1.35;
}
.hlb-ssw-contato {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--corBordaLeve);
    font-size: 11px;
    font-weight: 600;
    color: var(--corTextoSecundario);
    overflow-wrap: anywhere;
}
.hlb-ssw-contato a { color: var(--hlb-ouro); }
.hlb-ssw-unavail {
    font-size: 12px;
    font-weight: 600;
    color: var(--corTextoSecundario);
    line-height: 1.4;
}

/* ==========================================================================
   SUGESTAO DE RECOMPRA no card do carrinho
   Substitui o bloco de pedido minimo: uma vez atingido (quase sempre, num
   B2B) ele so' ocupava espaco. Aqui o espaco trabalha — mostra o que o
   cliente costuma pedir e ainda nao esta' no carrinho.
   Cores fixas: o card tem fundo proprio e nao segue o tema.
   ========================================================================== */
.hlk-sug-tit {
    margin: 14px 0 7px !important;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #8FBDB2;
}
.hlk-sug {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 10px;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.10);
}
.hlk-sug + .hlk-sug { margin-top: 6px; }

.hlk-sug-foto {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hlk-sug-foto img { width: 100%; height: 100%; object-fit: contain; }

.hlk-sug-info { flex: 1 1 auto; min-width: 0; }
.hlk-sug-info p { margin: 0; }
.hlk-sug-nome {
    font-size: 12px;
    font-weight: 700;
    color: #FFF;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hlk-sug-meta {
    margin-top: 2px !important;
    font-size: 10.5px;
    font-weight: 600;
    color: #A8CFC4;
}

.hlk-sug-add {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 8px;
    background: transparent;
    color: #EAF5F1;
    cursor: pointer;
}
.hlk-sug-add > i.material-icons { font-size: 18px; padding: 0; color: inherit; }
.hlk-sug-add:hover { background: rgba(255,255,255,0.12); }
.hlk-sug-add[disabled] { opacity: .6; cursor: default; }
.hlk-sug-add.ok { border-color: #A8E6A3; color: #A8E6A3; }

/* --- avaliar no Google: faixa passiva. Nao pede e nao da nada — QR e
   link pra quem quiser. Mesmo QR serve impresso (aponta pra /avaliar). --- */
.hlb-card--gg {
    grid-column: span 12;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
}
.hlb-gg-qr {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    padding: 4px;
    border-radius: 8px;
    background: #FFF; /* QR precisa de fundo claro tambem no tema escuro */
}
.hlb-gg-txt { flex: 1; min-width: 0; }
.hlb-gg-txt h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--corTextoPrimario); }
.hlb-gg-txt p { margin: 3px 0 0; font-size: 12px; color: var(--corTextoSecundario); }
@media (max-width: 640px) {
    .hlb-gg-qr { display: none; } /* no celular o QR e' inutil: so' o botao */
    .hlb-card--gg { flex-wrap: wrap; }
    .hlb-card--gg .hlb-btn-solido { width: 100%; justify-content: center; }
}