/* ==========================================================================
   CLAQ Studio · Sala oscura, en CSS
   Misión 016 · constructor. Sale del código de Studio, no del gusto: cada valor
   dice de qué archivo y línea viene. Rutas relativas a
   taller/016/fuente/studio/ (copiadas de la rama
   origin/claude/studio-territorios-al-rodaje-20261015, commit b75a5bd).

   Abreviaturas de origen:
     SO  = Sources/SuiteMac/Estudio/SalaOscura.swift
     EM  = Sources/SuiteMac/Estudio/EstiloMesa.swift
     MV  = Sources/SuiteMac/Diseño/Movimiento.swift
     CI  = Sources/SuiteMac/Diseño/Cine.swift
     LS  = Sources/SuiteMac/Estudio/LienzoSalaMesa.swift
     SM  = Sources/SuiteMac/Estudio/SetMesa.swift
     PJ  = Sources/SuiteMac/Estudio/Recursos/DemoIslaBruma/Proyecto.json
     DOC = Diseño/SALA_OSCURA.md
     CAP = captura de la 0.20 en taller/015/media/ (se dice cuál)

   Uso: <link rel="stylesheet" href="../sistema/tokens.css">. El oscuro es el
   predeterminado (DOC:46). Para el claro: <body data-tema="claro">.
   Ojo con el visor de artefactos: el fondo va en body, nunca sólo en html.
   ========================================================================== */

:root,
[data-tema="oscuro"] {
  color-scheme: dark;

  /* --- Color: superficies -------------------------------------------- */
  --sala-fondo: #0B0B0C;        /* EM:19 fondo (oscuro) · SO:13 Sala.fondo */
  --sala-papel: #161618;        /* EM:20 papel */
  --sala-control: #1C1C1F;      /* EM:22 control */
  --sala-hoja: #131315;         /* SO:23 la hoja del guion (oscuro) */
  --sala-visor: #171717;        /* EM:27 visor (igual en claro y oscuro) */
  --sala-sobre-visor: #F0EEEA;  /* EM:28 texto sobre el visor */

  /* --- Color: tinta en tres niveles (DOC:33) -------------------------- */
  --sala-tinta: #F2F0EC;        /* EM:17 tinta · SO:14 */
  --sala-secundaria: #A39D96;   /* EM:18 secundaria · SO:15 */
  --sala-tenue: #6E6A64;        /* SO:16 tenue */
  --sala-raya: #2A2A2D;         /* EM:23 linea · SO:17 Sala.raya */

  /* --- Color: señal (cada color dice una cosa) ------------------------ */
  --sala-ambar: #DFB27C;        /* EM:24 abierto · SO:18 Sala.ambar: «te toca decidir», cabezal, selección */
  --sala-cerrado: #D2C8BB;      /* EM:25 cerrado */
  --sala-coral: #FF6F63;        /* SO:19 sólo para grabar (igual en claro) */
  --sala-propuesta: #8A857E;    /* SO:21 lo que propone la máquina, borde discontinuo */

  /* --- La mesa del Lienzo: luz elíptica de la sala (LS:12-15) --------- */
  /* EllipticalGradient centrado en (58 %, 48 %), radio final 0.7 del lado. */
  --sala-mesa-centro: #1A1A1E;  /* LS:12 */
  --sala-mesa-medio: #0F0F11;   /* LS:13, en 0.55 */
  --sala-mesa-borde: #0A0A0B;   /* LS:14, en 1 */
  --sala-mesa: radial-gradient(ellipse 70% 70% at 58% 48%, var(--sala-mesa-centro) 0%, var(--sala-mesa-medio) 55%, var(--sala-mesa-borde) 100%);

  /* --- Post-its (SO:169-178) ------------------------------------------ */
  --sala-postit-base: #1D1D1F;  /* SO:169 base sobre la que se mezcla el color del territorio */
  --sala-postit-suelto: #2B2724;/* SO:170 nota sin territorio */
  --sala-postit-mezcla: 46%;    /* SO:170 cuánto color de territorio entra en el papel (oscuro) */
  --sala-postit-tira: .28;      /* SO:175 opacidad de la tira de pegamento */
  --sala-postit-sombra: 0 10px 28px rgba(0, 0, 0, .55); /* SO:178 radius 14, y 10 (blur CSS ≈ 2 × radius) */

  /* --- Superficies (aproximadas: CSS no tiene ultraThinMaterial) ------ */
  /* PanelSala (SO:56-62): material + blanco 0.085 a 72 % + brillo arriba + borde de luz + sombra. */
  --sala-panel-relleno: rgba(22, 22, 22, .72);                     /* SO:57 Color(white:0.085).opacity(0.72) */
  --sala-panel-brillo: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,0) 50%); /* SO:58 */
  --sala-panel-borde-arriba: rgba(255, 255, 255, .16);             /* SO:61 */
  --sala-panel-borde-abajo: rgba(255, 255, 255, .05);              /* SO:61 */
  --sala-panel-sombra: 0 18px 60px rgba(0, 0, 0, .45);             /* SO:62 radius 30, y 18 */
  --sala-panel-solido: #212121;                                    /* SO:56 equivalente sólido: Color(white:0.13) */
  /* CristalSala (SO:78-85): lo que flota. Equivalente sólido de Studio fuera de pantalla. */
  --sala-cristal-relleno: rgba(48, 48, 48, .92);                   /* SO:78 Color(white:0.19).opacity(0.92) */
  --sala-cristal-borde-arriba: rgba(255, 255, 255, .2);            /* SO:79 */
  --sala-cristal-borde-abajo: rgba(255, 255, 255, .06);            /* SO:79 */
  --sala-cristal-sombra: 0 6px 28px rgba(0, 0, 0, .35);            /* SO:80 radius 14, y 6 */
  /* Celdas que se repiten: relleno plano, nunca cristal (DOC:37-38). */
  --sala-celda: rgba(255, 255, 255, .06);                          /* DOC:38 entre 0.04 y 0.08 */
  --sala-luz-capsula-activa: rgba(255, 255, 255, .16);             /* SO:120 y SO:144 cápsula elegida */
  --sala-luz-capsula-encima: rgba(255, 255, 255, .08);             /* SO:120 al pasar el ratón */
  --sala-luz-pestanas: rgba(255, 255, 255, .06);                   /* SO:149 fondo de las pestañas */

  /* Texto sobre imagen: dos sombras, nunca un degradado (SO:36-37, SO:95). */
  --sala-legible: 0 1px 1.5px rgba(0, 0, 0, .85), 0 0 7px rgba(0, 0, 0, .55);
}

