/* Pizarra en vivo (tanda 7) · whiteboard-live.js. The paper is always white (also in dark mode): black ink reads on it and the
   saved image is the same for everyone. Controls follow the platform tokens (light by default). Touch targets ≥ 44 px on touch. */
.kxwb{display:grid;gap:10px;min-width:0}
.kxwb-paper{position:relative;width:100%;aspect-ratio:16/9;background:#fff;border:1px solid var(--line,#e6e6ec);border-radius:12px;overflow:hidden}
.kxwb-canvas{display:block;width:100%;height:100%;cursor:default;outline:none}
.kxwb.kxwb-can .kxwb-canvas{cursor:crosshair}
.kxwb.kxwb-tap .kxwb-canvas{cursor:pointer}
.kxwb-canvas:focus-visible{box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--acc,#6235dd) 60%,transparent)}
.kxwb-empty{position:absolute;inset:0;margin:0;display:grid;place-items:center;padding:16px;text-align:center;font-size:14px;line-height:1.4;color:#5f5e69;pointer-events:none}
.kxwb-empty[hidden]{display:none}
.kxwb-mini .kxwb-empty{font-size:12px}
.kxwb-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kxwb-tools[hidden]{display:none}
.kxwb-grp{display:flex;gap:2px;padding:3px;border:1px solid var(--line,#e6e6ec);border-radius:12px;background:var(--card,#fff)}
.kxwb-color,.kxwb-size{width:36px;height:36px;min-height:0;padding:0;display:grid;place-items:center;border:2px solid transparent;border-radius:9px;background:transparent;cursor:pointer}
.kxwb-color::before{content:"";width:20px;height:20px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.kxwb-size i{display:block;width:var(--w);height:var(--w);border-radius:50%;background:var(--ink,#17161c)}
.kxwb-color:hover,.kxwb-size:hover{background:var(--surf,#f4f4f7)}
.kxwb-color[aria-pressed="true"],.kxwb-size[aria-pressed="true"]{border-color:var(--acc,#6235dd);background:var(--tint,#f0ebff)}
.kxwb-tool{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--line2,#d5d5de);border-radius:10px;background:var(--card,#fff);color:var(--ink,#17161c);font:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap}
.kxwb-tool:hover{background:var(--surf,#f4f4f7)}
.kxwb-tool[aria-pressed="true"]{border-color:var(--acc,#6235dd);background:var(--tint,#f0ebff);color:var(--acc-ink,var(--acc,#6235dd))}
.kxwb-tool.danger{border-color:var(--live,#e5262d);background:var(--live,#e5262d);color:#fff}
.kxwb-tool:disabled{opacity:.5;cursor:not-allowed}
.kxwb-confirm{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.kxwb-confirm b{font-size:13px;color:var(--ink,#17161c)}
.kxwb-ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kxwb :is(button):focus-visible,.kxwb-dlg button:focus-visible,.kxwb-proj button:focus-visible,.kxwb-chip:focus-visible,.kxwb-mod button:focus-visible{outline:3px solid color-mix(in srgb,var(--acc,#6235dd) 60%,transparent);outline-offset:2px}
.kxwb-msg{margin:0;min-height:1.3em;font-size:13px;color:var(--mut,#6b6a75)}
.kxwb-msg.err,.kxwb-dlg-msg.err{color:var(--live-ink,#c21f25);font-weight:600}
/* moderation steps (studio panel and full window) */
.kxwb-mod{display:grid;gap:10px}
.kxwb-st{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line,#e6e6ec);border-radius:12px;background:var(--surf,#f4f4f7)}
.kxwb-st b{display:block;font-size:14px;line-height:1.3}
.kxwb-st span:not(.kxwb-st-dot){display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--mut,#6b6a75)}
.kxwb-st-dot{flex:none;width:10px;height:10px;margin-top:4px;border-radius:50%;background:var(--line2,#b9b8c3)}
.kxwb-st[data-phase="live"],.kxwb-st[data-phase="open"]{border-color:color-mix(in srgb,var(--acc,#6235dd) 45%,transparent);background:var(--tint,#f0ebff)}
.kxwb-st[data-phase="live"] .kxwb-st-dot{background:var(--acc,#6235dd)}
.kxwb-st[data-phase="open"] .kxwb-st-dot{background:var(--ok,#1aa35b);animation:kxwbPulse 1.4s ease-in-out infinite}
.kxwb-st[data-phase="result"] .kxwb-st-dot{background:#f5b82e}
.kxwb-acts{display:flex;flex-wrap:wrap;gap:8px}
.kxwb-note{margin:0;font-size:12px;line-height:1.4;color:var(--mut,#6b6a75)}
.kxwb-st-load{margin:0;font-size:13px;color:var(--mut,#6b6a75)}
.kxwb-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border:1px solid var(--line2,#d5d5de);border-radius:10px;background:var(--card,#fff);color:var(--ink,#17161c);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.kxwb-btn:hover{background:var(--surf,#f4f4f7)}
.kxwb-btn.primary{border-color:var(--acc,#6235dd);background:var(--acc,#6235dd);color:#fff}
.kxwb-btn.primary:hover{filter:brightness(1.08);background:var(--acc,#6235dd)}
.kxwb-btn:disabled{opacity:.5;cursor:not-allowed}
.kxwb-studio{display:grid;gap:10px}
.kxwb-studio .kxwb-mini .kxwb-paper{border-radius:10px}
@keyframes kxwbPulse{50%{opacity:.35}}
/* full window */
.kxwb-dlg{width:min(1180px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line,#e6e6ec);border-radius:16px;background:var(--app,#fff);color:var(--ink,#17161c);box-shadow:0 24px 60px rgba(15,12,35,.3);overflow:auto;font-family:inherit}
.kxwb-dlg::backdrop{background:rgba(14,12,26,.55)}
.kxwb-dlg-head{display:flex;align-items:flex-start;gap:12px;padding:14px 14px 6px 18px}
.kxwb-dlg-tt{flex:1;min-width:0}
.kxwb-dlg-tt h2{margin:0;font-size:18px;line-height:1.3}
.kxwb-dlg-tt p{margin:2px 0 0;font-size:13px;color:var(--mut,#6b6a75)}
.kxwb-x{flex:none;width:44px;height:44px;min-height:0;padding:0;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--ink,#17161c);cursor:pointer}
.kxwb-x:hover{background:var(--surf,#f4f4f7)}.kxwb-x .kxwb-ico{width:20px;height:20px}
.kxwb-dlg-mod{padding:0 18px 8px}
.kxwb-dlg-mod .kxwb-mod{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.kxwb-dlg-mod .kxwb-note{grid-column:1/-1}
.kxwb-dlg-body{padding:4px 18px 0}
.kxwb-dlg .kxwb-paper{width:min(100%,max(320px,calc((100dvh - 310px)*16/9)));margin:0 auto}
.kxwb-dlg .kxwb-tools{justify-content:center}
.kxwb-dlg-msg{margin:0;padding:8px 18px 14px;min-height:1.4em;font-size:13px;text-align:center;color:var(--mut,#6b6a75)}
@media (max-width:760px){
 .kxwb-dlg{width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
 .kxwb-dlg-head{padding:10px 8px 4px 14px}.kxwb-dlg-mod,.kxwb-dlg-body{padding-left:10px;padding-right:10px}
 .kxwb-dlg-mod .kxwb-mod{grid-template-columns:minmax(0,1fr)}
 .kxwb-dlg .kxwb-paper{width:100%}
 .kxwb-tool span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .kxwb-tool{padding:0 10px}
}
.kxwb-rotate{display:none}
@media (max-width:760px) and (orientation:portrait){.kxwb-rotate{display:block;margin:12px 14px 0;font-size:13px;line-height:1.4;text-align:center;color:var(--mut,#6b6a75)}}
@media (max-width:760px) and (orientation:landscape){.kxwb-dlg .kxwb-paper{width:min(100%,calc((100dvh - 120px)*16/9))}.kxwb-dlg-mod{display:none}}
@media (pointer:coarse){.kxwb-color,.kxwb-size{width:44px;height:44px}.kxwb-tool,.kxwb-btn{min-height:44px}}
/* projection over the guest room's program (#guest-program is 16:9, so the paper fills it exactly) */
.kxwb-proj{--card:#fff;--ink:#17161c;--surf:#f4f4f7;--line:#e6e6ec;--line2:#d5d5de;--tint:#f0ebff;--mut:#6b6a75;color-scheme:light;position:absolute;inset:0;z-index:6;background:#fff;color:#17161c}
.kxwb-proj .kxwb{position:absolute;inset:0;display:block}
.kxwb-proj .kxwb-paper{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0}
.kxwb-proj-head{position:absolute;top:8px;left:8px;right:8px;z-index:2;display:flex;align-items:center;gap:6px;pointer-events:none}
.kxwb-proj-head>*{pointer-events:auto}
/* only the buttons of the header catch the pointer: the tag and the mode let a line start underneath (the phone's small paper) */
.kxwb-proj-head>.kxwb-tag,.kxwb-proj-head>.kxwb-mode,.kxwb-proj-head>.kxwb-sp{pointer-events:none}
/* while guests may draw on the projection, the «Prepárate» hint (camera and microphone off) steps aside; it comes back after */
.gr2:has(#kxwb-proj[data-draw="1"]) #gr-coach{display:none}
/* a guest who is on the air keeps seeing the «AL AIRE» tag (guest-room.css .gr-onair-tag) above the board */
.gr2[data-air=onair] #guest-program .gr-onair-tag{z-index:7}
.gr2[data-air=onair] .kxwb-proj-head{top:38px}
.kxwb-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--acc,#6235dd);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;white-space:nowrap}
.kxwb-tag i{width:6px;height:6px;border-radius:50%;background:#fff}
.kxwb-proj[data-draw="1"] .kxwb-tag i{animation:kxwbPulse 1.4s ease-in-out infinite}
.kxwb-mode{min-width:0;padding:4px 10px;border:1px solid #e6e6ec;border-radius:999px;background:rgba(255,255,255,.94);font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kxwb-sp{flex:1}
.kxwb-hbtn{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid #d5d5de;border-radius:999px;background:rgba(255,255,255,.96);color:#17161c;font:inherit;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer}
.kxwb-hbtn:hover{background:#f4f4f7}
.kxwb-proj .kxwb-tools{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:2;flex-wrap:nowrap;max-width:calc(100% - 16px);overflow-x:auto;padding:6px;border:1px solid #e6e6ec;border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 8px 24px rgba(15,12,35,.14)}
.kxwb-proj:not([data-draw="1"]) .kxwb-tools{left:auto;right:10px;transform:none}
.kxwb-proj .kxwb-msg{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:2;max-width:calc(100% - 24px);padding:6px 12px;border-radius:999px;background:rgba(23,22,28,.86);color:#fff;text-align:center}
.kxwb-proj .kxwb-msg.err{color:#fff;background:#b3161c}
.kxwb-proj .kxwb-msg:empty{display:none}
/* the full toolbar (6 colours, 3 sizes, 4 labelled tools) needs ~800 px: below that the tools keep only their icon (name in title/aria) */
@container (max-width:860px){.kxwb-proj .kxwb-tools .kxwb-tool span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@container (max-width:640px){.kxwb-proj .kxwb-mode{display:none}}
@container (max-width:480px){
 .kxwb-proj .kxwb-tools{display:none}
 .kxwb-proj .kxwb-msg{bottom:10px}
 .kxwb-hbtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .kxwb-hbtn{width:34px;padding:0;justify-content:center}
 .kxwb-proj .kxwb-empty{font-size:12px;padding:40px 12px 12px}
 .kxwb-proj .kxwb-tag{opacity:.8}
}
.kxwb-chip{position:absolute;left:10px;bottom:10px;z-index:6;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border:0;border-radius:999px;background:var(--acc,#6235dd);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.kxwb-chip i{width:8px;height:8px;border-radius:50%;background:#fff;animation:kxwbPulse 1.4s ease-in-out infinite}
@media (pointer:coarse){.kxwb-chip,.kxwb-hbtn{min-height:44px}.kxwb-hbtn{min-width:44px}}
/* invitation card (kxg-card of platform-extras.js) */
.kxwb-card .kxg-note{font-size:13px}
/* studio rail badge */
#v9wrap .rb .badge.kx-wbbadge{background:var(--acc);color:#fff;gap:3px;grid-auto-flow:column;align-items:center}
#v9wrap .rb .badge.kx-wbbadge.kx-wbopen{background:var(--ok,#1aa35b)}
@media (prefers-reduced-motion:reduce){.kxwb-st-dot,.kxwb-tag i,.kxwb-chip i{animation:none!important}}