/* CRIATech · Panel de Reels · mesa de montaje.
   Tokens de interno/_agente.css y scripts/marca.py: mismos valores en ambos. */

@font-face { font-family: 'Space Grotesk'; src: url('/fuentes/SpaceGrotesk.ttf') format('truetype'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fuentes/JetBrainsMono.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }

:root {
  --bg-0:#05070a; --bg-1:#0a0d12; --bg-2:#0c1016; --bg-3:#11151b; --linea:#1a1f28;
  --cyan:#2a8ae0; --cyan-3:#5fb8ff; --verde:#4ac28a; --rojo:#ff6b6b; --oro:#e8b257;
  --fg-0:#f6f6f4; --fg-1:#e9edf2; --fg-2:#8a93a2; --fg-3:#5b6370;
  --display:'Space Grotesk', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --r:10px; --r-s:6px;
  --rapido:150ms; --suave:cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing:border-box; margin:0; }
html { color-scheme:dark; }
body { background:var(--bg-0); color:var(--fg-1); font:400 15px/1.5 var(--display); min-height:100vh; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
a, .enlace { color:var(--cyan-3); background:none; border:0; padding:0; font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--cyan-3); outline-offset:2px; border-radius:var(--r-s); }
h2 { font:600 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-2); margin-bottom:12px; }

/* ---------- Cabecera ---------- */
.cabecera { display:flex; align-items:center; gap:20px; padding:14px 16px; border-bottom:1px solid var(--linea); }
.marca { font:600 13px var(--mono); letter-spacing:.08em; text-transform:uppercase; margin-right:auto; }
.marca b { color:var(--cyan-3); font-weight:600; }
.punto { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--verde); margin-right:8px; }
.cabecera .enlace { white-space:nowrap; }

/* minmax(0, 1fr): sin esto, la tira de 7 pasos impone su ancho mínimo y en
   un celular la página entera se achica en vez de deslizar la tira. */
main { padding:16px; max-width:1440px; margin:0 auto; display:grid; grid-template-columns:minmax(0, 1fr); gap:28px; }

