:root {
  --navy: #0c1d35;
  --navy-2: #17314f;
  --red: #d9272e;
  --red-dark: #b91f26;
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --text: #182336;
  --muted: #66758a;
  --line: #d9e2ec;
  --line-strong: #c6d2df;
  --warning: #fff8df;
  --warning-line: #efd16b;
  --success: #edf9f1;
  --success-line: #acd9ba;
  --danger: #fff1f2;
  --shadow-sm: 0 6px 22px rgba(12, 29, 53, .06);
  --shadow-md: 0 18px 55px rgba(12, 29, 53, .14);
  --radius: 14px;
}

* {
  box-sizing: border-box
}

html {
  color-scheme: light
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Inter, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

body.dialog-open {
  overflow: hidden
}

a {
  color: inherit
}

button,
input,
select,
textarea {
  font: inherit
}

button {
  color: inherit
}

.topbar {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 max(24px, calc((100vw - 1320px)/2));
  color: #fff;
  background: var(--navy);
  box-shadow: 0 3px 14px rgba(7, 17, 31, .16);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .065em
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--red);
  font-size: 18px;
  font-weight: 700
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 4px
}

.topbar nav a {
  padding: 10px 13px;
  border-radius: 9px;
  color: #d7e1ee;
  text-decoration: none;
  font-weight: 400;
  transition: .15s ease
}

.topbar nav a:hover {
  background: rgba(255, 255, 255, .09);
  color: #fff
}

.container {
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: 34px 24px 72px
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere
}

h1,
h2,
h3 {
  color: var(--text)
}

h1 {
  margin: 6px 0 10px;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em
}

h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.015em
}

h3 {
  font-weight: 600
}

.hero,
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 26px
}

.page-head-compact {
  margin-bottom: 20px
}

.hero {
  padding: 40px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color: #fff;
  box-shadow: var(--shadow-md)
}

.hero h1 {
  color: #fff
}

.hero p {
  color: #d3deec
}

.hero p,
.page-head p {
  max-width: 760px;
  margin: 0;
  font-size: 16px;
  font-weight: 400
}

.page-head p {
  color: var(--muted)
}

.eyebrow {
  display: block;
  color: #e34b52;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase
}

.muted {
  color: var(--muted)
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.btn:hover {
  background: #f8fafc;
  border-color: #aebdcd
}

.btn:active {
  transform: translateY(1px)
}

.btn.primary {
  background: var(--red);
  border-color: var(--red);
  color: #fff
}

.btn.primary:hover {
  background: var(--red-dark);
  border-color: var(--red-dark)
}

.btn.subtle {
  background: var(--surface-soft)
}

.btn.small {
  min-height: 34px;
  padding: 7px 11px;
  font-size: 13px
}

.icon-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 26px;
  font-weight: 300;
  cursor: pointer
}

.icon-button:hover {
  background: #eef2f7;
  color: var(--text)
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 25px;
  box-shadow: var(--shadow-sm)
}

.panel.compact {
  padding: 16px
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px
}

.panel-head p {
  margin: 0
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0 0 24px
}

.stats article {
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px
}

.stats strong {
  display: block;
  color: var(--navy);
  font-size: 32px;
  font-weight: 650
}

.stats span,
.result-grid span {
  color: var(--muted)
}

.notice {
  padding: 13px 16px;
  border: 1px solid #d4e1ef;
  border-radius: 12px;
  background: #eef4fb;
  color: #34445a
}

.notice strong {
  font-weight: 650
}

.notice a {
  font-weight: 600
}

.notice.warning {
  margin: 16px 0;
  background: var(--warning);
  border-color: var(--warning-line)
}

.notice.success {
  margin: 0 0 16px;
  background: var(--success);
  border-color: var(--success-line)
}

.notice.error {
  margin: 0 0 16px;
  background: var(--danger);
  border-color: #f1a7ad;
  color: #8b2026
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px
}

.form-grid label,
.quote-meta label,
.configuration label,
.result-filter,
.search-control {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  color: #334155;
  font-size: 13px;
  font-weight: 500
}

.full {
  grid-column: 1/-1
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-weight: 400;
  outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}

textarea {
  resize: vertical;
  line-height: 1.45
}

input::placeholder,
textarea::placeholder {
  color: #94a3b8
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(217, 39, 46, .12)
}

input[readonly] {
  background: #f3f6f9;
  color: var(--muted)
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.section-divider {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--line)
}

.section-divider p {
  margin: 0
}

.searchbar {
  display: grid;
  grid-template-columns: 1.5fr .7fr auto;
  gap: 10px;
  margin-bottom: 14px
}

.searchbar-with-quantity {
  grid-template-columns: minmax(250px, 1.25fr) 138px minmax(260px, 1fr) minmax(220px, .85fr) 178px 260px;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.search-control>span,
.result-filter>span {
  display: block;
  min-height: 16px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .055em;
  line-height: 16px;
  text-transform: uppercase;
}

.search-control input,
.search-control select,
.multi-select>summary,
.stock-filter,
.action-control .btn {
  height: 46px
}

.action-control .btn {
  width: 100%;
  white-space: nowrap
}

.stock-filter {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important
}

.stock-filter input {
  width: 17px !important;
  height: 17px !important;
  min-height: 17px;
  padding: 0;
  accent-color: var(--red)
}

.stock-filter span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.supplier-multiselect-field {
  position: relative
}

.multi-select {
  position: relative;
  width: 100%
}

.multi-select>summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  user-select: none
}

.multi-select>summary::-webkit-details-marker {
  display: none
}

.multi-select[open]>summary {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(217, 39, 46, .12)
}

.multi-select-arrow {
  font-size: 18px;
  line-height: 1;
  transition: transform .15s ease
}

.multi-select[open] .multi-select-arrow {
  transform: rotate(180deg)
}

.multi-select-menu {
  position: absolute;
  z-index: 30;
  top: 52px;
  right: 0;
  left: 0;
  max-height: 310px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-md)
}

.multi-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer
}

.multi-option:hover {
  background: #f1f5f9
}

.multi-option input {
  width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  flex: 0 0 auto;
  padding: 0;
  accent-color: var(--red)
}

.all-option {
  color: var(--navy) !important;
  font-weight: 600 !important
}

.multi-select-divider {
  height: 1px;
  margin: 4px 5px;
  background: var(--line)
}

.quote-meta {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
  margin: 20px 0
}

.quote-meta-global {
  grid-template-columns: minmax(190px, .9fr) minmax(240px, 1.1fr) minmax(280px, 1.25fr) auto auto;
  align-items: end
}

.global-msi {
  margin: 0;
  padding: 0;
  border: 0
}

.global-msi legend {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase
}

.check {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  margin-right: 12px;
  font-weight: 500 !important
}

