/* ============================================================================
   LA SALA — el curso en 3D (13 oct 2026, pedido de David)
   La sala de clases como maqueta sobre la pizarra de la página: fechas arriba, la escena al centro
   (o el plano, si el equipo no tiene WebGL) y un panel que dice qué hay y lleva a apartar.
   Colores, letras y tiempos: tokens de «La pizarra». El amarillo (--e-yellow) es SOLO «por confirmar»;
   el ámbar del marcador es SOLO «tu lugar».
   ============================================================================ */

/* ---------- La sección: independiente de la página que la recibe (14 oct 2026: también en /domina-ia/ y en la portada).
   Se inserta con partials/sala.html → scripts/aplicar-sala.py; no hereda nada de la hoja del curso. ---------- */
.sala-sec { --sala-max: 1120px; --sala-gutter: 20px; --sala-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.14-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.21 3.07.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.7.63.71.23 1.36.2 1.88.12.57-.09 1.76-.72 2-1.41.25-.7.25-1.29.17-1.41-.07-.13-.27-.2-.57-.35zM12.05 21.8a9.9 9.9 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.88 9.9-9.88 2.64 0 5.12 1.03 6.99 2.9a9.82 9.82 0 0 1 2.89 6.99c0 5.45-4.44 9.88-9.9 9.88z'/%3E%3C/svg%3E");
  background: var(--e-bg); color: var(--e-text); font-family: var(--e-sans, 'Source Sans 3', system-ui, sans-serif);
  padding-block: clamp(52px, 8vw, 96px); border-top: 1px dashed var(--e-linea-tiza); overflow-x: clip; scroll-margin-top: 72px; }
.sala-sec *, .sala-sec *::before, .sala-sec *::after { box-sizing: border-box; }
.sala-sec .sala-wrap { width: 100%; max-width: var(--sala-max); margin-inline: auto; padding-inline: var(--sala-gutter); }
.sala-sec .sala-cab { display: grid; gap: 14px; margin-bottom: clamp(18px, 3vw, 28px); }
.sala-sec .sala-kicker { margin: 0; font: 500 12.5px/1.3 var(--e-mono, 'Geist Mono', monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--e-muted); }
.sala-sec .sala-h2 { margin: 0; font-family: var(--e-display, 'Schibsted Grotesk', sans-serif); font-weight: 800; font-size: clamp(29px, 6.6vw, 48px);
  line-height: 1.06; letter-spacing: -.02em; color: var(--e-text); text-wrap: balance; }
.sala-sec .sala-lead { margin: 0; font-size: 19px; line-height: 1.6; color: var(--e-text-2); max-width: 62ch; text-wrap: pretty; }
.sala-sec .sala-nota { font-family: var(--e-mano, 'Kalam', cursive); font-weight: 700; color: var(--e-amber); font-size: 20px; line-height: 1.25; display: inline-block; transform: rotate(-1.5deg); }
.sala-sec :focus-visible { outline: 3px solid var(--e-amber); outline-offset: 3px; border-radius: 6px; }
.sala-sec p { margin: 0; }
/* botones: la punta redonda del marcador (los mismos del curso) */
.sala-sec .sala-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 22px; border-radius: 999px;
  border: 2px solid transparent; font: 800 17px/1.1 var(--e-sans, sans-serif); text-decoration: none; cursor: pointer; text-align: center;
  transition: transform var(--e-dur-micro) var(--e-ease-salida), background var(--e-dur-micro), border-color var(--e-dur-micro); }
.sala-sec .sala-btn:active { transform: scale(.98); }
.sala-sec .sala-btn--marcador { background: var(--e-amber); color: var(--e-on-amber); box-shadow: 0 8px 26px rgba(var(--e-amber-rgb), .22); }
.sala-sec .sala-btn--marcador:hover { background: var(--e-amber-hi); }
.sala-sec .sala-btn--tiza { background: transparent; color: var(--e-text); border-color: var(--e-linea-tiza); }
.sala-sec .sala-btn--tiza:hover { border-color: var(--e-amber); color: var(--e-amber); }
.sala-sec .sala-btn--wa::before { content: ""; width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: var(--sala-wa) center / contain no-repeat; mask: var(--sala-wa) center / contain no-repeat; }
.sala-sec .sala-btn--texto { background: none; border: 0; padding: 8px 4px; min-height: 44px; color: var(--e-text-2); font-weight: 600; font-size: 15px;
  text-decoration: underline; text-underline-offset: 4px; }
