@font-face {
    font-family: "Montserrat Alternates";
    src: url("fonts/MontserratAlternates-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Montserrat Alternates";
    src: url("fonts/MontserratAlternates-SemiBold.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Montserrat Alternates";
    src: url("fonts/MontserratAlternates-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
}

html,
body,
button,
input,
textarea,
select {
    font-family: "Montserrat Alternates", sans-serif;
}

/* =========================================================
   PALETA DE CORES DO SISTEMA
   Somente estas cores devem ser usadas no projeto.
   Para mudar o visual, altere apenas os valores abaixo.
   ========================================================= */
:root {
  /* PRETO */
  --preto: #111111;
  --preto-2: #2b2b2b;

  /* BRANCO */
  --branco: #ffffff;
  --branco-2: #f7f5ef;

  /* BEGE */
  --bege: #e9dfcf;
  --bege-2: #d8c7ad;

  /* AMARELO OURO */
  --ouro: #d4a017;
  --ouro-2: #b8860b;

  /* AZUL MARINHO */
  --marinho: #0b1f3a;
  --marinho-2: #163a5c;

  /* VERDE — PEDIDOS FINALIZADOS / ENVIADOS PARA CTP */
  --verde: #d9f0dc;
  --verde-2: #9bc7a1;

  /* TRANSPARÊNCIAS — somente para sombras/overlay */
  --preto-05: rgba(17,17,17,.05);
  --preto-10: rgba(17,17,17,.10);
  --preto-30: rgba(17,17,17,.30);
  --marinho-65: rgba(11,31,58,.65);
}

/* =========================================================
   ESTILO PRINCIPAL
   ========================================================= */
*{box-sizing:border-box; }
body{font-family: Arial, sans-serif; padding:20px; margin:0; background:var(--branco-2); font:14px Arial; color:var(--marinho); }
header{background:var(--marinho); color:var(--branco); padding:14px 20px; display:flex; justify-content:space-between; align-items:center; }
header a{color:var(--branco); text-decoration:none; margin-left:15px; }
.layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;max-width:1300px;margin:20px auto;padding:0 14px}
.box{background:var(--branco);border-radius:12px;padding:20px;margin-bottom:16px}
.titletop{font-size: 25px; }
h1{color:var(--marinho); font-size:28px; margin:0; }
.sub{color:var(--marinho-2);margin-top:0}
h2{font-size:15px;border-bottom:1px solid var(--bege-2);padding-bottom:8px;margin-top:20px;color:var(--marinho);display:flex;justify-content:space-between;align-items:center}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.f{display:flex;flex-direction:column;gap:5px}
.full{grid-column:1/-1}
label{font-weight:bold;font-size:13px}
input,select,textarea{width:100%;padding:11px;border:1px solid var(--bege-2);border-radius:7px;font:inherit;background:var(--branco);text-transform:uppercase}
textarea{min-height:38px;resize:vertical}
.file{padding:9px;background:var(--branco)}
.preview{display:none;margin-top:10px}
.preview img{max-width:240px;max-height:180px;border-radius:8px;border:1px solid var(--bege-2)}
.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;flex-wrap:wrap}
button{border:0;border-radius:8px;padding:11px 16px;font-weight:bold;cursor:pointer}
.primary{background:var(--marinho);color:var(--branco)}
.secondary{background:var(--bege);color:var(--marinho)}
.danger{background:var(--ouro);color:var(--branco);margin-right:auto}
.btn-add{background:var(--bege);color:var(--marinho-2);border:1px solid var(--marinho-2);margin-top:10px;width:100%}
.btn-remove{background:var(--bege); color:var(--marinho); border:1px solid var(--ouro-2); margin-top:auto; width:28px !important; min-width:28px !important; height:28px !important; padding:0 !important; display:inline-flex !important; align-items:center; justify-content:center; font-size:13px !important; line-height:1; }
.btn-relatorio{background:var(--marinho);color:var(--branco);padding:7px 12px;font-size:12px;border-radius:6px;display:inline-flex;align-items:center;gap:5px}
.btn-relatorio:hover{background:var(--marinho-2)}
.btn-novo-pedido{background:var(--ouro);color:var(--branco);font-size:15px;padding:12px 20px;box-shadow:0 2px 4px var(--preto-10)}
.btn-novo-pedido:hover{background:var(--ouro-2)}
button:disabled{opacity:.5; cursor:wait; }
.msg{display:none;padding:10px;border-radius:8px;margin-bottom:12px}
.ok{display:block;background:var(--bege);color:var(--ouro-2)}
.err{display:block;background:var(--bege);color:var(--marinho)}



.pedido.drag-over-top {border-top: 3px solid var(--ouro) !important; }
.pedido.drag-over-bottom {border-bottom: 3px solid var(--ouro) !important; }
.pedido.arrastavel {user-select: none; cursor:grab; }


/* Barra Superior */
.top-bar{background:var(--branco); padding:16px 20px; border-radius:12px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:15px; }

/* Estrutura da Modal */
.modal-overlay{position:fixed; top:0; left:0; width:100%; height:100%; background:var(--marinho-65); z-index:999; backdrop-filter:blur(3px); justify-content:center; align-items:center; padding:15px; overflow-y:auto; display: none !important; }
.modal-overlay.active{display: flex !important; visibility: visible !important; opacity: 1 !important; }
.modal-content{background:var(--branco);border-radius:12px;max-width:800px;width:100%;max-height:90vh;overflow-y:auto;padding:24px;position:relative;box-shadow:0 20px 25px -5px var(--preto-30)}
.modal-close{font-weight:bold; padding:4px 8px; position:absolute; right:15px; top:12px; background:var(--bege); color:var(--marinho); border:0; border-radius:50%; width:34px; height:34px; cursor:pointer; font-size:18px; }
.modal-close:hover{color:var(--marinho)}

/* Form Dinâmico */
.pedido-item{background:var(--branco);border:1px solid var(--bege);border-radius:8px;padding:12px;margin-bottom:12px}
.pedido-item-grid{display:grid;grid-template-columns:1fr 1fr 1fr 32px;gap:10px;min-width:0;}
.pedido-item-grid .f{min-width:0}
.total-box{border-radius:8px; display:flex; justify-content:space-between; align-items:center; margin-top:20px; padding:12px; background:var(--branco); border:1px solid var(--bege-2); font-weight:bold; font-size:14px; text-align:right; }

/* Sidebar e Cards de Pedidos Recentes */
.sidebar{background:var(--branco);border-radius:12px;padding:14px;height:fit-content;position:sticky;top:15px}
.side-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.side-title h2{border:0;margin:0;padding:0}
.lista{display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 150px);overflow:auto}
.pedido{border:1px solid var(--bege);border-radius:9px;padding:10px;cursor:pointer;background:var(--branco);position:relative}
.pedido:hover{background:var(--branco)}
.pedido-top{display:flex;justify-content:space-between;gap:5px;align-items:center}
.pedido-prod{font-weight:bold;margin:5px 0}
.pedido-meta{font-size:12px;color:var(--marinho-2);display:flex;justify-content:space-between;gap:5px}
.badge{display:inline-block;border-radius:20px;padding:4px 7px;font-size:10px;font-weight:bold;background:var(--bege)}
.status-0{background:var(--bege);color:var(--marinho)}
.status-1{background:var(--bege);color:var(--marinho-2)}
.status-2{background:var(--bege);color:var(--marinho-2)}
.status-3{background:var(--bege);color:var(--ouro-2)}
.machine{color:var(--marinho-2);font-size:12px;margin-top:5px}
.empty,.loading{color:var(--marinho-2);text-align:center;padding:20px}

/* Botões de Reordenação */
.reordem-btns{display:flex;gap:3px;align-items:center}
.btn-seta{background:var(--bege);border:1px solid var(--bege-2);border-radius:4px;padding:2px 6px;font-size:11px;cursor:pointer;color:var(--marinho);line-height:1}
.btn-seta:hover{background:var(--bege)}

/* Accordion do Histórico de Clientes */
.accordion-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;user-select:none}
.accordion-header:hover h1{color:var(--marinho)}
.seta-toggle{font-size:16px;color:var(--marinho-2);transition:transform 0.3s ease;background:var(--bege);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.seta-toggle.aberta{transform:rotate(180deg);background:var(--bege);color:var(--marinho)}
.accordion-content{display:none;margin-top:15px;border-top:1px solid var(--bege);padding-top:15px}
.accordion-content.ativo{display:block}

/* Bloco de Histórico dos Clientes */
.cliente-card{background:var(--branco);border:1px solid var(--bege-2);border-radius:12px;padding:16px;margin-bottom:20px;box-shadow:0 1px 3px var(--preto-05)}
.cliente-header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--bege);padding-bottom:10px;margin-bottom:12px;flex-wrap:wrap;gap:10px}
.cliente-nome{font-size:16px;font-weight:bold;color:var(--marinho);display:flex;align-items:center;gap:8px}
.cliente-stats{display:flex;gap:15px;font-size:12px;color:var(--marinho-2)}
.cliente-stats span b{color:var(--marinho);font-size:13px}

.table-responsive{width:100%;overflow-x:auto}
.tabela-historico{width:100%;border-collapse:collapse;text-align:left}
.tabela-historico th{background:var(--branco);padding:9px;border-bottom:2px solid var(--bege);font-size:12px;color:var(--marinho-2)}
.tabela-historico td{padding:10px 9px;border-bottom:1px solid var(--bege);font-size:13px}
.tabela-historico tr:hover{background:var(--bege)}

@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static}
  .lista{max-height:400px}
}
@media(max-width:600px){
  .grid,.pedido-item-grid{grid-template-columns:1fr}
  .full{grid-column:auto}
  header{flex-direction:column;align-items:flex-start;gap:10px}
  .top-bar{flex-direction:column;align-items:stretch;gap:10px}
  .cliente-header{flex-direction:column;align-items:flex-start}
}





        .header{ border-bottom:2px solid var(--marinho); padding-bottom:10px; margin-bottom:20px; display:flex; justify-content:space-between; align-items:center; }
        
        .meta{margin-top:5px; display:flex; justify-content:space-between; gap:5px; color:var(--marinho-2); font-size:25px; margin:8px 0; }
        table{ width:100%; border-collapse:collapse; margin-top:15px; font-size:13px; }
        th{ background:var(--bege); padding:8px; border:1px solid var(--bege-2); text-align:left; }
        
        @media print {
          button { display:none; }
        }






main{padding:14px; }


.filtro-maquina{display:flex; gap:8px; align-items:center; }
.btn-filtro{background:var(--branco); border:1px solid var(--bege-2); padding:15px 30px; border-radius:20px; font-weight:bold; cursor:pointer; color:var(--marinho-2); transition:all .2s; }
.btn-filtro.ativo{background:var(--marinho); color:var(--branco); border-color:var(--marinho); }
.maquinas{display:grid; grid-template-columns:repeat(3,minmax(320px,1fr)); gap:14px; overflow-x:auto; }
.maquinas.focada{grid-template-columns:1fr; }
.maquina{background:var(--bege-2); border-radius:12px; padding:10px; min-width:320px; }
.maquina-titulo{font-size:35px; font-weight:bold; padding:5px 4px 12px; }
.maquina-grid{display:grid; grid-template-columns:repeat(3,minmax(180px,1fr)); gap:8px; overflow-x:auto; }
.col{background:var(--bege); border-radius:9px; padding:8px; min-height:250px; }
.col h2{font-size:20px; margin:3px 0 8px; }
.count{float:right; background:var(--branco); border-radius:20px; padding:3px 7px; }
.cards{display:flex; flex-direction:column; gap:7px; }
.card{background:var(--branco); border-radius:8px; padding:9px; box-shadow:0 1px 2px rgba(15,23,42,.08); }
.prod{font-size:25px; font-weight:bold; margin:5px 0; }
.client{color:var(--marinho-2); }

