/* ==========================================================================
   COPIA VENDORIZADA para GARITA/lab/static/ (herramienta interna de
   laboratorio). Fuente de verdad real: GARITA/identidad-v5/css/garita-v5.css
   — no editar tokens aquí, editar allá y volver a copiar. Se vendoriza (en
   vez de enlazar con ruta relativa) porque el mount de StaticFiles de
   lab/app.py solo sirve lab/static/, y una ruta "../../identidad-v5/..."
   quedaría fuera de ese directorio y daría 404 al servirse por HTTP.
   ========================================================================== */

/* ==========================================================================
   ESTACIÓN GARITA — Sistema de diseño v5
   Archivo periodístico binacional Tijuana–San Diego (AFN / El Vigía / Brújula)
   Operado por MorfemAI / Innovatlan.

   Este archivo es la fuente de verdad de la gramática visual v5:
   - Los 3 registros tipográficos (regla central del sistema, ver §2 del brief)
   - Paleta de marca (medalla del maratón binacional)
   - Contornos duros, sombras duras, divisores en ola, textura pixel
   - Modo oscuro (solo invierte papel↔tinta, nunca cambia de familia)
   - NUEVO en v5 respecto a v4: §10, clases del logo real (El Telar / El
     Cuadro / El Cruce) — en v4 el logo era un placeholder porque la
     decisión de marca no existía todavía. Todo lo demás (§1-§9) es el
     mismo lenguaje visual ya validado en v4, reescrito aquí como archivo
     nuevo y completo (no un import) para que v5 sea autocontenida.

   NO es la identidad en producción. Ver ../README.md para el estado y
   qué falta antes de adoptar esto. No toca GARITA/ghost-theme/ (paleta
   cálida "Palette A" ya en uso) ni GARITA/identidad-v4/.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Martian+Mono:wght@700;800&family=Barlow:wght@400;500;600;700;800&display=swap");

/* --------------------------------------------------------------------------
   1. TOKENS — paleta + escalas
   -------------------------------------------------------------------------- */
:root {
  /* Paleta — origen: medalla del maratón binacional Tijuana–San Diego.
     El navy viene de las cajas de letreros de la línea fronteriza. */
  --coral:   #DC5A46; /* Tijuana / AFN */
  --mostaza: #EFCB4E; /* Mexicali / Brújula */
  --cielo:   #6BA3C0; /* Ensenada / El Vigía */
  --navy:    #1F3A5F; /* institucional, fondos de sección */
  --tinta:   #111111; /* texto y TODOS los contornos */
  --papel:   #f6f1ea; /* fondo base */
  --track:   #e8e4db; /* fondo de barras de datos */

  /* Gris neutro para estados "sin confirmar" (VerifyStamp) */
  --gris-neutro: #8a8478;

  /* Aliases semánticos — para que el resto del sistema nunca lea
     --papel/--tinta directo. Esto es lo único que el modo oscuro invierte
     (removido para el laboratorio, ver nota abajo). */
  --fondo: var(--papel);
  --texto: var(--tinta);
  --contorno: var(--tinta);

  /* Tipografía */
  --font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-sans: "Barlow", -apple-system, "Segoe UI", sans-serif;

  /* Ritmo de sombra dura (offset fijo, sin blur, estilo risograph) */
  --sombra-offset: 11px;
  --sombra-offset-chica: 3px; /* usada en burbujas del muro de preguntas */
}

/* Estación Garita — Laboratorio: tema fijo, SIN modo oscuro automático.
   Decisión explícita (agosto 2026): a diferencia del sistema v5 base
   (que sí auto-cambia con prefers-color-scheme), esta copia vendorizada
   para lab/static/ se compromete con un solo look — papel/crema siempre —
   igual que el artifact de referencia del deck de socios. El bloque de
   @media (prefers-color-scheme: dark) del CSS original se removió aquí
   a propósito, no se dejó por descuido.*/

/* --------------------------------------------------------------------------
   2. RESET — cero border-radius por default (única excepción: .burbuja,
   ver §7 Muro de preguntas), cero sombra difusa en ningún elemento base.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0;
}

html {
  background: var(--fondo);
  color-scheme: light; /* forzado, ver nota arriba — sin esto, controles nativos (dropdown, inputs) se pintan oscuros aunque el fondo ya sea claro */
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