.check input {
  width: 17px;
  height: 17px;
  min-height: 17px;
  padding: 0;
  accent-color: var(--red)
}

.quote-summary {
  display: flex;
  flex-direction: column;
  gap: 3px;
  white-space: nowrap
}

.quote-summary span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase
}

.quote-summary strong {
  color: var(--navy);
  font-size: 16px;
  font-weight: 600
}

.results-panel {
  padding: 0;
  overflow: visible
}

.results-toolbar {
  display: grid;
  grid-template-columns: minmax(230px, 1.35fr) minmax(170px, .75fr) minmax(150px, .7fr) minmax(220px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  background: #f8fafc
}

.result-filter input,
.result-filter select {
  height: 42px;
  min-height: 42px;
  padding: 8px 11px;
  font-size: 13px
}

.result-clear-button {
  height: 42px;
  min-height: 42px;
  white-space: nowrap
}

.result-count {
  align-self: center;
  justify-self: end;
  min-width: 92px;
  padding-top: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  text-align: right;
  white-space: nowrap
}

.table-wrap {
  overflow: auto
}

table {
  width: 100%;
  border-collapse: collapse
}

th,
td {
  text-align: left;
  padding: 13px;
  border-bottom: 1px solid var(--line)
}

th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .025em;
  text-transform: uppercase
}

.product-table {
  min-width: 1100px
}

.product-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  padding: 11px 10px;
  background: #eef3f8;
  color: #32445c
}

.product-table td {
  padding: 11px 10px;
  vertical-align: middle;
  font-weight: 400
}

.product-table tbody tr:hover {
  background: #f8fafc
}

.product-row[hidden] {
  display: none !important
}

.product-table .select-col {
  width: 72px;
  text-align: center
}

.product-table input[type=checkbox] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  accent-color: var(--red)
}

.table-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500
}

.description-cell {
  min-width: 300px
}

.description-cell>strong {
  display: block;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35
}

.description-cell>small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-weight: 400
}

.measure-inline {
  display: inline-block;
  margin-top: 4px;
  color: var(--red);
  font-size: 12px;
  font-weight: 600
}

.manual-badge {
  display: inline-block;
  margin-left: 7px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #fff0d8;
  color: #8a5600;
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
  vertical-align: middle
}

.supplier-badge {
  display: inline-block;
  padding: 6px 9px;
  border-radius: 999px;
  background: #e8eef6;
  color: var(--navy);
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap
}

.money-cell {
  text-align: right;
  white-space: nowrap;
  color: var(--navy);
  font-weight: 550
}

.total-cell {
  color: var(--red);
  font-size: 15px;
  font-weight: 650
}

.product-table td>strong {
  font-weight: 600
}

.product-table td small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-weight: 400
}

.actions-cell {
  min-width: 105px
}

.table-action {
  display: inline-block;
  margin-bottom: 5px;
  color: var(--red);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none
}

.original-details {
  position: relative;
  color: var(--muted);
  font-size: 12px
}

.original-details summary,
.table-warning summary {
  cursor: pointer;
  font-weight: 500
}

.original-details[open] div {
  position: absolute;
  z-index: 8;
  top: 23px;
  right: 0;
  width: 330px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-md);
  color: var(--text)
}

.original-details p {
  margin: 4px 0
}

.original-details p strong {
  font-weight: 600
}

.table-warning {
  margin-top: 5px;
  color: #8a6500
}

.table-warning span {
  display: block;
  margin-top: 3px;
  font-size: 11px
}

.product-row.has-warning {
  box-shadow: inset 3px 0 #e2b832
}

.product-row.insufficient-stock {
  opacity: .67
}

.empty {
  padding: 42px;
  border: 1px dashed #aab8ca;
  border-radius: 16px;
  background: #fff;
  color: var(--muted);
  text-align: center
}

.empty small {
  font-weight: 400
}

.empty-action {
  margin-top: 16px
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin: 25px 0
}

.result-grid div {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px
}

.result-grid strong {
  display: block;
  font-size: 30px;
  font-weight: 650
}

.original-box {
  padding: 16px;
  border-radius: 12px;
  background: #f5f7fa;
  line-height: 1.7
}

.msi-setting {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px
}

.configuration {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--line)
}

.configuration fieldset {
  margin: 0;
  padding: 0;
  border: 0
}

.configuration legend {
  margin-bottom: 8px;
  font-weight: 600
}

.edit-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--red);
  font-weight: 600
}

/* Cotización visible para el cliente */
.customer-quote {
  max-width: 1180px;
  margin: 8px auto 0;
  border: 1px solid #aebbc9;
  background: #fff;
  box-shadow: 0 14px 40px rgba(12, 29, 53, .09)
}

.customer-quote-header {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  border-bottom: 4px solid var(--red);
  background: var(--navy);
  color: #fff
}

.quote-brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px
}

.quote-logo-letter {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--red);
  font-size: 24px;
  font-weight: 700
}

.quote-brand-block>div {
  display: flex;
  flex-direction: column;
  gap: 2px
}

.quote-brand-block strong {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .07em
}

.quote-brand-block small {
  color: #d8e4f2;
  font-size: 11px;
  font-weight: 400
}

.quote-title-block {
  display: flex;
  min-width: 260px;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 14px 20px;
  background: rgba(255, 255, 255, .04)
}

.quote-title-block span {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: .01em
}

.quote-title-block strong {
  margin-top: 4px;
  color: #d8e4f2;
  font-size: 12px;
  font-weight: 500
}

.customer-meta-grid {
  display: grid;
  grid-template-columns: 1.7fr .65fr .55fr;
  border-bottom: 1px solid #aebbc9
}

.customer-meta-grid>div {
  padding: 9px 12px;
  border-right: 1px solid #d5dee8
}

.customer-meta-grid>div:last-child {
  border-right: 0
}

.customer-meta-grid span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase
}

.customer-meta-grid strong {
  display: block;
  margin-top: 3px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 500
}

.customer-table-wrap {
  overflow: auto
}

.customer-quote-table {
  min-width: 780px
}

.customer-quote-table th {
  padding: 9px 7px;
  border-right: 1px solid rgba(255, 255, 255, .2);
  background: var(--navy);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  text-align: center
}

.customer-quote-table th small {
  display: block;
  margin-top: 2px;
  color: #d8e4f2;
  font-size: 9px;
  font-weight: 400
}

.customer-quote-table td {
  padding: 11px 8px;
  border-right: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
  font-weight: 400
}

.customer-quote-table tbody tr:nth-child(even) {
  background: #f6f8fb
}

.center-cell {
  text-align: center;
  font-weight: 600
}

.customer-description {
  min-width: 300px
}