[data-tema="claro"] {
  color-scheme: light;
  --sala-fondo: #ECEAE6;        /* EM:19 (claro) */
  --sala-papel: #FBFAF7;        /* EM:20 */
  --sala-control: #FFFFFF;      /* EM:22 */
  --sala-hoja: #FBFAF7;         /* SO:23 */
  --sala-tinta: #1D1B19;        /* EM:17 */
  --sala-secundaria: #6B655F;   /* EM:18 */
  --sala-tenue: #8C867E;        /* SO:16 */
  --sala-raya: #D6D1C9;         /* EM:23 */
  --sala-ambar: #8A5F26;        /* EM:24 */
  --sala-cerrado: #6D645B;      /* EM:25 */
  --sala-propuesta: #8C867E;    /* SO:21 */
  --sala-mesa-centro: #F6F4F0;  /* LS:12 */
  --sala-mesa-medio: #EFECE7;   /* LS:13 */
  --sala-mesa-borde: #E8E5E0;   /* LS:14 */
  --sala-postit-base: #F4F1EA;  /* SO:169 */
  --sala-postit-suelto: #EFE9DD;/* SO:170 */
  --sala-postit-mezcla: 28%;    /* SO:170 */
  --sala-postit-tira: .16;      /* SO:175 */
  --sala-postit-sombra: 0 10px 28px rgba(0, 0, 0, .18); /* SO:178 */
  --sala-panel-relleno: rgba(255, 255, 255, .55);       /* SO:57 */
  --sala-panel-brillo: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 50%); /* SO:58 */
  --sala-panel-borde-arriba: rgba(255, 255, 255, .7);   /* SO:61 */
  --sala-panel-borde-abajo: rgba(255, 255, 255, .25);   /* SO:61 */
  --sala-panel-sombra: 0 18px 60px rgba(0, 0, 0, .12);  /* SO:62 */
  --sala-panel-solido: #EDEDED;                         /* SO:56 Color(white:0.93) */
  --sala-cristal-relleno: rgba(255, 255, 255, .88);     /* SO:78 */
  --sala-cristal-borde-arriba: rgba(255, 255, 255, .9); /* SO:79 */
  --sala-cristal-borde-abajo: rgba(255, 255, 255, .4);  /* SO:79 */
  /* En claro el blanco no se ve: las cápsulas se iluminan con la tinta (SO:111-112). */
  --sala-luz-capsula-activa: rgba(29, 27, 25, .10);     /* SO:120 */
  --sala-luz-capsula-encima: rgba(29, 27, 25, .06);     /* SO:120 */
  --sala-luz-pestanas: rgba(29, 27, 25, .05);           /* SO:149 */
  --sala-celda: rgba(29, 27, 25, .05);
}

