@charset "UTF-8";
/* ===========================================================================
   PMP · Portal 3D — Superficies
   Acceso, catálogo, configurador, cuenta, administración y aviso de cookies.
   Depende de pmp.css.
   =========================================================================== */

/* ─── 1. Acceso ─────────────────────────────────────────────────────────────
   La portada del pliego: el pliego en sí a la izquierda, la hoja de acceso
   pegada encima a la derecha. */

.gate {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(0, .76fr);
  gap: var(--s9);
  align-items: stretch;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--s7) var(--s5) var(--s8);
  /* El pliego ocupa la altura útil: nada de aire muerto bajo la galga. */
  min-height: calc(100vh - 9px - 92px);
}

/* Columna del pliego: marca arriba, tesis en medio, galga abajo, con los
   corchetes de corte enmarcando el área de contenido. */
.gate__lead-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s6);
  position: relative;
  padding: var(--s4) var(--s5) var(--s4) var(--s4);
}
.gate__lead-col::before, .gate__lead-col::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  border: 1px solid var(--edge);
  pointer-events: none;
}
.gate__lead-col::before { top: 0; left: 0;    border-right: 0; border-bottom: 0; }
.gate__lead-col::after  { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

.gate__mark img { width: 208px; height: auto; }

.gate__lead { margin-block: auto; padding-block: var(--s6); }
.gate__lead .display-xl { max-width: 15ch; font-size: clamp(2.5rem, 5.6vw, 4.4rem); }
.gate__lead .lede { margin-top: var(--s5); max-width: 54ch; }

/* Línea de galga: el inventario real, sin una palabra de más. */
.specimen { margin-top: 0; }
.specimen__rule { height: 2px; background: var(--pink); margin-bottom: var(--s3); }
.specimen__label {
  display: block;
  font-family: var(--mono); font-size: .625rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s3);
}
.specimen__rows { display: flex; flex-direction: column; gap: var(--s2); }
.specimen__row {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: var(--s3);
  align-items: baseline;
  font-family: var(--mono); font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}
.specimen__fam { font-weight: 700; color: var(--pink-action); letter-spacing: .08em; }
.specimen__list { color: var(--ink-soft); letter-spacing: .02em; }
.specimen__list > span[aria-hidden] { color: var(--rule); padding: 0 .18em; }
.specimen__unit {
  color: var(--ink-faint);
  margin-left: .7em;
  white-space: nowrap;
}

.gate__sheet {
  align-self: start;
  position: sticky;
  top: var(--s5);
  padding: var(--s6);
  max-width: 472px;
  margin-left: auto;
  width: 100%;
}
.gate__sheet h1 { margin-bottom: var(--s2); }
.gate__sheet .lede { font-size: .9375rem; margin-bottom: var(--s5); }

.gate__switch {
  display: flex; gap: var(--s2); align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--rule);
}

.gate__alt {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font-size: .875rem;
  color: var(--ink-muted);
  text-align: center;
}

.gate__foot {
  border-top: 1px solid var(--rule);
  background: var(--sheet);
  padding-block: var(--s4);
}
.gate__foot .shell { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: space-between; }
.gate__foot a { color: var(--ink-muted); text-decoration: none; }
.gate__foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.gate__links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }

