@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Marca, medida del logotipo oficial */
  --morado:        #824DEB;          /* marca: superficies y trazos */
  --morado-oscuro: oklch(46% 0.19 293.3); /* hover de botones sobre --morado */
  --morado-texto:  oklch(53% 0.2 293.3); /* mismo tono, 4.9:1 sobre chapa */
  --magenta:       #FF00FF;

  /* Tablero: el morado ocupa campo, no acentos */
  --tablero:       oklch(48% 0.19 293.3);
  --tablero-alto:  oklch(56% 0.21 293.3);   /* ≈ #824DEB: la marca como campo */
  --tablero-hondo: oklch(41% 0.17 293.3);
  --riel:          oklch(72% 0.05 293.3);

  /* Papel y chapa */
  --fondo:         oklch(96.5% 0.011 293.3);
  --placa:         oklch(94.5% 0.006 293.3);
  --placa-alta:    oklch(98% 0.004 293.3);
  --placa-canto:   oklch(85% 0.012 293.3);

  --tinta:         oklch(24% 0.045 293.3);
  --tinta-media:   oklch(45% 0.032 293.3);
  --sobre-oscuro:  oklch(97% 0.012 293.3);
  --sobre-oscuro-2:oklch(89% 0.035 293.3);

  --radio:         0.65rem;
  --radio-chico:   0.35rem;
  --salida:        cubic-bezier(0.16, 1, 0.3, 1);

  --sombra-placa:  0 1px 2px oklch(24% 0.05 293.3 / 0.18),
                   0 6px 14px -6px oklch(24% 0.05 293.3 / 0.34);
  --sombra-suelta: 0 3px 6px oklch(20% 0.06 293.3 / 0.28),
                   0 18px 34px -14px oklch(20% 0.06 293.3 / 0.45);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--morado) oklch(90% 0.02 293.3);
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.06rem);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--morado);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

::selection { background: var(--magenta); color: #fff; }

:where(a) { color: inherit; }

:where(a, button):focus-visible {
  outline: 2.5px solid var(--magenta);
  outline-offset: 3px;
  border-radius: var(--radio-chico);
}

img { max-width: 100%; height: auto; }

.icono {
  width: 1em; height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.saltar {
  position: absolute; left: 0.75rem; top: -4rem;
  z-index: 20;
  background: var(--tinta); color: var(--sobre-oscuro);
  padding: 0.6rem 1rem; border-radius: var(--radio-chico);
  text-decoration: none; font-weight: 600;
  transition: top 0.2s var(--salida);
}
.saltar:focus { top: 0.75rem; }

/* ── Cabecera ─────────────────────────────────────────────── */

.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1rem, 4vw, 3rem);
  max-width: 82rem;
  width: 100%;
  margin-inline: auto;
}

.cabecera__marca {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.cabecera__marca img {
  width: auto; height: 1.55rem;
  align-self: center;
}
.cabecera__marca span { color: var(--tinta-media); }

.cabecera__nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  font-weight: 500;
  color: var(--tinta-media);
  padding: 0.4rem 0;
  border-bottom: 1.5px solid transparent;
  transition: color 0.18s var(--salida), border-color 0.18s var(--salida);
}
.cabecera__nav a:hover { color: var(--tinta); border-bottom-color: var(--morado-texto); }

/* ── Entrada ──────────────────────────────────────────────── */

main { flex: 1; }

.intro {
  max-width: 82rem;
  margin-inline: auto;
  padding: clamp(1rem, 2.6vw, 2rem) clamp(1rem, 4vw, 3rem) clamp(1.3rem, 2.8vw, 2rem);
}

h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(1.95rem, 1.3rem + 2.5vw, 3.15rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.038em;
  white-space: nowrap;
}
.h1__icono {
  flex: none;
  width: 0.72em;
  height: 0.72em;
  color: var(--morado-texto);
}

.intro__bajada {
  margin: 1rem 0 0;
  max-width: 68ch;
  color: var(--tinta-media);
  font-size: 1.06rem;
  text-wrap: pretty;
}

/* ── El tablero ───────────────────────────────────────────── */

.tablero {
  background:
    radial-gradient(120% 80% at 50% -10%, oklch(60% 0.2 293.3) 0%, transparent 60%),
    linear-gradient(var(--tablero-alto), var(--tablero) 42%, var(--tablero-hondo));
  border-block: 1px solid var(--tablero-hondo);
  padding-block: clamp(2.2rem, 4.5vw, 3.4rem) clamp(2.2rem, 5vw, 3.6rem);
  position: relative;
  overflow: hidden;
}

.tablero__interior {
  position: relative;
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.tablero__parte, .tablero__vacio {
  margin: 0 0 2rem;
  color: var(--sobre-oscuro-2);
  max-width: 52ch;
}

.llaves {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19.5rem), 1fr));
  gap: clamp(2.75rem, 4vw, 3.5rem) clamp(1.25rem, 2.5vw, 2rem);
}

@media (min-width: 64rem) {
  .llaves { grid-template-columns: repeat(4, 1fr); }
}

