/* ==========================================================================
   CLAQ para iPhone, reconstruido en web · las piezas del acto 2
   Misión 016 · experto del iPhone.

   De dónde sale cada valor
   - Lo que se ve: las capturas de la 0.20 (build 295) en taller/015/media/.
     Se midieron en puntos de la app con una regla: 1 pt = 2400 / 874 px en las
     horizontales y 920 / 402 px en las verticales (iPhone de 874 × 402 pt).
   - Colores, letras y medidas que la captura no deja leer: el código de la app
     (claq-ios, R6Monitor/StudioUI; es la beta 227, más vieja que la captura).
     Se dice archivo y línea. Donde la captura y el código no coinciden, manda
     la captura y se dice.

   Cómo se mide
   - Cada pieza (.pzi) llena su contenedor. Dentro, la pantalla (.pzi-pantalla)
     define --u: un punto del iPhone en píxeles de CSS.
       · horizontal: 874 × 402 pt, entera dentro de la pieza;
       · vertical: 402 pt de ancho, el ancho de la pieza; el alto sale solo
         (874 pt), así que la pieza vertical crece hacia abajo y la cámara baja.
   - Todo se maqueta en --u, sin transform: la letra es letra a cualquier tamaño.
   - La letra nunca baja de --pzi-min (10 px, regla de la misión y de la
     escaleta del iPhone §8). Con el iPhone a 1.30 (1440 px), los rótulos de
     6.5 pt de la app suben de 8.5 a 10 px; se dice en el LEEME.
   - Las raíces (.pzi) y las pantallas no llevan transform: son del motor.
   ========================================================================== */

