/* =========================================================================
   VISUAL DO SISTEMA — camada de aparência.
   Carregada por último: nada aqui muda função, rota, evento ou validação.

   Se este arquivo for removido do index.html, o sistema volta ao visual
   anterior inteiro e continua funcionando. É proposital: a aparência tem
   que poder ser revertida sem tocar em lógica.
   ========================================================================= */

:root{
 /* Cores de identidade */
 --azul:#2563eb; --azul-escuro:#1d4ed8; --azul-claro:#eff5ff;
 --verde:#16a34a; --verde-claro:#e9f8ef;
 --laranja:#f97316; --laranja-claro:#fff3e8;
 --vermelho:#dc2626; --vermelho-claro:#fdecec;
 --roxo:#9333ea; --roxo-claro:#f6edff;
 --ciano:#0891b2; --ciano-claro:#e6f7fb;
 --ambar:#f59e0b; --turquesa:#0d9488;
 --rosa:#e11d70; --rosa-claro:#fdeaf2;
 --cinza:#64748b; --cinza-claro:#f1f5f9;

 --tinta:#172238; --tinta-fraca:#64748b;
 --borda:#e3e8f0; --fundo:#f5f7fb;

 /* Sombra suave: dois níveis, sem peso de caixa flutuante */
 --sombra:0 1px 2px #17223809, 0 6px 20px #1722380a;
 --sombra-alta:0 8px 30px #17223818;
 --raio:14px; --raio-pequeno:10px;
}

body{background:var(--fundo)}

