/* Tokens e componentes visuais alinhados ao painel staff. */
:root {
  --staff-green: #14683f;
  --staff-deep: #153e2b;
  --staff-lime: #d8f29b;
  --staff-border: #d7e3d9;
  --staff-muted: #53645c;
  --brand: var(--staff-green);
  --muted: var(--staff-muted);
  --surface-soft: #f0f7ed;
  --radius-card: 16px;
  --radius-control: 12px;
  --shadow-card: 0 5px 18px rgb(21 62 43 / .045);
  color: #243f32;
  background: #fff;
}
body { min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; }
:where(button, a, input, select, textarea):focus-visible { outline: 3px solid #a5ce83; outline-offset: 3px; }
.site-header { max-width: none; margin: 0; padding: 1.2rem clamp(1.25rem, 4vw, 3rem); border-bottom: 1px solid #e8eee9; justify-content: center; background: #fff; }
.site-header img { width: 170px; }
.page-container { max-width: 1380px; padding: 2.5rem clamp(1.25rem, 4vw, 3rem) 5rem; }
main h1 { color: var(--staff-deep); font-size: clamp(2.1rem, 4vw, 3.6rem); font-weight: 650; letter-spacing: -.045em; line-height: 1.1; }
main h2 { color: #234b33; font-size: 1.4rem; font-weight: 600; line-height: 1.25; }
.eyebrow { color: #337344; font-weight: 750; letter-spacing: .1em; }
.page-heading p, .control-panel > p, .preview-note, .finish-note { color: var(--staff-muted); line-height: 1.75; }
.button { min-height: 46px; border-radius: var(--radius-control); padding: .8rem 1.15rem; gap: .6rem; font-size: .875rem; font-weight: 650; transition: background-color .2s, border-color .2s; }
.button .material-symbols-outlined { font-size: 20px; }
.primary { background: var(--staff-green); border-color: var(--staff-green); color: #fff; box-shadow: 0 3px 8px rgb(20 104 63 / .14); }
.primary:hover:not(:disabled) { background: #0e5833; border-color: #0e5833; }
.secondary, .delivery-cep-button { background: var(--surface-soft); border-color: #bad0b9; color: #205c35; }
.secondary:hover:not(:disabled), .delivery-cep-button:hover:not(:disabled) { background: #e4f1da; border-color: #8cb48a; }
.button.small { min-height: 38px; padding: .5rem .75rem; font-size: .8rem; }
.text-link, .inline-button { color: #286c43; font-weight: 600; }
/* Os dois acessos seguem os cartões da Central de Operações. */
#homeView { padding: clamp(3rem, 6vw, 6rem) clamp(1.25rem, 4vw, 3rem); background: #fff; }
#homeView .entry-options { max-width: 1000px; gap: 1.25rem; }
#homeView .entry-card { min-width: 0; min-height: 310px; padding: 2rem; gap: 1.25rem; border: 1px solid #205b3c; border-radius: var(--radius-card); background: linear-gradient(135deg, #153e2b, #1b6841); box-shadow: 0 8px 22px rgb(21 62 43 / .15); }
#homeView .entry-card:hover { border-color: #4f9d65; box-shadow: 0 12px 30px rgb(21 62 43 / .22); }
#homeView .entry-card h2 { color: #fff; font-size: 1.7rem; font-weight: 650; }
#homeView .entry-card p { color: #dfeddf; font-size: 1rem; line-height: 1.75; }
#homeView .entry-card .entry-icon { display: grid; place-items: center; width: 58px; height: 58px; background: var(--staff-lime); color: #244b24; border-radius: 1rem; font-size: 30px; }
#homeView .entry-card .entry-link { margin-top: auto; padding: 1.1rem 0 0; min-height: 52px; border: 0; border-top: 1px solid #558269; border-radius: 0; background: transparent; color: #edf7e8; font-size: .9rem; box-shadow: none; }
#homeView .entry-link > span { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--staff-lime); color: #244b24; font-size: 20px; }
#homeView .representative-card { border-color: #ccddce; background: #fff; box-shadow: var(--shadow-card); }
#homeView .representative-card:hover { border-color: #75a579; box-shadow: 0 12px 28px rgb(21 62 43 / .1); }
#homeView .representative-card h2 { color: var(--staff-deep); }
#homeView .representative-card p { color: #4c6354; }
#homeView .representative-card .entry-icon { background: #fff0d1; color: #9a6015; }
#homeView .representative-card .entry-link { color: #305b3b; border-color: #c6dcc7; }
#homeView .representative-card .entry-link > span { background: #dfedda; color: #286c32; }
/* Superfícies, formulários e prévia. */
.order-purchased, .control-panel, .finish-panel, .delivery-address-panel, .representative-order { border: 1px solid var(--staff-border); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-card); }
.control-panel, .finish-panel, .delivery-address-panel, .order-purchased { padding: 1.5rem; }
.preview-panel { border-color: var(--staff-border); border-radius: var(--radius-card); background: #f7faf6; box-shadow: var(--shadow-card); }
.control-panel h2, .preview-panel h2 { color: var(--staff-deep); font-size: 1.25rem; }
.order-purchased-heading > .material-symbols-outlined, .delivery-address-heading > span { color: var(--staff-green); }
.locked-specs dd, .order-purchased-heading strong { color: #294333; font-weight: 600; }
.locked-specs dt, .locked-note, .preview-label, .confirmation, .order-item-switch p { color: var(--staff-muted); }
.locked-note, .personalization-item-title, .print-alignment, .list-toolbar { border-color: var(--staff-border); }
.marketplace-badge, .count-badge { background: #e3f2d5; color: #286c32; font-weight: 600; }
.personalization-row, .logo-guidance, .delivery-address-form { background: #f7faf6; border-color: var(--staff-border); }
.personalization-item-title, .logo-guidance strong { color: #294333; font-weight: 600; }
.logo-guidance p, .delivery-address-details address, .preview-note, .pagination-info, .order-date, .representative-order-code, .identification-help, .orders-empty { color: var(--staff-muted); }
.upload-area, #editorView .logo-upload-choice { background: #f7faf6; border-color: #bad0b9; border-radius: var(--radius-control); }
.upload-area:hover, #editorView .logo-upload-choice:hover { background: var(--surface-soft); border-color: #75a579; }
#editorView .logo-upload-choice strong, #editorView .logo-upload-choice > .material-symbols-outlined, .logo-guidance > .material-symbols-outlined { color: var(--staff-green); }
.personalization-field-label, .access-dialog label, .delivery-field, .order-item-switch label { color: #3d5548; font-weight: 600; font-size: .85rem; }
.personalization-row input, .personalization-row select, .access-dialog input:not([type=checkbox]):not([type=radio]), .delivery-field input, .delivery-field select, .order-item-switch select { border: 1px solid #c1d3c3; border-radius: .65rem; background-color: #fff; color: #294333; padding: .85rem; min-height: 48px; font-size: 1rem; }
.personalization-row select, .delivery-field select, .order-item-switch select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%2353645c' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.personalization-row input:focus, .personalization-row select:focus, .access-dialog input:focus, .delivery-field input:focus, .delivery-field select:focus, .order-item-switch select:focus { border-color: #4f9558; }
input::placeholder { color: #75837b; }
input[type=radio], input[type=checkbox] { accent-color: var(--staff-green); }
.ink-color-option { border-color: var(--staff-border); color: #3d5548; border-radius: .65rem; }
.ink-color-option:has(input:checked) { border-color: var(--staff-green); background: var(--surface-soft); color: var(--staff-green); box-shadow: 0 0 0 1px var(--staff-green); }
.ink-color-option:not(.is-unavailable):hover { border-color: #75a579; }
.ink-selection, .active-orders-info { color: #337344; }
.representative-order p { color: var(--staff-muted); }
.edit-order-identification { color: #286c43; }
.edit-order-identification:hover { background: var(--surface-soft); }
.order-status { font-weight: 650; padding: .4rem .75rem; border: 1px solid transparent; }
.status-available { color: #286c32; background: #e3f2d5; border-color: #c6dcc7; }
.status-production { color: #8a5913; background: #fff0d1; border-color: #eddbb3; }
.status-shipped { color: #285c73; background: #e9f2f6; border-color: #d3e5ec; }
.status-completed { color: #205c35; background: #edf6ef; border-color: #cfe2d3; }
.status-cancelled, .status-expired { color: #9b4040; background: #fff0ee; border-color: #efd5cf; }
/* Modais do mesmo padrão do staff. */
.access-dialog { border-color: #cadbc9; border-radius: 1.1rem; color: #243f32; padding: 1.75rem; box-shadow: 0 24px 90px rgb(14 46 27 / .22); max-height: calc(100dvh - 32px); overflow-y: auto; }
.access-dialog::backdrop { background: rgb(11 34 23 / .55); backdrop-filter: blur(5px); }
.dialog-heading { padding-bottom: 1.1rem; border-bottom: 1px solid var(--staff-border); }
.dialog-heading h2 { color: var(--staff-deep); font-size: 1.55rem; font-weight: 700; }
.dialog-close { display: grid; place-items: center; color: #315c3d; background: #eaf3e6; border-color: #cfe0ca; border-radius: .65rem; width: 36px; height: 36px; flex-shrink: 0; }
.access-dialog form > p { color: var(--staff-muted); }
.mobile-preview-button { color: var(--staff-green); border-color: var(--staff-border); box-shadow: 0 6px 28px rgb(21 62 43 / .14); }
.mobile-preview-thumbnail { background: #f7faf6; }
@media (max-width: 767px) {
  #homeView .entry-card { min-height: 280px; padding: 1.5rem; }
  #homeView .entry-card h2 { font-size: 1.5rem; }
  .control-panel, .finish-panel, .delivery-address-panel, .order-purchased { padding: 1.25rem; }
  .site-header { padding: 1.2rem 1.25rem; }
  .site-header img { width: 150px; }
  .personalization-row input, .personalization-row select, .access-dialog input:not([type=checkbox]):not([type=radio]), .delivery-field input, .delivery-field select, .order-item-switch select { font-size: 16px; }
}

/* Paginação compartilhando o padrão visual do staff. */
.orders-pagination-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; }
.orders-pagination-bar > p { font-size: .9rem; color: #62746a; font-variant-numeric: tabular-nums; }
.orders-page-controls { display: flex; align-items: center; gap: 22px; }
.orders-page-controls > label { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 500; white-space: nowrap; color: #3d5548; }
.orders-page-controls select { width: auto; min-width: 80px; padding: 8px 36px 8px 12px; border: 1px solid #c1d3c3; border-radius: .65rem; background-color: #fff; color: #294333; font: inherit; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%2353645c' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.orders-pagination { display: flex; justify-content: flex-start; align-items: center; gap: 5px; margin: 0; }
.orders-page-button { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 9px; border: 1px solid #dfe7e1; background: #fff; color: #597264; border-radius: 9px; font-size: .86rem; font-weight: 600; }
.orders-page-button[aria-current=page] { background: var(--staff-green); color: #fff; border-color: var(--staff-green); }
.orders-page-button:hover:not(:disabled):not([aria-current]) { background: #eef6f0; }
.orders-page-button .material-symbols-outlined { font-size: 20px; }
.orders-page-gap { color: #8c9c91; padding: 0 4px; }
@media (max-width: 640px) {
  .orders-pagination-bar { align-items: flex-start; flex-direction: column; gap: 12px; }
  .orders-page-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; width: 100%; }
  .orders-page-controls > label { justify-self: start; }
  .orders-page-controls select { min-height: 44px; font-size: 16px; }
  .orders-pagination { flex-wrap: wrap; gap: 3px; }
  .orders-page-button { min-width: 38px; height: 42px; }
  .orders-page-gap { padding-inline: 2px; }
}

.order-items-summary { display: grid; gap: 10px; margin-top: 8px; }
.order-item-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.order-item-summary p { margin: 0; }
.item-customization-label, .customization-progress { color: #7a6a45; font-size: .75rem; font-weight: 600; }
.item-customization-label { padding: 3px 7px; border-radius: 6px; background: #fff7e8; }
.item-customization-label.is-complete { color: #277046; background: #edf7ef; }
.customization-progress.is-complete { color: #277046; }

.order-navigation { width: 100%; max-width: 1380px; margin-inline: auto; padding: 1.5rem clamp(1.25rem, 4vw, 3rem) 0; }
.order-navigation .button { text-decoration: none; }

.representative-commerce-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 22px; }
.create-order-dialog { width: min(1060px, calc(100% - 32px)); }
.create-order-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .85fr); gap: 26px; align-items: start; }
.create-order-products { display: grid; gap: 12px; min-width: 0; }
.new-order-items { display: grid; gap: 16px; }
.new-order-item { border: 1px solid var(--staff-border); border-radius: 14px; padding: 18px; background: #fff; }
.new-order-item-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.new-order-item-heading strong { color: var(--staff-deep); }
.new-order-item-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.new-order-item-fields label { display: grid; gap: 7px; min-width: 0; }
.new-order-item-fields select { width: 100%; min-width: 0; min-height: 48px; border: 1px solid #c1d3c3; border-radius: .65rem; color: #294333; background-color: #fff; font: inherit; padding: 10px 40px 10px 12px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%2353645c' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; }
.new-order-subtotal { color: var(--staff-green); font-size: .88rem; font-weight: 600; margin-top: 16px; line-height: 1.6; }
.sale-simulator { position: sticky; top: 0; min-width: 0; padding: 24px; border-radius: 16px; background: #f0f7ed; border: 1px solid #c6dcc7; display: grid; gap: 14px; }
.sale-simulator .eyebrow { margin: 0; font-size: .65rem; }
.sale-simulator h3 { margin: 0; font-size: 1.5rem; color: var(--staff-deep); letter-spacing: -.035em; }
.sale-cost { display: grid; gap: 6px; padding-block: 12px; border-bottom: 1px solid #c6dcc7; }
.sale-cost span, .sale-gain span { color: #4c6354; font-size: .85rem; }
.sale-cost strong { font-size: 1.35rem; color: var(--staff-deep); }
.sale-simulator label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.sale-simulator output { color: var(--staff-green); font-weight: 700; }
#saleMarkup { padding: 0; width: 100%; min-height: 28px; accent-color: var(--staff-green); cursor: pointer; }
.sale-gain { display: grid; gap: 8px; margin-top: 8px; padding-top: 20px; border-top: 1px solid #c6dcc7; }
.sale-gain strong { color: var(--staff-green); font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.2; letter-spacing: -.04em; }
.sale-gain small { font-size: .75rem; line-height: 1.6; color: var(--staff-muted); }
.sale-below-cost { color: #9b4040; font-size: .85rem; }
.representative-prices-dialog { width: min(760px, calc(100% - 32px)); }
.representative-prices-dialog > p { margin-block: 20px; color: var(--staff-muted); }
.representative-price-list { display: grid; gap: 14px; }
.representative-price-card { border: 1px solid var(--staff-border); border-radius: 14px; padding: 20px; }
.representative-price-card h3 { font-size: 1rem; color: var(--staff-deep); margin: 0 0 14px; }
.representative-price-tiers { display: grid; }
.representative-price-tiers > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid #e8eee9; font-size: .88rem; color: var(--staff-muted); }
.representative-price-tiers strong { color: var(--staff-green); white-space: nowrap; }
.cancel-order-button { border: 0; background: transparent; color: #9b4040; padding: 8px 0; font-size: .82rem; text-decoration: underline; text-underline-offset: 3px; }
.button.danger { background: #aa3f3f; border-color: #aa3f3f; color: #fff; }
.button.danger:hover:not(:disabled) { background: #913030; }
.order-sale-summary { color: var(--staff-green); font-weight: 600; }
.price-unavailable { color: #93600b; font-size: .8rem; margin-bottom: 12px; }
@media (max-width: 767px) {
  .create-order-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sale-simulator { position: static; padding: 20px; }
  .new-order-item { padding: 15px; }
  .new-order-item-fields select { font-size: 16px; }
  .representative-commerce-actions .button { flex: 1 1 auto; }
}
@media (max-width: 400px) { .new-order-item-fields { grid-template-columns: minmax(0, 1fr); } }

.order-action-note { color: var(--staff-muted); font-size: .75rem; line-height: 1.6; max-width: 210px; text-align: right; }
@media (max-width: 767px) { .order-action-note { text-align: left; } }

/* Lista de pedidos: informações, valores e ações com hierarquia própria. */
.orders-list { gap: 20px; }
.representative-order { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-color: #dce5df; border-radius: 16px; box-shadow: 0 3px 12px rgb(21 62 43 / .025); }
.order-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px 18px; }
.order-card-heading { min-width: 0; }
.representative-order-identity { gap: 8px; }
.representative-order-identity > strong { font-size: 1.15rem; color: var(--staff-deep); letter-spacing: -.025em; }
.order-card-header .order-date { display: block; font-size: .78rem; color: #7a877f; margin-top: 2px; }
.order-card-header .order-status { border-radius: 7px; font-size: .73rem; white-space: nowrap; padding: 7px 10px; }
.edit-order-identification { width: 30px; height: 30px; color: #83948a; }
.edit-order-identification .material-symbols-outlined { font-size: 17px; }
.order-card-products { padding: 0 24px; }
.order-card-product { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid #edf1ee; }
.order-card-product > img { display: block; width: 56px; height: 64px; border-radius: 8px; object-fit: contain; background: #f7f9f7; }
.order-card-product-info { min-width: 0; }
.order-card-product-info > strong { font-size: .94rem; color: #294333; font-weight: 600; }
.order-card-product-info > p { margin-top: 5px; font-size: .84rem; line-height: 1.6; color: #6b7a70; }
.item-customization-label { padding: 0; background: transparent; color: #8a918c; font-size: .73rem; font-weight: 500; white-space: nowrap; }
.item-customization-label::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #bec8c0; vertical-align: middle; }
.item-customization-label.is-complete { background: transparent; color: #34734c; }
.item-customization-label.is-complete::before { background: #5b9b70; }
.representative-order > .customization-progress { padding: 0 24px 14px; margin: 0; font-size: .78rem; color: #6b7a70; }
.order-card-totals { display: flex; flex-wrap: wrap; gap: 20px 40px; padding: 18px 24px; margin-top: 4px; background: #fafcf9; border-top: 1px solid #edf1ee; }
.order-card-metric { display: grid; gap: 6px; }
.order-card-metric > span { color: #78867d; font-size: .74rem; }
.order-card-metric > strong { color: #405648; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.order-card-metric.is-gain > strong { color: var(--staff-green); }
.order-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-top: 1px solid #e8eee9; }
.order-secondary-actions { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.order-utility-button { min-height: 36px; padding: 4px 0; border: 0; background: transparent; color: #65796b; font-size: .8rem; font-weight: 500; text-decoration: none; }
.order-utility-button:hover { color: var(--staff-green); }
.order-utility-button.cancel-order-button { color: #a06c65; }
.order-utility-button.cancel-order-button:hover { color: #9b4040; }
.order-main-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; max-width: 440px; }
.order-main-actions .button { min-height: 42px; padding: 10px 18px; font-size: .82rem; border-radius: 9px; }
.order-main-actions .secondary { background: #fff; border-color: #cedcd1; }
.order-action-note { flex-basis: 100%; max-width: none; margin: 0; color: #7a877f; font-size: .72rem; }
@media (max-width: 767px) {
  .order-card-header { padding: 18px; gap: 12px; flex-wrap: wrap; }
  .order-card-products { padding: 0 18px; }
  .order-card-product { grid-template-columns: 48px minmax(0, 1fr); gap: 6px 12px; padding-block: 14px; }
  .order-card-product > img { grid-row: 1 / 3; width: 48px; height: 60px; }
  .order-card-product > .item-customization-label { grid-column: 2; }
  .order-card-totals { padding: 16px 18px; gap: 18px 24px; }
  .order-card-metric > strong { font-size: .94rem; }
  .order-card-footer { padding: 16px 18px; flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  .order-main-actions { max-width: none; justify-content: stretch; }
  .order-main-actions .button { flex: 1; min-height: 46px; }
  .order-action-note { text-align: left; }
  .order-secondary-actions { justify-content: space-between; }
  .representative-order > .customization-progress { padding-inline: 18px; }
}

/* Prévia paramétrica: a foto do estoque não interfere na arte. */
.bag-scene { --preview-background: #f2f5ef; display: grid; place-items: center; min-height: 450px; width: 100%; max-width: none; margin: 16px 0 10px; padding: 70px 20px 30px; border-radius: 14px; background: radial-gradient(ellipse at 50% 45%, #fbfcf9, var(--preview-background)); overflow: hidden; }
.bag-mockup { --bag-color: #fafbf9; position: relative; flex-shrink: 0; width: 230px; height: 345px; border: 1px solid rgb(40 59 43 / .17); border-radius: 3px 3px 7px 7px; background-color: var(--bag-color); box-shadow: 10px 18px 24px -16px rgb(25 47 31 / .3), inset 3px 0 8px rgb(255 255 255 / .18), inset -3px 0 8px rgb(0 0 0 / .035); }
.bag-mockup-handle { position: absolute; top: 8%; left: 32%; width: 36%; height: 6%; border-radius: 999px; background: #f6f8f2; border: 1px solid rgb(52 71 54 / .12); box-shadow: inset 0 2px 4px rgb(20 45 27 / .08); }
.bag-mockup[data-preview=fita] .bag-mockup-handle { top: -19%; left: 29%; width: 42%; height: 28%; border: 8px solid var(--bag-color); border-bottom: 0; border-radius: 70px 70px 0 0; background: transparent; box-shadow: 0 -1px 1px rgb(30 47 33 / .2), inset 1px 0 1px rgb(30 47 33 / .2); z-index: 0; }
.bag-mockup-sheen { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, rgb(255 255 255 / .17), transparent 30%, rgb(0 0 0 / .025) 67%, rgb(255 255 255 / .12)); pointer-events: none; }
.bag-mockup-seam { position: absolute; inset: auto 4px 8px; height: 7px; border-top: 1px solid rgb(45 62 48 / .08); border-bottom: 1px solid rgb(255 255 255 / .24); pointer-events: none; }
.bag-mockup > .bag-print { top: 25%; left: 15%; width: 70%; height: 59%; gap: 12px; z-index: 1; }
.bag-mockup .logo-preview { max-width: 100%; max-height: 55%; width: auto; height: auto; }
.bag-mockup .logo-placeholder .material-symbols-outlined { font-size: 42px; }
.bag-mockup .logo-placeholder strong { font-size: .9rem; }
.bag-mockup .print-contact-lines { font-size: clamp(9px, 1vw, 12px); gap: 5px; }
.bag-mockup .contact-preview-icon { width: 13px; height: 13px; }
.bag-preview-dimensions { text-align: center; color: var(--staff-muted); font-size: .84rem; font-weight: 600; margin-bottom: 12px; }
.mobile-preview-thumbnail { position: relative; }
@media(max-width:767px) { .bag-scene { min-height: 410px; padding-top: 65px; } .bag-mockup .print-contact-lines { font-size: 10px; } }

.representative-prices-dialog > .price-table-notice { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border: 1px solid var(--staff-border); border-radius: 10px; background: #f7faf6; color: var(--staff-muted); font-size: .85rem; line-height: 1.65; }
.price-table-notice > .material-symbols-outlined { flex-shrink: 0; color: var(--staff-green); font-size: 20px; margin-top: 2px; }

.representative-price-heading { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.representative-price-heading > img { display: block; width: 80px; height: 96px; flex-shrink: 0; object-fit: contain; border-radius: 10px; background: #f7faf6; }
.representative-price-description { min-width: 0; }
.representative-price-description h3 { margin-bottom: 6px; }
.representative-price-description p { color: var(--staff-muted); font-size: .85rem; line-height: 1.6; }
@media(max-width:480px) { .representative-price-heading { gap: 12px; } .representative-price-heading > img { width: 64px; height: 80px; } }

.price-image-zoom { position: relative; display: block; width: 80px; height: 96px; flex-shrink: 0; padding: 0; border: 1px solid var(--staff-border); border-radius: 10px; background: #f7faf6; cursor: zoom-in; overflow: hidden; }
.price-image-zoom img { display: block; width: 100%; height: 100%; object-fit: contain; }
.price-image-zoom > span { position: absolute; bottom: 4px; right: 4px; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; background: #fff; color: var(--staff-green); box-shadow: 0 2px 7px rgb(21 62 43 / .12); font-size: 20px; }
.price-image-zoom:hover { border-color: #75a579; }
.product-photo-dialog { width: min(900px, calc(100% - 32px)); }
#productPhotoLarge { display: block; width: 100%; height: min(65dvh, 700px); object-fit: contain; margin-top: 20px; border-radius: 12px; background: #f7faf6; }
#productPhotoCaption { margin: 14px 0 0; color: var(--staff-muted); text-align: center; font-size: .9rem; }
@media(max-width:480px) { .price-image-zoom { width: 64px; height: 80px; } }

/* Seleção visual das embalagens já compradas. */
.order-purchased { padding: 24px; }
.purchased-items-heading { margin: 24px 0 18px; }
.purchased-items-heading h2 { color: var(--staff-deep); font-size: 1.25rem; }
.purchased-items-heading p { color: var(--staff-muted); font-size: .9rem; line-height: 1.7; margin-top: 6px; }
.purchased-items-heading p:empty { display: none; }
.purchased-items-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; scroll-margin-top: 24px; }
.purchased-item-card { position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; max-width: 420px; padding: 16px; text-align: left; background: #fff; border: 1px solid #dce5df; border-radius: 14px; transition: border-color .18s, box-shadow .18s; }
.purchased-item-card:hover:not(:disabled) { border-color: #79a88a; box-shadow: 0 5px 18px rgb(21 62 43 / .07); }
.purchased-item-card.is-active { border-color: var(--staff-green); box-shadow: inset 0 0 0 1px var(--staff-green); background: #fbfdf9; }
.purchased-item-status { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 6px; color: #8a681d; background: #fff6e4; font-size: .73rem; font-weight: 600; }
.is-active .purchased-item-status { color: #205c35; background: #e3f2d5; }
.is-complete .purchased-item-status { color: #34734c; background: #edf7ef; }
.purchased-item-picture { display: grid; place-items: center; height: 190px; padding: 14px; margin: 14px 0; background: #f7f9f6; border-radius: 10px; }
.purchased-item-picture img { display: block; width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.purchased-item-content { display: grid; gap: 7px; padding-right: 34px; }
.purchased-item-content strong { color: var(--staff-deep); font-size: 1rem; font-weight: 650; }
.purchased-item-content > span { font-size: .85rem; color: var(--staff-muted); }
.purchased-item-content .purchased-item-quantity { font-weight: 600; color: #3d5548; }
.purchased-item-action { position: absolute; right: 16px; bottom: 20px; font-size: 22px; color: var(--staff-green); }
.purchased-item-card:disabled { opacity: 1; cursor: default; }
.purchased-item-card.is-complete .purchased-item-picture { opacity: .7; }
.purchased-items-grid.has-single-item { grid-template-columns: minmax(0, 1fr); }
.has-single-item .purchased-item-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px 20px; max-width: none; padding: 18px; }
.has-single-item .purchased-item-picture { grid-column: 1; grid-row: 1 / 3; height: 110px; margin: 0; padding: 6px; }
.has-single-item .purchased-item-status { grid-column: 2; justify-self: start; align-self: end; }
.has-single-item .purchased-item-content { grid-column: 2; align-self: start; }
.order-purchased > .locked-note { margin-top: 20px; }
#orderEditorLayout { scroll-margin-top: 20px; }
@media(max-width:600px) { .order-purchased { padding: 18px; } .purchased-items-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .purchased-item-card { padding: 12px; } .purchased-item-picture { height: 130px; padding: 6px; } .purchased-item-status { font-size: .65rem; line-height: 1.4; padding: 5px 7px; } .purchased-item-content { padding-right: 0; } .purchased-item-content strong { font-size: .9rem; } .purchased-item-content > span { font-size: .76rem; } .purchased-item-action { position: static; align-self: flex-end; margin-top: 12px; } .has-single-item .purchased-item-card { grid-template-columns: 76px minmax(0, 1fr); gap: 10px 14px; } .has-single-item .purchased-item-picture { height: 96px; } .has-single-item .purchased-item-action { display: none; } }
@media(max-width:370px) { .purchased-items-grid { grid-template-columns: minmax(0, 1fr); } }

/* Cartões compactos com a mesma ilustração da área de edição. */
.purchased-items-grid, .purchased-items-grid.has-single-item { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.purchased-item-card, .has-single-item .purchased-item-card { display: flex; flex-direction: column; align-items: stretch; width: 230px; max-width: 100%; flex: 0 0 230px; gap: 0; padding: 14px; }
.purchased-item-picture, .has-single-item .purchased-item-picture { position: relative; display: block; width: 100%; height: 235px; margin: 12px 0 16px; padding: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #fbfcf9, #f0f4ed); }
.purchased-item-picture > .bag-mockup { position: absolute; left: 50%; top: 53%; transform: translate(-50%, -50%) scale(var(--item-preview-scale, .5)); transform-origin: center; pointer-events: none; }
.purchased-item-content, .has-single-item .purchased-item-content { display: grid; align-self: stretch; padding-right: 24px; }
.purchased-item-status, .has-single-item .purchased-item-status { align-self: flex-start; }
.purchased-item-action, .has-single-item .purchased-item-action { display: block; position: absolute; bottom: 18px; right: 14px; margin: 0; }
.purchased-item-card.is-complete .purchased-item-picture { opacity: 1; }
.bag-mockup .print-contact-lines[data-alignment=left] { align-items: flex-start; text-align: left; }
.bag-mockup .print-contact-lines[data-alignment=center] { align-items: center; text-align: center; }
.bag-mockup .print-contact-lines[data-alignment=right] { align-items: flex-end; text-align: right; }
@media(max-width:600px) {
 .purchased-item-card, .has-single-item .purchased-item-card { flex: 0 1 calc(50% - 7px); width: calc(50% - 7px); padding: 11px; }
 .purchased-item-picture, .has-single-item .purchased-item-picture { height: 195px; }
 .purchased-item-content, .has-single-item .purchased-item-content { padding-right: 0; }
 .purchased-item-action, .has-single-item .purchased-item-action { position: static; align-self: flex-end; margin-top: 10px; }
}
@media(max-width:370px) { .purchased-item-card, .has-single-item .purchased-item-card { flex-basis: 220px; width: 220px; } }

.print-layout-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--staff-border); }
.print-layout-controls label { display: grid; gap: 8px; color: #3d5548; font-size: .83rem; font-weight: 600; line-height: 1.5; min-width: 0; }
.print-layout-controls input, .print-layout-controls select { width: 100%; min-width: 0; min-height: 46px; padding: 11px 12px; border: 1px solid #c1d3c3; border-radius: .65rem; background-color: #fff; color: #294333; font: inherit; font-size: 1rem; }
.print-layout-controls select { padding-right: 38px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%2353645c' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; }
.bag-mockup > .bag-print { gap: var(--info-logo-gap, 5px); }
.bag-mockup .print-contact-lines { gap: var(--info-line-gap, 2px); font-family: var(--info-font-family, Arial, sans-serif); font-weight: var(--info-font-weight, 500); flex-shrink: 0; }
@media(max-width:400px) { .print-layout-controls { grid-template-columns: minmax(0,1fr); } }

.bag-mockup.has-production-preview > .bag-print{visibility:hidden}.printable-boundary{position:absolute;z-index:2;border:1px dashed #57806588;pointer-events:none}.printable-boundary>svg{display:block;width:100%;height:100%;overflow:visible}.printable-boundary.is-invalid{border-color:#c87643;background:#f9d6ac33}.empty-production-art{position:absolute;inset:0;display:grid;place-items:center;font:600 18px Arial,sans-serif;color:#49634e}.production-area-label{font-size:.78rem;color:#507058;text-align:center;line-height:1.6;margin:8px 0}.production-layout-status:not(:empty){padding:12px 14px;border:1px solid #edcfab;border-radius:9px;background:#fff7eb;color:#936225;font-size:.85rem;line-height:1.6;margin-bottom:12px}.purchased-item-picture .printable-boundary{border:0}.purchased-item-picture .printable-boundary.is-invalid{border:1px dashed #c87643}

.print-range-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px}.print-range-heading output{flex-shrink:0;padding:4px 8px;border-radius:6px;background:#edf6e9;color:var(--staff-green);font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums}.print-layout-controls input[type=range]{appearance:none;-webkit-appearance:none;width:100%;min-height:32px;height:32px;margin:2px 0;padding:0;border:0;border-radius:0;background:linear-gradient(to right,#14683f 0%,#14683f var(--range-progress,0%),#dce6dd var(--range-progress,0%),#dce6dd 100%) center/100% 6px no-repeat;cursor:pointer;accent-color:var(--staff-green)}.print-layout-controls input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:21px;height:21px;border:3px solid #fff;border-radius:50%;background:var(--staff-green);box-shadow:0 1px 5px #153e2b40}.print-layout-controls input[type=range]::-moz-range-thumb{width:16px;height:16px;border:3px solid #fff;border-radius:50%;background:var(--staff-green);box-shadow:0 1px 5px #153e2b40}.print-layout-controls input[type=range]::-moz-range-track{height:6px;background:transparent}

.design-position-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.design-position-panel>.print-layout-controls{border:0;padding-top:0;margin-top:0}.position-range-labels{display:flex;justify-content:space-between;color:#819086;font-size:.72rem;font-weight:400}.bag-mockup.has-production-preview .printable-boundary{pointer-events:auto;touch-action:none;cursor:grab}.bag-mockup.has-production-preview .printable-boundary>svg{pointer-events:none}.bag-mockup.is-design-dragging .printable-boundary{cursor:grabbing;border-color:#14683f}.bag-mockup.is-design-dragging{user-select:none}.purchased-item-picture .printable-boundary{pointer-events:none}

#logoClarificationPanel:not([hidden]){display:grid;gap:12px;margin:16px 0;padding:16px;border:1px solid #dce5df;border-radius:12px;background:#f7faf8}
#logoClarificationPanel label{font-weight:600}
#logoClarificationPanel input{width:100%;min-height:44px;padding:10px 12px;border:1px solid #ccd6d0;border-radius:8px;font:inherit;background:#fff}
#logoClarificationPanel button{justify-self:start}

.portal-access{width:100%;max-width:640px;margin:clamp(2rem,6vw,5rem) auto;padding:0 20px}
.portal-access-panel{padding:clamp(24px,4vw,40px);border:1px solid #d7e3d9;border-radius:22px;background:#fff;box-shadow:0 12px 40px rgb(21 62 43 / .05)}
.portal-access-panel form{display:grid;gap:16px}.portal-access-panel h1{margin:0;color:#153e2b;font-size:clamp(1.8rem,4vw,2.5rem);letter-spacing:-.04em}.portal-access-panel p{margin:0;color:#53645c;line-height:1.6}.portal-access-panel label{font-weight:600}.portal-access-panel input{width:100%;padding:15px;border:1px solid #d7e3d9;border-radius:10px;font:inherit;font-size:1.1rem;background:#fff}.portal-access-panel input:focus{outline:2px solid #14683f;outline-offset:2px}.portal-access-panel .button{width:100%;justify-content:center}.portal-access-panel [role=status]{color:#14683f}