/* =====================================================================
   Moxen · el panel común de las herramientas

   Se carga DESPUÉS del CSS de cada herramienta. El CSS propio se queda con la
   disposición y con los colores de su lienzo; aquí están las fichas y el
   aspecto de los controles, iguales en todas: General Sans, fondo #0a0a0a,
   líneas finas, deslizadores finos, segmentados, botones, selectores y campos.
   El resultado (lienzo, vista previa) no pasa por aquí.
   ===================================================================== */
:root {
  --mx-fondo: #0a0a0a;
  --mx-sup: #191919;
  --mx-sup-2: #262626;
  --mx-texto: #e3e3e3;
  --mx-puro: #fff;
  --mx-sec: rgba(255, 255, 255, .6);
  --mx-apagado: #8a8a8a;
  --mx-linea: rgba(227, 227, 227, .14);
  --mx-linea-2: rgba(227, 227, 227, .28);
  --mx-r: 8px;
  --mx-r-in: 6px;
  --mx-sans: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mx-mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}

/* ── base ─────────────────────────────────────────────────────────── */
:root body { font-family: var(--mx-sans); font-size: 13px; line-height: 1.35; -webkit-font-smoothing: antialiased; }
:root button, :root select, :root textarea, :root input { font-family: inherit; }
:root * { scrollbar-width: thin; scrollbar-color: var(--mx-linea-2) transparent; }
:root :focus-visible { outline: 2px solid var(--mx-puro); outline-offset: 2px; }
:root button:disabled, :root label:has(input:disabled) { opacity: .4; cursor: default; }

:root h1 { font: 600 17px/1 var(--mx-sans); letter-spacing: -.03em; color: var(--mx-puro); text-transform: none; }
:root :is(h2, summary, .rot, .tit, .sub, .fuentes .sec) { font: 500 12.5px/1.2 var(--mx-sans); letter-spacing: -.005em; color: var(--mx-texto); text-transform: none; }
:root .tenue { font-weight: 400; color: var(--mx-apagado); }
:root :is(.nota, .estado, .msg) { font-size: 12px; line-height: 1.4; color: var(--mx-apagado); }
:root :is(.firma, #firma, #marca, .sello, .pie a) { color: var(--mx-apagado); font-size: 12px; letter-spacing: 0; opacity: 1; }

/* etiquetas y cifras de los controles */
:root :is(.fila label, .ctl label, .ctl .nom, .des label, .control label, .rail label, .sel label, .sel-linea, .campo, .et, .nom, .chk, .check, .tog, .rep, .sw) { font-size: 12.5px; color: var(--mx-sec); }
:root :is(.fila, .ctl, .des, .control, .rail, .desl) output, :root .ctl .v, :root :is(#t-lect, #reloj, #tiempo .reloj, .reloj, .val, #v-progreso, #v-fondo, #tiempo-t) {
  font: 500 12px/1.2 var(--mx-sans); font-variant-numeric: tabular-nums; color: var(--mx-texto); letter-spacing: 0;
}

/* ── deslizador: una línea fina y un punto ────────────────────────── */
:root input[type=range]:not(.rango-tiempo):not(.regla > input) {
  --mx-relleno: var(--mx-p, var(--p, var(--v, var(--f, 0%))));
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 20px; margin: 0; padding: 0; background: transparent; cursor: ew-resize; touch-action: pan-y;
}
:root input[type=range]:not(.rango-tiempo):not(.regla > input)::-webkit-slider-runnable-track {
  height: 2px; border: 0; border-radius: 2px; background: linear-gradient(to right, var(--mx-texto) var(--mx-relleno), var(--mx-linea-2) var(--mx-relleno));
}
:root input[type=range]:not(.rango-tiempo):not(.regla > input)::-moz-range-track { height: 2px; border-radius: 2px; background: var(--mx-linea-2); }
:root input[type=range]:not(.rango-tiempo):not(.regla > input)::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--mx-texto); }
:root input[type=range]:not(.rango-tiempo):not(.regla > input)::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--mx-puro); box-shadow: none; transition: transform .12s;
}
:root input[type=range]:not(.rango-tiempo):not(.regla > input)::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--mx-puro); }
:root input[type=range]:not(.rango-tiempo):not(.regla > input):hover::-webkit-slider-thumb { transform: scale(1.17); }
:root input[type=range]:not(.rango-tiempo):not(.regla > input):active::-webkit-slider-thumb { transform: scale(1.17); background: var(--mx-puro); box-shadow: none; }
:root input[type=range]:focus-visible { outline: none; }
:root input[type=range]:not(.rango-tiempo):not(.regla > input):focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--mx-fondo), 0 0 0 4px var(--mx-puro); }
:root input[type=range]:not(.rango-tiempo):not(.regla > input):focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--mx-fondo), 0 0 0 4px var(--mx-puro); }