/* Regularização de etiquetas: preserva a tabela e os controles nativos. */
#page.regularization-page{align-self:flex-start;margin:0 auto;padding:32px;background:linear-gradient(135deg,#f2f7ff,#f8fbff);color:#14234b}
.regularization-page>.heading{gap:24px;margin-bottom:24px}
.regularization-page .heading .eyebrow{font-size:13px;font-weight:500;letter-spacing:0;color:#58729c;margin:0 0 14px}
.regularization-page .heading h1{font-size:32px;letter-spacing:-.8px;margin:0 0 8px}
.regularization-page .regularization-subtitle{font-size:16px;color:#5d739b;margin:0;line-height:1.6}
.regularization-page .heading .muted{font-size:12px;color:#6b7e9e;margin:8px 0 0}
.regularization-page .heading>.button{flex-shrink:0}
.regularization-page>.erp-actions:empty{display:none}
.regularization-page>.regularization-panel{padding:22px;background:#fff;border:1px solid #e0e9f8;border-radius:var(--raio);box-shadow:0 3px 14px #214b9409;min-width:0}
.regularization-panel>.erp-actions{gap:12px;margin:0 0 22px}
.regularization-panel>.erp-actions button{gap:10px;padding:12px 18px;background:#f8fbff;border-color:#c5d9fa;color:#125dcc}
.regularization-panel>.erp-actions button:first-child{background:#0963ed;border-color:#0963ed;color:#fff}
.regularization-panel>.erp-actions .ico{width:21px;height:21px}
.regularization-title{display:flex;align-items:center;gap:12px;font-size:18px;margin:0 0 20px}
.regularization-title .ico{box-sizing:content-box;width:23px;height:23px;padding:10px;border-radius:11px;background:#eaf2ff;color:#0963ed}
.regularization-panel>.erp-details{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px 16px;margin:0;align-items:baseline}
.regularization-panel>.erp-details>dt{font-size:12px;color:#5d739b;padding:10px 12px;background:#f4f7fc;border-radius:8px}
.regularization-panel>.erp-details>dd{min-width:0;margin:0;font-variant-numeric:tabular-nums}
.regularization-panel>.erp-details>dt:has(+dd>.table-wrap),.regularization-panel>.erp-details>dd:has(>.table-wrap){grid-column:1/-1}
.regularization-panel>.erp-details>dt:has(+dd>.table-wrap){padding:0;background:none;font-weight:600}
.regularization-panel>.erp-details>dd:has(>.table-wrap){margin-bottom:10px}
.regularization-page .regularization-panel .table-wrap{max-width:100%;max-height:65vh;overflow:auto;border:1px solid #e6edf8;border-radius:10px;scrollbar-width:thin;scrollbar-color:#b8cae4 #f4f7fc}
.regularization-page .regularization-table{width:100%;min-width:1500px;table-layout:auto;font-size:13px}
.regularization-page .regularization-table>thead>tr>th{padding:13px 16px;background:#f3f7fd;color:#536e98;font-weight:600;white-space:nowrap;position:sticky;top:0;z-index:1;border-bottom:1px solid #e3ebf6}
.regularization-page .regularization-table>tbody>tr>td{padding:18px 16px;vertical-align:top;white-space:nowrap;overflow-wrap:normal;line-height:1.65;border-bottom:1px solid #eaf0f8}
.regularization-table>tbody>tr:hover{background:#fbfdff}
.regularization-table>tbody>tr:last-child>td{border-bottom:0}
.regularization-page .regularization-table .regularization-description{min-width:250px;max-width:340px;white-space:normal;word-break:normal;overflow-wrap:normal}
.regularization-page .regularization-table .regularization-date{min-width:210px;font-variant-numeric:tabular-nums}
.regularization-page .regularization-table .regularization-quantity{text-align:right;font-variant-numeric:tabular-nums}
.regularization-badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:8px;font-size:12px;line-height:1.5;white-space:nowrap;background:#f0f3f8;color:#596b84}
.regularization-badge.pending{background:#fff3df;color:#a05d06}
.regularization-badge.item-type{background:#eaf3ff;color:#165ec8}
.regularization-page .regularization-table summary{min-height:36px;padding:7px 12px;background:#edf5ff;color:#125dc9;border:1px solid #dce9fc;border-radius:8px;white-space:nowrap;font-size:12px}
.regularization-page .regularization-table details[open]{min-width:300px;max-width:650px;white-space:normal}
.regularization-page .regularization-table details[open]>summary{margin-bottom:12px}
.regularization-page button:focus-visible,.regularization-page .button:focus-visible,.regularization-page summary:focus-visible{outline:3px solid #91baff;outline-offset:3px}
@media(max-width:900px){#page.regularization-page{padding:24px 20px}.regularization-page>.heading{align-items:flex-start}.regularization-page .heading h1{font-size:28px}}
@media(max-width:600px){#page.regularization-page{padding:20px 14px}.regularization-page>.heading{flex-wrap:wrap;gap:14px}.regularization-page .heading h1{font-size:26px}.regularization-page>.regularization-panel{padding:16px}.regularization-panel>.erp-actions{gap:10px}.regularization-panel>.erp-details{grid-template-columns:85px minmax(0,1fr);gap:10px}.regularization-title{font-size:17px}}

/* Etiquetas / Recebimentos: os próprios botões recebem aparência de cards. */
#page.labels-page{align-self:flex-start;margin:0 auto;padding:32px;background:linear-gradient(135deg,#f2f7ff,#f8fbff);color:#14234b}
.labels-page>.heading{gap:24px;margin-bottom:24px}
.labels-page .heading .eyebrow{font-size:13px;font-weight:500;letter-spacing:0;color:#58729c;margin:0 0 14px}
.labels-page .heading h1{font-size:32px;letter-spacing:-.8px;margin:0 0 8px}
.labels-page .labels-subtitle{font-size:16px;color:#5d739b;margin:0;line-height:1.6}
.labels-page .heading .muted{font-size:12px;color:#6b7e9e;margin:8px 0 0}
.labels-page .heading>.button{flex-shrink:0}
.labels-page>.erp-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:0 0 24px}
.labels-page .labels-action{--action-color:#0963ed;--action-wash:#eaf2ff;--action-edge:#d7e5ff;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;gap:0;padding:22px 20px;min-width:0;min-height:270px;background:#fff;border:1px solid var(--action-edge);border-radius:var(--raio);box-shadow:0 3px 14px #214b9409;color:#14234b;white-space:normal}
.labels-page .labels-action.green{--action-color:#087f6b;--action-wash:#e6f8f3;--action-edge:#d3eee7}
.labels-page .labels-action.purple{--action-color:#7545d6;--action-wash:#f0eaff;--action-edge:#e4d9ff}
.labels-page .labels-action.orange{--action-color:#b96706;--action-wash:#fff3df;--action-edge:#f4e5cc}
.labels-action-icon{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:16px;background:var(--action-wash);color:var(--action-color);margin-bottom:18px}
.labels-action-icon .ico{width:31px;height:31px}
.labels-action-title{font-size:18px;line-height:1.35;font-weight:700;letter-spacing:-.3px;margin-bottom:9px}
.labels-action-description{font-size:14px;line-height:1.7;font-weight:400;color:#60769c;margin-bottom:18px}
.labels-action-arrow{display:flex;align-items:center;justify-content:center;align-self:flex-end;width:38px;height:38px;border-radius:50%;background:var(--action-wash);color:var(--action-color);margin-top:auto}
.labels-action-arrow .ico{width:20px;height:20px}
.labels-page .labels-action:hover:not(:disabled){background:#fbfdff;border-color:var(--action-color);filter:none}
.labels-page .labels-action:focus-visible,.labels-page .button:focus-visible{outline:3px solid #91baff;outline-offset:3px}
.labels-page>[data-main].panel:has(>.labels-info){padding:22px 24px;border:1px solid #c8dfff;border-radius:var(--raio);background:#edf6ff;box-shadow:none}
.labels-info{display:flex;align-items:center;gap:20px}
.labels-info-icon{display:flex;align-items:center;justify-content:center;flex:0 0 58px;height:58px;border-radius:50%;background:#deedff;color:#0963ed}
.labels-info-icon .ico{width:30px;height:30px}
.labels-info h2{font-size:17px;margin:0 0 6px}
.labels-info p{font-size:14px;color:#5d739b;margin:0;line-height:1.7}
@media(max-width:1200px){.labels-page>.erp-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.labels-page .labels-action{min-height:250px}}
@media(max-width:760px){#page.labels-page{padding:24px 18px}.labels-page>.heading{flex-wrap:wrap;align-items:flex-start;gap:16px}.labels-page .heading h1{font-size:27px}.labels-page>.erp-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.labels-page .labels-action{padding:20px 16px}.labels-info{align-items:flex-start;gap:14px}.labels-page>[data-main].panel:has(>.labels-info){padding:18px}}
@media(max-width:480px){#page.labels-page{padding:20px 14px}.labels-page>.erp-actions{grid-template-columns:minmax(0,1fr)}.labels-page .labels-action{min-height:0;padding:20px}.labels-action-icon{width:50px;height:50px;margin-bottom:14px}.labels-action-description{margin-bottom:12px}.labels-info-icon{flex-basis:42px;height:42px}.labels-info-icon .ico{width:25px;height:25px}}

/* Configurações > Motivos de perdas: apresentação isolada da listagem. */
#page.loss-reasons-page{align-self:flex-start;margin:0 auto;padding:28px 32px 36px;background:linear-gradient(135deg,#f2f7ff,#f8fbff);color:#14234b}
.loss-reasons-page>.heading{margin-bottom:22px;gap:24px}
.loss-reasons-page .heading .eyebrow{font-size:13px;font-weight:500;letter-spacing:0;color:#58729c;margin:0 0 14px}
.loss-reasons-page .heading h1{font-size:30px;letter-spacing:-.8px;margin:0 0 6px}
.loss-reasons-page .loss-reasons-subtitle{font-size:16px;color:#5d739b;margin:0}
.loss-reasons-page .heading .muted{font-size:12px;margin:8px 0 0;color:#6b7e9e}
.loss-reasons-page>.erp-actions{margin-bottom:18px}
.loss-reasons-page>.erp-actions .primary{background:#0863f7;border-color:#0863f7;padding:12px 20px;gap:10px;box-shadow:0 3px 10px #2563eb12}
.loss-reasons-page>.erp-actions .ico{width:22px;height:22px}
.loss-reasons-main.panel{border:0;background:transparent;box-shadow:none;padding:0;margin:0}
.loss-reasons-info{display:flex;align-items:center;gap:16px;padding:18px 20px;background:#edf6ff;border:1px solid #c8dfff;border-radius:11px;margin-bottom:18px}
.loss-reasons-info>.ico{width:38px;height:38px;color:#0863f7;flex-shrink:0}
.loss-reasons-info h2{font-size:16px;margin:0 0 3px}
.loss-reasons-info p{margin:0;color:#526c97;font-size:14px}
.loss-reasons-list{background:#fff;border:1px solid #e2ebf8;border-radius:13px;padding:18px 20px;box-shadow:0 3px 15px #1c509009;min-width:0}
.loss-reasons-list-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.loss-reasons-list-heading h2{display:flex;align-items:center;gap:16px;margin:0;font-size:17px}
.loss-reason-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;border-radius:11px;background:#edf4ff;color:#1760d4}
.loss-reason-icon .ico{width:22px;height:22px}
.loss-reason-icon.damage{background:#edf7f5;color:#3c7270}
.loss-reason-icon.neutral{background:#f0f3f8;color:#61708a}
.loss-reasons-count{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid #d6e6ff;background:#f4f9ff;border-radius:9px;color:#135dce;white-space:nowrap;font-size:12px}
.loss-reasons-table{width:100%;table-layout:fixed;white-space:normal;font-size:14px}
.loss-reasons-table th{background:#f5f8fd;color:#536e98;font-weight:600;padding:12px 16px;text-align:left}
.loss-reasons-table th:first-child{width:48%}
.loss-reasons-table th:nth-child(2){width:19%}
.loss-reasons-table th:nth-child(3){width:16%}
.loss-reasons-table th:last-child{width:17%;text-align:right}
.loss-reasons-table td{padding:9px 16px;border-bottom:1px solid #eaf0f8;vertical-align:middle}
.loss-reasons-table tbody tr:last-child td{border-bottom:0}
.loss-reasons-table tbody tr:hover{background:#fafdff}
.loss-reason-name{display:flex;align-items:center;gap:18px;line-height:1.5;overflow-wrap:anywhere}
.loss-reason-type,.loss-reason-status{display:inline-flex;align-items:center;gap:8px;border-radius:8px;padding:6px 10px;font-size:12px;line-height:1.4}
.loss-reason-type{background:#f0f3f8;color:#56657c;overflow-wrap:anywhere}
.loss-reason-type.validity{background:#eaf4ff;color:#125bc3}
.loss-reason-type.damage{background:#fff2e8;color:#a64f0a}
.loss-reason-status{white-space:nowrap}
.loss-reason-status.active{background:#eafaf1;color:#16763f}
.loss-reason-status.inactive{background:#f0f2f6;color:#606b7b}
.loss-reason-status:before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor}
.loss-reasons-table .loss-reason-actions{text-align:right}
.loss-reason-actions button{min-height:40px;padding:8px 14px;gap:9px;border-color:#d3dff0;background:#f9fbff;color:#20375c;white-space:nowrap}
.loss-reasons-table .loss-reasons-empty{text-align:center;padding:36px;color:#657893}
.loss-reasons-page .button:focus-visible,.loss-reasons-page button:focus-visible{outline:3px solid #91baff;outline-offset:3px}
@media(max-width:900px){#page.loss-reasons-page{padding:24px 20px}.loss-reasons-table th:first-child{width:40%}.loss-reasons-table th:nth-child(2){width:22%}.loss-reasons-table th:nth-child(3){width:18%}.loss-reasons-table th:last-child{width:20%}.loss-reasons-table th,.loss-reasons-table td{padding-left:10px;padding-right:10px}.loss-reason-name{gap:10px}}
@media(max-width:600px){#page.loss-reasons-page{padding:20px 14px}.loss-reasons-page>.heading{align-items:flex-start;flex-wrap:wrap;gap:14px}.loss-reasons-page .heading h1{font-size:27px}.loss-reasons-list{padding:16px 12px}.loss-reasons-list-heading{align-items:flex-start;flex-wrap:wrap;gap:12px}.loss-reasons-list-heading h2{font-size:16px;gap:10px}.loss-reasons-info{padding:16px;align-items:flex-start}.loss-reasons-table{min-width:590px}.loss-reasons-list .table-wrap{overflow-x:auto}.loss-reasons-page>.erp-actions .primary{width:100%}}

/* Tela inicial: estilos locais, mantendo os componentes e ações existentes. */
#page.dashboard-home{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-content:start;margin:0 auto;padding:32px;background:linear-gradient(135deg,#f1f6ff 0%,#f8fbff 65%,#f1f7ff 100%);color:#14234b}
.dashboard-home>.heading,.dashboard-home>.dashboard-summary,.dashboard-home>.dashboard-grid{grid-column:1/-1}
.dashboard-home>.heading{grid-row:1;margin:0;padding:4px 4px 8px}
.dashboard-home .heading h1{font-size:32px;letter-spacing:-1px;margin:5px 0}
.dashboard-home .heading p{margin:0}
.dashboard-home .heading .primary{min-height:56px;gap:16px;padding:14px 24px;background:#0963ff;border-color:#0963ff;box-shadow:0 5px 14px #2563eb20}
.dashboard-home .heading .primary .ico{width:25px;height:25px}
.dashboard-home .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.dashboard-home .panel,.dashboard-summary.panel{margin:0;border:1px solid #e0e9f8;box-shadow:0 3px 14px #214b9410;border-radius:14px;padding:22px;min-width:0}
.dashboard-home h2{display:flex;align-items:center;gap:16px;font-size:17px;letter-spacing:-.3px;margin:0 0 16px}
.dashboard-home .muted,.dashboard-home small,.dashboard-summary .muted,.dashboard-summary small{color:#61749a}
.dashboard-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 46px;width:46px;height:46px;border-radius:13px;background:#e8f1ff;color:#0863f7}
.dashboard-icon .ico{width:26px;height:26px}
.dashboard-icon-amber{background:#fff3dc;color:#c87900}
.dashboard-summary-title{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.dashboard-summary-title h2{margin:0 0 4px;font-size:18px}
.dashboard-summary-title p{margin:0}
.dashboard-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dashboard-stat{--metric:#165ed3;--wash:#f0f7ff;--edge:#cce1ff;display:flex;align-items:flex-start;gap:16px;min-width:0;padding:22px 18px;border:1px solid var(--edge);border-radius:11px;background:var(--wash)}
.dashboard-stat.revenue{--metric:#087e68;--wash:#effbf7;--edge:#c2eade}
.dashboard-stat.quantity{--metric:#7043cd;--wash:#f7f3ff;--edge:#dfd3fc}
.dashboard-stat.deliveries{--metric:#b45d08;--wash:#fffaef;--edge:#ffe4b5}
.dashboard-stat .dashboard-icon{color:var(--metric);background:white}
.dashboard-stat h3{margin:2px 0 10px;color:var(--metric);font-size:13px;font-weight:600}
.dashboard-stat strong{display:block;color:#112048;font-size:clamp(23px,2vw,30px);line-height:1.2;letter-spacing:-.7px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dashboard-stat small{margin-top:7px;font-size:12px}
.dashboard-source{display:flex;align-items:flex-start;gap:10px;margin:17px 0 0;font-size:12px}
.dashboard-source .ico{color:#2563eb;width:18px;height:18px}
.dashboard-cash,.dashboard-empty{display:flex;align-items:center;gap:22px;padding:24px 20px;min-height:135px}
.dashboard-cash{background:#f5f8fd;border:1px solid #e6edf9;border-radius:11px}
.dashboard-cash p,.dashboard-empty p{margin:0 0 5px}
.dashboard-cash-status{font-weight:650}
.dashboard-empty-icon{display:flex;align-items:center;justify-content:center;flex:0 0 74px;height:74px;border-radius:50%;background:#eaf0f9;color:#7e98be}
.dashboard-empty-icon .ico{width:38px;height:38px}
.dashboard-warning{display:flex;align-items:center;gap:14px;background:#fffaed;border:1px solid #ffe0a0;border-radius:10px;padding:15px;color:#795214;margin:0 0 16px;font-size:13px}
.dashboard-warning .ico{color:#b87500;width:24px;height:24px}
.panel-destaque{border:2px solid #ffc94d;background:#fffdf6;margin:0 0 18px}
.panel-destaque>h2{letter-spacing:.3px}
.panel-destaque .button{margin-top:4px}
.dashboard-profile{display:flex;align-items:center;gap:15px;border-top:1px solid #e8eef7;padding-top:16px}
.dashboard-profile strong{display:block;margin-top:3px}
.dashboard-assignments h2{border-bottom:1px solid #e8eef7;padding-bottom:14px}
.dashboard-assignments .secondary{color:#0963ed;border-color:#b5d0ff;background:#f8fbff}
.dashboard-home>.panel:not(.dashboard-summary)>strong{font-size:30px;font-variant-numeric:tabular-nums}
.dashboard-home .button:focus-visible{outline:3px solid #83afff;outline-offset:3px}
@media(max-width:1200px){.dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-cash,.dashboard-empty{gap:16px;padding:18px 12px}.dashboard-empty-icon{flex-basis:58px;height:58px}}
@media(max-width:760px){#page.dashboard-home{grid-template-columns:minmax(0,1fr);padding:20px 16px;gap:16px}.dashboard-home .dashboard-grid{grid-template-columns:minmax(0,1fr);gap:16px}.dashboard-home>.heading{align-items:flex-start;flex-wrap:wrap}.dashboard-home .heading h1{font-size:28px}.dashboard-home .panel,.dashboard-summary.panel{padding:18px}.dashboard-home>.panel{grid-column:1/-1}}
@media(max-width:480px){.dashboard-stats{grid-template-columns:minmax(0,1fr)}.dashboard-home .heading .primary{width:100%}.dashboard-home h2{font-size:16px;gap:12px}.dashboard-cash,.dashboard-empty{padding:16px 0;gap:12px}.dashboard-cash{padding:16px 12px}.dashboard-empty-icon{flex-basis:46px;height:46px}.dashboard-empty-icon .ico{width:28px;height:28px}.dashboard-stat strong{font-size:28px}}

/* ---------- Ícone base ----------
   Tamanho acompanha a fonte do elemento: botão pequeno, ícone pequeno.
   `flex-shrink:0` impede que o ícone amasse quando o rótulo é longo. */
.ico{width:1.25em;height:1.25em;flex-shrink:0;display:inline-block;vertical-align:-.25em}
.ico-grande{width:1.6em;height:1.6em}

/* =========================================================================
   1. TOPO
   ========================================================================= */
.top{box-shadow:var(--sombra);border-bottom:1px solid var(--borda);gap:14px}
.top .brand img{width:32px;height:32px;border-radius:8px}
.identity{margin-left:auto;text-align:right;line-height:1.35}
.identity strong{font-size:14px;display:block}
.top>.badge{background:var(--azul-claro);color:var(--azul);font-weight:700;letter-spacing:.04em}
.username{font-weight:600;color:var(--tinta)}
#logout{gap:6px;color:var(--tinta-fraca);font-weight:600}
#logout:hover{color:var(--vermelho)}
.sidebar-toggle{border-radius:var(--raio-pequeno);color:var(--tinta-fraca);padding:6px 10px;min-height:40px}
.sidebar-toggle:hover{background:var(--cinza-claro);color:var(--tinta)}

/* =========================================================================
   2. MENU LATERAL
   Dois estados, e só dois.
   RECOLHIDO  — some por completo. O PDV fica com a largura inteira.
   EXPANDIDO  — painel sobreposto, que não empurra nem redimensiona nada.
   Não existe estado intermediário: numa farmácia o PDV precisa da largura
   toda, e menu sempre visível rouba espaço sem servir para nada.
   ========================================================================= */
aside{box-shadow:var(--sombra-alta);border-right:1px solid var(--borda);gap:3px;padding:16px 12px;width:288px}

/* --- EXPANDIDO: painel SOBRE o conteúdo ---
   `position:fixed` tira o menu do fluxo, então o PDV não é empurrado nem
   redimensionado quando ele abre ou fecha. `--altura-topo` é medida em
   JS a partir do cabeçalho real, porque a altura dele muda entre o PDV
   (56px) e as demais telas (72px) e ainda quebra em duas linhas no
   celular. Número fixo aqui erraria em alguma das três. */
.workspace>aside{position:fixed;left:0;top:var(--altura-topo,72px);bottom:0;z-index:60;
 background:white;overflow-y:auto;overflow-x:hidden}

/* --- RECOLHIDO: some por completo --- */
.workspace.sidebar-collapsed>aside{display:none}

/* Cortina sobre o conteúdo. Clicar nela fecha o menu. */
.menu-cortina{position:fixed;left:0;right:0;top:var(--altura-topo,72px);bottom:0;z-index:55;
 background:#0f1c3340;animation:cortina-entra .12s ease-out}
.menu-cortina[hidden]{display:none}
@keyframes cortina-entra{from{opacity:0}to{opacity:1}}

/* O conteúdo ocupa a largura toda, sempre — com o menu aberto ou fechado. */
.workspace>.content{width:100%;max-width:none}

/* Busca do menu */
.menu-busca{position:relative;margin:0 0 14px;flex-shrink:0}
.menu-busca .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--tinta-fraca);pointer-events:none}
.menu-busca input{margin:0;padding:10px 46px 10px 36px;border-radius:var(--raio-pequeno);background:var(--cinza-claro);border-color:transparent;min-height:42px}
.menu-busca input:focus{background:white;border-color:var(--azul)}
.menu-busca kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:white;color:var(--tinta-fraca);border:1px solid var(--borda);font-size:10px;padding:3px 6px;pointer-events:none}

.nav-label{color:var(--tinta-fraca);padding:12px 12px 6px}

/* "Instalar aplicativo" é um <button>, não um <a>: sem isto ficava
   centralizado no meio do menu, fora do alinhamento dos demais itens. */
aside>button#install{justify-content:flex-start;gap:11px;padding:10px 12px;font-size:13px;
 font-weight:550;color:#4b5a70;border-radius:var(--raio-pequeno);min-height:42px}
aside>button#install:hover{background:var(--cinza-claro);color:var(--tinta);filter:none}
aside>button#install .ico{color:var(--tinta-fraca)}

aside a{align-items:center;gap:11px;padding:10px 12px;border-radius:var(--raio-pequeno);font-weight:550;min-height:42px;color:#4b5a70}
aside a .ico{color:var(--tinta-fraca)}
aside a:hover{background:var(--cinza-claro);color:var(--tinta);filter:none}
aside a.active{background:var(--azul-claro);color:var(--azul);font-weight:700}
aside a.active .ico{color:var(--azul)}

/* Grupos */
.erp-menu{display:flex;flex-direction:column;gap:2px;min-width:0}
details.erp-nav{border:0;margin:0}
details.erp-nav>summary{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--raio-pequeno);
 font-size:11px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-fraca);list-style:none;min-height:42px}
details.erp-nav>summary::-webkit-details-marker{display:none}
details.erp-nav>summary:hover{background:var(--cinza-claro);color:var(--tinta)}
/* Seta indicando aberto/fechado — sinal de estado que não depende de cor */
details.erp-nav>summary::after{content:'';margin-left:auto;width:7px;height:7px;border-right:2px solid currentColor;
 border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
details.erp-nav[open]>summary::after{transform:rotate(45deg)}
details.erp-nav[open]>summary{color:var(--tinta)}
details.erp-nav>a{padding-left:26px;font-size:13px;position:relative}
/* Fio vertical ligando os itens ao grupo: mostra o que está dentro de quê
   mesmo com vários grupos parecidos na tela. */
details.erp-nav[open]>a::before{content:'';position:absolute;left:14px;top:0;bottom:0;width:2px;background:var(--borda)}
details.erp-nav[open]>a.active::before{background:var(--azul)}
/* O grupo da tela aberta fica identificado mesmo FECHADO — quem entrou numa
   tela de dentro e recolheu o grupo não perde a referência de onde está. */
details.erp-nav.grupo-atual>summary{color:var(--azul)}
details.erp-nav.grupo-atual>summary .ico{color:var(--azul)}
details.erp-nav.grupo-atual:not([open])>summary{background:var(--azul-claro)}
/* Respiro entre grupos: com treze deles, sem isso a barra vira um bloco só. */
details.erp-nav+details.erp-nav{margin-top:2px}

/* Rodapé fixo do menu */
.menu-rodape{margin-top:auto;padding-top:14px;border-top:1px solid var(--borda);display:grid;gap:6px;flex-shrink:0}
.menu-rodape button{justify-content:flex-start;gap:10px;font-size:13px;min-height:42px;border-radius:var(--raio-pequeno)}
.menu-rodape .sair{color:var(--vermelho);border-color:#f3c9c9;background:var(--vermelho-claro)}
.menu-rodape .sair:hover{background:#fbdcdc}
aside>small{margin-top:0;padding:10px 12px 0;order:99}

/* Quando a busca filtra, o que não casa some — e o grupo vazio some junto */
aside [data-fora-do-filtro]{display:none}

/* =========================================================================
   3. CARTÕES E CABEÇALHOS
   ========================================================================= */
.panel,.card{box-shadow:var(--sombra);border-color:var(--borda);border-radius:var(--raio)}
.panel>h2,.card>h2{display:flex;align-items:center;gap:9px;font-weight:700}
.panel>h2 .ico{color:var(--azul)}
.heading h1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Bloco de identificação do caixa */
.cash-identification{border-left:0;border-radius:var(--raio);box-shadow:var(--sombra);gap:0;padding:0;overflow:hidden;display:flex;flex-wrap:wrap}
/* "CAIXA #10" em azul: é a identificação do que está aberto, e o primeiro
   dado que o operador procura ao olhar a linha. */
.cash-identification>strong:first-child{color:var(--azul);font-weight:750}
.cash-identification>strong:first-child .ico{color:var(--azul)}
.cash-identification .ico{width:18px;height:18px;color:var(--tinta-fraca)}
.cash-identification>strong,.cash-identification>span{display:flex;align-items:center;gap:8px;padding:12px 18px;
 border-right:1px solid var(--borda);font-size:13px;font-weight:600;color:var(--tinta)}
.cash-identification>*:last-child{border-right:0}
.cash-identification .ico{color:var(--azul)}
.cash-identification [data-cash-status]{color:var(--verde);background:var(--verde-claro)}
.cash-identification [data-cash-status] .ico{color:var(--verde)}

/* Estado de conexão */
#connection{font-weight:700;letter-spacing:.03em}
#connection.online{background:var(--verde-claro);color:var(--verde)}
#connection.offline{background:var(--vermelho-claro);color:var(--vermelho)}

/* =========================================================================
   4. BOTÕES DA LINHA DO CAIXA

   Blocos altos (56px), preenchidos com cor sólida, ícone grande branco à
   esquerda e texto branco. Os oito são coloridos — nenhum fica apagado.

   O DESTAQUE DO "FINALIZAR VENDA" VEM DO TAMANHO, NÃO DE APAGAR OS OUTROS.
   Ele é largura inteira da coluna, mais alto e em laranja exclusivo: nenhum
   botão do caixa usa laranja, então ele continua sendo o mais visível da
   tela mesmo com todos os demais coloridos.

   Sangria e Fechar caixa continuam pedindo confirmação — as duas já abrem
   modal com campo obrigatório. O que não se faz é distingui-las apagando
   as vizinhas.
   ========================================================================= */
.cash-actions{gap:10px}
.cash-actions button{border-radius:12px;font-weight:650;gap:10px;padding:14px 18px;min-height:56px;
 font-size:14px;color:white;border:1px solid transparent;box-shadow:var(--sombra);
 transition:transform .08s,box-shadow .15s,filter .12s}
.cash-actions button .ico{width:22px;height:22px;stroke-width:2}
.cash-actions button:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px);box-shadow:var(--sombra-alta)}
.cash-actions button:active:not(:disabled){transform:translateY(0)}

/* Uma cor por botão, como na referência. */
.cash-actions button[data-acao='Consultar caixa']{background:var(--azul);border-color:var(--azul)}
.cash-actions button[data-acao='Movimentações']{background:var(--verde);border-color:var(--verde)}
.cash-actions button[data-acao=Sangria]{background:var(--vermelho);border-color:var(--vermelho)}
.cash-actions button[data-acao=Suprimento]{background:var(--ambar);border-color:var(--ambar)}
.cash-actions button[data-acao='Pendências']{background:var(--roxo);border-color:var(--roxo)}
.cash-actions button[data-acao='Histórico de caixas']{background:var(--turquesa);border-color:var(--turquesa)}
.cash-actions button[data-acao='Fechar caixa']{background:var(--cinza);border-color:var(--cinza)}
.cash-actions button[data-acao=Entregas]{background:var(--rosa);border-color:var(--rosa)}
/* Ficava sem regra: o `.cash-actions button` já pinta o texto de branco, então
   o card saía branco no branco — título e legenda ilegíveis. Ciano estava livre
   na paleta e não se confunde com os vizinhos (Entregas em rosa, Despesa em
   azul). Só cor: a função, a rota, o atalho e o listener são os mesmos. */
.cash-actions button[data-acao='Consultar produtos']{background:var(--ciano);border-color:var(--ciano)}
.cash-actions button[data-acao=Despesa]{background:var(--azul);border-color:var(--azul)}

/* "+ MANIPULADO" e "+ ITEM NÃO CADASTRADO" não são operação de caixa:
   ficam claros e contornados, como na referência. */
.exceptional-actions button{background:white;color:var(--tinta);border:1px solid var(--borda);
 font-weight:600;min-height:48px;box-shadow:none}
.exceptional-actions button .ico{color:var(--azul);width:19px;height:19px}
.exceptional-actions button:hover:not(:disabled){background:var(--azul-claro);border-color:#c5d9ff;filter:none}

/* =========================================================================
   5. PDV — busca, resultados, carrinho, finalização
   ========================================================================= */
/* Títulos dos painéis: ícone grande e azul, como na referência. */
.panel>h2 .ico{width:26px;height:26px;color:var(--azul);stroke-width:1.9}
.basket>h2 .ico,.products>h2 .ico{width:27px;height:27px}

/* Área de leitura com contorno tracejado: sinaliza "aqui se bipa".
   O código de barras é grande porque é a única pista visual de que ali
   se bipa — o texto abaixo dele só confirma. */
#results .empty{border:2px dashed #cfdaea;border-radius:var(--raio);background:#fbfcfe;color:#8a99ad}
#results .empty .ico{width:54px;height:54px;color:#93a9c6;stroke-width:1.5}
#results .empty p{font-weight:650;color:var(--tinta-fraca);font-size:16px}

/* Carrinho vazio: carrinho grande e cinza. */
#cart .empty .ico{width:56px;height:56px;color:#a8b6ca;stroke-width:1.5}
#cart .empty p{font-weight:650;color:var(--tinta-fraca);font-size:16px}

.search input{border-radius:var(--raio-pequeno)}
.search input:focus{border-color:var(--azul);background:white}
label{color:#4b5a70}
/* Rótulo com ícone: o ícone entra no começo da label */
label>.ico{color:var(--tinta-fraca);margin-right:6px}

/* Botões Buscar: lupa branca dentro do botão azul. */
.search button.primary{background:var(--azul);border-color:var(--azul);color:white;font-weight:700;gap:9px}
.search button.primary .ico{color:white;width:19px;height:19px;stroke-width:2.1}
.search button.secondary .ico{color:var(--azul);width:18px;height:18px}

.result{border-radius:var(--raio-pequeno);border-color:var(--borda)}
.result:hover{border-color:var(--azul);background:var(--azul-claro);filter:none}
.product-icon{color:var(--azul);width:24px;height:24px}

.cart-item{border-bottom-color:#eef1f6}
.empty .ico{color:#a8b6ca}

.total{border-top:2px solid var(--borda)}
.total>span{display:flex;align-items:center;gap:8px;color:var(--tinta-fraca);font-size:13px;letter-spacing:.06em}
.total strong{color:var(--verde);letter-spacing:-1px}

/* FINALIZAÇÃO
   Finalizar venda é o botão mais importante da tela, e o destaque vem do
   TAMANHO e da cor exclusiva: laranja não é usado por nenhum botão do
   caixa. Por isso os oito podem ser coloridos sem disputar com ele.

   O desbotamento padrão de :disabled (opacity .45) fazia o laranja parecer
   desligado mesmo na referência, de carrinho vazio. Aqui ele mantém a cor
   — continua desabilitado de verdade enquanto não há itens, com o cursor
   dizendo isso; o que muda é só não parecer apagado. */
.checkout{border-radius:12px;gap:10px;min-height:54px;font-size:15px}
.checkout .ico{width:22px;height:22px;stroke-width:2}
#checkout{background:var(--laranja);border-color:var(--laranja);color:white;font-weight:800;
 letter-spacing:.01em;box-shadow:0 2px 0 #c2570a,var(--sombra)}
#checkout:hover:not(:disabled){background:#ea6a0c;filter:none}
#checkout-delivery{background:var(--verde);border-color:var(--verde);color:white;font-weight:750;
 box-shadow:0 2px 0 #12813b,var(--sombra)}
#checkout-delivery:hover:not(:disabled){background:#15903f;filter:none}
/* Desabilitado NAO desbota. O botao continua desabilitado de verdade
   enquanto o carrinho esta vazio — o clique nao passa e o cursor diz
   isso — mas mantem a cor cheia: o desbotamento padrao fazia o laranja
   parecer desligado, e ele e o botao mais importante da tela. */
.checkout:disabled{opacity:1;box-shadow:none;cursor:not-allowed}

/* =========================================================================
   Cartão de WhatsApp / Orçamentos
   Logo branco dentro de círculo verde à esquerda, faixa verde clara,
   barra lateral verde e seta à direita.
   ========================================================================= */
.whatsapp-card{border-left:4px solid var(--verde);box-shadow:var(--sombra);
 background:linear-gradient(90deg,#eafaf1,#f7fdfa 60%,white);
 display:flex;align-items:center;gap:14px}
.whatsapp-marca{width:44px;height:44px;border-radius:50%;background:var(--verde);color:white;
 display:grid;place-items:center;flex-shrink:0}
.whatsapp-marca .ico{width:26px;height:26px}
.whatsapp-card>div:first-of-type{flex:1;min-width:0}
.whatsapp-card h2{color:#12703c;margin:0}
.whatsapp-seta{color:#7fae95;display:flex;flex-shrink:0}
.whatsapp-seta .ico{width:20px;height:20px}
.whatsapp-botoes{display:flex;gap:9px;flex-shrink:0}
/* Celular: o cartão quebra e os três botões ocupam a largura, sem rolagem lateral. */
@media(max-width:640px){.whatsapp-card{flex-wrap:wrap}.whatsapp-botoes{flex:1 1 100%;flex-wrap:wrap;flex-shrink:1}.whatsapp-botoes>button{flex:1 1 140px;min-width:0}}
.whatsapp-botoes .primary{background:var(--verde);border-color:var(--verde);font-weight:700}
.whatsapp-botoes .primary:hover{background:#15903f;filter:none}
.whatsapp-botoes .secondary{color:var(--azul);border-color:#c5d9ff;background:white;font-weight:700}
.whatsapp-botoes .ico{width:18px;height:18px}

/* Entrada do assistente farmacêutico */
.pharmacy-entry{border:1px solid #e0d4f5;background:linear-gradient(90deg,#faf6ff,#fff);border-radius:var(--raio-pequeno);color:var(--roxo);font-weight:650}
.pharmacy-entry .ico{color:var(--roxo)}

/* =========================================================================
   6. BARRA DE ATALHOS
   Cada tecla com ícone. Shift+F7 (Despesa) e Shift+F11 (Entregas) entram
   no mesmo estilo das demais — são atalhos reais e não podem parecer
   secundários só por terem o nome maior.
   ========================================================================= */
/* A faixa "AMBIENTE DE DESENVOLVIMENTO" fica fixa no canto inferior
   direito. Sem esta folga ela cobria o último atalho — que hoje é o
   Shift+F7 (Despesa), justamente um dos novos. A barra também passa a
   quebrar linha em vez de cortar: atalho escondido é atalho perdido. */
.shortcuts{border-top:1px solid var(--borda);padding-top:8px;gap:5px;flex-wrap:wrap;padding-right:270px}
.shortcuts button{border-radius:8px;border:1px solid var(--borda);background:white;gap:5px;font-weight:600;
 color:var(--tinta-fraca);padding:5px 8px}
.shortcuts button:hover{background:var(--azul-claro);border-color:#c5d9ff;color:var(--azul);filter:none}
/* Legenda do ajuste de preço: mesma barra, sem cara de botão — não é clicável. */
.shortcuts .atalho-legenda{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;
 border:1px dashed var(--borda);border-radius:8px;color:var(--tinta-fraca);font-weight:600}
.shortcuts button .ico{color:var(--azul);width:14px;height:14px}
.shortcuts kbd{background:var(--tinta);font-weight:700;letter-spacing:.02em}

/* =========================================================================
   7. DIÁLOGOS
   ========================================================================= */
dialog{border-radius:16px;box-shadow:0 30px 90px #10203f33;border-color:var(--borda)}
dialog header{padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--borda);gap:12px}
dialog header h2{display:flex;align-items:center;gap:10px;font-size:19px}
dialog header [data-close],dialog header [data-fechar],dialog header #dismiss{
 min-height:36px;min-width:36px;padding:6px;border-radius:9px;color:var(--tinta-fraca);flex-shrink:0}
dialog header [data-close]:hover,dialog header [data-fechar]:hover,dialog header #dismiss:hover{background:var(--cinza-claro);color:var(--tinta)}

/* Marca do diálogo: quadrado colorido com o ícone do assunto */
.dialog-marca{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--azul-claro);color:var(--azul);flex-shrink:0}
.dialog-marca .ico{width:24px;height:24px}
.dialog-titulo{display:flex;align-items:center;gap:13px;min-width:0}
.dialog-titulo h2{margin:0;border:0;padding:0}
.dialog-titulo p{margin:2px 0 0;font-size:13px;color:var(--tinta-fraca);line-height:1.4}

/* =========================================================================
   8. MODAL DE DESPESA
   ========================================================================= */
.despesa-caixa{width:min(760px,96vw);padding:24px}
.despesa-caixa form{display:grid;gap:18px}
.despesa-caixa label{margin:0;font-size:12px;font-weight:650;color:#4b5a70}
.despesa-caixa label>span.rotulo{display:flex;align-items:center;gap:7px;margin-bottom:2px}
.despesa-caixa label .ico{color:var(--tinta-fraca)}

/* Linha de valor + carimbo de data/hora */
.despesa-linha-valor{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:end}

/* Valor grande: é o número que o operador confere antes de confirmar */
.campo-valor{position:relative}
/* O "R$" fica ancorado ao campo (último filho da label), não ao centro da
   label — senão o rótulo acima o empurraria para fora do lugar. */
.campo-valor .moeda{position:absolute;left:15px;bottom:17px;font-weight:750;color:var(--tinta-fraca);font-size:19px;pointer-events:none}
.campo-valor input{font-size:26px;font-weight:750;padding:12px 14px 12px 52px;min-height:60px;border-radius:12px;color:var(--tinta)}
.campo-valor input:focus{border-color:var(--azul);background:white}

/* Data e hora: TEXTO, nunca campo.
   O desenho original trazia data e hora editáveis. Não foi reproduzido:
   escolher a data permitiria lançar despesa em caixa de outro período ou
   ajustar o fechamento depois do fato. O carimbo é do servidor. */
.carimbo-momento{display:flex;gap:18px;padding:12px 16px;background:var(--cinza-claro);border-radius:12px;align-self:end}
.carimbo-momento div{display:grid;gap:3px}
.carimbo-momento dt{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-fraca)}
.carimbo-momento dd{margin:0;display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--tinta);white-space:nowrap}
.carimbo-momento .ico{color:var(--tinta-fraca)}

/* Cartões de classificação */
.despesa-caixa .classificacoes{border:0;padding:0;margin:0;min-width:0}
.despesa-caixa .classificacoes legend{padding:0;margin-bottom:9px;font-size:12px;font-weight:650;color:#4b5a70}
.grade-classificacao{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cartao-classificacao{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:14px 13px;margin:0;
 border:2px solid var(--borda);border-radius:12px;cursor:pointer;background:white;min-height:112px;position:relative;transition:border-color .12s,background .12s}
.cartao-classificacao:hover{border-color:#c5d9ff;background:#fbfcff}
.cartao-classificacao input{position:absolute;top:12px;right:12px;width:18px;height:18px;min-height:0;margin:0;accent-color:var(--azul)}
.cartao-classificacao .marca{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--cinza-claro);color:var(--tinta-fraca)}
.cartao-classificacao .marca .ico{width:21px;height:21px}
.cartao-classificacao strong{font-size:14px;color:var(--tinta);line-height:1.25}
.cartao-classificacao .nota{font-size:11px;color:var(--tinta-fraca);line-height:1.35;display:block}
/* Selecionado: borda azul + fundo + o radio marcado. Três sinais, não só cor. */
.cartao-classificacao:has(input:checked){border-color:var(--azul);background:var(--azul-claro)}
.cartao-classificacao:has(input:checked) strong{color:var(--azul-escuro)}
.cartao-classificacao:has(input:focus-visible){outline:2px solid var(--azul);outline-offset:2px}
/* Uma cor por classificação, no quadrado do ícone */
.cartao-classificacao[data-classificacao=MANIPULADO] .marca{background:var(--azul-claro);color:var(--azul)}
.cartao-classificacao[data-classificacao=MOTO] .marca{background:var(--verde-claro);color:var(--verde)}
.cartao-classificacao[data-classificacao=PAPELARIA_EMBALAGEM] .marca{background:var(--laranja-claro);color:var(--laranja)}
.cartao-classificacao[data-classificacao=DIVERSAS] .marca{background:var(--cinza-claro);color:var(--cinza)}

/* Bloco do manipulado: aparece ao escolher MANIPULADO e é obrigatório */
.despesa-caixa [data-manipulado]{border:1px solid #c9dcff;background:var(--azul-claro);border-radius:12px;padding:14px}
.despesa-caixa [data-manipulado][hidden]{display:none}
.despesa-caixa [data-manipulado] select{background:white}
.despesa-caixa [data-manipulado] .muted{margin:8px 0 0;font-size:12px}

.despesa-linha-texto{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
.despesa-caixa input[type=text],.despesa-caixa select{border-radius:10px;min-height:46px}

/* Aviso de SEM COMPROVANTE */
.aviso-comprovante{display:flex;gap:11px;align-items:flex-start;margin:0;padding:13px 15px;
 background:#eaf3ff;border:1px solid #c9dcff;border-radius:12px;font-size:13px;color:#274a7d;line-height:1.5}
.aviso-comprovante .ico{color:var(--azul);margin-top:1px}
.aviso-comprovante strong{color:#153b70}

/* Rodapé de botões */
.despesa-rodape{display:flex;gap:10px;align-items:center;padding-top:16px;border-top:1px solid var(--borda)}
.despesa-rodape .limpar{margin-right:auto;color:var(--tinta-fraca)}
.despesa-rodape button{gap:8px;min-height:48px;padding:11px 20px;border-radius:11px;font-weight:650}
.despesa-rodape .primary{font-weight:750;padding:11px 26px}
.despesa-caixa .form-error:empty{display:none}
.despesa-caixa .form-error:not(:empty){padding:11px 14px;background:var(--vermelho-claro);border:1px solid #f3c9c9;border-radius:10px;margin:0}

/* =========================================================================
   9. RESPONSIVO
   Monitor de PDV, notebook e celular. Nada some, nada encolhe abaixo do
   tamanho de toque: o PDV é usado em pé e com pressa.
   ========================================================================= */
@media(max-width:1100px){
 .grade-classificacao{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:800px){
 /* O painel ja sobrepoe em qualquer largura; aqui so estreita. */
 .workspace>aside{width:min(288px,86vw)}
}
@media(max-width:760px){
 .cash-actions button{flex:1 1 calc(50% - 4px);justify-content:flex-start}
 .cash-identification{display:flex}
 .cash-identification>strong,.cash-identification>span{flex:1 1 50%;border-right:0;border-bottom:1px solid var(--borda);padding:10px 14px}
 .despesa-caixa{padding:16px}
 .despesa-linha-valor,.despesa-linha-texto{grid-template-columns:1fr}
 .carimbo-momento{align-self:stretch}
 .despesa-rodape{flex-wrap:wrap}
 .despesa-rodape .limpar{order:3;margin:0;width:100%}
 .despesa-rodape button{flex:1}
 .campo-valor input{font-size:23px}
 /* Em celular a barra de atalhos não serve (não há teclado de função),
    mas os botões do caixa cobrem as mesmas ações. */
 .shortcuts{display:none}
}
@media(max-width:480px){
 .grade-classificacao{grid-template-columns:1fr}
 .cartao-classificacao{flex-direction:row;align-items:center;min-height:0;padding:12px}
 .cartao-classificacao .marca{flex-shrink:0}
 .cartao-classificacao input{position:static;margin-left:auto}
 .cash-actions button{flex:1 1 100%}
}

/* =========================================================================
   10. PDV ABERTO EM TELA GRANDE
   O PDV cabe numa tela só, sem rolagem: `pdv-operacional.css` aperta tudo.
   O visual novo tem que caber no mesmo espaço — o que muda aqui é só a
   medida, nunca o que aparece. Nenhum botão ou aviso é escondido.
   ========================================================================= */
@media(min-width:1100px){
 /* Os botões do caixa mantêm bloco e cor sólida — é o ponto da referência.
    O que mudou em 22/09/2026 é a medida: com DEZ ações e 12px/16px de
    espaçamento a faixa somava 1446px num espaço de 1346 e o décimo card saía
    cortado pela direita. Aqui ela cabe inteira em 1366px, que é o monitor do
    PDV; a altura extra e a legenda entram em `pdv-operacional.css` quando a
    tela é alta o bastante para isso não roubar o carrinho. */
 .pdv-open .cash-actions button{padding:7px 8px;min-height:38px;font-size:12px;gap:0 5px}
 .pdv-open .cash-actions button .ico{width:16px;height:16px}
 .pdv-open .exceptional-actions button{min-height:44px;padding:9px 14px}
 .pdv-open .cash-identification>strong,.pdv-open .cash-identification>span{padding:9px 15px;font-size:12.5px;gap:7px}
 .pdv-open .cash-identification .ico{width:16px;height:16px}
 .pdv-open #results .empty .ico{width:52px;height:52px}
 .pdv-open #cart .empty .ico{width:54px;height:54px}
 /* Mesmos seletores de `pdv-operacional.css`, que fixava 40px e 12px com
    especificidade maior que `.pdv-open .checkout`. Sem repetir o seletor,
    o botão mais importante da tela continuava do tamanho de um botão
    secundário — e o destaque dele vem justamente do tamanho. */
 .pdv-open .basket #checkout,.pdv-open .basket #checkout-delivery{min-height:52px;font-size:15px;margin:0}
 .pdv-open .checkout .ico{width:20px;height:20px}
 .pdv-open .total>span{font-size:12px}
 .pdv-open .whatsapp-marca{width:36px;height:36px}
 .pdv-open .whatsapp-marca .ico{width:22px;height:22px}
 /* Altura livre: se os 14 atalhos não couberem numa linha, a barra
    quebra em duas em vez de esconder os últimos. `pdv-operacional.css`
    fixava 32px de altura e `nowrap`, e o Shift+F7 ficava fora da tela. */
 .pdv-open .shortcuts{border-top:1px solid var(--borda);padding-top:4px;flex-wrap:wrap;gap:3px;
  height:auto;min-height:32px;max-height:none;padding-right:270px}
 /* Apertado o suficiente para os 14 atalhos caberem numa linha em
    1600px. A quebra acima continua valendo como rede: em tela menor
    a barra usa duas linhas em vez de esconder os ultimos atalhos.
    Em 1600px os 14 atalhos (1356px) mais a folga da faixa nao cabem
    numa linha: ali a barra quebra mesmo, e isso e melhor do que cortar. */
 .pdv-open .shortcuts button{padding:2px 5px;gap:4px}
 .pdv-open .shortcuts button .ico{width:12px;height:12px}
 .pdv-open .panel>h2 .ico{width:23px;height:23px}
 .pdv-open .pharmacy-entry{padding:5px 9px}
}

/* Quem prefere menos animação não recebe nenhuma */
@media(prefers-reduced-motion:reduce){
 .cash-actions button,.cartao-classificacao,details.erp-nav>summary::after{transition:none}
 .cash-actions button:hover:not(:disabled){transform:none}
}

/* Foco visível em tudo que recebe teclado — o PDV é operado sem mouse */
:is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--azul);outline-offset:2px}

/* =========================================================================
   11. IDENTIFICAÇÃO DO CLIENTE E PAINEL DO CLIENTE
   ========================================================================= */

/* ---- Modal de identificação ---- */
.identificacao-cliente{width:min(1060px,96vw);padding:24px}
.identificacao-corpo{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:start}
.identificacao-escolhas{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cartao-escolha{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
 padding:22px 18px;border:2px solid var(--borda);border-radius:14px;background:white;min-height:230px;justify-content:center}
.cartao-escolha .marca{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
 background:var(--cinza-claro);color:var(--tinta-fraca)}
.cartao-escolha .marca .ico{width:36px;height:36px}
.cartao-escolha strong{font-size:19px;line-height:1.25;color:var(--tinta)}
.cartao-escolha p{margin:0;font-size:13px;color:var(--tinta-fraca);line-height:1.45}
.cartao-escolha button{width:100%;min-height:50px;margin-top:6px;border-radius:11px;font-weight:700}
/* O caminho desejado é o verde: o operador deve perguntar antes de pular. */
.cartao-escolha.sim{border-color:#9fd9b6;background:linear-gradient(180deg,#f2fbf6,#fff)}
.cartao-escolha.sim .marca{background:var(--verde-claro);color:var(--verde)}
.cartao-escolha.sim strong{color:#12703c}
.cartao-escolha.sim .primary{background:var(--verde);border-color:var(--verde)}
.cartao-escolha.sim .primary:hover{background:#15903f;filter:none}

/* ATENCAO: este elemento e um <aside>, e os seletores globais `aside{...}`
   do menu lateral (largura 288px, borda, sombra, padding) o alcancavam —
   a coluna virava um card com borda e os textos ficavam espacados. Estas
   linhas desfazem isso explicitamente. */
.identificacao-argumentos{width:auto;min-width:0;flex-shrink:1;background:transparent;box-shadow:none;
 border:0;border-left:1px solid var(--borda);border-radius:0;padding:0 0 0 20px;margin:0;
 display:grid;gap:13px;align-content:start;position:static;overflow:visible}
.identificacao-argumentos h3{margin:0 0 2px;font-size:15px;color:var(--tinta)}
.argumento{display:flex;gap:12px;align-items:flex-start}
.argumento .marca{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.argumento .marca .ico{width:20px;height:20px}
.argumento .marca.vermelho{background:var(--vermelho-claro);color:var(--vermelho)}
.argumento .marca.azul{background:var(--azul-claro);color:var(--azul)}
.argumento .marca.roxo{background:var(--roxo-claro);color:var(--roxo)}
.argumento .marca.verde{background:var(--verde-claro);color:var(--verde)}
.argumento>div{min-width:0}
.argumento strong{display:block;font-size:14px;color:var(--tinta);line-height:1.3;margin:0}
/* `small` global tem line-height 1.7: colado ao titulo, como na referencia. */
.argumento small{display:block;color:var(--tinta-fraca);line-height:1.35;font-size:12px;margin:2px 0 0}

.identificacao-rodape{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
 margin-top:20px;padding-top:18px;border-top:1px solid var(--borda)}
.identificacao-rodape .aviso-comprovante{margin:0}
.identificacao-marca{display:flex;align-items:center;gap:12px;padding:10px 16px;border:1px solid var(--borda);
 border-radius:12px;background:var(--cinza-claro);min-height:56px}
.identificacao-marca img{max-height:40px;max-width:170px;object-fit:contain}
.identificacao-marca .sem-logo{font-size:15px;color:var(--tinta);line-height:1.2}
.identificacao-marca small{color:var(--tinta-fraca);text-align:right;max-width:130px}

/* ---- Busca e cadastro na hora ---- */
.buscar-cliente,.cadastro-rapido{width:min(620px,96vw);padding:22px}
.buscar-cliente form,.cadastro-rapido form{display:grid;gap:14px}
.buscar-cliente .search{grid-template-columns:1fr auto;display:grid;align-items:end;gap:10px}
.buscar-cliente .search button{margin:0;min-height:48px}
.resultados-cliente{max-height:280px;overflow-y:auto;display:grid;gap:6px;margin:14px 0}
.resultados-cliente .result{gap:12px}
.resultados-cliente .result .ico{color:var(--azul);width:20px;height:20px}
.buscar-rodape{display:flex;gap:10px;align-items:center;padding-top:14px;border-top:1px solid var(--borda)}
.buscar-rodape .ghost{margin-left:auto;color:var(--tinta-fraca)}
.buscar-rodape button{min-height:48px;border-radius:11px;gap:8px;font-weight:650}
.cadastro-rapido label{margin:0}
.cadastro-rapido .rotulo{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:650;color:#4b5a70}
.cadastro-rapido .rotulo .ico{color:var(--tinta-fraca)}
/* CPF é opcional mas desejável: fica marcado, sem virar obrigatório. */
.campo-desejavel{border:1px dashed #c9dcff;background:#f7faff;border-radius:12px;padding:12px 14px}
.etiqueta-desejavel{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
 color:var(--azul);background:var(--azul-claro);border-radius:999px;padding:3px 9px}
.cadastro-rapido .aceite{display:flex;gap:11px;align-items:flex-start;background:var(--cinza-claro);
 border-radius:11px;padding:12px 14px;font-weight:500}
.cadastro-rapido .aceite input{width:19px;height:19px;min-height:0;margin:2px 0 0;flex-shrink:0;accent-color:var(--azul)}
.cadastro-rapido .aceite span{font-size:13px;color:var(--tinta);line-height:1.4}

/* =========================================================================
   Painel do cliente — dentro do card "Adicionar produto"
   Entre a área tracejada e os botões do rodapé, no espaço hoje vazio.
   ========================================================================= */
.painel-cliente{border:1px solid var(--borda);border-radius:12px;background:white;
 padding:10px 12px;display:grid;gap:8px;align-content:start;overflow:hidden;min-height:0}
.painel-cliente[hidden]{display:none}

.painel-cliente-topo{display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--borda)}
.painel-cliente-topo .marca{width:34px;height:34px;border-radius:50%;background:var(--azul-claro);color:var(--azul);
 display:grid;place-items:center;flex-shrink:0}
.painel-cliente-topo>div{flex:1;min-width:0}
.painel-cliente-topo strong{display:block;font-size:14px;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.painel-cliente-topo small{color:var(--tinta-fraca)}
.painel-cliente-topo .pontos{display:flex;align-items:center;gap:5px;flex-shrink:0;font-weight:750;font-size:12px;
 color:var(--verde);background:var(--verde-claro);border-radius:999px;padding:5px 10px}
.painel-cliente-topo .pontos .ico{width:14px;height:14px}

.painel-conta{margin:0;display:flex;align-items:center;gap:7px;font-size:11.5px;color:#274a7d;
 background:var(--azul-claro);border-radius:9px;padding:6px 10px}
.painel-conta .ico{width:15px;height:15px;flex-shrink:0}
.painel-oculto{margin:0;display:flex;gap:8px;align-items:center;font-size:12px;color:var(--tinta-fraca);
 background:var(--cinza-claro);border-radius:9px;padding:8px 10px}

.painel-secao{display:grid;gap:4px;min-width:0}
.painel-secao h4{margin:0;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:750;
 letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-fraca)}
.painel-secao h4 .ico{width:14px;height:14px}
.painel-secao h4 .conta{margin-left:auto;background:var(--cinza-claro);color:var(--tinta-fraca);
 border-radius:999px;padding:1px 7px;font-size:10px;letter-spacing:0}
/* Uma cor por tipo de sugestão: os quatro são visualmente distintos. */
.painel-secao.recompra h4{color:var(--laranja)} .painel-secao.recompra .painel-item{border-left-color:var(--laranja)}
.painel-secao.complemento h4{color:var(--azul)} .painel-secao.complemento .painel-item{border-left-color:var(--azul)}
.painel-secao.perfil h4{color:var(--roxo)}      .painel-secao.perfil .painel-item{border-left-color:var(--roxo)}
.painel-secao.campanha h4{color:var(--rosa)}    .painel-secao.campanha .painel-item{border-left-color:var(--rosa)}
.painel-secao.historico h4{color:var(--cinza)}  .painel-secao.historico .painel-item{border-left-color:var(--borda)}

.painel-item{border-left:3px solid var(--borda);padding:3px 0 3px 9px;min-width:0}
.painel-item strong{display:block;font-size:12.5px;color:var(--tinta);line-height:1.3;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.painel-item small{font-size:11px;color:var(--tinta-fraca);line-height:1.35;
 overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mais-levados{margin:2px 0 0;font-size:11px;color:var(--tinta-fraca);line-height:1.35}
.mais-levados span{font-weight:700}
.ver-mais{justify-self:start;font-size:11px;min-height:26px;padding:2px 8px;color:var(--azul);font-weight:700}

.painel-completo{width:min(680px,96vw);padding:22px;max-height:88dvh;overflow-y:auto}
.painel-completo .painel-secao{margin-bottom:16px}
.painel-completo .painel-secao.em-foco h4{color:var(--azul)}

/* ---- Como o painel divide o espaço com a área tracejada ----
   Sem cliente e sem itens: a área tracejada fica como hoje.
   Com painel: ela encolhe e o painel ocupa o que sobra.
   Com itens no carrinho: ela some.
   Os botões do rodapé NUNCA saem da tela, e o painel não rola: o que não
   cabe vai para o "ver mais". */
.products.tem-painel #results{flex:0 0 auto;max-height:116px;overflow:hidden}
.products.tem-painel #results .empty{padding:10px 8px}
.products.tem-painel #results .empty .ico{width:26px;height:26px}
.products.tem-painel #results .empty small{display:none}
/* Some só a área vazia (sem busca): resultado de busca no meio da venda continua aparecendo. */
.products.tem-itens #results:not(:has(.result)){display:none}
.products.tem-painel .painel-cliente{flex:1 1 auto}

@media(max-width:900px){
 .identificacao-corpo{grid-template-columns:1fr}
 .identificacao-argumentos{border-left:0;border-top:1px solid var(--borda);padding:16px 0 0}
 .identificacao-rodape{grid-template-columns:1fr}
}
@media(max-width:600px){
 .identificacao-escolhas{grid-template-columns:1fr}
 .cartao-escolha{min-height:0;padding:16px}
 .identificacao-cliente{padding:16px}
 .buscar-cliente .search{grid-template-columns:1fr}
}

/* Seção que não coube: sobra o título e o "ver mais", lado a lado. */
.painel-secao.so-titulo{grid-template-columns:1fr auto;align-items:center;gap:8px}
.painel-secao.so-titulo h4{grid-column:1}
.painel-secao.so-titulo .ver-mais{grid-column:2;grid-row:1;justify-self:end}

/* =========================================================================
   12. BARRA DE ATALHOS RETRÁTIL

   O DEFEITO QUE ISTO CORRIGE
   Em 1366x768 a barra cobria "Finalizar venda" e "Finalizar para entrega"
   pela metade, e `elementFromPoint` confirmava: o botão mais usado da tela
   não era clicável.

   A barra nunca sobrepôs nada por conta própria — ela é o último filho da
   coluna flex e é `flex-shrink:0`. Quem transbordava era o painel direito:
   `pdv-operacional.css` dá ao carrinho a linha `minmax(210px,1fr)`, e esse
   piso de 210px, somado às outras linhas, passava da altura disponível numa
   tela de 768px. O conteúdo vazava para fora do painel e a barra, que vem
   depois no DOM, pintava por cima.

   A correção é nos dois lados: o carrinho passa a poder encolher (é ele que
   rola, e já tem `overflow-y:auto`), e a barra recolhe.
   ========================================================================= */

.shortcuts{align-items:center}

.atalhos-alternador{order:-1;flex:0 0 auto;gap:5px;font-size:11px;font-weight:700;
 color:var(--tinta-fraca);border:1px solid var(--borda);background:white;
 border-radius:8px;padding:3px 9px;min-height:26px;white-space:nowrap}
.atalhos-alternador:hover{background:var(--azul-claro);border-color:#c5d9ff;color:var(--azul);filter:none}
.atalhos-alternador .ico{width:13px;height:13px}

/* Recolhida: sobra a faixa fina com o botão. As teclas continuam valendo —
   quem as ouve é o `document`, não esta barra. */
.shortcuts.recolhida{gap:0;padding-top:4px;min-height:0}
.shortcuts.recolhida button:not(.atalhos-alternador){display:none}

@media(min-width:1100px){
 /* O carrinho pode encolher. Era o piso de 210px que estourava a altura do
    painel direito em telas de 768px e empurrava os botões de finalizar por
    baixo da barra. O carrinho já rola sozinho (`#cart{overflow-y:auto}`),
    então encolher não esconde item nenhum. */
 .pdv-open .pdv-grid>.basket{grid-template-rows:auto auto auto minmax(84px,1fr) auto auto}
 .pdv-open #cart{min-height:84px}

 .pdv-open .shortcuts.recolhida{height:auto;min-height:0;max-height:none;padding-top:3px;padding-right:270px}
 .pdv-open .atalhos-alternador{min-height:24px;height:24px;padding:2px 8px}
}

/* Em celular a barra inteira já não aparece: não há teclado de função. */
@media(max-width:760px){.atalhos-alternador{display:none}}

/* =========================================================================
   13. TROCA NO PDV

   Duas colunas, sem rolagem. A troca acontece com o cliente em pé no balcão
   esperando: rolar a tela para achar o resumo é tempo que ele conta. Tudo
   que decide a troca — motivo, o que entra, o que sai e o desfecho — cabe
   numa tela só a partir de 1100px.

   O que rola, quando precisa rolar, são as DUAS LISTAS de produtos, cada
   uma dentro da sua caixa. O diálogo nunca rola.
   ========================================================================= */

/* Card dentro da consulta de Movimentações. */
.card-troca{display:flex;align-items:center;justify-content:space-between;gap:16px;
 padding:16px 18px;margin-bottom:18px;border:1px solid #c9dcff;border-radius:var(--raio);
 background:linear-gradient(90deg,var(--azul-claro),#fbfdff)}
.card-troca>div{display:flex;align-items:center;gap:13px;min-width:0}
.card-troca .marca{width:42px;height:42px;border-radius:11px;background:var(--azul);color:white;
 display:grid;place-items:center;flex-shrink:0}
.card-troca .marca .ico{width:22px;height:22px}
.card-troca strong{display:block;font-size:15px;color:var(--tinta)}
.card-troca small{color:var(--tinta-fraca)}
.card-troca button{flex-shrink:0;min-height:46px;border-radius:11px;font-weight:700;gap:8px}

/* ---- O diálogo: cabeçalho, corpo em grade, rodapé fixo ---- */
/* `max-height` precisa vir junto: o `dialog` do style.css trava em 90dvh e,
   sem isto, a altura pedida aqui é ignorada. */
.troca-pdv{width:min(1240px,95vw);max-width:none;height:min(940px,94dvh);max-height:94dvh;padding:0;
 display:flex;flex-direction:column;overflow:hidden}
.troca-pdv>header{padding:18px 22px 14px;margin:0;border-bottom:1px solid var(--borda);flex-shrink:0}

/* `overflow:auto` aqui é rede de segurança, não o comportamento esperado:
   a partir de 1100px de largura tudo cabe sem rolar. Se um dia o conteúdo
   crescer, é melhor rolar do que sumir debaixo do rodapé. */
.troca-grade{flex:1 1 auto;min-height:0;overflow:auto;display:grid;gap:14px;padding:16px 22px;
 grid-template-columns:1fr 1fr;grid-template-rows:auto auto minmax(150px,1fr)}

/* ---- Faixa do cliente (coluna 1, linha 1) e Dica (coluna 2, linha 1) ---- */
.troca-cliente,.troca-dica{display:flex;align-items:center;gap:12px;padding:12px 15px;
 border-radius:12px;min-width:0}
.troca-cliente>div,.troca-dica>div{flex:1;min-width:0}
.troca-cliente strong,.troca-dica strong{display:block;color:var(--tinta);font-size:14.5px}
.troca-cliente small{display:block;color:var(--tinta-fraca)}
.troca-cliente .marca,.troca-dica .marca{width:38px;height:38px;border-radius:11px;
 display:grid;place-items:center;flex-shrink:0}
.troca-cliente button{flex-shrink:0;min-height:44px;border-radius:10px;gap:8px;font-weight:700}

/* Sem cliente a troca não anda: peso de alerta, não de nota. */
.troca-cliente.pendente{background:var(--laranja-claro);border:1px solid #ffd3ab}
.troca-cliente.pendente .marca{background:#ffe6cf;color:var(--laranja)}
.troca-cliente.ok{background:var(--cinza-claro);border:1px solid var(--borda)}
.troca-cliente.ok .marca{background:var(--azul-claro);color:var(--azul)}

/* `flex-direction:row` explícito: o `aside` do style.css é coluna de 215px e
   já empilhou este bloco uma vez. A regra fica mesmo com a tag trocada para
   `section`, para não voltar se alguém reescrever a marcação. */
.troca-dica{background:var(--azul-claro);border:1px solid #d7e5ff;align-items:flex-start;
 flex-direction:row;width:auto;border-right:1px solid #d7e5ff}
.troca-dica .marca{background:white;color:var(--azul)}
.troca-dica p{margin:2px 0 0;font-size:12.5px;line-height:1.4;color:#41608f}

/* ---- Caixa de etapa: mesma moldura para 1, 2 e 3 ---- */
.troca-etapa{border:1px solid var(--borda);border-radius:14px;padding:14px 16px;margin:0;
 background:white;min-width:0;display:flex;flex-direction:column}
.troca-etapa h3,.troca-etapa legend{display:flex;align-items:flex-start;gap:11px;margin:0 0 12px;
 padding:0;float:none;width:100%;font-size:14.5px;font-weight:700;color:var(--tinta)}
.troca-etapa legend strong,.troca-etapa h3 strong{display:block;font-size:14.5px;font-weight:700;line-height:1.25}
.troca-etapa legend small,.troca-etapa h3 small{display:block;font-size:12px;font-weight:450;
 color:var(--tinta-fraca);margin-top:2px;line-height:1.3}

/* O número da etapa dentro do círculo azul. */
.passo{width:26px;height:26px;border-radius:50%;background:var(--azul);color:white;flex-shrink:0;
 display:grid;place-items:center;font-size:13px;font-weight:750;line-height:1}
.marca-titulo{width:26px;height:26px;border-radius:8px;background:var(--azul-claro);color:var(--azul);
 display:grid;place-items:center;flex-shrink:0}
.marca-titulo .ico{width:16px;height:16px}

/* ---- 1. Motivo: três cartões lado a lado ---- */
.troca-etapa.motivo{border:1px solid var(--borda)}
.grade-motivo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cartao-motivo{display:flex;flex-direction:column;gap:7px;padding:12px 13px;margin:0;
 border:2px solid var(--borda);border-radius:12px;cursor:pointer;background:white}
/* Radio e ícone no alto, à esquerda — não centralizados sobre o texto. */
.cartao-motivo .cabeca{display:flex;align-items:center;gap:9px;color:var(--azul)}
.cartao-motivo .cabeca .ico{width:21px;height:21px}
.cartao-motivo input{width:18px;height:18px;min-height:0;margin:0;flex-shrink:0;accent-color:var(--azul)}
.cartao-motivo strong{display:block;font-size:13.5px;line-height:1.25;color:var(--tinta)}
.cartao-motivo .nota{display:block;font-size:11.5px;color:var(--tinta-fraca);line-height:1.35}
.cartao-motivo:has(input:checked){border-color:var(--azul);background:var(--azul-claro)}
.cartao-motivo:has(input:checked) strong{color:var(--azul-escuro)}

/* ---- Painel do cliente (coluna 2, linha 2) ---- */
.troca-etapa.info-cliente{background:var(--cinza-claro)}
.troca-cliente-painel{flex:1;display:flex;align-items:center;gap:12px;padding:14px 15px;
 background:white;border:1px solid var(--borda);border-radius:12px;min-width:0}
.troca-cliente-painel>div{flex:1;min-width:0}
.troca-cliente-painel strong{display:block;color:var(--tinta)}
.troca-cliente-painel small{display:block;color:var(--tinta-fraca);font-size:12.5px}
.troca-cliente-painel .marca{width:40px;height:40px;border-radius:50%;background:var(--cinza-claro);
 color:var(--tinta-fraca);display:grid;place-items:center;flex-shrink:0}
.troca-cliente-painel button{flex-shrink:0;min-height:44px;border-radius:10px;gap:8px;font-weight:700}

/* ---- 2 e 3: entrada e saída ---- */
/* `min-height:0` só aqui: são as duas etapas com lista rolável dentro. Sem
   isso o item de grade herda `min-height:auto`, cresce com a lista e empurra
   o conteúdo para debaixo do rodapé. Em 1 e 2 seria o contrário — deixá-las
   encolher corta o texto dos cartões de motivo. */
.troca-etapa.entra,.troca-etapa.sai{min-height:0}
.troca-etapa.entra{border-color:#b9e2cd}
.troca-etapa.entra .passo{background:var(--verde)}
.troca-etapa.sai{border-color:#c9dcff}

/* A busca tem largura suficiente para o rótulo caber numa linha: o texto
   quebrando letra por letra é sinal de container estreito, não de texto
   comprido. */
.troca-etapa .search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;
 align-items:end;margin-bottom:11px}
.troca-etapa.sai .search{grid-template-columns:minmax(0,1fr) 96px auto}
.troca-etapa .search label{margin:0;min-width:0}
.troca-etapa .search input{min-height:46px}
.troca-etapa .search button{margin:0;min-height:46px;white-space:nowrap;border-radius:10px;
 font-weight:700;gap:7px;padding:0 16px}
.troca-etapa .rotulo{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:650;
 color:#4b5a70;white-space:nowrap;margin-bottom:4px}
.troca-etapa .rotulo .ico{width:15px;height:15px;flex-shrink:0}

/* O único trecho que rola. */
.troca-itens{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.troca-item{border:1px solid var(--borda);border-radius:10px;padding:9px 11px;background:white}
/* Item sem estado definido não deixa concluir: fica marcado. */
.troca-item.sem-estado{border-color:var(--laranja);background:var(--laranja-claro)}
.troca-item-topo{display:flex;align-items:center;gap:8px}
.troca-item-topo strong{flex:1;min-width:0;font-size:13px;color:var(--tinta);
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.troca-item-topo .valor{font-weight:750;color:var(--tinta);white-space:nowrap}
.troca-item-topo .remove{min-height:26px;min-width:26px;padding:3px;color:var(--tinta-fraca)}
.troca-item small{display:block;font-size:11px;color:var(--tinta-fraca);margin-top:2px}
.troca-estado{display:grid;gap:4px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--borda)}
.troca-estado .radio{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:12px;cursor:pointer}
.troca-estado input{width:16px;height:16px;min-height:0;margin:1px 0 0;flex-shrink:0;accent-color:var(--azul)}
.troca-estado span{color:var(--tinta);line-height:1.3}
.troca-estado span small{display:inline;margin:0;color:var(--tinta-fraca)}

/* Estado vazio: ícone e duas linhas, centralizados. */
.troca-vazio{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:5px;text-align:center;padding:14px;color:var(--tinta-fraca)}
.troca-vazio .ico{width:38px;height:38px;color:#c3ccd8;stroke-width:1.5}
.troca-vazio p{margin:4px 0 0;font-size:13px;font-weight:600;color:#6b7a8d}
.troca-vazio small{font-size:11.5px}

/* ---- Rodapé: resumo em faixa + ações, na mesma linha ---- */
.troca-rodape{flex-shrink:0;display:flex;align-items:center;gap:16px;padding:14px 22px;
 border-top:1px solid var(--borda);background:#fbfcfe}
.troca-desfecho{flex:1;min-width:0;border-radius:12px;padding:11px 16px;border:1px solid var(--borda)}
.troca-desfecho h3{display:flex;align-items:center;gap:9px;margin:0 0 7px;font-size:13px;
 font-weight:700;color:var(--tinta)}
/* Três blocos separados por divisória. */
.troca-somas{display:flex;align-items:stretch;gap:0}
.troca-somas div{flex:1;min-width:0;padding:0 16px;display:grid;gap:1px;align-content:center}
.troca-somas div:first-child{padding-left:0}
.troca-somas div+div{border-left:1px solid var(--borda)}
.troca-somas small{font-size:11px;color:var(--tinta-fraca);font-weight:600}
.troca-somas strong{font-size:21px;letter-spacing:-.5px;line-height:1.1}
.troca-somas .entra strong{color:var(--verde)}
.troca-somas .sai strong{color:var(--azul)}
.troca-somas .diferenca strong{color:var(--tinta)}
.troca-frase{display:flex;gap:9px;align-items:flex-start;margin:8px 0 0;font-size:13px;
 line-height:1.4;font-weight:600}
.troca-frase .ico{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.troca-pendencia{display:flex;gap:8px;align-items:center;margin:7px 0 0;font-size:12px;
 color:var(--laranja);font-weight:650}
.troca-pendencia .ico{width:16px;height:16px;flex-shrink:0}

/* Cada desfecho tem cor própria: o operador reconhece de longe. */
.troca-desfecho.neutro{background:var(--cinza-claro)}
.troca-desfecho.paga{border-color:#c9dcff;background:var(--azul-claro)}
.troca-desfecho.paga .troca-frase{color:#274a7d}
/* Crédito é o caso que o operador TEM de falar em voz alta: verde. */
.troca-desfecho.credito{border-color:#9fd9b6;background:linear-gradient(180deg,#eefaf3,#fff)}
.troca-desfecho.credito .troca-frase{color:#12703c}
.troca-desfecho.credito .troca-frase .ico{color:var(--verde)}

.troca-acoes{display:flex;gap:10px;flex-shrink:0}
.troca-acoes button{min-height:52px;border-radius:11px;gap:9px;font-weight:700;padding:11px 22px}
.troca-acoes .ghost{border:1px solid var(--borda);background:white;color:var(--tinta-fraca)}

.troca-alertas{display:grid;gap:6px;padding:0 22px;flex-shrink:0}
.troca-alertas:empty{display:none}
.troca-alerta{display:flex;gap:9px;align-items:flex-start;margin:0;padding:9px 12px;font-size:12.5px;
 background:var(--laranja-claro);border:1px solid #ffd3ab;border-radius:10px;color:#8a4b12;line-height:1.4}
.troca-alerta .ico{width:17px;height:17px;flex-shrink:0;color:var(--laranja);margin-top:1px}
.troca-pdv .form-error{margin:0;flex-shrink:0}
.troca-pdv .form-error:empty{display:none}
.troca-pdv .form-error:not(:empty){padding:10px 14px;margin:0 22px;background:var(--vermelho-claro);
 border:1px solid #f3c9c9;border-radius:10px}

/* Telas curtas (1366x768 é a da loja): aperta o respiro, não a informação.
   Nada é escondido aqui — só as folgas encolhem, para a lista de produtos
   continuar com altura de trabalho. */
@media(max-height:800px){
 .troca-pdv{height:96dvh;max-height:96dvh}
 .troca-pdv>header{padding:12px 20px 10px}
 .troca-grade{gap:10px;padding:11px 18px}
 .troca-etapa{padding:10px 13px}
 .troca-etapa h3,.troca-etapa legend{margin-bottom:8px}
 .troca-etapa .search{margin-bottom:7px}
 .troca-etapa .search input,.troca-etapa .search button{min-height:42px}
 .troca-etapa .search input{margin-top:3px}
 .troca-etapa .rotulo{margin-bottom:2px}
 .troca-item{padding:7px 10px}
 .troca-item small{line-height:1.35}
 .troca-dica,.troca-cliente{padding:9px 12px}
 .troca-dica p{font-size:12px}
 .cartao-motivo{padding:9px 10px;gap:4px}
 .cartao-motivo .cabeca .ico{width:19px;height:19px}
 .cartao-motivo strong{font-size:13px;line-height:1.2}
 .cartao-motivo .nota{font-size:11px;line-height:1.3}
 .grade-motivo{gap:8px}
 .troca-rodape{padding:10px 18px;gap:14px}
 .troca-desfecho{padding:9px 14px}
 .troca-desfecho h3{margin-bottom:5px}
 .troca-somas strong{font-size:19px}
 .troca-frase{margin-top:6px;font-size:12.5px}
 .troca-acoes button{min-height:46px;padding:10px 18px}
 /* Lacrado e avariado lado a lado: em tela curta cada linha economizada é
    uma linha a mais de produto visível sem rolar. */
 .troca-estado{grid-template-columns:1fr 1fr;margin-top:6px;padding-top:6px}
}

/* Abaixo de 1100px não cabem duas colunas com três cartões de motivo:
   vira coluna única e o diálogo passa a rolar, como qualquer formulário. */
@media(max-width:1100px){
 .troca-pdv{height:auto;max-height:94dvh;overflow-y:auto}
 .troca-grade{grid-template-columns:1fr;grid-template-rows:none}
 .troca-itens{max-height:240px}
 .troca-rodape{flex-wrap:wrap}
 .troca-acoes{flex:1;justify-content:flex-end}
}
@media(max-width:700px){
 .grade-motivo{grid-template-columns:1fr}
 .troca-somas{display:grid;grid-template-columns:1fr 1fr}
 .troca-somas div{padding:0}
 .troca-somas div+div{border-left:0}
 .card-troca{flex-direction:column;align-items:stretch}
}

/* =========================================================================
   VENDA EM ESPERA
   Âmbar: não disputa com o laranja do Finalizar nem com o verde da
   entrega, e é a cor de "pendente, volta daqui a pouco".
   ========================================================================= */
.espera-colocar{width:100%;min-height:44px;border-radius:12px;font-weight:750;letter-spacing:.01em;
 color:#92400e;background:#fffbeb;border:1px solid #f5c26b}
.espera-colocar:hover:not(:disabled){background:#fef3c7;filter:none}
.espera-colocar .ico{width:19px;height:19px;color:var(--ambar)}
.pdv-open .basket .espera-colocar{min-height:40px;margin:0}
.espera-info{display:flex;align-items:center;gap:7px;margin:4px 0;padding:7px 10px;border-radius:var(--raio-pequeno);
 background:#fffbeb;border:1px solid #f5c26b;color:#92400e;font-size:13px}
.espera-info .ico{width:17px;height:17px;flex-shrink:0}
.espera-info[hidden]{display:none}
.espera-info>span{display:flex;align-items:center;gap:7px;flex:1;min-width:0}
.espera-info .espera-cancelar-carrinho{margin-left:auto;padding:3px 8px;min-height:0;font-size:12px;font-weight:700;color:#991b1b;white-space:nowrap}
.espera-card.no-carrinho{outline:2px solid var(--verde,#0f766e)}
.espera-cancelar-dialog{width:min(460px,calc(100% - 28px))}
.espera-cancelar-dialog textarea{width:100%;box-sizing:border-box;min-height:70px}
.acoes-espera-cancelar{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.cart-alerta{display:flex;gap:5px;align-items:flex-start;margin:4px 0 0;padding:4px 7px;border-radius:7px;
 background:#fffbeb;color:#92400e;font-size:11px;line-height:1.4}
.cart-alerta.bloqueia{background:var(--vermelho-claro);color:#991b1b}
.cart-alerta .ico{width:14px;height:14px;flex-shrink:0;margin-top:1px}

/* Botão ao lado de ABRIR ATENDIMENTOS, com contador. */
.whatsapp-botoes .espera-botao{color:#92400e;border-color:#f5c26b;background:#fffbeb}
.whatsapp-botoes .espera-botao .ico{color:var(--ambar)}
.espera-contador{min-width:22px;height:22px;padding:0 6px;border-radius:11px;display:inline-grid;place-items:center;
 background:#e5e7eb;color:var(--tinta-fraca);font-size:12px;font-weight:800}
.espera-contador.tem{background:var(--ambar);color:white}

/* Seção "Vendas do caixa em espera" na tela de atendimentos. */
.espera-secao{margin-top:22px;padding-top:16px;border-top:1px solid var(--borda)}
.espera-secao h3{margin:0 0 10px}
.espera-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.espera-card{border:1px solid var(--borda);border-left:4px solid var(--ambar);border-radius:var(--raio);
 background:white;box-shadow:var(--sombra);padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.espera-card header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.espera-codigo{font-size:22px;font-weight:800;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--tinta)}
.espera-dono{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:14px;
 background:var(--azul-claro);color:var(--azul-escuro);font-weight:750;font-size:13px}
.espera-dono small{display:inline;color:inherit;font-weight:600}
.espera-caixa{display:inline-flex;align-items:center;gap:4px;color:var(--tinta-fraca);font-size:13px;font-weight:600}
.espera-card .ico{width:15px;height:15px;flex-shrink:0}
.espera-cliente{display:flex;align-items:center;gap:6px;margin:0;font-size:13px}
.espera-itens{margin:0;padding-left:18px;font-size:12px;color:var(--tinta-fraca);line-height:1.5}
.espera-rodape{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;border-top:1px solid var(--borda);padding-top:8px}
.espera-valor{font-size:18px;color:#0a8f58}
.espera-tempo{display:flex;flex-direction:column;line-height:1.3}
.espera-tempo small{line-height:1.3}
.espera-tempo b{font-size:13px;color:#92400e}
.espera-acoes{margin-left:auto;display:flex;gap:6px}
.espera-acoes button{min-height:38px;padding:7px 11px}
.espera-card.expirando{border-left-color:var(--vermelho)}
.espera-card.expirando .espera-tempo b{color:var(--vermelho)}
.espera-card.expirada{opacity:.6}
.espera-card.em-uso{background:#f8fafc}
.espera-trava{display:flex;align-items:center;gap:6px;margin:0;padding:6px 9px;border-radius:8px;
 background:var(--cinza-claro);color:var(--tinta);font-size:12px}
.espera-cancelar{display:grid;gap:6px}
.espera-cancelar label{margin:0}
.espera-cancelar div{display:flex;justify-content:flex-end;gap:6px}
.espera-cancelar .perigo{background:var(--vermelho);border-color:var(--vermelho)}
.espera-card .form-error:empty{display:none}
.espera-vazio{display:flex;flex-direction:column;align-items:center;text-align:center;color:#9ba7b9;padding:24px}
.espera-vazio .ico{width:30px;height:30px}
.espera-vazio p{margin:8px 0 2px;color:var(--tinta-fraca);font-weight:650}

/* Código mostrado ao pôr em espera: é para ler de longe e anotar. */
.espera-codigo-dialog{width:min(430px,calc(100% - 28px));text-align:center}
.espera-codigo-dialog header{justify-content:flex-start;text-align:left}
.espera-codigo-grande{margin:18px 0 6px;font-size:58px;font-weight:850;letter-spacing:.18em;
 font-variant-numeric:tabular-nums;color:var(--tinta);background:#fffbeb;border:2px dashed #f5c26b;border-radius:var(--raio);padding:8px 0 8px .18em}
.espera-codigo-info{margin:0 0 8px;font-size:15px}
.espera-codigo-dialog [data-ok]{width:100%;margin-top:8px}

/* Pendências do fechamento. */
.espera-pendencias{border:1px solid #f5c26b;background:#fffbeb;border-radius:var(--raio-pequeno);padding:10px 14px;margin:10px 0}
.espera-pendencias h3{margin:0 0 4px}
.espera-pendencias ul{margin:6px 0 0;padding-left:18px}
.espera-pendencias li{margin:4px 0}
.espera-pendencias button{min-height:32px;padding:4px 10px;margin-left:8px}
@media(max-width:680px){.espera-lista{grid-template-columns:1fr}.espera-acoes{margin-left:0;width:100%}.espera-acoes button{flex:1}}
@media(min-width:1100px){
 /* A faixa da venda retomada divide a linha do título "Carrinho", à
    direita: em 1366x768 não sobra altura para mais uma linha acima do
    carrinho. O botão de espera ocupa a largura toda, abaixo dos dois de
    finalizar. */
 .pdv-open #espera-info{grid-area:title;justify-self:end;align-self:center;margin:0;max-width:62%;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:4px 10px;font-size:12px}
 .pdv-open #hold{grid-column:1/-1}
 .pdv-open .cart-item>div>.cart-alerta{grid-column:1/-1}
}

/* =========================================================================
   ENTRADA MANUAL DE MERCADORIA
   Organização do Lotus (faixa do item, INCLUIR à direita, lista no corpo,
   atalhos na lateral, total no rodapé) com o visual do Casagrande.
   ========================================================================= */
.em-host{background:transparent;border:0;padding:0;box-shadow:none}
.em-tela{display:flex;flex-direction:column;gap:14px;min-width:0}
.em-tela section,.em-cabecalho{background:white;border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra)}
.em-tela h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:16px}
.em-tela h3 .ico{width:20px;height:20px;color:var(--azul)}
.em-tela h3 small{display:inline;color:var(--tinta-fraca);font-weight:600;margin-left:4px}

.em-cabecalho{display:grid;grid-template-columns:minmax(0,1.3fr) auto minmax(0,1.2fr);align-items:center;gap:16px;padding:14px 18px}
.em-titulo{display:flex;align-items:center;gap:13px;min-width:0}
.em-marca{width:52px;height:52px;border-radius:13px;background:var(--azul);color:white;display:grid;place-items:center;flex-shrink:0;box-shadow:0 4px 12px #2563eb40}
.em-marca .ico{width:28px;height:28px}
.em-titulo h2{margin:0;font-size:22px;letter-spacing:-.4px}
.em-titulo p{margin:2px 0 0;color:var(--tinta-fraca);font-size:13px;line-height:1.4}
.em-relogio{display:flex;align-items:center;gap:9px;color:var(--tinta)}
.em-relogio>.ico{width:24px;height:24px;color:var(--tinta-fraca)}
.em-relogio strong{display:block;font-size:22px;font-variant-numeric:tabular-nums;line-height:1.1}
.em-relogio small{line-height:1.3}
.em-quem{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0}
.em-quem small{line-height:1.3}
.em-fornecedor{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:4px 10px;border-radius:14px;
 background:var(--verde-claro);color:#14683a;font-size:12px;font-weight:650;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.em-fornecedor .ico{width:15px;height:15px;flex-shrink:0}
.em-fornecedor b{background:#15803d;color:white;border-radius:9px;padding:1px 7px;font-size:10px;letter-spacing:.04em;text-transform:uppercase}

.em-faixa{padding:14px 18px 6px}
.em-linha1{display:grid;grid-template-columns:minmax(210px,1fr) minmax(0,2.2fr) minmax(130px,.9fr) minmax(140px,.8fr);gap:12px;align-items:end}
.em-linha1 label,.em-caixa{margin:0}
.em-codigo span{display:flex;margin-top:7px}
.em-codigo input{margin:0;border-radius:8px 0 0 8px;border:2px solid var(--azul);background:white;font-size:15px}
.em-leitor{min-height:44px;border-radius:0 8px 8px 0;border:1px solid #d6deea;border-left:0;padding:0 12px}
.em-leitor .ico{width:24px;height:24px}
.em-descricao input{background:#f1f5f9;color:var(--tinta);font-weight:600}
.em-resultados{margin-top:8px;border:1px solid #c5d9ff;border-radius:var(--raio-pequeno);background:#f8fbff;padding:8px;display:grid;gap:4px;max-height:230px;overflow:auto}
.em-resultados[hidden]{display:none}
.em-resultados p{margin:2px 4px}
/* A tela tem cabeçalho próprio (título, relógio, loja, fornecedor): o padrão do ERP repetiria o título. */
.entrada-manual-page>.heading{display:none}
.em-resultados [data-produto]{justify-content:flex-start;text-align:left;flex-direction:column;align-items:flex-start;gap:0;min-height:0;padding:7px 10px;background:white}
.em-resultados [data-produto] small{line-height:1.4}
.em-nada{display:flex;align-items:center;gap:6px;color:#92400e}
.em-nada .ico{width:16px;height:16px}
.em-cadastrar{justify-self:start;color:var(--azul);border-color:#c5d9ff;font-weight:700}
.em-cadastrar .ico{width:17px;height:17px}
.em-linha2{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) minmax(190px,1.35fr);gap:10px;align-items:stretch;margin-top:12px}
.em-caixa{display:flex;flex-direction:column;justify-content:space-between;gap:4px;padding:8px 10px;border-radius:var(--raio-pequeno);
 background:#f6f8fb;border:1px solid #edf0f5;font-size:12px;font-weight:600;color:#566378;min-width:0}
.em-caixa input{margin:0;min-height:36px;padding:6px 8px;font-size:16px;font-weight:700;background:white}
.em-caixa.leitura strong{font-size:19px;color:var(--tinta);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.em-margem span{display:flex;align-items:center}
.em-margem input{border-radius:8px 0 0 8px}
.em-margem i{font-style:normal;min-height:36px;display:grid;place-items:center;padding:0 9px;border:1px solid #d6deea;border-left:0;border-radius:0 8px 8px 0;background:#eef2f7;font-weight:700}
.em-qtd input{border:2px solid #c5d9ff}
.em-incluir{border-radius:12px;min-height:64px;font-size:17px;font-weight:750;justify-content:flex-start;gap:12px;padding:10px 18px;box-shadow:0 4px 14px #2563eb38}
.em-incluir .ico{width:30px;height:30px}
.em-incluir span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.em-incluir small{color:#dbe7ff;font-size:12px;font-weight:600;line-height:1.3}
.em-faixa .form-error{min-height:20px;margin:6px 0 0;font-size:13px}

.em-corpo{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:14px;align-items:start}
.em-itens{padding:14px 18px;min-height:300px;min-width:0}
.em-tabela{overflow:auto;border:1px solid var(--borda);border-radius:var(--raio-pequeno)}
.em-tabela table{font-size:13px}
.em-tabela th{background:#f6f8fb;padding:10px 8px;font-weight:650;color:#566378;position:sticky;top:0}
.em-tabela td{padding:9px 8px}
.em-tabela .num{text-align:right;font-variant-numeric:tabular-nums}
.em-tabela .em-desc{white-space:normal;min-width:180px;font-weight:600}
.em-tabela td small{display:block;line-height:1.3}
.em-tabela tbody tr{cursor:pointer}
.em-tabela tbody tr:hover{background:#f8fbff}
.em-tabela tbody tr.selecionada{background:var(--azul-claro);box-shadow:inset 3px 0 0 var(--azul)}
.em-tabela td button{min-height:32px;padding:4px 7px;color:var(--vermelho)}
.em-tabela td button .ico{width:16px;height:16px}
.em-tabela .negativa{color:var(--vermelho);font-weight:700}
.em-vazio{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 16px;color:var(--tinta-fraca)}
.em-vazio .ico{width:54px;height:54px;color:#7c8aa2;stroke-width:1.4}
.em-vazio p{margin:12px 0 2px;font-size:17px;font-weight:700;color:var(--tinta)}
.em-atalhos{display:flex;flex-direction:column;gap:9px}
.em-atalhos button{justify-content:flex-start;text-align:left;gap:11px;padding:10px 12px;border-radius:var(--raio-pequeno);background:white;box-shadow:var(--sombra);font-weight:700}
.em-atalhos button .ico{width:24px;height:24px;flex-shrink:0;color:var(--azul)}
.em-atalhos button span{display:flex;flex-direction:column;line-height:1.25}
.em-atalhos button small{line-height:1.3;font-weight:600}
.em-atalhos [data-atalho=remover] .ico{color:var(--vermelho)}
.em-atalhos .em-finalizar-atalho{background:var(--laranja-claro);border-color:#fdc9a0}
.em-atalhos .em-finalizar-atalho .ico{color:var(--laranja)}

.em-rodape{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px}
.em-ultimas,.em-total{padding:14px 18px}
.em-ultimas h3 button{margin-left:auto;min-height:30px;padding:4px 8px;color:var(--azul);font-size:13px}
.em-ultimas ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.em-ultimas li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 10px;border-radius:9px;background:#f6f8fb;font-size:13px}
.em-ultimas li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tinta-fraca)}
.em-ultimas li em{font-style:normal;font-weight:700;white-space:nowrap}
.em-ultimas-vazio{display:flex;align-items:center;gap:14px;padding:14px;border-radius:var(--raio-pequeno);background:#eef4ff}
.em-ultimas-vazio .ico{width:36px;height:36px;color:var(--azul)}
.em-total{display:flex;flex-direction:column;gap:6px}
.em-total>div{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border:1px solid var(--borda);border-radius:var(--raio-pequeno);padding:6px 14px}
.em-total>div strong{font-size:44px;color:var(--azul);letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1.15}
.em-total>div small{font-size:13px;font-weight:600}
.em-total [data-finalizar]{background:var(--laranja);border-color:var(--laranja);font-weight:800;min-height:48px;border-radius:12px;box-shadow:0 2px 0 #c2570a}
.em-total [data-finalizar]:disabled{opacity:.5;box-shadow:none}

/* Diálogos da entrada */
.em-dialogo{width:min(620px,calc(100% - 28px))}
.em-dialogo header{margin-bottom:12px}
.em-form{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.em-form .largo{grid-column:1/-1}
.em-botoes{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.em-resumo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:4px 0 14px}
.em-resumo div{background:#f6f8fb;border:1px solid #edf0f5;border-radius:var(--raio-pequeno);padding:8px 12px}
.em-resumo span{display:block;font-size:12px;color:var(--tinta-fraca);font-weight:600}
.em-resumo strong{font-size:20px;font-variant-numeric:tabular-nums}
.em-motivos{border:0;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:8px}
.em-motivos legend{font-size:12px;font-weight:700;color:#566378;margin-bottom:8px}
.em-pilula{margin:0;cursor:pointer}
.em-pilula input{position:absolute;opacity:0;width:1px;height:1px;margin:0;min-height:0}
.em-pilula span{display:inline-flex;align-items:center;min-height:38px;padding:7px 14px;border-radius:19px;border:1px solid #d6deea;background:white;font-size:13px;font-weight:650;color:var(--tinta)}
.em-pilula input:checked+span{background:var(--azul);border-color:var(--azul);color:white}
.em-pilula input:focus-visible+span{outline:2px solid #8bb4ff;outline-offset:2px}
.em-aviso{display:flex;gap:7px;align-items:flex-start;font-size:13px;line-height:1.45}
.em-aviso .ico{width:17px;height:17px;flex-shrink:0;margin-top:2px;color:var(--azul)}
.em-concluida .dialog-marca.ok{background:var(--verde-claro);color:var(--verde)}
.em-etiquetas{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:var(--raio-pequeno);font-size:14px;line-height:1.45}
.em-etiquetas .ico{width:19px;height:19px;flex-shrink:0;margin-top:1px}
.em-etiquetas.ok{background:var(--verde-claro);color:#14683a}
.em-etiquetas.aviso{background:#fffbeb;color:#92400e;border:1px solid #f5c26b}
.em-relatorio{width:min(1180px,calc(100% - 28px))}
.em-filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:12px}
.em-filtros label{margin:0;min-width:150px}
.em-filtros button{margin-bottom:0}

@media(max-width:1180px){
 .em-linha2{grid-template-columns:repeat(4,minmax(0,1fr))}
 .em-incluir{grid-column:span 4;min-height:52px}
 .em-cabecalho{grid-template-columns:1fr auto}
 .em-quem{grid-column:1/-1;align-items:flex-start;text-align:left}
}
@media(max-width:860px){
 .em-linha1{grid-template-columns:1fr 1fr}
 .em-corpo,.em-rodape{grid-template-columns:1fr}
 .em-atalhos{flex-direction:row;flex-wrap:wrap}
 .em-atalhos button{flex:1 1 150px}
 .em-linha2{grid-template-columns:1fr 1fr}
 .em-incluir{grid-column:1/-1}
 .em-cabecalho{grid-template-columns:1fr}
 .em-form,.em-resumo{grid-template-columns:1fr}
}

/* =========================================================================
   PRODUTOS — lista e cadastro em abas (referências de 18/09/2026)
   ========================================================================= */
/* O cabeçalho do ERP não é mais escondido aqui: ele não é mais criado.
   A barra de ações do ERP continua fora — as ações desta tela ficam no
   próprio cabeçalho dela. */
.produtos-page>.erp-actions{display:none}
.pr-host{background:transparent;border:0;padding:0;box-shadow:none}
.pr-tela{display:flex;flex-direction:column;gap:16px;min-width:0}
.pr-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pr-trilha{font-size:14px;color:var(--tinta-fraca);margin-bottom:10px}
.pr-trilha span{margin:0 8px}
.pr-trilha b{color:var(--azul);font-weight:600}
.pr-topo h1{margin:0;font-size:30px;letter-spacing:-.6px}
.pr-topo p{margin:2px 0 0;color:var(--tinta-fraca);font-size:15px}
.pr-topo-acoes{display:flex;gap:10px;flex-wrap:wrap}
.pr-topo-acoes button{min-height:46px;padding:10px 20px;font-size:15px}
.pr-topo-acoes .ico{width:20px;height:20px}

.pr-filtros,.pr-lista{background:white;border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra)}
.pr-filtros{padding:18px 18px 16px;display:flex;flex-direction:column;gap:14px}
.pr-busca{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px}
.pr-busca button{min-height:44px;padding:9px 26px}
.pr-busca .ico{width:18px;height:18px}
.pr-campo-busca{position:relative;margin:0}
.pr-campo-busca>.ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--tinta-fraca)}
.pr-campo-busca input{margin:0;padding-left:44px;background:white}
.pr-selects{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.pr-selects label{margin:0;font-weight:600;color:var(--tinta)}
.pr-selects select{margin-top:6px;background:white}
.pr-rapidos{display:flex;flex-wrap:wrap;gap:12px}
.pr-rapido{min-height:38px;padding:7px 20px;border-radius:8px;background:white;font-weight:600;gap:9px}
.pr-rapido .ico{width:18px;height:18px}
.pr-rapido.ativo{background:var(--azul);border-color:var(--azul);color:white}
.pr-rapido-estoque_baixo .ico{color:var(--ambar)}
.pr-rapido-sem_estoque .ico{color:var(--vermelho)}
.pr-rapido-promocao .ico{color:var(--verde)}
.pr-rapido-com_estoque .ico,.pr-rapido-inativos .ico{color:var(--tinta)}
.pr-rapido.ativo .ico{color:white}

.pr-resumo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pr-resumo strong{font-size:16px;margin-right:auto}
.pr-resumo label{display:flex;align-items:center;gap:10px;margin:0;font-weight:500;color:var(--tinta-fraca);white-space:nowrap}
.pr-resumo select{margin:0;min-height:40px;min-width:150px;background:white;color:var(--tinta)}

.pr-lista{overflow:hidden}
.pr-tabela{overflow-x:auto}
.pr-tabela table{font-size:14px;white-space:normal}
.pr-tabela th{background:#f8fafc;color:var(--tinta-fraca);font-weight:600;padding:13px 10px;white-space:nowrap}
.pr-tabela td{padding:11px 10px;vertical-align:middle}
.pr-tabela .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-codigo{font-variant-numeric:tabular-nums;color:var(--tinta);width:60px}
.pr-foto{width:52px}
.pr-foto span{width:42px;height:42px;border-radius:9px;background:#f1f5f9;display:grid;place-items:center;color:#94a3b8}
.pr-foto .ico{width:22px;height:22px}
.pr-desc{min-width:210px}
.pr-tabela td.pr-suave{font-size:13px;max-width:230px}
.pr-desc strong{display:block;font-weight:600;text-transform:uppercase;font-size:13.5px;line-height:1.35}
.pr-desc small{line-height:1.3}
.pr-suave{color:var(--tinta-fraca)}
.pr-estoque{font-weight:700}
.pr-estoque.ok{color:#16a34a}.pr-estoque.aviso{color:#ea8a0c}.pr-estoque.perigo{color:var(--vermelho)}
.pr-pilula{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:14px;font-size:12.5px;font-weight:600;white-space:nowrap}
.pr-pilula i{width:9px;height:9px;border-radius:50%;background:currentColor}
.pr-pilula.ok{background:#e9f8ef;color:#15803d}
.pr-pilula.aviso{background:#fff7e0;color:#b45309}
.pr-pilula.aviso i{background:#f5b50b}
.pr-pilula.perigo{background:#fdecec;color:#c81e1e}
.pr-pilula.neutro{background:#f1f5f9;color:var(--tinta-fraca)}
.pr-promo{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:14px;background:#fdecec;color:#c81e1e;font-size:12.5px;font-weight:600;white-space:nowrap}
.pr-promo .ico{width:14px;height:14px}
.pr-promo-mais{line-height:1.3;margin-top:2px}
.pr-acoes-col{text-align:center}
.pr-acoes{width:1%;white-space:nowrap}
.pr-acoes>div{display:flex;align-items:center;justify-content:center;gap:6px}
.pr-icone{min-height:38px;width:38px;padding:0;border-radius:9px;background:white}
.pr-icone .ico{width:19px;height:19px}
.pr-icone.azul{color:var(--azul)}
.pr-icone.mais{border-color:transparent;background:transparent}
.pr-icone.perigo{color:var(--vermelho)}
.pr-vazio,.pr-carregando{display:flex;flex-direction:column;align-items:center;padding:48px 16px;color:var(--tinta-fraca);text-align:center}
.pr-vazio .ico{width:48px;height:48px;color:#94a3b8}
.pr-vazio p{margin:10px 0 2px;font-weight:700;color:var(--tinta)}
.pr-rodape{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--borda)}
.pr-rodape>span{color:var(--tinta-fraca)}
.pr-paginas{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pr-paginas button{min-height:38px;min-width:38px;padding:6px 12px;background:white;font-weight:500}
.pr-paginas button.atual{background:var(--azul);border-color:var(--azul);color:white}
.pr-reticencias{padding:0 6px;color:var(--tinta-fraca)}
.pr-rodape [data-exportar] .ico{color:#15803d}
.pr-menu-mais{position:absolute;z-index:40;background:white;border:1px solid var(--borda);border-radius:var(--raio-pequeno);box-shadow:var(--sombra-alta);padding:6px;display:flex;flex-direction:column;min-width:200px}
.pr-menu-mais button{justify-content:flex-start;border:0;min-height:38px;padding:8px 10px;font-weight:600}
.pr-menu-mais .ico{width:17px;height:17px;color:var(--azul)}

/* ---- Cadastro em abas ---- */
.pr-cadastro{width:min(1300px,calc(100% - 24px));max-width:none;height:min(92dvh,900px);max-height:92dvh;padding:0;overflow:hidden}
.pr-cadastro>form{display:flex;flex-direction:column;height:100%}
.pr-cad-topo{display:flex;align-items:center;gap:16px;padding:18px 22px 12px;position:relative}
.pr-cad-marca{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;background:var(--azul-claro);color:var(--azul);border:1px solid #c5d9ff;flex-shrink:0}
.pr-cad-marca .ico{width:28px;height:28px}
.pr-cad-topo h2{font-size:22px}
.pr-cad-botoes{margin-left:auto;display:flex;gap:10px;padding-right:34px}
.pr-cad-botoes button{min-height:42px;padding:9px 18px}
.pr-cad-x{position:absolute;top:10px;right:10px;min-height:32px;padding:4px}
.pr-abas{display:flex;gap:4px;padding:0 22px;border-bottom:1px solid var(--borda);overflow-x:auto;flex-shrink:0}
.pr-abas button{border:0;border-radius:0;background:transparent;min-height:46px;padding:10px 16px;gap:8px;color:var(--tinta-fraca);font-weight:600;border-bottom:3px solid transparent;white-space:nowrap}
.pr-abas button .ico{width:18px;height:18px}
.pr-abas button.ativa{color:var(--azul);border-bottom-color:var(--azul)}
.pr-cad-corpo{flex:1;overflow:auto;padding:16px 22px;background:#f8fafc}
.pr-cad-corpo section{display:flex;flex-direction:column;gap:14px}
.pr-cad-corpo section[hidden]{display:none}
.pr-card{border:1px solid var(--borda);border-radius:var(--raio);background:white;padding:12px 16px 14px;margin:0;min-width:0}
.pr-card legend{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;padding:0 6px;color:var(--tinta)}
.pr-card legend .ico{width:20px;height:20px;color:var(--azul)}
.pr-card label{margin-bottom:10px;font-weight:500;color:var(--tinta)}
.pr-card input,.pr-card select{margin-top:5px;background:white}
.pr-card input:disabled,.pr-card select:disabled{background:#f1f5f9;color:var(--tinta)}
.pr-grade-2{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px}
.pr-grade-precos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:14px}
.pr-linha{display:grid;gap:12px}
.pr-l3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pr-l4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pr-l4b{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.3fr);align-items:end}
.pr-obrig{color:var(--vermelho)}
.pr-grande{font-size:16px;font-weight:600}
.pr-com-icone{display:flex;align-items:stretch}
.pr-com-icone input{border-radius:8px 0 0 8px}
.pr-com-icone>.ico{width:44px;height:auto;padding:10px;margin-top:5px;border:1px solid #d6deea;border-left:0;border-radius:0 8px 8px 0;background:#f8fafc;color:var(--tinta)}
.pr-sufixo{display:flex}
.pr-sufixo input{border-radius:8px 0 0 8px}
.pr-sufixo i{font-style:normal;margin-top:5px;display:grid;place-items:center;padding:0 12px;border:1px solid #d6deea;border-left:0;border-radius:0 8px 8px 0;background:#f1f5f9;font-weight:700}
.pr-chaves{display:flex;flex-direction:column;gap:8px;padding-bottom:10px}
.pr-chave{display:flex;align-items:center;gap:10px;margin:0;cursor:pointer;font-weight:500}
.pr-chave input{position:absolute;opacity:0;width:1px;height:1px;margin:0;min-height:0}
.pr-chave span{width:38px;height:22px;border-radius:11px;background:#cbd5e1;position:relative;flex-shrink:0;transition:background .15s}
.pr-chave span::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:white;box-shadow:0 1px 2px #0003;transition:left .15s}
.pr-chave input:checked+span{background:var(--azul)}
.pr-chave input:checked+span::after{left:19px}
.pr-chave input:focus-visible+span{outline:2px solid #8bb4ff;outline-offset:2px}
.pr-chave input:disabled+span{opacity:.6}
.pr-dica,.pr-aviso-promo,.pr-aviso-estoque{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.45;margin:6px 0 0}
.pr-dica .ico,.pr-aviso-promo .ico,.pr-aviso-estoque .ico{width:17px;height:17px;flex-shrink:0;margin-top:2px}
.pr-dica{color:var(--tinta-fraca)}
.pr-aviso-promo{background:#e9f8ef;color:#14683a;border-radius:var(--raio-pequeno);padding:10px 12px}
.pr-aviso-estoque{background:var(--azul-claro);color:#1d4ed8;border-radius:var(--raio-pequeno);padding:10px 12px}
.pr-promo-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.pr-promo-topo button{min-height:38px;padding:7px 14px;color:var(--azul);border-color:#c5d9ff}
.pr-promo-topo .ico{width:17px;height:17px}
.pr-faixas table{font-size:13px}
.pr-faixas th{padding:8px 6px;color:var(--tinta-fraca);font-weight:600;background:#f8fafc}
.pr-faixas td{padding:6px}
.pr-faixas input{margin:0;min-height:36px;padding:6px 8px}
.pr-unitario{display:block;font-weight:700;font-size:15px;padding:6px 8px;background:#f1f5f9;border-radius:8px;text-align:right}
.pr-faixas td small{line-height:1.3;text-align:right}
.pr-faixas small.ok{color:#15803d}.pr-faixas small.perigo{color:var(--vermelho)}
.pr-sem-faixa{margin:4px 0 8px}
.pr-destaque{font-size:20px!important;font-weight:800;background:var(--azul-claro)!important;color:var(--azul-escuro)!important}
.pr-tipo-controle{display:flex;flex-direction:column;gap:4px;margin:4px 0 8px}
.pr-tipo-controle span{font-size:12px;font-weight:600;color:var(--tinta-fraca)}
.pr-tipo-controle b{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.pr-tipo-controle .ico{width:17px;height:17px;color:var(--azul)}
.pr-tabela.pequena table{font-size:13px}
.pr-codigos{margin:0;padding-left:18px}
.pr-codigos b{font-size:11px;color:#15803d;text-transform:uppercase}
.pr-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:0 0 8px}
.pr-meta dt{font-size:12px;color:var(--tinta-fraca);font-weight:600}
.pr-meta dd{margin:2px 0 0;font-weight:600}
.pr-cad-erro{margin:0;padding:8px 22px;min-height:36px;border-top:1px solid var(--borda);background:white}
.pr-cad-erro:empty{display:none}

@media(max-width:1100px){
 .pr-selects{grid-template-columns:repeat(3,minmax(0,1fr))}
 .pr-grade-2,.pr-grade-precos{grid-template-columns:1fr}
 .pr-l4,.pr-l4b{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
 .pr-busca{grid-template-columns:1fr 1fr}
 .pr-campo-busca{grid-column:1/-1}
 .pr-selects,.pr-l3{grid-template-columns:1fr 1fr}
 .pr-cad-botoes{padding-right:30px}
 .pr-cad-topo{flex-wrap:wrap}
}

/* Painel DEVELOPER > Sistema: atualizar mesmo com caixa aberto. */
.forcar-atualizacao{margin-top:18px;padding:14px 16px;border:1px solid #f3b4b4;border-radius:var(--raio-pequeno);background:#fff7f7}
.forcar-atualizacao p{margin:0 0 8px}
.forcar-atualizacao table{margin:6px 0 10px;font-size:13px}
.forcar-atualizacao tfoot td{font-weight:700;border-top:1px solid var(--borda)}
.confirmar-forcar{display:flex;align-items:flex-start;gap:9px;font-size:14px;font-weight:600;color:#991b1b;margin:6px 0 10px;cursor:pointer}
.confirmar-forcar input{width:18px;height:18px;min-height:0;margin:2px 0 0;flex-shrink:0}
.forcar-atualizacao button.perigo{background:var(--vermelho);border-color:var(--vermelho);color:white;font-weight:800}
.forcar-atualizacao button.perigo:disabled{opacity:.45;cursor:not-allowed}

/* Painel DEVELOPER > Sistema: fechar caixas (fora da produção). */
.fechar-caixas{margin-top:14px;padding:12px 16px;border:1px solid #f5c26b;border-radius:var(--raio-pequeno);background:#fffbeb}
.fechar-caixas p{margin:0 0 8px}
.fechar-caixas button{font-weight:800;color:#92400e;border-color:#f5c26b;background:white}
.fechar-caixas-dialogo{width:min(620px,calc(100% - 28px))}
.fechar-caixas-dialogo table{font-size:13px;margin:8px 0}
.fechar-caixas-dialogo tfoot td{font-weight:700;border-top:1px solid var(--borda)}
.fechar-caixas-dialogo .atencao{background:#fdecec;color:#991b1b;padding:8px 10px;border-radius:8px}
.fechar-caixas-dialogo button.perigo{background:var(--vermelho);border-color:var(--vermelho);color:white;font-weight:800}
.fechar-caixas-dialogo button.perigo:disabled{opacity:.45;cursor:not-allowed}
/* Conferência do envio para homologação: arquivo por arquivo, com a origem. */
.envio-dialogo{width:min(820px,calc(100% - 28px))}
.envio-dialogo label{display:block;margin:10px 0 4px;font-weight:600}
.envio-dialogo input[type=text],.envio-dialogo textarea{width:100%;box-sizing:border-box}
.envio-dialogo .arquivos-envio{font-size:13px;margin:6px 0 10px;max-height:300px;overflow:auto;border:1px solid var(--borda);border-radius:8px}
.envio-dialogo .arquivos-envio table{width:100%;margin:0}
.envio-dialogo .arquivos-envio th,.envio-dialogo .arquivos-envio td{padding:5px 10px}
.envio-dialogo .arquivos-envio td:nth-child(2){overflow-wrap:anywhere;width:100%}
.envio-dialogo .estado{font-size:11px;font-weight:700;text-transform:uppercase}
.envio-dialogo .estado.novo{color:#166534}.envio-dialogo .estado.alterado{color:#92400e}.envio-dialogo .estado.apagado{color:#991b1b}
.envio-dialogo .origem{display:inline-block;font-size:11px;font-weight:700;padding:1px 7px;border-radius:10px;background:#eef2ff;color:#3730a3}
.envio-dialogo .origem.codex{background:#fef3c7;color:#92400e}
.envio-dialogo .origem.sem{background:#f3f4f6;color:#4b5563}
.envio-dialogo .avisos-envio{background:#fff7ed;border:1px solid #fdba74;border-radius:8px;padding:6px 12px;margin:8px 0}
.envio-dialogo .avisos-envio .aviso{margin:6px 0;color:#9a3412;font-weight:600}
.envio-dialogo .avisos-envio .aviso.varios_agentes,.envio-dialogo .avisos-envio .aviso.agente_ativo{color:#991b1b}
.envio-dialogo .confirmar-forcar{display:flex}
.envio-dialogo button.destaque:disabled{opacity:.45;cursor:not-allowed}

/* Indicador de rede do PDV e fila local (pdv-offline-ui.js).
   Verde/vermelho no topo porque quem opera precisa saber, de relance, se a
   venda esta indo para o servidor ou para a fila do terminal. */
.rede-topo{display:inline-flex;vertical-align:middle;margin-left:9px}
.estado-rede{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
 border:1px solid #bbf7d0;background:#f0fdf4;color:#166534;font-size:12px;font-weight:700;cursor:pointer;line-height:1.3}
.estado-rede .ico{width:15px;height:15px;flex-shrink:0}
.estado-rede small{font-weight:500;color:#4b5563}
.estado-rede.offline{background:var(--vermelho-claro,#fef2f2);border-color:#fecaca;color:#991b1b}
.estado-rede .fila-n{background:#fde68a;color:#92400e;border-radius:999px;padding:1px 7px}
.estado-rede .fila-conflito{background:#fecaca;color:#991b1b;border-radius:999px;padding:1px 7px}
.pendencias-dialog{width:min(720px,calc(100% - 28px))}
.pendencias-tabela{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.pendencias-tabela th,.pendencias-tabela td{text-align:left;padding:6px 8px;border-bottom:1px solid #e5e7eb}
.pendencias-tabela .pend-conflito{background:var(--vermelho-claro,#fef2f2)}
.pendencias-tabela .pend-sincronizado{color:#4b5563}
.pendencias-tabela .pend-motivo{max-width:280px;color:#991b1b}
.acoes-pendencias{display:flex;justify-content:flex-end;margin-top:12px}

/* Aba de entregas da loja: selo de canal ao vivo e avisos vindos da rua.
   O aviso fica em cima da tabela porque é o que muda decisão: pagamento
   trocado pelo motoboy mexe no dinheiro que o caixa espera. */
.ao-vivo{font-size:11px;font-weight:700;color:#166534;background:#dcfce7;border-radius:999px;padding:2px 9px;margin-left:8px;vertical-align:middle}
.ao-vivo.parado{color:#92400e;background:#fef3c7}
.avisos-entrega{border:1px solid #f5c26b;background:#fffbeb;border-radius:10px;padding:10px 12px;margin:10px 0}
.avisos-entrega h3{margin:0 0 8px;font-size:13px;color:#92400e}
.aviso-entrega{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:6px 0;border-top:1px solid #fde68a}
.aviso-entrega:first-of-type{border-top:0}
.aviso-entrega p{margin:0;font-size:13px;color:#7c2d12;line-height:1.4}

/* Reativação de clientes: lista para o celular do atendente, um toque por
   cliente. Alvo grande porque é usada em pé, entre um atendimento e outro. */
.reativacao-filtro{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.reativacao-card{display:flex;gap:12px;align-items:center;justify-content:space-between;
 background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:12px;margin-bottom:10px}
.reativacao-card strong{font-size:16px}
.reativacao-card p{margin:2px 0 0;font-size:13px}
.reativacao-card button{min-height:48px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
@media (max-width:520px){.reativacao-card{flex-direction:column;align-items:stretch}.reativacao-card button{width:100%;justify-content:center}}

/* Editor de mensagens de WhatsApp: texto de um lado, o que o cliente lê do
   outro. Ver o resultado enquanto escreve evita mandar "{clientee}". */
.whats-modelo{border:1px solid #e2e8f0;border-radius:12px;padding:14px;margin-bottom:14px;background:#fff}
.whats-modelo header{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.whats-modelo h3{margin:0;font-size:16px;flex:1}
.whats-edicao{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.whats-edicao textarea{width:100%;box-sizing:border-box;font-family:inherit;font-size:14px}
.whats-previa{background:#ecfdf5;border:1px solid #a7f3d0;border-radius:12px;padding:12px}
.whats-previa p{white-space:pre-wrap;margin:6px 0 0;font-size:14px;line-height:1.5}
@media (max-width:720px){.whats-edicao{grid-template-columns:1fr}}

/* Ofertas / campanhas no painel: cartão por campanha, fila de disparo um a
   um. Nada de envio em massa — cada clique abre uma conversa. */
.campanha-card{display:flex;gap:12px;justify-content:space-between;align-items:center;
 border:1px solid #e2e8f0;border-radius:12px;padding:12px;margin-bottom:10px;background:#fff}
.campanha-card.vigente{border-left:5px solid #16a34a}
.campanha-card p{margin:2px 0 0;font-size:13px}
.campanha-acoes{display:flex;gap:8px;flex-shrink:0}
.campanha-form label{display:block;margin-bottom:10px}
.campanha-form input{width:100%;box-sizing:border-box;min-height:42px}
.campanha-datas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.campanha-busca{display:flex;gap:8px;margin-bottom:8px}
.campanha-itens{width:100%;border-collapse:collapse;margin-top:8px}
.campanha-itens td{padding:6px 4px;border-bottom:1px solid #f1f5f9}
.campanha-resumo{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.campanha-filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.campanha-envio{display:flex;justify-content:space-between;align-items:center;gap:10px;
 border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;margin-bottom:8px;background:#fff}
.campanha-envio button{display:inline-flex;align-items:center;gap:6px;min-height:44px}
@media (max-width:560px){.campanha-card,.campanha-envio{flex-direction:column;align-items:stretch}
 .campanha-datas{grid-template-columns:1fr}}

/* Auditoria de estoque: tela do funcionário (celular, no corredor) e da
   gestão. O saldo do sistema só aparece depois da contagem — por isso o
   cartão não tem espaço para ele. */
.auditoria-contador{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;font-size:15px}
.auditoria-card{display:flex;gap:12px;justify-content:space-between;align-items:center;background:#fff;
 border:1px solid #e2e8f0;border-radius:12px;padding:12px;margin-bottom:10px}
.auditoria-card.feito{border-left:5px solid #16a34a;opacity:.85}
.auditoria-card p{margin:2px 0 0;font-size:13px}
.auditoria-card button{min-height:48px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.auditoria-feito{display:flex;align-items:center;gap:6px;color:#166534;font-weight:700}
.auditoria-dialog{width:min(520px,calc(100% - 24px))}
.auditoria-dialog input,.auditoria-dialog textarea{width:100%;box-sizing:border-box;min-height:48px;font-size:16px}
.auditoria-camera{width:100%;border-radius:12px;background:#000;margin-bottom:8px}
.auditoria-ok{color:#166534;font-weight:700}
.auditoria-abas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.auditoria-filtro{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.auditoria-pendencia{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;
 background:#fff;border:1px solid #f5c26b;border-radius:12px;padding:12px;margin-bottom:10px}
.auditoria-pendencia .negativo{color:#b91c1c}
.auditoria-pendencia .positivo{color:#15803d}
.auditoria-acoes{display:flex;gap:8px}
.auditoria-config label{display:block;margin-bottom:10px}
@media (max-width:560px){.auditoria-card,.auditoria-pendencia{flex-direction:column;align-items:stretch}
 .auditoria-card button,.auditoria-acoes button{width:100%}}

/* ---------------------------------------------------------------
   Minha área em abas, contador do dia, status de tarefa e aviso do
   MASTER irrestrito (19/09). Mesmo vocabulário de cor do restante.
   --------------------------------------------------------------- */
.area-abas{position:sticky;top:0;z-index:2;padding:8px 0;background:var(--fundo);border-bottom:1px solid var(--borda)}
.area-abas [role=tab]{min-height:40px;padding:8px 16px;border-radius:999px;font-weight:700}
.area-abas [role=tab][aria-selected=true]{box-shadow:var(--sombra)}
@media (max-width:640px){.area-abas{display:grid;grid-template-columns:1fr 1fr;gap:6px}.area-abas [role=tab]{width:100%;padding:8px 10px}}

.personal-contador{display:flex;align-items:baseline;gap:8px;margin:12px 0;padding:12px 16px;border:1px solid #cce1ff;border-radius:var(--raio-pequeno);background:var(--azul-claro);color:var(--tinta);font-size:15px}
.personal-contador strong{font-size:22px;color:var(--azul-escuro)}

.personal-task{position:relative;padding:12px 14px 12px 18px;margin:8px 0;border:1px solid var(--borda);border-radius:var(--raio-pequeno);background:#fff}
.personal-task::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--cinza)}
.personal-task p{margin:4px 0 0;color:var(--tinta-fraca)}
.personal-task button{margin-top:8px}
.tarefa-pendente::before{background:var(--ambar)}
.tarefa-em_andamento::before{background:var(--azul)}
.tarefa-concluida{background:var(--verde-claro);border-color:#c6ecd4}
.tarefa-concluida::before{background:var(--verde)}
.tarefa-concluida strong{text-decoration:line-through;text-decoration-color:#16a34a80}

.master-irrestrito{padding:12px 16px;margin:12px 0;border:1px solid #e4d9ff;border-left:4px solid var(--roxo);border-radius:var(--raio-pequeno);background:var(--roxo-claro);color:var(--tinta)}
.master-irrestrito strong{color:#6b21a8}

/* ---------------------------------------------------------------
   Dois estoques (Prateleira / Estoque Central) — Movimentação de
   estoque, Consulta de produtos, divergências (seção 41).
   --------------------------------------------------------------- */
.locais-acoes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.locais-acao{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:96px;padding:16px 18px;border:2px solid var(--borda);border-radius:var(--raio);background:#fff;text-align:left;cursor:pointer}
.locais-acao strong{font-size:18px}.locais-acao small{color:var(--tinta-fraca)}
.locais-acao.ativa{border-color:var(--azul);background:var(--azul-claro);box-shadow:var(--sombra)}
.locais-acao svg{width:22px;height:22px;color:var(--azul)}
.locais-aguardando{margin-top:6px;padding:3px 10px;border-radius:999px;background:var(--cinza-claro);color:var(--tinta-fraca);font-size:12px;font-weight:800}
.locais-aguardando.tem{background:var(--laranja-claro);color:#9a3412}
.locais-sentido{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.locais-sentido label{display:flex;align-items:center;gap:8px;padding:12px;border:2px solid var(--borda);border-radius:var(--raio-pequeno);font-weight:700;cursor:pointer}
.locais-sentido label.ativa{border-color:var(--azul);background:var(--azul-claro)}
.locais-sentido input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.locais-leitura{display:block;font-weight:700}
.locais-leitura input{display:block;width:100%;margin-top:6px;padding:14px 16px;font-size:18px;border:2px solid var(--azul);border-radius:var(--raio-pequeno);background:#fff}
.locais-lista{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.locais-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--borda);border-left:4px solid var(--azul);border-radius:var(--raio-pequeno);background:#fff}
.locais-item>div{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.locais-item small{color:var(--tinta-fraca)}
.locais-item.ok{border-left-color:var(--verde);background:var(--verde-claro)}
.locais-item.fora{border-left-color:var(--laranja);background:var(--laranja-claro)}
.locais-item .aviso,.locais-saldos .aviso,.cp-item .aviso,.locais-lotes .aviso{color:#b91c1c;font-weight:800}
.locais-item>button{flex-shrink:0;min-height:44px}
.locais-rodape{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--borda)}
.locais-rodape .grande{min-height:52px;padding:0 22px;font-size:16px}
.locais-saldos{display:inline-flex;gap:6px;align-items:baseline;color:var(--tinta-fraca);font-size:13px}
.locais-saldos b,.cp-local b{font-size:15px}
.locais-saldos .prat,.cp-local.prat b{color:#15803d}.locais-saldos .cent,.cp-local.cent b{color:var(--azul-escuro)}.locais-saldos .tran,.cp-local.tran b{color:#b45309}
.locais-status{padding:2px 8px;border-radius:999px;font-size:12px;font-weight:800;background:var(--cinza-claro)}
.locais-status.em_transito{background:var(--laranja-claro);color:#9a3412}.locais-status.conferida{background:var(--verde-claro);color:#14532d}
.locais-status.divergente{background:var(--vermelho-claro);color:#991b1b}.locais-status.cancelada{background:var(--cinza-claro);color:var(--tinta-fraca)}
.locais-hoje h3,.locais-config h2{display:flex;align-items:center;gap:8px}
.locais-chave{display:flex;align-items:center;gap:10px;padding:14px;margin:12px 0;border:2px solid var(--borda);border-radius:var(--raio-pequeno);font-size:16px}
.locais-chave input{width:22px;height:22px}
.locais-lotes{width:100%;margin-top:8px;border-collapse:collapse;font-size:13px}
.locais-lotes th,.locais-lotes td{padding:6px 8px;border-bottom:1px solid var(--borda);text-align:left}
.locais-lotes tr.vence td{background:var(--vermelho-claro)}
.locais-dialog{width:min(720px,96vw)}
.locais-dialog [data-corpo] form>label{display:block;margin:10px 0}
.cp-dialog{width:min(980px,96vw);max-height:92vh}
/* BARRA DE BUSCA: campo largo à esquerda, botão do tamanho do botão à direita.
   O `.cp-busca label{flex:1}` sempre esteve certo; quem deformava a linha era
   `dialog form > .primary{width:100%}` (style.css), que pega qualquer botão
   primário filho direto de um form dentro de dialog — inclusive este. Com
   100% da largura o botão empurrava o label para 50px e o rótulo quebrava
   palavra por palavra. `.cp-busca>button.primary` tem duas classes contra uma
   e vence a regra global sem desligá-la para o resto do sistema. */
.cp-busca{display:flex;gap:8px;align-items:flex-end;margin-bottom:12px}
.cp-busca label{flex:1;min-width:0}
.cp-busca input{width:100%}
.cp-busca>button.primary{width:auto;flex:0 0 auto;white-space:nowrap}
.cp-grupo{margin-bottom:16px}.cp-grupo h3{margin:0 0 8px;font-size:15px}.cp-grupo h3 small{margin-left:8px;font-weight:600;color:var(--tinta-fraca)}
.cp-item{display:grid;grid-template-columns:1fr auto auto auto;gap:14px;align-items:center;padding:10px 14px;margin-bottom:6px;border:1px solid var(--borda);border-left:5px solid var(--cinza);border-radius:var(--raio-pequeno);background:#fff;cursor:pointer}
.cp-item.prat{border-left-color:var(--verde)}.cp-item.cent{border-left-color:var(--azul);background:var(--azul-claro)}.cp-item.zero{border-left-color:var(--vermelho);background:#fff;opacity:.85}
.cp-desc{min-width:0;display:flex;flex-direction:column}.cp-desc small{color:var(--tinta-fraca)}
.cp-preco{text-align:right;display:flex;flex-direction:column}.cp-preco b{font-size:17px}.cp-preco s{color:var(--tinta-fraca);font-weight:400;font-size:13px}.cp-preco small{color:var(--tinta-fraca)}
.cp-locais{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.cp-locais small{flex-basis:100%;color:var(--tinta-fraca)}
.cp-local{padding:4px 10px;border-radius:999px;background:var(--cinza-claro);font-size:13px}.cp-local.prat{background:var(--verde-claro)}.cp-local.cent{background:#e0ecff}.cp-local.tran{background:var(--laranja-claro)}.cp-local.zero{background:var(--vermelho-claro)}
@media(max-width:760px){.locais-acoes,.locais-sentido{grid-template-columns:1fr}.cp-item{grid-template-columns:1fr auto}.cp-locais{grid-column:1/-1}}
.credito-troca-saldo{padding:8px 12px;margin-bottom:8px;border-radius:var(--raio-pequeno);background:var(--verde-claro);color:#14532d;font-weight:600}
.troca-frase.dinheiro{background:var(--laranja-claro);border-radius:var(--raio-pequeno);padding:8px 10px}

/* ===================================================================
   AJUSTE DE PREÇO — painel do PDV, marca no carrinho, painel de quem
   decide e a oferta de arredondamento.

   Três cores e nada mais: vermelho é prejuízo, âmbar é espera, verde é
   aprovado. Quem está no caixa com fila na frente lê a cor antes do
   texto — se tudo for cinza, ele lê tudo, e não lê nada.
   =================================================================== */

/* --- painel do + e do / ------------------------------------------- */
.ajuste-preco-dialog{width:min(520px,94vw)}
.ajuste-preco-dialog .ap-produto{margin:0 0 12px;display:flex;flex-direction:column;gap:2px}
.ajuste-preco-dialog .ap-produto small{color:var(--tinta-fraca)}
.ap-tipo{display:flex;gap:16px;margin-bottom:10px}
.ap-tipo label{display:flex;align-items:center;gap:6px;font-weight:600}
.ap-campo{display:flex;flex-direction:column;gap:4px;font-weight:600}
.ap-campo input{font-size:22px;padding:10px 12px;text-align:right;font-variant-numeric:tabular-nums}
.ap-entrada{display:flex;gap:12px;align-items:flex-end}
.ap-entrada .ap-campo{flex:1;min-width:0}
.ap-sufixo{font-size:20px;font-weight:700;padding-bottom:12px}
.ap-conta{margin:12px 0;padding:12px;border-radius:var(--raio-pequeno);background:var(--cinza-claro)}
.ap-linhas{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0}
.ap-linhas dt{color:var(--tinta-fraca)}
.ap-linhas dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.ap-alerta{color:var(--vermelho);font-weight:700}
.ap-conta .ap-alerta{margin:10px 0 0;padding:8px 10px;border-radius:var(--raio-pequeno);background:var(--vermelho-claro)}
.ap-nivel{margin:8px 0 0;padding:8px 10px;border-radius:var(--raio-pequeno);background:var(--laranja-claro);font-weight:600}
.ap-motivos{margin:8px 0 0;font-size:13px}
.ap-motivo{display:flex;flex-direction:column;gap:4px;font-weight:600;margin-bottom:10px}
.ap-acoes{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
.ap-autorizacao{margin-top:12px;padding-top:12px;border-top:1px solid var(--borda)}
.ap-esperando,.ap-aprovada,.ap-recusada{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:10px 12px;border-radius:var(--raio-pequeno)}
.ap-esperando{background:var(--laranja-claro)}
.ap-aprovada{background:var(--verde-claro);color:#14532d}
.ap-recusada{background:var(--vermelho-claro);color:#7f1d1d}

/* --- marca do ajuste no item do carrinho -------------------------- */
/* O operador comum vê QUE houve ajuste e quanto — nunca custo nem margem. */
.cart-item.tem-ajuste{border-left:4px solid var(--laranja)}
.cart-item.selecionado{outline:2px solid var(--azul);outline-offset:-2px;background:var(--azul-claro)}
.cart-item s{color:var(--tinta-fraca);font-weight:400}
.ajuste-marca{display:block;margin-top:2px;color:var(--laranja);font-weight:700;font-size:12px}

/* --- oferta de arredondamento no checkout ------------------------- */
.arred-oferta{margin:10px 0;padding:12px 14px;border:2px dashed var(--ambar);border-radius:var(--raio-pequeno);background:var(--laranja-claro)}
.arred-oferta p{margin:0 0 8px}
.arred-oferta b{font-size:17px}
.arred-oferta small{display:block;color:var(--tinta-fraca)}
.arred-acoes{display:flex;gap:10px;justify-content:flex-end}
.arred-feito{margin:0;font-weight:700;color:#14532d}

/* --- painel de quem decide (ERP) ---------------------------------- */
.aut-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.aut-card{padding:14px;border:1px solid var(--borda);border-left:5px solid var(--ambar);border-radius:var(--raio-pequeno);background:#fff}
.aut-card.perigo{border-left-color:var(--vermelho)}
.aut-card.decidida{opacity:.6}
.aut-card header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.aut-alerta{display:flex;align-items:center;gap:6px;margin:0 0 8px;padding:8px 10px;border-radius:var(--raio-pequeno);background:var(--vermelho-claro);color:#7f1d1d}
.aut-dados{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0 0 10px}
.aut-dados dt{color:var(--tinta-fraca);font-size:13px}
.aut-dados dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.aut-motivo{margin:0 0 10px;padding:8px 10px;border-radius:var(--raio-pequeno);background:var(--cinza-claro);font-style:italic}
.aut-acoes{display:flex;gap:10px;justify-content:flex-end}
.aut-ja{margin:0;color:var(--tinta-fraca)}

/* ===================================================================
   PRESTAÇÕES DE MOTOBOYS — a tela de quem conta o dinheiro.

   Os três números nunca se escondem: esperado, declarado e contado
   ficam lado a lado. Âmbar é espera, vermelho é divergência.
   =================================================================== */
.prest-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.prest-card{padding:14px;border:1px solid var(--borda);border-left:5px solid var(--ambar);border-radius:var(--raio-pequeno);background:#fff}
.prest-card.divergente{border-left-color:var(--vermelho)}
.prest-card header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.prest-dados{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0 0 10px}
.prest-dados dt{color:var(--tinta-fraca);font-size:13px}
.prest-dados dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.prest-alerta{color:var(--vermelho);font-weight:700}
.prest-obs{margin:0 0 10px;padding:8px 10px;border-radius:var(--raio-pequeno);background:var(--cinza-claro);font-style:italic}
.prest-acoes{display:flex;gap:10px;justify-content:flex-end}
.prest-dialog{width:min(520px,94vw)}
/* Esperado e declarado juntos: é a comparação que o operador faz de olho. */
.prest-numeros{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.prest-numeros>div{padding:10px;border-radius:var(--raio-pequeno);background:var(--cinza-claro);text-align:center}
.prest-numeros span{display:block;font-size:12px;color:var(--tinta-fraca)}
.prest-numeros b{font-size:19px;font-variant-numeric:tabular-nums}
.prest-contar{display:flex;flex-direction:column;gap:4px;font-weight:700}
.prest-contar input{font-size:24px;padding:12px;text-align:right;font-variant-numeric:tabular-nums}
.prest-divergencia{margin:8px 0;padding:8px 10px;border-radius:var(--raio-pequeno);font-weight:700;min-height:0}
.prest-divergencia:empty{display:none}
/* O ATRIBUTO `hidden` SOZINHO NÃO ESCONDE AQUI.
   Não existe regra global `[hidden]{display:none}` neste projeto — cada lugar
   declara a sua (menu-cortina, painel-cliente, espera-info, despesa-caixa…), e
   a regra de `label` vence o atributo. Sem esta linha, o campo de justificativa
   aparecia SEMPRE, inclusive quando o valor contado confere com o esperado —
   pedindo explicação de uma diferença que não existe. */
.prest-dialog [data-obs][hidden]{display:none}
.prest-divergencia.ok{background:var(--verde-claro);color:#14532d}
.prest-divergencia.alerta{background:var(--vermelho-claro);color:#7f1d1d}
tr.divergente td{background:var(--vermelho-claro)}
/* CAIXA VIRADO DE DIA (24/09/2026)
   Não é um aviso discreto: enquanto ele estiver lá, o caixa não vende. Aparece
   antes da primeira leitura, para ninguém descobrir com a fila montada. */
.caixa-virado{border:2px solid var(--vermelho);background:var(--vermelho-claro)}
.caixa-virado h2{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:#7f1d1d;font-size:18px}
.caixa-virado p{margin:0 0 8px}
.caixa-virado button{margin-top:4px}

/* ACERTOS POR GAVETA (24/09/2026)
   Uma rota pode trazer dinheiro de mais de um caixa. Cada gaveta ganha o seu
   bloco, com o seu titular e o seu botão: quem recebe está recebendo o
   dinheiro daquele caixa, não "o dinheiro da rota". */
.prest-caixas{margin:10px 0;padding:10px;border-radius:var(--raio-pequeno);background:var(--cinza-claro)}
.prest-caixas h4{margin:0 0 8px;font-size:13px;letter-spacing:.04em;color:var(--tinta-fraca)}
.prest-caixa{padding:10px;margin-bottom:8px;border-radius:var(--raio-pequeno);background:var(--branco);border:1px solid var(--borda)}
.prest-caixa:last-child{margin-bottom:0}
.prest-caixa.feito{opacity:.7}
.prest-caixa-quem{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-bottom:6px}
.prest-caixa-numeros{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--tinta-fraca);margin-bottom:8px}
.prest-caixa-numeros b{color:var(--tinta);font-variant-numeric:tabular-nums}
.prest-caixa button{width:100%}
.prest-nota{color:var(--tinta-fraca);font-size:13px}

/* ======================================================================
   ERP — linguagem operacional do PDV. Somente apresentação, sem alterar
   o layout da venda, seletores funcionais, impressão ou shell offline.
   Tokens locais mantêm a identidade e os tamanhos operacionais do PDV.
   ====================================================================== */
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page){
 --raio:10px;--raio-pequeno:8px;--sombra:0 1px 3px #17223809;
 align-self:flex-start;margin:0 auto;padding:18px;min-width:0;background:var(--fundo);color:var(--tinta);font-size:14px;
}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page)>.heading{align-items:center;gap:12px;margin:0 0 16px;padding:0;flex-wrap:wrap}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page)>.heading>div{flex:1;min-width:220px}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) .heading h1{font-size:23px;line-height:1.25;letter-spacing:-.5px;margin:3px 0 5px}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) .heading .eyebrow{font-size:11px;line-height:1.5;letter-spacing:.8px;font-weight:650;margin:0;color:#596b82}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) .heading p{font-size:13px;line-height:1.5;margin:3px 0;color:#61718a}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) :is(.panel,.card):where(:not(.pr-host):not(.em-host):not(.loss-reasons-main)){min-width:0;padding:14px;border-radius:10px;box-shadow:var(--sombra);border-color:#dce4ef}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) :is(h2,h3){line-height:1.4}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) h2{font-size:16px;margin-top:0;margin-bottom:12px}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) p{line-height:1.5}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) :is(button,.button){min-height:36px;padding:7px 12px;border-radius:8px;font-size:13px;line-height:1.45;gap:7px;max-width:100%}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) :is(button,.button):focus-visible{outline:3px solid #9bc0ff;outline-offset:2px}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){min-height:36px;padding:7px 10px;border-radius:7px;margin-top:4px;font-size:13px;border-color:#cbd7e6;background:#fff}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) textarea{min-height:80px;resize:vertical}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) label{line-height:1.5;color:#455870}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) .erp-actions:not(td){gap:8px;margin-top:10px;margin-bottom:12px;align-items:center}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page)>.erp-actions:empty{margin:0}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) .table-wrap{min-width:0;max-width:100%;border:1px solid #e2e8f0;border-radius:8px;scrollbar-width:thin;scrollbar-color:#bdcbdc #f5f7fb}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) :is(th,td){padding:9px 12px;border-bottom-color:#e6ecf3;line-height:1.5}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) th{background:#f2f6fb;color:#526783;font-size:12px;font-weight:650}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) tbody tr:hover{background:#f5f9ff}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) td :is(button,.button){min-height:32px;padding:5px 9px;font-size:12px}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) .cards{gap:12px;margin-bottom:16px}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) .card p{margin:8px 0 5px;color:#536781}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) .card strong{font-size:25px;margin-bottom:5px;font-variant-numeric:tabular-nums}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) .card-icon{font-size:18px;padding:7px}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) .dashboard-grid{gap:14px}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) .badge{padding:4px 9px;font-size:11px;font-weight:650}
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) .empty{padding:28px 14px;font-size:24px}
/* Painéis de gestão, operador e vendedor: menos altura, mesmas prioridades. */
#page.dashboard-home{gap:14px}
#page.dashboard-home>.panel-destaque{grid-column:1/-1;border:1px solid #ecc777;border-left:4px solid #d99516;background:#fffdf6;margin:0}
#page.dashboard-home .heading .primary{box-shadow:none;gap:8px;min-height:38px;padding:8px 13px;background:var(--azul);border-color:var(--azul)}
#page.dashboard-home .heading .primary .ico{width:20px;height:20px}
#page.dashboard-home h2{gap:10px}
#page.dashboard-home .dashboard-icon{width:36px;height:36px;flex-basis:36px;border-radius:9px}
#page.dashboard-home .dashboard-icon .ico{width:21px;height:21px}
#page.dashboard-home .dashboard-summary-title{margin-bottom:14px;gap:10px}
#page.dashboard-home .dashboard-summary-title h2{margin-bottom:3px}
#page.dashboard-home .dashboard-stat{padding:14px 12px;gap:11px;border-radius:8px}
#page.dashboard-home .dashboard-stat strong{font-size:25px;letter-spacing:-.4px}
#page.dashboard-home .dashboard-stat h3{font-size:12px;margin:0 0 6px}
#page.dashboard-home .dashboard-stat small{font-size:11px;margin-top:4px}
#page.dashboard-home :is(.dashboard-cash,.dashboard-empty){padding:14px;gap:14px;min-height:90px}
#page.dashboard-home .dashboard-empty-icon{flex-basis:48px;height:48px}
#page.dashboard-home .dashboard-empty-icon .ico{width:26px;height:26px}
#page.dashboard-home .dashboard-warning{padding:10px 12px;gap:10px;margin-bottom:12px}
#page.dashboard-home .dashboard-profile{padding-top:12px;gap:10px}
#page.dashboard-home .dashboard-assignments h2{padding-bottom:10px}
#page.dashboard-home .dashboard-source{margin-top:12px}
#page.dashboard-home>.panel:not(.dashboard-summary)>strong{font-size:25px}
/* Utilitários modernizados anteriormente passam à densidade do PDV. */
#page.labels-page>.erp-actions{gap:12px;margin:0 0 16px}
#page.labels-page .labels-action{padding:16px;min-height:215px;border-radius:10px;gap:0}
#page.labels-page .labels-action-title{font-size:16px;line-height:1.4;margin-bottom:6px}
#page.labels-page .labels-action-icon{width:44px;height:44px;border-radius:10px;margin-bottom:12px}
#page.labels-page .labels-action-icon .ico{width:25px;height:25px}
#page.labels-page .labels-action-description{font-size:13px;line-height:1.55;margin-bottom:12px}
#page.labels-page .labels-action-arrow{width:30px;height:30px}
#page.labels-page>[data-main].panel:has(>.labels-info){padding:14px 16px;border-radius:10px}
#page.labels-page .labels-info{gap:14px}
#page.labels-page .labels-info-icon{flex-basis:42px;height:42px}
#page.labels-page .labels-info h2{margin-bottom:4px}
#page.loss-reasons-page .loss-reasons-main{padding:0;background:transparent;border:0;box-shadow:none}
#page.loss-reasons-page .loss-reasons-info{padding:12px 16px;margin-bottom:14px}
#page.loss-reasons-page .loss-reasons-info h2{margin-bottom:3px}
#page.loss-reasons-page .loss-reasons-list{padding:14px;border-radius:10px;box-shadow:var(--sombra)}
#page.loss-reasons-page .loss-reasons-list-heading{margin-bottom:12px}
#page.loss-reasons-page .loss-reasons-list-heading h2{margin-bottom:0;font-size:16px}
#page.loss-reasons-page .loss-reason-icon{width:32px;height:32px;flex-basis:32px;border-radius:8px}
#page.loss-reasons-page .loss-reason-icon .ico{width:19px;height:19px}
#page.regularization-page .regularization-title{gap:9px;margin-bottom:12px}
#page.regularization-page .regularization-title .ico{width:20px;height:20px;padding:8px;border-radius:8px}
#page.regularization-page .regularization-panel>.erp-details{gap:8px 12px}
/* Administração da plataforma: as mesmas tabelas e hierarquia do ERP. */
#platform-page>.panel{margin-bottom:14px}
#platform-page .platform-actions{display:flex;gap:8px;flex-wrap:wrap}
#platform-page .technical-banner{padding:10px 14px;border:1px solid #f0d094;border-radius:8px;background:#fff8e8;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
/* Formulários administrativos: campos existentes, sem mudar sua estrutura. */
body:not(:has(.pdv-page,.pdv-open)) .erp-dialog{padding:18px;border:1px solid #cfdaea;border-radius:12px;box-shadow:0 16px 56px #14223c26}
body:not(:has(.pdv-page,.pdv-open)) .erp-dialog header{gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #e4eaf2}
body:not(:has(.pdv-page,.pdv-open)) .erp-dialog header h2{font-size:18px;line-height:1.4}
body:not(:has(.pdv-page,.pdv-open)) .erp-dialog .erp-form{gap:0 14px}
body:not(:has(.pdv-page,.pdv-open)) .erp-dialog .erp-form label{font-size:12px;margin-bottom:12px}
body:not(:has(.pdv-page,.pdv-open)) .erp-dialog .erp-form :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){padding:8px 10px;min-height:38px;margin-top:4px;border-radius:7px;background:#fff}
body:not(:has(.pdv-page,.pdv-open)) .erp-dialog form>.primary{min-height:38px;padding:8px 14px;border-radius:8px}
/* Cadastro de produto: mesmo diálogo, mesma densidade.
   Ele é `.erp-dialog` mas NÃO usa `.erp-form`, então as regras acima não o
   alcançavam e os campos caíam na base global (min-height:44px, padding:12px)
   — 45px no desktop, contra 38px de todos os outros formulários. Numa janela
   de cinco abas isso é rolagem a mais em cada uma.
   Sem `border-radius` de propósito: `.pr-com-icone` emenda o campo ao ícone
   do código de barras com cantos assimétricos, e uniformizar quebraria a
   emenda. `textarea` fica de fora: a descrição precisa da altura que tem. */
body:not(:has(.pdv-page,.pdv-open)) .pr-cadastro :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select){min-height:38px;padding:8px 10px;margin-top:4px;background:#fff}
/* O ícone emendado ao campo tinha padding de 10px, dimensionado para os
   campos de 44px. Com o campo em 38px o ícone passou a ser o mais alto e,
   por `align-items:stretch`, ESTICAVA o campo de volta para 46px — só aquele,
   ao lado de vizinhos de 38. Aqui ele acompanha a altura nova. */
body:not(:has(.pdv-page,.pdv-open)) .pr-cadastro .pr-com-icone>.ico{width:38px;padding:7px;margin-top:4px}
/* Entrada: acabamento consistente sem alterar modos, autenticação ou sessão. */
.login .login-card{padding:28px;border-radius:12px;box-shadow:0 8px 28px #1722380c;border-color:#dce4ef}
.login .login-card h1{font-size:23px;letter-spacing:-.5px}
.login .login-card form{margin:20px 0}
.login .login-card input{background:#fff;border-radius:8px}
@media(max-width:1100px){
 #page.dashboard-home .dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 :is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page){padding:14px 12px}
 :is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) .heading h1{font-size:21px}
 :is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) :is(button,.button){min-height:44px}
 :is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) td :is(button,.button){min-height:44px}
 :is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){min-height:44px;font-size:16px}
 #page.dashboard-home .heading .primary{min-height:44px}
 #page.dashboard-home .dashboard-grid{grid-template-columns:minmax(0,1fr)}
 #page.labels-page .labels-action{min-height:200px;padding:14px}
 #page.loss-reasons-page .loss-reasons-list{padding:12px}
 body:not(:has(.pdv-page,.pdv-open)) .erp-dialog{padding:14px}
 body:not(:has(.pdv-page,.pdv-open)) .erp-dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,button){min-height:44px}
}
@media(max-width:480px){
 #page.dashboard-home .dashboard-stats{grid-template-columns:minmax(0,1fr)}
 #page.labels-page .labels-action{min-height:0}
 #page.dashboard-home :is(.dashboard-cash,.dashboard-empty){padding:12px 8px}
 #page.dashboard-home .dashboard-empty-icon{flex-basis:40px;height:40px}
}

/* Cadastros e compras: hosts transparentes e controles com a densidade da venda. */
#page.produtos-page>.pr-host,#page.entrada-manual-page>.em-host{padding:0;background:transparent;border:0;box-shadow:none}
#page.clientes-page>[data-main]{padding:0;overflow:hidden}
#page.nfe-conferencia-page>[data-main]:has(.nfe-lista-topo){padding:0;background:transparent;border:0;box-shadow:none}
#page.produtos-page .pr-tela{gap:12px}
#page.produtos-page .pr-topo{gap:12px;align-items:center}
#page.produtos-page .pr-topo h1{font-size:23px;margin:0 0 4px;letter-spacing:-.5px}
#page.produtos-page .pr-topo p{font-size:13px;margin:0;color:#61718a}
#page.produtos-page :is(.pr-filtros,.pr-resumo,.pr-rapidos){gap:8px}
#page.produtos-page .pr-filtros{padding:12px;border-radius:10px}
#page.produtos-page .pr-campo-busca input{padding-left:42px;margin:0}
#page.produtos-page .pr-busca{gap:8px}
#page.produtos-page .pr-selects{gap:10px}
#page.produtos-page .pr-trilha{font-size:12px;margin-bottom:6px}
#page.produtos-page .pr-tabela th{font-size:11px;letter-spacing:.02em}
#page.produtos-page .pr-tabela td{font-size:12px}
/* Ação de linha: o botão de ícone precisa continuar QUADRADO.
   `td :is(button,.button)` acima traz min-height:32px e padding, e vence
   `.pr-icone`, que só fixa width:38px — o ícone ficava 32x38, achatado.
   Aqui a largura acompanha a altura da densidade de tabela. */
:is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) td .pr-icone{width:32px;min-width:32px;padding:0}
#page.entrada-manual-page .em-tela{gap:12px}
#page.entrada-manual-page .em-cabecalho{padding:12px 14px;gap:12px}
#page.entrada-manual-page .em-marca{width:42px;height:42px;border-radius:10px;box-shadow:none}
#page.entrada-manual-page .em-marca .ico{width:24px;height:24px}
#page.entrada-manual-page .em-titulo h2{font-size:20px;margin:0}
#page.entrada-manual-page .em-titulo p{font-size:12px}
#page.entrada-manual-page .em-faixa{padding:12px 14px 4px}
#page.entrada-manual-page .em-linha1{gap:10px}
#page.entrada-manual-page .em-linha2{gap:8px;margin-top:10px}
#page.entrada-manual-page .em-incluir{min-height:52px;box-shadow:none}
#page.entrada-manual-page .em-itens{padding:12px 14px;min-height:235px}
#page.entrada-manual-page .em-vazio{padding:26px 14px}
#page.entrada-manual-page .em-vazio .ico{width:38px;height:38px}
#page.entrada-manual-page .em-vazio p{font-size:15px}
#page.entrada-manual-page :is(.em-corpo,.em-rodape){gap:12px}
#page.entrada-manual-page :is(.em-ultimas,.em-total){padding:12px 14px}
#page.entrada-manual-page .em-total>div strong{font-size:32px}
#page.entrada-manual-page .em-total [data-finalizar]{min-height:44px}
#page:not(.pdv-page) .erp-actions>button:disabled{cursor:not-allowed}
@media(max-width:760px){
 /* Depois da regra de desktop, de propósito: media query não soma
    especificidade, então as duas empatam e vence a que vier por último.
    No celular o alvo de toque sobe para 44px e a largura acompanha. */
 :is(#page:where(:not(.pdv-page):not(.pdv-open):not(.pdv-closed)),#platform-page) td .pr-icone{width:44px;min-width:44px}
 #page.produtos-page .pr-topo h1{font-size:21px}
 #page.produtos-page .pr-topo{align-items:flex-start}
 #page.entrada-manual-page .em-itens{min-height:200px}
 #page.entrada-manual-page .em-total>div strong{font-size:28px}
}

#page:is(.dashboard-home,.labels-page,.loss-reasons-page,.regularization-page){padding:18px;background:var(--fundo)}
@media(max-width:760px){#page:is(.dashboard-home,.labels-page,.loss-reasons-page,.regularization-page){padding:14px 12px}}