.sala-sec .sala-btn--texto:hover { color: var(--e-amber); }
@media (prefers-reduced-motion: reduce) { .sala-sec .sala-btn { transition: none; } }

.sala { --sala-tiza: rgba(233,234,238,.82); margin-top: 6px; }

/* ---------- Fechas ---------- */
.sala__barra { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sala__fechas { display: flex; flex-wrap: wrap; gap: 10px; }
.sala__fecha { appearance: none; display: grid; gap: 3px; justify-items: start; min-height: 54px; padding: 9px 20px 10px; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--e-linea-tiza); background: transparent; color: var(--e-text); font: 800 17px/1.1 var(--e-sans); text-align: left;
  transition: border-color var(--e-dur-micro), background var(--e-dur-micro); }
.sala__fecha small { font: 500 12px/1.2 var(--e-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--e-muted); }
.sala__fecha:hover { border-color: var(--e-amber); }
.sala__fecha[aria-selected="true"] { border-color: var(--e-amber); background: rgba(var(--e-amber-rgb), .10); }
.sala__fecha[aria-selected="true"] small { color: var(--e-amber); }
.sala__fecha.is-lleno small::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.sala__mov { position: absolute; left: 12px; top: 12px; z-index: 3; appearance: none; border: 1px solid var(--e-linea-tiza); background: rgba(18,20,23,.82); color: var(--e-text-2); border-radius: 999px; padding: 8px 16px; min-height: 44px; font: 700 14px/1 var(--e-sans); cursor: pointer; }
.sala__mov[hidden] { display: none; }
.sala__mov:hover { color: var(--e-amber); }

/* ---------- El lienzo: mismo tamaño con plano o con 3D (sin saltos al cargar) ---------- */
.sala__lienzo { position: relative; width: 100%; max-width: 1240px; margin-inline: auto; aspect-ratio: 16 / 9.4; max-height: max(440px, calc(100vh - 300px)); min-height: 340px;
  border-radius: 18px; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse at 50% 40%, var(--e-panel) 0%, var(--e-bg) 72%); }
@media (max-width: 700px) {
  .sala__lienzo { aspect-ratio: 10 / 11; border-radius: 0; max-height: 82vh; }
  .sala[data-modo="3d"] .sala__lugar { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .sala[data-modo="3d"] .sala__num { width: 22px; height: 22px; font-size: 11px; border-width: 1.5px; }
  .sala__nota { font-size: 14px; padding: 4px 9px 3px; }
  .sala__vistas button { padding: 8px 10px; font-size: 13px; }
  .sala__vistas { gap: 2px; right: 8px; bottom: 8px; }
  /* en el celular «Pausar» es un ícono (con su nombre para el lector de pantalla) para que quepan las tres vistas */
  .sala__mov { left: 8px; top: 8px; width: 44px; padding: 0; font-size: 0; }
  .sala__mov::before { content: "❚❚"; font-size: 13px; letter-spacing: -1px; }
  .sala__mov[data-pausado="true"]::before { content: "▶"; }
}
.sala__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; opacity: 0; transition: opacity .7s var(--e-ease-salida); }
.sala[data-modo="3d"] .sala__canvas { opacity: 1; }
.sala__carga { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0; font: 700 18px/1 var(--e-mano); color: var(--e-amber); opacity: 0; transition: opacity .3s; pointer-events: none; white-space: nowrap; }
.sala:is([data-carga="3d"], [data-modo="cargando"]) .sala__carga { opacity: 1; }
/* mientras se arma la escena no se muestra el plano (se veía 1-2 s encima de la sala: hallazgo del auditor) */
.sala[data-modo="cargando"] .sala__lugares { visibility: hidden; }
.sala:not([data-modo="plano"]) .sala__plano { display: none; }

/* ---------- Los lugares (botones). En 3D van encima de cada silla ---------- */
.sala__lugares { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.sala__lugar { pointer-events: auto; position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; transform: translate3d(var(--x, -99px), var(--y, -99px), 0); -webkit-tap-highlight-color: transparent; }
.sala__num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 600 13px/1 var(--e-mono); color: var(--e-text);
  background: rgba(18,20,23,.78); border: 2px dashed var(--sala-tiza); transition: transform var(--e-dur-micro) var(--e-ease-salida), background var(--e-dur-micro); }