/* ── segmentado ───────────────────────────────────────────────────── */
:root :is(.seg, .segs, .segmento, .modos):not(button):not(#vistas) { gap: 2px; padding: 2px; border: 0; border-radius: var(--mx-r); background: var(--mx-sup); overflow: hidden; }
:root :is(.seg, .segs, .segmento, .modos):not(#vistas) > button {
  min-height: 26px; height: 26px; padding: 0 3px; border: 0; border-radius: var(--mx-r-in); background: transparent; color: var(--mx-sec);
  font: 500 12px/1 var(--mx-sans); white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s;
}
:root :is(.seg, .segs, .segmento, .modos):not(#vistas) > button:hover { background: var(--mx-sup-2); color: var(--mx-puro); }
:root :is(.seg, .segs, .segmento, .modos):not(#vistas) > button:is([aria-pressed=true], [aria-checked=true], [aria-selected=true]) { background: var(--mx-texto); color: var(--mx-fondo); font-weight: 500; }

/* ── botón ────────────────────────────────────────────────────────── */
:root :is(button.mini, button.ancho, .tres > button, .dos > button, .barra-der button, .sal, #entrar, .boton, .chico, .cab button, .cabeza button, .grande, .bot, .btn, .linea, .accion, .abrir, .salidas button, .ancho, .tiempo button, #transporte button, #tablero header button, .botones button, #tiempo button, #carga button, .acciones button, .subir:not(.foto):not(.marca), .archivo, .btn-mini, #verpanel, .fila-x button, .fila-sal button, .salida-fila button, .bots button, .exporta button, .pri, .fuerte, #azar, #cuadros .mas) {
  min-height: 28px; border: 1px solid transparent; border-radius: var(--mx-r); background: var(--mx-sup); color: var(--mx-texto);
  font: 500 12.5px/1 var(--mx-sans); letter-spacing: 0; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
:root :is(button.mini, button.ancho, .tres > button, .dos > button, .barra-der button, .sal, #entrar, .boton, .chico, .cab button, .cabeza button, .grande, .bot, .btn, .linea, .accion, .abrir, .salidas button, .ancho, .tiempo button, #transporte button, #tablero header button, .botones button, #tiempo button, #carga button, .acciones button, .subir:not(.foto):not(.marca), .archivo, .btn-mini, #verpanel, .fila-x button, .fila-sal button, .salida-fila button, .bots button, .exporta button, #cuadros .mas):hover:not(:disabled) { background: var(--mx-sup-2); color: var(--mx-puro); border-color: transparent; }
:root :is(button.mini, button.ancho, .tres > button, .dos > button, .barra-der button, .sal, #entrar, .boton, .chico, .cab button, .cabeza button, .grande, .bot, .btn, .linea, .accion, .abrir, .salidas button, .ancho, .tiempo button, #transporte button, #tablero header button, .botones button, #tiempo button, #carga button, .acciones button, .btn-mini, .fila-x button, .fila-sal button, .salida-fila button, .bots button, .exporta button):is([aria-pressed=true], [aria-checked=true]):not(#entrar, #play) { background: var(--mx-texto); color: var(--mx-fondo); border-color: var(--mx-texto); }

/* el principal: una sola superficie clara, para la acción de cada herramienta. Aleatorio no lo es. */
:root :is(.pri, .fuerte, #tirar, #saca-png, #romper, #mx#mx):not(#azar, #b-azar, #aleatorio, .sec) { background: var(--mx-texto); color: var(--mx-fondo); border-color: var(--mx-texto); }
:root :is(.pri, .fuerte, #tirar, #saca-png, #romper, #mx#mx):not(#azar, #b-azar, #aleatorio, .sec):hover:not(:disabled) { background: var(--mx-puro); color: var(--mx-fondo); border-color: var(--mx-puro); }

/* ── fichas: opciones de texto en rejilla o en fila ───────────────── */
:root :is(.ajustes, .retazos) { gap: 4px; border: 0; border-radius: 0; background: none; overflow: visible; }
:root :is(.seg, .segs, .segmento):not(#vistas) > button { letter-spacing: -.015em; }
:root .pl span, :root[data-h=trama] #ajustes button span { letter-spacing: -.02em; }
:root :is(.ajustes > button, .retazos > button, .chip, .conm, .chips > button, #agrega > button, .tresb > button),
:root:not([data-h=trama]):not([data-h=cota]) #ajustes > button {
  height: 28px; min-height: 28px; padding: 0 6px; border: 1px solid var(--mx-linea); border-radius: var(--mx-r); background: transparent; color: var(--mx-sec);
  font: 500 12px/1 var(--mx-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; opacity: 1; transition: background-color .15s, color .15s, border-color .15s;
}
:root :is(.ajustes > button, .retazos > button, .chip, .conm, .chips > button, #agrega > button, .tresb > button):hover,
:root:not([data-h=trama]):not([data-h=cota]) #ajustes > button:hover { background: var(--mx-sup); color: var(--mx-puro); border-color: var(--mx-linea-2); }
:root :is(.ajustes > button, .retazos > button, .chip, .conm, .chips > button, .tresb > button):is([aria-pressed=true], [aria-checked=true]),
:root:not([data-h=trama]):not([data-h=cota]) #ajustes > button:is([aria-pressed=true], [aria-checked=true]) { background: var(--mx-texto); color: var(--mx-fondo); border-color: var(--mx-texto); font-weight: 500; }
:root #ajustes > button { flex: none; }
:root :is(.ajustes, .retazos, .tresb, #mx#mx) > button { padding: 0 1px; letter-spacing: -.02em; font-size: 11.5px; }
:root:is([data-h=dados], [data-h=manto], [data-h=tinta]) :is(.seg, #mx#mx) > button { padding: 0 1px; font-size: 11.5px; letter-spacing: -.02em; }

/* ── campos ───────────────────────────────────────────────────────── */
:root :is(select, textarea, input[type=text], input[type=number], input[type=search]), :root .sel select {
  border: 1px solid transparent; border-radius: var(--mx-r); background-color: var(--mx-sup); color: var(--mx-texto); font-family: var(--mx-sans);
}
:root :is(select, input[type=text], input[type=number], input[type=search]) { min-height: 28px; font-size: 12.5px; font-weight: 500; }
:root select {
  -webkit-appearance: none; appearance: none; padding: 0 26px 0 9px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23e3e3e3' stroke-opacity='.7' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 9px 6px;
}
:root select option { background: var(--mx-sup); color: var(--mx-texto); }
:root textarea { padding: 7px 9px; line-height: 1.3; font-weight: 500; }
:root :is(select, textarea, input[type=text], input[type=number]):hover { background-color: var(--mx-sup-2); }
:root :is(textarea, input[type=text], input[type=number], select):focus { border-color: var(--mx-linea-2); outline: none; }
:root :is(textarea, input[type=text], input[type=number], select):focus-visible { border-color: var(--mx-puro); outline: 1px solid var(--mx-puro); outline-offset: 0; }
:root ::placeholder { color: var(--mx-apagado); opacity: 1; }

:root input[type=color]:not(.oculto) { border: 1px solid var(--mx-linea-2); border-radius: 6px; background: none; padding: 0; overflow: hidden; }
:root input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
:root input[type=color]::-webkit-color-swatch { border: 0; border-radius: 0; }
:root input[type=color]::-moz-color-swatch { border: 0; }
:root input[type=checkbox]:not(.sw input) { accent-color: var(--mx-texto); }
:root details > summary { cursor: pointer; }

/* interruptores */
:root .sw input { background: var(--mx-linea-2); }
:root .sw input::after { background: var(--mx-texto); }
:root .sw input:checked { background: var(--mx-texto); }
:root .sw input:checked::after { background: var(--mx-fondo); }

/* ── la salida a la página de herramientas (solo en la copia pública) ── */
.mx-salida {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; margin: -4px 6px -4px -4px; border-radius: var(--mx-r-in);
  color: var(--mx-sec); text-decoration: none; vertical-align: middle; transition: color .15s, background-color .15s;
}
.mx-salida:hover { color: var(--mx-puro); background: var(--mx-sup); }
.mx-salida svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mx-cabeza { display: flex; align-items: center; padding: 14px; border-bottom: 1px solid var(--mx-linea); }

/* ── pantallas chicas: blancos de 44 px en lo que se toca con el dedo ── */
@media (max-width: 860px) {
  :root input[type=range]:not(.rango-tiempo):not(.regla > input) { height: 32px; }
  :root input[type=range]:not(.rango-tiempo):not(.regla > input)::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -8px; }
  :root input[type=range]:not(.rango-tiempo):not(.regla > input)::-moz-range-thumb { width: 18px; height: 18px; }
  :root :is(.seg, .segs, .segmento, .modos):not(#vistas) > button { min-height: 34px; height: 34px; }
  :root :is(button.mini, button.ancho, .tres > button, .dos > button, .barra-der button, .sal, #entrar, .boton, .chico, .cab button, .cabeza button, .grande, .bot, .btn, .linea, .accion, .abrir, .salidas button, .ancho, #transporte button, #tablero header button, .botones button, #tiempo button, #carga button, .acciones button, .subir:not(.foto):not(.marca), .archivo, .fila-x button, .fila-sal button, .salida-fila button, .bots button, .exporta button, .pri, .fuerte, #azar) { min-height: 36px; }
  :root :is(.ajustes > button, .retazos > button, .chip, .conm, .chips > button, #agrega > button, .tresb > button),
  :root:not([data-h=trama]):not([data-h=cota]) #ajustes > button { height: 34px; min-height: 34px; }
  :root :is(select, input[type=text], input[type=number]) { min-height: 36px; }
  .mx-salida { width: 36px; height: 36px; margin: -8px 4px -8px -8px; }
  .mx-salida svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) { :root * { transition: none !important; } }