/* Telar: mesa de trabajo clara, papel y tinta; el hilo rojo marca lo activo. */

@font-face {
  font-family: "TelarLeland";
  src: url("../monocordio/fonts/Leland.otf") format("opentype");
  font-display: block;
}

:root {
  color-scheme: light;
  --papel: #fbfaf6;
  --mesa: #eeebe3;
  --panel: #f6f4ee;
  --linea: #d3cec2;
  --linea-suave: #e3dfd5;
  --tinta: #1d1b18;
  --tenue: #68635a;
  --hilo: #a8321f;
  --hilo-suave: #f3ddd6;
  --error: #9d1c10;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --hilo-fuerte: #8d2819;
  --sobre-hilo: #ffffff;
  --error-fondo: #fdf1ee;
  --error-borde: #e6b5ab;
  --control: #ffffff;
  --tarjeta: #ffffff;
  --hoja: #ffffff;
  /* La notación es siempre tinta sobre papel: el modo oscuro no la cambia. */
  --papel-musica: #ffffff;
  --nota: #111111;
  --pauta: #555555;
  --rotulo: #666666;
  --aviso-fondo: #fbf3dd;
  --aviso-borde: #e6d9ae;
  --tira-nota: #38342d;
  --tira-liga: #b0aaa0;
  --tira-silencio: #ffffff;
  --tira-borde: #aaa49a;
  --sombra: #00000022;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --papel: #1c1b19;
  --mesa: #121210;
  --panel: #191816;
  --linea: #45423b;
  --linea-suave: #34322d;
  --tinta: #ece8df;
  --tenue: #a9a498;
  --hilo: #e8806b;
  --hilo-suave: #4a2a23;
  --error: #f39a8c;
  --hilo-fuerte: #f09884;
  --sobre-hilo: #1a0f0c;
  --error-fondo: #3a1f1a;
  --error-borde: #7a3a30;
  --control: #25241f;
  --tarjeta: #201f1c;
  --hoja: #1f1e1b;
  --aviso-fondo: #3a3118;
  --aviso-borde: #6b5a25;
  --tira-nota: #d8d3c7;
  --tira-liga: #7d786d;
  --tira-silencio: #1c1b19;
  --tira-borde: #6c675d;
  --sombra: #00000066;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--mesa); color: var(--tinta); font: 14px/1.45 var(--sans); display: flex; flex-direction: column; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--hilo); outline-offset: 1px; }
.visual-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Cabecera */
.cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 14px; background: var(--papel); border-bottom: 1px solid var(--linea); }
.marca { display: flex; align-items: baseline; gap: 8px; }
.marca h1 { margin: 0; font: italic 400 24px/1 var(--serif); letter-spacing: .01em; }
.volver { text-decoration: none; color: var(--tenue); }
.volver:hover { color: var(--hilo); }
.titulo-pieza input { width: 190px; border: 0; border-bottom: 1px solid var(--linea); background: transparent; padding: 3px 2px; font-family: var(--serif); font-size: 15px; }
.grupo { display: flex; align-items: center; gap: 5px; }
.grupo-derecha { margin-left: auto; flex-wrap: wrap; }
.exporta { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.semilla label { color: var(--tenue); font-size: 12.5px; }
.semilla input { width: 66px; }
.boton, .grupo select, .semilla input { border: 1px solid var(--linea); background: var(--control); border-radius: 4px; padding: 4px 9px; min-height: 30px; }
.boton { cursor: pointer; display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.boton:hover:not(:disabled) { border-color: var(--tenue); }
.boton:disabled { opacity: .4; cursor: default; }
.boton-principal { background: var(--hilo); border-color: var(--hilo); color: var(--sobre-hilo); font-weight: 600; min-width: 96px; justify-content: center; white-space: nowrap; }
.boton-principal:hover:not(:disabled) { background: var(--hilo-fuerte); border-color: var(--hilo-fuerte); }
.interruptor { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; border: 0; background: none; padding: 0 2px; cursor: pointer; color: var(--tenue); font-size: 12.5px; }
.interruptor-pista { position: relative; width: 32px; height: 18px; border-radius: 9px; border: 1px solid var(--linea); background: var(--control); }
.interruptor-pista::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--tenue); transition: transform .15s; }
.interruptor[aria-checked="true"] .interruptor-pista { background: var(--hilo); border-color: var(--hilo); }
.interruptor[aria-checked="true"] .interruptor-pista::after { transform: translateX(14px); background: var(--sobre-hilo); }

