/* Poppins auto-hospedada (pasta fonts/) — de propósito, em vez do CDN do
   Google: não relaxa a CSP, não depende de servidor externo e não expõe
   o IP de quem usa o site. font-display:swap mostra o texto na hora com
   a fonte de sistema e troca pela Poppins quando ela carrega. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/poppins-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/poppins-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/poppins-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/poppins-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/poppins-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/poppins-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/poppins-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/poppins-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
*{margin:0;padding:0;box-sizing:border-box}
:root{--primary:#1a73e8;--success:#34a853;--danger:#ea4335;--warning:#fbbc04;--dark:#202124;--gray:#5f6368;--light:#f8f9fa;--border:#dadce0}
body{font-family:'Poppins','Segoe UI',system-ui,sans-serif;background:var(--light);color:var(--dark);min-height:100vh}
/* Campos e botões não herdam a fonte do body por padrão — sem isto eles
   continuariam com a fonte do sistema enquanto o resto do site usa Poppins. */
button,input,select,textarea{font-family:inherit}
/* Ícones Bootstrap embutidos: acompanham tamanho (1em) e cor (currentColor)
   do texto ao redor, então funcionam em qualquer botão sem ajuste extra. */
.bi{width:1em;height:1em;fill:currentColor;vertical-align:-.125em;flex-shrink:0}
.btn .bi{margin-right:.3rem}