:root {
  /* --- Territorios de Isla Bruma (PJ, grupos[].color) ----------------- */
  /* Un territorio usa su propio colorHex y nada más (DOC:30). */
  --t-isla: #7F98AC;      /* PJ grupos[0] «La isla respira» */
  --t-luz: #C9935A;       /* PJ grupos[1] «La luz que se apaga» */
  --t-cintas: #B07FA6;    /* PJ grupos[2] «Cintas para mamá» */
  --t-silencio: #86A487;  /* PJ grupos[3] «Lo que no se dice» */
  --t-tormenta: #8086B4;  /* PJ grupos[4] «La tormenta» */
  --t-sonido: #6FA293;    /* PJ grupos[5] «Sonido y música» */
  --t-sin-color: #8C857E; /* LienzoMesa.swift:204 territorio sin color */
  /* Paleta que Studio ofrece a un territorio nuevo (EM:29); Isla Bruma no la usa. */
  --t-paleta-1: #538CA7; --t-paleta-2: #AD789E; --t-paleta-3: #8E8176;
  --t-paleta-4: #BE8F53; --t-paleta-5: #7C83AE; --t-paleta-6: #BD7866;
  /* La luz de un territorio en la mesa: 26 % de su color en el centro (SO:195-197).
     Uso: background: radial-gradient(closest-side, color-mix(in srgb, var(--t-isla) 26%, transparent), … ) */
  --t-luz-centro: 26%;

  /* --- Franja del plan de rodaje: INT/EXT y DÍA/NOCHE (SM:205-208) ---- */
  --set-int-dia: #E6E0D4;   /* SM:205 (oscuro; en claro #D8D0C0) */
  --set-ext-dia: #D9B24C;   /* SM:206 */
  --set-int-noche: #5C7EB4; /* SM:207 */
  --set-ext-noche: #5E9467; /* SM:208 */

  /* --- Desglose: código de colores de Producción ---------------------- */
  /* No está en el código copiado (la 0.20 es posterior a esa rama): se muestrearon
     píxeles de CAP guion-marcado-2400.webp. «fondo» y «línea» son el relleno y el
     subrayado; en la hoja clara salen de las marcas, en la leyenda oscura, de las
     muestras de la columna izquierda. */
  --d-reparto-fondo: #46282B;   --d-reparto-linea: #BC7576;   --d-reparto-hoja: #DEBCBA;   --d-reparto-hoja-linea: #AC6A6A;
  --d-dobles-fondo: #492F1C;    --d-dobles-linea: #BE7E58;
  --d-efectos-fondo: #2D3849;   --d-efectos-linea: #87A5CB;   --d-efectos-hoja: #C3CEE1;   --d-efectos-hoja-linea: #476694;
  --d-props-fondo: #3E3349;     --d-props-linea: #A890C4;     --d-props-hoja: #D4C4DE;     --d-props-hoja-linea: #734995;
  --d-vehiculos-fondo: #493541; --d-vehiculos-linea: #CE9FB8; --d-vehiculos-hoja: #DEC1C9; --d-vehiculos-hoja-linea: #934768;
  --d-sonido-fondo: #3D2F26;    --d-sonido-linea: #A2816A;    --d-sonido-hoja: #CDC8BE;    --d-sonido-hoja-linea: #674B38;
  --d-vestuario-borde: #81A19F; /* óvalo, sin relleno */      --d-vestuario-hoja-borde: #55746C;
  --d-maquillaje: #B3CDC7;      /* asterisco */               --d-maquillaje-hoja: #DFE4DE; --d-maquillaje-hoja-linea: #536C68;
  --d-equipo-borde: #90969D;    /* caja, sin relleno */       --d-equipo-hoja-borde: #616878;
  --d-escenografia-fondo: #3C3D28; --d-escenografia-linea: #A8AE7C;
  --d-locaciones-fondo: #373B31;   --d-locaciones-linea: #A4A997; --d-locaciones-hoja: #CBCFC5; --d-locaciones-hoja-linea: #687059;
  --d-notas-linea: #A7A7A4;     /* sólo subrayado */
  --d-hoja-papel: #FCFAF6;      /* CAP guion-marcado: el guion marcado se lee en papel claro, también en oscuro */

  /* --- Esquinas (SO:31-33; CI:131-133) -------------------------------- */
  --sala-esquina-panel: 22px;    /* SO:31 */
  --sala-esquina-imagen: 10px;   /* SO:32 fotos sin marco */
  --sala-esquina-control: 12px;  /* SO:33 */
  --sala-esquina-mesa: 16px;     /* EM:118 superficieMesa = panelSala(radio:16) */
  --sala-esquina-postit: 2px;    /* SO:176 */
  --sala-esquina-capsula: 999px; /* SO:69 cristal y cápsulas */
  /* Las de Cine (radios cortos «de instrumento»), por si una pieza vieja las usa: */
  --cine-radio-grupo: 10px;      /* CI:131 */
  --cine-radio-pildora: 7px;     /* CI:132 */
  --cine-radio-corto: 5px;       /* CI:133 */

  /* --- Letra: la del sistema y la monoespaciada (SO:25-28; DOC:34) ----- */
  /* Sin serif ni condensada. En Linux, las capturas sustituyen SF por Inter
     (taller/016/herramientas/fonts.conf); la página no carga ninguna letra. */
  --sala-letra: system-ui, -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
  --sala-letra-titulos: system-ui, -apple-system, "SF Pro Display", "Helvetica Neue", sans-serif;
  --sala-mono: ui-monospace, "SF Mono", Menlo, monospace;
  /* El guion es una hoja con letra de máquina (DOC:45; CAP guion-entre-hojas). */
  --sala-guion: "Courier Prime", "Courier New", Courier, monospace;
  --sala-peso-titulo: 600;       /* SO:26 semibold */
  --sala-peso-texto: 400;        /* SO:27 regular */
  --sala-peso-dato: 500;         /* SO:28 medium */
  --sala-texto: 13px;            /* SO:27 tamaño por defecto */
  --sala-dato: 11px;             /* SO:28 */
  --sala-rotulo: 9.5px;          /* SO:157 RotuloSala: mono 9.5 semibold, tracking 1.5, mayúsculas */
  --sala-rotulo-tracking: 1.5px; /* SO:157 · EM:86 */
  --sala-gota: 12.5px;           /* SO:116 texto de las cápsulas */
  --sala-pestana: 12px;          /* SO:141 (11 en compacto) */
  /* Tracking según tamaño (CI:166-172): +0.2 bajo 11, 0 hasta 15, -0.2 hasta 20, -0.4 encima. */
  --cine-tracking-chico: .2px;
  --cine-tracking-grande: -.2px;
  --cine-tracking-titular: -.4px;

  /* --- Medidas de controles ------------------------------------------- */
  --sala-gota-alto: 32px;        /* SO:119 minHeight 32 */
  --sala-gota-relleno: 14px;     /* SO:119 padding horizontal */
  --sala-pestana-alto: 28px;     /* SO:143 (24 en compacto) */
  --sala-accion-alto: 34px;      /* EM:76 AccionMesa */

  /* --- Movimiento (curvas) -------------------------------------------- */
  /* Resortes de SwiftUI traducidos a CSS linear(): se muestreó la respuesta
     de un resorte de masa 1 con ω = 2π/response y la amortiguación dada, hasta
     quedar a menos de 0.001 del destino. Mismo cálculo en motor.js (Pelicula.resorte). */
  /* SO:35 Sala.movimiento: spring(response 0.26, damping 0.92). Abrir, cerrar, cambiar de sitio. */
  --sala-resorte: linear(0, 0.0335, 0.1129, 0.2149, 0.3239, 0.4305, 0.529, 0.6167, 0.6925, 0.7566, 0.8097, 0.853, 0.8879, 0.9156, 0.9372, 0.954, 0.9668, 0.9765, 0.9837, 0.989, 0.9928, 0.9955, 0.9974, 0.9987, 1);
  --sala-resorte-duracion: 280ms;
  /* SO:35 con Reducir movimiento: easeOut 0.12 s. */
  --sala-reducido: cubic-bezier(0, 0, .58, 1);
  --sala-reducido-duracion: 120ms;
  /* MV:43 normal: spring(0.35, 1), críticamente amortiguado. */
  --mv-normal: linear(0, 0.0586, 0.1833, 0.3254, 0.4607, 0.5788, 0.6769, 0.7554, 0.8169, 0.8642, 0.9, 0.9268, 0.9468, 0.9614, 0.9722, 0.98, 0.9857, 0.9898, 0.9927, 0.9948, 0.9963, 0.9974, 0.9982, 0.9987, 1);
  --mv-normal-duracion: 520ms;
  /* MV:49 conInercia: spring(0.4, 0.8), rebote corto (sube a 1.015). Sólo si algo llega con impulso. */
  --mv-inercia: linear(0, 0.0517, 0.1705, 0.3164, 0.4638, 0.5982, 0.7125, 0.8045, 0.8753, 0.9273, 0.9637, 0.9878, 1.0026, 1.0108, 1.0144, 1.0151, 1.0141, 1.0122, 1.0099, 1.0077, 1.0057, 1.0041, 1.0027, 1.0017, 1);
  --mv-inercia-duracion: 540ms;
  /* MV:53 panel: spring(0.3, 0.9). Paneles y hojas. */
  --mv-panel: linear(0, 0.0495, 0.161, 0.2956, 0.4305, 0.5535, 0.6591, 0.746, 0.815, 0.8685, 0.9088, 0.9384, 0.9598, 0.9747, 0.985, 0.9918, 0.9962, 0.9989, 1.0004, 1.0012, 1.0015, 1.0015, 1.0014, 1.0012, 1);
  --mv-panel-duracion: 400ms;
  /* MV:60 entrada: easeOut 0.22 s. Aparecer y desaparecer, siempre hacia fuera. */
  --mv-entrada: cubic-bezier(0, 0, .58, 1);
  --mv-entrada-duracion: 220ms;
  /* MV:64 pulsación: spring(0.18, 1). */
  --mv-pulsacion: linear(0, 0.0596, 0.186, 0.3294, 0.4656, 0.584, 0.6819, 0.7601, 0.821, 0.8677, 0.9029, 0.9292, 0.9487, 0.963, 0.9734, 0.9809, 0.9864, 0.9903, 0.9931, 0.9951, 0.9966, 0.9976, 0.9983, 0.9988, 1);
  --mv-pulsacion-duracion: 270ms;
  /* MV:115 movimiento reducido: easeOut 0.15 s, sólo opacidad y color. */
  --mv-reducido-duracion: 150ms;
  --mv-escala-pulsar: .97;       /* MV:68 */
  --mv-escala-pulsar-mesa: .975; /* EM:65 PulsarMesa */
  --mv-escala-aparece: .96;      /* MV:126 nunca desde escala cero */
  --mv-escalonado: 45ms;         /* MV:100 retraso entre elementos de un grupo (30 a 80 ms) */
  --mv-desplazamiento-min: 6px;  /* DOC:52 transiciones: opacity u offset de 6 a 18 pt */
  --mv-desplazamiento-max: 18px; /* DOC:52 */
}