/* Mesa */
.mesa { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(340px, 410px) minmax(0, 1fr); }
.taller { overflow-y: auto; padding: 10px; border-right: 1px solid var(--linea); background: var(--panel); }
.tela-marco { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tela-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 12px; background: var(--papel); border-bottom: 1px solid var(--linea-suave); }
.pestanas { display: flex; gap: 2px; }
.pestanas button { border: 0; border-bottom: 2px solid transparent; background: none; padding: 4px 9px; cursor: pointer; color: var(--tenue); }
.pestanas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--hilo); font-weight: 600; }
.estado { margin: 0; color: var(--tenue); font-size: 12.5px; font-variant-numeric: tabular-nums; flex: 1; min-width: 180px; }
.zoom { color: var(--tenue); font-size: 12.5px; display: flex; align-items: center; gap: 5px; }
.zoom input { width: 84px; accent-color: var(--hilo); }
.zoom select { border: 1px solid var(--linea); background: var(--control); border-radius: 4px; padding: 2px 4px; min-height: 26px; }
.voces-audio-marco { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 3px 12px; font-size: 12.5px; color: var(--tenue); background: var(--papel); border-bottom: 1px solid var(--linea-suave); }
.nota-export { margin: 0; color: var(--hilo); }
.avisos { margin: 0; padding: 6px 12px 6px 28px; background: var(--aviso-fondo); border-bottom: 1px solid var(--aviso-borde); font-size: 12.5px; }
.tela { flex: 1; overflow: auto; background: var(--mesa); padding: 12px; }

/* Partitura */
.hoja { position: relative; background: var(--papel-musica); box-shadow: 0 1px 3px var(--sombra); width: max-content; }
.partitura { display: block; }
.partitura line, .campo-vista line { stroke: var(--nota); }
.partitura line.p, .campo-vista line.p { stroke: var(--pauta); }
.partitura polygon, .partitura path { fill: var(--nota); }
.partitura path.t { fill: none; stroke: var(--nota); }
.partitura text.m, .campo-vista text.m { font-family: "TelarLeland", serif; fill: var(--nota); }
.partitura text.tn { font: italic 700 10px var(--serif); fill: var(--nota); }
.partitura text.r { font-family: var(--serif); fill: var(--nota); }
.partitura text.n { font-family: var(--serif); fill: var(--rotulo); }
.partitura text.tp { font-family: var(--serif); font-weight: 700; fill: var(--nota); }
.cursor { position: absolute; width: 2px; background: var(--hilo); opacity: .75; pointer-events: none; }

/* Tejido */
.tejido { display: block; background: var(--hoja); padding: 8px; box-shadow: 0 1px 3px var(--sombra); box-sizing: content-box; }
.tj-voz { font: 600 13px var(--serif); fill: var(--tinta); }
.tj-hilo { font: 11px var(--sans); fill: var(--tenue); }
.tj-marca { fill: #0008; }
.tj-coincide { fill: var(--hilo); }

/* Página de ayuda */
.ayuda-pagina { display: block; height: auto; background: var(--papel); }
.ayuda-doc { max-width: 720px; margin: 0 auto; padding: 20px 16px 60px; font-size: 15px; line-height: 1.6; }
.ayuda-doc h1 { font: italic 400 32px/1.2 var(--serif); margin: 8px 0; }
.ayuda-doc h2 { font: 600 21px/1.3 var(--serif); margin: 32px 0 8px; padding-top: 10px; border-top: 1px solid var(--linea-suave); }
.ayuda-doc a { color: var(--hilo); }
.ayuda-doc code { font: 13.5px var(--mono); background: var(--panel); padding: 1px 4px; border-radius: 3px; }
.ayuda-doc li { margin-bottom: 4px; }
.ayuda-volver { margin: 0; font-size: 13.5px; }
.ayuda-entrada { color: var(--tenue); }
.ayuda-indice { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 0; margin: 12px 0 0; list-style: none; font-size: 13.5px; }
.ayuda-doc .ayuda-tabla { font: 14px/1.4 var(--sans); margin: 10px 0; }
.ayuda-doc .ayuda-tabla td, .ayuda-doc .ayuda-tabla th { white-space: normal; text-align: left; padding: 4px 8px; }
.ejemplo { margin: 12px 0; }
.ejemplo figcaption { font-size: 13.5px; color: var(--tenue); margin-top: 3px; }
.ejemplo .hoja { max-width: 100%; overflow-x: auto; width: auto; }
.resultado { font-family: var(--serif); }
.ayuda-problemas dt { font-weight: 600; margin-top: 10px; }
.ayuda-problemas dd { margin: 0 0 4px; color: var(--tenue); }

/* Modos */
.modos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 8px; }
.modos button { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--linea); border-radius: 5px; background: var(--control); padding: 6px 8px; cursor: pointer; text-align: left; }
.modos b { font: 600 15px var(--serif); }
.modos span { font-size: 11.5px; color: var(--tenue); }
.modos button[aria-pressed="true"] { border-color: var(--hilo); box-shadow: inset 0 0 0 1px var(--hilo); }

