@font-face { font-family: "Barlow Condensed"; src: url("assets/fonts/barlow-condensed-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("assets/fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Druk VR"; src: url("assets/fonts/druk-heavy-vr.woff2") format("woff2"); font-display: swap; }

:root {
  --asfalto: #08080a;
  --carbon: #141417;
  --carbon-alto: #1d1d22;
  --grafito: #2a2a30;
  --borde: #5c5d67;          /* contorno de controles: 3:1 sobre asfalto y carbón */
  --acero: #9a9ea6;
  --hueso: #f4f4f2;
  --rojo: #e3121b;
  --rojo-vivo: #ff2b2b;
  --rojo-hondo: #b30d15;
  --radio: 4px;
  --tope: 74px;              /* cabecera más piano */
  --riel: 404px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--asfalto); scrollbar-color: var(--borde) var(--asfalto); }
body {
  margin: 0; min-height: 100dvh; background: var(--asfalto); color: var(--hueso);
  font: 500 1.0625rem/1.35 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased; caret-color: var(--rojo-vivo);
}
::selection { background: var(--rojo); color: #fff; }
:focus-visible { outline: 2px solid var(--hueso); outline-offset: 2px; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
p { margin: 0; }

/* Cabecera */
.tope { position: sticky; top: 0; z-index: 10; }
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 68px; padding: 0 clamp(16px, 2.4vw, 32px); background: var(--carbon); }
.marca { display: flex; align-items: center; gap: 16px; min-width: 0; }
.marca a { display: block; flex: none; border-radius: var(--radio); }
.marca img { display: block; height: 28px; width: auto; }
/* La marca va en la letra del título de las cartelas, con su misma inclinación de 10° */
.marca__nombre { margin: 0; padding-left: 18px; border-left: 1px solid var(--borde); font: 400 1.875rem/1 "Druk VR", "Barlow Condensed", sans-serif; text-transform: uppercase; }
.marca__nombre span { display: inline-block; transform: skewX(-10deg); }
/* Piano de pista: la franja roja y blanca de los bordillos cierra la cabecera. Corre una vez al terminar una descarga. */
.piano { height: 6px; background: repeating-linear-gradient(100deg, var(--rojo) 0 28px, var(--hueso) 28px 56px) 0 0 / 57px 6px; }
.piano[data-corre] { animation: piano 700ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes piano { from { background-position-x: 0; } to { background-position-x: 228px; } }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--radio);
  font: inherit; font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out; }
.boton--principal { background: var(--rojo); color: #fff; }
.boton--principal:hover { background: #c9101a; }
.boton--principal:active { background: var(--rojo-hondo); }
.boton--principal:disabled { background: var(--grafito); color: var(--acero); cursor: progress; }
.boton--discreto { width: 100%; background: transparent; border-color: var(--borde); color: var(--hueso); }
.boton--discreto:hover { border-color: var(--hueso); background: var(--carbon-alto); }
.boton--discreto:active { background: var(--grafito); }
.boton--discreto:disabled { color: var(--acero); border-color: var(--grafito); cursor: default; background: transparent; }
.boton--discreto.boton--enlace { width: auto; margin-left: auto; }

/* Mesa: el monitor a la izquierda y el riel de control, en carbón, a la derecha */
.mesa { display: grid; grid-template-columns: minmax(0, 1fr) var(--riel); align-items: start; min-height: calc(100dvh - var(--tope)); }

.monitor { position: sticky; top: var(--tope); min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: clamp(16px, 2vw, 28px) clamp(16px, 2.4vw, 32px) 32px; }
.pantalla { position: relative; aspect-ratio: 16 / 9; width: min(100%, calc((100dvh - var(--tope) - 190px) * 16 / 9)); margin-inline: auto; border: 1px solid var(--grafito); border-radius: var(--radio); overflow: hidden; background: #000; }
.pantalla[data-formato="v"] { aspect-ratio: 9 / 16; width: min(100%, calc((100dvh - var(--tope) - 190px) * 9 / 16)); }
.pantalla__cuadro { position: absolute; inset: 0; transform-origin: 0 0; transform: translate(calc(var(--tx, 0) * 1%), calc(var(--ty, 0) * 1%)) scale(var(--k, 1)); transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), opacity 160ms ease-out; background-color: #000; }
.pantalla canvas { display: block; width: 100%; height: 100%; }
.pantalla[data-estado="cargando"] .pantalla__cuadro, .pantalla[data-estado="error"] .pantalla__cuadro { opacity: 0; }
.pantalla[data-fondo="pista"] .pantalla__cuadro { background: #000 url("assets/img/fondo-pista.jpg") center / cover; }
.pantalla[data-fondo="gris"] .pantalla__cuadro { background-color: #7b7d82; }
.pantalla[data-fondo="alfa"] .pantalla__cuadro { background: conic-gradient(#3a3a42 25%, #24242a 0 50%, #3a3a42 0 75%, #24242a 0) 0 0 / 28px 28px; }
.pantalla__segura { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 160ms ease-out; }
/* Márgenes: lo que queda fuera de la zona segura se tiñe y la zona se marca con línea discontinua.
   En vertical, cada franja dice qué parte de la interfaz de TikTok la tapa. */
.zona { position: absolute; display: grid; place-items: center; background: rgba(227, 18, 27, 0.30); }
.zona i { font-style: normal; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px #000; text-align: center; padding: 2px; }
.zona--arriba { inset: 0 0 auto 0; height: var(--z-arriba, 5%); }
.zona--abajo { inset: auto 0 0 0; height: var(--z-abajo, 5%); }
.zona--izq { left: 0; top: var(--z-arriba, 5%); bottom: var(--z-abajo, 5%); width: var(--z-izq, 5%); }
.zona--dcha { right: 0; top: var(--z-arriba, 5%); bottom: var(--z-abajo, 5%); width: var(--z-dcha, 5%); }
.zona--dcha i { writing-mode: vertical-rl; }
.zona__marco { position: absolute; inset: var(--z-arriba, 5%) var(--z-dcha, 5%) var(--z-abajo, 5%) var(--z-izq, 5%); border: 1px dashed rgba(244, 244, 242, 0.75); }
.pantalla[data-formato="h"] .zona i { display: none; }
.pantalla[data-formato="h"] .zona { background: rgba(8, 8, 10, 0.45); }
.pantalla[data-segura] .pantalla__segura { opacity: 1; }
.pantalla__aviso { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--acero); }
.pantalla[data-estado="lista"] .pantalla__aviso { display: none; }
.pantalla[data-estado="error"] .pantalla__aviso { color: var(--hueso); }

.monitor__pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 24px; min-height: 1.4em; }
.monitor__archivo { display: flex; flex-wrap: wrap; gap: 0 16px; color: var(--acero); font-variant-numeric: tabular-nums; }
#archivo { color: var(--hueso); font-weight: 600; }
#aviso { color: var(--hueso); }
#aviso:not(:empty)::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--rojo-vivo); transform: skewX(-10deg); }
.monitor__barra { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 24px; }

/* Etiquetas */
legend, .deslizador label, .campo label { padding: 0; color: var(--acero); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* Segmentos: la opción elegida lleva el mismo filete rojo que la plantilla elegida */
.segmentos { display: flex; flex-wrap: wrap; }
.segmentos legend { margin-bottom: 6px; }
.segmentos label { position: relative; margin-right: -1px; }
.segmentos input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmentos span { display: block; min-height: 44px; padding: 11px 14px; border: 1px solid var(--borde); color: var(--acero); font-weight: 600; letter-spacing: 0.04em; text-align: center; transition: background-color 160ms ease-out, color 160ms ease-out, box-shadow 160ms ease-out; }
.segmentos label:first-of-type span { border-radius: var(--radio) 0 0 var(--radio); }
.segmentos label:last-of-type span { border-radius: 0 var(--radio) var(--radio) 0; }
.segmentos input:hover + span { background: var(--carbon-alto); color: var(--hueso); }
.segmentos input:checked + span { position: relative; z-index: 1; border-color: var(--rojo); background: var(--carbon-alto); color: var(--hueso); box-shadow: inset 0 0 0 1px var(--rojo); }
.segmentos input:focus-visible + span { position: relative; z-index: 2; outline: 2px solid var(--hueso); outline-offset: 2px; }
.segmentos--anchos label { flex: 1; }
.segmentos--anchos small { margin-left: 6px; color: var(--acero); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.02em; }

.casilla { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; }
.casilla input { width: 18px; height: 18px; margin: 0; accent-color: var(--rojo); }
/* Interruptor de márgenes: se comporta como una casilla y se ve como un botón que queda pulsado */
.casilla--boton { position: relative; padding: 0 14px; border: 1px solid var(--borde); border-radius: var(--radio); color: var(--acero); transition: background-color 160ms ease-out, color 160ms ease-out, box-shadow 160ms ease-out; }
.casilla--boton:hover { background: var(--carbon-alto); color: var(--hueso); }
.casilla--boton:has(input:checked) { border-color: var(--rojo); background: var(--carbon-alto); color: var(--hueso); box-shadow: inset 0 0 0 1px var(--rojo); }
.casilla--boton:has(input:focus-visible) { outline: 2px solid var(--hueso); outline-offset: 2px; }
.casilla--boton input:focus-visible { outline: none; }

/* Riel de control */
.control { display: grid; gap: 28px; align-content: start; min-width: 0; min-height: calc(100dvh - var(--tope)); padding: 24px 24px 48px; background: var(--carbon); border-left: 1px solid var(--grafito); }
.bloque > legend { display: block; width: 100%; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--grafito); color: var(--hueso); font-size: 1rem; }

.plantillas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.plantilla { position: relative; display: grid; grid-template-columns: 106px minmax(0, 1fr); align-items: center; gap: 10px; padding: 4px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--asfalto); cursor: pointer; transition: border-color 160ms ease-out, box-shadow 160ms ease-out; }
.plantilla:hover { border-color: var(--hueso); }
.plantilla input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.plantilla canvas, .plantilla .plantilla__hueco { display: block; width: 106px; height: 50px; border-radius: 2px; background: #000; }
.plantilla__nombre { font-weight: 600; font-size: 1.0625rem; line-height: 1.15; color: var(--acero); }
.plantilla:has(input:checked) { border-color: var(--rojo); box-shadow: inset 0 0 0 1px var(--rojo); }
.plantilla:has(input:checked) .plantilla__nombre { color: var(--hueso); }
.plantilla:has(input:focus-visible) { outline: 2px solid var(--hueso); outline-offset: 2px; }
#detalle { margin-top: 10px; min-height: 1.35em; }

.campos { display: grid; gap: 14px; }
.campos .casilla { justify-self: start; }
.campo { display: grid; gap: 6px; }
.campo__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.campo__cuenta { color: var(--acero); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.campo__cuenta[data-lleno] { color: var(--hueso); font-weight: 600; }
.campo input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--asfalto); color: var(--hueso);
  font: inherit; font-weight: 600; font-size: 1.1875rem; letter-spacing: 0.03em; text-transform: uppercase; transition: border-color 160ms ease-out, box-shadow 160ms ease-out; }
.campo input::placeholder { color: #8b8f97; font-weight: 500; }
.campo input:hover { border-color: var(--hueso); }
.campo input:focus-visible { outline: none; border-color: var(--hueso); box-shadow: 0 0 0 1px var(--hueso); }
.nota { margin-top: 12px; color: var(--acero); font-size: 0.9375rem; max-width: 46ch; }

/* Deslizadores: pista gris, marca en el valor original y mando hueso. Sin relleno, porque dos de los tres parten del centro. */
.deslizador { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 12px; margin-bottom: 10px; }
.deslizador output { color: var(--hueso); font-weight: 600; font-variant-numeric: tabular-nums; }
.rango { position: relative; grid-column: 1 / -1; height: 36px; }
.rango::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--borde); }
.rango::after { content: ""; position: absolute; top: 50%; left: calc(11px + (100% - 22px) * var(--def)); width: 2px; height: 16px; margin: -8px 0 0 -1px; background: var(--hueso); }
.rango input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.rango input::-webkit-slider-runnable-track { height: 36px; background: transparent; }
.rango input::-moz-range-track { height: 36px; background: transparent; }
.rango input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: 7px; border: 3px solid var(--carbon); border-radius: 50%; background: var(--hueso); box-shadow: 0 0 0 1px var(--hueso); transition: background-color 160ms ease-out; }
.rango input::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid var(--carbon); border-radius: 50%; background: var(--hueso); box-shadow: 0 0 0 1px var(--hueso); }
.rango input:active::-webkit-slider-thumb { background: var(--rojo-vivo); box-shadow: 0 0 0 1px var(--rojo-vivo); }
.rango input:active::-moz-range-thumb { background: var(--rojo-vivo); box-shadow: 0 0 0 1px var(--rojo-vivo); }
.rango input:focus-visible { outline: 2px solid var(--hueso); outline-offset: 0; border-radius: var(--radio); }

@media (max-width: 1100px) { :root { --riel: 360px; } .control { padding-inline: 18px; } }

/* Estrecho: una columna. El monitor se deshace para que la vista previa se quede fija mientras se escribe;
   plantilla y texto van justo debajo y los controles de vista, al final. */
@media (max-width: 860px) {
  .mesa { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; align-content: start; }
  .monitor { display: contents; }
  .pantalla { order: 1; position: sticky; top: calc(var(--tope) + 10px); z-index: 5; width: min(calc(100% - 32px), calc(44dvh * 16 / 9)); margin: 10px auto 0; box-shadow: 0 0 0 100vmax var(--asfalto); clip-path: inset(-12px -100vmax -10px -100vmax); }
  .pantalla[data-formato="v"] { width: min(calc(100% - 32px), calc(40dvh * 9 / 16)); }
  .monitor__pie { order: 2; padding: 12px 16px 16px; }
  .control { order: 3; min-height: 0; padding: 20px 16px 28px; border-left: 0; border-top: 1px solid var(--grafito); }
  .monitor__barra { order: 4; padding: 20px 16px 40px; border-top: 1px solid var(--grafito); }
  .boton--discreto.boton--enlace { width: 100%; margin-left: 0; }
  .rango { height: 44px; }
  .rango input::-webkit-slider-runnable-track { height: 44px; }
  .rango input::-webkit-slider-thumb { margin-top: 11px; }
}
@media (max-width: 560px) {
  :root { --tope: 66px; }
  .cabecera { height: 60px; }
  .marca { gap: 10px; } .marca img { height: 22px; }
  .marca__nombre { padding-left: 12px; font-size: 1.5rem; }
  .plantilla { grid-template-columns: 84px minmax(0, 1fr); gap: 8px; }
  .plantilla canvas, .plantilla .plantilla__hueco { width: 84px; height: 40px; }
  .plantilla__nombre { font-size: 1rem; }
  .boton--principal { padding: 0 12px; font-size: 0.9375rem; }
  .boton--principal svg { display: none; }
  .segmentos span { padding: 11px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .pantalla__cuadro { transition: opacity 160ms ease-out; }
  .piano[data-corre] { animation: none; }
}

/* Página de dirección no encontrada */
.perdida { display: grid; justify-items: start; gap: 16px; max-width: 46ch; padding: clamp(32px, 8vw, 96px) clamp(16px, 2.4vw, 32px); }
.perdida h1 { margin: 0; font: 600 2rem/1.1 "Barlow Condensed", sans-serif; letter-spacing: 0.02em; }
.perdida p { color: var(--acero); }
.perdida .boton { text-decoration: none; margin-top: 8px; }
@media (max-width: 380px) { .marca__nombre { font-size: 1.3125rem; } .boton--principal { padding: 0 10px; } }