.sala__lugar:hover .sala__num, .sala__lugar.is-hover .sala__num { transform: scale(1.12); background: rgba(18,20,23,.92); border-color: var(--e-amber); }
/* en 3D el toque lo resuelve la escena (el número libre más cercano a donde tocó la persona): los botones quedan para el teclado
   y el lector de pantalla. Antes, los botones invisibles de los lugares tomados se comían el toque del libre de adelante. */
.sala[data-modo="3d"] .sala__lugar { pointer-events: none; }
.sala__lugar:focus-visible { outline: none; }
.sala__lugar:focus-visible .sala__num { outline: 3px solid var(--e-amber); outline-offset: 3px; opacity: 1 !important; }
.sala__lugar[data-estado="tu"] .sala__num { background: var(--e-amber); color: var(--e-on-amber); border: 2px solid var(--e-amber); }
.sala__lugar[data-estado="confirmar"] .sala__num { background: var(--e-yellow); color: var(--e-on-amber); border: 2px solid var(--e-yellow); }
.sala__lugar[data-estado="ocupado"] .sala__num { background: var(--e-text-2); color: var(--e-bg); border: 2px solid var(--e-text-2); }
.sala__lugar[data-estado="desconocido"] .sala__num { opacity: .5; }
/* en 3D: los tomados ya se ven sentados; su botón queda invisible pero se puede tocar y enfocar */
.sala[data-modo="3d"] .sala__lugar:is([data-estado="ocupado"], [data-estado="confirmar"]) .sala__num { opacity: 0; }
.sala__lugar[data-estado="tu"] .sala__num { font: 700 15px/1 var(--e-mano); box-shadow: 0 0 0 3px rgba(var(--e-amber-rgb), .3); }
.sala[data-modo="3d"] .sala__lugar.is-fuera { visibility: hidden; }
.sala:is([data-vista="lugar"], [data-vista="pizarra"]) .sala__lugar { visibility: hidden; }

/* ---------- El plano (sin WebGL o mientras carga la escena) ---------- */
.sala__plano { position: absolute; inset: 0; pointer-events: none; transition: opacity .5s; }
.sala[data-modo="3d"] .sala__plano { opacity: 0; }
.sala__plano-pizarra { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: min(62%, 520px); padding: 10px 0 12px; text-align: center; border-radius: 8px;
  background: #1F2623; border: 3px solid #B58A5D; font: 700 20px/1 var(--e-mano); color: var(--e-text); }
.sala__plano-puerta { position: absolute; right: 18px; bottom: 16px; font: 500 12px/1 var(--e-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--e-muted); border-right: 3px solid var(--e-muted); padding-right: 8px; }
.sala[data-modo="plano"] .sala__lugares { inset: 84px 7% 46px; display: grid; grid-template-columns: 1fr 1fr .7fr 1fr 1fr; grid-template-rows: repeat(4, 1fr); place-items: center; }
.sala[data-modo="plano"] .sala__lugar { position: static; margin: 0; transform: none; grid-row: var(--f); grid-column: var(--c); width: 48px; height: 48px; }
.sala[data-modo="plano"] .sala__num { width: 40px; height: 40px; font-size: 14px; }
@media (min-width: 701px) {
  .sala[data-modo="plano"] .sala__lugares { inset: 96px max(7%, calc(50% - 330px)) 54px; }
  .sala[data-modo="plano"] .sala__lugar { width: 60px; height: 60px; }
  .sala[data-modo="plano"] .sala__num { width: 52px; height: 52px; font-size: 16px; }
  .sala__plano-pizarra { width: min(56%, 460px); font-size: 22px; padding-block: 12px 14px; }
}

/* ---------- Notas a mano que siguen a la gente ---------- */
.sala__nota { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; white-space: nowrap; opacity: 0; transition: opacity .35s;
  transform: translate3d(var(--x, -200px), var(--y, -200px), 0) translate(-50%, -100%);
  font: 700 15px/1 var(--e-mano); padding: 5px 11px 4px; border-radius: 999px; background: rgba(18,20,23,.86); color: var(--e-text); }
.sala__nota::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); border-radius: 2px; z-index: -1; }
.sala__nota.is-vis { opacity: 1; }
.sala__nota--tu { color: var(--e-on-amber); background: var(--e-amber); font-size: 18px; }
.sala__nota--confirmar { color: var(--e-on-amber); background: var(--e-yellow); }
.sala:not([data-modo="3d"]) .sala__nota { display: none; }