/* Respeta reduce-motion en TODA animación del sistema (marquesina, olas, etc.) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   3. LOS 3 REGISTROS TIPOGRÁFICOS — la regla central del sistema.
   La mono es EVENTO, no default: aparece ~6 veces por página, no 60.
   Prohibido Martian Mono entre 16px y 39px (zona muerta). Ahí siempre Barlow 800.
   -------------------------------------------------------------------------- */

/* 01 Display — Martian Mono 800, caja alta, ≥40px.
   SOLO portada y encabezado de sección. Máx. 3 palabras (la mono en
   caja alta come el doble de ancho en español). */
.reg-01 {
  font-family: var(--font-mono);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.05;
  margin: 0;
}

/* 02 Cuerpo y titulares — Barlow. El 100% de titulares de nota, subtítulos,
   navegación, botones, chat, párrafo. Rango 15–34px. */
.reg-02-titulo {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(15px, 2.4vw, 34px); /* rango 15–34px exigido por el brief para Registro 02 */
  line-height: 1.2;
  margin: 0;
}

.reg-02-subtitulo {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(15px, 1.6vw, 20px);
  line-height: 1.35;
  margin: 0;
}

.reg-02-cuerpo {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65; /* line-height 1.6–1.65 exigido por el brief */
}

.reg-02-cuerpo strong {
  font-weight: 700; /* énfasis con <strong>, nunca cursiva, nunca color */
}

.reg-02-boton,
.reg-02-nav {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
}

/* 03 Dato / metadato — Martian Mono 700, caja alta, ≤15px.
   SOLO datos verificables: fecha, hora, fuente, coordenada, tiempo de espera.
   Nunca texto narrativo. */