.linklike {
  font: inherit; color: inherit; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.linklike:hover { color: var(--ink); }
.colophon .linklike { color: #cdd2d6; }
.colophon .linklike:hover { color: #fff; }

@media (max-width: 1080px) {
  .gate {
    grid-template-columns: 1fr;
    gap: var(--s7);
    padding-top: var(--s6);
    min-height: 0;
  }
  .gate__lead-col { padding: var(--s4) var(--s3); gap: var(--s6); }
  .gate__lead { margin-block: 0; padding-block: var(--s4); }
  .gate__sheet { position: static; margin-left: 0; max-width: 520px; }
}

@media (max-width: 460px) {
  .specimen__row { grid-template-columns: 2.9rem 1fr; font-size: .75rem; }
  .specimen__list > span[aria-hidden] { padding: 0 .1em; }
}

/* ─── 2. Encabezado de página ───────────────────────────────────────────── */

.pagehead {
  background: var(--sheet);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s7) var(--s6);
}
.pagehead .lede { margin-top: var(--s4); }
.pagehead__meta {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-soft);
}

/* ─── 3. Catálogo · pliego de imposición ────────────────────────────────────
   Las quince latas dispuestas sobre un mismo pliego y dibujadas en la misma
   escala, que es exactamente como se imponen en la plancha. */

.imposition { padding-block: var(--s7) var(--s8); }

.family + .family { margin-top: var(--s8); }

.family__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--s5);
  align-items: end;
  padding-bottom: var(--s4);
  border-bottom: 2px solid var(--ink);
  margin-bottom: var(--s6);
}
.family__name { display: flex; align-items: baseline; gap: var(--s3); }
.family__code {
  font-family: var(--mono); font-size: .75rem; font-weight: 700;
  letter-spacing: .16em; color: var(--pink-action);
}
.family__desc { font-size: .9375rem; color: var(--ink-muted); max-width: 62ch; }

/* Fila de latas.
   Un pliego de imposición es ancho: en pantalla estrecha se desplaza en
   horizontal en lugar de partirse, porque comparar 150 con 568 exige verlas
   en la misma fila. */
.cans {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: var(--s5) var(--s2);
  padding-bottom: var(--s4);
  position: relative;
}

/*
 * La línea de suelo pasa por debajo de las siluetas, que es donde apoyan,
 * no por debajo de los pies de texto. El desplazamiento se calcula a partir
 * de la altura fija del pie más la separación y el relleno de cada lata.
 */
.cans {
  --can-foot: 62px;
  --can-base: calc(var(--can-foot) + var(--s3) + var(--s4) + 1px + var(--s4));
}
.cans::after {
  content: '';
  position: absolute; left: 0; right: 0;
  bottom: var(--can-base);
  height: 1px; background: var(--edge);
}

/*
 * Dos filas fijas por lata: la silueta se alinea abajo dentro de una altura
 * constante y el pie reserva siempre el mismo alto, esté o no el modelo. Así
 * las quince se apoyan en el mismo suelo y la comparación por la vista, que es
 * de lo que va esta pantalla, se sostiene.
 */
.can {
  display: grid;
  grid-template-rows: 230px auto;
  align-items: end;
  justify-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s2) var(--s4);
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  position: relative;
}
.can:hover, .can:focus-visible {
  border-color: var(--edge);
  background: var(--sheet);
  color: inherit;
}
.can:hover .silhouette, .can:focus-visible .silhouette { color: var(--pink-action); }

.can__body { display: flex; align-items: flex-end; }
.silhouette {
  color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}

.can__data {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  /* Altura exacta, no mínima: es lo que hace calculable la línea de suelo. */
  height: var(--can-foot);
}
.can__ml {
  font-family: var(--sans); font-weight: 700; font-stretch: 112%;
  font-size: 1.0625rem; line-height: 1; letter-spacing: -0.01em;
}
.can__ml small { font-size: .6875rem; font-weight: 600; color: var(--ink-muted); margin-left: 2px; }
.can__code {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: .625rem; font-weight: 600;
  letter-spacing: .1em; color: var(--ink-muted);
}
.can__dims {
  font-family: var(--mono); font-size: .5625rem;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
  white-space: nowrap; letter-spacing: 0;
}

/* Punto de familia con etiqueta: junto a la designación, no flotando. */
.can__flag {
  width: 7px; height: 7px; flex: 0 0 auto;
  background: var(--purple); border-radius: 50%;
}

/* Formato sin modelo 3D subido: se dice una vez, en pequeño, sin gritar
   y sin forzar el ancho de la columna. */