/* ---------- Tira del pipeline ---------- */
.vivo-resumen { font:500 13px var(--mono); color:var(--fg-2); margin-bottom:12px; }
.tira { list-style:none; padding:0; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; }
.paso { position:relative; padding:10px 8px 10px 30px; background:var(--bg-2); border:1px solid var(--linea); border-radius:var(--r-s); min-width:0; }
.paso .forma { position:absolute; left:10px; top:14px; width:12px; height:12px; border-radius:50%; border:2px solid var(--fg-3); }
.paso.compuerta .forma { border-radius:2px; transform:rotate(45deg); }
.paso .fase { display:block; font-weight:600; font-size:12px; color:var(--fg-0); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.paso .detalle { display:block; font:400 11px var(--mono); color:var(--fg-2); }
.paso.running { border-color:var(--cyan); }
.paso.running .forma { border-color:var(--cyan-3); border-right-color:transparent; }
.paso.completed .forma { border-color:var(--verde); background:var(--verde); }
.paso.failed .forma { border-color:var(--rojo); background:repeating-linear-gradient(45deg, var(--rojo) 0 2px, transparent 2px 4px); }
.paso.reintento { border-style:dashed; border-color:var(--oro); }
.paso.reintento .detalle { color:var(--oro); }
@media (prefers-reduced-motion: no-preference) {
  .paso.running .forma { animation:giro 1.1s linear infinite; }
  .paso.compuerta.running .forma { animation-name:giro-rombo; }
}
@keyframes giro { to { transform:rotate(360deg); } }
@keyframes giro-rombo { from { transform:rotate(45deg); } to { transform:rotate(405deg); } }

/* ---------- Mesa: carrete + ficha ---------- */
.mesa { display:grid; gap:28px; grid-template-columns:minmax(0, 1fr); }
@media (min-width:1024px) { .mesa { grid-template-columns:300px minmax(0, 1fr); } }

.carrete-lista {
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px, 240px); gap:10px;
  overflow-x:auto; padding:16px 2px; scroll-snap-type:x mandatory;
  /* Perforaciones de película arriba y abajo. */
  background:
    radial-gradient(circle, var(--bg-3) 3px, transparent 3.5px) 0 3px / 18px 10px repeat-x,
    radial-gradient(circle, var(--bg-3) 3px, transparent 3.5px) 0 calc(100% - 3px) / 18px 10px repeat-x;
}
@media (min-width:1024px) {
  .carrete-lista { grid-auto-flow:row; grid-auto-columns:auto; overflow-x:visible; overflow-y:auto; max-height:calc(100vh - 230px); }
}
.toma {
  scroll-snap-align:start; display:grid; grid-template-columns:54px minmax(0, 1fr);
  grid-template-areas:"cuadro pilar" "cuadro titulo" "cuadro meta" "cuadro sello";
  gap:2px 10px; align-content:start; text-align:left; padding:8px;
  background:var(--bg-1); border:1px solid var(--linea); border-radius:var(--r);
  color:inherit; font:inherit; cursor:pointer;
  transition:border-color var(--rapido), transform var(--rapido) var(--suave);
}
.toma:hover { border-color:var(--fg-3); transform:translateY(-1px); }
.toma:active { transform:translateY(0); }
.toma[aria-pressed="true"] { border-color:var(--cyan); box-shadow:inset 0 0 0 1px var(--cyan); }
.cuadro { grid-area:cuadro; aspect-ratio:9 / 16; background:var(--bg-3); border-radius:4px; overflow:hidden; }
.cuadro img { width:100%; height:100%; object-fit:cover; display:block; }
.pilar { grid-area:pilar; font:600 10px var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.acento-cyan { color:var(--cyan-3); } .acento-rojo { color:var(--rojo); } .acento-oro { color:var(--oro); }
.toma .titulo { grid-area:titulo; font-weight:600; font-size:13px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.toma .meta { grid-area:meta; font:400 11px var(--mono); color:var(--fg-2); }
.sello { grid-area:sello; font:600 10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--fg-2); }
.toma.lista .sello { color:var(--verde); }       .toma.lista .sello::before { content:"✓ "; }
.toma.revisar .sello { color:var(--oro); }       .toma.revisar .sello::before { content:"! "; }
.toma.incompleta .sello::before { content:"– "; }
.toma.en_curso .sello { color:var(--cyan-3); }   .toma.en_curso .sello::before { content:"● "; }

/* ---------- Ficha ---------- */
.ficha { min-width:0; }
.ficha > h2 { font:700 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.2 var(--display); color:var(--fg-0); letter-spacing:0; text-transform:none; margin-bottom:6px; }
.ficha > .meta { font:400 12px var(--mono); color:var(--fg-2); margin-bottom:18px; }
.ficha-cuerpo { display:grid; gap:24px; }
@media (min-width:768px) { .ficha-cuerpo { grid-template-columns:minmax(220px, 340px) minmax(0, 1fr); align-items:start; } }

.visor { position:relative; margin:0; }
.visor video { display:block; width:100%; aspect-ratio:9 / 16; background:#000; border:1px solid var(--linea); border-radius:var(--r); }
.zonas {
  position:absolute; inset:0 0 auto 0; aspect-ratio:9 / 16; pointer-events:none; opacity:0;
  border-radius:var(--r); transition:opacity var(--rapido);
  background:
    linear-gradient(to top, rgb(255 107 107 / .3) 16%, transparent 16%),
    linear-gradient(to left, rgb(255 107 107 / .3) 12%, transparent 12%);
}
.visor.con-zonas .zonas { opacity:1; }
.visor figcaption { display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; font-size:13px; }

.bloque { background:var(--bg-1); border:1px solid var(--linea); border-radius:var(--r); padding:16px; }
.bloque + .bloque { margin-top:16px; }
.bloque h3 { font:600 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-2); margin-bottom:10px; }
.red { border-top:1px solid var(--linea); padding:10px 0; }
.red:first-of-type { border-top:0; padding-top:0; }
.red summary { cursor:pointer; font-weight:600; }
.caption { white-space:pre-wrap; font-size:14px; margin:10px 0; max-height:320px; overflow:auto; }
.boton { font:600 13px var(--display); color:var(--bg-0); background:var(--cyan-3); border:0; border-radius:var(--r-s); padding:8px 14px; cursor:pointer; transition:background var(--rapido); }
.boton:hover { background:var(--fg-0); }
.boton:active { transform:translateY(1px); }
.boton:disabled { opacity:.5; cursor:not-allowed; }

.compuertas { list-style:none; padding:0; display:grid; gap:6px; }
.compuertas li { display:flex; align-items:center; gap:10px; font-size:14px; }
.compuertas .forma { flex:none; width:10px; height:10px; transform:rotate(45deg); border:2px solid var(--fg-3); }
.compuertas .aprobada .forma { background:var(--verde); border-color:var(--verde); }
.compuertas .rechazada .forma { border-color:var(--rojo); }
.nota { font-size:13px; color:var(--fg-2); margin-top:10px; }

.puntajes { display:grid; gap:6px; margin-top:12px; }
.puntaje { display:grid; grid-template-columns:minmax(0, 11em) 1fr; gap:10px; align-items:center; font-size:12px; }
.puntaje dt { color:var(--fg-2); }
.puntaje dt::first-letter { text-transform:uppercase; }
.puntaje dd { display:flex; align-items:center; gap:8px; margin:0; }
.barra { position:relative; flex:1; height:6px; background:var(--bg-3); border-radius:3px; overflow:hidden; }
.barra::before { content:""; position:absolute; inset:0; background:var(--verde); transform:scaleX(var(--v, 0)); transform-origin:left; }
.barra::after { content:""; position:absolute; top:0; bottom:0; left:70%; width:1px; background:var(--fg-1); }   /* umbral: 7/10 */
.puntaje.bajo .barra::before { background:var(--oro); }
.num { font:600 12px var(--mono); min-width:2ch; text-align:right; }

.fuentes { padding-left:1.1em; display:grid; gap:4px; font-size:14px; }
.vacio { color:var(--fg-2); font-size:13px; }

@media (max-width:767px) {
  .tira { grid-template-columns:repeat(7, minmax(96px, 1fr)); overflow-x:auto; padding-bottom:4px; }
}

/* ---------- Acceso ---------- */
.acceso main { min-height:100vh; place-items:center; }
.acceso form { width:min(360px, 100%); display:grid; gap:10px; }
.acceso h1 { font:600 13px var(--mono); letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; }
.acceso h1 b { color:var(--cyan-3); }
.acceso label { font-size:13px; color:var(--fg-2); }
.acceso input { font:inherit; color:var(--fg-0); background:var(--bg-0); border:1px solid var(--linea); border-radius:var(--r-s); padding:10px 12px; }
.error { color:var(--rojo); font-size:13px; min-height:1.5em; }