.machine-tag{display:inline-block; background:var(--bege); color:var(--marinho); border-radius:20px; padding:3px 7px; font-size:10px; font-weight:bold; margin-top:5px; }
.buttons{display:flex; gap:4px; height:40px; margin-top:7px; font-size: 25px; }
.buttons button{flex:1; border:0; border-radius:6px; padding:7px 3px; font-size:20px; font-weight:bold; cursor:pointer; }
.back{width:42px; min-width:42px; height:42px; padding:10px 8px; margin:0; background:var(--bege); }
.next{width:42px; min-width:42px; height:42px; padding:10px 8px; margin:0; background:var(--bege); color:var(--ouro-2); }
.detail{background:var(--bege); color:var(--marinho-2); }

.empty{color:var(--bege-2); text-align:center; padding:15px 5px; font-size:11px; }
.modal{display:none; position:fixed; z-index:1000; inset:0; background:var(--marinho-65); align-items:center; justify-content:center; padding:20px; }
.modal-box{background:var(--branco); width:min(800px,100%); max-height:90vh; overflow:auto; border-radius:12px; padding:20px; position:relative; }

.modal-title{font-size:20px; font-weight:bold; margin-bottom:15px; padding-right:40px; }
.info{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.info-item{background:var(--branco); border-radius:8px; padding:1px; }
.info-label{color:var(--marinho-2); font-size:11px; font-weight:bold; text-transform:uppercase; }
.info-value{margin-top:4px; font-weight:bold; }
.obs{margin-top:12px; background:var(--branco); padding:12px; border-radius:8px; white-space:pre-wrap; }
.modal-image{margin-top:15px; text-align:center; }
.modal-image img{max-width:100%; max-height:450px; border-radius:8px; border:1px solid var(--bege-2); }
.sem-imagem{color:var(--marinho-2); padding:20px; }
@media(max-width:1250px){
  .maquinas{grid-template-columns:repeat(3,430px)}
  .maquinas.focada{grid-template-columns:1fr}
}
@media(max-width:700px){
  header{flex-direction:column;align-items:flex-start;gap:10px}
  .maquinas{grid-template-columns:1fr}
  .maquina{min-width:0}
  .maquina-grid{grid-template-columns:1fr}
  .info{grid-template-columns:1fr}
}
















































.titulo-painel {
    font-size: 20px;
    margin: 0;
}

.sub-painel {margin:0; }

.btn-excluir-pedido {width:36px !important; min-width:36px !important; height:36px !important; padding:0 !important; display:inline-flex; align-items:center; justify-content:center; }

.titulo-historico {font-size:18px; margin:0; }

.sub-historico {margin:4px 0 0 0; }

.campo-acoes-pedido {
    justify-content: flex-end;
}

.cabecalho-maquina {font-weight:bold; color:var(--marinho-2); background:var(--bege-2); padding:6px 10px; border-radius:6px; margin-top:10px; font-size:12px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; user-select:none;}
.cabecalho-maquina .seta-toggle-maquina {width:24px; height:24px; font-size:12px; flex:0 0 24px;}
.pedidos-maquina-conteudo[hidden] {display:none;}

.tag-ordem-local {
    background: var(--bege);
    color: var(--marinho);
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 11px;
    margin-left: auto;
}

.btn-despachar {
    width: 100%;
    height: 42px;
    border: 0;
    border-radius: 6px;
    background: var(--ouro-2);
    color: var(--branco);
    padding: 10px 12px;
    cursor: pointer;
    margin-top: 6px;
    font-weight:700;
}


.pedido-topo-interno {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.icone-arrastar {color:var(--bege-2); }
.icone-arrastar{touch-action:none;user-select:none;cursor:grab;display:inline-flex;align-items:center;justify-content:center;}
.icone-arrastar.segurando{cursor:grabbing;color:var(--marinho);}
.pedidos-maquina-conteudo.modo-reordenacao{user-select:none;}
.pedidos-maquina-conteudo.modo-reordenacao .pedido{display:flex;align-items:center;gap:8px;padding:8px 10px;min-height:38px;box-sizing:border-box;cursor:default;}
.pedidos-maquina-conteudo.modo-reordenacao .pedido-top{margin:0;width:auto;flex:0 0 auto;}
.pedidos-maquina-conteudo.modo-reordenacao .pedido-topo-interno{width:auto;gap:5px;}
.pedidos-maquina-conteudo.modo-reordenacao .pedido-topo-interno b{white-space:nowrap;}
.pedidos-maquina-conteudo.modo-reordenacao .pedido-prod{margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pedidos-maquina-conteudo.modo-reordenacao .pedido-prod::before{content:'— ';}
.pedidos-maquina-conteudo.modo-reordenacao .btn-editar-pedido-sm,.pedidos-maquina-conteudo.modo-reordenacao .tag-ordem-local,.pedidos-maquina-conteudo.modo-reordenacao .inline-style-23,.pedidos-maquina-conteudo.modo-reordenacao .pedido-meta,.pedidos-maquina-conteudo.modo-reordenacao .acoes-status-comercial,.pedidos-maquina-conteudo.modo-reordenacao .acoes-pacote,.pedidos-maquina-conteudo.modo-reordenacao .btn-despachar{display:none!important;}
.pedidos-maquina-conteudo.modo-reordenacao .pedido-em-reordenacao{box-shadow:0 0 0 2px var(--marinho);}
.marcador-reordenacao-pedido{display:block;width:100%;height:38px;box-sizing:border-box;border:2px solid var(--ouro);border-radius:6px;background:transparent;flex:0 0 38px;}


.pedido-meta-lista {
    margin-top: 4px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 5px;
    align-items: center;
    width: 100%;
    min-width: 0;
}
.pedido-meta-lista > * {
    white-space: nowrap;
    min-width: 0;
}
.pedido-meta-lista > .badge {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
}

/* =========================================================
   ESTILOS REUTILIZÁVEIS
   ========================================================= */
.titulo-painel-vendas{font-size:20px;margin:0}

.acoes-final{justify-content:flex-end}
.f-pedido-actions{justify-content:flex-end}

.tag-ordem{
  background:var(--bege);color:var(--marinho);padding:2px 6px;border-radius:10px;
  font-weight:bold;font-size:11px;margin-left:auto;
}


.pedido-top-inner{display:flex;align-items:center;gap:4px;width:100%}

.meta-top{margin-top:4px}
.tabela-relatorio td{padding:8px; border:1px solid var(--bege-2); }
.tabela-relatorio td.qtd{color:var(--marinho)}
.btn-imprimir{padding:10px 15px;background:var(--marinho);color:var(--branco);border:none;border-radius:5px;font-weight:bold;cursor:pointer}

.oculto{display:none}




.tag-ordem-producao{background:var(--bege);color:var(--marinho);padding:2px 8px;border-radius:12px;font-weight:bold;font-size:12px;float:right}

.card-top{display:flex;justify-content:space-between;align-items:center}


/* =========================================
   RELATÓRIO DE HISTÓRICO DE PEDIDOS
========================================= */

.relatorio-body{font-family:Arial,sans-serif;margin:0;padding:20px;color:var(--marinho-2);background:#fff}
.relatorio{max-width:1100px;margin:0 auto}
.relatorio-header{border-bottom:2px solid var(--marinho);padding-bottom:10px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.relatorio-header h1{margin:0;color:var(--marinho);font-size:20px}
.relatorio-cabecalho-interno{display:flex;align-items:center;gap:20px;min-width:0}
.relatorio-logo{height:60px;width:auto;object-fit:contain;flex-shrink:0}
.relatorio-meta{font-size:12px;color:var(--marinho-2);margin-top:5px}
.relatorio-table{width:100%;border-collapse:collapse;margin-top:15px;font-size:13px}
.relatorio-table th{background:var(--bege);padding:9px;border:1px solid var(--bege-2);text-align:left;color:var(--marinho)}
.relatorio-table td{padding:1px;border:1px solid var(--bege-2);height:46px;vertical-align:middle}
.relatorio-table td.numero{text-align:center;white-space:nowrap}
.relatorio-total-box{margin-top:18px;padding:12px;background:var(--branco);border:1px solid var(--bege-2);font-weight:bold;font-size:14px;text-align:right;color:var(--marinho-2)}
.relatorio-imprimir{padding:10px 15px;background:var(--marinho);color:var(--branco);border:none;border-radius:5px;font-weight:bold;cursor:pointer;white-space:nowrap}
.ficha-info-produto{font-size:14px;color:var(--marinho-2);margin-top:6px;padding:10px 12px;border:1px solid var(--bege-2);background:var(--branco-2);border-radius:5px;line-height:1.7}
.ficha-info-produto b{color:var(--marinho)}
.bloco-titulo{margin-top:18px;padding:8px 10px;background:var(--bege);border:1px solid var(--bege-2);font-size:13px;font-weight:700;color:var(--marinho)}
.relatorio-table .campo-perda,.relatorio-table .campo-separacao{height:52px;background:#fff}
.relatorio-table .campo-perda{width:200px}
.relatorio-table .campo-separacao{width:30px}
.rodape-total{margin-top:18px;padding:12px;border:1px solid var(--bege-2);background:var(--branco);font-weight:bold;text-align:right;color:var(--marinho-2)}
.rodape-total strong{font-size:18px;color:var(--marinho);margin-left:8px}
.orientacao{margin-top:12px;font-size:11px;color:var(--marinho-2)}
@media print{.relatorio-body{padding:15px}.relatorio-imprimir{display:none}.relatorio-header{margin-bottom:12px}}
/* =========================================================
   GERENCIAMENTO DE MÁQUINAS
   ========================================================= */
.top-bar-acoes{flex-wrap:wrap; display: flex; gap: 10px; align-items: center; }
.btn-gerenciar-clientes,.btn-gerenciar-maquinas,.btn-novo-pedido{border:0;border-radius:8px;cursor:pointer;font-weight:700;padding:12px 16px}
.btn-gerenciar-maquinas{background:var(--marinho-2); font-size:15px; box-shadow:0 2px 4px var(--preto-10); background-color: var(--marinho); color: var(--branco); border: none; padding: 10px 16px; border-radius: 6px; font-weight: bold; cursor: pointer; transition: background-color 0.2s; }
.btn-gerenciar-maquinas:hover{background:var(--marinho-2); background-color: var(--marinho-2); }
.modal-maquinas{max-width:850px}
.maquinas-gerenciamento-titulo{font-weight:800;font-size:14px;margin:22px 0 8px;color:var(--marinho-2)}
.lista-maquinas-gerenciamento{display:flex;flex-direction:column;gap:8px;max-height:45vh;overflow-y:auto}
.maquina-gerenciamento-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;border:1px solid var(--bege);border-radius:8px;background:var(--branco)}
.maquina-gerenciamento-item strong{font-size:16px}
.status-maquina{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:20px;font-size:10px;font-weight:800}
.status-maquina.ativa{background:var(--bege);color:var(--ouro-2)}
.status-maquina.inativa{background:var(--bege);color:var(--marinho)}
.acoes-maquina{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.btn-mini{font-size:11px!important;padding:7px 9px!important}
@media(max-width:700px){
  .top-bar-acoes{width:100%}
  .top-bar-acoes button{flex:1;min-width:140px}
  .maquina-gerenciamento-item{align-items:flex-start;flex-direction:column}
  .acoes-maquina{width:100%;justify-content:flex-start}
}

/* ========== FIX MODAIS - PRIORIDADE ========== */




/* Gerenciamento de Máquinas e Modais */






.lista-clientes-gerenciamento {max-height:320px; overflow-y:auto; border:1px solid var(--bege); border-radius:6px; margin-top:12px; }

.item-cliente-gerenciar {display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-bottom:1px solid var(--bege); }

.item-cliente-gerenciar:last-child {border-bottom:none; }

.acoes-cliente-item {display:flex; gap:6px; }

.btn-acao-sm {border:none; padding:4px 8px; border-radius:4px; font-size:12px; font-weight:bold; cursor:pointer; }

.btn-edit-sm {background-color:var(--ouro); color:var(--branco); }
.btn-edit-sm:hover {background-color:var(--ouro-2); }
.btn-del-sm {background-color:var(--ouro); color:var(--branco); }
.btn-del-sm:hover {background-color:var(--ouro-2); }

/* =========================================================
   ESTILOS QUE ESTAVAM NOS <style> DO index testes.html
   ========================================================= */

.campo-cliente-wrapper {
  display:flex;
  gap:6px;
  align-items:center;
}
.campo-cliente-wrapper select { flex:1; }

/* Cliente do pedido: campo de quantidade e exclusão na mesma linha. */
.quantidade-com-exclusao{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
}
.quantidade-com-exclusao .item-qtd{
  flex:1;
  min-width:0;
}
.pedido-item .quantidade-com-exclusao .btn-remove{
  flex:0 0 36px;
  width:36px !important;
  min-width:36px !important;
  height:36px !important;
  margin:0 !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  background:var(--ouro);
  color:var(--branco);
  border:1px solid var(--ouro-2);
  border-radius:8px;
  font-size:14px !important;
  line-height:1;
}
.pedido-item .quantidade-com-exclusao .btn-remove:hover{
  background:var(--ouro-2);
}

.btn-add-cliente {
  background-color:var(--marinho);
  color:var(--branco);
  border:none;
  border-radius:4px;
  width:38px;
  height:38px;
  font-size:18px;
  font-weight:bold;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background-color .2s;
}
.btn-add-cliente:hover { background-color:var(--marinho-2); }

.btn-add-produto {
  background-color:var(--marinho);
  color:var(--branco);
  border:none;
  border-radius:4px;
  width:38px;
  height:38px;
  font-size:18px;
  font-weight:bold;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background-color .2s;
}
.btn-add-produto:hover { background-color:var(--marinho-2); }

#modalNovoCliente .modal-content,
#modalEditarCliente .modal-content { max-width:900px; width:min(900px,calc(100vw - 40px)); }

#modalGerenciarClientes .modal-content,
#modalGerenciarMaquinas .modal-content { max-width:900px; width:min(900px,calc(100vw - 40px)); }












/* Relatórios */
.filtros-relatorio {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:15px 0;
  padding:12px;
  background:var(--branco);
  border:1px solid var(--bege);
  border-radius:6px;
  align-items:flex-end;
  font-family:sans-serif;
}
.filtros-relatorio .campo { flex:1; min-width:140px; }
.filtros-relatorio label {
  display:block;
  font-size:12px;
  font-weight:bold;
  margin-bottom:4px;
  color:var(--marinho-2);
}
.filtros-relatorio input {
  width:100%;
  padding:6px;
  border:1px solid var(--bege-2);
  border-radius:4px;
  box-sizing:border-box;
}
.btn-limpar {
  padding:7px 12px;
  background:var(--marinho-2);
  color:var(--branco);
  border:none;
  border-radius:4px;
  cursor:pointer;
  font-weight:bold;
}

.ficha-imagem {
  max-width:100%;
  max-height:420px;
  display:block;
  margin:0 auto;
  border:1px solid var(--bege-2);
  border-radius:6px;
}
.ficha-sem-imagem {
  padding:30px;
  text-align:center;
  color:var(--marinho-2);
  border:1px dashed var(--bege-2);
  border-radius:6px;
}
.ficha-imagem-box{width:5cm;min-width:5cm;height:5cm;display:flex;align-items:flex-start;justify-content:flex-start}
.ficha-visual-row{display:grid;grid-template-columns:5cm 1fr;width:100%;gap:12px;margin:10px 0 18px;}
.ficha-total-lateral{flex:1;height:5cm;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;box-sizing:border-box}
.ficha-total-lateral strong{display:block; margin-top:8px; font-size:20px; color:var(--marinho);}

@media print {
  .no-print { display:none !important; }
}

/* Classes auxiliares para retirar estilos inline posteriormente */
.relatorio-produto-filtro {
  flex:1.5;
  min-width:160px;
}

/* =========================================================
   PRODUÇÃO - MÁQUINAS RECOLHÍVEIS
   ========================================================= */

.pagina-producao .maquinas {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    overflow: visible;
}

.pagina-producao .maquina {
    width: 100%;
    min-width: 0;
}

.pagina-producao .maquina-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.pagina-producao .btn-toggle-maquina {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: var(--marinho);
    color: var(--branco);
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pagina-producao .btn-toggle-maquina:hover {
    background: var(--marinho-2);
}

.pagina-producao .conteudo-maquina {
    display: none;
}

.pagina-producao .maquina.aberta .conteudo-maquina {
    display: block;
}

.pagina-producao .maquina.aberta .btn-toggle-maquina {
    transform: rotate(180deg);
}

.pagina-producao .card-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagina-producao .tag-ordem {
    background: var(--amarelo);
    color: var(--preto);
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 12px;
}

.pagina-producao .clientes-pedido {
    margin-top: 8px;
}

.pagina-producao .cliente-pedido {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px solid var(--bege-2);
    font-size: 16px;
}

.pagina-producao .cliente-pedido:last-child {
    border-bottom: none;
}

.pagina-producao .total-pedido {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 2px solid var(--bege-2);
    font-weight: bold;
    font-size: 18px;
}


/* =========================================================
   FONTE ÚNICA DO SISTEMA
   ========================================================= */







html,
body {
    font-family: "Montserrat Alternates", sans-serif;
}

/* GERENCIAMENTO DE STATUS — compacto e com ações ao lado */
.modal-status {width:min(900px,calc(100vw - 40px)); max-width:900px; }

.lista-status-gerenciamento {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--bege);
  border-radius: 8px;
  padding: 8px;
}

.item-status-gerenciar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--branco);
  border: 1px solid var(--bege);
  border-radius: 8px;
  min-width: 0;
}

.status-gerenciar-nome {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.status-gerenciar-nome strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-ordem {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  background: var(--marinho);
  color: var(--branco);
  font-weight: bold;
  font-size: 13px;
}

.acoes-status-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex-shrink: 0;
}

.acoes-status-item .btn-acao-sm {
  white-space: nowrap;
}

@media (max-width: 650px) {
  .modal-status {
    width: calc(100vw - 20px);
  }

  .item-status-gerenciar {
    align-items: center;
  }

  .acoes-status-item {
    gap: 4px;
  }

  .acoes-status-item .btn-acao-sm {
    padding: 6px 8px;
    font-size: 11px;
  }
}


/* =========================================================
   FICHA DE PRODUÇÃO — CONTROLE PREENCHIDO À MÃO
   ========================================================= */
.ficha-controle-producao{margin-top:18px}
.ficha-controle-producao h2{font-size:13px;margin:0 0 8px;padding:7px 8px;border:1px solid #111;border-bottom:0;color:#111}
.ficha-controle-table{width:100%;border-collapse:collapse;table-layout:fixed}
.ficha-controle-table th,
.ficha-controle-table td{border:1px solid #111;padding:7px;text-align:center;font-size:9px}
.ficha-controle-table th{font-weight:700;background:#f7f5ef;line-height:1.15}
.ficha-controle-table .campo-preenchimento{height:48px;background:#fff}
.ficha-controle-table .campo-obs-titulo{padding:5px 8px;text-align:left}
.ficha-controle-table .campo-obs-linha{height:58px;text-align:left;vertical-align:top}
@media print{
  .ficha-controle-table th,
  .ficha-controle-table td{font-size:8px}
  .ficha-controle-table .campo-preenchimento{height:58px}
  .ficha-visual-row{gap:12px}
  .ficha-total-lateral{width:190px}
  .ficha-controle-table .campo-obs-linha{height:100px;text-align:left;vertical-align:top}
}

/* =========================================================
   MENU DE CADASTROS E CADASTROS DE TINTAS/PRODUTOS
   ========================================================= */
.menu-principal{position:relative;display:inline-block}
.btn-menu-principal{width:42px;height:42px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:8px;background:var(--marinho);color:var(--branco);cursor:pointer;font-size:19px;box-shadow:0 2px 4px var(--preto-10)}
.btn-menu-principal:hover{background:var(--marinho-2)}
.menu-principal-lista{display:none;position:absolute;right:0;left:auto;top:calc(100% + 6px);width:230px;min-width:230px;background:var(--branco);border:1px solid var(--bege-2);border-radius:9px;box-shadow:0 8px 20px var(--preto-10);padding:6px;z-index:1100}
.menu-principal-lista.aberto{display:block}
.menu-principal-opcao{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:transparent;color:var(--marinho);text-align:left;padding:10px 12px;border:0;border-radius:6px;font-weight:700;cursor:pointer}
.menu-principal-opcao:hover{background:var(--bege);color:var(--marinho)}
.menu-principal-opcao span{display:flex;align-items:center;gap:8px}
.menu-subgrupo{display:none;margin:2px 0 5px;padding:4px;border:1px solid var(--bege-2);border-radius:6px;background:var(--branco-2)}
.menu-subgrupo.aberto{display:block}
.menu-subgrupo button{width:100%;display:flex;align-items:center;gap:8px;background:transparent;color:var(--marinho);text-align:left;padding:8px 10px;border:0;border-radius:5px;font-weight:600;cursor:pointer}
.menu-subgrupo button:hover{background:var(--bege);color:var(--marinho)}
.modal-cadastro{max-width:900px;width:min(900px,calc(100vw - 40px))}
.modal-produto-cadastro{max-width:900px}
.lista-campos-cadastro,.lista-subprodutos{display:flex;flex-direction:column;gap:12px}
.campo-tinta-cadastro{grid-template-columns:minmax(0,2fr) minmax(130px,1fr) auto; gap:10px; align-items:end; display:block; padding:14px; border:1px solid var(--bege-2); border-radius:10px; background:var(--branco-2); }
.subproduto-card{border:1px solid var(--bege-2); border-radius:10px; padding:3px; background:var(--branco-2); display:block; font-size:11px; opacity:.75; margin-top:2px; }
.subproduto-cabecalho{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:var(--marinho)}
.lista-tintas-subproduto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.subproduto-card [hidden]{display:none!important}
@media(max-width:700px){.menu-principal-lista{right:0;left:auto}.campo-tinta-cadastro{grid-template-columns:1fr}.lista-tintas-subproduto{grid-template-columns:1fr}}


/* Estilos anteriormente inline - centralizados para preservar exatamente o visual existente */
.inline-style-1{display: flex; gap: 8px; margin-bottom: 12px;}
.inline-style-2{flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px;}
.inline-style-3{margin-top: 16px;}



.inline-style-7{max-width: 400px;}
.inline-style-8{grid-template-columns: 1fr;}
.inline-style-9{margin-top: 20px;}







.inline-style-17{display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; padding: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; align-items: flex-end;}
.inline-style-18{flex: 1; min-width: 140px;}
.inline-style-19{display:block; font-size: 12px; font-weight: bold; margin-bottom: 4px; color: #475569;}
.inline-style-20{width: 100%; padding: 6px; border: 1px solid #ccc; border-radius: 4px;}



.inline-style-24{flex: 1.5; min-width: 160px;}





.inline-style-30{padding: 7px 12px; background: #64748b; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;}
.inline-style-31{max-width: 450px;}
.inline-style-32{color: #dc2626;}
.inline-style-33{margin: 20px 0; font-size: 14px; line-height: 1.5; color: #374151;}
.inline-style-34{display: flex; flex-direction: column; gap: 10px;}
.inline-style-35{background-color: #2563eb; padding: 12px; font-size: 14px;}
.inline-style-36{padding: 12px; font-size: 14px;}


.inline-style-39{grid-template-columns: 1fr; margin-top: 15px;}
.inline-style-40{width: 100%; height: 38px; padding: 6px; border-radius: 4px; border: 1px solid #ccc; background-color: #fff;}

.inline-style-42{padding:12px;}

.inline-style-44{color:#6b7280;}


.inline-style-47{display: grid; grid-template-columns: 2fr 1fr 1fr 100px auto; gap: 12px; align-items: end;}

.inline-style-49{width: 100%;}


.inline-style-52{display: flex; justify-content: space-between; font-size: 13px; margin-top: 4px; border-bottom: 1px dashed #e2e8f0; padding-bottom: 3px;}
.inline-style-53{margin: 8px 0; background: #f8fafc; padding: 6px; border-radius: 4px;}
.inline-style-54{border-top: 1px solid #e2e8f0; padding-top: 6px;}
.inline-style-55{font-weight:600;opacity:.8;}
.inline-style-56{color:#2563eb;}

.inline-style-61{max-width:5cm; max-height:5cm; width:auto; height:auto; object-fit:contain;}
.inline-style-62{display:flex; align-items:center; gap:20px;}
.inline-style-66{
            flex:1;
            height:5cm;
            margin:0;
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:flex-end;
            box-sizing:border-box;
          }
.inline-style-67{
              font-size:18px;
              margin-top:6px;
            }


/* =========================================================
   CADASTRO DE TINTAS COM COMPOSIÇÃO
   ========================================================= */
.modal-tintas-cadastro{max-width:900px}
.tinta-cadastro-cabecalho{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  color:var(--marinho);
}

.campo-tinta-cadastro + .campo-tinta-cadastro{margin-top:12px}
.composicao-tinta{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--bege-2);
  border-radius:9px;
  background:var(--branco);
}
.composicao-cabecalho{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom:10px;
  color:var(--marinho);
}
.composicao-cabecalho span{
  font-size:12px;
  font-weight:500;
  color:var(--marinho-65);
}
.lista-composicao-tinta{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.componente-tinta{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(150px,1fr) auto;
  gap:10px;
  align-items:end;
  padding:10px;
  border:1px solid var(--bege-2);
  border-radius:8px;
  background:var(--branco-2);
}
.btn-add-componente{
  margin-top:10px;
}
@media(max-width:700px){
  .componente-tinta{grid-template-columns:1fr}
  .tinta-cadastro-cabecalho{align-items:flex-start}
}

/* =========================================================
   LISTAS E VISUALIZAÇÃO/EDIÇÃO DE CADASTROS
   ========================================================= */
.modal-lista-cadastros{max-width:900px}
.campo-pesquisa-produtos{display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;margin:14px 0 10px;padding:9px 12px;background:var(--branco-2);border:1px solid var(--bege-2);border-radius:9px;color:var(--marinho-65)}
.campo-pesquisa-produtos input{width:100%;border:0;outline:0;background:transparent;color:var(--marinho);font:inherit;padding:2px 0}
.campo-pesquisa-produtos input::placeholder{color:var(--marinho-65)}
.lista-cadastros{display:flex;flex-direction:column;gap:8px;max-height:55vh;overflow-y:auto;margin:10px 0 16px;padding:8px;background:var(--branco-2);border:1px solid var(--bege-2);border-radius:10px}
.item-cadastro-lista{width:100%;min-height:58px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;background:var(--branco-2);border:1px solid var(--bege-2);border-radius:9px;padding:7px 9px 7px 14px;color:var(--marinho);cursor:pointer}
.item-cadastro-lista:hover{background:var(--bege);border-color:var(--ouro-2)}
.item-cadastro-produto-info{min-width:0;display:flex;flex:1;flex-direction:column;gap:3px;font-weight:800}
.item-cadastro-produto-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-cadastro-lista small,.subproduto-lista-item small{font-size:12px;color:var(--marinho-65);font-weight:600}
.miniatura-produto-lista{width:44px; height:44px; flex:0 0 44px; padding:0; border:1px solid var(--bege-2); border-radius:6px; background:var(--branco); overflow:hidden; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.miniatura-produto-lista img{width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.18); transform-origin:center; display:block; }
.miniatura-produto-lista.sem-imagem{font-size:18px;color:var(--marinho-65);cursor:default}
.item-cadastro-lista:focus-visible{outline:2px solid var(--marinho);outline-offset:1px}
.detalhe-cadastro{display:flex;flex-direction:column;gap:8px;background:var(--branco-2);border:1px solid var(--bege-2);border-radius:10px;padding:14px;margin:16px 0}
.linha-composicao,.linha-detalhe{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:9px 10px;background:var(--branco);border:1px solid var(--bege-2);border-radius:7px}
.linha-detalhe span{font-size:11px;font-weight:700;color:var(--marinho-65)}
.titulo-composicao{margin-top:8px;color:var(--marinho)}
@media(max-width:700px){.linha-composicao,.linha-detalhe{flex-direction:column;align-items:flex-start}.item-cadastro-lista{flex-direction:row;align-items:center}.subproduto-lista-item{flex-direction:column;align-items:flex-start}}

/* Modais de cadastro abertos a partir de outro modal ficam acima do modal de pedido. */
#modalGerenciarTintas,
#modalCadastrarProduto,
#modalListaProdutos,
#modalVisualizarProduto,
#modalEditarSubproduto,
#modalListaTintas,
#modalVisualizarTinta,
#modalEditarTinta{z-index:1200}

.produto-imagem-cadastro{margin-top:8px}
.produto-imagem-ajuda{display:block;margin-top:6px;font-size:12px;color:var(--cinza-2,#6b7280)}
.produto-imagem-preview{margin-top:10px;padding:10px;border:1px solid var(--bege-2);border-radius:8px;background:var(--branco-2);text-align:center}
.produto-imagem-preview img{display:block;max-width:260px;max-height:180px;width:auto;height:auto;object-fit:contain;margin:0 auto}
.produto-imagem-visualizacao{display:flex;justify-content:center;margin:10px 0 16px}
.produto-imagem-visualizacao img{max-width:280px;max-height:220px;width:auto;height:auto;object-fit:contain;border:1px solid var(--bege-2);border-radius:8px}

/* Variações de produtos */
.lista-observacoes-produto{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;margin:10px 0 14px}
.lista-variacoes-produto{margin:10px 0 14px; display:flex; flex-direction:column; gap:0; }
.observacao-produto-card{flex:0 1 250px;min-width:220px;max-width:100%;background:var(--branco-2);border:1px solid var(--bege-2);border-radius:10px;padding:10px}
.variacao-produto-card{background:var(--branco-2); border:1px solid var(--bege-2); border-radius:10px; padding:12px; display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:10px 16px; align-items:start; }
.observacao-produto-cabecalho,.variacao-produto-cabecalho,.tinta-cadastro-cabecalho{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.observacao-produto-cabecalho strong{font-size:12px}
.observacao-produto-input{width:100%;padding:8px 9px;font-size:13px}
@media(max-width:700px){.observacao-produto-card{flex:1 1 100%;min-width:0}}
.variacao-observacoes>label{display:block;font-weight:800;margin-bottom:8px}
.variacao-checks,.lista-observacoes-pedido{display:flex;flex-wrap:wrap;gap:8px}
.observacao-check{display:flex;align-items:center;gap:7px;border:1px solid var(--bege-2);background:var(--branco);border-radius:8px;padding:2px 10px;cursor:pointer;font-weight:700}
.observacao-check input{accent-color:var(--marinho)}
.variacao-imagem-preview{margin-top:10px;padding:8px;border:1px solid var(--bege-2);border-radius:8px;text-align:center;background:var(--branco)}
.variacao-imagem-preview img{max-width:240px;max-height:160px;width:auto;height:auto;object-fit:contain}

.variacao-subprodutos{margin-top:12px;padding-top:10px;border-top:1px dashed var(--bege-2)}
.variacao-subprodutos-cabecalho{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;color:var(--marinho)}
.variacao-subprodutos-cabecalho .btn-add{padding:7px 10px;font-size:12px}
.lista-subprodutos-variacao{display:flex;flex-direction:column;gap:8px}
.subproduto-variacao-card{border:1px solid var(--bege-2);border-radius:8px;padding:9px;background:var(--branco)}
.subproduto-variacao-card .subproduto-cabecalho{margin-bottom:8px}
.subproduto-variacao-card .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.subproduto-variacao-card .f{gap:4px}
.subproduto-variacao-card label{font-size:12px}
.subproduto-variacao-card input,.subproduto-variacao-card select{padding:8px 9px;font-size:13px}
.subproduto-variacao-card .lista-tintas-subproduto{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
@media(max-width:700px){.subproduto-variacao-card .grid{grid-template-columns:1fr}.subproduto-variacao-card .lista-tintas-subproduto{grid-template-columns:1fr}.variacao-subprodutos-cabecalho{align-items:flex-start;flex-direction:column}}
.linha-variacao-visualizacao{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border:1px solid var(--bege-2);border-radius:8px;background:var(--branco)}
.linha-variacao-visualizacao img{max-width:100px;max-height:70px;object-fit:contain;border-radius:5px;cursor:pointer}
.preview-produto-variacao{margin-top:10px; margin:0; padding:8px; border:1px solid var(--bege-2); border-radius:8px; background:var(--branco-2); text-align:center; min-height:130px; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; }
.preview-produto-variacao img{display:block; max-width:100%; max-height:180px; width:auto; height:auto; object-fit:contain; margin:0 auto 6px; cursor:pointer; }
.produto-variacao-mensagem{font-size:11px; color:var(--marinho-65); font-weight:700; }
.modal-imagem-ampliada{z-index:1500}
.imagem-ampliada-box{position:relative;max-width:94vw;max-height:94vh;padding:18px;background:var(--branco);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.imagem-ampliada-box img{display:block;max-width:88vw;max-height:88vh;width:auto;height:auto;object-fit:contain}
.variacao-producao{font-size:12px;font-weight:800;margin:5px 0 8px;padding:6px 8px;border:1px solid var(--bege-2);border-radius:6px;background:var(--branco-2)}
.imagem-variacao-producao img{display:block;max-width:100%;max-height:170px;width:auto;height:auto;object-fit:contain;margin:8px auto;border-radius:7px}


/* Busca rápida nos cadastros */
.cadastro-busca{
  margin: 14px 0;
}
.cadastro-busca input{
  width:100%;
  box-sizing:border-box;
}

/* Imagem automática do produto no novo pedido */
.preview-imagem-produto-pedido{
  display:flex;
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.preview-imagem-produto-pedido img{
  display:block;
  max-width:100%;
  max-height:280px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.produto-imagem-pedido-mensagem{
  margin-top:8px;
  font-size:12px;
  opacity:.75;
}


/* ===== VARIAÇÕES: OBSERVAÇÕES AO LADO DA IMAGEM ===== */



/* Título da variação ocupa toda a largura */
.variacao-produto-card > .variacao-produto-cabecalho{
  grid-column:1 / -1;
}

/* OBSERVAÇÕES — lado esquerdo */
.variacao-produto-card > .variacao-observacoes{
  grid-column:1;
  min-width:0;
}

/* Observações ficam UMA ABAIXO da outra */
.variacao-produto-card .variacao-checks{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:4px;
  width:100%;
}

/* Cada observação fica bem baixa e compacta */
.variacao-produto-card .observacao-check{
  width:100%;
  max-width:100%;
  min-height:30px;
  height:30px;
  padding:4px 8px;
  margin:0;
  display:flex;
  align-items:center;
  gap:6px;
  box-sizing:border-box;
  font-size:11px;
  line-height:1;
}

/* Checkbox também fica compacto */
.variacao-produto-card .observacao-check input{
  width:auto;
  min-width:auto;
  height:auto;
  margin:0;
  padding:0;
  flex:0 0 auto;
}

/* IMAGEM — lado direito */
.variacao-produto-card > .f.full{
  grid-column:2;
  min-width:0;
  margin:0;
}

.variacao-produto-card .variacao-imagem-preview{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:130px;
  max-height:180px;
  overflow:hidden;
  margin-top:7px;
}

.variacao-produto-card .variacao-imagem-preview img{
  display:block;
  width:auto;
  max-width:100%;
  max-height:160px;
  object-fit:contain;
}

.variacao-produto-card .produto-imagem-ajuda{
  display:block;
  margin-top:6px;
  font-size:11px;
}

/* SUBPRODUTOS continuam ocupando toda a largura */
.variacao-produto-card > .variacao-subprodutos{
  grid-column:1 / -1;
  min-width:0;
}

.variacao-produto-card > .variacao-subprodutos
.lista-subprodutos-variacao{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Responsivo */
@media(max-width:700px){

  .variacao-produto-card{
    grid-template-columns:1fr;
  }

  .variacao-produto-card > .variacao-observacoes,
  .variacao-produto-card > .f.full,
  .variacao-produto-card > .variacao-subprodutos{
    grid-column:1;
  }

  .variacao-produto-card > .f.full{
    margin:0;
  }

  .variacao-produto-card .variacao-checks{
    gap:4px;
  }

  .variacao-produto-card .observacao-check{
    min-height:29px;
    height:29px;
  }
}



/* ===== NOVO PEDIDO: PRODUTO/OBSERVAÇÕES À ESQUERDA E IMAGEM À DIREITA ===== */
.produto-variacao-layout{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 200px;
  gap:14px;
  align-items:start;
  width:100%;
}
.produto-variacao-campos{
  min-width:0;
}
.produto-variacao-layout .preview-produto-variacao{
  grid-column:2;
  grid-row:1;
  width:100%;
  min-height:180px;
  margin:0;
  padding:10px;
  border:1px solid var(--bege-2);
  border-radius:8px;
  background:var(--branco-2);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.produto-variacao-layout .preview-produto-variacao img{
  display:block;
  max-width:100%;
  max-height:260px;
  width:auto;
  height:auto;
  object-fit:contain;
  margin:0 auto 6px;
  cursor:pointer;
}
@media(max-width:700px){
  .produto-variacao-layout{grid-template-columns:1fr;}
  .produto-variacao-layout .preview-produto-variacao{grid-column:1;grid-row:auto;}
}

/* ===== NOVO PEDIDO: OBSERVAÇÕES AO LADO DA IMAGEM ===== */
.variacao-pedido-linha{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px;align-items:start}
.lista-observacoes-pedido{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}



#campoSubprodutoPedido{grid-column:1 / -1; margin-top:2px; }
@media(max-width:700px){.variacao-pedido-linha{grid-template-columns:1fr}.preview-produto-variacao{max-width:100%}}


/* BOTÃO + PARA CADASTRAR TINTA NA SELEÇÃO DE CADA CHAPA */
.tinta-selecao-linha{display:flex;align-items:center;gap:6px;width:100%}
.tinta-selecao-linha .sub-tinta{flex:1;min-width:0}
.btn-nova-tinta{width:32px;height:32px;min-width:32px;padding:0;border:1px solid var(--marinho);border-radius:6px;background:var(--marinho);color:var(--branco);font-size:20px;line-height:1;cursor:pointer;font-weight:700}
.btn-nova-tinta:hover{background:var(--ouro);color:var(--marinho)}


/* NOVO PEDIDO — observações + imagem lado a lado; subproduto abaixo */
#campoVariacaoPedido{grid-column:1 / -1}
#campoVariacaoPedido .variacao-pedido-linha{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px;align-items:start}

#listaObservacoesPedido{grid-column:1;min-width:0}
#previewProdutoVariacao{grid-column:2;grid-row:1;min-width:0}
@media(max-width:700px){
  #campoVariacaoPedido .variacao-pedido-linha{grid-template-columns:1fr}
  #listaObservacoesPedido,#previewProdutoVariacao{grid-column:1;grid-row:auto}
}


/* ===== COMPACTAÇÃO DAS MODAIS ===== */
.modal-overlay .modal-content{padding:18px}
.modal-overlay .modal-content input,
.modal-overlay .modal-content select,
.modal-overlay .modal-content textarea{padding:8px 9px}
.modal-overlay .modal-content button{padding:8px 12px;font-size:13px}
.modal-overlay .modal-content .modal-close{padding:3px 7px;font-size:21px}
.modal-overlay .modal-content .actions{margin-top:14px; width:auto; }
.modal-overlay .modal-content .subproduto-card{padding:10px}
.modal-overlay .modal-content .lista-campos-cadastro,
.modal-overlay .modal-content .lista-subprodutos{gap:9px}
.subproduto-copiado-principal{display:flex;align-items:center;gap:6px;min-height:34px;color:var(--marinho);font-size:12px}
.subproduto-copiado-principal .subproduto-copiado-tipo{font-weight:800}
.subproduto-copiado-principal .btn-remove{margin-left:auto}

/* ===== CADASTRO DE PRODUTO — CAMPOS E AÇÕES MAIS COMPACTOS ===== */
.modal-produto-cadastro .btn-add{
  width:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:8px;
  padding:7px 11px;
  font-size:12px;
}
.modal-produto-cadastro .subproduto-card .grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.modal-produto-cadastro .subproduto-card .f.full{
  grid-column:auto;
}
.modal-produto-cadastro .subproduto-card .f:has(.lista-tintas-subproduto),
.modal-produto-cadastro .subproduto-card .lista-tintas-subproduto{
  grid-column:1 / -1;
}
.modal-produto-cadastro .subproduto-card .f:has(.sub-outro-wrap){
  grid-column:auto;
}
.modal-produto-cadastro .subproduto-card input,
.modal-produto-cadastro .subproduto-card select{
  padding:8px 9px;
  font-size:13px;
}
.acoes-subprodutos-variacao{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin-top:8px;
}
.acoes-subprodutos-variacao .btn-acao-compacta{
  width:auto;
  margin-top:0;
  padding:7px 10px;
  font-size:11px;
}

/* ===== PEQUENA MODAL PARA MIGRAÇÃO DE SUBPRODUTOS ===== */
.modal-copiar-subprodutos{z-index:3200}
.modal-copiar-subprodutos-content{
  width:min(620px,92vw);
  max-width:620px;
  padding:16px !important;
}
.modal-copiar-subprodutos-content h1{font-size:20px}
.modal-copiar-subprodutos-content .sub{font-size:12px;line-height:1.4;margin-bottom:12px}
.lista-copiar-subprodutos-principal{
  display:flex;
  flex-direction:column;
  gap:7px;
  max-height:48vh;
  overflow-y:auto;
}
.item-copia-subproduto{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:9px 10px;
  border:1px solid var(--bege-2);
  border-radius:8px;
  background:var(--branco-2);
  cursor:pointer;
}
.item-copia-subproduto:hover{background:var(--branco)}
.item-copia-subproduto input{
  width:auto;
  margin:3px 0 0;
  padding:0;
  flex:0 0 auto;
  accent-color:var(--marinho);
}
.item-copia-conteudo{
  display:grid;
  grid-template-columns:minmax(120px,1fr) minmax(100px,auto) minmax(70px,auto) minmax(140px,1.2fr);
  align-items:center;
  gap:6px 12px;
  width:100%;
  font-size:11px;
  color:var(--marinho-2);
}
.item-copia-conteudo strong{font-size:12px;color:var(--marinho)}
.item-copia-conteudo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal-copiar-subprodutos-content .actions{margin-top:12px}
@media(max-width:700px){
  .modal-produto-cadastro .subproduto-card .grid{grid-template-columns:1fr 1fr}
  .modal-produto-cadastro .subproduto-card .f.full{grid-column:auto}
  .modal-produto-cadastro .subproduto-card .f:has(.lista-tintas-subproduto){grid-column:1 / -1}
  .item-copia-conteudo{grid-template-columns:1fr 1fr;gap:4px 8px}
}
@media(max-width:480px){
  .modal-produto-cadastro .subproduto-card .grid{grid-template-columns:1fr}
  .item-copia-conteudo{grid-template-columns:1fr}
  .item-copia-conteudo span{white-space:normal}
}

/* ===== CAMPOS E BOTÕES DE MODAIS MAIS LIMPOS ===== */
.modal-overlay .modal-content .btn-add{
  width:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.modal-overlay .modal-content .grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.modal-overlay .modal-content .grid > .f.full:not(#campoVariacaoPedido){
  grid-column:auto;
}
.modal-overlay .modal-content #campoSubprodutoPedido{
  grid-column:auto;
}
.modal-overlay .modal-content #campoVariacaoPedido{
  grid-column:1 / -1;
}
.modal-produto-cadastro form > .f.full:not(.produto-imagem-cadastro){
  max-width:560px;
}
.modal-produto-cadastro .produto-imagem-cadastro{margin-top:14px; max-width:none; }
.modal-produto-cadastro .lista-subprodutos,
.modal-produto-cadastro .lista-variacoes-produto{
  max-width:100%;
}

@media(max-width:700px){
  .modal-overlay .modal-content .grid{grid-template-columns:1fr}
  .modal-overlay .modal-content .grid > .f.full:not(#campoVariacaoPedido){grid-column:auto}
}


/* ===== CADASTRO DE PRODUTO — SUBPRODUTOS EM DUAS ETAPAS ===== */
.acoes-variacoes-observacoes{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:10px 0 14px;
}
.acoes-variacoes-observacoes .btn-add{width:auto;margin-top:0}
.subproduto-formulario{margin-bottom:8px}
.acoes-subproduto-edicao{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-top:8px}
.btn-adicionar-subproduto-form,.btn-alterar-subproduto{
  width:auto!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  padding:7px 12px!important;
  font-size:12px!important;
  margin-top:0!important;
}
.subproduto-resumo{color:var(--marinho-2); display:grid; grid-template-columns:minmax(120px,1.15fr) minmax(75px,.85fr) minmax(65px,.7fr) minmax(100px,1.35fr) auto auto; gap:4px 7px; align-items:center; margin:0; min-height:26px; font-size:11px; line-height:1.15; }
.subproduto-resumo span{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.subproduto-resumo span:first-child{color:var(--marinho); font-weight:800; }
.subproduto-resumido{padding:4px 7px !important; }
.subproduto-resumido .subproduto-cabecalho{margin-bottom:6px}
@media(max-width:700px){
  .subproduto-resumo{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .acoes-variacoes-observacoes{flex-direction:column;align-items:flex-start}
  .subproduto-resumo{grid-template-columns:1fr}
  .subproduto-resumo span{white-space:normal}
}


/* ===== SUBPRODUTO: MODAL ÚNICA PARA ADICIONAR/ALTERAR ===== */
.modal-subproduto-formulario{max-width:760px}
.modal-subproduto-formulario .subproduto-card{border:0;padding:0;background:transparent;box-shadow:none;margin:0}
.modal-subproduto-formulario .subproduto-cabecalho{margin-bottom:10px}
.modal-subproduto-formulario .subproduto-formulario{margin-bottom:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:14px}
.modal-subproduto-formulario .subproduto-formulario-esquerda{display:flex;flex-direction:column;gap:10px;min-width:0}
.modal-subproduto-formulario .tintas-utilizadas-wrap{min-width:0; }
.modal-subproduto-formulario .lista-tintas-subproduto{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 10px; width:100%; }
.modal-subproduto-formulario .tinta-chapa-linha{min-width:0; }
.modal-subproduto-formulario .tinta-selecao-linha{gap:5px; align-items:center; display:block; }
.modal-subproduto-formulario .tinta-selecao-linha select{flex:1; width:100%; min-width:0; }
@media(max-width:700px){.modal-subproduto-formulario .subproduto-formulario{grid-template-columns:1fr}.modal-subproduto-formulario .lista-tintas-subproduto{grid-template-columns:1fr}}
.lista-subprodutos > .subproduto-card,.lista-subprodutos-variacao > .subproduto-card{border:1px solid var(--bege-2);border-radius:8px;padding:9px;background:var(--branco);margin-bottom:8px}




.subproduto-resumo .btn-alterar-subproduto{justify-self:end}
.subproduto-variacao-card .subproduto-resumo{grid-template-columns:minmax(100px,1.2fr) minmax(75px,1fr) minmax(70px,.8fr) minmax(100px,1.4fr) auto}
@media(max-width:700px){
  .modal-subproduto-formulario .lista-tintas-subproduto{grid-template-columns:1fr 1fr}
  .subproduto-resumo,.subproduto-variacao-card .subproduto-resumo{grid-template-columns:1fr 1fr}
  .subproduto-resumo .btn-alterar-subproduto{justify-self:start}
}
@media(max-width:480px){
  .modal-subproduto-formulario .lista-tintas-subproduto{grid-template-columns:1fr}
  .subproduto-resumo,.subproduto-variacao-card .subproduto-resumo{grid-template-columns:1fr}
}

.subproduto-resumo .btn-remover-subproduto-lista{justify-self:end}
@media(max-width:700px){.subproduto-resumo .btn-remover-subproduto-lista{justify-self:start}}


/* ===== SUBPRODUTOS — LINHAS MAIS FINAS E AÇÕES POR ÍCONE ===== */
.lista-subprodutos > .subproduto-card,
.lista-subprodutos-variacao > .subproduto-card{
  border:1px solid var(--bege-2);
  border-radius:6px;
  padding:4px 7px !important;
  background:var(--branco);
  margin-bottom:4px;
}




.subproduto-resumo .btn-alterar-subproduto,
.subproduto-resumo .btn-remover-subproduto-lista{
  justify-self:end;
  width:25px !important;
  min-width:25px !important;
  height:25px !important;
  padding:0 !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  font-size:13px !important;
  line-height:1;
}
.btn-edit-sm,.btn-del-sm{
  width:30px !important;
  min-width:30px !important;
  height:30px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  font-size:14px !important;
  line-height:1;
}

@media(max-width:700px){
  .subproduto-resumo,.subproduto-variacao-card .subproduto-resumo{grid-template-columns:minmax(100px,1fr) minmax(70px,.8fr) minmax(60px,.7fr) minmax(90px,1fr) auto auto}
}
@media(max-width:480px){
  .subproduto-resumo,.subproduto-variacao-card .subproduto-resumo{grid-template-columns:1fr 1fr auto auto}
  .subproduto-resumo span:nth-child(2),.subproduto-resumo span:nth-child(3){white-space:nowrap}
}

/* Todos os botões de edição/exclusão que usam os rótulos antigos agora são compactos e iconográficos. */


/* =========================================================
   SUBPRODUTOS DA MODAL DE CADASTRAR/ALTERAR VARIAÇÃO
   Layout compacto em uma única linha
   ========================================================= */

.modal-variacao-formulario .lista-subprodutos-variacao{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:100%;
}

.modal-variacao-formulario .lista-subprodutos-variacao > .subproduto-card{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--bege-2);
  border-radius:6px;
  padding:4px 7px !important;
  margin:0 0 4px !important;
  background:var(--branco);
}

/* Linha única do subproduto */
.modal-variacao-formulario .lista-subprodutos-variacao > .subproduto-card .subproduto-resumo{
  display:grid;
  grid-template-columns:
    minmax(120px,1.15fr)
    minmax(75px,.85fr)
    minmax(65px,.7fr)
    minmax(100px,1.35fr)
    25px
    25px;
  gap:4px 7px;
  align-items:center;
  width:100%;
  min-height:26px;
  margin:0;
  padding:0;
  font-size:11px;
  line-height:1.15;
}

.modal-variacao-formulario .lista-subprodutos-variacao
.subproduto-resumo span{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.modal-variacao-formulario .lista-subprodutos-variacao
.subproduto-resumo span:first-child{
  color:var(--marinho);
  font-weight:800;
}

/* ALTERAR e EXCLUIR ficam obrigatoriamente lado a lado */
.modal-variacao-formulario .lista-subprodutos-variacao
.subproduto-resumo .btn-alterar-subproduto,
.modal-variacao-formulario .lista-subprodutos-variacao
.subproduto-resumo .btn-remover-subproduto-lista{
  width:25px !important;
  min-width:25px !important;
  height:25px !important;
  padding:0 !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  font-size:13px !important;
  line-height:1;
}

.modal-variacao-formulario .lista-subprodutos-variacao
.subproduto-resumo .btn-alterar-subproduto{
  justify-self:end;
}

.modal-variacao-formulario .lista-subprodutos-variacao
.subproduto-resumo .btn-remover-subproduto-lista{
  justify-self:start;
}

/* Responsivo */
@media(max-width:700px){
  .modal-variacao-formulario .lista-subprodutos-variacao
  .subproduto-resumo{
    grid-template-columns:
      minmax(100px,1fr)
      minmax(70px,.8fr)
      minmax(60px,.7fr)
      minmax(90px,1fr)
      25px
      25px;
  }
}

@media(max-width:480px){
  .modal-variacao-formulario .lista-subprodutos-variacao
  .subproduto-resumo{
    grid-template-columns:
      minmax(0,1fr)
      minmax(70px,.8fr)
      25px
      25px;
  }

  .modal-variacao-formulario .lista-subprodutos-variacao
  .subproduto-resumo span:nth-child(2),
  .modal-variacao-formulario .lista-subprodutos-variacao
  .subproduto-resumo span:nth-child(3){
    white-space:nowrap;
  }
}

/* ===== VARIAÇÃO: MODAL DE CADASTRO/ALTERAÇÃO E LINHA COMPACTA ===== */
.modal-variacao-formulario{
  width:min(860px,94vw);
  max-width:860px;
}
.modal-variacao-formulario .variacao-editor-card{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 220px !important;
  gap:10px 16px;
  align-items:start;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  box-shadow:none;
}

.modal-variacao-formulario .variacao-editor-card > .variacao-observacoes{
  grid-column:1 !important;
  grid-row:1 !important;
  min-width:0;
}

.modal-variacao-formulario .variacao-editor-card > .f.full{
  grid-column:2 !important;
  grid-row:1 !important;
  min-width:0;
  margin-top:0 !important;
  margin-bottom:0;
}

.modal-variacao-formulario .variacao-editor-card > .variacao-subprodutos{
  grid-column:1 / -1 !important;
  grid-row:2 !important;
  min-width:0;
}

.modal-variacao-formulario .variacao-editor-card .variacao-checks{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:4px;
  width:100%;
}

.modal-variacao-formulario .variacao-editor-card .observacao-check{
  width:100%;
  max-width:100%;
  min-height:30px;
  height:30px;
  padding:4px 8px;
  margin:0;
  display:flex;
  align-items:center;
  gap:6px;
  box-sizing:border-box;
  font-size:11px;
  line-height:1;
}

.modal-variacao-formulario .variacao-editor-card .observacao-check input{
  width:auto;
  min-width:auto;
  height:auto;
  margin:0;
  padding:0;
  flex:0 0 auto;
}

@media(max-width:700px){
  .modal-variacao-formulario .variacao-editor-card{
    grid-template-columns:1fr !important;
  }

  .modal-variacao-formulario .variacao-editor-card > .variacao-observacoes{
    grid-column:1 !important;
    grid-row:1 !important;
  }

  .modal-variacao-formulario .variacao-editor-card > .f.full{
    grid-column:1 !important;
    grid-row:2 !important;
  }

  .modal-variacao-formulario .variacao-editor-card > .variacao-subprodutos{
    grid-column:1 !important;
    grid-row:3 !important;
  }
}
.modal-variacao-formulario .variacao-editor-card .variacao-imagem-preview{
  min-height:70px;
  max-height:110px;
  margin-top:7px;
}
.modal-variacao-formulario .variacao-editor-card .variacao-imagem-preview img{
  max-height:100px;
  max-width:140px;
  object-fit:contain;
}
.modal-variacao-formulario .variacao-editor-card .variacao-subprodutos{
  margin-top:12px;
}
.variacao-produto-resumo{
  display:grid;
  grid-template-columns:minmax(0,1fr) 52px auto;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:5px 7px;
  margin:0 0 5px;
  border:1px solid var(--bege-2);
  border-radius:6px;
  background:var(--branco);
}
.variacao-resumo-texto{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.variacao-resumo-texto strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  color:var(--marinho);
}
.variacao-resumo-texto small{
  font-size:10px;
  color:var(--cinza-2);
}
.variacao-resumo-imagem{
  width:52px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:4px;
  background:var(--branco-2);
  font-size:9px;
  color:var(--cinza-2);
}
.variacao-resumo-imagem img{
  display:block;
  max-width:50px;
  max-height:36px;
  object-fit:contain;
}
.variacao-resumo-acoes{
  display:flex;
  align-items:center;
  gap:4px;
}
.variacao-resumo-acoes .btn-edit-sm,
.variacao-resumo-acoes .btn-del-sm{
  width:25px !important;
  min-width:25px !important;
  height:25px !important;
  border-radius:5px;
  font-size:12px !important;
}

@media(max-width:600px){
  .variacao-produto-resumo{grid-template-columns:minmax(0,1fr) 44px auto;gap:6px}
  .variacao-resumo-imagem{width:44px;height:34px}
  .variacao-resumo-imagem img{max-width:42px;max-height:32px}
}

.menu-cadastros button i {
    width: 22px;
    margin-right: 8px;
    text-align: center;
}

/* ===== TINTAS DO SUBPRODUTO — GRADE 2x2 E CADASTRO DE TINTA ===== */
/* As tintas ficam na coluna direita, ocupando toda a altura disponível. */

.modal-subproduto-formulario .tintas-utilizadas-cabecalho{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}
.modal-subproduto-formulario .tintas-utilizadas-cabecalho label{
  margin:0;
}
.modal-subproduto-formulario .btn-cadastrar-tinta-inline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:auto;
  min-height:30px;
  height:30px;
  padding:4px 10px;
  border:1px solid var(--bege-2);
  border-radius:7px;
  background:var(--branco);
  color:var(--marinho);
  font:inherit;
  font-size:11px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
}
.modal-subproduto-formulario .btn-cadastrar-tinta-inline i{
  font-size:11px;
}




@media(max-width:480px){
  .modal-subproduto-formulario .tintas-utilizadas-cabecalho{
    gap:8px;
  }
  .modal-subproduto-formulario .btn-cadastrar-tinta-inline{
    padding:4px 8px;
    font-size:10px;
  }
  .modal-subproduto-formulario .lista-tintas-subproduto{
    grid-template-columns:1fr 1fr;
  }
}

/* ===== MODAL DE PRODUTO — LAYOUT COMPACTO ===== */
.modal-produto-cadastro .produto-dados-principais{
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  gap:18px;
  align-items:start;
  margin-top:8px;
}
.modal-produto-cadastro .produto-dados-campos{min-width:0}

.modal-produto-cadastro .produto-imagem-preview{
  width:250px;
  height:250px;
  margin:0;
  padding:0;
  border:1px solid var(--bege-2);
  border-radius:8px;
  background:var(--branco-2);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.modal-produto-cadastro .produto-imagem-preview img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  margin:0;
}
.modal-produto-cadastro .lista-observacoes-produto{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:10px 0 10px;
}
.modal-produto-cadastro .observacao-produto-card{
  min-width:0;
  max-width:none;
  padding:6px;
  background:var(--branco-2);
  border:1px solid var(--bege-2);
  border-radius:8px;
}
.modal-produto-cadastro .observacao-produto-cabecalho{
  display:grid;
  grid-template-columns:minmax(0,1fr) 32px;
  align-items:center;
  gap:6px;
  margin:0;
}
.modal-produto-cadastro .observacao-produto-input{
  width:100%;
  min-width:0;
  height:32px;
  padding:6px 8px;
  font-size:12px;
  box-sizing:border-box;
}
.modal-produto-cadastro .observacao-produto-cabecalho .btn-remove{
  width:32px;
  height:32px;
  min-width:32px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal-produto-cadastro .acoes-nova-variacao{
  display:flex;
  justify-content:flex-start;
  margin:0 0 14px;
}
.modal-produto-cadastro .acoes-nova-variacao .btn-add{width:auto;margin-top:0}

@media(max-width:700px){
  .modal-produto-cadastro .produto-dados-principais{grid-template-columns:1fr}
  .modal-produto-cadastro .produto-imagem-preview{width:100%;max-width:250px;height:auto;aspect-ratio:1/1}
  .modal-produto-cadastro .lista-observacoes-produto{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .modal-produto-cadastro .lista-observacoes-produto{grid-template-columns:1fr}
}

/* =========================================================
   CADASTRO COMPLETO DE CLIENTES
   ========================================================= */
.modal-cliente-cadastro{max-width:900px;width:min(900px,calc(100vw - 40px));max-height:90vh;overflow-y:auto}
.grid-cliente-cadastro{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.grid-cliente-cadastro .full{grid-column:1/-1}
.grid-endereco-cliente{grid-template-columns:repeat(16,minmax(0,1fr));gap:10px}
/* Primeira linha: CEP pequeno, tipo no tamanho atual, espaço vazio para OUTRO, logradouro e número. */
.grid-endereco-cliente > .f:nth-child(1){grid-column:1 / span 2}
.grid-endereco-cliente > .f:nth-child(2){grid-column:3 / span 3}
.grid-endereco-cliente > .outro-tipo-logradouro{grid-column:6 / span 11}
.grid-endereco-cliente .endereco-logradouro{grid-column:1 / span 13;grid-row:2}
.grid-endereco-cliente .endereco-numero{grid-column:14 / span 3;grid-row:2}
/* Segunda linha: complemento e bairro lado a lado. */
.grid-endereco-cliente > .f:nth-child(6){grid-column:1 / span 6}
.grid-endereco-cliente > .f:nth-child(7){grid-column:7 / span 10}
/* Terceira linha: cidade/município e UF lado a lado, com UF bem estreita. */
.grid-endereco-cliente .cidade-municipio-cliente{grid-column:1 / span 14}
.grid-endereco-cliente > .f:nth-child(9){grid-column:15 / span 2}
.campo-numero-sem-numero{display:flex;gap:6px;align-items:center}
.campo-numero-sem-numero input[type="text"]{min-width:0;flex:1}
.check-sem-numero{display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:11px;font-weight:600;color:var(--marinho-2);cursor:pointer}
.check-sem-numero input{width:auto;margin:0}
.outro-tipo-logradouro[hidden]{display:none!important}

/* Miniaturas de produtos: ocupam todo o quadrado sem distorcer a imagem. */



@media (max-width:700px){
  .grid-cliente-cadastro,.grid-endereco-cliente{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-endereco-cliente > .f,
  .grid-endereco-cliente .endereco-logradouro,
  .grid-endereco-cliente .endereco-numero,
  .grid-endereco-cliente .cidade-municipio-cliente,
  .grid-endereco-cliente .outro-tipo-logradouro{grid-column:span 2}
}
@media (max-width:480px){
  .grid-cliente-cadastro,.grid-endereco-cliente{grid-template-columns:1fr}
  .grid-endereco-cliente > .f,
  .grid-endereco-cliente .endereco-logradouro,
  .grid-endereco-cliente .endereco-numero,
  .grid-endereco-cliente .cidade-municipio-cliente,
  .grid-endereco-cliente .outro-tipo-logradouro{grid-column:auto}
  .campo-numero-sem-numero{align-items:center;flex-direction:row}
}


.cep-com-botao{display:flex;gap:6px;align-items:stretch}
.cep-com-botao input{min-width:0;flex:1}
.btn-pesquisar-cep{width:42px;flex:0 0 42px;padding:0;border:1px solid var(--bege-2);border-radius:7px;background:var(--marinho);color:var(--branco);cursor:pointer}
.btn-pesquisar-cep:hover{opacity:.9}
.logradouro-pesquisa-cep{display:flex;gap:6px;align-items:stretch}
.logradouro-pesquisa-cep input{min-width:0;flex:1}
.logradouro-pesquisa-cep .btn-pesquisar-cep{height:auto}
.modal-pesquisa-cep{max-width:760px;width:min(760px,calc(100vw - 40px));max-height:90vh;overflow-y:auto}
.grid-pesquisa-cep{display:grid;grid-template-columns:1fr 2fr 2fr;gap:10px}
.grid-pesquisa-cep .full{grid-column:1/-1}
.resultados-pesquisa-cep{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto;margin-top:10px}
.resultado-cep-item{display:grid;grid-template-columns:1fr auto;gap:3px 12px;text-align:left;padding:11px 13px;border:1px solid var(--bege-2);border-radius:7px;background:var(--branco);cursor:pointer}
.resultado-cep-item strong{font-size:13px;color:var(--marinho)}
.resultado-cep-item span{font-size:11px;color:var(--marinho-2)}
.resultado-cep-item b{grid-column:2;grid-row:1 / span 2;align-self:center;white-space:nowrap;font-size:12px;color:var(--marinho)}
@media (max-width:700px){
  .grid-pesquisa-cep{grid-template-columns:1fr 1fr}
  .grid-pesquisa-cep .full{grid-column:1/-1}
}
@media (max-width:480px){
  .grid-pesquisa-cep{grid-template-columns:1fr}
  .grid-pesquisa-cep .full{grid-column:auto}
}

.modal-maquina-cadastro{max-width:900px}

/* =========================================================
   PADRÃO UNIFICADO DAS MODAIS DE LISTAGEM
   ========================================================= */
.modal-lista-cadastros,
#modalGerenciarClientes .modal-content,
#modalGerenciarMaquinas .modal-content,
#modalGerenciarStatus .modal-content{
  width:min(900px,calc(100vw - 40px));
  max-width:900px;
}

.cadastro-lista-topo{
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 0 10px;
}
.cadastro-lista-topo .campo-pesquisa-produtos{
  flex:1;
  margin:0;
}
.cadastro-lista-topo > .primary{
  flex:0 0 auto;
  white-space:nowrap;
}

#modalGerenciarClientes .lista-clientes-gerenciamento,
#modalGerenciarMaquinas .lista-clientes-gerenciamento,
#modalGerenciarStatus .lista-status-gerenciamento,
#modalListaTintas .lista-cadastros{
  max-height:55vh;
  overflow-y:auto;
  margin:10px 0 16px;
  padding:8px;
  border:1px solid var(--bege-2);
  border-radius:10px;
  background:var(--branco-2);
}

#modalGerenciarClientes .item-cliente-gerenciar,
#modalGerenciarMaquinas .item-cliente-gerenciar{
  width:100%;
  min-height:58px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
  background:var(--branco-2);
  border:1px solid var(--bege-2);
  border-radius:9px;
  padding:7px 9px 7px 14px;
  margin-bottom:8px;
}
#modalGerenciarClientes .item-cliente-gerenciar:last-child,
#modalGerenciarMaquinas .item-cliente-gerenciar:last-child{margin-bottom:0}
#modalGerenciarClientes .item-cliente-gerenciar:hover,
#modalGerenciarMaquinas .item-cliente-gerenciar:hover{
  background:var(--bege);
  border-color:var(--ouro-2);
}

/* Miniatura: ocupa toda a caixa. O zoom elimina a margem interna das artes sem deformar. */


/* A modal de edição de máquina é propositalmente menor. */
.modal-editar-maquina{
  width:min(450px,calc(100vw - 40px)) !important;
  max-width:450px !important;
}

/* Gerenciar status segue a mesma largura das demais modais de gerenciamento. */


@media(max-width:700px){
  .cadastro-lista-topo{align-items:stretch;flex-direction:column}
  .cadastro-lista-topo > .primary{width:100%}
  .modal-editar-maquina{width:calc(100vw - 40px) !important;max-width:none !important}
}

/* =========================================================
   NOVO FLUXO DE STATUS / SUBPRODUTOS
   ========================================================= */
.subprodutos-f { grid-column: 1 / -1; min-width: 0; }
.subprodutos-selecao {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:7px;
  width:100%;
}
.subproduto-opcao {
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) 70px;
  align-items:center;
  gap:6px;
  min-width:0;
  padding:6px 8px;
  border:1px solid #d5d5d5;
  border-radius:7px;
  background:#fff;
}
.subproduto-opcao input[type="checkbox"] { width:18px; height:18px; }
.subproduto-nome { font-weight:600; min-width:0; overflow-wrap:anywhere; }
.subproduto-qtd { width:100%; box-sizing:border-box; min-width:0; }
.subprodutos-aviso { font-size:12px; opacity:.75; padding:8px 0; }
@media (max-width: 560px){
  .subprodutos-selecao{grid-template-columns:repeat(2,minmax(0,1fr));}
}

.acoes-status-comercial {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 8px 0;
}
.pedido-impresso {
  background:#dff3df !important;
  border-color:#62a862 !important;
}
.btn-enviar-pacote, .btn-concluir-servico {
  width:100%;
  height:42px;
  border:0;
  border-radius:6px;
  padding:10px 12px;
  margin-top:7px;
  cursor:pointer;
  font-weight:700;
}
.btn-enviar-pacote { background:#e9c46a; flex:1;margin:0;}
.btn-concluir-servico { background:#8bcf8b; }
.acoes-pacote {
  display:flex;
  align-items:stretch;
  gap:6px;
  width:100%;
  margin-top:7px;
}
.acoes-pacote .btn-voltar-pacote {margin-top:0; width:42px; min-width:42px; flex:0 0 42px; padding:10px 8px; display:inline-flex; align-items:center; justify-content:center; }
.acoes-pacote .btn-concluir-servico {
  flex:1 1 auto;
  width:auto;
  margin-top:0;
}
.acoes-pacote .btn-ficha-pacote {
  flex:0 0 42px;
  width:42px;
  min-width:42px;
  height:42px;
  padding:10px 8px;
  margin-top:0;
  border:0;
  border-radius:7px;
  background:var(--bege);
  color:var(--marinho);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.acoes-pacote .btn-ficha-pacote:hover {
  filter:brightness(.96);
}

.ficha-detalhes-producao { margin-top:16px; padding:12px; border-top:2px solid #111; text-align:left; font-size:13px; }
.ficha-detalhes-producao h3 { margin:0 0 10px; font-size:14px; }
.ficha-detalhe-sub { margin-top:10px; padding:9px; border:1px solid #bbb; }
.ficha-detalhe-sub div { margin:3px 0; }
.ficha-total-titulo { font-size: 20px; font-weight:bold; }

/* Ações da lista de produtos cadastrados */
.acoes-produto-lista{
  flex:0 0 auto;
  align-items:center;
}
.acoes-produto-lista .btn-acao-sm{
  width:34px;
  height:34px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-ficha-producao-pedido{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.btn-editar-pedido-sm{
  height: 25px;   width:25px;
  display: flex;
  justify-content: center; /* centraliza na horizontal */
  align-items: center;     /* centraliza na vertical */
}
}


.btn-enviar-producao{
  width:100%;
  height: 42px;  
  border:0;
  border-radius:7px;
  padding:10px 12px;
  margin-top:0;
  cursor:pointer;
  font-weight:700;
}
.acoes-status-comercial .btn-enviar-producao{
  background:#e9c46a;
  width:100%;
  box-sizing:border-box;
  height:42px;
  border-radius:6px;
  margin-top:6px;
}
.acoes-status-comercial .btn-enviar-producao:hover{
  filter:brightness(.96);
}



/* =========================================================
   ESTILOS EXTRAÍDOS DOS HTMLs E DAS FICHAS GERADAS
   ========================================================= */
.logo-topo{height:35px;vertical-align:middle;margin-right:50px}
.icone-btn-novo-pedido{font-size:20px;vertical-align:middle}
.campo-produto-linha{display:flex;align-items:center;gap:8px;width:100%}
.campo-produto-select{flex:1}
.btn-voltar-impresso{width:42px;min-width:42px;padding:10px 8px;margin:0}
.btn-pacote-acao{flex:1;margin:0}
.acoes-status-pacote{display:flex;align-items:center;gap:6px;width:100%}
.filtro-produto-relatorio{flex:1.5;min-width:160px}

/* Relatórios abertos em about:blank usam exatamente a mesma folha de estilo. */


/* Elementos que antes usavam estilos inline no HTML */
.logo-cabecalho{
  height:35px;
  vertical-align:middle;
  margin-right:50px;
}
.icone-novo-pedido{
  font-size:20px;
  vertical-align:middle;
}
.produto-selecao-inline{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
}
.produto-selecao{
  flex:1;
}.acoes-status-impresso{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
}

/* =========================================================
   PEDIDOS PARA GRÁFICA
   ========================================================= */
.painel-pedidos-grafica{margin-bottom:15px}
.titulo-pedidos-grafica{font-size:18px;margin:0}
.sub-pedidos-grafica{margin:4px 0 0;color:var(--marinho-2);font-size:12px}
.lista-pedidos-grafica-painel{display:flex;flex-direction:column;gap:8px}
.pedido-grafica-painel-card{border:1px solid var(--bege);border-radius:9px;padding:0;background:var(--branco);overflow:hidden}
.pedido-grafica-painel-linha{min-width:0;display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer;user-select:none}
.pedido-grafica-painel-linha:hover{background:var(--branco-2)}
.pedido-grafica-painel-linha-concluido{background:var(--verde);border-color:var(--verde-2)}
.pedido-grafica-painel-linha-concluido:hover{background:var(--verde)}
.pedido-grafica-painel-linha .seta-toggle-pedido-grafica{width:24px;height:24px;flex:0 0 24px;font-size:12px}
.pedido-grafica-painel-resumo{display:flex;align-items:center;gap:7px;min-width:0;flex:1;color:var(--marinho)}
.pedido-grafica-painel-resumo b{white-space:nowrap}
.pedido-grafica-painel-resumo span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:bold}
.pedido-grafica-painel-detalhes{padding:0 10px 10px;border-top:1px solid var(--bege-2)}
.pedido-grafica-painel-detalhes[hidden]{display:none}
.pedido-grafica-status-atual{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;border-radius:999px;background:var(--bege);color:var(--marinho);font-size:11px;font-weight:bold;text-align:center}
.pedido-grafica-miniatura{display:block;max-width:100%;max-height:160px;object-fit:contain;margin:10px auto;border:1px solid var(--bege-2);border-radius:6px;background:var(--branco)}
.pedido-grafica-observacoes{margin:10px 0;font-size:12px;color:var(--marinho-2)}
.pedido-grafica-status-frame{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 72px;gap:8px;margin-top:10px;align-items:stretch}
.pedido-grafica-controle-status{display:flex;align-items:center;gap:8px;min-width:0}
.pedido-grafica-controle-status label,.pedido-grafica-outro-wrap label{font-size:11px;font-weight:bold;color:var(--marinho);white-space:nowrap}
.select-status-grafica{flex:1;min-width:0}
.pedido-grafica-outro-wrap{display:flex;align-items:center;gap:6px;min-width:0}
.pedido-grafica-outro-wrap[hidden]{display:flex !important;visibility:hidden;pointer-events:none}
.input-status-grafica-outro{flex:1;min-width:0}
.pedido-grafica-outro-wrap button{white-space:nowrap}
.btn-concluir-grafica{width:165px;min-width:165px;padding:7px 10px;margin-top:0;box-sizing:border-box;border:0;border-radius:5px;background:var(--ouro);color:var(--branco);font-weight:700;cursor:pointer;white-space:nowrap;text-align:center}
.btn-concluir-grafica:hover{background:var(--ouro-2)}
.pg-status-linha{display:flex;align-items:center;gap:8px;margin-top:12px}
.pg-status-linha label{font-size:11px;font-weight:bold;color:var(--marinho);white-space:nowrap}
.pg-status-linha select{flex:1;min-width:0}
.pg-outro{display:flex;align-items:center;gap:8px;margin-top:8px}
.pg-outro[hidden]{display:none}
.pg-outro input{flex:1;min-width:0}
.pg-outro button{white-space:nowrap}
.pg-concluir:hover{background:var(--ouro-2)}
.pg-wrap{width:min(100%,1100px);margin:0 auto;padding:15px;box-sizing:border-box}
.pg-titulo-bloco{background:var(--branco);padding:16px 20px;border-radius:12px;margin-bottom:15px;box-shadow:0 1px 4px var(--preto-10)}
.pg-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pg-card{border:1px solid var(--bege);border-radius:9px;padding:10px;margin:0;background:var(--branco);box-sizing:border-box;min-width:0}
.pg-card-concluido{background:var(--verde);border-color:var(--verde-2)}
.pg-card-concluido:hover{background:var(--verde)}
.pg-card h2{font-size:14px;margin:5px 0;color:var(--marinho)}
.pg-card > img.pg-imagem-referencia{display:block;width:100%;max-width:100%;height:150px;object-fit:contain;margin:8px auto;border:1px solid var(--bege-2);border-radius:6px;background:var(--branco);cursor:zoom-in}
.pg-concluir{width:auto;min-width:120px;margin-top:10px;padding:8px 14px;background:var(--ouro);color:var(--branco)}
.pg-meta{font-size:12px;color:var(--marinho-2);display:flex;justify-content:space-between;gap:5px}
.pg-card p{font-size:12px;margin:7px 0;color:var(--marinho-2)}
.pg-status-linha{margin-top:8px}
.pg-alerta.ativo{display:block}
@media(max-width:900px){.pg-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.pg-lista{grid-template-columns:1fr}}


/* Controles dos pedidos de gráfica no painel principal */
.pedido-grafica-imagem-frame{width:72px;min-height:58px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid var(--bege-2);border-radius:6px;background:var(--branco);overflow:hidden}
.pedido-grafica-miniatura{width:60px;height:60px;max-width:60px;max-height:60px;object-fit:contain;margin:0;border:0;border-radius:4px;background:var(--branco);cursor:zoom-in}
.pedido-grafica-acoes-extra{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:10px;flex-wrap:wrap}
.pedido-grafica-acoes-direita{display:flex;flex-direction:column;align-items:flex-end;gap:0;margin-left:auto}
.pedido-grafica-prioridade{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--marinho)}
.btn-prioridade-grafica{width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--bege-2);border-radius:5px;background:var(--bege);color:var(--marinho);cursor:pointer}
.btn-prioridade-grafica:disabled{opacity:.45;cursor:not-allowed}
.btn-editar-pedido-grafica{width:165px;min-width:165px;padding:7px 10px;box-sizing:border-box;border:0;border-radius:5px;background:var(--marinho);color:var(--branco);font-weight:700;cursor:pointer;white-space:nowrap;text-align:center}
.btn-editar-pedido-grafica:hover{filter:brightness(.96)}

/* Pedidos de gráfica: prioridade e edição */
.pg-prio{display:flex;align-items:center;gap:5px;margin-top:10px;font-size:11px;color:var(--marinho)}
.pg-prio button{width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--bege-2);border-radius:5px;background:var(--bege);color:var(--marinho);cursor:pointer}
.pg-prio button:disabled{opacity:.45;cursor:not-allowed}
.pg-prio button:hover:not(:disabled){filter:brightness(.96)}

/* Modal Pedido Gráfica — descrição e imagem na mesma linha, prévia abaixo. */
.pedido-grafica-primeira-linha{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,0.55fr);gap:12px;align-items:end}
#modalPedidoGrafica .pedido-grafica-primeira-linha .f{min-width:0}
#modalPedidoGrafica .pedido-grafica-primeira-linha .file{width:100%;box-sizing:border-box}
#modalPedidoGrafica #pgDescricao{height:40px;box-sizing:border-box}
#modalPedidoGrafica #pgPreview{display:none;margin-top:12px;padding:10px;border:1px solid var(--bege-2);border-radius:8px;background:var(--branco-2);text-align:center;min-height:0}
#modalPedidoGrafica #pgPreview img{display:block;max-width:100%;max-height:220px;width:auto;height:auto;object-fit:contain;margin:0 auto;border-radius:6px;cursor:pointer}
@media(max-width:700px){.pedido-grafica-primeira-linha{grid-template-columns:1fr}}