/* Material */
.material-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 10px; }
.material-barra select { border: 1px solid var(--linea); background: var(--control); border-radius: 4px; padding: 4px 6px; min-height: 30px; }
.material-etiqueta { color: var(--tenue); font-size: 12.5px; }
.material-llevar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-left: auto; }
.material-cuerpo { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.bloque-tabla { background: var(--hoja); box-shadow: 0 1px 3px var(--sombra); padding: 10px 12px; max-width: 100%; }
.bloque-tabla h2 { margin: 0 0 6px; font: 600 14px var(--serif); }
.tabla-marco { overflow-x: auto; }
.tabla-material { border-collapse: collapse; font: 12.5px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.tabla-material th, .tabla-material td { border: 1px solid var(--linea-suave); padding: 2px 7px; text-align: center; white-space: nowrap; }
.tabla-material th { color: var(--tenue); font-weight: 600; background: var(--panel); }

/* Pasos */
.paso { background: var(--papel); border: 1px solid var(--linea-suave); border-radius: 6px; margin-bottom: 8px; }
.paso > summary { display: flex; align-items: baseline; gap: 8px; cursor: pointer; padding: 8px 10px; list-style: none; }
.paso > summary::-webkit-details-marker { display: none; }
.paso > summary::after { content: "▸"; color: var(--tenue); }
.paso[open] > summary::after { content: "▾"; }
.paso-num { font: italic 15px var(--serif); color: var(--hilo); }
.paso-tit { font: 600 16px var(--serif); }
.paso-res { color: var(--tenue); font-size: 12.5px; }
.paso-ayuda { margin-left: auto; width: 18px; height: 18px; flex: none; border: 1px solid var(--linea); border-radius: 50%; color: var(--tenue); font-size: 11.5px; line-height: 16px; text-align: center; text-decoration: none; }
.paso-ayuda:hover { color: var(--hilo); border-color: var(--hilo); }
.paso-ayuda + * { margin-left: 0; }
.paso-cuerpo { padding: 0 10px 10px; }
.guia { margin: 0 0 8px; color: var(--tenue); font-size: 12.5px; }

/* Campos */
.campo { margin-bottom: 7px; min-width: 0; flex: 1; }
.campo.corto { max-width: 130px; }
.campo label { display: block; font-size: 12px; color: var(--tenue); margin-bottom: 1px; }
.campo input, .campo select, .campo textarea, .selector-nuevo { width: 100%; border: 1px solid var(--linea); border-radius: 3px; background: var(--control); padding: 4px 6px; min-height: 28px; }
.campo textarea { font-family: var(--mono); font-size: 12.5px; line-height: 1.5; resize: vertical; }
.campo input[type="text"], .campo input:not([type]) { font-family: var(--mono); font-size: 12.5px; }
.campo [aria-invalid="true"] { border-color: var(--error); background: var(--error-fondo); }
.ayuda { margin: 2px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--tenue); }
.error-campo { margin: 2px 0 0; font-size: 12px; color: var(--error); }
.aviso-errores { margin: 0 0 8px; padding: 6px 9px; background: var(--error-fondo); border: 1px solid var(--error-borde); border-radius: 4px; color: var(--error); font-size: 12.5px; }
.fila { display: flex; gap: 7px; align-items: flex-start; }
.fila-hilo .campo { max-width: 33%; }

/* Tarjetas */
.ambito { margin: 0 0 7px; font-size: 12.5px; }
.ambito > summary { cursor: pointer; color: var(--tenue); padding: 2px 0; }
.tarjeta { border: 1px solid var(--linea-suave); border-radius: 5px; padding: 0 8px; margin-bottom: 6px; background: var(--tarjeta); }
.tarjeta[open] { padding-bottom: 8px; }
.tarjeta > summary { display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 6px 0; list-style-position: inside; }
.tarjeta-tit { font-weight: 600; }
.tarjeta-res { color: var(--tenue); font-size: 11.5px; font-variant-numeric: tabular-nums; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proc-curva { flex: 1; display: flex; justify-content: flex-end; }
.quitar { border: 0; background: none; cursor: pointer; font-size: 17px; line-height: 1; color: var(--tenue); padding: 0 4px; margin-left: auto; }
.quitar:hover:not(:disabled) { color: var(--error); }
.quitar:disabled { opacity: .25; cursor: default; }
.hilo { border-top: 1px solid var(--linea-suave); padding-top: 6px; margin-top: 2px; }
.boton-suave { border: 1px dashed var(--linea); background: transparent; padding: 3px 9px; border-radius: 4px; cursor: pointer; color: var(--tenue); font-size: 12.5px; }
.boton-suave:hover:not(:disabled) { color: var(--hilo); border-color: var(--hilo); }
.boton-suave:disabled { opacity: .4; }
.acciones-anadir { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.selector-nuevo { width: auto; flex: 1; }
.casillas { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.casilla { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.casilla input { accent-color: var(--hilo); margin: 0; }

/* Previas */
.tiras { margin: 0 0 7px; }
.tira { display: block; margin-bottom: 3px; }
.tr-nota { fill: var(--tira-nota); }
.tr-silencio { fill: var(--tira-silencio); stroke: var(--tira-borde); stroke-dasharray: 2 2; }
.tr-liga { fill: var(--tira-liga); }
.tr-grupo { fill: var(--hilo-suave); }
.campo-previa { overflow-x: auto; margin-top: 4px; }
.campo-vista { display: block; background: var(--papel-musica); border-radius: 3px; }
.curva-base { stroke: var(--linea); }
.curva-linea { fill: none; stroke: var(--hilo); stroke-width: 1.5; }

.sintaxis { font-size: 12.5px; color: var(--tenue); padding: 3px 4px; }
.sintaxis summary { cursor: pointer; }
.sintaxis ol { margin: 5px 0; padding-left: 20px; }

@media (max-width: 860px) {
  body { height: auto; display: block; }
  .mesa { display: block; }
  .taller { border-right: 0; overflow: visible; }
  .tela { overflow-x: auto; }
  .grupo { flex-wrap: wrap; }
  .grupo select { max-width: 100%; }
  .grupo-derecha { margin-left: 0; }
  .titulo-pieza input { width: 150px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print {
  :root, :root[data-theme="dark"] { color-scheme: light; --hoja: white; --mesa: white; --tinta: black; --tenue: dimgray; --panel: white; --linea-suave: silver; --sombra: transparent; }
  html, body { height: auto; }
  .ayuda-volver, .ayuda-indice { display: none; }
  .ayuda-pagina { background: white; }
  .ayuda-doc a { color: black; }
  .cabecera, .taller, .tela-barra, .voces-audio-marco, .avisos, .material-barra { display: none !important; }
  .tela-marco { display: block; }
  .tabla-material td, .tabla-material th { white-space: normal; }
  .bloque-tabla { break-inside: avoid; padding: 0; }
  body { display: block; background: white; }
  .mesa { display: block; }
  .tela { overflow: visible; padding: 0; background: white; }
  .hoja { box-shadow: none; }
}