/* =========================================================================
   Tudor Sport · tokens.css  [diseno]
   Variables de todo el sistema visual. Es el ÚNICO lugar con colores fijos.
   - Marca: --marca, --marca-claro, --marca-suave, --marca-texto.
     Las cambia tema.aplicarColor(color) en :root. Nunca usar un rojo fijo
     para algo de marca (CONTEXTO §7.1).
   - Estados (fijos, no cambian con la marca): verde / ámbar / rojo.
     El rojo de "atrasado" es --rojo, aparte de la marca.
   - Calificación del pagador: --cal-*. Las puede pisar
     tema.aplicarColoresCalificacion() con los colores de Configuracion.
   ========================================================================= */
:root {
  /* Marca (valores por defecto = rojo Tudor Sport) */
  --marca: #e3262b;
  --marca-claro: #fdecec;   /* 90 % hacia blanco: fondo de avatar, selección */
  --marca-suave: #ffe1e1;   /* texto secundario sobre fondo de marca */
  --marca-texto: #fff;      /* texto sobre fondo de marca (oscuro si la marca es muy clara) */

  /* Estados de la cuota (fijos) */
  --rojo: #dc2626;
  --rojo-claro: #fdecec;
  --verde: #15803d;
  --verde-bg: #e8f6ee;
  --ambar: #a16207;
  --ambar-bg: #fef6dc;

  /* Neutros */
  --texto: #1d1d1f;
  --sub: #6b6b70;
  --borde: #ececee;
  --borde-fuerte: #d6d6db;  /* bordes de campos y fichas: se ven mejor al sol */
  --fondo: #f2f2f4;
  --blanco: #fff;
  --gris-suave: #f7f7f8;    /* fondo de cajitas dentro de una caja blanca */
  --oscuro: #1d1d1f;        /* fondo de los mensajes cortos (toast) */

  /* Calificación del pagador (color que pinta el dueño) */
  --cal-verde: #4ade80;
  --cal-amarillo: #fde047;
  --cal-naranja: #fb923c;
  --cal-rojo: #f87171;
  --cal-vacio: #d1d5db;

  /* Otros */
  --whatsapp: #25d366;
  --whatsapp-texto: #fff;

  /* Formas y medidas */
  --radio: 14px;
  --radio-grande: 18px;
  --radio-ficha: 999px;
  --alto-boton: 48px;
  --alto-boton-grande: 56px;
  --alto-toque: 44px;        /* mínimo para cualquier cosa que se toque */
  --alto-barra-superior: 56px;
  --alto-barra-inferior: 64px;
  --ancho-max: 480px;
  --seguro-abajo: env(safe-area-inset-bottom, 0px);

  /* Sombras */
  --sombra: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 14px rgba(0, 0, 0, .05);
  --sombra-alta: 0 -6px 28px rgba(0, 0, 0, .16);

  /* Letra */
  --fuente: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Colores de calificación: cualquier elemento con data-cal recibe --cal-color */
[data-cal="verde"]    { --cal-color: var(--cal-verde); }
[data-cal="amarillo"] { --cal-color: var(--cal-amarillo); }
[data-cal="naranja"]  { --cal-color: var(--cal-naranja); }
[data-cal="rojo"]     { --cal-color: var(--cal-rojo); }
[data-cal=""]         { --cal-color: var(--cal-vacio); }