.cotizaciones {
  --accent: #795115;
  --quote-ink: #33271c;
  --quote-muted: #675744;
  --quote-rule: #ddcdb3;
  --quote-surface: #fffdf8;
  --quote-cream: #faf3e5;
  --quote-error: #8a251b;
  min-height: 100vh;
  background: #f5efe4;
  color: var(--quote-ink);
}

.cotizaciones .topbar { border-color: var(--quote-rule); }
.cotizaciones .topbar > a { gap: .4rem; }

#workspace.quote-workspace {
  max-width: 61rem;
  padding-inline: clamp(.85rem, 4vw, 2.5rem);
}

.quote-icon {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  vertical-align: -.2em;
}

.quote-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(4rem, .18fr);
  align-items: center;
  gap: clamp(.9rem, 3vw, 2.8rem);
  margin: 0 auto 1.5rem;
  padding: 1.25rem clamp(1.35rem, 5vw, 3.1rem);
  border: 1px solid var(--quote-rule);
  border-top: 3px solid var(--accent);
  border-radius: .35rem .35rem 1.3rem 1.3rem;
  background:
    radial-gradient(circle at center, #b99b6c35 1px, transparent 1.1px) right top / 14px 14px,
    linear-gradient(112deg, #fffbf3 45%, #f0e1c6);
  box-shadow: 0 16px 40px -26px #4a310b55;
}

.quote-header h1 {
  color: #492f16;
  text-wrap: balance;
  font-size: clamp(2.4rem, 4.4vw, 3.45rem);
  margin-bottom: .65rem;
}

.quote-header p { color: var(--quote-muted); max-width: 31rem; }

.quote-illustration { width: 100%; height: auto; justify-self: end; }

#add-line,
#share-pdf,
.quote-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

#quote-form,
#review {
  max-width: 47rem;
  margin-inline: auto;
}

.quote-panel {
  margin-block: 1rem;
  padding: clamp(1rem, 4vw, 2rem);
  border-color: var(--quote-rule);
  border-radius: .95rem;
  background: var(--quote-surface);
  box-shadow: 0 10px 30px -25px #57370d66;
}

.quote-panel h2 {
  margin: 0 0 .9rem;
  color: #492f16;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  line-height: 1.07;
}

.quote-muted,
.quote-privacy { color: var(--quote-muted); font-size: .925rem; }
.quote-muted { margin: 0 0 .85rem; }

.quote-fields,
.quote-lines { display: grid; gap: .95rem; }
.quote-fields .field { min-width: 0; margin: 0; gap: .25rem; }
.quote-fields small { color: var(--quote-muted); }

.quote-fields :is(input, select, textarea) {
  min-height: 46px;
  min-width: 0;
  width: 100%;
  margin-top: 0;
  border-color: #aa9679;
  border-radius: .5rem;
  background: #fffefa;
}

.quote-fields textarea { resize: vertical; min-height: 4.6rem; }
.quote-fields input[type="date"] { display: block; }
.quote-pair { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.quote-details {
  border-block: 1px dashed var(--quote-rule);
  margin-top: .2rem;
}

.quote-details summary {
  align-content: center;
  color: var(--accent);
  cursor: pointer;
  font-weight: 700;
  min-height: 44px;
  padding-block: .25rem;
}

.quote-details[open] .quote-fields { padding-block: .4rem .9rem; }
.quote-lines:not(:empty) { margin-block: 1.1rem; }

#no-lines {
  border: 1px dashed #bda583;
  border-radius: .65rem;
  padding: .75rem .85rem;
  background: #fbf6ec;
}

.quote-line {
  background: var(--quote-cream);
  border: 1px solid var(--quote-rule);
  border-radius: .8rem;
  margin: 0;
  min-inline-size: 0;
  padding: .75rem clamp(.7rem, 3vw, 1.2rem) 1rem;
}

.line-title {
  color: var(--accent);
  font-weight: 700;
  padding-inline: .4rem;
}

.quote-line-heading {
  align-items: end;
  display: grid;
  gap: .6rem;
  grid-template-columns: minmax(0, 15rem) auto;
  justify-content: space-between;
}

.quote-line-amount {
  border-top: 1px dashed #bfa780;
  color: #4c3217;
  display: flex;
  font-weight: 700;
  gap: .5rem;
  justify-content: space-between;
  margin: .1rem 0 0;
  padding-top: .65rem;
}

.quote-line-amount span,
.quote-total output,
.quote-subtotals dd { font-variant-numeric: tabular-nums; }

.quote-error {
  color: var(--quote-error);
  font-size: .875rem;
  font-weight: 650;
  margin: 0;
}

.quote-fields [aria-invalid="true"] { border-color: var(--quote-error); }
.quote-warning {
  max-width: 47rem;
  margin-inline: auto;
  overflow-wrap: anywhere;
  background: #fff2df;
  color: #664013;
  border-color: #d9bd94;
}

.quote-undo,
.quote-actions,
.quote-review-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.quote-undo { margin-top: .8rem; }
.quote-total {
  background: #49311b;
  color: #fff7ea;
  border-radius: .95rem;
  display: flex;
  flex-wrap: wrap;
  gap: .85rem 1.25rem;
  justify-content: space-between;
  align-items: center;
  padding: .95rem clamp(1rem, 3vw, 1.4rem);
}

.quote-total span,
.quote-total output { display: block; }