.pzi {
  /* Letra del sistema (nunca SF servida como archivo: su licencia no lo deja). */
  --pzi-letra: -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pzi-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --pzi-redonda: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* La tarjeta de papel lleva letra a mano (captura toma-h): derecha, de trazo
     parejo y redondo, como de plumón. De las que traen los aparatos de Apple, la
     más parecida es Noteworthy en negrita (no se sirve: es del aparato). Fuera de
     Apple cae en la letra del sistema, nunca en una serif (creativo del iPhone). */
  --pzi-mano: "Noteworthy", "Chalkboard SE", "Marker Felt", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Color: StudioTheme.swift:10-21 (Studio.*), corregido con la captura. */
  --pzi-tinta: #F7F5F0;      /* captura: el blanco de la 295 es más claro que Studio.ink #F5F5EB */
  --pzi-tenue: #AEABA5;      /* captura (rodaje-tira-h, log-709-h): gris cálido; Studio.muted era #A8B3B0 */
  --pzi-apagada: #737375;    /* captura: los rótulos de la ficha de la escena */
  --pzi-debil: rgba(255, 255, 255, .32);   /* Studio.faint */
  --pzi-raya: rgba(255, 255, 255, .12);    /* Studio.rule */
  --pzi-menta: #B0DEC2;      /* Studio.mint (0.69, 0.87, 0.76) · AF y GRID */
  --pzi-claqueta: #F0C468;   /* Studio.slateYellow (StudioTheme.swift:16) · ESC del monitor */
  --pzi-ambar: #F1BB74;      /* captura (toma-h, rodaje-tira-h): estrellas, marco y ESC de la tira */
  --pzi-coral: #FF5E52;      /* Studio.coral (1, 0.37, 0.32) · REC; captura #FF6054 */
  --pzi-azul: #78BFF0;       /* Studio.blue */
  --pzi-lila: #C2A8DE;       /* Studio.lilac · LOOK */
  --pzi-suelo: #0C0B0E;      /* captura: fondo de la tira y de la toma (Studio.ground era #111215) */
  --pzi-papel: #E7E1D0;      /* captura: la tarjeta de papel */
  --pzi-tinta-mano: #A9503E; /* captura: lo escrito a mano en el papel */
  --pzi-boton: #EFEDE9;      /* captura: el botón blanco (Guardar) */

  /* Territorios de Isla Bruma (Proyecto.json, en tokens.css de la misión). */
  --t-isla: #7F98AC; --t-luz: #C9935A; --t-cintas: #B07FA6;
  --t-silencio: #86A487; --t-tormenta: #8086B4; --t-sonido: #6FA293;

  --pzi-min: 10px;           /* la letra nunca baja de aquí */
  --pzi-esquina: 55;         /* radio de pantalla en pt: aproximado (≈ 14 % del lado corto), a comprobar */

  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container: pzi / size;
  color: var(--pzi-tinta);
  font-family: var(--pzi-letra);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.pzi[data-orientacion="v"] { height: auto; container-type: inline-size; overflow: visible; }
.pzi *, .pzi *::before, .pzi *::after { box-sizing: border-box; }
.pzi img { display: block; max-width: none; }
.pzi button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pzi button:focus-visible { outline: 2px solid var(--pzi-ambar); outline-offset: 2px; }

/* La pantalla: sin aparato, sólo sus esquinas. */
.pzi-pantalla {
  position: absolute;
  inset: 0;
  margin: auto;
  overflow: hidden;
  background: #000;
  border-radius: calc(var(--pzi-esquina) * var(--u));
  /* El filo de luz de 1 px de la ventana de Studio (escaleta del iPhone §2). */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.pzi[data-orientacion="h"] .pzi-pantalla {
  --u: min(calc(100cqw / 874), calc(100cqh / 402));
  width: calc(874 * var(--u));
  height: calc(402 * var(--u));
}
.pzi[data-orientacion="v"] .pzi-pantalla {
  --u: calc(100cqw / 402);
  position: relative;
  width: 100%;
  height: calc(874 * var(--u));
}
/* El filo va encima de todo lo que llena la pantalla. */
.pzi-pantalla::after {
  content: ""; position: absolute; inset: 0; z-index: 20; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

/* --- Ayudas -------------------------------------------------------------
   .a: caja en puntos (--x, --y, --w, --h; si falta --w o --h, es automática).
   .tx: un texto con su renglón de --lh puntos centrado en su caja, y letra de
   --fs puntos que nunca baja de --pzi-min. El interletrado va en em, para que
   crezca con la letra si el mínimo la sube. */
.pzi .a {
  position: absolute;
  left: calc(var(--x, 0) * var(--u));
  top: calc(var(--y, 0) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}
/* El radio, con la especificidad más baja: las clases de cada pieza (cápsulas,
   botones redondos) lo pueden cambiar sin pelear con .a. */
:where(.pzi) .a { border-radius: calc(var(--r, 0) * var(--u)); }
/* Una fila de cosas en renglón (puntos, textos, estrellas): se acomodan solas
   aunque la letra cambie de ancho. */
/* Las envolturas que cubren toda la pantalla (rejilla, vúmetros, fichas) no se
   quedan con el toque: lo que se toca son los botones de dentro. */
.pzi .mon-rejilla, .pzi .mon-vumetro, .pzi .mon-archivo, .pzi .mon-v-ficha, .pzi .mon-v-formato,
.pzi .tira-ficha, .pzi .tira-escenas, .pzi .mon-cruz, .pzi .capa-aviso { pointer-events: none; }
/* En la portada estas piezas conviven con las de Studio (piezas.css), que tiene
   reglas generales para .barra, .hoja y .marca: aquí no deben entrar. */
.pzi .barra { right: auto; padding: 0; display: block; }
.pzi .hoja, .pzr .hoja { padding: 0; font: inherit; letter-spacing: normal; }
.pzi .fila { display: flex; align-items: center; white-space: nowrap; }
.pzi .fila > .tx, .pzi .col > .tx { position: static; display: block; }
.pzi .col { display: flex; flex-direction: column; align-items: flex-start; }
.pzi .tx {
  white-space: nowrap;
  font-size: max(var(--pzi-min), calc(var(--fs, 13) * var(--u)));
  line-height: calc(var(--lh, 16) * var(--u));
}
.pzi .tx.centro { text-align: center; }
/* Rótulos que la letra mínima agranda (WAVE…, AF, GRID, SIGUIENTE, «SIG.», la
   escala del vúmetro): el interletrado se ajusta para que ocupen el ancho de la
   captura. Avance de la monoespaciada: 0.6 em. --t es el interletrado de la app
   en pt. Tope: −0.04 em, para que las letras no se toquen (creativo del iPhone). */
.pzi .tx.ajustada {
  letter-spacing: max(-0.04em, calc((0.6 * var(--fs) + var(--t, 0)) * var(--u) - 0.6 * max(var(--pzi-min), calc(var(--fs) * var(--u)))));
}
.pzi .tx.derecha { text-align: right; }
.pzi .mono { font-family: var(--pzi-mono); font-variant-numeric: tabular-nums; }
.pzi .redonda { font-family: var(--pzi-redonda); font-variant-numeric: tabular-nums; }
.pzi .ceja { /* Studio .eyebrow: 9 pt, semibold, monoespaciada, interletrado 1.4 (StudioTheme.swift:33) */
  font-family: var(--pzi-mono); font-weight: 600; letter-spacing: .155em; text-transform: uppercase; color: var(--pzi-tenue);
}
.pzi .tenue { color: var(--pzi-tenue); }
.pzi .apagada { color: var(--pzi-apagada); }
.pzi .debil { color: var(--pzi-debil); }
.pzi .ic { position: absolute; display: block; overflow: visible; }
.pzi .en-linea { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; stroke-width: 2; }
.pzi .punto { position: absolute; border-radius: 50%; background: var(--c, var(--pzi-tenue)); }
.pzi .foto { overflow: hidden; background: rgba(255, 255, 255, .05); }
.pzi .foto > img { width: 100%; height: 100%; object-fit: cover; }

/* Cristal (Liquid Glass de iOS 26: StudioTheme.swift:38-49, studioGlass).
   «solido» es el equivalente sin desenfoque, como el de Studio fuera de
   pantalla: el que se usa en el teléfono y mientras algo se mueve en 3D.
   Los valores salen de la captura: sobre negro el cristal da #1A1A1A–#1E1E1E;
   sobre la pared roja (146, 47, 43) da (113, 44, 41). */
.pzi .cristal {
  background: rgba(34, 34, 36, .6);
  box-shadow:
    inset 0 0 0 calc(.6 * var(--u)) rgba(255, 255, 255, .15),
    inset 0 calc(.8 * var(--u)) 0 rgba(255, 255, 255, .10),
    0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .22);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pzi[data-cristal="vivo"] .cristal {
    background: rgba(42, 42, 44, .42);
    -webkit-backdrop-filter: blur(calc(7 * var(--u))) saturate(1.15);
    backdrop-filter: blur(calc(7 * var(--u))) saturate(1.15);
  }
}
/* Sobre fondo oscuro (la tira, la toma, el monitor vertical): relleno plano. */
.pzi .celda { background: rgba(255, 255, 255, .07); }

/* ==========================================================================
   1 · El monitor (horizontal y vertical)
   Captura: log-antes-h, log-709-h, monitor-faro-h (h) · log-709-v (v).
   Código: Monitor/MonitorScreen.swift, Monitor/StoryboardShortcut.swift,
   Monitor/PortraitMonitorScreen.swift, Design/InstrumentButton.swift.
   ========================================================================== */
.pzi--monitor .pzi-pantalla { background: #000; }
.mon-imagen { overflow: hidden; background: #000; }
.mon-imagen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* La foto en Log va encima; su opacidad dice qué vista se ve (el motor la
   puede fundir: sólo opacidad). */
.mon-imagen .mon-log { opacity: 0; }
.pzi--monitor[data-vista="log"] .mon-imagen .mon-log { opacity: 1; }

.mon-rejilla i { position: absolute; display: block; background: rgba(255, 255, 255, .3); }
.mon-rejilla .vert { width: max(1px, calc(.7 * var(--u))); }
.mon-rejilla .horiz { height: max(1px, calc(.7 * var(--u))); }
.mon-cruz { color: rgba(255, 255, 255, .86); }

.mon-fuente { display: flex; align-items: center; justify-content: center; font-weight: 600; }

/* La cápsula 709 · LOG: un botón de verdad (es la interacción del plano). */
.mon-conmutador { position: absolute; border-radius: 999px; }
.mon-conmutador .pastilla {
  position: absolute; border-radius: 999px; background: rgba(255, 255, 255, .2);
  box-shadow: inset 0 calc(.6 * var(--u)) 0 rgba(255, 255, 255, .14);
}
.mon-conmutador .op { position: absolute; font-family: var(--pzi-mono); font-weight: 600; text-align: center; color: var(--pzi-tenue); }
.pzi--monitor[data-vista="709"] .mon-conmutador .op-709,
.pzi--monitor[data-vista="log"] .mon-conmutador .op-log { color: var(--pzi-tinta); }
.pzi--monitor[data-vista="log"] .mon-conmutador .pastilla { left: calc(var(--x-log) * var(--u)); }

.mon-story { overflow: hidden; }
.mon-story .foto { position: absolute; }
.mon-story .div { position: absolute; width: max(1px, calc(.6 * var(--u))); background: rgba(255, 255, 255, .2); }

.mon-herr { position: absolute; color: rgba(245, 245, 235, .78); }  /* Studio.ink.opacity(0.75) */
.mon-herr.activa { background: var(--fondo-activa); border-radius: calc(6 * var(--u)); }
.mon-herr.menta { color: var(--pzi-menta); --fondo-activa: rgba(176, 222, 194, .12); }
.mon-herr.lila { color: var(--pzi-lila); --fondo-activa: rgba(194, 168, 222, .12); }
.mon-herr .tx { position: absolute; left: 0; right: 0; text-align: center; font-family: var(--pzi-mono); font-weight: 600; }

.mon-lecturas .div, .mon-v-lecturas .div { position: absolute; width: max(1px, calc(.5 * var(--u))); background: var(--pzi-raya); }
.mon-lecturas .detalle { overflow: hidden; text-overflow: ellipsis; }

.mon-vumetro .barra { position: absolute; border-radius: 999px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.mon-vumetro .barra i { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(245, 245, 235, .86); border-radius: 999px; }
.mon-vumetro .pico { position: absolute; background: rgba(245, 245, 235, .92); border-radius: calc(.5 * var(--u)); }
.mon-vumetro .tx { color: #979B9C; font-family: var(--pzi-mono); }

/* REC: el círculo de 47 pt dentro de un aro de 59 (MonitorScreen.swift:267-273).
   Grabando, el círculo se vuelve un cuadrado de 25 pt con esquina de 5: son
   dos nodos para que el motor los funda sólo con opacidad y escala. */
.mon-rec .aro { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(245, 245, 235, .9); }
.mon-rec .circulo, .mon-rec .cuadro { position: absolute; background: var(--pzi-coral); }
.mon-rec .circulo { border-radius: 50%; }
.mon-rec .cuadro { border-radius: calc(5 * var(--u)); opacity: 0; }
.pzi--monitor[data-estado="grabando"] .mon-rec .circulo { opacity: 0; }
.pzi--monitor[data-estado="grabando"] .mon-rec .cuadro { opacity: 1; }
.pzi--monitor[data-estado="grabando"] .mon-siguiente { opacity: 0; visibility: hidden; }
.pzi--monitor .mon-archivo .grabando { display: none; }
.pzi--monitor[data-estado="grabando"] .mon-archivo .listo { display: none; }
.pzi--monitor[data-estado="grabando"] .mon-archivo .grabando { display: block; }

/* Vertical: la ficha de la escena y la fila del formato. */
.mon-v-ficha .titulo { font-weight: 600; letter-spacing: -.02em; }
.mon-v-ficha .cita { position: absolute; background: var(--t-luz); border-radius: 999px; }
.mon-v-formato .chevron { color: var(--pzi-tenue); }
.mon-v-playback { background: rgba(255, 255, 255, .06); color: rgba(245, 245, 235, .55); }

/* Capas sobre el monitor (aviso de disco, voz, rueda de ISO): apagadas hasta
   que el motor o el toque las enciende. */
.pzi .capa { opacity: 0; visibility: hidden; }
.pzi .capa.encendida { opacity: 1; visibility: visible; }
.pzi .quedan-aviso { display: none; }
.pzi--monitor[data-capa-activa="aviso"] .quedan-normal { display: none; }
.pzi--monitor[data-capa-activa="aviso"] .quedan-aviso { display: block; color: var(--pzi-ambar); }
.pzi--monitor[data-capa-activa="aviso"] .ceja-quedan { color: var(--pzi-ambar); }
.pzi--monitor[data-capa-activa="iso"] .ceja-iso { color: var(--pzi-azul); }
.capa-voz .voz-opcion { background: rgba(255, 255, 255, .06); }
.capa-iso .iso-valores { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, #000 88%, transparent 100%); }
.capa-iso .iso-elegido, .capa-iso .iso-base-elegida { background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 calc(.6 * var(--u)) rgba(255, 255, 255, .16), inset 0 calc(.8 * var(--u)) 0 rgba(255, 255, 255, .12); }

/* ==========================================================================
   2 · La tira del rodaje (rodaje-tira-h)
   Código: Slate/SceneStrip.swift (beta 227; la captura es de la 295).
   ========================================================================== */
.pzi--tira .pzi-pantalla {
  /* La luz de los territorios de la escena, medida en la captura: azul de «La
     tormenta» a la izquierda (+20/22/29 sobre el fondo) y cálida de «La luz que se
     apaga» bajo el storyboard (+18/15/9). */
  background:
    radial-gradient(42% 70% at 3% 42%, rgba(128, 134, 180, .17), rgba(128, 134, 180, 0) 100%),
    radial-gradient(34% 34% at 30% 66%, rgba(201, 147, 90, .11), rgba(201, 147, 90, 0) 100%),
    var(--pzi-suelo);
}
.tira-cap { background: rgba(255, 255, 255, .095); box-shadow: inset 0 0 0 calc(.6 * var(--u)) rgba(255, 255, 255, .1), inset 0 calc(.8 * var(--u)) 0 rgba(255, 255, 255, .07); border-radius: 999px; }
.tira-dias { overflow: hidden; border-radius: 999px;
  -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent 99%);
  mask-image: linear-gradient(90deg, #000 84%, transparent 99%); }
.tira-dias .pastilla { position: absolute; border-radius: 999px; background: rgba(255, 255, 255, .22); box-shadow: inset 0 calc(.6 * var(--u)) 0 rgba(255, 255, 255, .14); }
.tira-dias .tx { position: absolute; font-weight: 500; color: rgba(247, 245, 240, .62); }
.tira-dias .tx.activo { font-weight: 600; color: var(--pzi-tinta); }
.tira-boton { display: block; }
.tira-boton .tx { position: absolute; font-weight: 600; }
.tira-boton .cuenta { color: var(--pzi-ambar); }
.tira-boton.cerrar { color: var(--pzi-tenue); }

.tira-story { overflow: hidden; background: rgba(255, 255, 255, .05); }
.tira-story > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tira-story .codigo { position: absolute; font-family: var(--pzi-mono); font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.tira-story .puntos { position: absolute; border-radius: 999px; background: rgba(20, 20, 22, .55); box-shadow: inset 0 0 0 calc(.6 * var(--u)) rgba(255, 255, 255, .14); }
.tira-story .puntos i { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .42); }
.tira-story .puntos i.activo { background: #fff; }

.tira-ficha .titulo { font-weight: 600; letter-spacing: -.02em; }
.tira-ficha .cita { position: absolute; background: var(--t-luz); border-radius: 999px; }
.tira-ficha .linea { white-space: normal; }
.tira-ficha .estrellas { color: var(--pzi-ambar); }
.tira-ficha .estrellas .vacia { color: var(--pzi-debil); }
.tira-accion { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 calc(.6 * var(--u)) rgba(255, 255, 255, .1), inset 0 calc(.8 * var(--u)) 0 rgba(255, 255, 255, .07); border-radius: 999px; }
.tira-accion .tx { position: absolute; font-weight: 600; }

/* La tira de escenas: la elegida a 124 × 70 y las demás al 0.72, con 0.75 de
   opacidad (SceneStrip.swift:440-442), pero maquetadas ya a su tamaño: nada se
   escala con transform. Las filmadas, desaturadas (SceneStrip.swift:461). */
.tira-tarjeta .foto { position: absolute; border-radius: calc(var(--rf) * var(--u)); }
.tira-tarjeta .foto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 calc(.6 * var(--u)) rgba(255, 255, 255, .1); pointer-events: none; }
.tira-tarjeta.lejos { opacity: .75; }
.tira-tarjeta.filmada .foto > img { filter: saturate(.25); opacity: .7; }
.tira-tarjeta.elegida .foto::after { box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--pzi-ambar); }
.tira-tarjeta .hechas { position: absolute; font-family: var(--pzi-mono); font-weight: 700; color: #fff; text-align: center; border-radius: 999px; background: rgba(0, 0, 0, .6); }
.tira-tarjeta.elegida .hechas { background: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.tira-tarjeta .dia { position: absolute; font-family: var(--pzi-mono); font-weight: 600; letter-spacing: .14em; color: rgba(174, 171, 165, .62); text-transform: uppercase; }
.tira-tarjeta .esc { font-family: var(--pzi-mono); font-weight: 700; color: rgba(247, 245, 240, .85); }
.tira-tarjeta.elegida .esc { color: var(--pzi-ambar); }
.tira-tarjeta .slug { color: var(--pzi-tenue); }
.tira-tarjeta.elegida .slug { color: var(--pzi-tinta); }
.tira-tarjeta .pie { position: absolute; display: flex; align-items: center; white-space: nowrap; }
.tira-tarjeta .bandeja { position: absolute; border-radius: calc(7.2 * var(--u)); background: rgba(255, 255, 255, .055); text-align: center; color: var(--pzi-tenue); }
.tira-raya { position: absolute; width: max(1px, calc(.6 * var(--u))); background: rgba(241, 187, 116, .2); }

/* Los puntos de territorio, solos o encimados (captura: ◖● y ◖◖●). */
.pzi .puntos-t { position: absolute; display: block; }
.pzi .puntos-t.en-fila { position: relative; flex: none; }
.pzi .puntos-t i { position: absolute; top: 0; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 calc(.8 * var(--u)) rgba(0, 0, 0, .55); }

/* ==========================================================================
   3 · La toma recién cortada (toma-h; diseño de «La función», datos de Isla Bruma)
   Código: Panels/TakeRatingScreen.swift.
   ========================================================================== */
.pzi--toma .pzi-pantalla { background: linear-gradient(180deg, #0C0B0E, #101012); }
.toma-redondo { border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 calc(.6 * var(--u)) rgba(255, 255, 255, .1), inset 0 calc(.8 * var(--u)) 0 rgba(255, 255, 255, .06); color: var(--pzi-tinta); }
.toma-redondo.cerrar { color: var(--pzi-tenue); }
.toma-guardar { background: var(--pzi-boton); color: #161616; border-radius: 999px; }
.toma-guardar .tx { position: absolute; font-weight: 600; }
.toma-titulo { font-weight: 600; letter-spacing: -.02em; }
.toma-encabezado { font-weight: 600; }
.toma-foto { overflow: hidden; background: #000; }
.toma-foto > img { width: 100%; height: 100%; object-fit: cover; }
.toma-nota { background: rgba(255, 255, 255, .06); }
.toma-nota-ic { color: rgba(245, 245, 235, .4); }

/* Las estrellas: botones. Se llenan hasta la que se toca y, si se toca la
   misma, vuelven a cero (TakeRatingScreen.swift:51). Escala 0.97 al pulsar
   (StudioPress, StudioTheme.swift:54). */
.pzi .toma-estrella { position: absolute; color: var(--pzi-debil); transition: transform 120ms ease-out; }
.pzi .toma-estrella.llena { color: var(--pzi-ambar); }
.toma-estrella:active { transform: scale(.97); }
.toma-estrella .ic { inset: 0; margin: auto; }
.toma-estrella .llena-ic { display: none; }
.toma-estrella.llena .llena-ic { display: block; }
.toma-estrella.llena .vacia-ic { display: none; }
/* La caja de las estrellas: invisible en reposo; es lo que viaja al reporte
   (escaleta del iPhone, plano 9). */
.toma-estrellas-caja { opacity: 0; background: rgba(34, 34, 36, .78); box-shadow: inset 0 0 0 calc(.6 * var(--u)) rgba(255, 255, 255, .15), 0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(0, 0, 0, .5); }

.pzi .toma-tarjeta { display: block; text-align: left; border-radius: calc(16 * var(--u)); background: rgba(255, 255, 255, .055); }
.pzi .toma-tarjeta[aria-pressed="true"] { background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 calc(.6 * var(--u)) rgba(255, 255, 255, .12), inset 0 calc(.8 * var(--u)) 0 rgba(255, 255, 255, .08); }
.toma-tarjeta .tx { position: absolute; }
.toma-tarjeta .t-titulo { font-weight: 600; white-space: normal; }
.toma-tarjeta .t-detalle { white-space: normal; }
.toma-tarjeta .foto { position: absolute; border-radius: calc(8 * var(--u)); }
.toma-tarjeta .marca { position: absolute; border-radius: 50%; background: #F2F0EC; color: #111; display: none; }
.toma-tarjeta[aria-pressed="true"] .marca { display: block; }
.toma-tarjeta .marca .ic { inset: 0; margin: auto; }
/* La copia impresa de la siguiente escena: papel, un poco girado, con lo
   escrito a mano. El giro va en un nodo de dentro: la caja es del motor. */
.toma-papel .hoja {
  position: absolute; inset: 0; border-radius: calc(2.5 * var(--u));
  background: radial-gradient(80% 60% at 30% 20%, rgba(255, 255, 255, .35), transparent 70%), var(--pzi-papel);
  box-shadow: 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, .5) inset, 0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, .5), 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .3);
  transform: rotate(-2deg);
}
.toma-papel .hoja .foto { position: absolute; border-radius: calc(1 * var(--u)); }
.toma-papel .mano { position: absolute; font-family: var(--pzi-mano); font-weight: 700; color: var(--pzi-tinta-mano); white-space: nowrap; }

/* ==========================================================================
   4 · La página del reporte en PDF (reporte-1 · ejemplo «La primera luz»)
   Código: Views/Cinema/ReportDocument.swift (Paper, A4 de 595 × 842 pt).
   ========================================================================== */
.pzr {
  --pzr-tinta: #121417;      /* Paper.ink (0.07, 0.08, 0.09) */
  --pzr-suave: #666E75;      /* Paper.inkSoft (0.40, 0.43, 0.46) */
  --pzr-debil: #9EA6AD;      /* Paper.inkFaint (0.62, 0.65, 0.68) */
  --pzr-pelo: #DEE0E3;       /* Paper.hair (0.87, 0.88, 0.89) */
  --pzr-circulo: #C72620;    /* Paper.circled (0.78, 0.15, 0.12) */
  --pzr-marca: #F0C468;      /* Paper.brand */
  position: relative; width: 100%;
  container: pzr / inline-size;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.pzr *, .pzr *::before, .pzr *::after { box-sizing: border-box; }
.pzr .hoja {
  --u: calc(100cqw / 595);
  position: relative; width: 100%; aspect-ratio: 595 / 842; overflow: hidden;
  background: #fff; color: var(--pzr-tinta);
  box-shadow: 0 calc(18 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, .45);
  padding: calc(38 * var(--u));
}
.pzr .t { font-size: max(var(--pzr-min, 0px), calc(var(--fs) * var(--u))); line-height: 1.2; }
.pzr .mono { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.pzr .rot { font-weight: 700; text-transform: uppercase; color: var(--pzr-suave); }
.pzr .fila { display: flex; align-items: baseline; }
.pzr .placa .im { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #F6F6F6; outline: calc(.6 * var(--u)) solid var(--pzr-pelo); outline-offset: calc(-.6 * var(--u)); overflow: hidden; }
.pzr .placa .im img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pzr .circulo { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: inset 0 0 0 calc(1.2 * var(--u)) var(--pzr-circulo); color: var(--pzr-circulo); }
.pzr .estrellas svg { display: block; }
.pzr .etiqueta-color { display: inline-block; border-radius: calc(2 * var(--u)); }
/* En el teléfono la hoja se recoloca: misma página, mismos bloques, letra de
   10 px como mínimo (la A4 entera a 390 px dejaría la letra en 4 px). */
@container pzr (max-width: 499px) {
  .pzr { --pzr-min: 10px; }
  .pzr .hoja { aspect-ratio: auto; --u: calc(100cqw / 390); padding: calc(20 * var(--u)) calc(18 * var(--u)); }
  .pzr .solo-escritorio { display: none !important; }
}
@container pzr (min-width: 500px) { .pzr .solo-telefono { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .pzi *, .pzi *::before, .pzi *::after { transition: none !important; animation: none !important; }
}