/* Editor de cortes — estilos del componente.
   Sigue el diseño "Nevelaski Cinematic": fondo #0a0a0b, texto hueso #f2efe9, acento rojo #ff3b1f,
   etiquetas en mayúsculas con TT Octosquares, cuerpo ligero, líneas finas y botones píldora.
   Todo cuelga de .ec (el contenedor), así no se mezcla con los estilos de la página que lo incluye. */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500&display=swap");

@font-face { font-family: "TT Octosquares"; src: url(assets/fonts/TTOctosquares-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "TT Octosquares"; src: url(assets/fonts/TTOctosquares-Light.ttf) format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "TT Octosquares"; src: url(assets/fonts/TTOctosquares-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }
/* Si se copian RadiateSans-*.ttf a assets/fonts, basta con añadir "Radiate Sans" delante de --ec-cuerpo. */

.ec {
  --ec-bg: #0a0a0b;
  --ec-txt: #f2efe9;
  --ec-txt2: #b9b5ad;
  --ec-mudo: #8a8780;
  --ec-tenue: #5e5b56;
  --ec-acento: #ff3b1f;
  --ec-linea: rgba(242, 239, 233, .12);
  --ec-linea2: rgba(242, 239, 233, .25);
  --ec-mono: "TT Octosquares", "Space Grotesk", system-ui, sans-serif;
  --ec-cuerpo: "Space Grotesk", system-ui, sans-serif;
  --ec-suave: cubic-bezier(.16, 1, .3, 1);

  position: relative; overflow: hidden;
  height: 100%; display: flex; flex-direction: column;
  margin: 0; background: var(--ec-bg); color: var(--ec-txt);
  font: 300 14px/1.5 var(--ec-cuerpo);
  -webkit-font-smoothing: antialiased;
}
.ec *, .ec *::before, .ec *::after { box-sizing: border-box; }
.ec:focus { outline: none; }
.ec :focus-visible { outline: 1px solid var(--ec-acento); outline-offset: 3px; }
.ec ::selection { background: var(--ec-acento); color: var(--ec-bg); }
.ec b { font-weight: 500; color: var(--ec-txt); }

/* grano y línea de progreso, como en la web */
.ec .ec-grano {
  position: absolute; inset: -10%; pointer-events: none; z-index: 30; opacity: .07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: ecGrano .6s steps(1) infinite;
}
@keyframes ecGrano { 0%, 100% { transform: translate(0, 0) } 20% { transform: translate(-3%, 2%) } 40% { transform: translate(2%, -4%) } 60% { transform: translate(-4%, -1%) } 80% { transform: translate(3%, 3%) } }
.ec .ec-progreso {
  position: absolute; left: 0; top: 0; height: 2px; width: 100%; z-index: 31; background: var(--ec-acento);
  transform-origin: left; transform: scaleX(0); opacity: 0; transition: opacity .3s;
}
.ec.ocupado .ec-progreso { opacity: 1; animation: ecProgreso 2.4s var(--ec-suave) infinite; }
@keyframes ecProgreso { 0% { transform: scaleX(0); transform-origin: left } 60% { transform: scaleX(1); transform-origin: left } 61% { transform-origin: right } 100% { transform: scaleX(0); transform-origin: right } }

/* ---------------------------------------------------------------- tipografía de etiqueta */
.ec .ec-kicker, .ec label, .ec aside h3, .ec button, .ec select, .ec kbd, .ec .info, .ec .ayuda, .ec .ec-estado, .ec .ec-vertical {
  font-family: var(--ec-mono); font-weight: 400; text-transform: uppercase; letter-spacing: .1em;
}
.ec .ec-kicker { font-size: 11px; color: var(--ec-mudo); }

/* ---------------------------------------------------------------- cabecera */
.ec header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  height: 64px; padding: 0 22px; border-bottom: 1px solid var(--ec-linea); flex: none;
}
.ec .ec-marca { display: flex; align-items: center; gap: 14px; color: var(--ec-txt); }
.ec .ec-marca img { height: 22px; width: auto; display: block; }
.ec .ec-marca .ec-kicker { padding-left: 14px; border-left: 1px solid var(--ec-linea2); line-height: 1.3; }
.ec .ec-herr { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--ec-linea2); border-radius: 999px; }
.ec .ec-herr button { border: 0; padding: 8px 14px; gap: 9px; }
.ec .ec-herr button svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ec .ec-cab-der { display: flex; justify-content: flex-end; align-items: center; gap: 18px; min-width: 0; }
.ec .ec-cab-der label { min-width: 0; }
.ec .ec-cab-der select { max-width: 260px; }
.ec .ec-estado { font-size: 11px; color: var(--ec-mudo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- cuerpo */
.ec main { flex: 1; display: grid; grid-template-columns: 320px 1fr; min-height: 0; }
.ec aside {
  padding: 22px 22px 28px; overflow: auto; display: flex; flex-direction: column; gap: 26px;
  border-right: 1px solid var(--ec-linea); scrollbar-width: thin; scrollbar-color: var(--ec-linea2) transparent;
}
.ec aside::-webkit-scrollbar { width: 6px; }
.ec aside::-webkit-scrollbar-thumb { background: var(--ec-linea2); border-radius: 3px; }

.ec .ec-titulo { display: flex; flex-direction: column; gap: 10px; }
.ec .ec-titulo h1 {
  margin: 0; font-family: var(--ec-mono); font-weight: 700; text-transform: uppercase;
  font-size: 34px; line-height: .92; letter-spacing: -.01em;
}
.ec .ec-titulo h1 em { font-style: normal; font-weight: 300; color: var(--ec-acento); }

.ec aside section { display: flex; flex-direction: column; gap: 12px; }
.ec aside section[hidden] { display: none; }
.ec aside h3 {
  margin: 0; display: flex; gap: 14px; align-items: baseline;
  font-size: 11px; color: var(--ec-txt); padding-top: 18px; border-top: 1px solid var(--ec-linea);
}
.ec aside h3 .n { color: var(--ec-acento); letter-spacing: .14em; }

.ec .nota { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ec-txt2); }
.ec .nota + .nota { margin-top: -4px; }
.ec ul.nota { padding-left: 16px; }
.ec ul.nota li { margin: 2px 0; }
.ec .fila { display: flex; gap: 8px; flex-wrap: wrap; }
.ec .fila > * { flex: 1 1 auto; }
.ec .caja { display: flex; flex-direction: column; gap: 12px; padding: 14px 0 4px; border-top: 1px dashed var(--ec-linea2); }
.ec .caja[hidden] { display: none; }

/* ---------------------------------------------------------------- controles */
.ec label { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--ec-mudo); }
.ec label > span:last-child:not(:first-child) { margin-left: auto; color: var(--ec-txt); }

