/* ============================================================
   TRERO — Tokens de color · fuente ÚNICA de la piel nueva

   Se carga desde index.html como /brand/css/tokens.css y lo consumen
   los paneles de control de cada componente, que ya no guardan hex
   propios sino `var(--color-...)`.

   REGLA: si un componente necesita un color que no está acá, se agrega
   acá. No se hardcodea en el componente.

   Las variantes "-tenue" y "-borde" existen porque antes se armaban
   concatenando alfa al hex (`${COLOR}18`), y eso es imposible con
   var(). Equivalencias: 18→.09 · 22→.13 · 44→.27 · 55→.33 · CC→.80
   ============================================================ */

:root {
  /* ── Superficies claras (Home, Register) ── */
  --color-fondo: #FFFFFF;              /* fondo de pantalla */
  --color-superficie: #FFFFFF;         /* fondo de tarjetas */
  --color-superficie-2: #F5F5F5;       /* superficies secundarias */
  --color-superficie-80: rgba(255,255,255,.80);  /* superficie translúcida (botones sobre foto) */
  --color-fondo-67: rgba(255,255,255,.67);       /* fondo translúcido (degradados sobre imagen) */
  --color-borde: #DDDDDD;              /* bordes finos y separadores */
  --color-borde-tarjeta: #E4E4E4;      /* borde de las tarjetas del Home */
  --color-borde-fuerte: #5A5A5A;       /* borde de los campos del Register */

  /* ── Texto sobre claro ── */
  --color-texto: #161616;              /* texto principal (negro) */
  --color-texto-suave: #5A5A5A;        /* subtítulos, fechas, ayudas */

  /* ── Texto sobre oscuro o sobre el acento ── */
  --color-texto-claro: #FFFFFF;        /* texto sobre fondo oscuro/acento */
  --color-texto-claro-60: rgba(255,255,255,.60);  /* mismo, atenuado */
  --color-texto-claro-50: rgba(255,255,255,.50);
  --color-texto-claro-25: rgba(255,255,255,.25);  /* canal vacío de barras */
  --color-borde-claro: rgba(255,255,255,.20);     /* bordes sobre oscuro */

  /* ── Acento (verde TRERO): botones, tarjeta de nivel, navbar activo ── */
  --color-acento: #1eb36b;             /* rgb(30,179,107) */
  --color-acento-texto: #FFFFFF;       /* texto e íconos sobre el acento */
  --color-acento-tenue: rgba(30,179,107,.09);  /* fondo de chips y avisos */
  --color-acento-borde: rgba(30,179,107,.33);  /* borde de esos avisos */

  /* ── Estados ── */
  /* Éxito en TEAL, no en verde: con el acento verde, un check verde no se
     distinguiría de un botón. El teal sigue leyéndose como "salió bien". */
  --color-ok: #0F766E;                 /* requisito cumplido, confirmado */
  --color-ok-fuerte: #115E59;          /* mismo teal, más oscuro (tarjetas) */
  --color-ok-tenue: rgba(15,118,110,.10);   /* fondo del bloque de éxito */
  --color-ok-borde: rgba(15,118,110,.33);   /* borde del bloque de éxito */
  --color-alerta: #B45309;             /* ámbar oscuro: avisos sobre claro */
  --color-alerta-tenue: #FFF8E6;       /* fondo del bloque de aviso */
  --color-alerta-borde: rgba(180,83,9,.33);
  --color-error: #fa031c;              /* errores sobre claro: sigue ROJO a propósito,
                                          ahora contrasta contra el acento verde */
  --color-error-tenue: #FDECEC;        /* fondo del bloque de error */
  --color-error-borde: rgba(250,3,28,.33);

  /* ── Resultado deportivo: empate y derrota ──
     Las VICTORIAS no tienen token propio: reutilizan --color-acento y sus
     variantes. Ganar es la acción positiva de la marca, no un estado aparte.

     Por qué no se reusan los tokens de estado que ya existen:
     · --color-alerta (#B45309) es ámbar casi marrón y además ya está tomado
       por --color-pilar-torneo con el MISMO hex: un empate se confundiría
       con la competencia.
     · --color-error (#fa031c) es el rojo de validación de formulario. Marca
       "corregí esto"; una derrota no es un error del usuario. */
  --color-empate: #8F6A00;             /* dorado oscuro: 4.8:1 sobre blanco */
  --color-empate-tenue: rgba(143,106,0,.09);  /* fondo del círculo del ícono */
  --color-empate-borde: rgba(143,106,0,.33);  /* borde de ese círculo */
  --color-derrota: #B91C1C;            /* rojo apagado: 6.5:1 sobre blanco */
  --color-derrota-tenue: rgba(185,28,28,.09);
  --color-derrota-borde: rgba(185,28,28,.33);

  /* ── Campos de formulario ── */
  --color-input-fondo: #FFFFFF;
  --color-input-texto: #161616;
  --color-input-placeholder: #8A8A8A;

  /* ── Botones ── */
  --color-boton-off: #C9C9C9;          /* deshabilitado */
  --color-boton-off-texto: #FFFFFF;
  --color-boton-secundario: #FFFFFF;   /* botón de Google: fondo blanco */
  --color-boton-secundario-texto: #161616;

  /* ── Pilares: un color por tipo de partido/competencia ── */
  --color-pilar-desafio: #5B21B6;      /* violeta */
  --color-pilar-desafio-tenue: rgba(91,33,182,.09);
  --color-pilar-torneo: #B45309;       /* ámbar oscuro */
  --color-pilar-torneo-tenue: rgba(180,83,9,.09);
  --color-pilar-picado: #15803D;       /* verde */
  --color-pilar-picado-tenue: rgba(21,128,61,.09);
  --color-pilar-otro: #0369A1;         /* celeste oscuro */
  --color-pilar-otro-tenue: rgba(3,105,161,.09);

  /* ── Cancha de la pizarra tactica ──
     Verde CESPED, no el verde de la marca: el acento es la accion (botones,
     capitan, iconos) y usarlo de fondo lo apagaria. Dos tonos para las franjas
     de corte y blanco puro para las lineas, como en una cancha de verdad.
     El blanco sobre el verde oscuro da 5.6:1, asi que las lineas y los nombres
     de los jugadores se leen sin depender del tamano. */
  --color-cancha: #1F7A46;         /* verde cesped, franja oscura */
  --color-cancha-2: #24894F;       /* franja clara, apenas mas viva */
  --color-cancha-linea: #FFFFFF;   /* lineas: perimetro, media, circulo, areas */

  /* ── Vitrina de la Gloria: azul pizarra, no compite con el acento ── */
  --color-vitrina: #1E293B;
  --color-vitrina-texto: #FFFFFF;

  /* ── Pantalla de Login: VERDE Y BLANCO, tiene su propia familia ──
     El fondo NO es un verde elegido a ojo: es el verde exacto del pie de
     public/branding/login-fondo.webp, muestreado del archivo. Tiene que ser
     el mismo para que la imagen y el formulario se lean como una sola
     superficie; si se cambia la imagen, hay que volver a muestrear.
     Blanco sobre este verde da 10:1 de contraste, muy por encima de AAA. */
  --color-login-fondo: #034C2D;
  --color-login-fondo-80: rgba(3,76,45,.80);    /* degradado sobre la imagen */
  --color-login-texto-suave: rgba(255,255,255,.72);  /* legales sobre el verde */
  --color-login-error: #F04355;                 /* errores sobre el verde */
  --color-login-error-tenue: rgba(240,67,85,.12);
  --color-login-error-borde: rgba(240,67,85,.34);
  --color-login-alerta: #FFC845;                /* avisos sobre el verde */
  --color-login-alerta-borde: rgba(255,200,69,.33);
  --color-login-panel: rgba(255,255,255,.08);   /* bloques de éxito/aviso */
  --color-login-velo: rgba(3,76,45,.78);        /* velo sobre la imagen (desktop) */

  /* ── Carrusel de campañas ── */
  --color-carrusel-vacio: #1A1A1A;     /* fondo del slot si la imagen falla */

  /* ── Sombras ── */
  --sombra-tarjeta: 0 6px 18px rgba(0,0,0,.10);
  --sombra-barra: 0 6px 18px rgba(0,0,0,.12);
  --sombra-etiqueta: 0 4px 12px rgba(0,0,0,.18);
  --sombra-panel: 0 24px 60px rgba(0,0,0,.45);
}

