/* Marca del comercio: Cotillón 7. Ver docs/marca.md.
   Todo lo que identifica al comercio vive en esta carpeta (public/marca/): estos colores y los archivos del logo.
   Para otro comercio se reemplaza la carpeta entera con sus colores y sus logos, con los mismos nombres; el resto de la
   interfaz usa estos tokens y no hay que tocarla.

   Paleta tomada del logo: magenta #f80eb6, amarillo #fce507, naranja #fb850b, rojo #f6144b, frambuesa #db1a63 y
   turquesa #02b68d (el 7). La base de la interfaz es neutra; la marca aparece en acciones, selección, foco y algunos
   detalles de identidad. */

:root {
  /* Color de acción: frambuesa del logo, oscurecido para leerse sobre blanco (5,3:1 con texto blanco). */
  --marca: #c8286a;
  --marca-rgb: 200 40 106;
  --marca-clara: #e24d8c;
  --marca-profunda: #8c0f44;
  --marca-hover: #b2225c;
  --marca-tinta: #a21f58;
  --marca-suave: rgb(var(--marca-rgb) / .08);
  --marca-linea: rgb(var(--marca-rgb) / .22);
  --foco: rgb(var(--marca-rgb) / .22);

  /* La cinta: el recorrido de color del logo, de la C al 7. Sólo en detalles finos (2 a 4 px). */
  --cinta: linear-gradient(90deg, #f80eb6 0%, #fc6c64 14%, #fcb716 24%, #fce507 33%, #fb850b 50%, #f6144b 66%, #c02b72 80%, #02b68d 100%);
  --cinta-vertical: linear-gradient(180deg, #f80eb6 0%, #fb850b 55%, #f6144b 100%);
  /* La cinta en círculo, para el anillo de carga del logo. */
  --cinta-conica: conic-gradient(from 200deg, #f80eb6, #fc6c64, #fcb716, #fce507, #fb850b, #f6144b, #c02b72, #02b68d, #f80eb6);

  /* Botón principal: frambuesa con un degradado leve hacia el rosa. */
  --boton-primario: linear-gradient(180deg, #cc5183 0%, #b33c6b 100%);
  --boton-primario-hover: linear-gradient(180deg, #d35c8c 0%, #a93564 100%);

  /* Tarjeta del total en la caja: ciruela profundo, con la cinta arriba. */
  --total-fondo: linear-gradient(180deg, #4a1957 0%, #2f1038 100%);
  --total-sombra: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 0 0 1px rgba(32, 10, 39, .4), 0 24px 48px -18px rgba(54, 17, 63, .6), 0 8px 16px -8px rgba(54, 17, 63, .35);
  --total-tinta: #3b1347;
  --cobrar-fondo: linear-gradient(180deg, #ffffff 0%, #f7eef4 100%);
  --cobrar-hover: linear-gradient(180deg, #ffffff 0%, #fbf5f9 100%);

  /* Color de cada local (en el orden de sus códigos), liso y sobrio: el mismo en el Inicio, el Resumen y los gráficos. */
  --local-1: #c8286a;
  --local-2: #7a4bd1;
  --local-3: #0f8f86;
  --local-4: #c46a12;

  /* Tarjeta protagonista del Inicio: en claro, frambuesa luminoso que va al violeta, con una luz durazno; en oscuro,
     el ciruela profundo con una luz rosa. Texto blanco en los dos. */
  --hero-fondo: linear-gradient(135deg, #f2408a 0%, #d81f6e 34%, #a8288f 72%, #6f2d9e 100%);
  --hero-luz: rgba(255, 196, 120, .55);
  --hero-ahora: linear-gradient(180deg, #fff6cf, #ffd27a);
  --hero-ahora-sombra: #ffd27a;
  --hero-sombra: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 22px 44px -18px rgba(176, 30, 110, .55), 0 8px 18px -10px rgba(111, 45, 158, .35);

  /* Fondo: dos luces muy suaves de la marca (rosa arriba, durazno abajo). */
  --bg-lavado: radial-gradient(1100px 520px at 82% -12%, rgba(236, 40, 160, .05), transparent 70%),
               radial-gradient(900px 480px at -8% 108%, rgba(251, 133, 11, .055), transparent 70%);
}

:root[data-tema="oscuro"] {
  /* En oscuro el rosa sube de luz para leerse sobre ciruela (5:1). */
  --marca: #e5568f;
  --marca-rgb: 229 86 143;
  --marca-clara: #f177a8;
  --marca-profunda: #9c1350;
  --marca-hover: #ec659c;
  --marca-tinta: #f3a6c6;
  --marca-suave: rgb(var(--marca-rgb) / .13);
  --marca-linea: rgb(var(--marca-rgb) / .32);
  --foco: rgb(var(--marca-rgb) / .32);

  --boton-primario: linear-gradient(180deg, #cf5d8c 0%, #ad3f69 100%);
  --boton-primario-hover: linear-gradient(180deg, #d76994 0%, #b6466f 100%);

  --total-fondo: linear-gradient(180deg, #3e1649 0%, #24102b 100%);
  --total-sombra: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 48px -18px rgba(0, 0, 0, .8), 0 8px 18px -8px rgba(94, 33, 112, .5);
  --cobrar-fondo: linear-gradient(180deg, #ffffff 0%, #f3e8f0 100%);
  --cobrar-hover: linear-gradient(180deg, #ffffff 0%, #f9f2f7 100%);

  --local-1: #e5568f;
  --local-2: #a17cf0;
  --local-3: #35c4b8;
  --local-4: #f0a04e;

  --hero-fondo: linear-gradient(150deg, #5e2170 0%, #391245 50%, #1d0923 100%);
  --hero-luz: rgb(var(--marca-rgb) / .45);
  --hero-ahora: linear-gradient(180deg, #f6d08a, #f177a8);
  --hero-ahora-sombra: #f177a8;
  --hero-sombra: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 0 0 1px rgba(255, 255, 255, .05), 0 24px 48px -18px rgba(0, 0, 0, .8);

  --bg-lavado: radial-gradient(1100px 520px at 82% -12%, rgba(236, 40, 160, .085), transparent 70%),
               radial-gradient(900px 480px at -8% 108%, rgba(251, 133, 11, .05), transparent 70%);
}