.customer-description span {
  display: block;
  color: var(--navy);
  font-weight: 600
}

.customer-description small {
  display: block;
  margin-top: 3px;
  color: var(--red);
  font-weight: 600
}

.msi-cell {
  text-align: center;
  white-space: nowrap
}

.msi-cell strong {
  display: block;
  color: var(--navy);
  font-weight: 600
}

.msi-cell small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400
}

.customer-notes {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #cbd5e1;
  font-size: 12px
}

.customer-notes strong {
  color: var(--red);
  font-weight: 600
}

.customer-quote-footer {
  padding: 12px 16px;
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
  text-align: center;
  white-space: pre-line
}

.quote-actions {
  justify-content: center;
  margin-top: 18px
}

/* Gestión de proveedores */
.suppliers-panel {
  padding: 0;
  overflow: hidden
}

.suppliers-panel-head {
  margin: 0;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line)
}

.count-pill {
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef3f8;
  color: var(--muted);
  font-size: 12px;
  font-weight: 550
}

.supplier-table {
  min-width: 760px
}

.supplier-table td {
  font-weight: 400
}

.supplier-name {
  display: block;
  color: var(--navy);
  font-weight: 600
}

.supplier-table small {
  display: block;
  margin-top: 2px;
  color: var(--muted)
}

.actions-header {
  text-align: right
}

.supplier-table .actions-cell {
  text-align: right
}

.status-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 550
}

.status-chip.active {
  background: #e9f8ef;
  color: #24643a
}

.status-chip.inactive {
  background: #eef1f5;
  color: #6b7280
}

.status-chip.info {
  background: #e8f1fb;
  color: #315e8a
}

.status-chip.neutral {
  background: #f1f3f6;
  color: #5f6877
}

/* Diálogos */
.app-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 26px 90px rgba(7, 17, 31, .3);
  overflow: hidden
}

.app-dialog::backdrop {
  background: rgba(7, 17, 31, .56);
  backdrop-filter: blur(2px)
}

.manual-product-dialog {
  width: min(900px, calc(100vw - 28px))
}

.dialog-form {
  display: flex;
  max-height: calc(100vh - 32px);
  flex-direction: column
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px 17px;
  border-bottom: 1px solid var(--line)
}

.dialog-header h2 {
  margin: 5px 0 4px;
  font-size: 25px
}

.dialog-header p {
  margin: 0;
  color: var(--muted);
  font-size: 14px
}

.dialog-notice {
  margin: 14px 24px 0;
  padding: 10px 12px;
  border: 1px solid #ead78c;
  border-radius: 10px;
  background: #fff9e6;
  color: #5e5330;
  font-size: 13px
}

.dialog-body {
  overflow: auto;
  padding: 20px 24px 22px
}

.dialog-grid {
  gap: 15px
}

.dialog-footer {
  /* flex:0 0 auto evita que el pie se encoja cuando el cuerpo hace scroll:
     sin esto los botones de guardar quedaban fuera de la vista. */
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: #fafbfd
}

.toggle-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  cursor: pointer
}

.toggle-row input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 auto;
  margin-top: 2px;
  padding: 0;
  accent-color: var(--red)
}

.toggle-row span {
  display: flex;
  flex-direction: column;
  gap: 2px
}

.toggle-row strong {
  font-size: 13px;
  font-weight: 600
}

.toggle-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400
}

.supplier-code-field[hidden],
.toggle-row[hidden] {
  display: none !important
}

@media(max-width:1320px) {
  .searchbar-with-quantity {
    grid-template-columns: minmax(230px, 1fr) 120px minmax(240px, 1fr) minmax(210px, .9fr)
  }

  .action-control {
    grid-column: auto
  }

  .results-toolbar {
    grid-template-columns: 1fr 1fr 1fr
  }

  .result-sort-filter {
    grid-column: 1/2
  }

  .result-count {
    justify-self: start;
    padding-top: 0
  }
}

@media(max-width:920px) {
  .topbar {
    padding: 14px 18px
  }

  .topbar nav {
    flex-wrap: wrap;
    justify-content: flex-end
  }

  .container {
    padding: 26px 16px 60px
  }

  .hero,
  .page-head {
    align-items: flex-start;
    flex-direction: column
  }

  .stats {
    grid-template-columns: 1fr 1fr
  }

  .searchbar-with-quantity {
    grid-template-columns: 1fr 120px
  }

  .supplier-multiselect-field,
  .stock-control,
  .action-control {
    grid-column: 1/-1
  }

  .quote-meta-global {
    grid-template-columns: 1fr 1fr
  }

  .global-msi {
    grid-column: 1/-1
  }

  .results-toolbar {
    grid-template-columns: 1fr 1fr
  }

  .result-search-filter,
  .result-sort-filter {
    grid-column: 1/-1
  }

  .result-count {
    justify-self: start
  }

  .customer-quote-header {
    flex-direction: column
  }

  .quote-title-block {
    align-items: flex-start;
    min-width: 0
  }

  .customer-meta-grid {
    grid-template-columns: 1fr 1fr
  }

  .customer-meta-grid>div:first-child {
    grid-column: 1/-1;
    border-bottom: 1px solid #d5dee8
  }
}

@media(max-width:600px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column
  }

  .topbar nav {
    width: 100%;
    flex-direction: column;
    align-items: stretch
  }

  .topbar nav a {
    padding: 8px
  }

  .container {
    padding: 22px 12px 50px
  }

  .stats,
  .form-grid,
  .results-toolbar,
  .searchbar-with-quantity,
  .quote-meta-global {
    grid-template-columns: 1fr
  }

  .full,
  .quantity-field,
  .supplier-multiselect-field,
  .stock-control,
  .action-control,
  .result-search-filter,
  .result-sort-filter {
    grid-column: 1
  }

  .multi-select-menu {
    position: fixed;
    right: 14px;
    bottom: 14px;
    left: 14px;
    top: auto;
    max-height: 60vh
  }

  .panel {
    padding: 18px
  }

  .dialog-body,
  .dialog-header,
  .dialog-footer {
    padding-right: 17px;
    padding-left: 17px
  }

  .dialog-footer {
    flex-direction: column-reverse
  }

  .dialog-footer .btn {
    width: 100%
  }

  .customer-meta-grid {
    grid-template-columns: 1fr
  }

  .customer-meta-grid>div {
    grid-column: 1 !important;
    border-right: 0;
    border-bottom: 1px solid #d5dee8
  }

  .customer-meta-grid>div:last-child {
    border-bottom: 0
  }

  .customer-notes {
    grid-template-columns: 1fr
  }

  .msi-setting {
    grid-template-columns: 1fr
  }

  .configuration {
    grid-template-columns: 1fr
  }
}

