/* RISO ENGINE — mesa de taller de risografía.
   El lienzo es una hoja sobre un tapete de corte verde con cuadrícula; el
   panel es la ficha de trabajo de la máquina. Colores de acento = tintas Riso
   reales del catálogo (core/inks/inks.json): Fluorescent Pink, Medium Blue y
   Yellow para el foco. */
* { box-sizing: border-box; margin: 0; }

:root {
  /* tintas del catálogo */
  --fluo: #FF48B0;
  --blue: #3255A4;
  --yellow: #FFE800;
  /* tapete de corte: objeto físico, igual en los dos temas */
  --mat: #2F5D50;
  --mat-line: rgb(255 255 255 / 0.09);
  --mat-major: rgb(255 255 255 / 0.17);
  /* ficha de trabajo */
  --bg: #ECEBE6;
  --panel: #F7F6F2;
  --field: #FFFFFF;
  --ink: #1D1B22;
  --muted: #5E5A66;
  --line: #CFCCC4;
  --accent-text: #B5156F;   /* fluo pink oscurecido: 4.9:1 sobre --panel */
  --link: var(--blue);
  --ok: #1E6B3A;
  --warn: #8A5300;
  --badge-ok-bg: #D5EBDC;
  --badge-warn-bg: #F6E2BF;
  --shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 18px 40px rgb(10 30 25 / 0.45);
  --display: "Futura", "Avenir Next Condensed", "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --mat: #1F3D35;
    --bg: #141317;
    --panel: #1C1B20;
    --field: #26252B;
    --ink: #ECE8E1;
    --muted: #A29EAA;
    --line: #36343C;
    --accent-text: #FF7CC6;
    --link: #8FA8E8;
    --ok: #8ED3A4;
    --warn: #E8C27F;
    --badge-ok-bg: #20392A;
    --badge-warn-bg: #3F3220;
    color-scheme: dark;
  }
}

html, body { height: 100%; }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--body); }
#app { display: flex; flex-direction: column; height: 100dvh; }
#app[hidden] { display: none; }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 10; background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 6px; }
.skip:focus { top: 8px; }

/* ---------- cabecera ---------- */

header {
  display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
}
/* La marca es una impresión de dos pasadas mal registradas: la misma palabra
   en Medium Blue y en Fluorescent Pink, superpuestas en multiply con un
   desplazamiento de tambor. Es la firma del sitio. */
.brand {
  position: relative; display: inline-flex; align-items: baseline; gap: 8px;
  font: 800 26px/1 var(--display); letter-spacing: 0.06em; isolation: isolate;
}
.brand .ink-a, .brand .ink-b { mix-blend-mode: multiply; }
.brand .ink-a { color: var(--blue); }
.brand .ink-b { color: var(--fluo); position: absolute; left: 2.5px; top: -1.5px; transform: rotate(-0.6deg); opacity: 0.92; }
.brand small {
  font: 600 11px/1 var(--mono); letter-spacing: 0.3em; color: var(--muted);
  margin-left: 4px;
}
@media (prefers-color-scheme: dark) {
  .brand .ink-a, .brand .ink-b { mix-blend-mode: screen; }
  .brand .ink-a { color: #5D7FD0; }
}

.badge {
  font: 500 11px/1 var(--mono); padding: 5px 8px; border-radius: 999px;
  background: var(--badge-ok-bg); color: var(--ok); white-space: nowrap;
}
.badge.warn { background: var(--badge-warn-bg); color: var(--warn); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }

button, select, .filebtn {
  font: 500 13px/1.2 var(--body); color: var(--ink);
  background: var(--field); border: 1px solid var(--line);
  padding: 7px 12px; border-radius: 6px; cursor: pointer; min-height: 34px;
}
button:hover, .filebtn:hover, select:hover { border-color: var(--ink); }
.filebtn { display: inline-flex; align-items: center; position: relative; }
.filebtn:focus-within { outline: 3px solid var(--yellow); outline-offset: 2px; }
.filebtn.primary { background: var(--ink); color: var(--panel); border-color: var(--ink); font-weight: 600; }
.filebtn.primary:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
button:disabled { opacity: 0.5; cursor: progress; }

.seedbox { display: flex; align-items: center; gap: 0; }
.seedbox label { font: 500 11px/1 var(--mono); color: var(--muted); padding: 0 6px 0 0; text-transform: uppercase; letter-spacing: 0.08em; }
.seedbox input {
  width: 96px; min-height: 34px; padding: 5px 8px; font: 13px var(--mono);
  background: var(--field); color: var(--ink); border: 1px solid var(--line); border-radius: 6px 0 0 6px;
}
.seedbox button { border-radius: 0 6px 6px 0; border-left: none; font-size: 18px; padding: 2px 10px; }

.exports { display: flex; align-items: center; }
.exports .grouplabel { font: 500 11px/1 var(--mono); color: var(--muted); padding-right: 6px; text-transform: uppercase; letter-spacing: 0.08em; }
.exports button { border-radius: 0; margin-left: -1px; }
.exports button:first-of-type { border-radius: 6px 0 0 6px; margin-left: 0; }
.exports button:last-of-type { border-radius: 0 6px 6px 0; }
.exports button:hover { position: relative; z-index: 1; }

/* ---------- presets: cada tarjeta es una hoja con sus tintas ---------- */

.presets {
  display: flex; gap: 10px; padding: 10px 16px; overflow-x: auto;
  border-bottom: 1px solid var(--line); background: var(--bg);
  scrollbar-width: thin;
}
.presetcard {
  flex: none; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px;
  min-width: 168px; padding: 8px 12px 8px 8px; text-align: left;
  border: 1px solid var(--line); border-radius: 4px; background: var(--field);
}
.presetcard[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--fluo); }
.presetcard .sheet {
  grid-row: span 2; position: relative; width: 38px; height: 46px; border-radius: 2px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); overflow: hidden; isolation: isolate;
}
.presetcard .sheet i {
  position: absolute; width: 24px; height: 24px; border-radius: 50%; mix-blend-mode: multiply;
}
.presetcard .sheet i:nth-child(1) { left: 3px; top: 5px; }
.presetcard .sheet i:nth-child(2) { left: 12px; top: 16px; }
.presetcard .sheet i:nth-child(3) { left: 5px; top: 20px; }
.presetcard b { font: 600 13px/1.15 var(--body); }
.presetcard small { font: 11px/1.2 var(--mono); color: var(--muted); }

