/* =====================================================================
   Seguimiento del pedido — la página del código (como el de una encomienda).
   Sirve a las tres marcas: el acento cambia con data-marca cuando la
   respuesta dice de quién es el pedido. Oscura, sobria y legible; nada se
   inventa: lo que no llegó del servidor no se dibuja.
   ===================================================================== */

:root {
  --sg-bg: #0b0b0d;
  --sg-surface: #141418;
  --sg-surface-2: #1b1b21;
  --sg-text: #f5f5f7;
  --sg-muted: rgba(245, 245, 247, .68);
  --sg-line: rgba(255, 255, 255, .12);
  --sg-accent: #e20613; /* 27-sep: Ensutex pasa al rojo de marca; ModoFan y REBXN conservan el suyo (abajo) */
  --sg-accent-fg: #ffffff;
  --sg-ok: #4ade80;
  --sg-radius: 16px;
  --sg-ease: cubic-bezier(.22, 1, .36, 1);
  /* 04-oct · Tipografía de marca: Anton en el titular, Archivo en el texto (Carlitos confirmó el
     03-oct; Hussar y Jost quedaron descartadas). Se reescriben también los dos tokens --ens-font-*
     de ensutex-fuentes.css, que es la hoja que manda sobre `p, li, h1…` con peso de id: si no, el
     titular salía en Anton y los párrafos se quedaban en Jost, mezclados. */
  --sg-font: 'Archivo', ui-sans-serif, system-ui, 'Segoe UI', Arial, sans-serif;
  --sg-font-titulo: 'Anton', 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --ens-font-display-family: var(--sg-font-titulo);
  --ens-font-body-family: var(--sg-font);
  color-scheme: dark;
}

/* El acento de cada casa (dirección visual de marcas). */
body[data-marca="modofan"] { --sg-accent: #9d76ff; --sg-accent-fg: #100a1f; }
body[data-marca="rebxn"] { --sg-accent: #ff2bd6; --sg-accent-fg: #1a0212; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--sg-bg);
  color: var(--sg-text);
  font-family: var(--sg-font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; height: auto; }

.sg-marco {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 72px;
}

@media (max-width: 480px) {
  .sg-marco { padding: 24px 16px 56px; }
}

/* ------------------------------------------------------------------ */
/* Cabecera                                                            */
/* ------------------------------------------------------------------ */
.sg-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.sg-top a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.sg-top img { height: 34px; width: auto; object-fit: contain; }
/* 04-oct · El color cambiaba de golpe al pasar el mouse (medido: sin transición). Se le da el mismo
   compás que al resto de la página. */
.sg-volver { color: var(--sg-muted); font-size: .875rem; transition: color 180ms var(--sg-ease); }
.sg-volver:hover, .sg-volver:focus-visible { color: var(--sg-text); }
.sg-volver:active { color: var(--sg-accent); }

/* Anton trae UN solo grosor: se pide 400 y `font-synthesis: none` para que el navegador no la engorde
   sola. Va en mayúscula, como el resto de los titulares del sitio. El tamaño sube respecto de Hussar
   porque Anton es más angosta y más baja: al mismo px se veía más chica. */
h1 { font-family: var(--sg-font-titulo); margin: 0 0 8px; font-size: clamp(1.9rem, 5.6vw, 2.7rem); line-height: 1.1; font-weight: 400; font-synthesis: none; text-transform: uppercase; letter-spacing: .004em; text-wrap: balance; }
.sg-bajada { margin: 0 0 28px; max-width: 46ch; color: var(--sg-muted); }

/* ------------------------------------------------------------------ */
/* Buscador del código                                                 */
/* ------------------------------------------------------------------ */
.sg-buscar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.sg-campo { flex: 1 1 260px; display: grid; gap: 6px; }
.sg-campo label { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sg-muted); }
.sg-campo input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--sg-line);
  border-radius: 12px;
  background: var(--sg-surface);
  color: var(--sg-text);
  font: inherit;
  font-size: 1.05rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sg-campo input::placeholder { color: rgba(245, 245, 247, .35); letter-spacing: .06em; }