@media print {
  body {
    background: #fff
  }

  .topbar,
  .no-print {
    display: none !important
  }

  .container {
    width: 100%;
    padding: 0
  }

  .customer-quote {
    border: 0;
    box-shadow: none
  }

  .supplier-badge {
    display: none
  }
}

/* v1.6 · Envíos, importaciones y ajuste responsivo del buscador */
.searchbar-with-quantity {
  grid-template-columns: minmax(220px, 1.35fr) 112px minmax(210px, 1fr) minmax(185px, .9fr) minmax(145px, .7fr) minmax(205px, .95fr);
}

.action-control {
  min-width: 0
}

.action-control .btn {
  min-width: 0;
  padding-right: 14px;
  padding-left: 14px;
  overflow: hidden;
  text-overflow: ellipsis
}

.manual-button {
  font-size: 14px
}

.shipping-note {
  display: block !important;
  margin-top: 3px;
  color: #6b7a8f !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.25;
  white-space: normal
}

.customer-shipping-note {
  color: #6b7a8f !important;
  text-align: right
}

.shipping-summary {
  color: var(--text);
  font-size: 12px;
  font-weight: 500
}

.compact-divider {
  margin-top: 2px;
  padding-top: 14px
}

.compact-divider h3 {
  margin: 0 0 3px;
  font-size: 15px
}

.form-grid label small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35
}

.import-note {
  margin: -10px 0 20px
}

.result-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.supplier-table {
  min-width: 980px
}

@media(max-width:1460px) {
  .searchbar-with-quantity {
    grid-template-columns: minmax(220px, 1.25fr) 112px minmax(220px, 1fr) minmax(190px, .9fr)
  }

  .action-control {
    grid-column: span 2
  }
}

@media(max-width:920px) {
  .result-grid {
    grid-template-columns: 1fr 1fr
  }

  .action-control {
    grid-column: 1/-1
  }
}

@media(max-width:600px) {
  .result-grid {
    grid-template-columns: 1fr
  }
}

@media(max-width:920px) {
  .searchbar-with-quantity {
    grid-template-columns: 1fr 120px
  }

  .supplier-multiselect-field,
  .stock-control,
  .action-control {
    grid-column: 1/-1
  }
}

@media(max-width:600px) {
  .searchbar-with-quantity {
    grid-template-columns: 1fr
  }

  .quantity-field,
  .supplier-multiselect-field,
  .stock-control,
  .action-control {
    grid-column: 1
  }
}


/* v1.8 · Logo oficial en navegación y cotizaciones */
.brand {
  gap: 0;
  letter-spacing: 0
}

.brand-logo-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 224px;
  height: 54px;
  padding: 5px 12px;
  border-radius: 11px;
  filter:
    drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff);
}

.brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}

.customer-quote-header {
  background: #fff
}

.quote-brand-block {
  display: flex;
  min-height: 86px;
  flex: 1;
  align-items: center;
  gap: 18px;
  padding: 10px 16px;
  background: #fff;
  color: var(--text)
}

.quote-company-logo {
  display: block;
  width: min(310px, 42vw);
  height: 66px;
  object-fit: contain;
  object-position: left center
}

.quote-contact-block {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  padding-left: 16px;
  border-left: 1px solid var(--line)
}

.quote-contact-block small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35
}

.quote-title-block {
  background: var(--navy);
  color: #fff
}

@media(max-width:920px) {
  .brand-logo-shell {
    width: 205px;
    height: 50px
  }

  .quote-brand-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px
  }

  .quote-company-logo {
    width: min(300px, 78vw);
    height: 62px
  }

  .quote-contact-block {
    padding-left: 0;
    border-left: 0
  }
}

@media(max-width:600px) {
  .brand-logo-shell {
    width: min(230px, calc(100vw - 48px));
    height: 52px
  }

  .quote-company-logo {
    width: min(290px, 80vw);
    height: 58px
  }
}

@media print {
  .quote-company-logo {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact
  }
}

/* v1.9.1 · Precio final, instalación total opcional y MSI */
.quote-meta-global {
  grid-template-columns: minmax(175px, .8fr) minmax(220px, 1fr) minmax(185px, .82fr) minmax(330px, 1.45fr) auto auto;
}

.quote-service-option {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px
}

.field-caption {
  display: block;
  min-height: 16px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .055em;
  line-height: 16px;
  text-transform: uppercase
}

.mounting-toggle {
  display: flex !important;
  min-height: 46px;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  cursor: pointer
}

.mounting-toggle input {
  width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  flex: 0 0 auto;
  padding: 0;
  accent-color: var(--red)
}

.mounting-toggle>span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px
}

.mounting-toggle strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.2
}

.mounting-toggle small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.2
}

.installation-control {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 112px;
  gap: 8px;
  align-items: stretch
}

.installation-total-field {
  display: flex !important;
  min-width: 0;
  flex-direction: column !important;
  gap: 3px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff
}

.installation-total-field>span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase
}

.installation-total-field input {
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none !important
}

.msi-options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 0
}

.msi-policy-note {
  max-width: 420px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.35
}

.field-help {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35
}

.customer-price-policy {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 12px;
  border-bottom: 1px solid #cbd5e1;
  background: #f7f9fc;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35
}

@media(max-width:1480px) {
  .quote-meta-global {
    grid-template-columns: 1fr 1fr 1fr
  }

  .global-msi {
    grid-column: 1/3
  }

  .quote-summary {
    align-self: end
  }

  .quote-meta-global>.btn {
    align-self: end
  }
}

@media(max-width:920px) {
  .quote-service-option {
    grid-column: auto
  }

  .installation-control {
    grid-template-columns: 1fr 110px
  }

  .global-msi {
    grid-column: 1/-1
  }

  .customer-price-policy {
    flex-direction: column;
    gap: 3px
  }
}

@media(max-width:600px) {

  .quote-service-option,
  .global-msi {
    grid-column: 1
  }

  .installation-control {
    grid-template-columns: 1fr
  }
}

.pricing-calculation-hint {
  margin: -9px 2px 16px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4
}

/* v1.9.2 · Corrección visual de datos de cotización */
.quote-meta-global {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "client client client notes notes notes installation installation installation installation summary summary"
    "msi msi msi msi msi msi msi msi msi submit submit submit";
  gap: 14px;
  align-items: end;
}

.quote-client-field {
  grid-area: client
}

.quote-notes-field {
  grid-area: notes
}

.quote-service-option {
  grid-area: installation
}

.global-msi {
  grid-area: msi;
  min-width: 0;
  padding-top: 4px
}

.quote-summary {
  grid-area: summary;
  align-self: end;
  padding-bottom: 3px
}

.quote-submit-button {
  grid-area: submit;
  align-self: end;
  width: 100%;
  min-height: 54px;
  padding-inline: 20px;
  white-space: normal
}

