/* =====================================================================
   Sistema visual de Kickofftec — tokens para el panel superadmin (Jinja)
   y la landing pública /t/<slug>.
   Fuentes: Google Fonts
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Inter:wght@400;500;600;700&display=swap">
   ===================================================================== */

:root {
  /* Color — paleta de marca Kickofftec:
     #E3E3E3 gris claro · #012233 marino · #005CFF azul · #001C31 marino profundo */
  --marca-gris: #E3E3E3;
  --marca-marino: #012233;
  --marca-azul: #005CFF;
  --marca-profundo: #001C31;

  --color-fondo: var(--marca-gris);   /* fondo general */
  --color-superficie: #FFFFFF;        /* tarjetas, tablas, formularios */
  --color-borde: #CDD3D8;             /* borde de superficies */
  --color-borde-input: #B4BEC6;       /* borde de inputs y selects */
  --color-separador: #E6E9EC;         /* líneas entre filas */
  --color-tinta: var(--marca-marino); /* texto principal y botón principal */
  --color-texto-secundario: #3F5462;
  --color-texto-inactivo: #52626E;
  --color-acento: var(--marca-azul);  /* ítem activo del menú, sellos, enlaces destacados; texto encima en blanco */
  --color-sobre-acento: #FFFFFF;
  --color-acento-suave: #D6E4FF;      /* avisos, fondos de aviso */
  --color-acento-texto: #0046C2;      /* texto sobre acento suave */
  --color-enlace-hover: var(--marca-azul);
  --color-exito: #1F7A4D;
  --color-exito-suave: #DCEBE3;
  --color-peligro: #B42318;
  --color-peligro-suave: #FEE4E2;
  --color-borrador: #8A5A00;
  --color-menu: var(--marca-profundo); /* menú lateral */
  --color-menu-texto: #C3CED6;
  --color-menu-sutil: #8A9BA8;
  --color-menu-chip: #12344A;
  --color-fila-seleccionada: #EEF4FF;

  /* Tipografía */
  --fuente-titulos: "Bricolage Grotesque", system-ui, sans-serif;  /* peso 800 */
  --fuente-cuerpo: Inter, system-ui, sans-serif;                    /* 400–700 */
  --fuente-mono: ui-monospace, SFMono-Regular, Menlo, monospace;    /* product ID */
  --texto-h1: 32px;
  --texto-h2: 16px;
  --texto-cuerpo: 14px;
  --texto-pequeno: 12px;
  --kpi: 30px;

  /* Radios */
  --radio-boton: 10px;
  --radio-input: 10px;
  --radio-superficie: 16px;
  --radio-kpi: 14px;
  --radio-chip: 6px;

  /* Espaciado */
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-5: 20px;
  --espacio-6: 24px;
  --espacio-8: 32px;

  /* Tamaños */
  --alto-boton: 42px;
  --alto-input: 40px;
  --ancho-menu: 220px;
  --ancho-max-contenido: 1200px;
}

body { margin: 0; background: var(--color-fondo); color: var(--color-tinta); font-family: var(--fuente-cuerpo); }
a { color: var(--color-tinta); }
a:hover { color: var(--color-enlace-hover); }
h1 { font-family: var(--fuente-titulos); font-weight: 800; font-size: var(--texto-h1); letter-spacing: -0.5px; margin: 0; }