:root{
  --neg:var(--mx-fondo);
  --neg2:var(--mx-sup);
  --neg3:var(--mx-sup);
  --linea:var(--mx-linea);
  --apagado:var(--mx-apagado);
  --gris:var(--mx-sec);
  --claro:var(--mx-texto);
  --sodio:var(--mx-texto);
  --ancho-consola: 332px;
  --sans:var(--mx-sans);
  --mono:var(--mx-sans);
  --tit:var(--mx-sans);
  color-scheme: dark;
}
*{ box-sizing: border-box; }
html, body{ height: 100%; margin: 0; background: var(--neg); }
body{
  color: var(--claro);
  font: 400 12px/1.25 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button, input{ font: inherit; color: inherit; }
.oculto{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }
:focus{ outline: none; }
:focus-visible{ outline: 1px solid var(--claro); outline-offset: 2px; }

#an{ display: grid; grid-template-columns: minmax(0, 1fr) var(--ancho-consola); height: 100dvh; }

/* ---- lienzo ---- */
#marco{
  position: relative; min-width: 0; min-height: 0; padding: 18px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #060607;
}
#lienzo{ display: block; touch-action: none; cursor: crosshair; box-shadow: 0 0 0 1px #1c1c1e; }
#lienzo.arrastra{ cursor: grabbing; }
#sinwebgl{ max-width: 38ch; padding: 16px; font-size: 13px; line-height: 1.5; }
#pista{
  position: absolute; left: 18px; bottom: 18px; margin: 0; padding: 5px 8px; pointer-events: none;
  background: rgba(10, 10, 11, .86); color: var(--gris); white-space: nowrap; max-width: calc(100% - 36px); overflow: hidden; text-overflow: ellipsis;
}
#pista b{ color: var(--sodio); font-weight: 400; }
#pista .sep{ display: inline-block; width: 1px; height: 9px; margin: 0 8px; background: var(--linea); vertical-align: -1px; }
#marca{ position: absolute; right: 18px; bottom: 6px; font-size: 12px; color: var(--apagado); text-decoration: none; }
#marca:hover{ color: var(--claro); }
#rec{ position: absolute; right: 18px; top: 18px; display: flex; gap: 6px; align-items: center; padding: 4px 8px; background: rgba(10,10,11,.86); }
#rec i{ width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; animation: lat 1s steps(2, jump-none) infinite; }
@keyframes lat { 50% { opacity: .2; } }
#suelta{ position: absolute; inset: 14px; display: grid; gap: 6px; font-size: 13px; text-align: center; }
#suelta[hidden]{ display: none; }
#suelta span{ display: flex; align-items: center; justify-content: center; background: rgba(10,10,11,.88); border: 1px dashed var(--apagado); }
#suelta span.on{ border-color: var(--sodio); color: var(--sodio); }

/* ---- consola ---- */
#consola{
  border-left: 1px solid var(--linea); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--linea) transparent;
  padding: 0 14px 12px; background: var(--neg);
}
.cab{ display: flex; align-items: center; gap: 8px; height: 34px; }
h1{ margin: 0;;; flex: 1; }
#lectura{ font-family: var(--mono); color: var(--apagado); font-variant-numeric: tabular-nums; }
.grupo{ border-top: 1px solid var(--linea); padding: 7px 0 8px; }
h2{ margin: 0 0 4px;;;; display: flex; gap: 8px; }
h2 span{;; }