.installation-control {
  grid-template-columns: minmax(180px, 1fr) minmax(108px, 120px);
  min-width: 0
}

.installation-total-field {
  overflow: hidden
}

.installation-total-field input {
  width: 100%;
  min-width: 0
}

.global-msi .msi-options {
  min-height: 28px;
  align-items: center
}

.global-msi .check {
  margin-right: 10px
}

.msi-policy-note {
  max-width: none;
  min-height: 28px;
  margin-top: 5px
}

@media(max-width:1100px) {
  .quote-meta-global {
    grid-template-areas:
      "client client client client client client notes notes notes notes notes notes"
      "installation installation installation installation installation installation msi msi msi msi msi msi"
      "summary summary summary submit submit submit submit submit submit submit submit submit";
  }

  .quote-summary {
    align-self: center
  }
}

@media(max-width:760px) {
  .quote-meta-global {
    grid-template-columns: 1fr;
    grid-template-areas:
      "client"
      "notes"
      "installation"
      "msi"
      "summary"
      "submit";
  }

  .installation-control {
    grid-template-columns: 1fr 116px
  }

  .quote-summary {
    align-self: start
  }
}

@media(max-width:480px) {
  .installation-control {
    grid-template-columns: 1fr
  }
}


/* v1.9.3 · Panel dividido para datos y condiciones de cotización */
.quote-meta-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .95fr);
  gap: 18px;
  align-items: stretch
}

.quote-subpanel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%)
}

.quote-subpanel-header {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.quote-subpanel-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.02em
}

.quote-subpanel-header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45
}

.quote-subpanel-grid {
  display: grid;
  gap: 14px;
  align-items: end
}

.quote-subpanel-grid-sale {
  grid-template-columns: minmax(0, 1fr) minmax(260px, .95fr);
  grid-template-areas: "msi installation" "msi summary"
}

.quote-subpanel-grid-client {
  grid-template-columns: minmax(180px, .95fr) minmax(220px, 1.15fr) auto;
  grid-template-areas: "client notes submit"
}

.quote-subpanel-grid-client .quote-client-field {
  grid-area: client
}

.quote-subpanel-grid-client .quote-notes-field {
  grid-area: notes
}

.quote-subpanel-grid-client .quote-submit-button {
  grid-area: submit;
  align-self: end;
  min-height: 54px;
  padding-inline: 22px;
  white-space: normal
}

.quote-subpanel-grid-sale .global-msi {
  grid-area: msi;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0
}

.quote-subpanel-grid-sale .quote-service-option {
  grid-area: installation;
  min-width: 0
}

.quote-subpanel-grid-sale .quote-summary {
  grid-area: summary;
  align-self: start;
  justify-self: start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft)
}

.quote-summary span {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase
}

.quote-summary strong {
  color: var(--navy);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.03em
}

.global-msi legend {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase
}

.global-msi .msi-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  min-height: auto
}

.global-msi .check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 500
}

.global-msi .check input {
  width: 18px;
  height: 18px;
  accent-color: var(--red)
}

.msi-policy-note {
  max-width: none;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45
}

.quote-service-option {
  gap: 8px
}

.field-caption {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em
}

.installation-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 10px;
  align-items: stretch
}

.mounting-toggle {
  min-height: 58px;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--surface-soft)
}

.mounting-toggle strong {
  font-size: 14px;
  font-weight: 600
}

.mounting-toggle small {
  font-size: 11px;
  line-height: 1.35
}

.installation-total-field {
  padding: 9px 10px;
  border-radius: 12px
}

.installation-total-field>span {
  font-size: 10px;
  letter-spacing: .05em
}

.installation-total-field input {
  font-size: 24px;
  font-weight: 650;
  line-height: 1.1
}

.quote-client-field input,
.quote-notes-field input {
  min-height: 54px
}

.quote-submit-button {
  justify-self: stretch
}

@media(max-width:1200px) {
  .quote-meta-split {
    grid-template-columns: 1fr
  }
}

@media(max-width:900px) {
  .quote-subpanel-grid-sale {
    grid-template-columns: 1fr;
    grid-template-areas: "msi" "installation" "summary"
  }

  .quote-subpanel-grid-client {
    grid-template-columns: 1fr;
    grid-template-areas: "client" "notes" "submit"
  }

  .quote-subpanel-grid-client .quote-submit-button {
    width: 100%
  }
}

@media(max-width:560px) {
  .quote-subpanel {
    padding: 16px
  }

  .installation-control {
    grid-template-columns: 1fr
  }

  .quote-summary strong {
    font-size: 24px
  }
}

/* v1.9.3 · Flujo en dos cards y vista previa de condiciones */
.quote-subpanel-grid-sale {
  grid-template-columns: minmax(0, 1.3fr) minmax(150px, .5fr) minmax(165px, .58fr);
  grid-template-areas:
    "msi msi msi"
    "installation summary update"
    "status status status";
  align-items: stretch;
}

.quote-subpanel-grid-client {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "client notes"
    "submit submit";
  align-items: end;
}

.quote-subpanel-grid-client .quote-submit-button {
  justify-self: end;
  width: auto;
  min-width: 190px;
}

.pricing-update-button {
  grid-area: update;
  align-self: stretch;
  min-height: 58px;
  border-color: #b8c6d8;
  background: #fff;
  color: var(--navy);
  font-weight: 600;
}

.pricing-update-button:hover {
  border-color: var(--navy);
  background: #f5f8fc
}

.pricing-update-button.is-pending {
  border-color: #e8aeb3;
  box-shadow: 0 0 0 3px rgba(218, 32, 43, .08);
  color: var(--red)
}