/* ---------- panel ---------- */

main { display: flex; flex: 1; min-height: 0; }
aside {
  width: 340px; flex: none; overflow-y: auto; padding: 12px 14px 24px;
  border-right: 1px solid var(--line); background: var(--panel);
  scrollbar-width: thin;
}
aside:focus { outline: none; }
details { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
summary {
  cursor: pointer; padding: 9px 10px; font: 700 12px/1.2 var(--display); letter-spacing: 0.08em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; margin-left: auto; font: 400 16px/1 var(--mono); color: var(--muted); }
details[open] > summary::after { content: "–"; }
details > div { padding: 2px 10px 12px; }
/* plancha = tambor: la tira de color del borde es la tinta cargada */
details.plate { border-left: 6px solid var(--drum, var(--line)); }
.swatch { width: 16px; height: 16px; border-radius: 50%; display: inline-block; border: 1px solid rgb(0 0 0 / 0.25); flex: none; }

/* minmax(0, 1fr) y no 1fr: el ancho intrínseco de un <input>/<select> impide
   que una pista "1fr" se encoja, y la fila terminaba desbordando el panel */
.row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px; gap: 8px; align-items: center; margin: 6px 0; font-size: 12px; }
.row > span { min-width: 0; overflow-wrap: anywhere; color: var(--muted); }
.row em { font: 11px var(--mono); font-style: normal; color: var(--ink); text-align: right; }
.row select { width: 100%; min-width: 0; padding: 5px; min-height: 30px; font-size: 12px; }
.row.color { grid-template-columns: 96px 40px minmax(0, 1fr); }
.row.color input[type="color"] {
  width: 40px; height: 28px; padding: 0; border: 1px solid var(--line);
  border-radius: 6px; background: none; cursor: pointer;
}
.row.color .hex {
  width: 100%; min-width: 0;
  background: var(--field); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 6px; font-family: var(--mono); font-size: 11px;
}
.note { color: var(--muted); font-size: 11.5px; margin: 6px 0 2px; line-height: 1.4; overflow-wrap: anywhere; }
.note.warn { color: var(--warn); }
.note.ok { color: var(--ok); }
input[type="range"] { accent-color: var(--fluo); width: 100%; min-height: 24px; }
aside button { margin-top: 8px; width: 100%; }
/* el botón de añadir cierra el bloque de planchas: separarlo de la sección
   siguiente con un respiro y una línea */
.addwrap {
  margin: 4px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.addwrap button { margin-top: 0; }
button.add { border-style: dashed; }

/* catálogo de tintas: un chip por tinta oficial */
.inkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); gap: 5px; margin: 4px 0 8px; }
.inkgrid button {
  width: 100%; aspect-ratio: 1; min-height: 0; padding: 0; margin: 0; border-radius: 50%;
  border: 1px solid rgb(0 0 0 / 0.2); background: var(--c);
}
.inkgrid button[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.inkgrid button.fluo { box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.55); }
details.inks { border-style: dashed; margin: 6px 0 4px; }
details.inks summary { font: 500 11px/1.2 var(--mono); text-transform: none; letter-spacing: 0; padding: 6px 8px; }