.can--missing { cursor: not-allowed; }
.can--missing:hover { border-color: transparent; background: none; }
.can--missing .silhouette { color: #c8cdd2; }
.can--missing .can__ml, .can--missing .can__code { color: var(--ink-muted); }
/* Sin sello: el gris de la silueta ya lo dice, y la nota va una sola vez
   en la línea de datos de la familia. */
.family__legend .legend-dot {
  display: inline-block; width: 9px; height: 14px;
  background: #c8cdd2; border-radius: 1px;
  vertical-align: -2px; margin-right: 6px;
}

.family__legend {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  margin-top: var(--s4);
}

/* Tabla de especificaciones bajo cada familia. */
.spectable { margin-top: var(--s6); }
.spectable summary {
  cursor: pointer;
  padding: var(--s3) 0;
  font-family: var(--mono); font-size: .6875rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted);
  border-top: 1px solid var(--rule);
  list-style: none;
  display: flex; align-items: center; gap: var(--s2);
}
.spectable summary::-webkit-details-marker { display: none; }
.spectable summary::before {
  content: ''; width: 8px; height: 8px; flex: 0 0 auto;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-fast) var(--ease);
}
.spectable[open] summary::before { transform: rotate(-135deg) translate(-2px, -2px); }
.spectable summary:hover { color: var(--ink); }

@media (max-width: 760px) {
  .family__head { grid-template-columns: 1fr; gap: var(--s3); align-items: start; }
  .family__desc { max-width: none; }

  /* Un pliego de imposición no se parte en filas: se desplaza. Así el 150
     sigue estando al lado del 568 y la comparación por la vista sobrevive
     a la pantalla estrecha. */
  .cans {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: var(--s5);
    /* El desplazamiento sangra hasta el borde de la pantalla. */
    margin-inline: calc(var(--s4) * -1);
    padding-inline: var(--s4);
  }
  .cans::after { left: var(--s4); right: var(--s4); }
  .can { flex: 0 0 auto; scroll-snap-align: center; }
  .cans::-webkit-scrollbar { height: 6px; }
  .cans::-webkit-scrollbar-thumb { background: var(--edge); border: 0; }
}

/* ─── 4. Configurador ───────────────────────────────────────────────────── */

.workbench {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 392px;
  min-height: calc(100vh - 71px);
}

/* Escenario: el único lugar con cruces de registro en las cuatro esquinas,
   porque es donde alinear significa algo de verdad. */
.stage {
  position: relative;
  background: var(--stage);
  border-right: 1px solid var(--rule);
  overflow: hidden;
  min-height: 460px;
}
.stage__canvas { position: absolute; inset: 0; }
.stage__canvas canvas { width: 100%; height: 100%; display: block; }

.stage::before, .stage::after,
.stage .stage__reg::before, .stage .stage__reg::after {
  content: '';
  position: absolute; z-index: 3;
  width: 14px; height: 14px;
  background: var(--reg) no-repeat center / 14px 14px;
  pointer-events: none;
  transition: background-image var(--t-fast) var(--ease);
}
.stage::before { top: 18px; left: 18px; }
.stage::after  { top: 18px; right: 18px; }
.stage .stage__reg::before { bottom: 18px; left: 18px; }
.stage .stage__reg::after  { bottom: 18px; right: 18px; }

