/* Camada final de ergonomia: mesma leitura em celular, tablet e computador. */
:root{--tap-size:46px;--page-gap:clamp(12px,2vw,24px);--panel-pad:clamp(14px,2vw,24px)}
*{min-width:0}
button,input,select,textarea{font:inherit}
button{min-height:var(--tap-size)}
input,select{min-height:var(--tap-size)}
textarea{min-height:96px}
.shell{width:min(100%,1880px);margin-inline:auto;padding-inline:clamp(12px,2vw,30px)}
.panel,.queue-panel,.cash-section{border-radius:14px}
.panel,.queue-panel{padding:var(--panel-pad)}
.panel-title{align-items:flex-start;gap:14px}
.panel-title>div{min-width:0}
.panel-title h2,.panel-title h3{overflow-wrap:anywhere}
.button-row{flex-wrap:wrap}
.button-row button{min-height:var(--tap-size)}
.expense-form,.product-form,.employee-form-grid{align-items:end;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:12px}
.expense-form>label,.product-form>label,.employee-form-grid>label{min-width:0}
.finance-row{gap:14px}
.finance-row>span:first-child{min-width:0;overflow-wrap:anywhere}

/* Baixas do caixa: catálogo e conferência têm áreas separadas, sem vazio lateral. */
#mainWriteoffPage{width:min(100%,1420px);margin:0 auto}
#mainWriteoffPage>.panel{display:grid;gap:var(--page-gap);padding:var(--panel-pad)}
#mainWriteoffPage .panel-title{padding-bottom:14px;border-bottom:1px solid var(--edge)}
#mainWriteoffPage .panel-title h2{font-size:clamp(1.35rem,2vw,1.8rem);margin:4px 0 0}
#mainWriteoffPage .writeoff-page-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;margin:0}
#mainWriteoffPage .writeoff-page-search label{margin:0}
#mainWriteoffPage .writeoff-page-search .hint{padding:12px 14px;border:1px solid var(--edge);border-radius:10px;background:#1b120f;white-space:nowrap}
#mainWriteoffPage .writeoff-product-browser{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:10px;margin:0}
#mainWriteoffPage .writeoff-product-browser button{display:grid;gap:7px;min-height:94px;padding:13px;text-align:left;border-color:#795039;background:#2c1a12;color:#fff7ef;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
#mainWriteoffPage .writeoff-product-browser button:hover,#mainWriteoffPage .writeoff-product-browser button:focus-visible{border-color:var(--accent);background:#432519;box-shadow:0 0 0 2px rgba(244,179,67,.18)}
#mainWriteoffPage .writeoff-product-browser button strong{color:#fffaf5;font-size:1rem;font-weight:800;letter-spacing:.01em}
#mainWriteoffPage .writeoff-product-browser small{color:#f2d5bc;line-height:1.35}
#mainWriteoffPage .writeoff-product-browser small b{color:#ffd27a;font-weight:800}
#mainWriteoffPage .writeoff-product-browser .writeoff-origin{color:#ebc9aa;font-size:.8rem}
#mainWriteoffPage .writeoff-product-browser .writeoff-stock{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;padding:8px 9px;border:1px solid #805431;border-radius:8px;background:#170d09}
#mainWriteoffPage .writeoff-product-browser .writeoff-stock small{color:#d9bda6;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
#mainWriteoffPage .writeoff-product-browser .writeoff-stock b{color:#ffd277;font-size:1.15rem;line-height:1;font-variant-numeric:tabular-nums}
#mainWriteoffPage .cash-section{margin:0;padding:clamp(14px,2vw,20px);background:#211711}
#mainWriteoffDraft{display:grid;gap:7px;margin-top:10px}
#mainWriteoffDraft .finance-row{padding:11px 0}
#mainWriteoffDraft .button-row{justify-content:flex-end}
#mainWriteoffDraft .button-row button{min-width:46px}
#mainWriteoffForm.writeoff-confirmation{display:grid;grid-template-columns:1fr;gap:16px;border-color:#76502f;background:linear-gradient(145deg,#241811,#1c120e)}
#mainWriteoffForm .writeoff-confirmation-head{display:flex;align-items:center;gap:14px;padding-bottom:15px;border-bottom:1px solid var(--edge)}
#mainWriteoffForm .writeoff-confirmation-head>div:first-child{min-width:0;flex:1}
#mainWriteoffForm .writeoff-confirmation-head .eyebrow{margin:0 0 5px}
#mainWriteoffForm .writeoff-confirmation-head h3{margin:0 0 4px;font-size:1.25rem}
#mainWriteoffForm .writeoff-confirmation-head .muted{font-size:.9rem}
#mainWriteoffForm .writeoff-selected-stock{display:grid;gap:2px;min-width:118px;padding:9px 11px;border:1px solid #805431;border-radius:10px;background:#170d09}
#mainWriteoffForm .writeoff-selected-stock small{color:#d9bda6;font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
#mainWriteoffForm .writeoff-selected-stock b{color:#ffd277;font-size:1.35rem;line-height:1.05;font-variant-numeric:tabular-nums}
#mainWriteoffForm #mainWriteoffClear{min-width:0;white-space:nowrap}
#mainWriteoffForm .writeoff-confirmation-fields{display:grid;grid-template-columns:150px minmax(190px,.85fr) minmax(260px,1.5fr) minmax(220px,1fr);gap:12px;align-items:end}
#mainWriteoffForm .writeoff-confirmation-fields label{margin:0}
#mainWriteoffForm .writeoff-confirmation-fields input,#mainWriteoffForm .writeoff-confirmation-fields select{min-height:48px}
#mainWriteoffForm .writeoff-confirm-submit{width:100%;min-width:0;min-height:48px}

