/* Optics-specific screens. The shell, panels, tables, forms and states come from Koozco.UI (koozco-ui.css) and the sober look from koozco-pro.css
   (opted in with data-ui="pro" on <html>). Everything here uses the theme tokens, so the light and the dark theme need no separate rules. */
.loading-progress-text:after { content: 'Preparando tu óptica…'; }

/* Indicators: a compact row of figures, one hairline card each */
.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.kpi-label { font-size: 12px; font-weight: 500; color: var(--muted); }
.kpi-value { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -.3px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-note { font-size: 12px; color: var(--muted); }

/* Work lists on the home */
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.work-grid .panel { margin-bottom: 0; }
.work-list { list-style: none; margin: 0; padding: 0; }
.work-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.work-list li:first-child { border-top: 0; padding-top: 0; }
.work-time { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.work-main { display: flex; flex-direction: column; min-width: 0; }
.work-main strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-main small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-aside { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Operational home (P5-030): the large search, the quick actions and a grid of cards. One column on a phone, two from 700 px, three from 1100 px and four from 1500 px. Tokens only;
   rows are links of at least 44 px. */
.home-search { margin: 0 0 16px; }
.home-quick { margin: 0 0 20px; }
.home-cards-heading { margin: 0 0 10px; font-size: 1rem; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.home-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; background: var(--card); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); }
.home-card-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.home-card-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.home-card-state { margin: 8px 0; }
.home-rows { list-style: none; margin: 0; padding: 0; }
.home-rows li { border-top: var(--border-width) solid var(--line); }
.home-rows li:first-child { border-top: 0; }
.home-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; min-height: 44px; padding: 6px 4px; color: inherit; text-decoration: none; border-radius: var(--radius-md); }
.home-row:hover { background: var(--nav-hover); }
.home-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.home-row-main { display: flex; flex-direction: column; min-width: 0; }
.home-row-main strong { overflow-wrap: anywhere; }
.home-row-customer { font-size: 13px; overflow-wrap: anywhere; }
.home-row-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; }
.home-card-foot { margin-top: auto; padding-top: 6px; }
.home-card-all { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (min-width: 700px) { .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .home-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Order detail and the developer component gallery */
.component-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.component-grid .panel { margin-bottom: 0; }
.component-number { display: block; font-size: 10.5px; letter-spacing: .9px; color: var(--eyebrow); margin-bottom: 6px; }
.detail-title { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.detail-title h2 { font-size: 17px; margin-bottom: 2px; }
.detail-title p { color: var(--muted); margin: 0; }
.detail-title > .rz-badge { margin-left: auto; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 20px; }
.detail-grid small { display: block; color: var(--muted); margin-bottom: 4px; }
.workflow { padding-left: 24px; line-height: 2.2; color: var(--muted); }
.workflow .current { color: var(--nav-active-ink); font-weight: 650; }
.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.switch-row strong { font-size: 13px; }
.switch-row small { display: block; color: var(--muted); margin-top: 4px; }
.button-row, .badge-row { display: flex; flex-wrap: wrap; gap: 8px; }
.divider { border-top: 1px solid var(--line); }
.scheduler-panel { padding: 16px; }
.rz-scheduler { font-size: 12px; }
.rz-scheduler-appointment { background: var(--brand) !important; border-radius: 4px !important; }

@media (max-width: 1200px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .work-grid { grid-template-columns: 1fr; }
  .component-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .kpi { padding: 10px 12px; }
  .kpi-value { font-size: 19px; }
  .work-list li { grid-template-columns: 52px minmax(0, 1fr); }
  .work-aside { display: none; }
  .scheduler-panel { padding: 8px; overflow: auto; }
  .rz-scheduler { min-width: 600px; }
  .detail-title { flex-wrap: wrap; }
  .detail-title > .rz-badge { margin-left: 0; }
}

/* ---- Catálogo óptico (P5-019): the range, treatments and price grid editors of the lens and contact lens products. Tokens only. The grid becomes cards at 640 px or less (the
   inventory table pattern: each cell carries its label in data-label); targets are 44 px on coarse pointers. ---- */
/* A grid with a shrinkable column, not a flex column: the table of the price grid scrolls inside its own box instead of widening the page. */
.catalog-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.catalog-section form { min-width: 0; }
/* The visually hidden text of a header cell is absolutely positioned: without a positioned scroll box it is placed against the page and widens it. */
.catalog-section .table-scroll { position: relative; }
.catalog-fieldset { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
.catalog-fieldset legend { padding: 0; font-weight: 600; }
.catalog-help { margin: 4px 0 12px; font-size: 13px; }
.catalog-range-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 12px 16px; }
.catalog-range-grid .catalog-range-wide { grid-column: 1 / -1; max-width: 22rem; }
.power-input { width: 100%; min-width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.catalog-treatments { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 8px 16px; }
.catalog-treatment { display: flex; align-items: flex-start; gap: 8px; }
.catalog-treatment label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.catalog-grid-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 8px 0; }
.catalog-grid-head h3 { margin: 0; font-size: 15px; }
.catalog-grid td { vertical-align: top; }
.catalog-grid .catalog-row-number { white-space: nowrap; font-weight: 600; }
.catalog-grid tr.catalog-row-invalid td { background: var(--alert-bg, transparent); }
.catalog-row-error { margin: 0; color: var(--alert-ink, var(--ink)); font-size: 13px; }
.catalog-grid-empty { margin: 8px 0; }
.catalog-flat-price { margin: 4px 0 12px; font-size: 13px; }
.catalog-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
@media (max-width: 640px) {
  .catalog-grid .power-input { text-align: right; }
  .catalog-grid td.catalog-row-error-cell { display: block; text-align: left; padding: 4px 0 0; }
  .catalog-grid td.catalog-row-error-cell::before { content: none; }
  .catalog-actions .rz-button, .catalog-grid-head .rz-button { flex: 1 1 auto; }
}
@media (pointer: coarse) {
  html:root .power-input, html:root .catalog-grid .power-input { min-height: 44px; }
  html:root .catalog-actions .rz-button, html:root .catalog-grid .rz-button, html:root .catalog-grid-head .rz-button { min-height: 44px; }
  html:root .catalog-treatment input[type="checkbox"] { width: 24px; height: 24px; margin-top: 0; }
}

/* ---- Datos clínicos (P5-017): the prescription editor and read view, the contact lens fitting and the Libro recetario. Tokens only. The editor is two columns (form and scan) from 960 px and one
   column below; the refraction grid scrolls inside its own box; targets are 44 px on coarse pointers (tablet-first). ---- */
.rx-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px 24px; align-items: start; }
.rx-form, .rx-read, .rx-side { min-width: 0; }
.rx-side { display: grid; gap: 16px; }
.rx-editor, .rx-fields, .trial-form { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
.rx-editor legend, .rx-fields legend, .trial-form legend { padding: 0; font-weight: 600; }
.trial-form { border: var(--border-width) solid var(--line); border-radius: var(--radius-md); padding: 12px; margin-bottom: 12px; }
.rx-notation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 8px 0 12px; }
.rx-radio { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.rx-grid th, .rx-grid td { vertical-align: top; }
.rx-grid .power-input, .rx-axis { min-width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.rx-axis { width: 5rem; }
.rx-base { min-width: 7rem; }
.rx-row-errors td { padding-top: 0; }
.rx-equivalents, .rx-equivalents-api, .rx-warning-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.rx-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 12px 16px; }
.rx-field-grid .rx-wide { grid-column: 1 / -1; }
.rx-measure { max-width: 8rem; }
.rx-notes { white-space: pre-wrap; overflow-wrap: anywhere; }
.rx-sign-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 12px 16px; }
.scan-viewer { min-width: 0; }
.scan-panel .doc-viewer-stage { height: min(60dvh, 640px); }
.sign-box { border: var(--border-width) solid var(--line); border-radius: var(--radius-md); padding: 12px; margin-top: 16px; }
.addendum { margin: 0 0 12px; }
.book-table td { vertical-align: top; }
/* The visually hidden header of an actions column is absolutely positioned: a positioned scroll box keeps it inside, so it never widens the page. */
.rx-read .table-scroll, .person-prescriptions .table-scroll, .person-fittings .table-scroll, .person-orders .table-scroll, .book-table-box { position: relative; }
@media (max-width: 960px) {
  .rx-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) {
  html:root .rx-axis, html:root .rx-base, html:root .rx-measure, html:root .rx-grid .power-input { min-height: 44px; }
  html:root .rx-radio { min-height: 44px; }
  html:root .rx-radio input[type="radio"] { width: 24px; height: 24px; }
  html:root .trial-form .rz-button, html:root .sign-box .rz-button { min-height: 44px; }
}

/* ---- Pedidos (P5-018): the order builder, the detail and the lists. Tokens only. The stepper is a wrapping row of buttons (a column on a phone, where only the current step carries its label
   in full); the tables become cards at 640 px or less through the inventory pattern (data-label); targets are 44 px on coarse pointers (tablet-first). ---- */
.order-context { margin: 0 0 12px; }
.order-steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.order-step { margin: 0; min-width: 0; }
.order-step-button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 6px; font: inherit; color: var(--ink); background: var(--card); border: var(--border-width) solid var(--line); border-radius: 999px; cursor: pointer; }
.order-step-button:disabled { cursor: default; opacity: .6; }
.order-step-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.order-step-number { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: var(--border-width) solid var(--line-strong, var(--line)); font-weight: 650; font-variant-numeric: tabular-nums; }
.order-step.is-current .order-step-button { background: var(--action); color: var(--on-brand); border-color: var(--action); font-weight: 650; }
.order-step.is-current .order-step-number { border-color: currentColor; }
.order-step.is-done .order-step-number { background: var(--badge-success-bg); color: var(--badge-success-ink); border-color: transparent; }
.order-step-title { margin: 0 0 12px; outline: none; }
.order-step-form { max-width: 62rem; }
.order-fieldset { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.order-fieldset legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.order-selected { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 12px; margin: 0 0 12px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--card); }
.order-selected p { margin: 0; }
.order-frame-search { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 12px 24px; align-items: start; margin-bottom: 8px; }
.order-lens-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 12px 16px; margin-bottom: 12px; }
.order-lens-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.order-lens-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 8px 12px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--card); }
.order-lens-option.is-selected { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.order-lens-option input[type="radio"] { margin-top: 4px; width: 18px; height: 18px; }
.order-lens-option label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; min-width: 0; cursor: pointer; }
.order-lens-name { font-weight: 600; overflow-wrap: anywhere; }
.order-lens-meta, .order-lens-flag { grid-column: 2; }
.order-lens-flag { color: var(--muted); }
.order-treatments th[scope="row"] { text-align: left; font-weight: 500; }
.order-treatments td, .order-treatments th { vertical-align: middle; }
.order-treatments input[type="checkbox"] { width: 20px; height: 20px; }
.order-treatments-help { margin: 0 0 8px; }
.order-lens-options { margin-top: 12px; }
.order-lines-section { margin-bottom: 20px; }
.order-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; padding: 10px 12px; margin: 0 0 8px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--card); }
.order-row > * { min-width: 0; }
.order-row-grow { flex: 1 1 14rem; }
.order-row-remove { align-self: flex-end; }
.order-qty { width: 6rem; max-width: 100%; text-align: right; }
.order-summary-facts { margin-top: 12px; }
.order-lines-table td small { display: block; }
.order-heading-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.order-promised { margin: 0 0 12px; }
.order-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.order-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: grid; gap: 14px; }
.order-timeline-item { display: flex; flex-direction: column; gap: 2px; position: relative; }
.order-timeline-item::before { content: ""; position: absolute; left: -21px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--action); }
.order-documents { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.order-document { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 12px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--card); }
.order-document-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.order-filter-checks { align-self: end; }
.order-confirm .order-deposit { margin-left: 0; max-width: 28rem; }
.order-policy p { margin: 0; }
.order-payment-figures { margin-left: 0; }
.order-detail-grid .table-scroll, .order-summary .table-scroll { position: relative; }
/* Approvals (P5-029): the badge of the header, the list of requests and the request panel of the builder, the confirmation and the counter. */
.hdr-approvals { text-decoration: none; }
.approval-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.approval-item.is-linked > .approval-card { outline: 2px solid var(--action); outline-offset: 2px; }
.approval-card { display: grid; gap: 10px; padding: 14px 16px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--card); }
.approval-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.approval-card-title { margin: 0; font-size: 1rem; }
.approval-card-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.approval-facts { margin: 0; }
.approval-actions { margin-top: 4px; }
.approval-own { margin: 0; }
.approval-panel { display: grid; gap: 6px; margin: 8px 0; padding: 12px 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--card); }
.approval-panel.is-approved { border-color: var(--success-solid, var(--line)); }
.approval-panel.is-rejected, .approval-panel.is-expired, .approval-panel.is-cancelled { border-color: var(--danger-solid, var(--line)); }
.approval-panel-title { margin: 0; font-size: 1rem; }
.approval-panel-line, .approval-panel p { margin: 0; }
@media (pointer: coarse) {
  html:root .approval-actions .rz-button, html:root .approval-panel .rz-button, html:root .hdr-approvals { min-height: 44px; min-width: 44px; }
}
@media (max-width: 640px) {
  .order-steps { flex-direction: column; }
  .order-step-button { width: 100%; }
  .order-lens-option label { flex-direction: column; }
}
@media (pointer: coarse) {
  html:root .order-step-button { min-height: 44px; }
  html:root .order-lens-option input[type="radio"], html:root .order-treatments input[type="checkbox"] { width: 24px; height: 24px; }
  html:root .order-row .rz-button, html:root .order-document .rz-button, html:root .order-selected .rz-button { min-height: 44px; }
  html:root .order-row .text-input, html:root .order-row .native-select { min-height: 44px; }
}

