/* =====================================================================================================
   PIEZA COMÚN · estilos (los mismos en todas las demos). Cada demo da sus colores y letras con las variables
   --pc-* en su propio :root (después de cargar este archivo), y así el panel, el plano, el código, los encargos
   y la ficha «Demo» salen con su paleta. Todo va dentro de <div class="pc"> para no tocar el diseño de la demo.
   ===================================================================================================== */
:root {
  --pc-paper: #f3eee2; --pc-paper-2: #e8e1cf; --pc-ink: #2a3122; --pc-ink-soft: #626553;
  --pc-accent: #3e4a2c; --pc-accent-2: #56653f; --pc-gold: #b8923a; --pc-gold-hi: #f0d48e; --pc-gold-lo: #6f5218;
  --pc-line: #d8d0b9; --pc-error: #9a3324;
  --pc-f-script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  --pc-f-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --pc-f-sans: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
/* the plan and the client's switches hide what is not included */
body[data-plan="esencial"] [data-plan-min="completa"], body[data-plan="esencial"] [data-plan-min="premium"], body[data-plan="completa"] [data-plan-min="premium"] { display: none !important; }
[data-feature-off] { display: none !important; }
.panel-open { overflow: hidden; }

/* base of the shared screens (the same rules demo 1 has for the whole page) */
.pc, .pc * { box-sizing: border-box; }
.pc .panel, .pc .enc-sheet, .pc .seat-sheet, .pc .gate, .pc .demo-sheet { font-family: var(--pc-f-serif); font-size: 1.15rem; line-height: 1.55; color: var(--pc-ink); text-align: left; -webkit-font-smoothing: antialiased; }
.pc .gate { text-align: center; }
.pc h2, .pc h3 { text-wrap: balance; margin: 0; font-weight: 500; }
.pc p { margin: 0; }
.pc :focus-visible { outline: 2px solid var(--pc-gold); outline-offset: 3px; }
.pc [hidden] { display: none !important; }
.pc .pc-contents { display: contents; }
.pc form { display: flex; flex-direction: column; gap: 1.1rem; }
.pc label, .pc legend { font-family: var(--pc-f-sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pc-ink-soft); }
.pc label { display: inline; margin: 0; font-weight: 400; line-height: inherit; } /* the demo's own form labels must not leak in */
.pc input[type="text"], .pc select, .pc textarea { width: 100%; font: inherit; font-size: 1.15rem; color: var(--pc-ink); background: var(--pc-paper); border: 1px solid var(--pc-line); border-radius: 4px; padding: .6rem .75rem; min-height: 48px; }
.pc textarea { resize: vertical; }
.pc input::placeholder, .pc textarea::placeholder { color: #9a9a86; font-style: italic; }
.pc fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.pc .seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.pc .seg input { position: absolute; opacity: 0; pointer-events: none; }
.pc .seg label { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: .5rem; border: 1px solid var(--pc-line); border-radius: 4px; cursor: pointer; font-family: var(--pc-f-serif); font-size: 1.1rem; letter-spacing: 0; text-transform: none; color: var(--pc-ink); background: var(--pc-paper); }
.pc .seg input:checked + label { border-color: var(--pc-accent); background: var(--pc-accent); color: var(--pc-paper); }
.pc .seg input:focus-visible + label { outline: 2px solid var(--pc-gold); outline-offset: 2px; }
.pc .err { color: var(--pc-error); font-family: var(--pc-f-sans); font-size: .9rem; }
.pc .demo-note { font-family: var(--pc-f-sans); font-size: .78rem; color: var(--pc-ink-soft); line-height: 1.45; }
.pc .btn { appearance: none; border: 0; cursor: pointer; text-decoration: none; text-align: center; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .75rem 1.4rem; border-radius: 999px; font-family: var(--pc-f-sans); font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; background: var(--pc-accent); color: var(--pc-paper); box-shadow: 0 6px 16px rgba(42, 49, 34, .22); font-weight: 400; line-height: inherit; }
.pc .btn:hover { background: var(--pc-ink); }
.pc .btn-ghost { appearance: none; background: none; border: 1px solid var(--pc-line); border-radius: 999px; cursor: pointer; min-height: 44px; padding: .5rem 1.1rem; font-family: var(--pc-f-sans); font-size: .82rem; letter-spacing: .1em; color: var(--pc-ink); }
.pc button { text-shadow: none; }

.pc .panel { position: fixed; inset: 0; z-index: 70; overflow-y: auto; background: var(--pc-paper); padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px); }
.pc .panel-in { max-width: 60rem; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 1.5rem 5rem; display: flex; flex-direction: column; gap: 1.2rem; font-family: var(--pc-f-sans); font-size: .95rem; }
.pc .panel-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.pc .eyebrow-ink { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--pc-ink-soft); }
.pc .panel-title { font-family: var(--pc-f-script); font-size: 2.6rem; font-weight: 400; line-height: 1.1; }
.pc .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; }
.pc .kpi { background: #fffdf7; border: 1px solid var(--pc-line); border-radius: 6px; padding: .9rem; display: flex; flex-direction: column; gap: .1rem; }
.pc .kpi-n { font-family: var(--pc-f-serif); font-size: 2.2rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums lining-nums; color: var(--pc-accent); }
.pc .kpi-l { font-size: .78rem; color: var(--pc-ink-soft); }
.pc .panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem; }
.pc .pbox { background: #fffdf7; border: 1px solid var(--pc-line); border-radius: 6px; padding: 1rem; min-width: 0; display: flex; flex-direction: column; gap: .6rem; }
.pc .pbox h3 { font-family: var(--pc-f-sans); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--pc-accent); font-weight: 500; }
.pc .pbox-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pc .plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.pc .plist li { display: flex; justify-content: space-between; gap: .6rem; border-bottom: 1px dashed var(--pc-line); padding-bottom: .3rem; }
.pc .plist li b { font-variant-numeric: tabular-nums; }
.pc .plist .empty { color: var(--pc-ink-soft); border: 0; }
.pc .ptable-wrap { overflow-x: auto; }
.pc .ptable { border-collapse: collapse; width: 100%; min-width: 46rem; font-size: .85rem; }
.pc .ptable th, .pc .ptable td { text-align: left; padding: .5rem .45rem; border-bottom: 1px solid var(--pc-line); vertical-align: top; }
.pc .ptable th { font-weight: 500; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pc-ink-soft); }
.pc .tag { display: inline-block; border-radius: 999px; padding: .05rem .5rem; font-size: .72rem; }
.pc .tag.y { background: #e3ead5; color: var(--pc-accent); } .tag.n { background: #f1dfd8; color: var(--pc-error); }

.pc .demo-fab { position: fixed; z-index: 80; left: calc(16px + env(safe-area-inset-left, 0px)); bottom: var(--pc-fab-bottom, calc(16px + env(safe-area-inset-bottom, 0px))); min-height: 48px; padding: 0 1.1rem; border-radius: 999px; border: 0; cursor: pointer; background: var(--pc-ink); color: var(--pc-paper); font-family: var(--pc-f-sans); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 6px 16px rgba(13, 12, 9, .3); }
body.locked .pc .demo-fab { display: none; }
.pc .demo-sheet { position: fixed; z-index: 81; left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); bottom: var(--pc-sheet-bottom, calc(76px + env(safe-area-inset-bottom, 0px))); max-width: 24rem; max-height: 75vh; overflow-y: auto; background: #fffdf7; border: 1px solid var(--pc-line); border-radius: 10px; padding: 1rem; box-shadow: 0 18px 40px rgba(13, 12, 9, .3); font-family: var(--pc-f-sans); font-size: .9rem; display: flex; flex-direction: column; gap: .55rem; }
.pc .demo-sheet[hidden] { display: none; }
.pc .ds-head { display: flex; justify-content: space-between; align-items: center; }
.pc .ds-title { font-weight: 500; letter-spacing: .06em; }
.pc .ds-x { appearance: none; border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--pc-ink-soft); min-width: 40px; min-height: 40px; }
.pc .ds-label { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--pc-ink-soft); margin-top: .3rem; }
.pc .ds-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.pc .ds-seg button, .pc .ds-btn, .pc .ds-mini { appearance: none; cursor: pointer; border: 1px solid var(--pc-line); background: var(--pc-paper); color: var(--pc-ink); border-radius: 6px; min-height: 42px; padding: .3rem .6rem; font-family: var(--pc-f-sans); font-size: .85rem; }
.pc .ds-seg button[aria-pressed="true"] { background: var(--pc-accent); border-color: var(--pc-accent); color: var(--pc-paper); }
.pc .ds-btn { background: var(--pc-ink); color: var(--pc-paper); border-color: var(--pc-ink); }
.pc .ds-hint { font-size: .78rem; color: var(--pc-ink-soft); line-height: 1.4; }
.pc .ds-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.pc .ds-row input[type="text"] { flex: 1 1 8rem; min-width: 0; min-height: 42px; font-size: .95rem; }
.pc .ds-file { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px dashed var(--pc-gold); border-radius: 6px; cursor: pointer; text-align: center; padding: .4rem; }
.pc .ds-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.pc #song-start { width: 100%; accent-color: var(--pc-accent); }
.pc .ds-songs { display: flex; flex-direction: column; gap: .35rem; }
.pc .ds-group { margin: .55rem 0 0; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.pc .ds-song[aria-pressed="true"] { background: var(--pc-accent); color: var(--pc-paper); border-color: var(--pc-accent); }
.panel-open { overflow: hidden; }
/* Vuestros encargos: song and film forms */
.pc .enc-cards { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.pc .enc-card { border: 1px solid var(--pc-line); border-radius: 6px; padding: .9rem; background: var(--pc-paper); display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.pc .enc-card h4 { font-family: var(--pc-f-serif); font-size: 1.35rem; font-weight: 600; margin: 0; color: var(--pc-accent); }
.pc .enc-card p { margin: 0; }
.pc .enc-badge { align-self: flex-start; font-family: var(--pc-f-sans); font-size: .72rem; letter-spacing: .08em; padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--pc-gold); color: var(--pc-ink); background: #fff8e8; }
.pc .enc-badge.lock { border-color: var(--pc-line); background: none; color: var(--pc-ink-soft); }
.pc .enc-state { font-family: var(--pc-f-sans); font-size: .92rem; color: var(--pc-ink); line-height: 1.4; }
.pc .enc-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.pc .enc-card audio, .pc .enc-card video { width: 100%; border-radius: 4px; }
.pc .enc-card textarea { min-height: 90px; font-size: 1.05rem; }
.pc .enc-sheet { position: fixed; inset: 0; z-index: 95; background: var(--pc-paper); display: flex; flex-direction: column; font-family: var(--pc-f-sans); }
.pc .enc-top { display: flex; align-items: center; gap: .5rem; padding: max(.6rem, env(safe-area-inset-top, 0px)) 16px .6rem; border-bottom: 1px solid var(--pc-line); background: #fffdf7; }
.pc .enc-top b { flex: 1; font-family: var(--pc-f-serif); font-size: 1.35rem; font-weight: 600; color: var(--pc-accent); min-width: 0; }
.pc .enc-langs { display: flex; gap: .15rem; }
.pc .enc-langs button { appearance: none; border: 1px solid var(--pc-line); background: none; border-radius: 999px; min-width: 40px; min-height: 36px; font-family: var(--pc-f-sans); font-size: .78rem; letter-spacing: .08em; cursor: pointer; color: var(--pc-ink); }
.pc .enc-langs button[aria-pressed="true"] { background: var(--pc-accent); color: var(--pc-paper); border-color: var(--pc-accent); }
.pc .enc-body { flex: 1; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.pc .enc-in { max-width: 44rem; margin: 0 auto; padding: 1rem 16px 2.5rem; display: flex; flex-direction: column; gap: 1.4rem; }
.pc .enc-sec { display: flex; flex-direction: column; gap: .55rem; }
.pc .enc-sec > h3 { margin: 0; font-family: var(--pc-f-sans); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--pc-ink-soft); font-weight: 500; }
.pc .enc-sec label.q { font-family: var(--pc-f-serif); font-size: 1.12rem; color: var(--pc-ink); text-transform: none; letter-spacing: normal; margin-top: .3rem; }
.pc .enc-help { font-size: .86rem; color: var(--pc-ink-soft); line-height: 1.45; margin: 0; }
.pc .enc-in textarea { min-height: 110px; }
.pc .enc-in .seg.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pc .enc-in .seg.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .pc .enc-in .seg.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }  }
.pc .enc-in .seg label { font-size: 1.02rem; }
.pc .enc-miss { outline: 2px solid var(--pc-error); outline-offset: 4px; border-radius: 4px; }
.pc .enc-foot { border-top: 1px solid var(--pc-line); padding: .6rem 16px max(.6rem, env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: flex-end; background: #fffdf7; }
.pc .enc-foot .enc-msg { flex: 1 1 100%; font-size: .86rem; color: var(--pc-ink-soft); min-height: 1.2em; }
.pc .enc-foot .enc-msg.err { color: var(--pc-error); }
.pc .enc-foot .btn { min-height: 46px; padding: .6rem 1.3rem; }
.pc .enc-prot { border: 1px solid var(--pc-line); border-radius: 6px; padding: .8rem; background: #fffdf7; display: flex; flex-direction: column; gap: .5rem; }
.pc .enc-prot .seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pc .enc-prot .seg label { font-size: .9rem; min-height: 42px; padding: .3rem; }
.pc .enc-photos { display: flex; flex-wrap: wrap; gap: .45rem; }
.pc .enc-ph { position: relative; width: 74px; height: 74px; border-radius: 4px; overflow: hidden; border: 1px solid var(--pc-line); }
.pc .enc-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc .enc-ph button { position: absolute; top: 2px; right: 2px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(42, 49, 34, .75); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; }
.pc .enc-file { position: relative; overflow: hidden; display: inline-flex; align-items: center; }
.pc .enc-file { text-transform: none; }
.pc .enc-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.pc .enc-tips { font-size: .86rem; line-height: 1.45; margin: 0; padding: .6rem .75rem; border-radius: 4px; background: #f6f1e3; color: var(--pc-ink); }
.pc .enc-check { display: flex; gap: .6rem; align-items: flex-start; font-family: var(--pc-f-serif); font-size: 1.08rem; line-height: 1.45; cursor: pointer; text-transform: none; letter-spacing: normal; color: var(--pc-ink); }
.pc .enc-check input { width: 22px; height: 22px; margin-top: .1rem; flex: none; accent-color: var(--pc-accent); }
.pc .enc-rec { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pc .enc-rec audio { max-width: 100%; }
.pc .enc-ro .enc-in { opacity: .9; }
.pc .room { max-height: 78vh; }
.pc .tbl.zone { border: 2px dashed var(--pc-gold); background: rgba(184, 146, 58, .10); box-shadow: none; border-radius: 4px; }
.pc .tbl.zone b { font-weight: 500; }
.pc .area-box { position: absolute; border: 2px dashed rgba(86, 101, 63, .7); background: rgba(86, 101, 63, .05); pointer-events: none; z-index: 1; border-radius: 2px; }
.pc .tbl.mini b { font-size: .62rem; padding: 0; overflow: visible; }
.pc .tbl.close { outline: 3px dashed #d0802b; outline-offset: 3px; }
.pc .seat-form { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; font-family: var(--pc-f-sans); font-size: .92rem; padding: .7rem; border: 1px solid var(--pc-line); border-radius: 10px; background: #fffdf7; margin: .5rem 0; }
.pc .seat-form input[type=number] { width: 5.4rem; min-height: 42px; font-size: 1rem; }
.pc .seat-form .btn-ghost { min-height: 40px; }
.pc .seat-form p { margin: 0; flex-basis: 100%; }
.pc .seat-scale-t { font-family: var(--pc-f-sans); font-size: .86rem; color: var(--pc-ink-soft); margin: .3rem 0; }
.pc .seat-warn { font-family: var(--pc-f-sans); font-size: .86rem; color: #9a5a12; margin: .3rem 0; }
.pc .cal-dot { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #c9533b; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); z-index: 6; pointer-events: none; }
.pc svg.cal-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.panel-open .pc .demo-fab, .panel-open .pc .demo-sheet { display: none; }
/* private invitation: the code is asked before the envelope */
.pc .gate { position: fixed; inset: 0; z-index: var(--pc-z-gate, 58); display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 35%, #fbf8f0 0%, #efe8d6 70%, #e6dcc4 100%); }
.pc .gate[hidden] { display: none; }
.pc .gate-card { width: min(100%, 22rem); text-align: center; background: #fffdf7; border: 1px solid rgba(184, 146, 58, .5); outline: 1px solid rgba(184, 146, 58, .25); outline-offset: -7px; border-radius: 4px; padding: 2rem 1.4rem 1.6rem; box-shadow: 0 18px 40px rgba(42, 49, 34, .16); }
.pc .gate-k { font-family: var(--pc-f-sans); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--pc-gold-lo); }
.pc .gate-t { margin: .5rem 0 .4rem; font-family: var(--pc-f-script); font-weight: 400; font-size: 2.6rem; line-height: 1.1; color: var(--pc-ink); }
.pc .gate-x { color: var(--pc-ink-soft); font-style: italic; margin-bottom: 1.1rem; }
.pc .gate form { display: flex; gap: .5rem; flex-direction: row; }
.pc .gate input { flex: 1; min-width: 0; text-align: center; letter-spacing: .3em; font-family: var(--pc-f-sans); font-size: 1.2rem; }
.pc .gate button { appearance: none; border: 0; border-radius: 999px; padding: 0 1.2rem; min-height: 48px; background: var(--pc-accent); color: var(--pc-paper); font-family: var(--pc-f-sans); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.pc .gate-err { margin-top: .8rem; color: var(--pc-error); font-family: var(--pc-f-sans); font-size: .9rem; }
.pc .gate-card.shake { animation: shake .4s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
/* panel: e-mail notices */
.pc .mail-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.pc .mail-row input[type="email"] { flex: 1 1 12rem; min-width: 0; min-height: 44px; font-size: 1rem; }
.pc .switch { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; font-family: var(--pc-f-sans); font-size: .9rem; }
.pc .switch input { width: 20px; height: 20px; accent-color: var(--pc-accent); }
.pc .mail-prev { border: 1px solid var(--pc-line); border-radius: 8px; background: #fff; font-family: var(--pc-f-sans); font-size: .88rem; overflow: hidden; }
.pc .mail-prev .mh { padding: .6rem .8rem; background: var(--pc-paper); border-bottom: 1px solid var(--pc-line); color: var(--pc-ink-soft); line-height: 1.5; }
.pc .mail-prev .mh b { color: var(--pc-ink); font-weight: 500; }
.pc .mail-prev .mb { padding: .8rem; line-height: 1.55; color: var(--pc-ink); }
.pc .mail-prev .mb p + p { margin-top: .4rem; }
.pc .pbox-btns { display: flex; gap: .4rem; flex-wrap: wrap; }
/* ===== seating plan (one shared piece, switched on per invitation) ===== */
[data-feature-off] { display: none !important; }
.pc .seat-tools { display: flex; flex-wrap: wrap; gap: .4rem; }
.pc .seat-tools .btn-ghost { min-height: 40px; padding: .35rem .8rem; font-size: .8rem; }
.pc .seat-file { position: relative; overflow: hidden; display: inline-flex; align-items: center; }
.pc .seat-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.pc .seat-tabs { display: inline-flex; border: 1px solid var(--pc-line); border-radius: 999px; padding: 2px; background: var(--pc-paper); }
.pc .seat-tabs button { appearance: none; border: 0; background: none; border-radius: 999px; padding: .4rem .9rem; font-family: var(--pc-f-sans); font-size: .82rem; cursor: pointer; color: var(--pc-ink); }
.pc .seat-tabs button[aria-pressed="true"] { background: var(--pc-accent); color: var(--pc-paper); }
.pc .room { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; overflow: auto; background: #fbf8f0; border: 1px solid var(--pc-line); touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; }
.pc .room-in { position: relative; width: 100%; aspect-ratio: 4 / 3; transform-origin: 0 0;
  background-image: linear-gradient(rgba(62, 74, 44, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(62, 74, 44, .06) 1px, transparent 1px); background-size: 24px 24px; }
.pc .room.ro { touch-action: pan-y; overflow: hidden; }
.pc .tbl { touch-action: none; }
.pc .zoom-ctl { display: inline-flex; gap: .3rem; align-items: center; font-family: var(--pc-f-sans); font-size: .82rem; color: var(--pc-ink-soft); }
.pc .zoom-ctl button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--pc-line); background: var(--pc-paper); font-size: 1.1rem; cursor: pointer; color: var(--pc-ink); }
.pc .ss-filter { display: flex; gap: .4rem; flex-wrap: wrap; }
.pc .ss-filter input { flex: 1 1 9rem; min-width: 0; min-height: 42px; font-size: 1rem; }
.pc .ss-filter select { min-height: 42px; }
.pc .grp { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; padding: .35rem; border: 1px dashed var(--pc-line); border-radius: 10px; }
.pc .chip.all { background: #efe6cf; border-color: var(--pc-gold); font-weight: 500; }
.pc .seat-msg { font-family: var(--pc-f-sans); font-size: .88rem; color: var(--pc-accent); }
.pc .room-in > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; pointer-events: none; }
.pc .tbl { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; text-align: center; cursor: grab; font-family: var(--pc-f-sans); color: var(--pc-ink);
  background: #fffdf7; border: 2px solid var(--pc-accent-2); box-shadow: 0 4px 10px rgba(42, 49, 34, .16); line-height: 1.1; padding: 2px; }
.pc .tbl.round { border-radius: 50%; }
.pc .tbl.rot span { writing-mode: vertical-rl; }
.pc .tbl.rect { border-radius: 6px; }
.pc .tbl.head { border-radius: 6px; border-color: var(--pc-gold); background: #fff8e8; }
.pc .tbl.drag { cursor: grabbing; box-shadow: 0 10px 22px rgba(42, 49, 34, .28); z-index: 3; }
.pc .tbl.over { border-color: var(--pc-error); }
.pc .tbl.hi { border-color: var(--pc-gold); background: #fff3d1; box-shadow: 0 0 0 6px rgba(184, 146, 58, .35), 0 6px 14px rgba(42, 49, 34, .2); z-index: 2; }
.pc .tbl b { display: block; font-weight: 500; font-size: clamp(.55rem, 2.3vw, .78rem); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 3px; }
.pc .tbl small { font-size: clamp(.5rem, 2vw, .68rem); color: var(--pc-ink-soft); }
.pc .tbl.over small { color: var(--pc-error); font-weight: 600; }
.pc .seat-dot { position: absolute; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #e7e1cf; border: 1px solid rgba(62, 74, 44, .3); transform: translate(-50%, -50%); }
.pc .seat-dot.on { background: var(--pc-accent-2); border-color: var(--pc-accent); }
.pc .seat-dot.al { background: #c9533b; border-color: #8f3322; }
.pc .seat-sum { font-family: var(--pc-f-sans); font-size: .85rem; color: var(--pc-ink-soft); }
.pc .seat-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; }
.pc .seat-list .st { border: 1px solid var(--pc-line); border-radius: 6px; padding: .7rem .8rem; background: #fffdf7; }
.pc .seat-list .st h4 { margin: 0 0 .35rem; font-family: var(--pc-f-sans); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pc-accent); font-weight: 500; }
.pc .seat-list .st li { list-style: none; font-size: .92rem; padding: .15rem 0; border-bottom: 1px dashed var(--pc-line); }
.pc .seat-list .st ul { margin: 0; padding: 0; }
.pc .al-tag { display: inline-block; margin-left: .3rem; padding: 0 .4rem; border-radius: 999px; background: #f6dcd5; color: #8f3322; font-size: .72rem; }
.pc .seat-sheet { position: fixed; z-index: 76; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto; background: #fffdf7; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 34px rgba(13, 12, 9, .3);
  padding: 1rem max(16px, env(safe-area-inset-left, 0px)) calc(1rem + env(safe-area-inset-bottom, 0px)); font-family: var(--pc-f-sans); font-size: .92rem; display: flex; flex-direction: column; gap: .7rem; max-width: 40rem; margin: 0 auto; }
.pc .seat-sheet[hidden] { display: none; }
.pc .seat-sheet .row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.pc .seat-sheet input[type="text"] { flex: 1 1 10rem; min-width: 0; min-height: 44px; font-size: 1rem; }
.pc .seat-sheet select { min-height: 44px; font-size: .95rem; width: auto; }
.pc .chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.pc .chip { appearance: none; border: 1px solid var(--pc-line); background: var(--pc-paper); border-radius: 999px; padding: .45rem .75rem; font-family: var(--pc-f-sans); font-size: .88rem; color: var(--pc-ink); cursor: pointer; min-height: 38px; }
.pc .chip.in { background: var(--pc-accent); color: var(--pc-paper); border-color: var(--pc-accent); }
.pc .chip.dim { opacity: .45; }
.pc .seat-shade { position: fixed; inset: 0; z-index: 75; background: rgba(13, 12, 9, .35); }
.pc .seat-shade[hidden] { display: none; }
/* guests: which table am I at? */
.pc .mytable { display: flex; flex-direction: column; gap: .8rem; }
.pc .mytable form { display: flex; gap: .5rem; }
.pc .mytable input { flex: 1; min-width: 0; }
.pc .mytable .res { text-align: center; display: flex; flex-direction: column; gap: .6rem; }
.pc .mytable .res .tname { font-family: var(--pc-f-script); font-size: 2.4rem; line-height: 1.1; color: var(--pc-accent); }
.pc .mytable .res .with { color: var(--pc-ink-soft); font-style: italic; }
/* ---------- the RSVP questions inside each demo's own card. Zero-weight rules (:where): whatever the demo already
   says about its labels, boxes and buttons wins; this only fills in what the demo does not style ---------- */
:where(.pc-campos) { display: contents; }
:where(.pc-campos .field) { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
:where(.pc-campos fieldset) { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
:where(.pc-campos input[type="text"], .pc-campos select, .pc-campos textarea) { width: 100%; max-width: 100%; font: inherit; min-height: 46px; padding: .55rem .7rem; border: 1px solid var(--pc-line); border-radius: 4px; background: rgba(255, 255, 255, .7); color: var(--pc-ink); box-sizing: border-box; }
:where(.pc-campos .seg) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
:where(.pc-campos .seg input) { position: absolute; opacity: 0; pointer-events: none; }
:where(.pc-campos .seg label) { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 46px; padding: .4rem; border: 1px solid var(--pc-line); border-radius: 4px; cursor: pointer; background: rgba(255, 255, 255, .7); color: var(--pc-ink); text-transform: none; letter-spacing: 0; }
:where(.pc-campos .seg input:checked + label) { border-color: var(--pc-accent); background: var(--pc-accent); color: #fff; }
:where(.pc-campos .seg input:focus-visible + label) { outline: 2px solid var(--pc-gold); outline-offset: 2px; }
:where(.pc-campos .yes-part) { display: flex; flex-direction: column; gap: .9rem; }
:where(.pc-campos .people) { display: flex; flex-direction: column; gap: .7rem; }
:where(.pc-campos .person) { border: 1px solid var(--pc-line); border-radius: 6px; padding: .8rem; display: flex; flex-direction: column; gap: .6rem; background: rgba(255, 255, 255, .45); }
.pc-campos .person-h { margin: 0; font-family: var(--pc-f-sans); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pc-gold-lo); }
:where(.pc-campos .diet-seg) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
:where(.pc-campos .diet-seg label) { font-size: .92rem; min-height: 44px; }
:where(.pc-campos [hidden]) { display: none !important; }

/* ♪1 ♪2 ♪3 for the demos that take the shared bar (only near the top, like the others) */
.pc .pc-songs { position: fixed; z-index: 66; right: var(--pc-songs-right, calc(70px + env(safe-area-inset-right, 0px))); bottom: var(--pc-songs-bottom, calc(max(16px, env(safe-area-inset-bottom)) + 6px)); top: var(--pc-songs-top, auto); display: flex; gap: 4px; padding: 4px; background: rgba(255, 250, 240, .92); border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); transition: opacity .35s ease, transform .35s ease; }
.pc .pc-songs button { font: 500 .66rem/1 var(--pc-f-sans); letter-spacing: .1em; color: var(--pc-ink); background: none; border: 0; border-radius: 999px; padding: .55rem .7rem; min-height: 34px; cursor: pointer; }
.pc .pc-songs button[aria-pressed="true"] { background: var(--pc-ink); color: var(--pc-paper); }
.pc-songs-away .pc .pc-songs { opacity: 0; transform: translateY(12px); pointer-events: none; }
.panel-open .pc .pc-songs { display: none; }