:root {
  font-family: Inter, ui-rounded, "Segoe UI", system-ui, sans-serif;
  color: #183153;
  background: #f7f4ec;
  font-synthesis: none;
}
:root[data-theme="cercano"] { --tu-bg:#f7f4ec;--tu-surface:#ffffff;--tu-ink:#183153;--tu-primary:#145da0;--tu-accent:#ffd65a;--tu-screen:#173d6b;--tu-offer:#fff7d7;--tu-font:Inter,ui-rounded,"Segoe UI",system-ui,sans-serif; }
:root[data-theme="ferreteria"] { --tu-bg:#f4f1ea;--tu-surface:#fffdf8;--tu-ink:#202833;--tu-primary:#d65a1f;--tu-accent:#ffc857;--tu-screen:#263746;--tu-offer:#fff0d2;--tu-font:Arial,"Segoe UI",sans-serif; }
:root[data-theme="salud"] { --tu-bg:#edf8f6;--tu-surface:#ffffff;--tu-ink:#173d3a;--tu-primary:#168a83;--tu-accent:#a7e8dc;--tu-screen:#125a58;--tu-offer:#dcf7ef;--tu-font:"Trebuchet MS","Segoe UI",sans-serif; }
:root[data-theme="elegante"] { --tu-bg:#f6f0ed;--tu-surface:#fffdfb;--tu-ink:#3c2028;--tu-primary:#7b2942;--tu-accent:#d9b08c;--tu-screen:#421c2b;--tu-offer:#f4e2d2;--tu-font:Georgia,"Times New Roman",serif; }
:root[data-theme="moderno"] { --tu-bg:#f1effb;--tu-surface:#ffffff;--tu-ink:#241f45;--tu-primary:#6551c7;--tu-accent:#68d7e8;--tu-screen:#29204d;--tu-offer:#e9e4ff;--tu-font:"Segoe UI",Arial,sans-serif; }
:root[data-theme="natural"] { --tu-bg:#f1f3e8;--tu-surface:#fffef8;--tu-ink:#30412e;--tu-primary:#527a48;--tu-accent:#d9bd78;--tu-screen:#354b32;--tu-offer:#edf0d3;--tu-font:Verdana,"Segoe UI",sans-serif; }
:root[data-theme="minimal"] { --tu-bg:#f2f2f2;--tu-surface:#ffffff;--tu-ink:#202020;--tu-primary:#353535;--tu-accent:#d8d8d8;--tu-screen:#181818;--tu-offer:#eeeeee;--tu-font:Helvetica,Arial,sans-serif; }
:root[data-theme="energico"] { --tu-bg:#fff2e8;--tu-surface:#ffffff;--tu-ink:#3b1e1a;--tu-primary:#d83b2d;--tu-accent:#ffd23f;--tu-screen:#8f241d;--tu-offer:#fff0bf;--tu-font:"Arial Rounded MT Bold","Trebuchet MS",sans-serif; }
:root[data-theme="premium"] { --tu-bg:#eeeae1;--tu-surface:#fffdf8;--tu-ink:#1d1b18;--tu-primary:#7c6326;--tu-accent:#d6b85c;--tu-screen:#171614;--tu-offer:#f1e8c9;--tu-font:Georgia,"Times New Roman",serif; }
:root[data-theme="alegre"] { --tu-bg:#fff0f5;--tu-surface:#ffffff;--tu-ink:#3f2252;--tu-primary:#8d4caf;--tu-accent:#ff91b8;--tu-screen:#59306f;--tu-offer:#ffe0ec;--tu-font:"Comic Sans MS","Trebuchet MS",sans-serif; }
:root:not([data-theme]) { --tu-bg:#f7f4ec;--tu-surface:#ffffff;--tu-ink:#183153;--tu-primary:#145da0;--tu-accent:#ffd65a;--tu-screen:#173d6b;--tu-offer:#fff7d7;--tu-font:Inter,ui-rounded,"Segoe UI",system-ui,sans-serif; }
body { background:var(--tu-bg) !important;color:var(--tu-ink);font-family:var(--tu-font) !important; }
.card,.stat,.chart { background:var(--tu-surface) !important; }
.primary,.filters button.active { background:var(--tu-primary) !important; }
.ticket,.price,.stat strong,.back-link,.link { color:var(--tu-primary) !important; }
.brand-mark { background:var(--tu-accent) !important;color:var(--tu-screen) !important; }
.offer,.screen-offer { background:var(--tu-offer) !important; }
.display { background:var(--tu-screen) !important;color:white !important; }
.display-number strong,.screen-clock { color:var(--tu-accent) !important; }
.bar { background:var(--tu-primary) !important; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: #f7f4ec; }
button, input { font: inherit; }
button { cursor: pointer; }
.client-page button { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.shell { width: min(760px, 100%); margin: auto; padding: 24px; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; font-weight: 900; }
.brand-logo { width: 54px; height: 54px; border-radius: 14px; object-fit: contain; background: white; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px; margin: -8px; gap: 7px; color: #145da0; font-weight: 850; text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: rgba(20,93,160,.16); }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: #ffd65a; color: #173d6b; font-size: 1.35rem; }
.card { margin-top: 24px; padding: clamp(22px, 5vw, 38px); border-radius: 28px; background: #fff; box-shadow: 0 16px 50px rgba(24,49,83,.1); }
.muted { color: #637083; }
.eyebrow { margin: 0 0 8px; color: #61738a; font-weight: 850; text-transform: uppercase; letter-spacing: .09em; }
h1, h2, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: clamp(2rem, 9vw, 4.4rem); line-height: 1; letter-spacing: -.04em; }
.ticket { margin: 22px 0 8px; color: #145da0; font-size: clamp(4.5rem, 24vw, 9rem); font-weight: 950; line-height: .9; letter-spacing: -.05em; }
.big-message { margin: 14px 0 0; font-size: clamp(1.4rem, 6vw, 2.2rem); font-weight: 900; }
.primary { width: 100%; border: 0; border-radius: 18px; padding: 18px 22px; background: #145da0; color: white; font-weight: 900; font-size: 1.2rem; box-shadow: 0 8px 20px rgba(20,93,160,.2); }
.primary:active { transform: translateY(1px); }
.secondary { border: 2px solid #c8d4df; border-radius: 16px; padding: 14px 18px; background: white; color: #183153; font-weight: 850; }
.danger { border-color: #efb2ae; color: #a72d26; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 9px 13px; border-radius: 999px; background: #e8f2fb; color: #145da0; font-weight: 800; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #c13a31; }
.connected .dot { background: #1e9b5b; }
.offer { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; margin-top: 22px; padding: 14px; border-radius: 22px; background: #fff7d7; }
.offer img { width: 112px; height: 88px; border-radius: 15px; object-fit: cover; background: #e9e4d7; }
.offer h2, .offer p { margin: 0; }
.offer .price { margin-top: 6px; color: #145da0; font-size: 1.25rem; font-weight: 950; }
.hidden { display: none !important; }
.whatsapp-box { display:grid;gap:12px;margin-top:14px;padding:18px;border:2px solid #b9e7ca;border-radius:20px;background:#f0fbf4; }
.whatsapp-box h2,.whatsapp-box p { margin:0; }
.whatsapp-box select { padding:11px;border:2px solid #c8d4df;border-radius:12px;background:white; }
.consent { display:flex;align-items:flex-start;gap:9px;font-size:.9rem; }
.modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(8,24,42,.64); z-index: 10; }
.modal-card { width: min(460px, 100%); padding: 28px; border-radius: 26px; background: white; text-align: center; }
.modal-card h2 { margin-top: 0; }
.hold { position: relative; overflow: hidden; width: 100%; border: 0; border-radius: 17px; padding: 17px; background: #a72d26; color: white; font-weight: 900; touch-action: none; }
.hold::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--progress, 0%); background: rgba(255,255,255,.22); }
.modal-actions { display: grid; gap: 10px; margin-top: 18px; }
@media (max-width: 560px) { .actions { grid-template-columns: 1fr; } .offer { grid-template-columns: 86px 1fr; } .offer img { width: 86px; height: 76px; } }

/* Vistas operativas ajustadas al alto disponible. */
.client-page, .operator-page { height: 100vh; height: 100dvh; overflow: hidden; }
.client-shell { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(8px, 1.8vh, 18px); padding: clamp(10px, 2.2vh, 24px); }
.client-shell .card { min-height: 0; margin: 0; padding: clamp(14px, 3vh, 30px); display: flex; flex-direction: column; justify-content: center; }
.client-shell .brand { min-height: 42px; }
.client-shell .brand-logo { width: clamp(40px, 7vh, 54px); height: clamp(40px, 7vh, 54px); }
.client-shell .ticket { margin: clamp(6px, 1.5vh, 18px) 0; font-size: clamp(3.4rem, 17vh, 8rem); }
.client-shell .big-message { margin-top: clamp(5px, 1vh, 12px); font-size: clamp(1.2rem, 4vh, 2.2rem); }
.client-shell .actions { margin-top: clamp(8px, 1.7vh, 20px); }
.client-shell .secondary { padding: clamp(9px, 1.7vh, 14px) 14px; }
.client-shell .status-pill { margin-top: clamp(7px, 1.4vh, 16px); padding: 7px 11px; align-self: flex-start; }
.client-shell .offer { min-height: 0; max-height: 24vh; margin: 0; padding: clamp(8px, 1.5vh, 14px); grid-template-columns: clamp(68px, 14vw, 112px) 1fr; gap: clamp(10px, 2vw, 18px); overflow: hidden; }
.client-shell .offer img { width: clamp(68px, 14vw, 112px); height: clamp(58px, 12vh, 88px); object-fit: contain; }
.client-shell .offer h2 { font-size: clamp(1rem, 2.8vh, 1.5rem); }
.client-shell .offer p { font-size: clamp(.82rem, 2.2vh, 1rem); }
.client-shell .offer .price { font-size: clamp(1rem, 2.7vh, 1.25rem); }
.operator-shell { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: clamp(8px, 2vh, 18px); padding: clamp(12px, 2.5vh, 24px); }
.operator-shell > p { margin: 0; }
.operator-shell .card { min-height: 0; margin: 0; padding: clamp(18px, 4vh, 38px); align-self: stretch; }
.operator-shell #controls { position: relative; }
.operator-shell .operator { display: flex; flex-direction: column; justify-content: center; }
.operator-shell .current { font-size: clamp(4rem, 25vh, 11rem); }
@media (max-height: 650px) {
  .client-shell .eyebrow { margin-bottom: 2px; font-size: .72rem; }
  .client-shell #alerts { padding: 8px 12px; }
  .client-shell .actions { grid-template-columns: 1fr 1fr; }
  .client-shell .muted { margin: 5px 0; }
  .client-shell .offer { max-height: 21vh; }
}
.display { height: 100vh !important; height: 100dvh !important; min-height: 0 !important; grid-template-rows: auto minmax(0, 1fr) auto !important; overflow: hidden; }
.display-number { min-height: 0; overflow: hidden; }
.display-number strong { font-size: min(28vw, 29vh) !important; }
.display .brand { min-height: 42px; }
.display .brand-logo { width:clamp(48px,6vw,82px);height:clamp(48px,6vw,82px);border-radius:16px; }
.display .screen-clock { margin-left:auto; color:#ffd65a; font-size:clamp(1.5rem,3.5vw,2.8rem); font-weight:950; font-variant-numeric:tabular-nums; }
.display .top-actions { margin-left:0; }
.display .next-number { margin-top:clamp(4px,1vh,10px); font-size:clamp(1rem,2.5vh,1.6rem); opacity:.9; }
.display .bottom { min-height: 0; }
.display .screen-offer { width: min(900px, 72vw); max-width: none; max-height: 29vh; overflow: hidden; padding: clamp(12px, 2vh, 22px) clamp(16px, 2.5vw, 30px); grid-template-columns: clamp(120px, 16vw, 210px) 1fr; }
.display .screen-offer img { width: clamp(120px, 16vw, 210px); height: clamp(85px, 16vh, 150px); object-fit: contain; }
.display .screen-offer h2 { font-size: clamp(1.35rem, 3.5vh, 2.2rem); }
.display .screen-offer p { font-size: clamp(1rem, 2.5vh, 1.35rem); }
.display .screen-offer .price { font-size: clamp(1.5rem, 3.8vh, 2.35rem); }

/* El contenido puede crecer con nombres largos, zoom o teclado abierto. */
.shell *, .display * { min-width: 0; }
button, a, label, strong, span, h3 { overflow-wrap: anywhere; }
button, input, select, textarea, img, svg { max-width: 100%; }
.brand, .top, .top-actions, .minor-actions, .owner-head, .business-top, .filters { flex-wrap: wrap; }
.brand-mark, .brand-logo, .dot, input[type="checkbox"] { flex-shrink: 0; }
.brand > span:not(.brand-mark) { min-width: 0; }
.modal { overflow-y: auto; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.modal .modal-card { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.client-page, .operator-page { height: auto; overflow: auto; }
.client-shell, .operator-shell { height: auto; min-height: 100dvh; grid-template-rows: auto; grid-auto-rows: auto; align-content: start; }
.client-shell .card, .operator-shell .card { min-height: min-content; }
.client-shell .offer { max-height: none; overflow: visible; }
.ticket, .current, #calledNumber { overflow-wrap: anywhere; line-height: 1.1; }
.operator-shell .current.named { font-size: clamp(2rem, 9vw, 5rem); line-height: 1.15; }
.display { height: auto !important; min-height: 100dvh !important; grid-template-rows: auto minmax(min-content, 1fr) auto !important; overflow: auto; }
.display .display-number { overflow: visible; }
.display .display-number strong { overflow-wrap: anywhere; line-height: 1.1; }
.display .display-number strong.named { font-size: min(12vw, 16vh) !important; line-height: 1.15; }
.display .screen-offer { max-width: 100%; max-height: none; overflow: visible; }
.display .screen-offer:has(img.hidden) { grid-template-columns: minmax(0, 1fr); }
.shell .station-row { flex-wrap: wrap; }
.shell .station-row input { flex-basis: 140px; }
@media (max-width: 560px) {
  .shell .offer-row, .shell .data-grid { grid-template-columns: minmax(0, 1fr); }
  .shell .price-library, .shell .theme-grid { grid-template-columns: minmax(0, 1fr); }
  .display .screen-offer { width: 100%; grid-template-columns: minmax(0, 1fr); }
  .display .screen-offer img { width: 100%; }
  .shell .pin-row input { min-width: 0; width: 100%; flex-basis: 100%; }
}