/* La Tech — tokens de marca v2.0
   Fuente de verdad para todos los canales (web, app, email, Shopify, admin).
   No hardcodear hex fuera de este archivo. */

:root {
  /* ── Base ─────────────────────────────────────────────── */
  --lt-ink:            #0A0A0B;  /* texto y signo. Color por defecto. */
  --lt-paper:          #F5F1EA;  /* fondo de todo */
  --lt-white:          #FFFFFF;  /* sólo tarjetas dentro del papel y etiqueta térmica */

  /* ── Señal ────────────────────────────────────────────── */
  --lt-red:            #E63946;  /* punto del signo, campos, acentos */
  --lt-red-text:       #C22A36;  /* ÚNICO rojo válido para texto sobre papel (4.5:1) */

  /* ── Códigos de división (barra de 4mm, nunca logo ni texto) ── */
  --lt-store:          #E63946;  /* hereda el rojo de la marca madre */
  --lt-hub:            #0057FF;
  --lt-guarda:         #1A7A5E;
  --lt-foods:          #B84A2A;
  --lt-mobility:       #C8FF00;  /* NUNCA texto ni línea fina: no pasa 3:1 */
  --lt-ontrade:        #0A0A0B;  /* tinta, sin color propio */

  /* ── Neutros derivados ───────────────────────────────── */
  --lt-text-soft:      #3B3A38;  /* párrafos secundarios */
  --lt-text-muted:     #6B6862;  /* metadatos, mono labels */
  --lt-rule:           rgba(10, 10, 11, 0.14);  /* filetes y bordes */
  --lt-rule-strong:    rgba(10, 10, 11, 0.30);  /* separador del descriptor */

  /* ── Tipografía ──────────────────────────────────────── */
  --lt-font-display:   'Fraunces', Georgia, serif;        /* SIEMPRE italic */
  --lt-font-body:      'Geist', system-ui, sans-serif;
  --lt-font-mono:      'JetBrains Mono', Consolas, monospace;

  --lt-weight-body:      400;
  --lt-weight-emphasis:  500;
  --lt-weight-wordmark:  800;  /* sólo la palabra "tech" */
  --lt-weight-display:   600;

  --lt-track-wordmark:  -0.03em;
  --lt-track-display:   -0.02em;
  --lt-track-mono:       0.10em;

  /* ── Geometría ───────────────────────────────────────── */
  --lt-radius:          0;      /* el sistema no tiene esquinas redondeadas */
  --lt-bar:             8px;    /* barra de división en pantalla (= 4mm impreso) */
  --lt-rule-w:          1px;
}

/* Fallbacks si las webfonts no cargan (correo, sistemas de terceros):
   Fraunces → Georgia italic | Geist → Arial | JetBrains Mono → Consolas.
   Nunca sustituir por una cuarta familia "parecida". */

/* ── Fundamentos ───────────────────────────────────────── */
body {
  background: var(--lt-paper);
  color: var(--lt-ink);
  font-family: var(--lt-font-body);
  font-weight: var(--lt-weight-body);
  font-size: 16px;
  line-height: 1.55;
}

a         { color: var(--lt-red-text); text-decoration: none; }
a:hover   { color: var(--lt-red); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--lt-red); outline-offset: 2px; }

h1, h2, h3 {
  font-family: var(--lt-font-display);
  font-style: italic;
  font-weight: var(--lt-weight-display);
  letter-spacing: var(--lt-track-display);
  line-height: 1.0;
  margin: 0;
}

/* Datos: teléfonos, códigos, SKU, pesos, descriptores */
.lt-data {
  font-family: var(--lt-font-mono);
  font-weight: var(--lt-weight-emphasis);
  letter-spacing: var(--lt-track-mono);
  text-transform: uppercase;
}

/* ── Wordmark ──────────────────────────────────────────── */
.lt-wordmark {
  font-size: 2.5rem;
  line-height: 0.9;
  letter-spacing: var(--lt-track-wordmark);
  white-space: nowrap;
}
.lt-wordmark .la   { font-family: var(--lt-font-display); font-style: italic; font-weight: 400; }
.lt-wordmark .tech { font-family: var(--lt-font-body);    font-weight: var(--lt-weight-wordmark); }
/* Sin espacio entre .la y .tech. No invertir los cortes. No igualar los pesos. */

/* ── Lockup con descriptor de división ─────────────────── */
.lt-lockup          { display: flex; align-items: center; gap: 0.32em; }
.lt-lockup .sep     { width: var(--lt-rule-w); height: 0.78em; background: var(--lt-rule-strong); }
.lt-lockup .desc {
  font-family: var(--lt-font-mono);
  font-weight: var(--lt-weight-emphasis);
  font-size: 0.36em;            /* 36% de la altura de la "t" de tech */
  letter-spacing: var(--lt-track-mono);
  text-transform: uppercase;
  white-space: nowrap;          /* obligatorio: el descriptor nunca se parte */
  color: var(--lt-ink);         /* nunca el color de la división */
}

/* ── Barra de código de división ───────────────────────── */
.lt-bar { width: var(--lt-bar); flex: none; background: var(--lt-ink); }
.lt-bar[data-division="store"]    { background: var(--lt-store); }
.lt-bar[data-division="hub"]      { background: var(--lt-hub); }
.lt-bar[data-division="guarda"]   { background: var(--lt-guarda); }
.lt-bar[data-division="foods"]    { background: var(--lt-foods); }
.lt-bar[data-division="mobility"] { background: var(--lt-mobility); }
.lt-bar[data-division="ontrade"]  { background: var(--lt-ontrade); }
.lt-bar[data-division="digital"]  { background: none; }  /* el canal no lleva barra */

/* ── Tarja de clave (modo monocromático de división) ───── */
/* Reemplaza a .lt-bar cuando no hay color. Nunca las dos juntas. */
.lt-key {
  display: inline-block;
  background: var(--lt-ink);
  color: var(--lt-white);
  font-family: var(--lt-font-mono);
  font-weight: 700;
  font-size: 13px;          /* mínimo 9pt impreso */
  letter-spacing: var(--lt-track-mono);
  padding: 4px 7px;         /* tarja de 8 x 5 mm impresa */
  text-transform: uppercase;
}
/* Claves: ST HB GA FD MB OT. El canal digital no lleva clave. */

/* ── Impresión térmica (Zebra 203dpi, 1 bit) ───────────── */
@media print and (monochrome) {
  :root {
    --lt-ink: #000000;
    --lt-paper: #FFFFFF;
    --lt-red: #000000;
    --lt-red-text: #000000;
  }
  .lt-bar { display: none; }   /* en 1 bit no hay color que codificar */
  .lt-key { display: inline-block; }  /* la tarja toma su lugar */
}