.ec button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 11px; color: var(--ec-txt); background: transparent;
  border: 1px solid var(--ec-linea2); border-radius: 999px; padding: 9px 14px; cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.ec button:hover:not(:disabled) { border-color: var(--ec-txt); background: rgba(242, 239, 233, .06); }
.ec button:disabled { opacity: .35; cursor: default; }
.ec button.activo { background: var(--ec-txt); color: var(--ec-bg); border-color: var(--ec-txt); }
.ec button.principal {
  width: 100%; padding: 15px 18px; font-size: 12px; letter-spacing: .12em;
  background: var(--ec-txt); color: var(--ec-bg); border-color: var(--ec-txt);
}
.ec button.principal:hover:not(:disabled) { background: var(--ec-acento); border-color: var(--ec-acento); color: var(--ec-bg); }
.ec button.mini { width: 26px; height: 26px; padding: 0; margin-left: 8px; font-size: 13px; flex: none; }
.ec kbd {
  font-size: 9px; letter-spacing: .08em; padding: 2px 5px; border: 1px solid currentColor; border-radius: 3px;
  opacity: .55; line-height: 1; margin-left: 2px;
}
.ec button.activo kbd { opacity: .7; }

.ec select, .ec input[type=number] {
  font: inherit; color: var(--ec-txt); background: transparent; border: 0;
  border-bottom: 1px solid var(--ec-linea2); border-radius: 0; padding: 6px 0; outline: none;
  transition: border-color .3s; min-width: 0;
}
.ec select { font-family: var(--ec-cuerpo); font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; cursor: pointer; }
.ec select option { background: #141416; color: var(--ec-txt); text-transform: none; letter-spacing: 0; }
.ec select:hover, .ec input[type=number]:hover { border-bottom-color: var(--ec-txt2); }
.ec select:focus, .ec input[type=number]:focus { border-bottom-color: var(--ec-acento); }
.ec input[type=number] { font-family: var(--ec-cuerpo); font-size: 13px; font-weight: 400; width: 100%; -moz-appearance: textfield; }
.ec input[type=number]::-webkit-inner-spin-button { opacity: .4; }

.ec input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; margin: 0; cursor: pointer; }
.ec input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--ec-linea2); }
.ec input[type=range]::-moz-range-track { height: 1px; background: var(--ec-linea2); }
.ec input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5.5px; border-radius: 50%;
  background: var(--ec-txt); border: 0; transition: background .3s, transform .3s var(--ec-suave);
}
.ec input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--ec-txt); border: 0; }
.ec input[type=range]:hover::-webkit-slider-thumb, .ec input[type=range]:focus-visible::-webkit-slider-thumb { background: var(--ec-acento); transform: scale(1.25); }
.ec input[type=range]:hover::-moz-range-thumb { background: var(--ec-acento); }