/* ---------- escenario: tapete de corte ---------- */

#stage {
  flex: 1; position: relative; overflow: auto; padding: 28px;
  display: grid; place-items: center;
  background-color: var(--mat);
  background-image:
    linear-gradient(var(--mat-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--mat-major) 1px, transparent 1px),
    linear-gradient(var(--mat-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mat-line) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}
#stage.dragging { box-shadow: inset 0 0 0 4px var(--yellow); }
#stage.dragging::after {
  content: "Suelta para imprimir"; position: absolute; inset: auto 0 50% 0; text-align: center;
  font: 800 28px/1 var(--display); letter-spacing: 0.06em; color: #fff; pointer-events: none;
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.5);
}
/* barra de progreso del motor asíncrono (worker WASM) */
#stage[data-busy]::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 40%;
  background: linear-gradient(90deg, var(--blue), var(--fluo));
  animation: feed 0.9s linear infinite;
}
@keyframes feed { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* el viewport se ajusta al canvas: el overlay A/B hereda exactamente su caja,
   así original y render se superponen pixel a pixel */
#viewport { position: relative; display: inline-block; line-height: 0; }
#view, #original { max-width: 100%; max-height: calc(100dvh - 210px); }
#view { box-shadow: var(--shadow); }
#original { position: absolute; inset: 0; display: none; width: 100%; height: 100%; }
/* marcas de registro en las cuatro esquinas, fuera de la hoja */
.reg {
  position: absolute; width: 18px; height: 18px; pointer-events: none; opacity: 0.85;
  background:
    linear-gradient(#fff, #fff) center / 1px 100% no-repeat,
    linear-gradient(#fff, #fff) center / 100% 1px no-repeat,
    radial-gradient(circle, transparent 4px, #fff 4.5px, #fff 5.5px, transparent 6px);
}
.reg.tl { left: -24px; top: -24px; }
.reg.tr { right: -24px; top: -24px; }
.reg.bl { left: -24px; bottom: -24px; }
.reg.br { right: -24px; bottom: -24px; }

#hint, #status { position: absolute; left: 16px; right: 16px; text-align: center; pointer-events: none; font-size: 12px; }
#hint { bottom: 10px; color: rgb(255 255 255 / 0.72); }
#stage.loaded #hint { display: none; }
#status { bottom: 10px; font: 500 12px/1.3 var(--mono); color: #fff; }
#status:not(:empty) { background: rgb(0 0 0 / 0.55); padding: 6px 10px; border-radius: 4px; left: 50%; right: auto; transform: translateX(-50%); max-width: calc(100% - 32px); }
.notice {
  position: absolute; left: 16px; right: 16px; top: 10px; z-index: 2;
  background: var(--panel); color: var(--ink); border-left: 4px solid var(--yellow);
  padding: 8px 12px; font-size: 12.5px; border-radius: 4px; box-shadow: 0 4px 16px rgb(0 0 0 / 0.3);
}

.notice button { margin-left: 8px; min-height: 26px; padding: 3px 10px; font-size: 12px; }

#nogpu { max-width: 520px; margin: 18vh auto; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }

/* pantallas estrechas: primero la hoja, debajo la ficha de trabajo. El panel
   de ancho fijo empujaba el lienzo fuera de la ventana en vez de apilarse. */
@media (max-width: 760px) {
  header { padding: 8px 12px; gap: 8px; }
  .brand { font-size: 22px; }
  .actions { margin-left: 0; width: 100%; }
  .exports .grouplabel { display: none; }
  .presets { padding: 8px 12px; }
  main { flex-direction: column-reverse; overflow-y: auto; }
  #stage { flex: none; min-height: 52vh; padding: 26px 22px; }
  .reg { width: 12px; height: 12px; }
  .reg.tl { left: -16px; top: -16px; } .reg.tr { right: -16px; top: -16px; }
  .reg.bl { left: -16px; bottom: -16px; } .reg.br { right: -16px; bottom: -16px; }
  aside { width: 100%; overflow: visible; border-right: none; border-top: 1px solid var(--line); }
  #view, #original { max-height: calc(52vh - 40px); }
  #app { height: auto; min-height: 100dvh; }
}

@media (prefers-reduced-motion: reduce) {
  #stage[data-busy]::before { animation: none; width: 100%; opacity: 0.6; }
}