/* Estoque do cliente — envio e confirmação.
   Segue a mesma linguagem visual das outras páginas (fundo cinza, cartão
   branco, Font Awesome), sem introduzir sistema de design novo. */

body {
    font-family: sans-serif;
    background-color: #f0f2f5;
    color: #1c1e21;
    margin: 0;
    padding: 40px 16px;
}

.container {
    max-width: 760px;
    margin: 0 auto;
}

.oculto { display: none !important; }

/* ── cabeçalho ──────────────────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}
.page-header h1 { font-size: 24px; font-weight: 600; margin: 0; }
.logo { height: 40px; margin-right: 1rem; }
.back-button {
    background: none; border: none; font-size: 1.5rem;
    cursor: pointer; margin-right: 1rem; color: #666;
}
.back-button:hover { color: #1c1e21; }

/* ── cartões ────────────────────────────────────────────────────────────── */
.card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    padding: 24px;
    margin-bottom: 20px;
}
.card h2 { font-size: 17px; margin: 0 0 6px; }
.ajuda { color: #606770; font-size: 14px; margin: 0 0 16px; line-height: 1.5; }

.aviso { display: flex; gap: 14px; align-items: flex-start; }
.aviso i { font-size: 22px; color: #8a6d3b; margin-top: 2px; }
.aviso p { margin: 4px 0 0; color: #606770; font-size: 14px; }

/* ── estado atual ───────────────────────────────────────────────────────── */
.estado-carregando { color: #606770; font-size: 14px; }

.estado-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.estado-icone { font-size: 22px; }
.estado-icone.ativo { color: #2e7d32; }
.estado-icone.vazio { color: #90949c; }
.estado-texto strong { display: block; font-size: 15px; }
.estado-texto span { color: #606770; font-size: 13px; }

/* Estoque perto de vencer: o preço velho é o risco, então o aviso é forte. */
.estado-texto .vencendo { color: #b45309; font-weight: 600; }

/* ── dropzone ───────────────────────────────────────────────────────────── */
.dropzone {
    border: 2px dashed #c9ccd1;
    border-radius: 8px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.dropzone:hover, .dropzone:focus-visible { border-color: #1877f2; background: #f5f9ff; }
.dropzone.arrastando { border-color: #1877f2; background: #e7f0fd; }
.dropzone i { font-size: 30px; color: #90949c; }
.dropzone p { margin: 10px 0 4px; font-size: 15px; }
.dropzone small { color: #90949c; font-size: 12px; }

/* ── lista de arquivos ──────────────────────────────────────────────────── */
.lista-arquivos { list-style: none; padding: 0; margin: 16px 0 0; }
.lista-arquivos li {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 6px; background: #f5f6f7;
    font-size: 14px; margin-bottom: 6px;
}
.lista-arquivos .nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-arquivos .tamanho { color: #90949c; font-size: 12px; }
.lista-arquivos .remover {
    background: none; border: none; cursor: pointer; color: #90949c; font-size: 15px;
}
.lista-arquivos .remover:hover { color: #d93025; }

/* ── botões ─────────────────────────────────────────────────────────────── */
.acoes { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.botao {
    border: none; border-radius: 6px; padding: 10px 18px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
}
.botao.primario { background: #1877f2; color: #fff; }
.botao.primario:hover:not(:disabled) { background: #166fe5; }
.botao.neutro { background: #e4e6eb; color: #1c1e21; }
.botao.neutro:hover { background: #d8dade; }
.botao:disabled { opacity: .5; cursor: not-allowed; }

/* Confirmar SUBSTITUI o estoque anterior — o botão não deve parecer inócuo. */
.botao.destrutivo { background: #b45309; color: #fff; }
.botao.destrutivo:hover:not(:disabled) { background: #92400e; }

/* ── alertas ────────────────────────────────────────────────────────────── */
.alerta {
    border-radius: 6px; padding: 14px 16px; font-size: 14px;
    line-height: 1.5; margin-top: 16px;
}
.alerta.erro      { background: #fdecea; color: #8a1c12; border: 1px solid #f5c6c2; }
.alerta.atencao   { background: #fff4e5; color: #7a4a08; border: 1px solid #ffd9a8; }
.alerta.ok        { background: #e6f4ea; color: #1e4620; border: 1px solid #b7e1c1; }
.alerta ul { margin: 8px 0 0; padding-left: 20px; }

/* ── resumo ─────────────────────────────────────────────────────────────── */
.resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 16px 0;
}
.metrica {
    background: #f5f6f7; border-radius: 6px; padding: 12px 14px;
}
.metrica .rotulo { display: block; color: #606770; font-size: 12px; }
.metrica .valor { font-size: 20px; font-weight: 600; }
.metrica .delta { font-size: 12px; font-weight: 600; }
.metrica .delta.sobe  { color: #1e7e34; }
.metrica .delta.desce { color: #b45309; }

/* ── detalhes / tabelas ─────────────────────────────────────────────────── */
.detalhe { margin-top: 12px; border-top: 1px solid #e4e6eb; padding-top: 12px; }
.detalhe summary { cursor: pointer; font-size: 14px; color: #1877f2; }
.tabela-rolavel { max-height: 260px; overflow: auto; margin-top: 10px; }
.tabela-rolavel table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-rolavel th, .tabela-rolavel td {
    text-align: left; padding: 6px 8px; border-bottom: 1px solid #eceef0;
}
.tabela-rolavel th { color: #606770; font-weight: 600; position: sticky; top: 0; background: #fff; }

@media (max-width: 520px) {
    body { padding: 20px 12px; }
    .card { padding: 18px; }
    .acoes .botao { flex: 1; justify-content: center; }
}