/* --- El cuerpo lleva el fondo (el visor de artefactos ignora el de html) -- */
body {
  background: var(--sala-fondo);
  color: var(--sala-tinta);
  font-family: var(--sala-letra);
  font-size: var(--sala-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Ayudas: las piezas de SalaOscura.swift como clases ------------------ */
/* Las usa quien quiera; no imponen tamaños. */

/* PanelSala (SO:48-63). El desenfoque es caro en el teléfono: --sala-panel-solido
   es el equivalente que Studio usa cuando no puede pintar el material (SO:56). */
.sala-panel {
  border-radius: var(--sala-esquina-panel);
  background: var(--sala-panel-brillo), var(--sala-panel-relleno);
  box-shadow: inset 0 1px 0 var(--sala-panel-borde-arriba), inset 0 0 0 1px var(--sala-panel-borde-abajo), var(--sala-panel-sombra);
}
.sala-panel--solido { background: var(--sala-panel-brillo), var(--sala-panel-solido); }

/* CristalSala (SO:68-88), en su versión sólida. */
.sala-cristal {
  border-radius: var(--sala-esquina-capsula);
  background: var(--sala-cristal-relleno);
  box-shadow: inset 0 1px 0 var(--sala-cristal-borde-arriba), inset 0 0 0 1px var(--sala-cristal-borde-abajo), var(--sala-cristal-sombra);
}

/* RotuloSala (SO:154-158): «ESCENA 1», «INTENCIÓN DEL MONTAJE». */
.sala-rotulo {
  font: var(--sala-peso-titulo) var(--sala-rotulo)/1.2 var(--sala-mono);
  letter-spacing: var(--sala-rotulo-tracking);
  text-transform: uppercase;
  color: var(--sala-tenue);
}

/* Sala.dato (SO:28): cifras que no bailan. */
.sala-dato {
  font: var(--sala-peso-dato) var(--sala-dato)/1.3 var(--sala-mono);
  font-variant-numeric: tabular-nums;
}

/* Texto que se lee sobre una foto (SO:94-96). */
.sala-legible { text-shadow: var(--sala-legible); }

/* Imagen sin marco (DOC:40). */
.sala-imagen { border-radius: var(--sala-esquina-imagen); display: block; }

/* Lo que propone la máquina: borde discontinuo (SO:20-21, DOC:43). */
.sala-propuesta { outline: 1px dashed color-mix(in srgb, var(--sala-propuesta) 55%, transparent); outline-offset: -1px; }