/* Invitado: one task, one screen. Bosque ground from canon.css; every colour, font and radius is a token. */
* { box-sizing: border-box; }
/* A control marked hidden stays hidden, whatever display its class gives it. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--color-lienzo); color: var(--color-tinta); }
body { container-type: inline-size; font-family: var(--font-sans); font-size: var(--font-size-6); -webkit-font-smoothing: antialiased; }
.iconos { position: absolute; }
.icono { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }

.sala { min-height: 100dvh; display: grid; grid-template-rows: minmax(0, 1fr) auto; }

/* The guest's own picture is the one dominant object. */
.escena { position: relative; overflow: hidden; background: var(--color-hundida); min-height: 56dvh; }
.yo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
/* The seal and the status pill share a row while both fit; when the pill is long the pill moves to its own row,
   whole, so the seal never breaks beside it (flex-wrap breaks the line before either item shrinks). */
.cabeza { position: absolute; inset: 0 0 auto 0; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 0.5rem 0.75rem; padding: max(1rem, env(safe-area-inset-top)) 1rem 2.5rem;
  background: linear-gradient(var(--color-velo-fuerte), transparent); }
.sello { flex: none; font-family: var(--font-display); font-weight: var(--font-weight-semibold); font-size: var(--font-size-5);
  letter-spacing: 0.02em; color: var(--color-tinta); }
.estado { max-width: 100%; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 999px;
  font-size: var(--font-size-5); background: var(--color-velo-fuerte); color: var(--color-tinta); }
.estado b { font-weight: var(--font-weight-semibold); }
.estado[data-tono="ok"] { background: var(--color-ok); color: var(--color-sobre-marca); }
.estado[data-tono="ok"] .icono { fill: currentColor; }
.estado[data-tono="trabajando"] { background: var(--color-aviso); color: var(--color-sobre-marca); }
.estado[data-tono="trabajando"] .icono { animation: girar 1s linear infinite; }
.estado[data-tono="error"] { background: var(--color-error); color: var(--color-sobre-marca); }
@keyframes girar { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .estado .icono { animation: none !important; } }

/* The program return, small, in the corner of the guest's own picture. */
.programa { position: absolute; right: 1rem; top: 4.25rem; width: min(42%, 22rem); margin: 0;
  border-radius: var(--radius-lg); overflow: hidden; background: var(--color-lienzo);
  box-shadow: 0 0.75rem 2rem var(--color-velo-fuerte); }
.programa video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.programa figcaption { position: absolute; left: 0.5rem; bottom: 0.5rem; display: inline-flex; align-items: center;
  gap: 0.3rem; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: var(--font-size-4);
  background: var(--color-velo-fuerte); color: var(--color-tinta); }
.programa figcaption .icono { width: 0.8em; height: 0.8em; fill: var(--color-error); stroke: none; }

/* His own voice as a live figure: the level of his microphone. */
.nivel { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; height: 0.375rem; border-radius: 999px;
  background: var(--color-velo-fuerte); overflow: hidden; }
.nivel i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--color-ok);
  transition: width 80ms linear; }

/* The bottom sheet: name, controls, the one action. */
.mando { position: relative; z-index: 1; margin-top: -1.5rem; display: grid; gap: 1rem;
  padding: 1.5rem 1.25rem max(1.25rem, env(safe-area-inset-bottom));
  border-radius: var(--radius-3xl) var(--radius-3xl) 0 0; background: var(--color-superficie); }
.titulo { margin: 0; font-family: var(--font-display); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-hero); line-height: 1.1; color: var(--color-oro); }
.guia { margin: 0; color: var(--color-tinta-2); font-size: var(--font-size-5); line-height: 1.45; }
.campo { display: grid; gap: 0.4rem; font-size: var(--font-size-4); color: var(--color-tinta-2); }
.campo input { font: inherit; font-size: var(--font-size-7); color: var(--color-tinta); background: var(--color-campo);
  border: 1px solid var(--color-linea-fuerte); border-radius: var(--radius-lg); padding: 0.9rem 1rem; min-height: 3.25rem; }
.campo input::placeholder { color: var(--color-tinta-3); }
.campo input:focus-visible { outline: 2px solid var(--color-foco); outline-offset: 2px; }
.botones { display: flex; gap: 0.75rem; }
.redondo { flex: 1; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  min-height: 4rem; padding: 0.6rem; border: 0; border-radius: var(--radius-xl); cursor: pointer;
  font: inherit; font-size: var(--font-size-4); background: var(--color-elevada); color: var(--color-tinta); }
.redondo .icono { width: 1.6rem; height: 1.6rem; }
.redondo[aria-pressed="false"] { background: var(--color-error); color: var(--color-sobre-marca); }
.redondo.salir { background: var(--color-presion); }
.redondo:focus-visible, .principal:focus-visible { outline: 2px solid var(--color-foco); outline-offset: 2px; }
.principal { min-height: 3.5rem; border: 0; border-radius: var(--radius-xl); cursor: pointer; font: inherit;
  font-family: var(--font-display); font-weight: var(--font-weight-semibold); font-size: var(--font-size-7);
  background: var(--color-oro); color: var(--color-sobre-marca); }
.principal:disabled { cursor: default; background: var(--color-elevada); color: var(--color-tinta-3); }
.sala[data-fase="dentro"] .principal, .sala[data-fase="dentro"] .campo { display: none; }
.sala[data-fase="aviso"] .botones, .sala[data-fase="aviso"] .campo, .sala[data-fase="aviso"] .principal,
.sala[data-fase="aviso"] .nivel { display: none; }
@media (hover: hover) { .redondo:hover { filter: brightness(1.12); } .principal:not(:disabled):hover { filter: brightness(1.06); } }

/* Wide: the picture beside the sheet, both full height. */
@container (min-width: 880px) {
  .sala { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) clamp(22rem, 26cqi, 30rem); }
  .escena { min-height: 100dvh; }
  .mando { margin: 0; border-radius: 0; align-content: center; padding: 3rem clamp(1.5rem, 3cqi, 3.5rem); gap: 1.25rem; }
  .programa { width: clamp(16rem, 24cqi, 30rem); right: 1.5rem; top: 5rem; }
  .cabeza { padding: 1.5rem; }
  .nivel { left: 1.5rem; right: 1.5rem; bottom: 1.5rem; }
}