/* Al registrar un diseño, las cruces marcan una vez y vuelven. */
.stage.is-registering::before, .stage.is-registering::after,
.stage.is-registering .stage__reg::before, .stage.is-registering .stage__reg::after {
  background-image: var(--reg-pink);
  animation: reg-pulse 620ms var(--ease);
}
@keyframes reg-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  35%  { transform: scale(1.6); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

.stage__slug {
  position: absolute; z-index: 4;
  left: 44px; top: 16px; right: 44px;
  display: flex; flex-wrap: wrap; gap: 2px var(--s3);
  pointer-events: none;
}

.stage__tools {
  position: absolute; z-index: 4;
  left: 50%; bottom: var(--s4); transform: translateX(-50%);
  display: flex; gap: var(--s2);
  padding: var(--s2);
  background: rgba(255, 255, 255, .93);
  border: 1px solid var(--rule);
  border-radius: 2px;
  max-width: calc(100% - 76px);
  flex-wrap: nowrap;
  justify-content: center;
  overflow-x: auto;
}

.iconbtn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  color: var(--ink-muted);
  border-radius: 2px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.iconbtn:hover { background: var(--sheet-sunk); color: var(--ink); }
.iconbtn[aria-pressed='true'] { background: var(--ink); color: #fff; }
.iconbtn svg { width: 17px; height: 17px; }

.stage__loader {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center;
  background: rgba(251, 251, 252, .94);
  gap: var(--s3);
  text-align: center;
  padding: var(--s5);
}
.stage__loader[hidden] { display: none; }
.stage__loader .slug { display: block; margin-top: var(--s3); }

/* Escala vertical: la altura real del formato, con sus marcas.
   Da referencia de tamaño a la lata en un campo blanco muy grande. */
.stage__scale {
  position: absolute; z-index: 4;
  /* Junto a la lata y a su altura exacta: el visor fija ambas variables. */
  left: var(--can-left, 44px);
  top: var(--can-top, 22%);
  height: var(--can-height, 62%);
  width: 40px;
  pointer-events: none;
  display: flex; align-items: stretch;
  /* Sin transición a propósito: el visor ya escribe estos valores en cada
     fotograma, así que animarlos además provocaría recálculo de maquetación
     dentro del bucle de render y la regla iría por detrás de la lata. */
}
.stage__scale::before {
  content: '';
  width: 1px; background: var(--edge);
  margin-left: 11px;
}
.stage__scale-ticks {
  position: absolute; inset: 0 auto 0 6px; width: 11px;
}
.stage__scale-ticks span {
  position: absolute; left: 0; width: 11px; height: 1px; background: var(--rule);
}
.stage__scale-ticks span:first-child,
.stage__scale-ticks span:last-child { width: 17px; background: var(--edge); }
.stage__scale-label {
  position: absolute; left: 22px; top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--mono); font-size: .625rem; font-weight: 600;
  letter-spacing: .12em; color: var(--ink-muted);
  white-space: nowrap;
}

/* Sombra de contacto: apoya la lata en algo en vez de dejarla flotando. */
.stage__floor {
  position: absolute; z-index: 1;
  left: 50%; bottom: 16%;
  transform: translateX(-50%);
  width: min(360px, 46%); height: 26px;
  background: radial-gradient(ellipse at center,
              rgba(16, 18, 21, .16) 0%, rgba(16, 18, 21, .06) 45%, rgba(16, 18, 21, 0) 72%);
  pointer-events: none;
}

@media (max-width: 1100px) {
  .stage__scale { width: 34px; }
  .stage__scale-label { font-size: .5625rem; }
}
@media (max-width: 560px) {
  .stage__scale { display: none; }
}

/* Panel de control */
.panel {
  background: var(--sheet);
  overflow-y: auto;
  max-height: calc(100vh - 71px);
  display: flex; flex-direction: column;
}
.panel__section { padding: var(--s5); border-bottom: 1px solid var(--rule); }
.panel__section:last-child { border-bottom: 0; }
.panel__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.panel__title {
  font-family: var(--mono); font-size: .6875rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink);
}
.panel__step {
  font-family: var(--mono); font-size: .625rem; font-weight: 700;
  color: #fff; background: var(--ink);
  width: 18px; height: 18px;
  display: grid; place-items: center;
  flex: 0 0 auto;
}

.speclist { display: grid; gap: var(--s2); }
.specrow {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s3);
  align-items: baseline;
  padding-block: var(--s2);
  border-bottom: 1px dotted var(--rule);
  font-size: .8125rem;
}
.specrow:last-child { border-bottom: 0; }
.specrow dt { color: var(--ink-muted); }
.specrow dd {
  font-family: var(--mono); font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; text-align: right;
}

/* Zona de subida */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s2);
  min-height: 116px;
  padding: var(--s4);
  border: 1.5px dashed var(--edge);
  border-radius: 2px;
  background: var(--ground);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  width: 100%;
}
.dropzone:hover, .dropzone.is-over {
  border-color: var(--pink-action);
  background: var(--pink-wash);
}
.dropzone__mark { width: 22px; height: 22px; color: var(--pink-action); }
.dropzone strong { font-size: .875rem; font-weight: 700; }
.dropzone small { font-family: var(--mono); font-size: .6875rem; color: var(--ink-muted); }

.filechip {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--ground);
  border: 1px solid var(--rule);
  font-family: var(--mono); font-size: .6875rem;
  word-break: break-all;
}
.filechip__x { margin-left: auto; flex: 0 0 auto; color: var(--ink-muted); }
.filechip__x:hover { color: var(--danger); }