.pricing-update-status {
  grid-area: status;
  margin: 0;
  padding-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.pricing-update-status.is-dirty {
  color: #9a6200
}

.pricing-update-status.is-updated {
  color: #28724f
}

.installation-total-field.is-disabled {
  opacity: .55;
  background: #f3f5f8
}

.installation-total-field.is-disabled input {
  cursor: not-allowed
}

.price-value {
  display: block
}

@media(max-width:1050px) {
  .quote-subpanel-grid-sale {
    grid-template-columns: minmax(0, 1fr) minmax(145px, .45fr);
    grid-template-areas:
      "msi msi"
      "installation summary"
      "update update"
      "status status";
  }

  .pricing-update-button {
    min-height: 50px
  }
}

@media(max-width:700px) {
  .quote-subpanel-grid-sale {
    grid-template-columns: 1fr;
    grid-template-areas: "msi" "installation" "summary" "update" "status";
  }

  .quote-subpanel-grid-client {
    grid-template-columns: 1fr;
    grid-template-areas: "client" "notes" "submit";
  }

  .quote-subpanel-grid-client .quote-submit-button {
    width: 100%;
    min-width: 0
  }
}


/* v1.9.4 · Condiciones de venta más ligeras y equilibradas */
.quote-meta-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quote-subpanel-grid-sale {
  grid-template-columns: minmax(0, 1fr) minmax(170px, .34fr);
  grid-template-areas:
    "msi msi"
    "installation update"
    "status status";
  align-items: end;
}

.quote-subpanel-grid-sale .quote-service-option {
  align-self: end;
}

.pricing-update-button {
  align-self: end;
  min-height: 58px;
}

@media(max-width:1050px) {
  .quote-meta-split {
    grid-template-columns: 1fr
  }

  .quote-subpanel-grid-sale {
    grid-template-columns: minmax(0, 1fr) minmax(170px, .34fr);
    grid-template-areas:
      "msi msi"
      "installation update"
      "status status";
  }
}

@media(max-width:700px) {
  .quote-subpanel-grid-sale {
    grid-template-columns: 1fr;
    grid-template-areas:
      "msi"
      "installation"
      "update"
      "status";
  }

  .pricing-update-button {
    width: 100%;
    min-height: 50px
  }
}


/* v1.10 · Cliente, WhatsApp e historial */
.quote-subpanel-grid-client {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "client phone" "notes submit";
  align-items: end
}

.quote-client-field {
  grid-area: client
}

.quote-phone-field {
  grid-area: phone
}

.quote-notes-field {
  grid-area: notes
}

.quote-submit-button {
  grid-area: submit
}

.quote-phone-field small {
  display: block;
  margin-top: .35rem;
  color: var(--muted);
  font-size: .76rem
}

.customer-meta-grid-phone {
  grid-template-columns: 2fr 1.2fr .8fr .8fr
}

.whatsapp-button {
  background: #168b55;
  border-color: #168b55;
  color: #fff
}

.whatsapp-button:hover {
  background: #117747;
  border-color: #117747
}

.share-toast {
  max-width: 760px;
  margin: 12px auto 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: #eaf8f0;
  color: #17663f;
  border: 1px solid #bfe4cf;
  text-align: center
}

.history-page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px
}

.history-search {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 18px
}

.history-search label span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em
}

.history-panel {
  padding: 0;
  overflow: hidden
}

.history-table td small {
  display: block;
  color: var(--muted);
  margin-top: 3px
}

.history-folio {
  font-weight: 650;
  color: var(--navy)
}

.history-actions {
  white-space: nowrap
}

.history-actions a {
  display: inline-block;
  margin-right: 12px;
  font-weight: 650;
  color: var(--red)
}

@media(max-width:900px) {
  .quote-subpanel-grid-client {
    grid-template-columns: 1fr;
    grid-template-areas: "client" "phone" "notes" "submit"
  }

  .customer-meta-grid-phone {
    grid-template-columns: 1fr 1fr
  }

  .history-page-head {
    align-items: flex-start;
    flex-direction: column
  }

  .history-search {
    grid-template-columns: 1fr
  }
}

@media(max-width:560px) {
  .customer-meta-grid-phone {
    grid-template-columns: 1fr
  }
}


/* v1.10.1 · Apertura directa de WhatsApp Desktop */
.whatsapp-helper {
  margin: 10px auto 0;
  max-width: 920px;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.45;
  text-align: center;
}

.whatsapp-helper a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* v1.11 · Imagen para WhatsApp */
.quote-actions {
  flex-wrap: wrap
}

.quote-actions .btn {
  min-width: 170px;
  text-align: center
}

.whatsapp-helper strong {
  color: var(--navy);
  font-weight: 700
}
/* Precio de lista y precio de contado en la cotización del cliente. */
.customer-quote-table .msi-inline {
  display: block;
  margin-top: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.customer-quote-table .cash-total-cell {
  color: #b91c1c;
  font-weight: 700;
}

.product-table .secondary-price {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 500;
  color: #64748b;
}

/* Se oculta el precio de contado cuando es idéntico al de lista. */
.product-table .secondary-price.is-hidden {
  display: none;
}

/* ===================== Acceso: login, cuenta y usuarios ===================== */

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 55%, #0f172a 100%);
  margin: 0;
}

.login-shell { width: min(420px, 92vw); padding: 24px 0; }

.login-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 32px 28px;
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.45);
  text-align: center;
}