/* Login Screen */
.login-screen{display:flex;min-height:100vh;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a237e 0%,#0d47a1 100%)}
.login-box{background:#fff;border-radius:16px;padding:2.5rem;width:100%;max-width:400px;margin:1rem;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login-logo{text-align:center;margin-bottom:2rem}
.login-logo .icon{font-size:3rem;margin-bottom:.5rem}
.login-logo h1{font-size:1.5rem;color:var(--dark)}
.login-logo p{color:var(--gray);font-size:.875rem;margin-top:.25rem}
.login-form .form-group{margin-bottom:1.25rem}
.login-form label{display:block;font-weight:500;margin-bottom:.5rem;font-size:.875rem}
.login-form input{width:100%;padding:.875rem 1rem;border:1px solid var(--border);border-radius:8px;font-size:1rem;transition:border-color .2s}
.login-form input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,115,232,.1)}
.login-form .btn-login{width:100%;padding:1rem;background:var(--primary);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s}
.login-form .btn-login:hover{background:#1557b0}
.login-form .btn-login:disabled{background:#ccc;cursor:not-allowed}
.login-options{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;font-size:.875rem}
.login-options label{display:flex;align-items:center;gap:.5rem;cursor:pointer;white-space:nowrap}
.login-options a{color:var(--primary);text-decoration:none}
.login-options a:hover{text-decoration:underline}
.login-error{background:#fce8e6;color:var(--danger);padding:.875rem;border-radius:8px;margin-bottom:1rem;font-size:.875rem;display:none}
.login-error.show{display:block}
.login-success{background:#e6f4ea;color:var(--success);padding:.875rem;border-radius:8px;margin-bottom:1rem;font-size:.875rem;display:none}
.login-success.show{display:block}
.login-footer{text-align:center;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.login-footer p{color:var(--gray);font-size:.875rem}
.login-footer button{background:none;border:none;color:var(--primary);cursor:pointer;font-size:.875rem}
.login-footer button:hover{text-decoration:underline}
.login-form.hidden{display:none}
.password-wrapper{position:relative}
.password-wrapper input{padding-right:3rem}
.password-toggle{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:1.25rem;opacity:.5}
.password-toggle:hover{opacity:1}

/* Header */
.header{background:linear-gradient(135deg,#1a237e 0%,#0d47a1 100%);color:#fff;padding:1.5rem 2rem;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.header h1{font-size:1.5rem;font-weight:600}
.header p{opacity:.9;font-size:.9rem;margin-top:.25rem}

/* ---------------------------------------------------------------------------
   Áreas de cliente (Marcelo / Podemos)
   --------------------------------------------------------------------------- */
/* Cores institucionais do Podemos, tiradas das artes oficiais do partido.
   Estes são os tons EXATOS da marca — use-os em elementos decorativos
   (ícones, faixas, textos grandes). Para fundo com texto branco por cima,
   prefira as variáveis de body.area-podemos lá embaixo, que são os mesmos
   tons escurecidos o suficiente para o texto continuar legível. */
/* Paleta em uso na página (a das artes do "20"): */
.podemos-roxo     { color: #7139a1; }
.podemos-verde    { color: #4e993a; }
.podemos-amarelo  { color: #f9f347; }
/* Do logo principal, caso precise em alguma arte: */
.podemos-azul     { color: #0097FE; }
.podemos-verde-p  { color: #02D564; }

/* Selo com o nome da área, ao lado do "Bem-vindo". */
.area-cliente-rotulo{margin-left:.4rem;padding:.15rem .6rem;border-radius:999px;background:rgba(255,255,255,.18);font-size:.75rem;font-weight:600}
.area-cliente-rotulo:empty{display:none}

/* Aviso de "somente leitura" ao lado do nome da área: fundo âmbar para
   destoar do selo normal e a pessoa notar antes de procurar os botões. */
.area-cliente-rotulo.so-leitura{background:rgba(251,188,4,.9);color:#3d2b00}

/* ---------------------------------------------------------------------------
   Menu "mais ações" do item
   --------------------------------------------------------------------------- */
/* position:fixed e z-index acima da janela (que usa 1000): o menu precisa
   escapar do overflow da tabela e ficar por cima do modal. */
.menu-acoes{position:fixed;z-index:1100;display:none;min-width:220px;background:#fff;border:1px solid var(--border);border-radius:.5rem;box-shadow:0 8px 24px rgba(0,0,0,.16);padding:.35rem;flex-direction:column}
.menu-acoes.aberto{display:flex}
.menu-acoes button{display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem .7rem;border:0;background:none;border-radius:.375rem;cursor:pointer;font-family:inherit;font-size:.85rem;color:var(--dark);text-align:left}
.menu-acoes button:hover{background:color-mix(in srgb,var(--primary) 10%,#fff);color:var(--primary)}
.menu-acoes button .bi{width:1.05em;height:1.05em;flex-shrink:0}
.menu-acoes-sep{height:1px;background:var(--border);margin:.3rem .2rem}
/* O destrutivo fica no fim, separado por um filete e em vermelho: é o único
   item do menu que não dá pra desfazer. */
.menu-acoes button.perigo{color:var(--danger)}
.menu-acoes button.perigo:hover{background:#fce8e6;color:var(--danger)}

/* O anexar é um <label> com input escondido (única forma de um "botão" abrir
   o seletor de arquivo), então precisa imitar o .btn-icon à mão. */
.anexar-item{cursor:pointer}

/* Dica abaixo de um campo: explica sem competir com o rótulo. */
.campo-dica{display:block;margin-top:.35rem;font-size:.75rem;color:var(--gray);line-height:1.5}
.data-pedido{width:100%;padding:.75rem;border:1px solid var(--border);border-radius:6px;font-size:.9rem}
.data-pedido:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}

/* ---------------------------------------------------------------------------
   Importação por planilha
   --------------------------------------------------------------------------- */
.importar-ajuda{background:var(--light);border:1px solid var(--border);border-radius:8px;padding:.9rem 1rem;margin-bottom:1.25rem;font-size:.85rem;line-height:1.7}
.importar-colunas{font-size:.82rem}
.importar-resumo{margin:1rem 0 .5rem;font-size:.88rem}
.importar-ok{color:#1e7e34;font-weight:600}
.importar-erro-txt{color:var(--danger);font-weight:600}
.importar-erro{padding:1rem;background:#fce8e6;color:#a50e0e;border-radius:8px;font-size:.88rem;line-height:1.6}
.importar-aviso{margin-top:.75rem;font-size:.8rem;color:var(--gray)}
/* Aviso é diferente de erro: a linha entra assim mesmo, só falta
   completar algo depois. Âmbar, não vermelho. */
.importar-aviso-txt{color:#b06000}

.importar-tabela-wrap{max-height:45vh;overflow:auto;border:1px solid var(--border);border-radius:8px}
.importar-tabela{width:100%;border-collapse:collapse;font-size:.8rem}
.importar-tabela th{position:sticky;top:0;background:var(--light);text-align:left;padding:.5rem .6rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.4px;color:var(--gray);border-bottom:1px solid var(--border)}
.importar-tabela td{padding:.45rem .6rem;border-bottom:1px solid var(--border)}
.importar-tabela .num{text-align:right;font-variant-numeric:tabular-nums}
/* Linha com problema em vermelho claro: a pessoa precisa achar o erro na
   planilha dela, e o número da linha na primeira coluna é o que leva até lá. */
.importar-tabela .linha-erro{background:#fdecea;color:#a50e0e}

@media(max-width:768px){
    .importar-tabela th,.importar-tabela td{display:table-cell;width:auto}
    .importar-tabela td:before{content:none}
    .importar-tabela{min-width:560px}
}

/* ---------------------------------------------------------------------------
   Planilha de itens
   --------------------------------------------------------------------------- */
/* Seletor com as DUAS classes de propósito: .modal-content é definida bem mais
   abaixo neste arquivo com max-width:500px, e com a mesma especificidade a
   última regra venceria — a janela abria estreita. Assim ela ganha
   independentemente da ordem no arquivo.
   padding:0 porque as faixas internas (barra e tabela) trazem o próprio
   espaçamento; com o padding do .modal-content ficaria dobrado. */
.modal-content.planilha-modal-content{max-width:1400px;width:96vw;padding:0;display:flex;flex-direction:column;max-height:90vh;overflow:hidden}
/* Faixa colorida no topo, seguindo o tema da página (as regras de cor estão
   nos blocos body.area-marcelo / body.area-podemos, lá em cima). O cinza-escuro
   é só o padrão, para o caso de a classe de área não estar aplicada. */
.planilha-modal-content .modal-header{padding:1.1rem 1.5rem;margin-bottom:0;background:var(--dark);color:#fff;border-radius:12px 12px 0 0}
/* A janela de importação mantém o padding de 2rem do .modal-content, então a
   faixa precisa de margem negativa para encostar nas bordas. Sem isso ela
   ficaria uma tarja flutuando com uma moldura branca em volta. */
#importarModal .modal-header{margin:-2rem -2rem 1.5rem;padding:1.1rem 1.5rem;background:var(--dark);color:#fff;border-radius:12px 12px 0 0}
#importarModal .modal-close{color:#fff;opacity:.85}
#importarModal .modal-close:hover{opacity:1}
.planilha-modal-content .modal-header h3{display:flex;align-items:center;gap:.5rem}
.planilha-modal-content .modal-close{color:#fff;opacity:.85}
.planilha-modal-content .modal-close:hover{opacity:1}
.planilha-barra{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.5rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.planilha-filtro{flex:1;min-width:180px;padding:.5rem .75rem;border:1px solid var(--border);border-radius:.375rem;font-size:.875rem}
.planilha-filtro:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
.planilha-contagem{color:var(--gray);font-size:.8rem;white-space:nowrap}

/* O corpo rola dentro da janela, e não a página toda: o cabeçalho fica preso
   no topo com position:sticky, então a coluna nunca some ao descer a lista. */
.planilha-wrapper{overflow:auto;flex:1;padding:0 1.5rem 1.5rem}
.planilha{width:100%;border-collapse:collapse;font-size:.82rem}
.planilha th{position:sticky;top:0;z-index:1;background:var(--light);color:var(--gray);text-transform:uppercase;letter-spacing:.4px;font-size:.7rem;font-weight:700;text-align:left;padding:.6rem .7rem;border-bottom:2px solid var(--border);cursor:pointer;user-select:none;white-space:nowrap}
.planilha th:hover{color:var(--primary)}
.planilha th.ordenando{color:var(--primary)}
.planilha-seta{display:inline-block;margin-left:.25rem;width:.8em}
.planilha td{padding:.55rem .7rem;border-bottom:1px solid var(--border);vertical-align:top}
.planilha tbody tr:nth-child(even){background:rgba(0,0,0,.02)}
.planilha tbody tr:hover{background:color-mix(in srgb,var(--primary) 7%,transparent)}
.planilha .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.planilha tfoot td{position:sticky;bottom:0;background:var(--light);font-weight:700;padding:.6rem .7rem;border-top:2px solid var(--border)}
.planilha-vazio{padding:2rem;text-align:center;color:var(--gray)}
/* Nome do arquivo clicável: sublinhado pontilhado sinaliza que abre algo, sem
   o peso visual de um link azul em toda linha da tabela. */
.planilha-arquivo{cursor:pointer;border-bottom:1px dotted var(--gray)}
.planilha-arquivo:hover{color:var(--primary);border-bottom-color:var(--primary)}

.planilha-selo{display:inline-block;padding:.1rem .5rem;border-radius:999px;background:#fef7e0;color:#b06000;font-size:.7rem;font-weight:600;white-space:nowrap}
.planilha-selo.ok{background:#e6f4ea;color:#1e7e34}

@media(max-width:768px){
    /* Tabela larga não cabe empilhada nem espremida: aqui ela mantém a forma
       de tabela e rola na horizontal, que é como se lê planilha no celular. */
    .planilha-wrapper{padding:0 .75rem 1rem}
    .planilha th,.planilha td{display:table-cell;width:auto}
    .planilha th{display:table-cell}
    .planilha td:before{content:none}
    .planilha{min-width:760px}
}

/* ---------------------------------------------------------------------------
   Tela do conferente — cards por finalidade
   --------------------------------------------------------------------------- */
.checagem-area{margin-bottom:1.5rem}
.checagem-titulo{font-size:1.1rem;margin-bottom:.15rem}
.checagem-sub{color:var(--gray);font-size:.85rem;margin-bottom:1rem}
.checagem-cards{display:flex;flex-direction:column;gap:.6rem}

.checagem-card{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06)}
/* Grupo inteiro conferido ganha borda verde: dá pra ver o que falta correndo
   os olhos pela coluna, sem ler contador nenhum. */
.checagem-card.concluido{border-color:#a8d5b5}
.checagem-card-topo{display:flex;align-items:center;gap:.75rem;width:100%;padding:.9rem 1rem;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit}
.checagem-card-topo:hover{background:var(--light)}
.checagem-card-nome{flex:1;font-weight:600;font-size:.95rem;display:flex;flex-direction:column;gap:.15rem;min-width:0}
/* A tiragem é o número que importa na conferência (quanto material
   chegou); a contagem de itens fica ao lado, menor, como referência. */
.checagem-card-tiragem{font-weight:400;font-size:.75rem;color:var(--gray)}
.checagem-card-conta{padding:.15rem .6rem;border-radius:999px;background:#fef7e0;color:#b06000;font-size:.72rem;font-weight:600;white-space:nowrap}
.checagem-card.concluido .checagem-card-conta{background:#e6f4ea;color:#1e7e34}
.checagem-card-seta{color:var(--gray);font-size:.8rem}

.checagem-itens{border-top:1px solid var(--border)}
.checagem-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.checagem-item:last-child{border-bottom:none}
.checagem-item.feito{background:#f7fbf8}
.checagem-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.checagem-item-pedido{font-weight:600;font-size:.88rem}
.checagem-item-meta{color:var(--gray);font-size:.76rem}
.checagem-item-acao{flex:0 0 auto}
.checagem-vazio{padding:1.5rem;text-align:center;color:var(--gray);font-size:.88rem;background:#fff;border:1px dashed var(--border);border-radius:10px;line-height:1.6}

@media(max-width:768px){
    /* No celular a ação vai para baixo e ocupa a linha: o botão de foto é o
       alvo do dedo e não pode ficar espremido na quina. */
    .checagem-item-acao{width:100%}
    .checagem-item-acao .btn{width:100%;justify-content:center}
}

/* Checagem de entrega */
.checagem-progresso{display:inline-block;padding:.1rem .5rem;border-radius:999px;background:#fef7e0;color:#b06000;font-size:.72rem;font-weight:600;white-space:nowrap}
.checagem-progresso.completo{background:#e6f4ea;color:#1e7e34}
.checagem-pendente{color:var(--gray)}
/* O <label> embrulha um input escondido: é o jeito de um "botão" abrir a
   câmera. Sem isto ele não teria a aparência dos demais botões. */
.checagem-enviar{cursor:pointer}

/* Papel + área + alcance de leitura na lista de usuários; empilham no celular. */
.usuario-controles{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.usuario-leitura{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--gray);cursor:pointer;white-space:nowrap}
.usuario-leitura input{cursor:pointer}
@media (max-width:520px){
    .usuario-controles{width:100%}
    .usuario-controles select{flex:1;min-width:0}
}

/* O link para a outra área usa .btn .btn-outline-light como todo o resto do
   cabeçalho — não tem estilo próprio. Antes tinha, e por isso saía com outro
   recuo, outro peso e outro corpo de fonte, quebrando o alinhamento da fila. */

/* ===========================================================================
   TEMA MARCELO — vale só nesta página (body.area-marcelo). A página do
   Podemos não é tocada por nada daqui.
   ===========================================================================
   Papel de cada cor, decidido pelo contraste medido:

     #270f96 azul profundo  13,2:1 com branco -> a âncora. Início dos degradês,
                            botão de criar pedido, números em destaque.
     #2952c8 azul médio     6,7:1 com branco -> o tom de trabalho. Botões
                            comuns, links, bordas, fim dos degradês.
     #cd3b19 laranja-tijolo 5,0:1 com branco -> ACENTO, em dose pequena. Filete
                            do cabeçalho, selo da área, rascunho em andamento,
                            notificação não lida. Fica longe dos botões de
                            ação para não se confundir com o vermelho de
                            excluir/urgente, que continua sendo o --danger.
   =========================================================================== */
body.area-marcelo{
    --primary:#2952c8;
    --mar-azul-profundo:#270f96;
    --mar-azul-medio:#2952c8;
    --mar-laranja:#cd3b19;
    --mar-azul-lavado:#eef2fd;   /* azul bem diluído, p/ fundos suaves */
}

/* --- Faixas grandes: degradê dos dois azuis, com filete laranja embaixo --- */
body.area-marcelo .header{
    background:linear-gradient(135deg,#270f96 0%,#2952c8 100%);
    border-bottom:3px solid #cd3b19;
}
body.area-marcelo .login-screen{background:linear-gradient(135deg,#270f96 0%,#2952c8 100%)}

/* --- Barras de seção e cabeçalho da tabela: eram cinza-escuro, viram azul --- */
body.area-marcelo .file-list-header,
body.area-marcelo .completed-section h3,
body.area-marcelo .finalidade-summary h3,
body.area-marcelo .planilha-modal-content .modal-header,
body.area-marcelo #importarModal .modal-header{
    background:linear-gradient(135deg,#270f96 0%,#2952c8 100%);
}
body.area-marcelo .collapsible > h3:hover{background:linear-gradient(135deg,#1e0b75 0%,#2143a6 100%)}

/* --- Tabela: cabeçalho em azul lavado e listras discretas --- */
body.area-marcelo th{background:var(--mar-azul-lavado);color:#270f96;border-bottom:2px solid #2952c8}
body.area-marcelo tbody tr:nth-child(even){background:#f7f9fe}
body.area-marcelo tbody tr:hover{background:var(--mar-azul-lavado)}

/* --- Cartões: sombra azulada e um traço laranja no topo --- */
body.area-marcelo .file-list,
body.area-marcelo .stat-card{box-shadow:0 2px 10px rgba(41,82,200,.12)}
body.area-marcelo .stat-card{border-top:3px solid var(--mar-laranja);border-radius:10px}
body.area-marcelo .finalidade-summary-item .fs-count{color:#270f96}

/* --- Criar pedido no azul profundo: é a ação principal da tela --- */
body.area-marcelo .btn-new-pedido{background-color:#270f96;border-color:#270f96}
body.area-marcelo .btn-new-pedido:hover{background-color:#1e0b75;border-color:#1e0b75}
body.area-marcelo .btn-new-pedido:focus-visible{box-shadow:0 0 0 .25rem rgba(41,82,200,.45)}

/* --- Laranja: só nos destaques --- */
body.area-marcelo .area-cliente-rotulo{background:var(--mar-laranja);color:#fff}
body.area-marcelo .draft-card{background:#fdf1ee;border-color:var(--mar-laranja);border-left:4px solid var(--mar-laranja)}
body.area-marcelo .notif-item.nova{background:#fdf1ee;border-left-color:var(--mar-laranja);color:var(--dark)}

/* A bolinha de online continua verde: ali a cor tem significado (conectado),
   e trocá-la por laranja faria parecer alerta. */


/* ===========================================================================
   TEMA PODEMOS — vale só nesta página (body.area-podemos). A página do
   Marcelo não é tocada por nada daqui.
   ===========================================================================
   Papel de cada cor, decidido pelo contraste medido:

     #7139a1 roxo    7,5:1 com texto branco -> PREDOMINA. Cabeçalho, login,
                     barras de seção, botões principais, cabeçalho de tabela.
     #4e993a verde   3,5:1 com branco (baixo) -> entra como ACENTO: filete do
                     cabeçalho, bolinha de online, bordas. Onde vira fundo de
                     botão com letra branca, usa-se #3e7a2e (5,2:1), mesmo tom
                     escurecido só o necessário.
     #f9f347 amarelo 13,8:1 com texto ESCURO, 1,2:1 com branco -> nunca leva
                     letra branca. Fica nos DESTAQUES pontuais: selo da área,
                     rascunho em andamento, notificação não lida.
   =========================================================================== */
body.area-podemos{
    --primary:#7139a1;
    --success:#3e7a2e;          /* verde da marca, escurecido p/ texto branco */
    --pod-roxo-escuro:#54277a;
    --pod-roxo-claro:#8b4bc4;
    --pod-verde:#4e993a;
    --pod-amarelo:#f9f347;
    --pod-roxo-lavado:#f4eefa;  /* roxo bem diluído, p/ fundos suaves */
}

/* --- Faixas grandes: roxo com um filete verde embaixo --- */
body.area-podemos .header{
    background:linear-gradient(135deg,#54277a 0%,#7139a1 55%,#8b4bc4 100%);
    border-bottom:3px solid #4e993a;
}
body.area-podemos .login-screen{background:linear-gradient(135deg,#54277a 0%,#7139a1 100%)}

/* --- Barras de seção e cabeçalho da tabela: eram cinza-escuro, viram roxo --- */
body.area-podemos .file-list-header,
body.area-podemos .completed-section h3,
body.area-podemos .finalidade-summary h3,
body.area-podemos .planilha-modal-content .modal-header,
body.area-podemos #importarModal .modal-header{
    background:linear-gradient(135deg,#54277a 0%,#7139a1 100%);
}
body.area-podemos .collapsible > h3:hover{background:linear-gradient(135deg,#462066 0%,#5f2f89 100%)}

/* --- Tabela: cabeçalho em roxo lavado e listras discretas --- */
body.area-podemos th{background:var(--pod-roxo-lavado);color:#5a2d81;border-bottom:2px solid #7139a1}
body.area-podemos tbody tr:nth-child(even){background:#faf7fd}
body.area-podemos tbody tr:hover{background:var(--pod-roxo-lavado)}

/* --- Cartões: sombra levemente arroxeada e um traço verde no topo --- */
body.area-podemos .file-list,
body.area-podemos .stat-card{box-shadow:0 2px 10px rgba(113,57,161,.12)}
body.area-podemos .stat-card{border-top:3px solid var(--pod-verde);border-radius:10px}
body.area-podemos .finalidade-summary-item .fs-count{color:#7139a1}

/* --- Botão de novo pedido no verde do partido --- */
body.area-podemos .btn-new-pedido{background-color:#3e7a2e;border-color:#3e7a2e}
body.area-podemos .btn-new-pedido:hover{background-color:#356928;border-color:#356928}
body.area-podemos .btn-new-pedido:focus-visible{box-shadow:0 0 0 .25rem rgba(78,153,58,.45)}

/* --- Amarelo: só nos destaques, e sempre com letra escura --- */
body.area-podemos .area-cliente-rotulo{background:var(--pod-amarelo);color:#3d2352}
body.area-podemos .draft-card{background:#fefce8;border-color:var(--pod-amarelo);border-left:4px solid var(--pod-amarelo)}
body.area-podemos .notif-item.nova{background:#fefce8;border-left-color:var(--pod-amarelo);color:var(--dark)}

/* --- Verde como acento pontual --- */
body.area-podemos .status-online{background:var(--pod-verde)}
body.area-podemos .barra-online-ponto{background:var(--pod-verde)}

/* (O link para a outra área não tem mais regra própria de celular: como agora
   é um .btn comum, ele já encolhe junto com os demais no media query do fim
   do arquivo.) */

/* Indicador de conexão ao lado do "Bem-vindo" */
.welcome-line{display:flex;align-items:center;gap:.45rem}
.status-online{display:inline-block;width:9px;height:9px;border-radius:50%;background:#34a853;flex-shrink:0;animation:pulsoOnline 2.2s ease-out infinite}
#statusOnline.offline{background:#fbbc04;animation:none}
@keyframes pulsoOnline{
    0%{box-shadow:0 0 0 0 rgba(52,168,83,.65)}
    70%{box-shadow:0 0 0 7px rgba(52,168,83,0)}
    100%{box-shadow:0 0 0 0 rgba(52,168,83,0)}
}
@media (prefers-reduced-motion:reduce){.status-online{animation:none}}
/* Bolinha de presença na lista de usuários (admin) */
.usuario-info{display:flex;align-items:center;gap:.6rem}
.usuario-info .status-online{width:10px;height:10px}
/* Offline: cinza e sem pulso, pra diferenciar de relance de quem está online */
.usuario-info .status-online.offline{background:#bdc1c6;animation:none;box-shadow:none}
.usuarios-online-resumo{font-size:.8rem;color:var(--gray);padding:.5rem .75rem;margin:0}

/* Indicador de pessoas online, logo abaixo do cabeçalho, à direita */
/* Coluna direita do cabeçalho: botões em cima, contagem de online logo abaixo.
   Alinhar tudo ao fim (flex-end) é o que encosta a barra sob os botões — não
   há cálculo de posição, ela herda a largura do próprio grupo. */
.header-acoes{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem}
.header-botoes{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* Dentro do cabeçalho o fundo é escuro, então o texto é branco esmaecido em
   vez do cinza de antes (que era para fundo claro e aqui sumiria). */
.barra-online{display:flex;align-items:center;justify-content:flex-end;gap:.4rem;font-size:.75rem;color:rgba(255,255,255,.75);font-style:italic;white-space:nowrap}
/* Bolinha simples, na mesma cor do texto (currentColor), sem o pulso do
   indicador de conexão */
.barra-online-ponto{display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}

/* Container */
.container{max-width:1200px;margin:0 auto;padding:1.5rem;display:flex;flex-direction:column}.container > .checagem-area{order:0}.container > .user-orders-only{order:1}.container > .completed-section{order:6}.container > .grafica-section{order:7}.container > .printed-section{order:8}.container > .draft-card{order:2}.container > .btn-new-pedido{order:2;align-self:flex-start;margin-bottom:1.5rem}.container > .stats{order:4}.container > .finalidade-summary{order:4}.container > .file-list{order:5}
.draft-card{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;background:#e6f4ea;border:1px solid var(--success);border-radius:8px;padding:1rem 1.25rem;margin-bottom:1.5rem}
.draft-card-info{display:flex;flex-direction:column;gap:.15rem}
.draft-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--success)}
.draft-title{font-size:1.05rem;font-weight:600;color:var(--dark)}
.draft-meta{font-size:.8rem;color:var(--gray)}

.producao-status{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.4rem}
.producao-btn{padding:.3rem .6rem;border-radius:12px;border:1px solid var(--border);background:#fff;font-size:.75rem;cursor:pointer;color:var(--gray);transition:all .2s}
.producao-btn:hover{background:var(--light)}
.producao-btn.active[data-status="preparacao"]{background:#fef7e0;color:#a05a00;border-color:#fbbc04}
.producao-btn.active[data-status="recebido"]{background:#f3e8fd;color:#7627bb;border-color:#9334e6}
.producao-btn.active[data-status="impressao"]{background:#e8f0fe;color:var(--primary);border-color:var(--primary)}
.producao-btn.active[data-status="pronto"]{background:#e6f4ea;color:var(--success);border-color:var(--success)}
.producao-badge{display:inline-block;margin-top:.4rem;padding:.3rem .6rem;border-radius:12px;font-size:.75rem;font-weight:600}
/* Urgente: marcador independente do status, fixa o pedido no topo da gráfica */
.producao-btn.btn-urgente{border-color:#f5b7b1}
.producao-btn.btn-urgente.active{background:#fdecea;color:var(--danger);border-color:var(--danger);font-weight:600}
.urgente-badge{background:#fdecea;color:var(--danger)}
.completed-item.urgente{border-left:4px solid var(--danger);background:#fffafa}
.completed-item.urgente .title{color:var(--danger)}

.producao-badge[data-status="preparacao"]{background:#fef7e0;color:#a05a00}
.producao-badge[data-status="recebido"]{background:#f3e8fd;color:#7627bb}
.producao-badge[data-status="impressao"]{background:#e8f0fe;color:var(--primary)}
.producao-badge[data-status="pronto"]{background:#e6f4ea;color:var(--success)}
/* Botão "Novo Pedido" no padrão Bootstrap 5 (btn btn-success): paleta,
   arredondamento (.375rem), transições e anel de foco do próprio Bootstrap. */
.btn-new-pedido{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:1rem;line-height:1.5;font-weight:400;text-align:center;vertical-align:middle;color:#fff;background-color:#198754;border:1px solid #198754;border-radius:.375rem;cursor:pointer;user-select:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}
.btn-new-pedido:hover{background-color:#157347;border-color:#146c43}
.btn-new-pedido:focus-visible{outline:0;box-shadow:0 0 0 .25rem rgba(60,153,110,.5)}
.btn-new-pedido:active{background-color:#146c43;border-color:#13653f}
.btn-new-pedido .bi{margin-right:0}

/* Área exclusiva de consulta para usuários */
.user-orders-only{display:none;background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.08);overflow:hidden;margin-bottom:1.5rem}
.user-orders-only h2{background:var(--dark);color:#fff;padding:1rem 1.5rem;font-size:1rem}
.user-order-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.5rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.user-order-row:last-child{border-bottom:none}
.user-order-title{font-weight:600;color:var(--dark)}
.user-order-meta{display:block;color:var(--gray);font-size:.8rem;margin-top:.25rem}
.user-orders-empty{padding:3rem;text-align:center;color:var(--gray)}

/* Upload Zone */
.upload-zone{border:2px dashed var(--border);border-radius:12px;padding:3rem;text-align:center;background:#fff;cursor:pointer;transition:all .3s}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--primary);background:rgba(26,115,232,.05)}
.upload-zone.dragover{transform:scale(1.01)}
.upload-zone input{display:none}
.upload-icon{font-size:3rem;margin-bottom:1rem}
.upload-zone h3{color:var(--dark);margin-bottom:.5rem}
.upload-zone p{color:var(--gray);font-size:.875rem}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin:1.5rem 0}
.stat-card{background:#fff;border-radius:8px;padding:1rem;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.stat-card .number{font-size:2rem;font-weight:700;color:var(--primary)}
.stat-card .label{color:var(--gray);font-size:.8rem;text-transform:uppercase;letter-spacing:.5px}

/* File List */
.file-list{background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.08);overflow:hidden}
.file-list-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:var(--dark);color:#fff;flex-wrap:wrap;gap:1rem}
.file-list-header h2{font-size:1rem;font-weight:600}
/* ---------------------------------------------------------------------------
   Botões — padrão visual do Bootstrap 5, escrito aqui em vez de importado
   ---------------------------------------------------------------------------
   Por que não o CSS do Bootstrap via CDN: a CSP deste site tem
   style-src 'self', então uma folha de estilo externa seria BLOQUEADA pelo
   navegador. E baixar o framework inteiro traria o reset e o grid dele por
   cima do layout que já existe. Então reproduzimos só a linguagem dos
   botões — as medidas, o raio, a transição e o anel de foco são os mesmos
   do Bootstrap 5; as cores continuam vindo das variáveis do projeto, para
   os temas do Marcelo e do Podemos seguirem funcionando.
   --------------------------------------------------------------------------- */
/* A fonte fica em .875rem, e não no 1rem padrão do Bootstrap: as listas de
   pedidos têm vários botões lado a lado, e subir o corpo do texto faria a
   linha quebrar. Adotamos a geometria (raio, borda, anel de foco) e o
   comportamento; a densidade continua a que já estava ajustada. */
.btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:.5rem 1rem;
    font-size:.875rem;font-weight:500;line-height:1.5;
    text-align:center;vertical-align:middle;white-space:nowrap;
    border:1px solid transparent;border-radius:.375rem;
    cursor:pointer;user-select:none;text-decoration:none;
    transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn:focus-visible{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}
.btn:disabled,.btn.disabled{opacity:.65;pointer-events:none}
.btn-sm{padding:.25rem .5rem;font-size:.875rem;border-radius:.25rem}

/* Variantes sólidas. color-mix escurece o próprio tom no hover, então uma
   troca de --primary (tema do Podemos) repinta o hover junto, sem eu ter de
   lembrar de atualizar um segundo hex à mão. */
.btn-primary{background-color:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background-color:color-mix(in srgb,var(--primary) 85%,#000);border-color:color-mix(in srgb,var(--primary) 80%,#000)}
.btn-primary:focus-visible{box-shadow:0 0 0 .25rem color-mix(in srgb,var(--primary) 40%,transparent)}
.btn-success{background-color:var(--success);border-color:var(--success);color:#fff}
.btn-success:hover{background-color:color-mix(in srgb,var(--success) 85%,#000);border-color:color-mix(in srgb,var(--success) 80%,#000)}
.btn-success:focus-visible{box-shadow:0 0 0 .25rem color-mix(in srgb,var(--success) 40%,transparent)}
.btn-danger{background-color:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger:hover{background-color:color-mix(in srgb,var(--danger) 85%,#000);border-color:color-mix(in srgb,var(--danger) 80%,#000)}
.btn-danger:focus-visible{box-shadow:0 0 0 .25rem color-mix(in srgb,var(--danger) 40%,transparent)}
/* Amarelo leva texto escuro: com letra branca o contraste não passa. */
.btn-warning{background-color:var(--warning);border-color:var(--warning);color:#000}
.btn-warning:hover{background-color:color-mix(in srgb,var(--warning) 88%,#000);border-color:color-mix(in srgb,var(--warning) 85%,#000)}
.btn-warning:focus-visible{box-shadow:0 0 0 .25rem color-mix(in srgb,var(--warning) 40%,transparent)}

/* Contornado, para ações secundárias (o "btn-outline-secondary" do Bootstrap). */
.btn-outline{background-color:transparent;border-color:var(--border);color:var(--dark)}
.btn-outline:hover{background-color:var(--light);border-color:var(--gray)}
.btn-outline:focus-visible{box-shadow:0 0 0 .25rem rgba(108,117,125,.3)}

/* Contornado claro, para uso sobre o cabeçalho colorido — equivale ao
   "btn-outline-light". Substitui os style="..." que estavam soltos no HTML. */
.btn-outline-light{background-color:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35);color:#fff}
.btn-outline-light:hover{background-color:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6);color:#fff}
.btn-outline-light:focus-visible{box-shadow:0 0 0 .25rem rgba(255,255,255,.3)}

/* Table */
.table-wrapper{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:1rem 1.5rem;text-align:left;border-bottom:1px solid var(--border)}
th{background:var(--light);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;color:var(--gray)}
tr:hover{background:rgba(26,115,232,.03)}
tr:last-child td{border-bottom:none}

/* File Type Badge */
.file-type{font-weight:600;font-size:.75rem;padding:.25rem .6rem;border-radius:4px;display:inline-block;text-transform:uppercase}
.type-pdf{background:#fce8e6;color:#c5221f}
.type-ai,.type-eps{background:#e8f0fe;color:#1a73e8}
.type-psd,.type-png,.type-jpg{background:#e6f4ea;color:#34a853}
.type-doc,.type-docx{background:#fef7e0;color:#f9ab00}
.type-other{background:var(--light);color:var(--gray)}

/* Purpose Select */
.purpose-select{width:100%;padding:.5rem;border:1px solid var(--border);border-radius:6px;font-size:.875rem;background:#fff;cursor:pointer}
.purpose-select:focus{outline:none;border-color:var(--primary)}

/* Quantity Input */
.qty-input{width:70px;padding:.4rem;border:1px solid var(--border);border-radius:4px;text-align:center;font-size:.875rem}
.qty-input:focus{outline:none;border-color:var(--primary)}

/* Status Badge */
.status{font-size:.75rem;padding:.25rem .6rem;border-radius:4px;display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}

/* Etapa de produção do pedido — as mesmas quatro dos botões da gráfica.
   Cada uma com sua cor, para dar pra ler a fila de relance: cinza ainda não
   saiu do lugar, azul chegou, laranja está na máquina, verde acabou. */
.status-producao-preparacao{background:#f1f3f4;color:#5f6368}
.status-producao-recebido{background:#e8f0fe;color:#1a73e8}
.status-producao-impressao{background:#fef7e0;color:#b06000}
.status-producao-pronto{background:#e6f4ea;color:#1e7e34}

/* O cartão de status guarda um selo, não um número: o corpo de 2rem do
   .number esmagaria o texto, então aqui ele volta ao tamanho normal. */
.stat-card .number#statusProducaoCard{font-size:1rem;display:flex;justify-content:center;align-items:center;min-height:2rem}

/* Actions */
.actions{display:flex;gap:.5rem}
/* Faixa de ações que encerram o pedido, no fim da janela (depois do
   comentário). Separada por um filete para deixar claro que é o passo final,
   e não mais uma ação da lista de arquivos. Cancelar vem antes de Finalizar:
   a ação destrutiva fica longe da borda, onde o dedo cai por último. */
.pedido-acoes-final{display:flex;justify-content:flex-end;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border)}
@media(max-width:768px){
    /* No celular ocupam a linha inteira, uma ao lado da outra. */
    .pedido-acoes-final .btn{flex:1 1 0;min-width:0}
}

/* Botão só de ícone, no mesmo idioma dos demais (raio e anel de foco iguais).
   A cor vem de --primary, que muda com o tema da página — então estes botões
   ficam azuis no Marcelo e roxos no Podemos sem regra duplicada.
   font-size define o tamanho do ícone: .bi usa 1em. */
.btn-icon{width:38px;height:38px;font-size:1.05rem;border-radius:.375rem;border:1px solid color-mix(in srgb,var(--primary) 28%,var(--border));background:#fff;color:var(--primary);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}
.btn-icon:hover{background:color-mix(in srgb,var(--primary) 10%,#fff);border-color:var(--primary)}
.btn-icon .bi{margin-right:0}
.btn-icon:focus-visible{outline:0;box-shadow:0 0 0 .25rem color-mix(in srgb,var(--primary) 30%,transparent)}
.btn-icon.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 28%,var(--border))}
.btn-icon.danger:hover{background:#fce8e6;border-color:var(--danger);color:var(--danger)}
.btn-icon.danger:focus-visible{box-shadow:0 0 0 .25rem color-mix(in srgb,var(--danger) 30%,transparent)}

/* Empty State */
.empty-state{padding:4rem;text-align:center;color:var(--gray)}
.empty-state svg{width:80px;height:80px;opacity:.5;margin-bottom:1rem}

/* Modal */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;align-items:center;justify-content:center}
.modal.active{display:flex}
.modal-content{background:#fff;border-radius:12px;padding:2rem;max-width:500px;width:90%;max-height:90vh;overflow-y:auto}
.modal-content-wide{max-width:960px}
.modal-content-xl{max-width:1280px;width:95vw;max-height:95vh}
.modal-divider{margin:1.5rem 0;border:none;border-top:1px solid var(--border)}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.modal-header h3{font-size:1.25rem}
.modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--gray)}
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-weight:500;margin-bottom:.5rem;font-size:.875rem}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.75rem;border:1px solid var(--border);border-radius:6px;font-size:.9rem}
.form-group input:read-only{background:var(--light);color:var(--gray);cursor:default}
/* Campo Cidade: input com autocomplete + lista suspensa ao lado */
/* Busca de pedidos */
/* Botão só com ícone no cabeçalho: mantém o padding de .btn (mesma altura
   dos outros) e só remove a margem que separaria ícone de texto. */
/* Botão só de ícone no cabeçalho: quadrado e do mesmo tamanho dos que têm
   texto, SEM depender do que está dentro dele.

   Por que medida fixa e não recuo: o .btn é inline-flex, então a altura vem do
   filho. A lupa tem o <svg> solto (0.875rem de altura); o sino tem o <svg>
   dentro de um <span> — e um <span> cria caixa de linha, que com line-height
   1.5 dá 1.3125rem. Mesmo CSS, botões de alturas diferentes. Cravando largura
   e altura, os dois ficam idênticos independentemente da marcação interna.

   A conta bate com a altura de um botão com texto: linha (.875rem × 1.5) +
   recuo (.5rem × 2) + borda (1px × 2). */
.btn-icone-header{
    width:calc(.875rem * 1.5 + 1rem + 2px);
    height:calc(.875rem * 1.5 + 1rem + 2px);
    padding:0;
    justify-content:center;
    flex-shrink:0;
}
.btn-icone-header .bi{margin-right:0}


/* Janela de busca */
.busca-modal-content{display:flex;flex-direction:column;max-height:80vh}
.busca-resultados{overflow-y:auto;margin-top:.5rem;display:flex;flex-direction:column;gap:.4rem}
.busca-item{display:flex;flex-direction:column;gap:.2rem;width:100%;text-align:left;padding:.7rem .85rem;background:#fff;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:background .15s,border-color .15s}
.busca-item:hover{background:#e8f0fe;border-color:var(--primary)}
.busca-item-titulo{font-weight:600;font-size:.9rem;color:var(--dark)}
.busca-item-meta{font-size:.75rem;color:var(--gray)}

.busca-campo{position:relative;flex:1;min-width:260px;display:flex;align-items:center}
.busca-icone{position:absolute;left:1.05rem;width:18px;height:18px;color:#9aa0a6;pointer-events:none;transition:color .2s}
.busca-campo input{width:100%;padding:.85rem 2.9rem .85rem 3rem;border:1px solid var(--border);border-radius:999px;font-size:.95rem;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05);transition:border-color .2s,box-shadow .2s}
.busca-campo input::placeholder{color:#9aa0a6}
.busca-campo input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(26,115,232,.12),0 4px 12px rgba(0,0,0,.06)}
.busca-campo:focus-within .busca-icone{color:var(--primary)}
/* Some o × nativo do Chrome: o botão de limpar é o nosso, à direita */
.busca-campo input::-webkit-search-cancel-button{display:none}
.busca-limpar{position:absolute;right:.65rem;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:#e8eaed;color:var(--gray);font-size:1.05rem;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.busca-limpar:hover{background:#dadce0;color:var(--dark)}
.busca-resultado{font-size:.78rem;font-weight:500;color:var(--gray);background:#fff;border:1px solid var(--border);padding:.35rem .8rem;border-radius:999px;white-space:nowrap}
.busca-vazia{display:flex;flex-direction:column;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--border);border-radius:12px;padding:2rem 1.5rem;text-align:center;color:var(--gray);font-size:.9rem;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.busca-vazia .icone{font-size:1.75rem;opacity:.55}
.busca-vazia strong{color:var(--dark);font-weight:600}

/* Histórico de CNPJ: chips clicáveis com × pra remover */
.cnpj-historico{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.cnpj-chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--light);border:1px solid var(--border);border-radius:14px;padding:.25rem .3rem .25rem .6rem;font-size:.78rem}
.cnpj-chip .usar{background:none;border:none;cursor:pointer;font:inherit;color:var(--dark);padding:0}
.cnpj-chip .usar:hover{color:var(--primary);text-decoration:underline}
.cnpj-chip .remover{background:none;border:none;cursor:pointer;color:var(--gray);font-size:.9rem;line-height:1;padding:0 .25rem;border-radius:50%}
.cnpj-chip .remover:hover{color:var(--danger);background:rgba(234,67,53,.12)}
.cnpj-historico-vazio{font-size:.75rem;color:var(--gray);font-style:italic}

/* Comentário do pedido, na área da tabela */
.comentario-pedido{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border)}
.comentario-pedido label{display:block;font-weight:600;margin-bottom:.5rem;font-size:.9rem}
.comentario-pedido textarea{width:100%;padding:.75rem;border:1px solid var(--border);border-radius:6px;font-size:.9rem;resize:vertical;min-height:80px}
.comentario-acoes{display:flex;align-items:center;gap:.75rem;margin-top:.5rem}
.comentario-dica{font-size:.78rem;color:var(--gray);font-style:italic}
.comentario-contador{font-size:.75rem;color:var(--gray);margin-left:auto}

/* A lista suspensa de cidades saiu — o autocomplete da caixa de digitar já
   resolve. Sem o segundo elemento, o campo não precisa mais ser flex. */
.cidade-campo{position:relative}
.cidade-input-wrap{position:relative;flex:1;min-width:0}
.cidade-campo input{width:100%;min-width:0}
/* Sugestões: só enquanto digita, no máximo 6 — por isso a altura limitada */
.cidade-sugestoes{position:absolute;top:calc(100% + 2px);left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.18);z-index:1200;overflow:hidden}
.cidade-sugestao{padding:.55rem .75rem;font-size:.88rem;cursor:pointer}
.cidade-sugestao:hover,.cidade-sugestao.ativa{background:#e8f0fe;color:var(--primary)}
.form-group textarea{resize:vertical;min-height:80px}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary)}
.modal-footer{display:flex;gap:1rem;justify-content:flex-end;margin-top:1.5rem}

/* Toast */
.toast{position:fixed;bottom:2rem;right:2rem;background:var(--dark);color:#fff;padding:1rem 1.5rem;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.2);transform:translateY(100px);opacity:0;transition:all .3s;z-index:1001}
.toast.show{transform:translateY(0);opacity:1}
.toast.success{background:var(--success)}
.toast.error{background:var(--danger)}

/* File Preview Tooltip */
.file-preview-tooltip{position:fixed;background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.3);padding:1rem;width:380px;height:520px;z-index:1002;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;pointer-events:none;overflow:hidden;display:flex;flex-direction:column}
.file-preview-tooltip.show{opacity:1;visibility:visible}
.file-preview-tooltip .preview-header{background:var(--primary);color:#fff;padding:.5rem .75rem;border-radius:8px 8px 0 0;margin:-1rem -1rem .75rem -1rem;display:flex;align-items:center;gap:.5rem}
.file-preview-tooltip .preview-header span{font-size:.7rem;font-weight:600;text-transform:uppercase}
.file-preview-tooltip .preview-pdf-container{flex:1;overflow:hidden;border-radius:6px;border:1px solid var(--border)}
.file-preview-tooltip iframe{width:100%;height:100%;border:none}
.file-preview-tooltip .preview-footer{text-align:center;padding:.5rem;font-size:.75rem;color:var(--gray);margin-top:.5rem}
.file-preview-tooltip .preview-footer strong{display:block;color:var(--dark);margin-bottom:.25rem}

/* Pagination */
.pagination{display:flex;justify-content:center;align-items:center;gap:.5rem;padding:1rem;background:var(--light);border-top:1px solid var(--border)}
.pagination button{background:#fff;border:1px solid var(--border);padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-size:.875rem;transition:all .2s}
.pagination button:hover:not(:disabled){background:var(--primary);color:#fff;border-color:var(--primary)}
.pagination button:disabled{opacity:.5;cursor:not-allowed}
.pagination .page-info{font-size:.875rem;color:var(--gray);padding:0 .5rem}

/* Completed Pedidos Section */
.completed-section{margin-top:0;margin-bottom:1.5rem;padding-top:0;border-top:0}.completed-section h3{background:var(--dark);color:#fff;padding:1rem 1.5rem;border-radius:8px 8px 0 0;margin-bottom:0}.completed-section .completed-list{background:transparent}
.finalidade-summary{margin-bottom:1rem}
/* Cabeçalho compacto: é um resumo, não o conteúdo principal da tela */
.finalidade-summary h3{display:flex;align-items:center;gap:.5rem;background:var(--dark);color:#fff;padding:.55rem 1rem;border-radius:8px 8px 0 0;margin-bottom:0;font-size:.85rem;cursor:pointer;user-select:none}
.finalidade-summary h3:hover{background:#2c2e33}
.finalidade-summary.recolhido h3{border-radius:8px}

/* Corpo com altura animada — é o que dá a transição suave ao abrir/fechar
   (display:none não anima). */
.finalidade-summary-corpo{max-height:260px;overflow:hidden;transition:max-height .3s ease}
.finalidade-summary.recolhido .finalidade-summary-corpo{max-height:0}

/* Desktop: grade compacta, ocupando 1 ou 2 linhas */
.finalidade-summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:0 0 8px 8px;overflow:hidden}
.finalidade-summary-item{background:#fff;padding:10px 12px}
.finalidade-summary-item .fs-label{font-size:11px;font-weight:600;color:var(--gray);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.finalidade-summary-item .fs-count{font-size:18px;font-weight:700;color:var(--dark);line-height:1.25}
.finalidade-summary-item .fs-tiragem{font-size:11px;font-weight:500;color:var(--primary);line-height:1.3;white-space:nowrap}
.completed-section h3{color:#fff;margin-bottom:1rem;font-size:1rem}
.completed-list{display:flex;flex-direction:column;gap:.5rem}
.collapsible > h3{cursor:pointer;user-select:none;display:flex;align-items:center;gap:.5rem}
.collapsible > h3:hover{background:#2c2e33}
.collapsible.collapsed > .completed-list{display:none}
.collapsible.collapsed > h3{border-radius:8px}
.section-toggle-icon{display:inline-block;transition:transform .2s;font-size:.8rem}
.collapsible:not(.collapsed) > h3 .section-toggle-icon,
.finalidade-summary:not(.recolhido) > h3 .section-toggle-icon{transform:rotate(90deg)}
.section-count{margin-left:auto;background:rgba(255,255,255,.15);padding:.15rem .6rem;border-radius:12px;font-size:.8rem;font-weight:600}
/* Sino de notificações */
/* inline-flex (e não inline-block): o embrulho precisa acompanhar a altura da
   fila de botões, senão o sino desalinha dos vizinhos. position:relative é o
   que ancora o selo de não lidas. */
.notif-wrapper{position:relative;display:inline-flex}
.notif-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger);color:#fff;font-size:.7rem;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.notif-panel{position:absolute;top:calc(100% + .5rem);right:0;width:320px;max-width:calc(100vw - 2rem);background:#fff;color:var(--dark);border:1px solid var(--border);border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.25);z-index:1100;overflow:hidden}
.notif-panel-header{display:flex;justify-content:space-between;align-items:center;padding:.6rem .9rem;border-bottom:1px solid var(--border);font-weight:600;font-size:.85rem}
.notif-limpar{background:none;border:none;color:var(--primary);cursor:pointer;font-size:.75rem;padding:0}
.notif-limpar:hover{text-decoration:underline}
/* 5 itens visíveis; o resto rola dentro do painel */
.notif-list{max-height:300px;overflow-y:auto}
.notif-item{position:relative;display:flex;flex-direction:column;gap:.15rem;padding:.6rem .9rem .6rem 1.6rem;border-bottom:1px solid var(--border);font-size:.82rem;cursor:pointer;transition:background .15s}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--light)}
/* LIDA: texto apagado, sem marcação — fica claro que já foi vista */
.notif-item{color:var(--gray)}
.notif-item .quando{color:#9aa0a6;font-size:.72rem}
/* NÃO LIDA: fundo azul, barra lateral, texto escuro em negrito e um ponto */
.notif-item.nova{background:#e8f0fe;color:var(--dark);font-weight:600;border-left:3px solid var(--primary);padding-left:calc(1.6rem - 3px)}
.notif-item.nova:hover{background:#d7e6fd}
.notif-item.nova .quando{color:var(--primary);font-weight:500}
.notif-item.nova::before{content:'';position:absolute;left:.65rem;top:.95rem;width:7px;height:7px;border-radius:50%;background:var(--primary)}
.notif-vazio{padding:1.2rem .9rem;text-align:center;color:var(--gray);font-size:.82rem}

@keyframes piscarSecao{0%,100%{box-shadow:0 0 0 0 rgba(52,168,83,0)}50%{box-shadow:0 0 0 5px rgba(52,168,83,.55)}}
.secao-piscando{border-radius:8px;animation:piscarSecao 1s ease-in-out 3}
@media (prefers-reduced-motion:reduce){.secao-piscando{animation:none;box-shadow:0 0 0 4px rgba(52,168,83,.55)}}
.completed-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#fff;border-radius:8px;border:1px solid var(--border)}
.completed-item .info{display:flex;flex-direction:column;gap:.25rem}
.completed-item .title{font-weight:600}
.completed-item .meta{font-size:.75rem;color:var(--gray)}
.completed-item .actions{display:flex;gap:.5rem}
body.user-readonly .user-orders-only .btn-export,
body.user-readonly .user-orders-only .btn-delete,
body.user-readonly .completed-section .btn-export,
body.user-readonly .completed-section .btn-delete{display:none !important}

/* Responsive */
@media(max-width:768px){
    .header{padding:1rem}
    .container{padding:1rem}
    .upload-zone{padding:2rem 1rem}
    th,td{padding:.75rem;display:block;width:100%}
    th{display:none}
    td:before{content:attr(data-label);font-weight:600;font-size:.75rem;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:.25rem}
    /* A tabela de "Revisar Pedido" é montada com estilo embutido, incluindo
       text-align:center nas colunas numéricas. Empilhada no celular, aquele
       centro deixa o valor solto longe do rótulo — daí o !important, que é o
       único jeito de vencer um style="" no próprio elemento. */
    #reviewContent td{text-align:left !important}
    #reviewContent tr{display:block;border-bottom:2px solid var(--border);padding:.5rem 0}
    #reviewContent td{padding:.35rem .75rem !important}
    .actions{justify-content:flex-end}
    .file-preview-tooltip{width:320px;height:420px}
    .draft-card{flex-direction:column;align-items:stretch}

    /* Cabeçalho: título menor e botões numa linha própria, sem espremer */
    .header h1{font-size:1.15rem}
    .header p{font-size:.8rem}
    .header > div{align-items:flex-start}

    /* Botões compactos no celular: fonte e espaçamento menores, pra caberem
       mais de um por linha sem virar bloco gigante. */
    .btn{padding:.45rem .7rem;font-size:.78rem}
    /* Acompanha o .btn menor acima, pela mesma conta: linha (.78rem × 1.5) +
       recuo (.45rem × 2) + borda. Sem isto o botão de ícone continuaria com a
       medida do desktop e ficaria maior que os vizinhos no celular. */
    .btn-icone-header{width:calc(.78rem * 1.5 + .9rem + 2px);height:calc(.78rem * 1.5 + .9rem + 2px)}
    .btn-new-pedido{padding:.5rem .9rem;font-size:.8rem}

    /* Cartão do pedido: informação em cima, botões embaixo em linha que
       quebra — compactos, não ocupando a largura toda cada um. */
    .completed-item{flex-direction:column;align-items:stretch;gap:.6rem;padding:.85rem}
    .completed-item .actions{display:flex;flex-wrap:wrap;gap:.35rem}
    .completed-item .actions .btn{width:auto;padding:.35rem .6rem;font-size:.72rem}
    /* No celular os botões ficam um pouco menores, mas continuam quadrados:
       padding num elemento com largura fixa não encolhe nada. */
    .completed-item .actions .btn-icon{width:34px;height:34px;padding:0;font-size:1rem}
    .completed-item .title{font-size:.9rem;word-break:break-word}
    .completed-item .meta{font-size:.7rem;line-height:1.5}

    /* Chips de status: rolam na horizontal em vez de empilhar um por linha */
    .producao-status{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.35rem;-webkit-overflow-scrolling:touch}
    .producao-btn{flex:0 0 auto;white-space:nowrap;padding:.25rem .5rem;font-size:.7rem}

    /* Resumo por Item no celular: carrossel horizontal com encaixe (snap),
       em vez de 10+ cards empilhados ocupando a tela toda. Altura do bloco
       fica em torno de 115px, dentro do limite de 140px. */
    .finalidade-summary-corpo{position:relative;max-height:150px}
    /* Sombra à direita sinalizando que há mais conteúdo pro lado */
    .finalidade-summary-corpo::after{content:'';position:absolute;top:0;right:0;bottom:6px;width:28px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95));border-radius:0 0 8px 0}
    .finalidade-summary.recolhido .finalidade-summary-corpo::after{display:none}
    .finalidade-summary-grid{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:1px}
    .finalidade-summary-item{flex:0 0 auto;min-width:140px;scroll-snap-align:start}
    .finalidade-summary-item .fs-label{white-space:normal}
    .finalidade-summary-grid::-webkit-scrollbar{height:5px}
    .finalidade-summary-grid::-webkit-scrollbar-thumb{background:#c8ccd0;border-radius:3px}

    /* Resumo por item e estatísticas: 2 colunas em vez de espremer 4 */
    .stats{grid-template-columns:repeat(2,1fr);gap:.75rem}

    /* Modais ocupam a tela quase toda: sobra pouco espaço no celular */
    .modal{align-items:flex-end}
    .modal-content{width:100%;max-width:100%;max-height:92vh;border-radius:14px 14px 0 0;padding:1.25rem}
    .modal-content-wide,.modal-content-xl{max-width:100%;width:100%}
    .modal-footer{flex-direction:column-reverse;gap:.5rem}
    .modal-footer .btn{width:100%}

    /* Barra de ações da lista de arquivos: 2 por linha, compactos */
    .file-list-header{padding:.85rem 1rem}
    .file-list-header h2{font-size:.9rem}
    .file-list-header > div{width:100%;display:grid !important;grid-template-columns:repeat(2,1fr);gap:.4rem}
    .file-list-header .btn{width:100%;padding:.5rem .4rem;font-size:.75rem}


    /* Painel de notificações não cabe em 320px de largura fixa */
    .notif-panel{width:calc(100vw - 2rem);right:auto;left:50%;transform:translateX(-50%)}

    .cidade-campo{flex-direction:column}
}

/* Telas bem estreitas (celulares menores) */
@media(max-width:400px){
    .stats{grid-template-columns:1fr}
    .header h1{font-size:1.05rem}
    .completed-item .actions .btn{padding:.3rem .5rem;font-size:.7rem}
    .file-list-header > div{grid-template-columns:1fr}
}