.fila{ display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; min-height: 26px; }
.fila.alta{ align-items: start; padding: 2px 0; }
.et{ color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* deslizador: línea fina con marcas y una aguja */
.fila.r{ grid-template-columns: 90px minmax(0, 1fr) 50px; height: 25px; }
.fila.r output{ font-family: var(--mono); font-size: 12px; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; color: var(--claro); }
.fila.r:hover .et, .fila.r.activo .et{ color: var(--claro); }
.riel{
  position: relative; height: 24px; display: flex; align-items: center;
  background: repeating-linear-gradient(90deg, #333336 0 1px, transparent 1px 10%) 0 100% / calc(100% - 1px) 4px no-repeat;
}

/* selectores */
.seg{ display: flex; gap: 1px; height: 22px; }
.seg button{
  flex: 1 1 0; min-width: 0; padding: 0 2px; border: 0; background: var(--neg3); color: var(--gris); cursor: pointer; white-space: nowrap;
}
.seg button:hover{ color: var(--claro); background: var(--mx-sup-2); }
.seg button[aria-pressed="true"]{ background: var(--claro); color:var(--mx-fondo); }

button.mini, button.ancho, .tres button, .retazos button{
  border: 0; background: var(--neg3); color: var(--claro); cursor: pointer; height: 24px; padding: 0 8px; white-space: nowrap;
}
button.mini{ height: 20px; padding: 0 7px; color: var(--gris); }
button.mini:hover, button.ancho:hover, .tres button:hover, .retazos button:hover{ background: var(--mx-sup-2); color: var(--claro); }
button.ancho{ width: 100%; margin-top: 6px; height: 26px; }
button.fuerte{ background: var(--sodio); color:var(--mx-fondo); }
button.fuerte:hover{ background: var(--mx-puro); color:var(--mx-fondo); }
.retazos{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.retazos button{ padding: 0 4px; overflow: hidden; text-overflow: ellipsis; color: var(--gris); }
.retazos button[aria-pressed="true"]{ background: var(--claro); color:var(--mx-fondo); }
.tres{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 4px 0; }
.tres button{ padding: 0 3px; overflow: hidden; text-overflow: ellipsis; }
.dos{ display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 4px 0; }
.dos button{ border: 0; background: var(--neg3); color: var(--claro); cursor: pointer; height: 24px; padding: 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dos button:hover{ background: var(--mx-sup-2); }
.dos button[aria-pressed="true"]{ background: var(--claro); color:var(--mx-fondo); }
#f-detras[hidden]{ display: none; }

/* fotos */
.cara{ min-width: 0; }
.fotos{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.fotos button{ padding: 0; border: 0; height: 30px; background: var(--neg3); cursor: pointer; position: relative; overflow: hidden; }
.fotos img{ width: 100%; height: 100%; object-fit: cover; display: block; opacity: .62; transition: opacity .15s; }
.fotos button:hover img{ opacity: .95; }
.fotos button[aria-pressed="true"]{ outline: 1px solid var(--claro); outline-offset: -1px; }
.fotos button[aria-pressed="true"] img{ opacity: 1; }
.fotos button.propia::after{ content: "tuya"; position: absolute; inset: auto 0 0 0; font-size: 12px; background: rgba(0,0,0,.7); }

.colores{ display: flex; align-items: center; gap: 4px; }
.muestra{ position: relative; width: 22px; height: 20px; display: block; }
.muestra input{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.muestra i{ position: absolute; inset: 0; background: var(--c, #cdbfa5); box-shadow: 0 0 0 1px #3a3a3d; pointer-events: none; }
.muestra:focus-within i{ outline: 1px solid var(--claro); outline-offset: 2px; }
#f-tinte[hidden]{ display: none; }

.estado{ margin: 4px 0 0; min-height: 13px; color: var(--apagado); }

/* pantallas chicas: el lienzo arriba, los controles abajo */
@media (max-width: 760px) {
  #an{ grid-template-columns: 1fr; grid-template-rows: minmax(250px, 50dvh) minmax(0, 1fr); }
  #marco{ padding: 8px; }
  #consola{ border-left: 0; border-top: 1px solid var(--linea); }
  #pista{ left: 8px; bottom: 8px; font-size: 12px; }
  #pista .ex{ display: none; }
  #marca{ right: 10px; bottom: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  #rec i{ animation: none; }
  .fotos img{ transition: none; }
}

#rec[hidden], #pista[hidden], #suelta[hidden]{ display: none; }
@media (hover: none) { #pista .rueda{ display: none; } }

/* ── Moxen: lo propio de esta herramienta ── */
#an h2 span { display: none; }
.riel { background: none; }