.login-logo { width: 190px; max-width: 70%; height: auto; margin-bottom: 10px; }
.login-card h1 { margin: 4px 0 2px; font-size: 1.5rem; color: #0f172a; }
.login-intro { margin: 0 0 20px; color: #64748b; font-size: 0.9rem; }

.login-form { display: grid; gap: 14px; text-align: left; }
.login-form label { display: grid; gap: 5px; font-size: 0.82rem; font-weight: 700; color: #334155; }
.login-form input {
  padding: 11px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 1rem;
}
.login-form input:focus { outline: 2px solid #dc2626; outline-offset: 1px; border-color: #dc2626; }
.login-form .btn { margin-top: 6px; width: 100%; justify-content: center; }

.login-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 0.86rem;
  text-align: left;
}

.login-help { margin: 18px 0 0; font-size: 0.78rem; color: #94a3b8; }

/* Menú de usuario en la barra superior */
.user-menu { display: flex; align-items: center; gap: 10px; margin-left: 18px; }

.user-chip {
  display: grid;
  line-height: 1.15;
  text-decoration: none;
  color: #e2e8f0;
  padding: 4px 10px;
  border-radius: 8px;
}
.user-chip:hover { background: rgba(255, 255, 255, 0.1); }
.user-chip-name { font-weight: 700; font-size: 0.85rem; }
.user-chip small { font-size: 0.7rem; color: #94a3b8; }

.btn-logout {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #e2e8f0;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-logout:hover { background: rgba(255, 255, 255, 0.12); }

/* Pantalla de usuarios */
.user-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 10px;
  background: #fff;
}
.user-card.is-inactive { opacity: 0.68; }
.user-card > summary {
  cursor: pointer;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(180px, 2fr) 1fr 1fr 1.4fr;
  gap: 12px;
  align-items: center;
  font-size: 0.88rem;
}
.user-name { display: grid; line-height: 1.2; }
.user-name small { color: #64748b; font-size: 0.76rem; font-weight: 400; }
.user-perms { color: #64748b; font-size: 0.8rem; }
.user-body { padding: 4px 16px 18px; border-top: 1px solid #f1f5f9; }
.user-body .subform { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #e2e8f0; }
.user-meta { margin-top: 14px; font-size: 0.76rem; }

.badge-ok, .badge-off {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}
.badge-ok { background: #dcfce7; color: #15803d; }
.badge-off { background: #f1f5f9; color: #64748b; }

.permission-grid { border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px; }
.permission-grid legend { font-size: 0.78rem; font-weight: 700; color: #334155; padding: 0 6px; }
.permission-option { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; }
.permission-option span { display: grid; line-height: 1.3; }
.permission-option small { color: #64748b; font-size: 0.76rem; }

.permission-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.permission-list li { display: grid; padding: 9px 12px; border-radius: 8px; line-height: 1.3; }
.permission-list li small { color: #64748b; font-size: 0.76rem; }
.permission-list li.granted { background: #f0fdf4; border-left: 3px solid #16a34a; }
.permission-list li.denied { background: #f8fafc; border-left: 3px solid #cbd5e1; color: #94a3b8; }

.alert-panel { border-left: 4px solid #dc2626; }
.flash { padding: 11px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 0.88rem; }
.flash.ok { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.flash.error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* ============================ Catálogo de artículos ============================ */

.catalog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}
.catalog-filters label { display: grid; gap: 5px; font-size: 0.76rem; font-weight: 700; color: #475569; }
.catalog-filters label span { text-transform: uppercase; letter-spacing: 0.04em; }
.catalog-filters input, .catalog-filters select {
  padding: 9px 11px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.9rem;
  min-width: 150px;
}
.catalog-search input { min-width: 260px; }
.catalog-count { margin-left: auto; color: #64748b; font-size: 0.84rem; font-weight: 600; }

.catalog-table .is-retired { background: #f8fafc; color: #94a3b8; }
.catalog-table .is-retired strong { color: #64748b; }

.inline-form { display: inline; }
.link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: #dc2626;
  cursor: pointer;
  text-decoration: none;
}
.link-button:hover { text-decoration: underline; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 0 4px;
}
.pagination-state { color: #64748b; font-size: 0.86rem; font-weight: 600; }

/* Ventana flotante de edición de producto */
.edit-offer-dialog .dialog-form { max-width: 720px; }
.edit-offer-dialog .form-grid { margin-top: 4px; }
.dialog-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 4px 0 12px;
  font-size: 0.86rem;
}
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 16px; }

/* Destello breve en la fila recién editada */
@keyframes fila-actualizada {
  from { background: #fef9c3; }
  to { background: transparent; }
}
.row-updated { animation: fila-actualizada 1.6s ease-out; }

.quoted-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.68rem;
  font-weight: 700;
  vertical-align: middle;
}

.reuse-banner {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 0 14px;
  font-size: 0.88rem;
  color: #1e3a8a;
}
.reuse-banner .reuse-missing { color: #b45309; font-weight: 600; }

/* ============ Ventanas flotantes: zona con scroll propio ============
   El contenido crecía más que el recuadro y quedaba cortado: la rueda del
   ratón movía la página de atrás y los botones de guardar no se alcanzaban.
   Ahora solo el cuerpo hace scroll, con el encabezado y las acciones fijos. */

.app-dialog .dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 24px 4px;
}

.app-dialog .dialog-body > .form-grid { margin-top: 0; }

.app-dialog .dialog-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.app-dialog .dialog-header { flex: 0 0 auto; }

/* Evita que la página de atrás se desplace mientras hay una ventana abierta */
body.dialog-open { overflow: hidden; }

/* ===================== Barra superior reorganizada ===================== */

.topbar nav { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }

.topbar nav > a,
.nav-group > summary {
  padding: 9px 13px;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 0.9rem;
  line-height: 1.2;
}

.topbar nav > a:hover,
.nav-group > summary:hover { background: rgba(255, 255, 255, 0.1); }

.nav-group { position: relative; }
.nav-group > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  color: #e2e8f0;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group[open] > summary { background: rgba(255, 255, 255, 0.14); }
.nav-group .caret { font-size: 0.7rem; opacity: 0.75; }

.nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(2, 6, 23, 0.28);
  padding: 6px;
  z-index: 60;
}
.nav-menu a,
.nav-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 7px;
  color: #1e293b;
  text-decoration: none;
  font-size: 0.88rem;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}
.nav-menu a:hover, .nav-menu button:hover { background: #f1f5f9; }
.nav-menu .menu-divider { height: 1px; background: #e2e8f0; margin: 5px 4px; }
.nav-menu .menu-label {
  padding: 8px 12px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #94a3b8;
}

.user-menu { margin-left: 10px; }
.user-menu .nav-group > summary { padding: 5px 10px; }

@media (max-width: 1180px) {
  .topbar nav > a, .nav-group > summary { padding: 8px 10px; font-size: 0.85rem; }
}

/* ======================= Pedido de mayoreo ======================= */

.client-bar { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; }
.client-bar label { display: grid; gap: 5px; font-size: 0.76rem; font-weight: 700; color: #475569; }
.client-bar label span { text-transform: uppercase; letter-spacing: 0.04em; }
.client-bar select { padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 8px; min-width: 320px; }
.client-percent { display: grid; gap: 3px; }
.client-percent span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; }
.client-percent strong { font-size: 1.35rem; color: #0f172a; }

.order-panel { border-left: 4px solid #dc2626; }
.order-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.order-table .qty-form { display: flex; gap: 8px; align-items: center; }
.order-table .qty-input { width: 76px; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 7px; }
.order-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e2e8f0; }
.order-form h3 { margin: 0 0 10px; font-size: 1rem; }
.order-total {
  margin: 14px 0 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
}
.order-total strong { font-size: 1.15rem; color: #b91c1c; }
.order-clear { margin-top: 12px; text-align: right; }
.stock-warning { color: #b45309; font-weight: 600; }
.results-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.results-head h2 { margin: 0; font-size: 1.05rem; }

/* Totales del documento de mayoreo */
.wholesale-totals { margin-top: 0; }
.wholesale-totals td { padding: 7px 14px; font-size: 0.9rem; }
.wholesale-totals .label { text-align: right; color: #475569; }
.wholesale-totals .grand td { font-weight: 700; font-size: 1.02rem; color: #b91c1c; border-top: 2px solid #0f172a; }

/* ============ Corrección de los menús desplegables de la barra ============

   .topbar nav a tiene más especificidad que .nav-menu a, así que le ganaba y
   pintaba los renglones del menú en color claro sobre el panel blanco: el
   texto solo aparecía al pasar el mouse, cuando el hover agregaba un fondo.
   Estas reglas van prefijadas con .topbar para ganar la comparación. */

.topbar .nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 232px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(2, 6, 23, 0.28);
  padding: 6px;
  z-index: 80;
}

.topbar .nav-menu a,
.topbar .nav-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 7px;
  color: #1e293b;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.topbar .nav-menu a:hover,
.topbar .nav-menu button:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.topbar .nav-menu .menu-label {
  padding: 9px 12px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
}

.topbar .nav-menu .menu-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 5px 4px;
}

.topbar .nav-menu form { margin: 0; }

/* Palabra clave del proveedor en su pantalla de administración */
.supplier-keyword {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #1e293b;
  color: #f8fafc;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ===================== Barra superior en pantallas chicas =====================

   En móvil la barra se apilaba en columna y el menú desplegable, que está
   posicionado en absoluto, se salía de la pantalla o quedaba tapado. Aquí la
   barra se vuelve una fila que envuelve, y los menús se anclan al borde
   correcto para que siempre queden dentro de la vista. */

@media (max-width: 900px) {
  .topbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    position: relative;
  }

  .topbar .brand { flex: 0 0 auto; }

  .topbar nav {
    order: 3;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .topbar nav > a,
  .topbar .nav-group > summary {
    padding: 8px 10px;
    font-size: 0.84rem;
  }

  .topbar .user-menu {
    order: 2;
    margin-left: auto;
  }

  /* El menú de Administración se abre hacia la derecha y el del usuario hacia
     la izquierda: así ninguno de los dos se sale por su lado de la pantalla. */
  .topbar nav .nav-menu {
    right: auto;
    left: 0;
  }

  .topbar .user-menu .nav-menu {
    right: 0;
    left: auto;
  }

  .topbar .nav-menu {
    max-width: calc(100vw - 28px);
    max-height: 70vh;
    overflow-y: auto;
  }
}

@media (max-width: 560px) {
  .topbar .user-chip-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .user-chip small { display: none; }
  .topbar nav > a,
  .topbar .nav-group > summary { padding: 7px 8px; font-size: 0.8rem; }
}

/* ===================== Lista de permisos en Usuarios =====================

   Con nueve permisos, la lista en una sola columna obligaba a desplazarse y
   las descripciones se perdían. Se acomoda en rejilla, con cada permiso en su
   propia tarjeta para que el texto de ayuda quede pegado a su casilla y no al
   de al lado. */

.permission-grid {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px 18px;
  margin-top: 4px;
}

.permission-grid legend {
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
  padding: 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.permission-grid > .muted { margin: 0 0 14px; }

.permission-grid .permission-option {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 13px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.permission-grid .permission-option:hover { border-color: #cbd5e1; background: #f8fafc; }
.permission-grid .permission-option:has(input:checked) { border-color: #fca5a5; background: #fef7f7; }
.permission-grid .permission-option input { margin-top: 2px; flex: 0 0 auto; }
.permission-grid .permission-option span { display: grid; gap: 3px; line-height: 1.35; }
.permission-grid .permission-option strong { font-size: 0.87rem; color: #0f172a; }
.permission-grid .permission-option small { color: #64748b; font-size: 0.77rem; }

/* Las tarjetas se reparten en columnas según el ancho disponible. */
.permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 10px;
}
.permission-grid legend,
.permission-grid > .muted { grid-column: 1 / -1; }

@media (max-width: 700px) {
  .permission-grid { grid-template-columns: 1fr; }
}

/* Resumen de permisos en el renglón plegado del usuario */
.user-card > summary { gap: 14px; }

/* ===================== Separación entre bloques =====================

   Varias pantallas encadenan paneles sin aire entre uno y otro, así que el
   bloque de cliente quedaba pegado al buscador y se veía amontonado. */

.panel + .panel,
.panel + form.panel,
form.panel + .panel,
form.panel + form.panel,
.panel + .searchbar,
.searchbar + .panel,
.panel + .panel-grid,
.panel-grid + .panel,
.searchbar + .searchbar {
  margin-top: 18px;
}

.client-bar { margin-bottom: 0; }

.searchbar.searchbar-with-quantity { margin-bottom: 0; }

/* Encabezados de sección dentro de un panel: aire arriba, no abajo. */
.section-divider { margin-top: 22px; }
.section-divider:first-child { margin-top: 0; }
.section-divider.compact-divider { margin-top: 16px; }
.section-divider h3 { margin: 0 0 3px; }
.section-divider p { margin: 0; }

/* Los cargos del pedido de mayoreo se leían como un párrafo corrido porque las
   casillas y su texto de ayuda quedaban en la misma línea. */
.order-panel .check { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; }
.order-panel .check span { display: grid; gap: 2px; line-height: 1.35; }
.order-panel .check small { color: #64748b; font-size: 0.78rem; }
.order-panel .installation-total-field { margin: 4px 0 14px 30px; }

/* Palabra clave del proveedor dentro del desplegable de filtro */
.multi-option .supplier-keyword-inline {
  display: inline-block;
  min-width: 40px;
  margin-right: 9px;
  padding: 1px 7px;
  border-radius: 5px;
  background: #e2e8f0;
  color: #1e293b;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}

/* Nota de uso interno bajo la cotización de mayoreo. Nunca se imprime. */
.internal-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  max-width: 1120px;
  margin: 14px auto 0;
  padding: 10px 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 9px;
  background: #f8fafc;
  color: #475569;
  font-size: 0.82rem;
}
.internal-note strong {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}

/* ============ Cargos y cliente del pedido de mayoreo ============

   Antes cada casilla y su campo ocupaban un renglón completo, así que el
   bloque se comía media pantalla antes de llegar al botón de generar. Ahora
   son dos tarjetas lado a lado, con la casilla y su importe en la misma fila,
   igual que la pantalla de venta al público. */

.order-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.order-card {
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  padding: 16px 18px 18px;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.order-card h3 { margin: 0 0 2px; font-size: 1rem; }
.order-card-hint { margin: 0 0 14px; color: #64748b; font-size: 0.8rem; line-height: 1.35; }

.charge-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid #f1f5f9;
}
.charge-row:first-of-type { border-top: none; }

.charge-toggle { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.charge-toggle span { display: grid; gap: 2px; line-height: 1.3; }
.charge-toggle strong { font-size: 0.87rem; }
.charge-toggle small { color: #64748b; font-size: 0.74rem; }

.charge-amount {
  display: grid;
  gap: 2px;
  justify-items: end;
  margin: 0;
  min-width: 128px;
}
.charge-amount > span {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
}
.charge-amount input {
  width: 128px;
  padding: 7px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 1.02rem;
  font-weight: 700;
  text-align: right;
}
.charge-amount small { color: #94a3b8; font-size: 0.7rem; }

.order-card .form-grid { gap: 12px; }

.order-footer {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.order-footer .order-total { margin: 0; font-size: 0.9rem; color: #475569; }
.order-footer .order-total strong { font-size: 1.15rem; color: #0f172a; margin-left: 6px; }

@media (max-width: 760px) {
  .charge-row { grid-template-columns: 1fr; }
  .charge-amount { justify-items: start; }
  .charge-amount input { width: 100%; }
}