.statusline {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s3);
  font-family: var(--mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted);
}
.statusline::before {
  content: ''; width: 7px; height: 7px; flex: 0 0 auto;
  border-radius: 50%; background: var(--rule);
}
.statusline.is-ready { color: var(--ok); }
.statusline.is-ready::before { background: var(--ok); }
.statusline.is-error { color: var(--danger); }
.statusline.is-error::before { background: var(--danger); }

.panel__actions {
  position: sticky; bottom: 0;
  padding: var(--s4) var(--s5);
  background: var(--sheet);
  border-top: 1px solid var(--rule);
  display: grid; gap: var(--s2);
  margin-top: auto;
}
.panel__outputs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.panel__outputs .btn { padding-inline: var(--s2); }

@media (max-width: 1100px) {
  .workbench { grid-template-columns: 1fr; min-height: 0; }
  .stage { border-right: 0; border-bottom: 1px solid var(--rule); height: 58vh; min-height: 400px; }
  .panel { max-height: none; }
  .panel__actions { position: static; }
}

/* ─── 5. Editor de artwork ──────────────────────────────────────────────── */

.editor__canvaswrap {
  background: var(--sheet-sunk);
  padding: var(--s5);
  display: grid; place-items: center;
  overflow: auto;
}
#editorCanvas {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 46vh;
  border: 1px solid var(--ink);
  background: #fff;
}
.editor__marks {
  display: flex; justify-content: space-around;
  margin-top: var(--s3);
  font-family: var(--mono); font-size: .6875rem; font-weight: 700;
  letter-spacing: .16em; color: var(--ink-muted);
}
.editor__tools {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
  margin-top: var(--s5);
}
@media (max-width: 720px) {
  .editor__tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.videostage {
  position: relative;
  min-height: 420px;
  background: var(--stage);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.videostage canvas { width: 100%; height: 100%; display: block; }
.videostage__rec {
  position: absolute; top: var(--s4); right: var(--s4); z-index: 2;
  display: flex; align-items: center; gap: var(--s2);
  padding: 5px var(--s3);
  background: var(--danger); color: #fff;
  font-family: var(--mono); font-size: .625rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.videostage__rec::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: .25; } }

/* ─── 6. Cuenta ─────────────────────────────────────────────────────────── */

.accgrid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s7);
  align-items: start;
}
.accnav { position: sticky; top: 84px; display: grid; gap: 2px; }
.accnav a {
  padding: var(--s3);
  font-family: var(--mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted);
  border-left: 2px solid var(--rule);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.accnav a:hover { color: var(--ink); border-left-color: var(--edge); }
.accnav a[aria-current='true'] { color: var(--ink); border-left-color: var(--pink); }

@media (max-width: 860px) {
  .accgrid { grid-template-columns: 1fr; gap: var(--s5); }
  .accnav { position: static; grid-auto-flow: column; overflow-x: auto; }
  .accnav a { border-left: 0; border-bottom: 2px solid var(--rule); white-space: nowrap; }
  .accnav a[aria-current='true'] { border-bottom-color: var(--pink); }
}

/* Zona sensible: se marca con filete lleno y tinta de marca, no con un
   fondo rojo que sería el único de su color en todo el portal. */
.notice--edge { border-color: var(--ink); background: var(--ground); }
.notice--edge::before { background: var(--pink); }

/* ─── 7. Administración ─────────────────────────────────────────────────── */

.statbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border: 1px solid var(--rule);
  background: var(--sheet);
}
.statbar__item { padding: var(--s4) var(--s5); border-right: 1px solid var(--rule); }
.statbar__item:last-child { border-right: 0; }
.statbar__n {
  font-family: var(--sans); font-weight: 700; font-stretch: 112%;
  font-size: 2rem; line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.statbar__k {
  display: block; margin-top: var(--s2);
  font-family: var(--mono); font-size: .625rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-muted);
}
@media (max-width: 640px) {
  .statbar__item { border-right: 0; border-bottom: 1px solid var(--rule); }
  .statbar__item:last-child { border-bottom: 0; }
}

.adtabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--rule); margin-bottom: var(--s6); }
.adtabs a {
  padding: var(--s3) var(--s4);
  font-family: var(--mono); font-size: .6875rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
}
.adtabs a:hover { color: var(--ink); }
.adtabs a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--pink); }

/* ─── 8. Aviso de cookies ───────────────────────────────────────────────── */

/* Mientras el aviso está abierto reserva su alto al final de la página, para
   que nunca tape de forma permanente el pie ni un control. */
body { padding-bottom: var(--ck-h, 0px); }

.cookiebar {
  position: fixed; z-index: 100;
  left: 0; right: 0; bottom: 0;
  background: var(--sheet);
  border-top: 2px solid var(--ink);
  box-shadow: 0 -12px 40px -16px rgba(16, 18, 21, .3);
}
.cookiebar[hidden] { display: none; }
.cookiebar__inner {
  width: 100%; max-width: var(--shell);
  margin-inline: auto;
  padding: var(--s5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s4) var(--s6);
  align-items: center;
}
.cookiebar__copy { max-width: 68ch; }
.cookiebar__actions {
  display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: flex-end;
}
.cookiebar__panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}
.cookiebar__panel[hidden] { display: none; }

.ckcat { border: 1px solid var(--rule); padding: var(--s3); }
.ckcat__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); margin-bottom: var(--s2);
}
.ckcat__name {
  font-family: var(--mono); font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.ckcat__desc { font-size: .75rem; line-height: 1.5; color: var(--ink-muted); margin: 0; }

.ckswitch { position: relative; display: inline-flex; cursor: pointer; }
.ckswitch input {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.ckswitch__track {
  width: 40px; height: 22px;
  border: 1px solid var(--edge);
  background: var(--ground);
  position: relative;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ckswitch__track::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: var(--ink-muted);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.ckswitch input:checked + .ckswitch__track { background: var(--pink-wash); border-color: var(--pink-action); }
.ckswitch input:checked + .ckswitch__track::after { transform: translateX(18px); background: var(--pink-action); }
.ckswitch input:focus-visible + .ckswitch__track { outline: 2px solid var(--pink-action); outline-offset: 2px; }

@media (max-width: 760px) {
  .cookiebar__inner { grid-template-columns: 1fr; padding: var(--s4); }
  .cookiebar__actions { justify-content: stretch; }
  .cookiebar__actions .btn { flex: 1 1 auto; }
  .cookiebar { max-height: 86vh; overflow-y: auto; }
}

/* ─── 9. Páginas legales ────────────────────────────────────────────────── */

.legal { padding-block: var(--s7) var(--s8); }
.legal__meta {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  padding-bottom: var(--s4); margin-bottom: var(--s6);
  border-bottom: 2px solid var(--ink);
}
.legal .prose h2 {
  font-family: var(--sans); font-weight: 700; font-stretch: 108%;
  font-size: 1.25rem; letter-spacing: -0.01em;
  padding-top: var(--s5); border-top: 1px solid var(--rule);
}
.legal .prose h3 { font-size: 1rem; font-weight: 700; }
.legal dl { margin: 1em 0; }
.legal dt {
  font-family: var(--mono); font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
  margin-top: 1em;
}
.legal dd { margin: 2px 0 0; }

.toc {
  padding: var(--s4);
  border: 1px solid var(--rule);
  background: var(--sheet);
  margin-bottom: var(--s6);
}
.toc ol { list-style: none; padding: 0; margin: var(--s2) 0 0; counter-reset: toc; }
.toc li { counter-increment: toc; margin-bottom: 4px; font-size: .875rem; }
.toc li::before {
  content: counter(toc) '.';
  font-family: var(--mono); font-size: .75rem; color: var(--ink-faint);
  margin-right: var(--s2);
}

/* ─── 10. Páginas de estado ─────────────────────────────────────────────── */

.statuspage {
  flex: 1 1 auto;
  display: grid; place-items: center;
  padding: var(--s8) var(--s5);
}
.statuspage__box { max-width: 480px; width: 100%; text-align: left; }
.statuspage .display-l { margin-bottom: var(--s3); }