/* ---------- Vistas ---------- */
.sala__vistas { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(18,20,23,.96); border: 1px solid var(--e-linea-tiza); }
.sala__vistas[hidden] { display: none; }
/* los controles de la escena solo existen con la escena: mientras carga, «Abriendo la sala…» no se cruza con ellos (auditor, 375 px) */
.sala:not([data-modo="3d"]) :is(.sala__vistas, .sala__mov) { display: none !important; }
.sala__vistas button { appearance: none; border: 0; border-radius: 999px; min-height: 40px; padding: 8px 14px; font: 700 14px/1 var(--e-sans); color: var(--e-text-2); background: transparent; cursor: pointer; }
.sala__vistas button[aria-pressed="true"] { background: var(--e-text); color: var(--e-bg); }
.sala__vistas button:disabled { opacity: .45; cursor: not-allowed; }
.sala__vistas button:not(:disabled):not([aria-pressed="true"]):hover { color: var(--e-amber); }

/* ---------- Leyenda y panel ---------- */
.sala__leyenda { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font: 500 14px/1.3 var(--e-sans); color: var(--e-text-2); }
.sala__leyenda li { display: inline-flex; align-items: center; gap: 8px; }
.sala__leyenda i { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.sala__leyenda .l-ocupado { background: var(--e-text-2); }
.sala__leyenda .l-confirmar { background: var(--e-yellow); }
.sala__leyenda .l-libre { border: 2px dashed var(--sala-tiza); }
.sala__leyenda .l-tu { border: 3px solid var(--e-amber); border-radius: 50% 46% 52% 48%; transform: rotate(-8deg); }   /* el círculo de plumón, no un punto: no se confunde con el amarillo */

.sala__panel { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; margin-top: 16px; padding: 18px 20px;
  border-radius: var(--e-radio); background: var(--e-bg-raise); border: 1px dashed var(--e-linea-tiza); min-height: 92px; }
.sala__texto { display: grid; gap: 4px; flex: 1 1 320px; min-width: 0; }
.sala-sec .sala__titulo { margin: 0; font: 800 19px/1.25 var(--e-display); color: var(--e-text); }
.sala-sec .sala__detalle { margin: 0; font-size: 17px; line-height: 1.45; color: var(--e-text-2); }
.sala__acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sala__acciones .sala-btn { min-height: 50px; padding: 12px 22px; font-size: 17px; }
.sala__acciones .sala-btn--texto { background: none; border: 0; padding: 8px 4px; min-height: 44px; color: var(--e-text-2); font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.sala__acciones .sala-btn--texto:hover { color: var(--e-amber); }
.sala-sec .sala__aviso { margin: 20px 0 0; font-size: 18px; line-height: 1.3; }
/* los botones flotantes del sitio se apartan mientras la sala está en pantalla (la clase la pone sala.js) */
html.sala-en-pantalla :is(.ic-agendar-flota, #waFloat, .wa-float) { opacity: 0 !important; pointer-events: none !important; transform: translateY(14px); transition: opacity .25s, transform .25s; }
.sala__vistas button.is-espera { color: var(--e-muted); }
.sala__aviso .sala-nota { font-size: 20px; }
@media (max-width: 700px) {
  .sala__acciones, .sala__acciones .sala-btn:not(.sala-btn--texto) { width: 100%; }
  .sala__fechas { flex: 1 1 100%; flex-wrap: nowrap; }
  .sala__fecha { flex: 1 1 0; min-width: 0; padding-inline: 14px; }
}
.sala__ficha-enlace { display: inline-block; margin-top: 2px; font: 700 15px/1.3 var(--e-sans); color: var(--e-amber); text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .sala__canvas, .sala__plano, .sala__nota, .sala__num, .sala__fecha { transition: none; }
}