/* Laboratory board, quality check and counter (P5-026). Tokens only; touch targets of 44 px on coarse pointers. */
.lab-filters { align-items: end; }
.lab-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 8px; }
.lab-card-customer { font-weight: 600; overflow-wrap: anywhere; }
.lab-card-lab { overflow-wrap: anywhere; }
.lab-card-chips { justify-content: flex-start; }
.lab-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.qc-table th, .qc-table td { vertical-align: top; }
.qc-table .power-input { max-width: 8rem; }
.qc-indicator { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.qc-indicator.qc-ok, .qc-state.qc-ok, p.qc-ok { color: var(--badge-success-ink); }
.qc-indicator.qc-bad, .qc-state.qc-bad { color: var(--badge-danger-ink); }
.qc-indicator.qc-pending { color: var(--badge-light-ink); font-weight: 400; }
.qc-state { margin: 0; padding: 8px 12px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--card-alt, var(--card)); font-weight: 600; }
.qc-deviation { display: flex; flex-direction: column; gap: 4px; }
.qc-fail-actions { margin-top: 4px; }
.counter-results { display: grid; gap: 8px; }
.counter-result { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 8px 0; border-bottom: var(--border-width) solid var(--line); }
.counter-order-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.counter-checklist { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.counter-check { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--card); }
.counter-check-ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-ink); }
.counter-check-warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); }
@media (pointer: coarse) {
  html:root .lab-card-actions .rz-button, html:root .counter-result .rz-button, html:root .counter-result .button-link, html:root .qc-form .rz-button, html:root .lab-dialog .rz-button { min-height: 44px; }
  html:root .qc-table .text-input, html:root .qc-table .native-select, html:root .lab-dialog .text-input, html:root .lab-dialog .native-select { min-height: 44px; }
  html:root .qc-form input[type="checkbox"], html:root .lab-dialog input[type="checkbox"], html:root .lab-filters input[type="checkbox"] { width: 24px; height: 24px; }
}