.sg-campo input:focus-visible { outline: 2px solid var(--sg-accent); outline-offset: 2px; border-color: var(--sg-accent); }

.sg-boton {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--sg-accent);
  color: var(--sg-accent-fg);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms var(--sg-ease), filter 180ms var(--sg-ease);
}
.sg-boton:hover, .sg-boton:focus-visible { filter: brightness(1.08); }
.sg-boton:active { transform: translateY(1px); }
.sg-boton[disabled] { opacity: .6; cursor: progress; }

.sg-aviso { margin: 16px 0 0; min-height: 1.5rem; color: var(--sg-muted); font-size: .9375rem; }
.sg-aviso[data-tono="error"] { color: #ffb4a8; }

/* ------------------------------------------------------------------ */
/* Resultado                                                           */
/* ------------------------------------------------------------------ */
.sg-resultado { margin-top: 32px; display: grid; gap: 20px; }
.sg-resultado[hidden] { display: none; }

.sg-ficha {
  padding: 20px;
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  background: var(--sg-surface);
  display: grid;
  gap: 6px;
}
.sg-ficha__marca { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sg-accent); }
.sg-ficha__prenda { font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.sg-ficha__meta { color: var(--sg-muted); font-size: .9375rem; }

/* La escalera de hitos: los seis pasos siempre a la vista. */
.sg-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sg-paso { display: grid; grid-template-columns: 28px 1fr; gap: 16px; }
.sg-paso__riel { position: relative; display: grid; justify-items: center; }
.sg-paso__punto {
  width: 14px;
  height: 14px;
  margin-top: 6px;
  border-radius: 50%;
  border: 2px solid var(--sg-line);
  background: var(--sg-bg);
  flex: 0 0 auto;
}
.sg-paso__linea { width: 2px; flex: 1 1 auto; background: var(--sg-line); margin: 4px 0; min-height: 24px; }
.sg-paso:last-child .sg-paso__linea { display: none; }
.sg-paso__cuerpo { padding-bottom: 22px; }
.sg-paso__titulo { font-weight: 600; }
.sg-paso__detalle { margin: 2px 0 0; color: var(--sg-muted); font-size: .9375rem; }
.sg-paso__fecha { margin: 4px 0 0; color: var(--sg-muted); font-size: .8125rem; letter-spacing: .04em; }

.sg-paso[data-estado="hecho"] .sg-paso__punto { border-color: var(--sg-ok); background: var(--sg-ok); }
.sg-paso[data-estado="hecho"] .sg-paso__linea { background: color-mix(in srgb, var(--sg-ok) 45%, transparent); }
.sg-paso[data-estado="actual"] .sg-paso__punto { border-color: var(--sg-accent); background: var(--sg-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--sg-accent) 22%, transparent); }
.sg-paso[data-estado="actual"] .sg-paso__titulo { color: var(--sg-accent); }
.sg-paso[data-estado="pendiente"] .sg-paso__titulo,
.sg-paso[data-estado="pendiente"] .sg-paso__detalle { color: rgba(245, 245, 247, .45); }

/* El boceto, cuando Carlos ya lo publicó. */
.sg-boceto {
  padding: 20px;
  border: 1px solid var(--sg-accent);
  border-radius: var(--sg-radius);
  background: var(--sg-surface-2);
  display: grid;
  gap: 12px;
}
.sg-boceto[hidden] { display: none; }
.sg-boceto h2 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.sg-boceto p { margin: 0; color: var(--sg-muted); font-size: .9375rem; }
.sg-boceto img {
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--sg-line);
  background: #fff;
}
.sg-boceto a {
  justify-self: start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--sg-line);
  color: var(--sg-text);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 600;
}
.sg-boceto a:hover, .sg-boceto a:focus-visible { border-color: var(--sg-accent); color: var(--sg-accent); }

.sg-pie { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--sg-line); color: var(--sg-muted); font-size: .875rem; }
.sg-pie a { color: var(--sg-text); transition: color 180ms var(--sg-ease); }

@media (prefers-reduced-motion: reduce) {
  .sg-boton { transition: none; }
}