/* =====================================================================
   AGGalvão · Controle de Estoque
   Identidade visual do site institucional: fundo claro, vermelho #b50808,
   tipografia Poppins, títulos em caixa alta.
   ===================================================================== */

:root {
    /* Marca */
    --vermelho:        #b50808;
    --vermelho-escuro: #8e0606;
    --vermelho-claro:  #fdeaea;
    --preto:           #121212;
    --texto:           #333333;
    --cinza:           #69727d;
    --verde:           #0cc254;
    --verde-claro:     #e6f9ee;
    --ambar:           #d98200;
    --ambar-claro:     #fff5e6;
    --azul:            #1f6feb;
    --azul-claro:      #eaf1fd;

    /* Superfícies */
    --fundo:        #f4f5f7;
    --superficie:   #ffffff;
    --superficie-2: #fafbfc;
    --borda:        #e3e6ea;
    --borda-forte:  #cfd4da;

    --raio:    8px;
    --raio-sm: 6px;
    --sombra:    0 1px 2px rgba(18, 18, 18, .06), 0 1px 3px rgba(18, 18, 18, .04);
    --sombra-md: 0 4px 12px rgba(18, 18, 18, .08);
    --sombra-lg: 0 12px 32px rgba(18, 18, 18, .14);

    --lateral: 244px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--texto);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--preto); line-height: 1.25; }
h1 { font-size: 1.5rem; text-transform: uppercase; letter-spacing: .02em; font-weight: 800; }
h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .03em; }
h3 { font-size: .95rem; }
p  { margin: 0 0 .75rem; }

a { color: var(--vermelho); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--vermelho);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ---------------------------------------------------------------------
   Estrutura
   --------------------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }

.lateral {
    width: var(--lateral);
    flex: 0 0 var(--lateral);
    background: var(--preto);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.lateral-marca {
    padding: 1.15rem 1.15rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    display: block;
    color: #fff;
}
.lateral-marca:hover { text-decoration: none; }

/* Versão branca da arte oficial, para o fundo escuro do menu. */
.marca-logo { display: block; width: 100%; max-width: 190px; height: auto; }
.marca-sub  {
    display: block; margin-top: .5rem;
    font-size: .64rem; color: rgba(255, 255, 255, .5);
    text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
}

.marca-selo {
    width: 38px; height: 38px;
    flex: 0 0 38px;
    border-radius: var(--raio-sm);
    background: var(--vermelho);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: .9rem;
    letter-spacing: .02em;
}
.marca-nome { font-weight: 800; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; color: #fff; }

.menu { padding: .85rem .7rem; flex: 1; }
.menu-grupo {
    font-size: .63rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .35);
    padding: .9rem .55rem .35rem;
    font-weight: 600;
}
.menu a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .6rem;
    border-radius: var(--raio-sm);
    color: rgba(255, 255, 255, .74);
    font-size: .84rem;
    font-weight: 500;
    margin-bottom: 1px;
    transition: background .12s, color .12s;
}
.menu a:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.menu a.ativo { background: var(--vermelho); color: #fff; font-weight: 600; }
.menu a.ativo .icone { opacity: 1; }
.icone { width: 17px; height: 17px; flex: 0 0 17px; opacity: .75; stroke-width: 1.9; }

.lateral-rodape {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: .85rem 1rem;
}
.usuario-linha { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; }
.usuario-avatar {
    width: 30px; height: 30px; flex: 0 0 30px;
    border-radius: 50%;
    background: var(--vermelho);
    color: #fff;
    display: grid; place-items: center;
    font-size: .72rem; font-weight: 700;
}
.usuario-nome  { font-size: .78rem; font-weight: 600; color: #fff; line-height: 1.2; }
.usuario-papel { font-size: .65rem; color: rgba(255, 255, 255, .5); text-transform: uppercase; letter-spacing: .05em; }

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topo {
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    padding: .9rem 1.6rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 20;
}
.topo-titulo { flex: 1; min-width: 0; }
.topo-titulo .subtitulo { font-size: .78rem; color: var(--cinza); margin-top: .1rem; }

.busca-topo { position: relative; width: min(340px, 40vw); }
.busca-topo input {
    width: 100%;
    padding: .5rem .75rem .5rem 2.1rem;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio);
    font: inherit;
    font-size: .84rem;
    background: var(--superficie-2);
}
.busca-topo input:focus { background: #fff; border-color: var(--vermelho); outline: none; }
.busca-topo .icone-busca {
    position: absolute; left: .65rem; top: 50%; transform: translateY(-50%);
    color: var(--cinza); width: 16px; height: 16px;
}

.pagina { padding: 1.5rem 1.6rem 3rem; flex: 1; }
.pagina-cabecalho {
    display: flex; align-items: flex-start; gap: 1rem;
    flex-wrap: wrap; margin-bottom: 1.25rem;
}
.pagina-cabecalho > div:first-child { flex: 1; min-width: 220px; }
.pagina-acoes { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   Botões
   --------------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .55rem 1.05rem;
    border: 1px solid transparent;
    border-radius: var(--raio);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s, transform .06s;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn-primario  { background: var(--vermelho); color: #fff; }
.btn-primario:hover  { background: var(--vermelho-escuro); color: #fff; }
.btn-sucesso   { background: var(--verde); color: #fff; }
.btn-sucesso:hover   { background: #0aa847; color: #fff; }
.btn-neutro    { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); }
.btn-neutro:hover    { background: var(--superficie-2); border-color: var(--cinza); color: var(--preto); }
.btn-perigo    { background: #fff; color: var(--vermelho); border-color: #f0b8b8; }
.btn-perigo:hover    { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }
.btn-sm { padding: .34rem .7rem; font-size: .7rem; }
.btn-bloco { width: 100%; }
.btn .icone { width: 15px; height: 15px; opacity: 1; }

/* ---------------------------------------------------------------------
   Cartões
   --------------------------------------------------------------------- */
.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}
.cartao-cabecalho {
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--borda);
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.cartao-cabecalho h2, .cartao-cabecalho h3 { flex: 1; min-width: 0; }
.cartao-corpo   { padding: 1.1rem; }
.cartao-rodape  {
    padding: .7rem 1.1rem; border-top: 1px solid var(--borda);
    background: var(--superficie-2);
    border-radius: 0 0 var(--raio) var(--raio);
    font-size: .78rem;
}

.grade { display: grid; gap: 1rem; }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grade-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grade-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---------------------------------------------------------------------
   Indicadores do painel
   --------------------------------------------------------------------- */
.indicador {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-left: 3px solid var(--cinza);
    border-radius: var(--raio);
    padding: .95rem 1.1rem;
    box-shadow: var(--sombra);
}
.indicador.destaque  { border-left-color: var(--vermelho); }
.indicador.positivo  { border-left-color: var(--verde); }
.indicador.atencao   { border-left-color: var(--ambar); }
.indicador.info      { border-left-color: var(--azul); }

.indicador-rotulo {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--cinza); font-weight: 600; margin-bottom: .3rem;
    display: flex; align-items: center; gap: .35rem;
}
.indicador-valor {
    font-size: 1.85rem; font-weight: 800; color: var(--preto);
    line-height: 1.05; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.indicador-valor .unidade { font-size: .95rem; font-weight: 600; color: var(--cinza); margin-left: .15rem; }
.indicador-nota { font-size: .74rem; color: var(--cinza); margin-top: .35rem; }
.indicador-nota strong { color: var(--texto); }

/* Barra de ocupação */
.barra {
    height: 8px; border-radius: 99px; background: var(--borda);
    overflow: hidden; margin-top: .55rem;
}
.barra > span { display: block; height: 100%; border-radius: 99px; background: var(--verde); transition: width .35s ease; }
.barra.nivel-medio > span { background: var(--ambar); }
.barra.nivel-alto  > span { background: var(--vermelho); }

/* ---------------------------------------------------------------------
   Gráficos (SVG/CSS puro — sem biblioteca externa)
   --------------------------------------------------------------------- */
.zona-lista { display: flex; flex-direction: column; gap: .85rem; }
.zona-item .zona-topo {
    display: flex; align-items: baseline; gap: .5rem; margin-bottom: .3rem;
    font-size: .82rem;
}
.zona-nome { font-weight: 600; color: var(--preto); }
.zona-codigo {
    font-size: .66rem; font-weight: 700; letter-spacing: .05em;
    padding: .05rem .35rem; border-radius: 4px;
    background: var(--superficie-2); border: 1px solid var(--borda);
    color: var(--cinza);
}
.zona-numeros { margin-left: auto; color: var(--cinza); font-size: .78rem; font-variant-numeric: tabular-nums; }
.zona-numeros strong { color: var(--preto); font-weight: 700; }
.zona-trilho { height: 22px; border-radius: var(--raio-sm); background: var(--superficie-2); border: 1px solid var(--borda); overflow: hidden; position: relative; }
.zona-preenchimento {
    height: 100%; border-radius: 0;
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: .4rem; color: #fff; font-size: .68rem; font-weight: 700;
    transition: width .4s ease; min-width: 2px;
}

/* ---------------------------------------------------------------------
   Botão de alerta de prazo — a tabela só abre quando ele é clicado
   --------------------------------------------------------------------- */
.alerta-botao {
    width: 100%;
    display: flex; align-items: center; gap: .9rem;
    padding: 1rem 1.2rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--borda);
    border-left: 4px solid var(--cinza);
    border-radius: var(--raio);
    background: var(--superficie);
    box-shadow: var(--sombra);
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: box-shadow .14s, transform .06s, border-color .14s;
}
.alerta-botao:hover:not(:disabled) { box-shadow: var(--sombra-md); transform: translateY(-1px); }
.alerta-botao:active:not(:disabled) { transform: translateY(0); }
.alerta-botao:disabled { cursor: default; }

.alerta-botao.critico   { border-left-color: var(--vermelho); background: var(--vermelho-claro); }
.alerta-botao.atencao   { border-left-color: var(--ambar);    background: var(--ambar-claro); }
.alerta-botao.tranquilo { border-left-color: var(--verde); }

.alerta-botao-icone { flex: 0 0 auto; display: grid; place-items: center; }
.alerta-botao-icone .icone { width: 26px; height: 26px; }
.alerta-botao.critico   .alerta-botao-icone { color: var(--vermelho); }
.alerta-botao.atencao   .alerta-botao-icone { color: var(--ambar); }
.alerta-botao.tranquilo .alerta-botao-icone { color: var(--verde); }

.alerta-botao-texto { flex: 1; min-width: 0; }
.alerta-botao-titulo {
    display: block; font-size: .95rem; font-weight: 700; color: var(--preto);
    line-height: 1.3;
}
.alerta-botao-sub { display: block; font-size: .78rem; color: var(--cinza); margin-top: .1rem; }

.alerta-botao-numero {
    flex: 0 0 auto;
    font-size: 1.75rem; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--preto);
    padding-left: .9rem;
    border-left: 1px solid var(--borda);
}
.alerta-botao.critico .alerta-botao-numero { color: var(--vermelho); }

/* ---------------------------------------------------------------------
   Gráfico de linha — escala como um gráfico de bolsa
   --------------------------------------------------------------------- */
.seletor-periodo {
    display: inline-flex; border: 1px solid var(--borda); border-radius: var(--raio-sm);
    overflow: hidden;
}
.seletor-periodo a {
    padding: .3rem .65rem;
    font-size: .72rem; font-weight: 600;
    color: var(--cinza); background: var(--superficie-2);
    border-right: 1px solid var(--borda);
}
.seletor-periodo a:last-child { border-right: 0; }
.seletor-periodo a:hover { background: #f0f1f3; text-decoration: none; color: var(--preto); }
.seletor-periodo a.ativo { background: var(--preto); color: #fff; }

.grafico-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--borda);
}
.grafico-serie .rotulo {
    display: flex; align-items: center; gap: .35rem;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--cinza); font-weight: 600;
}
.grafico-serie .rotulo i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.grafico-serie.entrada .rotulo i { background: var(--verde); }
.grafico-serie.saida   .rotulo i { background: var(--vermelho); }
.grafico-serie .valor {
    display: block; font-size: 1.6rem; font-weight: 800; color: var(--preto);
    line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
    margin-top: .15rem;
}
.grafico-serie .valor.positivo { color: var(--verde); }
.grafico-serie .valor.negativo { color: var(--vermelho); }
.grafico-serie .nota { display: block; font-size: .72rem; color: var(--cinza); margin-top: .1rem; }

.grafico-linha { width: 100%; }
.grafico-linha svg { width: 100%; height: clamp(200px, 30vw, 300px); display: block; overflow: visible; }

.grafico-linha .grade-linha  { stroke: var(--borda); stroke-width: 1; vector-effect: non-scaling-stroke; }
.grafico-linha .grade-rotulo { fill: var(--cinza); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafico-linha .eixo-rotulo  { fill: var(--cinza); font-size: 11px; }

.grafico-linha .serie {
    fill: none; stroke-width: 2.5;
    stroke-linejoin: round; stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.grafico-linha .serie.entrada { stroke: var(--verde); }
.grafico-linha .serie.saida   { stroke: var(--vermelho); }

.grafico-linha .area.entrada { fill: rgba(12, 194, 84, .12); }
.grafico-linha .area.saida   { fill: rgba(181, 8, 8, .10); }

.grafico-linha .ponto { stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.grafico-linha .ponto.entrada { fill: var(--verde); }
.grafico-linha .ponto.saida   { fill: var(--vermelho); }
.grafico-linha .ponto:hover   { r: 5; }

.zona-trilho { position: relative; }
.zona-percentual-fora {
    position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
    font-size: .68rem; font-weight: 700; color: var(--cinza);
    font-variant-numeric: tabular-nums;
}

/* Colunas entradas x saídas — o número vem sempre escrito acima */
.grafico-fluxo { display: flex; align-items: flex-end; gap: 4px; padding-top: .5rem; }
.fluxo-dia { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 0; }
.fluxo-numeros {
    font-size: .68rem; font-weight: 700; white-space: nowrap;
    font-variant-numeric: tabular-nums; line-height: 1;
}
.fluxo-numeros .ent  { color: var(--verde); }
.fluxo-numeros .sai  { color: var(--vermelho); }
.fluxo-numeros .zero { color: var(--borda-forte); }
.fluxo-numeros .sep  { color: var(--borda-forte); margin: 0 1px; }
.fluxo-colunas { display: flex; align-items: flex-end; gap: 3px; height: 96px; width: 100%; justify-content: center; }
.fluxo-col { width: 45%; max-width: 16px; border-radius: 2px 2px 0 0; min-height: 2px; position: relative; }
.fluxo-col.entrada { background: var(--verde); }
.fluxo-col.saida   { background: var(--vermelho); }
.fluxo-col:hover   { filter: brightness(1.15); }
.fluxo-rotulo {
    font-size: .6rem; color: var(--cinza); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.legenda { display: flex; gap: 1rem; font-size: .74rem; color: var(--cinza); align-items: center; flex-wrap: wrap; }
.legenda span { display: inline-flex; align-items: center; gap: .35rem; }
.legenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* Faixas de permanência */
.permanencia { display: flex; flex-direction: column; gap: .5rem; }
.permanencia-linha { display: flex; align-items: center; gap: .6rem; font-size: .8rem; }
.permanencia-faixa { width: 92px; flex: 0 0 92px; color: var(--cinza); font-size: .75rem; }
.permanencia-trilho { flex: 1; height: 16px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-sm); overflow: hidden; }
.permanencia-trilho > span { display: block; height: 100%; transition: width .4s ease; }
.permanencia-valor { width: 62px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--preto); font-size: .78rem; }

/* ---------------------------------------------------------------------
   Mapa do Estoque — células com cards arrastáveis
   --------------------------------------------------------------------- */
.mapa-resumo {
    display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
    font-size: .82rem; color: var(--cinza);
}
.mapa-resumo strong { color: var(--preto); font-weight: 700; font-variant-numeric: tabular-nums; }
.mapa-resumo-alerta {
    display: inline-flex; align-items: center; gap: .3rem;
    color: var(--vermelho); font-weight: 600;
}
.mapa-resumo-alerta .icone { width: 15px; height: 15px; }

/* Cada bloco é uma faixa; suas células ficam numa linha só. */
.bloco { margin-bottom: 1.1rem; }
.bloco-cabecalho {
    display: flex; align-items: baseline; gap: .6rem;
    padding: 0 .15rem .4rem;
}
.bloco-nome {
    font-size: .78rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--preto);
}
.bloco-numeros {
    margin-left: auto; font-size: .74rem; color: var(--cinza);
    font-variant-numeric: tabular-nums;
}
.bloco-numeros strong { color: var(--preto); font-weight: 700; }

.bloco-celulas {
    display: grid;
    grid-template-columns: repeat(var(--colunas, 6), minmax(0, 1fr));
    gap: .5rem;
    align-items: stretch;
}

.celula {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    display: flex; flex-direction: column;
    min-height: 132px;
    min-width: 0;
    overflow: hidden;
}
.celula.com-vencidas { border-color: #efb5b5; }

.celula-cabecalho {
    display: flex; align-items: baseline; gap: .4rem;
    padding: .4rem .55rem;
    border-bottom: 1px solid var(--borda);
    background: var(--superficie-2);
    min-width: 0;
}
.celula-codigo {
    font-weight: 800; font-size: .74rem; letter-spacing: .03em;
    color: var(--preto); text-transform: uppercase; white-space: nowrap;
}
.celula-descricao { font-size: .7rem; color: var(--cinza); }
.celula-numeros {
    margin-left: auto; font-size: .64rem; color: var(--cinza);
    font-variant-numeric: tabular-nums; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.celula.vazia .celula-numeros { font-style: italic; }

.celula-corpo {
    flex: 1; padding: .4rem;
    display: flex; flex-direction: column; gap: .35rem;
    min-height: 88px;
    transition: background .12s, box-shadow .12s;
}
/* Célula recebendo um card arrastado */
.celula-corpo.sobre {
    background: var(--verde-claro);
    box-shadow: inset 0 0 0 2px var(--verde);
}

.celula-vazia-marca {
    margin: auto; text-align: center;
    font-size: .72rem; color: var(--borda-forte); font-style: italic;
    pointer-events: none;
}

/* --- Card da carga --- */
.carga-card {
    border: 1px solid var(--borda-forte);
    border-left: 3px solid var(--borda-forte);
    border-radius: var(--raio-sm);
    background: #fff;
    padding: .45rem .55rem;
    cursor: grab;
    transition: box-shadow .12s, transform .06s, opacity .12s;
    position: relative;
}
.carga-card:active { cursor: grabbing; }
.carga-card:hover  { box-shadow: var(--sombra-md); border-color: var(--cinza); }
.carga-card:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 1px; }

.carga-card.prazo-no_prazo { border-left-color: var(--verde); }
.carga-card.prazo-vencendo { border-left-color: var(--ambar);  background: var(--ambar-claro); }
.carga-card.prazo-vencido  { border-left-color: var(--vermelho); background: var(--vermelho-claro); }
.carga-card.prazo-sem_prazo{ border-left-color: var(--borda-forte); }

.carga-card.arrastando { opacity: .4; transform: scale(.97); }
.carga-card.pego {
    box-shadow: 0 0 0 2px var(--vermelho), var(--sombra-md);
    transform: scale(1.02);
}
.carga-card.salvando { opacity: .6; pointer-events: none; }
.carga-card.salvando::after {
    content: 'gravando…';
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: rgba(255,255,255,.75);
    font-size: .68rem; font-weight: 700; color: var(--cinza);
    border-radius: var(--raio-sm);
}

.carga-topo { display: flex; align-items: center; gap: .4rem; margin-bottom: .15rem; }
.carga-quantidade {
    font-weight: 800; font-size: .9rem; color: var(--preto);
    font-variant-numeric: tabular-nums; line-height: 1;
}
.carga-quantidade .un {
    font-size: .62rem; font-weight: 600; color: var(--cinza);
    text-transform: uppercase; letter-spacing: .04em; margin-left: .1rem;
}
.carga-prazo {
    margin-left: auto;
    font-size: .62rem; font-weight: 700; letter-spacing: .03em;
    padding: .08rem .3rem; border-radius: 3px;
    background: var(--superficie-2); color: var(--cinza);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.carga-prazo.vencendo { background: #fff3e0; color: #9c5d00; }
.carga-prazo.vencido  { background: var(--vermelho); color: #fff; }

.carga-destino {
    display: block; font-size: .78rem; font-weight: 600;
    color: var(--preto); line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carga-destino:hover { color: var(--vermelho); text-decoration: none; }
.carga-cliente { font-size: .7rem; color: var(--cinza); line-height: 1.3; }
.carga-nf {
    font-size: .66rem; color: var(--cinza);
    font-family: 'SF Mono', Consolas, monospace; margin-top: .1rem;
}

/* ---------------------------------------------------------------------
   Tabela de Valores — planilha editável
   --------------------------------------------------------------------- */
.tabela-valores input[type="text"] {
    width: 100%;
    padding: .3rem .45rem;
    border: 1px solid var(--borda);
    border-radius: 4px;
    font: inherit; font-size: .82rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    background: var(--superficie-2);
}
.tabela-valores input[type="text"]:focus {
    outline: none; border-color: var(--vermelho); background: #fff;
    box-shadow: 0 0 0 2px rgba(181, 8, 8, .12);
}
.tabela-valores input.preenchido { background: var(--verde-claro); border-color: #b6e8cc; }
.tabela-valores td.editavel { width: 130px; }

.barra-salvar {
    position: sticky; bottom: 0; z-index: 15;
    background: var(--superficie);
    border-top: 1px solid var(--borda);
    padding: .75rem 1.1rem;
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    box-shadow: 0 -2px 8px rgba(18,18,18,.06);
    border-radius: 0 0 var(--raio) var(--raio);
}
.barra-salvar .resumo { font-size: .82rem; color: var(--cinza); }
.barra-salvar .resumo strong { color: var(--preto); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   Restos do mapa antigo (mantidos para o painel)
   --------------------------------------------------------------------- */
.zona-bloco { margin-bottom: 1.35rem; }
.zona-bloco-cabecalho {
    display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
    padding: .55rem .8rem;
    border-radius: var(--raio) var(--raio) 0 0;
    border: 1px solid var(--borda);
    border-bottom: none;
    background: var(--superficie);
}
.zona-marcador { width: 10px; height: 26px; border-radius: 3px; flex: 0 0 10px; }
.zona-bloco-cabecalho h3 { font-size: .88rem; text-transform: uppercase; letter-spacing: .03em; }
.zona-bloco-resumo { margin-left: auto; font-size: .76rem; color: var(--cinza); font-variant-numeric: tabular-nums; }

.vagas-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
    gap: .5rem;
    padding: .8rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 0 0 var(--raio) var(--raio);
}

.vaga {
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-sm);
    padding: .5rem .55rem;
    background: var(--superficie-2);
    cursor: pointer;
    text-align: left;
    font: inherit;
    display: flex; flex-direction: column; gap: .2rem;
    min-height: 78px;
    transition: border-color .12s, box-shadow .12s, transform .06s;
    position: relative;
    overflow: hidden;
}
.vaga:hover { border-color: var(--preto); box-shadow: var(--sombra-md); transform: translateY(-1px); }
.vaga:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 1px; }

.vaga.livre    { background: var(--superficie-2); }
.vaga.parcial  { background: var(--ambar-claro); border-color: #f0cf9a; }
.vaga.cheia    { background: var(--vermelho-claro); border-color: #efb5b5; }
.vaga.inativa  { opacity: .5; background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 6px, #e6e6e6 6px, #e6e6e6 12px); cursor: default; }

.vaga-codigo {
    font-weight: 700; font-size: .78rem; color: var(--preto);
    letter-spacing: .02em; display: flex; align-items: center; justify-content: space-between; gap: .3rem;
}
.vaga-ocupacao { font-size: .66rem; color: var(--cinza); font-variant-numeric: tabular-nums; font-weight: 600; }
.vaga-conteudo { font-size: .68rem; color: var(--texto); line-height: 1.3; overflow: hidden; }
.vaga-conteudo .nf { font-weight: 600; color: var(--preto); }
.vaga-vazia { font-size: .7rem; color: var(--cinza); font-style: italic; margin-top: auto; }
.vaga-mini-barra { height: 3px; border-radius: 99px; background: var(--borda); overflow: hidden; margin-top: auto; }
.vaga-mini-barra > span { display: block; height: 100%; background: var(--verde); }
.vaga.parcial .vaga-mini-barra > span { background: var(--ambar); }
.vaga.cheia   .vaga-mini-barra > span { background: var(--vermelho); }

/* ---------------------------------------------------------------------
   Tabelas
   --------------------------------------------------------------------- */
.tabela-rolagem { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: .82rem; }
table.tabela th {
    text-align: left;
    padding: .6rem .75rem;
    font-size: .66rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--cinza); font-weight: 700;
    border-bottom: 1px solid var(--borda);
    background: var(--superficie-2);
    white-space: nowrap;
}
table.tabela td { padding: .62rem .75rem; border-bottom: 1px solid var(--borda); vertical-align: middle; }
table.tabela tbody tr:last-child td { border-bottom: none; }
table.tabela tbody tr:hover { background: var(--superficie-2); }
table.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
table.tabela .acoes { text-align: right; white-space: nowrap; }
.linha-alerta { background: var(--ambar-claro) !important; }

.vazio {
    padding: 2.5rem 1.5rem; text-align: center; color: var(--cinza);
}
.vazio h3 { color: var(--texto); margin-bottom: .35rem; }
.vazio .icone-grande { width: 40px; height: 40px; color: var(--borda-forte); margin-bottom: .6rem; }

/* ---------------------------------------------------------------------
   Etiquetas
   --------------------------------------------------------------------- */
.etiqueta {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .12rem .5rem;
    border-radius: 99px;
    font-size: .67rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    white-space: nowrap;
}
.etiqueta.armazenada { background: var(--verde-claro);    color: #07803a; }
.etiqueta.parcial    { background: var(--ambar-claro);    color: #9c5d00; }
.etiqueta.expedida   { background: #eef0f2;               color: var(--cinza); }
.etiqueta.entrada    { background: var(--verde-claro);    color: #07803a; }
.etiqueta.saida      { background: var(--vermelho-claro); color: var(--vermelho); }
.etiqueta.transferencia { background: var(--azul-claro);  color: #1150b8; }
.etiqueta.ajuste     { background: #f3eafd;               color: #6b28c9; }
.etiqueta.admin      { background: var(--vermelho-claro); color: var(--vermelho); }
.etiqueta.operador   { background: var(--azul-claro);     color: #1150b8; }
.etiqueta.consulta   { background: #eef0f2;               color: var(--cinza); }
.etiqueta.neutra     { background: #eef0f2;               color: var(--cinza); }

.endereco {
    display: inline-block;
    font-family: 'SF Mono', Consolas, 'Courier New', monospace;
    font-size: .74rem; font-weight: 600;
    padding: .1rem .42rem;
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    border-radius: 4px;
    color: var(--preto);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Formulários
   --------------------------------------------------------------------- */
.campo { margin-bottom: 1rem; }
.campo label, .rotulo {
    display: block;
    font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--cinza);
    margin-bottom: .35rem;
}
.campo input[type="text"], .campo input[type="email"], .campo input[type="password"],
.campo input[type="number"], .campo input[type="date"], .campo input[type="search"],
.campo select, .campo textarea,
input.controle, select.controle {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio);
    font: inherit;
    font-size: .86rem;
    color: var(--texto);
    background: #fff;
    transition: border-color .12s, box-shadow .12s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus,
input.controle:focus, select.controle:focus {
    outline: none;
    border-color: var(--vermelho);
    box-shadow: 0 0 0 3px rgba(181, 8, 8, .1);
}
.campo textarea { min-height: 80px; resize: vertical; }
.campo .ajuda { font-size: .72rem; color: var(--cinza); margin-top: .3rem; }
.campo-linha { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.campo-checkbox { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: 1rem; }
.campo-checkbox input { margin-top: .2rem; width: 15px; height: 15px; accent-color: var(--vermelho); }
.campo-checkbox label { text-transform: none; letter-spacing: 0; font-size: .84rem; color: var(--texto); margin: 0; font-weight: 500; }

.form-acoes {
    display: flex; gap: .6rem; flex-wrap: wrap;
    padding-top: 1rem; margin-top: .25rem;
    border-top: 1px solid var(--borda);
}
.obrigatorio { color: var(--vermelho); }

/* Filtros */
.filtros {
    display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end;
    padding: .85rem 1.1rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    margin-bottom: 1rem;
}
.filtros .campo { margin: 0; flex: 1 1 150px; min-width: 130px; }
.filtros .campo.largo { flex: 2 1 240px; }

/* ---------------------------------------------------------------------
   Distribuição por vaga (recebimento / realocação)
   --------------------------------------------------------------------- */
.distribuicao { display: flex; flex-direction: column; gap: .5rem; }
.distribuicao-linha {
    display: grid;
    grid-template-columns: 1fr 110px 36px;
    gap: .5rem; align-items: center;
}
.distribuicao-linha select, .distribuicao-linha input { margin: 0; }
.btn-remover {
    width: 34px; height: 34px;
    border: 1px solid var(--borda-forte); background: #fff;
    border-radius: var(--raio-sm); cursor: pointer;
    color: var(--cinza); display: grid; place-items: center;
    font-size: 1.1rem; line-height: 1; padding: 0;
}
.btn-remover:hover { border-color: var(--vermelho); color: var(--vermelho); background: var(--vermelho-claro); }

.resumo-distribuicao {
    margin-top: .8rem; padding: .65rem .85rem;
    border-radius: var(--raio-sm);
    font-size: .82rem; font-weight: 600;
    background: var(--superficie-2); border: 1px solid var(--borda);
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.resumo-distribuicao.ok       { background: var(--verde-claro);    border-color: #b6e8cc; color: #07803a; }
.resumo-distribuicao.diverge  { background: var(--vermelho-claro); border-color: #efb5b5; color: var(--vermelho); }

/* ---------------------------------------------------------------------
   Avisos
   --------------------------------------------------------------------- */
.avisos { position: fixed; top: 1rem; right: 1rem; z-index: 100; display: flex; flex-direction: column; gap: .5rem; max-width: min(420px, calc(100vw - 2rem)); }
.aviso {
    padding: .7rem .9rem;
    border-radius: var(--raio);
    font-size: .84rem;
    display: flex; align-items: flex-start; gap: .55rem;
    box-shadow: var(--sombra-lg);
    border: 1px solid;
    background: #fff;
    animation: entrar .22s ease;
}
@keyframes entrar { from { opacity: 0; transform: translateX(14px); } }
.aviso.sucesso { border-color: #b6e8cc; background: var(--verde-claro);    color: #07803a; }
.aviso.erro    { border-color: #efb5b5; background: var(--vermelho-claro); color: var(--vermelho-escuro); }
.aviso.aviso-  { border-color: #f0cf9a; background: var(--ambar-claro);    color: #9c5d00; }
.aviso.info    { border-color: #bcd4f7; background: var(--azul-claro);     color: #1150b8; }
.aviso .fechar { margin-left: auto; background: none; border: 0; cursor: pointer; color: inherit; opacity: .6; font-size: 1rem; line-height: 1; padding: 0 .2rem; }
.aviso .fechar:hover { opacity: 1; }

.alerta {
    padding: .8rem 1rem;
    border-radius: var(--raio);
    border: 1px solid;
    font-size: .84rem;
    margin-bottom: 1rem;
    display: flex; gap: .6rem; align-items: flex-start;
}
.alerta.atencao { border-color: #f0cf9a; background: var(--ambar-claro);    color: #7d4b00; }
.alerta.erro    { border-color: #efb5b5; background: var(--vermelho-claro); color: var(--vermelho-escuro); }
.alerta.info    { border-color: #bcd4f7; background: var(--azul-claro);     color: #12448f; }
.alerta.sucesso { border-color: #b6e8cc; background: var(--verde-claro);    color: #06682f; }
.alerta strong { display: block; margin-bottom: .15rem; }
.alerta .icone { flex: 0 0 18px; width: 18px; height: 18px; margin-top: .1rem; }

/* ---------------------------------------------------------------------
   Modal
   --------------------------------------------------------------------- */
.modal {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(18, 18, 18, .5);
    display: none; align-items: flex-start; justify-content: center;
    padding: 4vh 1rem; overflow-y: auto;
    backdrop-filter: blur(2px);
}
.modal.aberto { display: flex; }
.modal-caixa {
    background: #fff; border-radius: var(--raio);
    width: min(560px, 100%);
    box-shadow: var(--sombra-lg);
    animation: subir .18s ease;
}
.modal-caixa.larga { width: min(760px, 100%); }
@keyframes subir { from { opacity: 0; transform: translateY(-10px); } }
.modal-cabecalho {
    padding: .9rem 1.1rem; border-bottom: 1px solid var(--borda);
    display: flex; align-items: center; gap: .75rem;
}
.modal-cabecalho h2 { flex: 1; font-size: .95rem; }
.modal-corpo { padding: 1.1rem; }
.modal-rodape {
    padding: .8rem 1.1rem; border-top: 1px solid var(--borda);
    display: flex; gap: .55rem; justify-content: flex-end; flex-wrap: wrap;
    background: var(--superficie-2); border-radius: 0 0 var(--raio) var(--raio);
}
.btn-fechar { background: none; border: 0; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--cinza); padding: 0 .2rem; }
.btn-fechar:hover { color: var(--vermelho); }

/* ---------------------------------------------------------------------
   Linha do tempo (histórico da carga)
   --------------------------------------------------------------------- */
.linha-tempo { position: relative; padding-left: 1.4rem; }
.linha-tempo::before {
    content: ''; position: absolute; left: 5px; top: .4rem; bottom: .4rem;
    width: 2px; background: var(--borda);
}
.evento { position: relative; padding-bottom: 1.05rem; }
.evento:last-child { padding-bottom: 0; }
.evento::before {
    content: ''; position: absolute; left: -1.4rem; top: .3rem;
    width: 12px; height: 12px; border-radius: 50%;
    background: #fff; border: 2px solid var(--cinza);
}
.evento.entrada::before       { border-color: var(--verde); }
.evento.saida::before         { border-color: var(--vermelho); }
.evento.transferencia::before { border-color: var(--azul); }
.evento.ajuste::before        { border-color: #6b28c9; }
.evento-topo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .15rem; }
.evento-quando { font-size: .72rem; color: var(--cinza); margin-left: auto; }
.evento-detalhe { font-size: .8rem; color: var(--texto); }
.evento-meta { font-size: .73rem; color: var(--cinza); margin-top: .15rem; }

/* ---------------------------------------------------------------------
   Paginação
   --------------------------------------------------------------------- */
.paginacao {
    display: flex; gap: .3rem; align-items: center; justify-content: center;
    padding: .9rem; flex-wrap: wrap;
}
.paginacao a, .paginacao span {
    min-width: 32px; height: 32px; padding: 0 .5rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--borda); border-radius: var(--raio-sm);
    font-size: .8rem; color: var(--texto); background: #fff;
}
.paginacao a:hover { border-color: var(--vermelho); color: var(--vermelho); text-decoration: none; }
.paginacao .atual { background: var(--vermelho); color: #fff; border-color: var(--vermelho); font-weight: 600; }
.paginacao .info { border: 0; background: none; color: var(--cinza); }

/* ---------------------------------------------------------------------
   Login
   --------------------------------------------------------------------- */
.login-tela {
    min-height: 100vh;
    display: grid; place-items: center;
    padding: 1.5rem;
    background:
        radial-gradient(1100px 460px at 50% -8%, rgba(181, 8, 8, .07), transparent 60%),
        var(--fundo);
}
.login-caixa { width: min(400px, 100%); }
.login-marca { text-align: center; margin-bottom: 1.5rem; color: var(--preto); }
.login-logo { width: min(300px, 82%); height: auto; margin: 0 auto .35rem; display: block; }
.login-marca h1 { font-size: 1.2rem; }
.login-marca p  {
    color: var(--cinza); font-size: .72rem; margin: .35rem 0 0;
    text-transform: uppercase; letter-spacing: .14em; font-weight: 600;
}
.login-rodape { text-align: center; margin-top: 1.15rem; font-size: .72rem; color: var(--cinza); }

/* ---------------------------------------------------------------------
   Página de erro
   --------------------------------------------------------------------- */
.erro-tela { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; text-align: center; }
.erro-codigo { font-size: 4.5rem; font-weight: 800; color: var(--vermelho); line-height: 1; }
.erro-caixa { max-width: 520px; }
.erro-detalhe {
    margin-top: 1.2rem; padding: .8rem; text-align: left;
    background: var(--preto); color: #e6e6e6; border-radius: var(--raio);
    font-family: Consolas, monospace; font-size: .72rem;
    overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}

/* ---------------------------------------------------------------------
   Utilitários
   --------------------------------------------------------------------- */
.texto-cinza  { color: var(--cinza); }
.texto-menor  { font-size: .76rem; }
.texto-forte  { font-weight: 600; color: var(--preto); }
.num          { font-variant-numeric: tabular-nums; }
.sem-margem   { margin: 0; }
.mt-1 { margin-top: .5rem; }  .mt-2 { margin-top: 1rem; }  .mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.flex        { display: flex; gap: .5rem; align-items: center; }
.flex-entre  { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.oculto      { display: none !important; }
.so-leitores {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Menu móvel */
.btn-menu { display: none; background: none; border: 0; cursor: pointer; color: var(--preto); padding: .25rem; }

/* ---------------------------------------------------------------------
   Responsivo
   --------------------------------------------------------------------- */
/* Em tela estreita o bloco quebra em duas linhas, senão a célula fica
   pequena demais para ler o card. */
@media (max-width: 1100px) {
    .bloco-celulas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .bloco-celulas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .lateral {
        position: fixed; left: 0; top: 0; z-index: 60;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: var(--sombra-lg);
    }
    .lateral.aberta { transform: translateX(0); }
    .btn-menu { display: inline-flex; }
    .pagina { padding: 1rem .9rem 3rem; }
    .topo { padding: .75rem .9rem; }
    .busca-topo { width: auto; flex: 1; }
    .indicador-valor { font-size: 1.5rem; }
    .fundo-menu { position: fixed; inset: 0; background: rgba(18,18,18,.45); z-index: 55; }
    .distribuicao-linha { grid-template-columns: 1fr 84px 34px; }
}

@media (max-width: 560px) {
    .pagina-cabecalho { flex-direction: column; align-items: stretch; }
    .pagina-acoes .btn { flex: 1; }
    .grafico-fluxo { height: 130px; }
    .fluxo-colunas { height: 100px; }
    .permanencia-faixa { width: 76px; flex-basis: 76px; font-size: .7rem; }
}

@media print {
    .lateral, .topo, .pagina-acoes, .filtros, .paginacao, .avisos, .btn { display: none !important; }
    body { background: #fff; }
    .cartao { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
    .pagina { padding: 0; }
}

/* ---------------------------------------------------------------------
   Instalador — marca de cada etapa
   --------------------------------------------------------------------- */
.etapa-marca {
    width: 22px; height: 22px; flex: 0 0 22px;
    border-radius: 50%;
    display: inline-grid; place-items: center;
    margin-right: .1rem;
}
.etapa-marca svg { width: 13px; height: 13px; stroke-width: 2.6; }
.etapa-marca.ok     { background: var(--verde-claro);    color: #07803a; }
.etapa-marca.agora  { background: var(--ambar-claro);    color: #9c5d00; }
.etapa-marca.espera { background: var(--superficie-2); border: 1px solid var(--borda); }