/* Cada gancho dibuja su tramo de riel; en fila forman una línea continua */
.llaves__gancho {
  position: relative;
  padding-top: 1.35rem;
}
.llaves__gancho::before {
  content: '';
  position: absolute;
  top: 0;
  left: -200vw;
  right: -200vw;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(var(--riel), oklch(42% 0.05 293.3));
  box-shadow: 0 1px 0 oklch(20% 0.06 293.3 / 0.55);
}

.gancho {
  position: absolute;
  top: 1px;
  left: 50%;
  translate: -50% 0;
  width: 0.95rem;
  height: 1.4rem;
  border: 2.5px solid oklch(78% 0.03 293.3);
  border-top-color: oklch(88% 0.02 293.3);
  border-radius: 0.5rem 0.5rem 0.2rem 0.2rem;
  border-bottom: none;
  z-index: 1;
}

/* ── La placa ─────────────────────────────────────────────── */

.placa {
  position: relative;
  background:
    repeating-linear-gradient(
      93deg,
      oklch(24% 0.045 293.3 / 0.035) 0 1px,
      transparent 1px 9px
    ),
    linear-gradient(var(--placa-alta), var(--placa));
  border: 1px solid var(--placa-canto);
  border-top-color: oklch(99% 0.002 293.3);
  border-bottom-color: oklch(76% 0.018 293.3);
  border-radius: var(--radio);
  padding: 1.6rem 1.35rem 1.35rem;
  box-shadow: var(--sombra-placa);
  transform-origin: top center;
  rotate: var(--inclina, -1.15deg);
  transition: rotate 0.45s var(--salida), translate 0.45s var(--salida),
              box-shadow 0.45s var(--salida);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.llaves__gancho:nth-child(even) .placa { --inclina: 1.4deg; }
.llaves__gancho:nth-child(3n)   .placa { --inclina: -0.7deg; }

/* Cada placa cuelga a su manera. --n lo emite PHP por placa; si el navegador
   no entiende mod(), quedan los valores de nth-child de arriba. */
.llaves__gancho {
  --paso: mod(var(--n), 3);
  --inclina: calc((var(--paso) - 1) * 1.15deg - 0.4deg);
}
.llaves__gancho .placa { margin-top: calc(mod(var(--n), 4) * 5px); }

/* el troquel por donde pasa el gancho */
.placa::before {
  content: '';
  position: absolute;
  top: 0.55rem; left: 50%;
  translate: -50% 0;
  width: 1.5rem; height: 0.3rem;
  border-radius: 0.3rem;
  background: oklch(72% 0.02 293.3);
  box-shadow: inset 0 1px 1px oklch(30% 0.03 293.3 / 0.45);
}

/* El momento autorado: la placa se descuelga y se endereza */
.placa:has(.placa__boton:hover),
.placa:has(.placa__boton:focus-visible) {
  rotate: 0deg;
  translate: 0 5px;
  box-shadow: var(--sombra-suelta);
}

.placa__titulo {
  margin: 0.1rem 0 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.piloto__sistema {
  font-weight: 600;
  color: var(--tinta-media);
  font-size: 0.8rem;
  font-stretch: 88%;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}
.piloto__sistema::after {
  content: '·';
  margin-inline: 0.4rem;
  color: var(--placa-canto);
}
.placa__instancia {
  font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.62rem);
  font-weight: 700;
  font-stretch: 86%;              /* anchura de placa grabada, no de titular */
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.06;
}

.placa__que {
  margin: 0;
  font-weight: 500;
  color: var(--morado-texto);
  font-size: 0.94rem;
}

.placa__desc {
  margin: 0;
  color: var(--tinta-media);
  font-size: 0.94rem;
  text-wrap: pretty;
}

.placa__nota {
  margin: 0;
  font-size: 0.88rem;
  color: var(--tinta-media);
}

.placa__botonera {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.placa__boton {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: var(--morado);
  padding: 0.6rem 1rem;
  border-radius: var(--radio-chico);
  transition: background 0.18s var(--salida);
}
.placa__boton .icono { width: 0.85em; height: 0.85em; }
.placa__boton:hover,
.placa__boton:focus-visible {
  background: var(--morado-oscuro);
}

/* ── El piloto ────────────────────────────────────────────── */

.piloto {
  margin: 0.35rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.piloto__luz {
  width: 0.62rem; height: 0.62rem;
  border-radius: 50%;
  background: oklch(72% 0.02 293.3);
  box-shadow: inset 0 1px 1.5px oklch(25% 0.03 293.3 / 0.5);
  flex: none;
}
.piloto__cat {
  margin-left: auto;
  font-weight: 500;
  color: var(--tinta-media);
  font-size: 0.8rem;
}

/* encendido: el magenta se gasta aquí y en ningún otro sitio */
[data-lampara='on'] .piloto__luz {
  background:
    radial-gradient(circle at 38% 34%, oklch(100% 0 0 / 0.9) 0 18%, transparent 45%),
    var(--magenta);
  box-shadow: 0 0 0 3px oklch(70% 0.32 328.4 / 0.18);
}
[data-lampara='off'] .piloto__texto { color: var(--tinta-media); }
[data-lampara='locked'] .piloto__luz {
  background: oklch(80% 0.11 85);
}

/* ── Acceso: la llave propiamente dicha ───────────────────── */

.placa__pie {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--placa-canto);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.acceso__detalle summary.acceso__rotulo {
  margin: 0;
  padding: 0.15rem 0;
  cursor: pointer;
  list-style: none;
}
.acceso__detalle summary.acceso__rotulo::-webkit-details-marker { display: none; }
.acceso__detalle[open] summary.acceso__rotulo { margin-bottom: 0.5rem; }
.acceso__detalle summary.acceso__rotulo:hover,
.acceso__detalle summary.acceso__rotulo:focus-visible { color: var(--morado-texto); }

.acceso__rotulo {
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.icono--llave { width: 1.15em; height: 1.15em; color: var(--morado-texto); }
.acceso__flecha {
  width: 0.85em; height: 0.85em;
  margin-left: auto;
  transition: rotate 0.25s var(--salida);
}
.acceso__detalle[open] .acceso__flecha { rotate: 180deg; }

.acceso__lista { margin: 0; display: grid; gap: 0.3rem; }
.acceso__par {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.acceso__par dt {
  font-size: 0.78rem;
  color: var(--tinta-media);
  min-width: 3.9rem;
}
.acceso__par dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.acceso__par code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.9rem;
  font-weight: 500;
  background: oklch(90% 0.015 293.3);
  padding: 0.12rem 0.42rem;
  border-radius: var(--radio-chico);
  letter-spacing: 0.01em;
}
.acceso__libre {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--tinta-media);
}
.acceso__libre .icono { color: var(--morado-texto); width: 1.15em; height: 1.15em; }

.acceso__nota {
  margin: 0.55rem 0 0;
  font-size: 0.82rem;
  color: var(--tinta-media);
}

.acceso__rotulo--fijo { margin: 0; }

.copiar {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem; height: 1.85rem;
  padding: 0;
  border: 1px solid var(--placa-canto);
  border-radius: var(--radio-chico);
  background: var(--placa-alta);
  color: var(--tinta-media);
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.18s var(--salida), color 0.18s var(--salida),
              border-color 0.18s var(--salida);
}
.copiar:hover { background: var(--morado); border-color: var(--morado); color: #fff; }
.copiar[data-hecho] { background: var(--morado); border-color: var(--morado); color: #fff; }
.copiar:disabled { opacity: 0.5; cursor: default; }

/* ── Gancho vacío ─────────────────────────────────────────── */

.placa--reservada {
  background: oklch(38% 0.15 293.3 / 0.55);
  border: 1.5px dashed oklch(78% 0.05 293.3);
  border-top-color: oklch(78% 0.05 293.3);
  border-bottom-color: oklch(78% 0.05 293.3);
  box-shadow: none;
  color: var(--sobre-oscuro-2);
  rotate: 0deg;
}
.placa--reservada::before { background: oklch(80% 0.03 293.3); box-shadow: none; }
.placa--reservada .placa__titulo { color: var(--sobre-oscuro); }
.placa--reservada .piloto__sistema,
.placa--reservada .placa__desc,
.placa--reservada .placa__estado { color: var(--sobre-oscuro-2); }
.placa--reservada .placa__desc { font-size: 0.92rem; margin: 0; }
.placa__estado {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  font-weight: 500;
}

.placa--maintenance { filter: saturate(0.72); }

/* ── Aviso de fallo ───────────────────────────────────────── */

.aviso {
  max-width: 46rem;
  margin: clamp(3rem, 10vw, 6rem) auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}
.aviso h1 { font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem); }
.aviso p { color: var(--tinta-media); max-width: 60ch; }
.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  background: var(--morado);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.7rem 1.15rem;
  border-radius: var(--radio-chico);
}

/* ── Pie ──────────────────────────────────────────────────── */

.pie {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 82rem;
  width: 100%;
  margin-inline: auto;
  padding: 1.75rem clamp(1rem, 4vw, 3rem) 2.25rem;
}
.pie__marca { width: auto; height: 1.5rem; }
.pie__legal { margin: 0; color: var(--tinta-media); font-size: 0.88rem; }
.pie__wa {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  padding: 0.55rem 0.9rem;
  border: 1.5px solid var(--placa-canto);
  border-radius: 2rem;
  transition: border-color 0.18s var(--salida), color 0.18s var(--salida);
}
.pie__wa:hover { border-color: var(--morado); color: var(--morado-texto); }

/* ── Aviso de copiado ─────────────────────────────────────── */

.copiado {
  position: fixed;
  left: 50%; bottom: 1.5rem;
  translate: -50% 0;
  margin: 0;
  background: var(--tinta);
  color: var(--sobre-oscuro);
  padding: 0.6rem 1.1rem;
  border-radius: 2rem;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: var(--sombra-suelta);
  z-index: 30;
}
.copiado[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .placa { rotate: 0deg; }
}