.quote-total span { font-size: .9rem; color: #f3dfbf; }
.quote-total output {
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.quote-total .primary { background: #f6e6c6; color: #3f2a16; }
.quote-total .primary:focus-visible { outline-color: #f6e6c6; }
.quote-privacy { margin-block: 1rem 1.5rem; }
.quote-privacy p { margin-block: 0 .45rem; }

.quote-review-header { justify-content: space-between; }
.quote-review-header h2 { margin: 0; }
.quote-sheet { overflow-wrap: anywhere; }

.quote-meta { margin-block: 1rem 1.4rem; }
.quote-meta div {
  border-bottom: 1px solid var(--quote-rule);
  display: grid;
  gap: .15rem .75rem;
  grid-template-columns: minmax(5rem, .35fr) minmax(0, 1fr);
  padding-block: .5rem;
}

.quote-meta dt { color: var(--quote-muted); font-size: .9rem; }
.quote-meta dd, .quote-subtotals dd { margin: 0; }
#review-lines h3 {
  padding: .45rem .65rem;
  margin-block: 0;
  border-radius: .35rem;
  background: #f3e6cf;
  color: #543616;
}

.quote-items { list-style: none; margin: .2rem 0 1.2rem; padding: 0 .65rem; }
.quote-items li {
  border-bottom: 1px solid var(--quote-rule);
  display: grid;
  gap: .1rem .6rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-block: .55rem;
}

.quote-items li small { grid-column: 1 / -1; color: var(--quote-muted); }
.quote-subtotals { background: #faf2e1; border-radius: .7rem; padding: .75rem .85rem; }
.quote-subtotals div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem .6rem; }
.quote-subtotals .quote-final {
  border-top: 1px solid #bca279;
  color: #4c3015;
  font-size: 1.12rem;
  font-weight: 700;
  margin-top: .5rem;
  padding-top: .55rem;
}

.quote-notes p { white-space: pre-wrap; }
.quote-export { border-left: 3px solid var(--accent); }
.quote-export h2 { margin-bottom: .4rem; }
.quote-export p { margin-block: .4rem .75rem; color: var(--quote-muted); }
.quote-pdf-status { font-weight: 650; }
.quote-download { padding: .6rem .85rem; border: 1px solid var(--quote-rule); border-radius: .65rem; text-decoration: none; font-weight: 650; }
.quote-download:hover { background: var(--quote-cream); }

.quote-workspace :is(button, .quote-download) { min-height: 44px; }
.quote-workspace :is(button, a, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 620px) {
  .quote-header { grid-template-columns: minmax(0, 1fr); }
  .quote-illustration { display: none; }
}

@media (max-width: 379px) {
  .quote-total button { width: 100%; }
  .quote-fields input[type="date"] { padding-inline: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .quote-workspace * { transition: none !important; }
}

.quote-tools {
  max-width: 47rem;
  margin: 0 auto 1rem;
}

.quote-tool-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
}

.quote-tool :is(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-height: 44px;
  padding: .35rem clamp(.4rem, 2vw, .7rem);
  border: 1px solid var(--quote-rule);
  border-radius: .55rem;
  background: var(--quote-surface);
  color: #604015;
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
}

.quote-tool .quote-icon { width: 1rem; height: 1rem; }

.quote-tool :is(a, button):hover,
.quote-tool button[aria-current="page"] {
  background: #ecdec3;
  box-shadow: none;
}

.quote-tools-return { margin-top: .5rem; }
.quote-tools-return:not(:has(button:not([hidden]))) { display: none; }
.quote-tools-return button { padding: .45rem .65rem; font-size: .875rem; }
.quote-tool-status { margin-top: .5rem; color: var(--quote-muted); font-size: .875rem; }

.quote-update { max-width: 47rem; margin-inline: auto; }
.quote-update p { margin: 0 0 .55rem; }

.quote-pro-panel {
  max-width: 47rem;
  margin-inline: auto;
}

.quote-pro-form {
  display: grid;
  gap: .85rem;
  margin-top: .9rem;
  padding: clamp(.8rem, 3vw, 1.3rem);
  border: 1px solid var(--quote-rule);
  border-radius: .75rem;
  background: var(--quote-cream);
}

.quote-pro-form h3,
.quote-pro-form .quote-actions { margin: 0; }

.quote-pro-form > button { justify-self: start; }

.quote-pro-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.quote-pro-list {
  display: grid;
  gap: .45rem;
  list-style: none;
  padding: 0;
}

.quote-pro-list li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .7rem .65rem;
  border-bottom: 1px solid var(--quote-rule);
}

.quote-pro-list li > div {
  flex: 1 0 min(14rem, 100%);
  min-width: 0;
  overflow-wrap: anywhere;
}

.quote-pro-list :is(strong, small) { display: block; }
.quote-pro-list small { color: var(--quote-muted); }

.quote-catalog-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .7rem;
  align-items: end;
  margin-top: .9rem;
  padding: .7rem;
  border: 1px solid var(--quote-rule);
  border-radius: .75rem;
  background: var(--quote-cream);
}

.quote-catalog-picker .field { flex: 1 1 12rem; }
.quote-action-status { margin: .65rem 0 0; color: #583917; font-weight: 650; }
.quote-before-balance { font-weight: 650; }

@media (max-width: 440px) {
  .quote-pro-fields { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 370px) {
  .quote-tool-grid { column-gap: .25rem; }
  .quote-tool :is(a, button) { gap: .25rem; padding-inline: .25rem; }
}