/* A navegação principal permanece legível em telas intermediárias. */
#mainNav{display:flex;flex-wrap:wrap;gap:8px}
#mainNav button{min-height:44px;white-space:nowrap}
@media (min-width:761px) and (max-width:1120px){
  .shell{padding-inline:16px}.main-nav{margin-bottom:14px}
  .dashboard-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dashboard-columns,.counter-sale-layout,.inventory-workflow{grid-template-columns:1fr}
  .counter-checkout{position:static}
  #mainWriteoffPage .writeoff-product-browser{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  :root{--tap-size:50px;--panel-pad:14px}
  body{font-size:16px;line-height:1.42}
  .shell{padding:12px;max-width:680px}
  header{gap:10px}.user{gap:10px}
  header h1{font-size:clamp(1.45rem,7vw,1.8rem)}
  #mainNav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #mainNav button{min-height:52px;padding:9px 8px;white-space:normal;line-height:1.15}
  #mainNav #ownerButton{grid-column:1/-1}
  .queue-panel .panel-title,.panel-title{flex-direction:column}
  .queue-panel .panel-title>button{width:100%}
  .dashboard-heading,.counter-sale-hero,.inventory-hero,.production-heading{flex-direction:column;align-items:stretch}
  .dashboard-heading button,.counter-sale-hero>#counterClear,.inventory-hero button,.production-heading button{width:100%}
  .cash-cards,.method-grid,.dashboard-grid{grid-template-columns:1fr}
  .finance-row{align-items:flex-start;flex-direction:column;padding:12px 0}
  .finance-row>span:last-child,.finance-row>strong:last-child{width:100%}
  .finance-row .button-row{width:100%}.finance-row .button-row button{flex:1}
  .expense-form,.product-form,.employee-form-grid,#mainWriteoffForm{grid-template-columns:1fr}
  #mainWriteoffForm .writeoff-confirmation-head{align-items:flex-start;flex-wrap:wrap}
  #mainWriteoffForm .writeoff-confirmation-fields{grid-template-columns:1fr 1fr}
  #mainWriteoffForm .writeoff-description-field,#mainWriteoffForm .writeoff-confirm-submit{grid-column:1/-1}
  #mainWriteoffPage>.panel{padding:14px;gap:14px}
  #mainWriteoffPage .writeoff-page-search{grid-template-columns:1fr;gap:8px}
  #mainWriteoffPage .writeoff-page-search .hint{white-space:normal;padding:9px 11px}
  #mainWriteoffPage .writeoff-product-browser{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #mainWriteoffPage .writeoff-product-browser button{min-height:104px;padding:11px;font-size:.92rem}
  #mainWriteoffDraft .finance-row{gap:8px}.home-shortcut{top:4px}
  dialog{width:calc(100vw - 20px)}
}
@media (max-width:390px){
  .shell{padding:9px}
  #mainWriteoffPage .writeoff-product-browser{grid-template-columns:1fr}
  #mainNav{gap:6px}#mainNav button{font-size:.88rem}
}
@media (max-width:560px){
  #mainWriteoffForm .writeoff-confirmation-fields{grid-template-columns:1fr}
  #mainWriteoffForm .writeoff-description-field,#mainWriteoffForm .writeoff-confirm-submit{grid-column:auto}
  #mainWriteoffForm .writeoff-confirmation-head{gap:10px}
  #mainWriteoffForm .writeoff-selected-stock{min-width:104px}
  #mainWriteoffForm #mainWriteoffClear{width:100%}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}