.ec input[type=checkbox] {
  appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0; flex: none; cursor: pointer;
  border: 1px solid var(--ec-linea2); background: transparent; transition: background .25s, border-color .25s, box-shadow .25s;
}
.ec input[type=checkbox]:hover { border-color: var(--ec-txt); }
.ec input[type=checkbox]:checked { background: var(--ec-acento); border-color: var(--ec-acento); box-shadow: inset 0 0 0 3px var(--ec-bg); }

.ec .coords { display: grid; grid-template-columns: 64px 1fr 1fr 1fr; gap: 6px 10px; align-items: end; }
.ec .coords > span, .ec .coords > b { font-family: var(--ec-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ec-mudo); }
.ec .coords > b { text-align: left; color: var(--ec-txt); font-weight: 400; padding-bottom: 4px; }

/* ---------------------------------------------------------------- piezas */
.ec [data-ec="piezas"] { display: flex; flex-direction: column; }
.ec .pieza {
  display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ec-linea);
  font: 300 13px/1.3 var(--ec-cuerpo); color: var(--ec-txt); text-transform: none; letter-spacing: 0;
}
.ec .pieza span { margin-left: auto; font-family: var(--ec-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ec-mudo); white-space: nowrap; }

.ec .ec-pie { gap: 14px; }

/* ---------------------------------------------------------------- vista 3D */
.ec .pane { position: relative; min-height: 0; overflow: hidden; background: var(--ec-bg); }
.ec .pane canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.ec .pane svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ec [data-ec="vista"].lapiz canvas { cursor: crosshair; }
.ec .ec-brillo {
  position: absolute; inset: -20% -10%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse 45% 40% at 78% 30%, rgba(255, 59, 31, .22), transparent 70%);
}
.ec .ec-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--ec-bg) 0%, transparent 22%); }
.ec .ec-vertical {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl;
  display: flex; gap: 12px; align-items: center; font-size: 10px; letter-spacing: .2em; color: var(--ec-mudo); pointer-events: none;
}
.ec .ec-vertical::before { content: ""; width: 1px; height: 56px; background: var(--ec-mudo); display: block; }
.ec .info, .ec .ayuda {
  position: absolute; left: 22px; pointer-events: none; max-width: calc(100% - 44px);
  font-size: 10.5px; line-height: 1.7; color: var(--ec-mudo); letter-spacing: .08em;
}
.ec .info { top: 18px; }
.ec .info b { color: var(--ec-txt); font-weight: 400; }
.ec .ayuda { bottom: 18px; padding-left: 14px; border-left: 1px solid var(--ec-linea2); }
.ec .ok { color: var(--ec-txt); } .ec .mal { color: var(--ec-acento); }

/* ---------------------------------------------------------------- modo demo */
.ec.en-demo aside, .ec.en-demo .info, .ec.en-demo .ayuda, .ec.en-demo .ec-vertical, .ec.en-demo .ec-cab-der { visibility: hidden; }
.ec.en-demo main { grid-template-columns: 0 1fr; }
.ec.en-demo, .ec.en-demo * { cursor: none !important; }
.ec .ec-rotulo {
  position: absolute; left: 48px; bottom: 56px; max-width: 60%; pointer-events: none;
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0; transform: translateY(18px); transition: opacity .7s, transform 1s var(--ec-suave);
}
.ec .ec-rotulo.visible { opacity: 1; transform: none; }
.ec .ec-rotulo .ec-kicker { color: var(--ec-txt2); font-size: 12px; letter-spacing: .14em; }
.ec .ec-rotulo h2 {
  margin: 0; font-family: var(--ec-mono); font-weight: 700; text-transform: uppercase;
  font-size: clamp(32px, 4.6vw, 72px); line-height: .92; letter-spacing: -.01em; color: var(--ec-txt);
}
.ec .ec-rotulo h2 em { font-style: normal; font-weight: 300; color: var(--ec-acento); }
.ec .ec-puntero {
  position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; pointer-events: none;
  border-radius: 50%; border: 1.5px solid var(--ec-txt); background: rgba(255, 59, 31, .35);
  box-shadow: 0 0 0 0 rgba(255, 59, 31, .6); opacity: 0; transition: opacity .3s;
}
.ec .ec-puntero.visible { opacity: 1; }
.ec .ec-puntero.pulso { animation: ecPulso .7s ease-out; }
@keyframes ecPulso { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 31, .7) } 100% { box-shadow: 0 0 0 26px rgba(255, 59, 31, 0) } }

@media (max-width: 900px) {
  .ec { height: auto; }
  .ec header { grid-template-columns: 1fr; height: auto; padding: 12px 16px; gap: 10px; }
  .ec .ec-cab-der { justify-content: flex-start; }
  .ec main { grid-template-columns: 1fr; grid-template-rows: 70vh auto; }
  .ec .pane { order: -1; }
}