/* Shared layout rules. Content remains scrollable when text, zoom, or the keyboard needs space. */
html { min-width: 0; }
body { min-width: 0; }
.shell, .display, .card, .modal-card, .owner-grid > *, .orders-column { min-width: 0; }
.shell { width: min(100%, 760px); padding: clamp(12px, 3vw, 24px); }
.shell:has(.owner-grid) { width: min(100%, 1400px); }
.shell:has(.orders-columns) { width: min(100%, 1100px); }
.brand { min-width: 0; flex-wrap: wrap; line-height: 1.2; }
.brand > span:not(.brand-mark) { min-width: 0; overflow-wrap: anywhere; }
.modal-card { max-width: 100%; }
.card { padding: clamp(16px, 4vw, 38px); }
h1 { font-size: clamp(1.8rem, 6vw, 3.8rem); line-height: 1.12; }
h2 { line-height: 1.2; }
h1 + .login-form { margin-top: 16px; }
p, h1, h2, h3, button, a, label, legend, summary, strong { overflow-wrap: anywhere; }
button, a.secondary, a.primary { line-height: 1.25; white-space: normal; }
button, input, select, textarea { max-width: 100%; }
input, select, textarea { min-width: 0; }
img, svg, video { max-width: 100%; height: auto; }
.card .actions, .card .toolbar, .filters, .top-actions, .order-nav { flex-wrap: wrap; }
.actions > *, .toolbar > *, .top-actions > * { min-width: 0; }
.modal { overflow-y: auto; overscroll-behavior: contain; align-items: safe center; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.modal .modal-card { max-height: calc(100dvh - 24px); overflow-y: auto; }
:focus-visible { outline: 3px solid var(--tu-primary, #145da0); outline-offset: 3px; }

/* The client and operator pages grow naturally instead of clipping their controls. */
html:has(.client-page), body.client-page, body.operator-page { height: auto; min-height: 100%; overflow-x: auto; overflow-y: auto; overscroll-behavior: auto; }
body.client-page { position: static; inset: auto; }
.client-shell, .client-shell.has-prices { display: flex; flex-direction: column; width: min(100%, 760px); height: auto; min-height: 100dvh; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 12px calc(52px + env(safe-area-inset-bottom)); }
.client-shell #turnCard, .client-shell #entryChoice { flex: none; min-height: 0; padding: clamp(16px, 4vw, 30px); }
.client-shell #number { white-space: normal; font-size: clamp(2.8rem, 14vw, 7rem); overflow-wrap: anywhere; }
.client-shell #business { display: block; overflow: visible; }
.client-shell .offer, .client-shell .offer:has(.offer-nav:not(.hidden)) { max-height: none; overflow: visible; padding: 12px; grid-template-columns: minmax(70px, 28%) minmax(0, 1fr); }
.client-shell .offer h2, .client-shell .offer #offerDescription { display: block; overflow: visible; }
.client-shell .offer-nav button, .client-shell #offerPosition { display: inline-block; }
.client-shell .offer-nav { flex-wrap: wrap; }
.client-shell .offer-nav button { min-height: 44px; font-size: .875rem; }
.client-shell .offer img { width: 100%; height: auto; max-height: 180px; object-fit: contain; }
.client-shell .actions { grid-template-columns: minmax(0, 1fr); }
.price-viewer { width: 100%; }
.price-header { max-height: min(55dvh, 360px); overflow-y: auto; }
.price-scroll { overflow: auto; }
.price-scroll img { width: 100%; max-width: none; }
.price-pdf { min-height: 420px; }

.operator-shell, .order-wait-panel .operator-shell { display: block; width: min(100%, 900px); height: auto; min-height: 100dvh; padding: clamp(12px, 3vw, 24px); }
.operator-shell > p { margin: 14px 0; }
.operator-shell .card { margin-top: 16px; }
.operator-shell .operator { display: block; }
.operator-shell .current, .order-wait-panel .current { font-size: clamp(3rem, 18vw, 9rem); line-height: 1.1; }
.operator-shell .current.named, .order-wait-panel .current.named { font-size: clamp(2rem, 8vw, 5rem); }
.operator-shell .big-message { line-height: 1.2; }
.order-wait-panel #controls { padding: clamp(16px, 4vw, 30px); }
.order-wait-panel .order-major-actions, .order-wait-panel .order-major-actions.split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.order-wait-panel .order-major-actions > button { min-height: 64px; }
.operator-shell .minor-actions { display: flex; flex-wrap: wrap; }
.operator-shell .minor-actions > * { flex: 1 1 180px; }

/* Large display can scroll on phones and at high browser zoom. */
.display, .display:has(.order-screen:not(.hidden)) { height: auto !important; min-height: 100dvh !important; overflow: visible !important; grid-template-rows: auto minmax(0, 1fr) auto !important; padding: clamp(12px, 3vw, 40px); }
.display > .brand { gap: 10px; }
.display .screen-clock { margin-left: auto; white-space: nowrap; }
.display .top-actions { flex-wrap: wrap; }
.display-number { min-width: 0; overflow: visible; }
.display-number strong { font-size: clamp(4rem, 25vw, 18rem) !important; line-height: 1.05; overflow-wrap: anywhere; }
.display .bottom { min-width: 0; flex-wrap: wrap; }
.display .bottom > div { min-width: 0; width: 100%; }
.display .screen-offer { width: min(100%, 900px); max-height: none; overflow: visible; }
.display .order-screen { min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.display .order-screen > section { min-width: 0; min-height: 220px; }
.display .ready-numbers { min-width: 0; }
.display .ready-numbers strong { min-width: 0; }

/* Order cards and their details remain readable at phone widths. */
.orders-columns { min-width: 0; }
.orders-column { min-width: 0; }
.order { min-width: 0; white-space: normal; }
#orderMenu { width: 100%; height: 100dvh; max-width: none; max-height: 100dvh; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); overflow-y: auto; }
#orderMenu .modal-card { width: min(560px, 100%); max-height: none; overflow: visible; }
#orderMenuTitle { font-size: clamp(1.6rem, calc(1.7rem * var(--order-scale, 1)), 3.5rem); }
.order { font-size: clamp(calc(1.5rem * var(--order-scale, 1)), calc(5vw * var(--order-scale, 1)), calc(3rem * var(--order-scale, 1))); }
#orderMenuStatus, #orderMenuActions button { font-size: calc(1.25rem * var(--order-scale, 1)); }
.order-zoom { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.order-zoom button { min-width: 48px; min-height: 44px; padding: 8px 12px; }
.order-zoom span { font-weight: 800; }
.order-zoom-buttons { display: inline-flex; gap: 8px; flex-shrink: 0; }

@media (max-width: 700px) {
 .owner-grid { grid-template-columns: minmax(0, 1fr); }
 .display .order-screen { grid-template-columns: minmax(0, 1fr); }
 .display .order-screen > section { min-height: 200px; }
 .display .bottom { display: block; }
 .display .screen-offer { grid-template-columns: minmax(0, 1fr); }
 .display .screen-offer img { max-height: 180px; object-fit: contain; }
}
@media (max-width: 600px) {
 .orders-columns { grid-template-columns: minmax(0, 1fr); gap: 14px; }
 .orders-column { padding: 12px; }
 .order { min-height: 68px; }
 .operator-shell .top { align-items: flex-start; }
 .operator-shell .top-actions { width: 100%; justify-content: flex-start; }
 .display > .brand { display: flex; flex-wrap: wrap; }
 .display .top-actions { width: 100%; margin-left: 0; }
 .display .screen-clock { margin-left: 0; }
 .display-number strong { font-size: clamp(3rem, 22vw, 8rem) !important; }
 .client-shell .offer, .client-shell .offer:has(.offer-nav:not(.hidden)) { grid-template-columns: minmax(0, 1fr); }
 .client-shell .offer img, .client-shell .offer > div { grid-column: 1; }
 .client-shell .offer img { max-height: 150px; }
 .offer-nav { grid-column: 1; }
 .order-wait-panel .order-major-actions, .order-wait-panel .order-major-actions.split { grid-template-columns: minmax(0, 1fr); }
 .settings-menu, .card-actions, .stats-grid, .data-grid, .theme-grid, .price-library { grid-template-columns: minmax(0, 1fr); }
 .offer-row, .publicidad-row { grid-template-columns: minmax(0, 1fr); }
 .offer-row .wide, .publicidad-row .wide { grid-column: 1; }
}
@media (max-width: 360px) {
 .shell { padding: 10px; }
 .card { border-radius: 18px; padding: 14px; }
 .primary, .secondary { padding: 12px; font-size: 1rem; }
 .brand { font-size: 1rem; }
 .client-shell .ticket { font-size: 2.6rem; }
 .modal-card { padding: 16px; }
}
/* Rules below take precedence over styles injected by the optional order modules. */
body.order-wait-panel .operator-shell { height: auto; min-height: 100dvh; display: block; }
body.order-wait-panel #controls { min-height: 0; padding: clamp(16px, 4vw, 30px); }
body.order-wait-panel .current { font-size: clamp(3rem, 18vw, 9rem); line-height: 1.1; }
body.order-wait-panel .current.named { font-size: clamp(2rem, 8vw, 5rem); }
body.order-wait-panel .order-major-actions > button { min-height: 64px; }
body .display:has(.order-screen:not(.hidden)) { height: auto !important; min-height: 100dvh !important; overflow: visible !important; grid-template-rows: auto minmax(0, 1fr) auto !important; }
body .display:has(.order-screen:not(.hidden)) .screen-offer { max-height: none; overflow: visible; }
.order.named { font-size: clamp(calc(1.05rem * var(--order-scale, 1)), calc(3vw * var(--order-scale, 1)), calc(1.8rem * var(--order-scale, 1))); }
@media (max-width: 600px) {
 body.order-wait-panel .order-major-actions, body.order-wait-panel .order-major-actions.split { grid-template-columns: minmax(0, 1fr); }
 body .display:has(.order-screen:not(.hidden)) .order-screen { grid-template-columns: minmax(0, 1fr); }
}