/*
 * Paleta de Mi Club: estética v2 aprobada (Ernesto, 2026-10-07; propuesta §9, maqueta
 * docs/_mockups/estetica-v2.html). FUENTE ÚNICA de los colores para la portada y la PWA: nunca hex
 * sueltos en plantillas ni en componentes; si falta un color, se agrega aquí y en §9.
 *
 * Un solo modo (claro), por ahora. Azul petróleo como primario, acento jade, coral para las salidas,
 * verde solo como estado, ámbar para «por acabarse». Nunca el verde hoja de Herbalife.
 */
:root {
  --mc-fondo: #f4f6fa;
  --mc-hoja: #ffffff;
  --mc-hundido: #eceff5;
  --mc-borde: #e3e8f0;
  --mc-tinta: #0f1b2a;
  --mc-tinta-2: #4a5668;
  --mc-tinta-3: #8a94a6;
  --mc-blanco: #ffffff;

  --mc-primario: #0e6e8c;
  --mc-primario-2: #0b566e;
  --mc-primario-suave: #dcf0f6;
  --mc-acento: #0f9f8a;
  --mc-acento-suave: #d5f3ec;
  --mc-coral: #f2603f;
  --mc-coral-suave: #ffe7e0;
  --mc-ambar: #b86e00;
  --mc-ambar-suave: #fff1d6;
  --mc-lila: #6e4ff0;
  --mc-cielo: #1f7ae0;
  --mc-bien: #108a47;
  --mc-bien-suave: #dcf5e6;
  --mc-alerta: #d93a3f;
  --mc-alerta-suave: #fde4e4;

  /* Mosaicos de producto: un tono por clasificación (el servidor manda `tono` 1–6). */
  --mc-c-1: #d6338a;
  --mc-c-2: #c2621e;
  --mc-c-3: #0c8599;
  --mc-c-4: #3b5bdb;
  --mc-c-5: #7048e8;
  --mc-c-6: #5c7080;

  /* Color de cada club (solo pinta su mosaico). */
  --mc-club-petroleo: #0e6e8c;
  --mc-club-jade: #0f9f8a;
  --mc-club-coral: #e8553a;
  --mc-club-indigo: #4c5fd5;
  --mc-club-ciruela: #9c36b5;
  --mc-club-grafito: #46566b;

  --mc-degradado: linear-gradient(140deg, #0a4d63 0%, #0e6e8c 50%, #12a38d 100%);
  --mc-sombra-hero: #0a4d63;
  --mc-brillo-1: rgba(15, 159, 138, 0.32);
  --mc-brillo-2: rgba(42, 163, 198, 0.38);
  --mc-vidrio: rgba(255, 255, 255, 0.74);
  --mc-vidrio-borde: rgba(255, 255, 255, 0.7);
  --mc-blanco-16: rgba(255, 255, 255, 0.16);
  --mc-blanco-20: rgba(255, 255, 255, 0.2);
  --mc-blanco-35: rgba(255, 255, 255, 0.35);
  --mc-blanco-75: rgba(255, 255, 255, 0.75);
  --mc-blanco-80: rgba(255, 255, 255, 0.8);
  --mc-velo: rgba(15, 27, 42, 0.38);
  --mc-camara: #0b0f12;
  --mc-camara-2: #33404a;
  --mc-sombra: 0 1px 2px rgba(15, 27, 42, 0.06), 0 8px 24px -12px rgba(15, 27, 42, 0.18);
  --mc-sombra-alta: 0 10px 30px -10px rgba(15, 27, 42, 0.35);
  --mc-sombra-boton: 0 1px 2px rgba(15, 27, 42, 0.12);

  /* Botón de Google (sus colores, solo en el logotipo «G»). */
  --mc-google: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0);

  --mc-f-titulo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --mc-f-texto: "Figtree", "Segoe UI", system-ui, sans-serif;
}