/* ============================================================
   MODO OSCURO — preparado pero INACTIVO.
   Se activa poniendo data-theme="dark" en <html> o <body>.
   Mientras nadie ponga ese atributo, este bloque no aplica.
   Los pilares y el acento no cambian: son identidad de marca.
   ============================================================ */
[data-theme="dark"] {
  --color-fondo: #0A0A0A;
  --color-superficie: #161616;
  --color-superficie-2: #1F1F1F;
  --color-borde: #2E2E2E;
  --color-borde-tarjeta: #2E2E2E;
  --color-borde-fuerte: #4A4A4A;

  --color-texto: #F5F5F5;
  --color-texto-suave: #A0A0A0;

  --color-input-fondo: #1F1F1F;
  --color-input-texto: #F5F5F5;
  --color-input-placeholder: #7A7A7A;

  --color-boton-off: #3A3A3A;
  --color-boton-off-texto: #8A8A8A;
  --color-boton-secundario: #1F1F1F;
  --color-boton-secundario-texto: #F5F5F5;

  --color-alerta-tenue: rgba(180,83,9,.16);
  --color-error-tenue: rgba(250,3,28,.14);

  /* Empate y derrota: sobre oscuro el hex base se aclara para no apagarse, y
     los fondos tenues suben de alfa, igual que alerta y error. */
  --color-empate: #D9A400;
  --color-empate-tenue: rgba(217,164,0,.16);
  --color-derrota: #F04355;
  --color-derrota-tenue: rgba(240,67,85,.16);

  --color-vitrina: #0F172A;

  /* El acento y los pilares no cambian en oscuro: son identidad de marca. */

  --sombra-tarjeta: 0 6px 18px rgba(0,0,0,.55);
  --sombra-barra: 0 6px 18px rgba(0,0,0,.60);
  --sombra-etiqueta: 0 4px 12px rgba(0,0,0,.65);
}