.reg-03 {
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   4. CONTORNOS Y SOMBRAS DURAS
   Contorno negro de 2px en toda caja de contenido y dato.
   Sombra dura desplazada sin blur — rota el color de sombra entre secciones.
   -------------------------------------------------------------------------- */
.contorno {
  border: 2px solid var(--contorno);
}

.caja {
  border: 2px solid var(--contorno);
  background: var(--fondo);
  padding: 24px;
}

/* Sombras duras — un color por sección, nunca mezcladas dentro del mismo
   bloque. Elegir UNA según la sección (coral=AFN/Tijuana, mostaza=Brújula/
   Mexicali, cielo=El Vigía/Ensenada, navy=institucional, tinta=neutro). */
.sombra-coral   { box-shadow: var(--sombra-offset) var(--sombra-offset) 0 var(--coral); }
.sombra-mostaza { box-shadow: var(--sombra-offset) var(--sombra-offset) 0 var(--mostaza); }
.sombra-cielo   { box-shadow: var(--sombra-offset) var(--sombra-offset) 0 var(--cielo); }
.sombra-navy    { box-shadow: var(--sombra-offset) var(--sombra-offset) 0 var(--navy); }
.sombra-tinta   { box-shadow: var(--sombra-offset) var(--sombra-offset) 0 var(--contorno); }

/* Variante chica, para componentes pequeños (ej. burbujas) */
.sombra-chica {
  box-shadow: var(--sombra-offset-chica) var(--sombra-offset-chica) 0 rgba(0, 0, 0, 0.16);
}

/* --------------------------------------------------------------------------
   5. FONDOS DE SECCIÓN — máximo dos fondos de color por página además del
   papel. Nunca gradientes.
   -------------------------------------------------------------------------- */
.bg-papel  { background: var(--papel); color: var(--tinta); }
.bg-tinta  { background: var(--tinta); color: var(--papel); }
.bg-navy   { background: var(--navy); color: var(--papel); }
.bg-coral  { background: var(--coral); color: var(--papel); }
.bg-cielo  { background: var(--cielo); color: var(--tinta); }

/* Mostaza sobre papel NO PASA contraste AA — regla dura del brief.
   Mostaza solo es válida como texto/acento sobre --tinta o --navy. */
.bg-mostaza-sobre-tinta { background: var(--tinta); color: var(--mostaza); }
.bg-mostaza-sobre-navy  { background: var(--navy); color: var(--mostaza); }
.texto-mostaza-seguro   { color: var(--mostaza); } /* usar SOLO dentro de bg-tinta / bg-navy */

/* --------------------------------------------------------------------------
   6. DIVISOR EN OLA — SVG preserveAspectRatio="none", 90px alto, curva
   irregular (no simétrica). Nunca líneas rectas ni diagonales.
   Implementado como mask reutilizable: <div class="ola ola--mostaza">.
   El color se controla por la clase modificadora — el mismo SVG se reusa
   coloreando vía background-color + mask, así "una clase" basta (mixin).
   -------------------------------------------------------------------------- */
.ola {
  display: block;
  width: 100%;
  height: 90px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath d='M0,38 C90,4 150,66 260,42 C360,20 410,78 520,52 C610,32 660,8 760,30 C860,52 900,84 1010,58 C1090,40 1140,14 1200,26 L1200,90 L0,90 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath d='M0,38 C90,4 150,66 260,42 C360,20 410,78 520,52 C610,32 660,8 760,30 C860,52 900,84 1010,58 C1090,40 1140,14 1200,26 L1200,90 L0,90 Z'/%3E%3C/svg%3E");
}
/* Variante invertida (para cuando la ola cierra un bloque en vez de abrirlo) */
.ola--flip { transform: scaleY(-1); }

.ola--coral   { background-color: var(--coral); }
.ola--mostaza { background-color: var(--mostaza); }
.ola--cielo   { background-color: var(--cielo); }
.ola--navy    { background-color: var(--navy); }
.ola--tinta   { background-color: var(--tinta); }
.ola--papel   { background-color: var(--papel); }

/* --------------------------------------------------------------------------
   7. TEXTURA PIXEL — cuadros de 5px en retícula de 64, image-rendering:
   pixelated. Uso: overlay decorativo de baja opacidad sobre bloques de color.
   -------------------------------------------------------------------------- */
.textura-pixel {
  position: relative;
  isolation: isolate;
}
.textura-pixel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  image-rendering: pixelated;
  background-image:
    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%),
    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%);
  background-size: 10px 10px; /* 2 cuadros de 5px por tile = retícula de 64 al repetir 32 veces */
  background-position: 0 0, 5px 5px;
  opacity: 0.08;
  z-index: 0;
}
.textura-pixel > * {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   8. FOTOGRAFÍA — siempre escala de grises + alto contraste, recorte duro
   sobre color plano. Nada de color, nada de banco de imágenes genérico.
   -------------------------------------------------------------------------- */
.foto-editorial {
  filter: grayscale(1) contrast(1.55);
  border: 2px solid var(--contorno);
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   9. UTILIDADES DE LAYOUT MÍNIMAS — sin framework de utilidades (Tailwind
   estorbaría más de lo que ayuda con un sistema este literal, según brief §8)
   -------------------------------------------------------------------------- */
.contenedor {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.seccion {
  padding: 64px 0;
}

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 22px;
  border: 2px solid var(--contorno);
  background: var(--fondo);
  color: var(--texto);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--contorno);
}
.btn:active {
  transform: translate(0, 0);
  box-shadow: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tinta);
  color: var(--papel);
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* --------------------------------------------------------------------------
   10. LOGO — El Telar / El Cuadro / El Cruce (brief §6 — NUEVO en v5, v4
   solo tenía un placeholder porque la decisión de marca no existía).

   Los SVG reales viven en assets/logo/ y NO se regeneran ni redibujan aquí
   — esta sección solo define cómo se USAN: tamaño mínimo por forma, área
   de respeto, y los dos lockups que pide el brief. Ver
   assets/logo/README.md para qué tan verificada está cada forma (El Cruce
   es exacto; El Cuadro/El Telar son reconstrucción de mejor esfuerzo).

   Retícula compartida: las 3 formas usan celdas de 8px a escala nativa
   (viewBox real) — El Cruce 3×3 = 24px, El Cuadro 8×8 = 64px, El Telar
   16×8 = 128×64px. 24/3 = 64/8 = 128/16 = 8. Esa igualdad es lo que hace
   posible el truco de --logo-w de abajo.
   -------------------------------------------------------------------------- */

/* Nunca: rotar, redondear esquinas, sombrear, degradar, recolorear por
   sección, ni encimar texto (brief §6). image-rendering:pixelated ya viene
   inline en cada SVG — se repite aquí por si se pierde al usarse como
   <img src="…svg">. */
.logo-telar,
.logo-cuadro,
.logo-cruce {
  display: block;
  image-rendering: pixelated;
}

/* El Cruce — ÚNICA forma válida por debajo de 64px: favicon, app icon,
   cabecera móvil. Tamaño de referencia 32px. Nunca usar El Cuadro/El
   Telar encogidos donde debería ir El Cruce. */
.logo-cruce {
  --logo-w: 32px;
  width: var(--logo-w);
  height: var(--logo-w); /* viewBox 24×24 → siempre proporción 1:1 */
}

/* El Cuadro — portada / sello / perfil social. Mínimo 64px. */
.logo-cuadro {
  --logo-w: 64px;
  width: var(--logo-w);
  height: var(--logo-w); /* viewBox 64×64 → siempre proporción 1:1 */
}

/* El Telar — cabecera / banner. Mínimo recomendado 128px de ancho. El
   brief además fija un piso duro de 64px: por debajo de eso el diseño
   pide usar El Cruce en vez de seguir encogiendo el telar, así que
   min-width aquí es un freno de emergencia, no el uso previsto. */
.logo-telar {
  --logo-w: 128px;
  width: var(--logo-w);
  height: calc(var(--logo-w) / 2); /* viewBox 128×64 → siempre proporción 2:1 */
  min-width: 64px;
}

/* Área de respeto — "una celda completa (8 unidades) por los cuatro
   lados" (brief §6). 1 celda = 8px a escala nativa en las 3 formas. Como
   el padding en px es un valor absoluto igual en todos los lados (no
   depende de si el lado es horizontal o vertical), basta escalar ese 8px
   nativo por el mismo factor con el que se escaló --logo-w del hijo —
   así la celda de respeto crece junto con el logo sin importar que cada
   forma tenga una proporción distinta (1:1, 1:1, 2:1).
   Uso: <div class="logo-safe logo-safe--cuadro"><img class="logo-cuadro" .../></div>
   Si el tamaño del logo se cambia con style="--logo-w:96px" en el <img>,
   hay que repetir el mismo --logo-w en el wrapper .logo-safe para que la
   celda escale igual. */
.logo-safe {
  display: inline-block;
}
.logo-safe--cruce  { padding: calc(var(--logo-w, 32px)  / 3); }
.logo-safe--cuadro { padding: calc(var(--logo-w, 64px)  / 8); }
.logo-safe--telar  { padding: calc(var(--logo-w, 128px) / 16); }

/* Lockup horizontal — sello a la izquierda, wordmark GARITA en Martian
   Mono 800 caja alta a la derecha, gap 18px, alineado al centro vertical. */
.logo-lockup-h {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
}
.logo-lockup-h__wordmark {
  font-family: var(--font-mono);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 20px;
  color: var(--texto);
  white-space: nowrap;
}

/* Lockup apilado — El Cuadro arriba, wordmark abajo, gap 16px, alineado
   a la izquierda. */
.logo-lockup-v {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  text-decoration: none;
}
.logo-lockup-v__wordmark {
  font-family: var(--font-mono);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 20px;
  color: var(--texto);
}

/* Patrón de fondo "tela infinita" (brief §6, último párrafo): el telar
   repetido horizontalmente y espejeado verticalmente por renglón
   (scaleY(-1) en renglones alternos). CSS no tiene forma nativa de
   alternar un flip por renglón dentro de un solo background-repeat, así
   que se construye con filas reales en el HTML (una por renglón de
   telar) en vez de una sola imagen de fondo — ver .patron-telar__fila y
   el ejemplo de uso en preview-homepage.html. */
.patron-telar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.patron-telar__fila {
  height: 64px;
  background-image: url("../assets/logo/el-telar.svg");
  background-repeat: repeat-x;
  background-size: 128px 64px;
  image-rendering: pixelated;
}
.patron-telar__fila:nth-child(even) {
  transform: scaleY(-1);
}
/* Sobre fondo navy, usar la variante -fondo-negro (único cambio de color
   permitido) cambiando qué SVG pinta la fila, no un filtro de color. */
.patron-telar--fondo-negro .patron-telar__fila {
  background-image: url("../assets/logo/el-telar-fondo-negro.svg");
}