/*
 * Sistema de diseño · tokens
 * Lenguaje visual del PayAndes Payer (monocromo tipo shadcn/ui) y tokens de la plantilla AdminCN (MIT, ver LICENSES/).
 * Claro por defecto (tienda y área de cliente). El panel usa en claro los colores de Dhru Fusion Pro (.is-admin en <html>).
 * La clase .dark en <html> activa el oscuro en todo, con los tonos carbón de la app de Claude.
 */

/* Fuentes propias (Geist y Geist Mono, licencia OFL): sin peticiones a terceros */
@font-face{font-family:'Geist';font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/geist-latin-wght-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/geist-latin-ext-wght-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/geist-mono-latin-wght-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/geist-mono-latin-ext-wght-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --telegram:#0088cc;
  --google-blue:#1a73e8;
  /* Portada animada: las medusas van de un color a otro */
  --jelly-a:#0e7490;
  --jelly-b:#6d28d9;
  --jelly-c:#fe004d;
  color-scheme:light;
  /* Superficies y texto (hex aproximado en comentarios) */
  --background:oklch(1 0 0);                 /* #ffffff */
  --foreground:oklch(.145 0 0);              /* #0a0a0a */
  --card:oklch(1 0 0);
  --card-foreground:oklch(.145 0 0);
  --popover:oklch(1 0 0);
  --popover-foreground:oklch(.145 0 0);
  --primary:oklch(.205 0 0);                 /* #171717 */
  --primary-foreground:oklch(.985 0 0);      /* #fafafa */
  --secondary:oklch(.97 0 0);                /* #f5f5f5 */
  --secondary-foreground:oklch(.205 0 0);
  --muted:oklch(.97 0 0);
  --muted-foreground:oklch(.556 0 0);        /* #737373 */
  --accent:oklch(.97 0 0);
  --accent-foreground:oklch(.205 0 0);
  --border:oklch(.922 0 0);                  /* #e5e5e5 */
  --input:oklch(.922 0 0);
  --ring:oklch(.708 0 0);                    /* #a1a1a1 */
  /* Estados (solo se usa color para comunicar estado) */
  --success:oklch(.627 .194 149.214);        /* ≈ #16a34a */
  --warning:oklch(.666 .179 58.318);         /* ≈ #d97706 */
  --destructive:oklch(.577 .245 27.325);     /* ≈ #dc2626 */
  --info:oklch(.546 .245 262.881);           /* ≈ #2563eb */
  /* Acento: color del logo (#FE004D). Se usa con moderación, solo en unos pocos puntos (saldo, selección, página
     activa, diapositiva actual); todo lo demás sigue en blanco y negro como el Payer. */
  --hl:#fe004d;
  --hl-foreground:#fff;
  /* Gráficas */
  --chart-1:oklch(.646 .222 41.116);
  --chart-2:oklch(.6 .118 184.704);
  --chart-3:oklch(.398 .07 227.392);
  --chart-4:oklch(.828 .189 84.429);
  --chart-5:oklch(.769 .188 70.08);
  --chart-ok:#28c76f;
  --chart-bad:#ffbf23;
  /* Tarjetas de colas del inicio */
  --tile-orange:#ff9f43;
  --tile-green:#28c76f;
  --tile-cyan:#00cfe8;
  --tile-tint:8%;
  /* Barra lateral del admin */
  --sidebar:#ebebeb;
  --sidebar-foreground:#4c4c4c;
  --sidebar-accent:#f7f7f7;
  --sidebar-accent-foreground:#000;
  --sidebar-border:#dedede;
  --sidebar-edge:transparent;
  --sidebar-ring:#a1a1a1;
  --nav-text:#4c4c4c;
  /* Iconos del menú a dos tonos (views/icons/duo): base y detalle. En la página activa, base ámbar */
  --nav-duo-a:#dbdbdb;
  --nav-duo-b:#747474;
  --nav-duo-active:#f5c14b;
  --nav-active-shadow:0 1px 2px rgb(0 0 0 / .07);
  --header-border:transparent;
  /* Radios */
  --radius:.625rem;
  --radius-sm:calc(var(--radius)*.6);
  --radius-md:calc(var(--radius)*.8);
  --radius-lg:var(--radius);
  --radius-xl:calc(var(--radius)*1.4);
  --radius-2xl:calc(var(--radius)*1.8);
  /* Tipografía */
  --font-sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  /* Sin letra de «consola» en la interfaz: ids, URLs, IMEI y claves van con la misma fuente que el resto. */
  --font-mono:var(--font-sans);
  /* Solo para bloques de código de ejemplo (documentación de la API), donde hay que alinear columnas. */
  --font-code:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  /* Sombras */
  --shadow-xs:0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-sm:0 1px 3px 0 rgb(0 0 0 / .1),0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-md:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1);
  --shadow-xl:0 20px 25px -5px rgb(0 0 0 / .1),0 8px 10px -6px rgb(0 0 0 / .1);
  /* Movimiento */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease:cubic-bezier(.4,0,.2,1);
  /* Medidas de cada superficie */
  --sidebar-width:16rem;
  --sidebar-width-icon:3rem;
  --sidebar-width-mobile:18rem;
  --header-h:3.5rem;
  --container:108rem;
  --gutter:clamp(1rem,.25rem + 2.5vw,3rem);
  --overlay:rgb(0 0 0 / .1);
  --menu-dim:rgb(0 0 0 / .22); /* fondo oscurecido mientras hay un desplegable abierto (admin) */
}

/* Derivados: se calculan otra vez en cada superficie que cambia los colores base (.dark está en la misma etiqueta que :root) */
:root,.fixed-dark{
  --page:var(--background);                  /* lienzo; tarjetas y controles van encima en --background */
  /* Marca de la tienda: monocroma como el PayAndes Payer (igual que --primary). El ajuste store.brand_color la cambia. */
  --brand:var(--primary);
  --brand-foreground:var(--primary-foreground);
  --brand-hover:color-mix(in oklab,var(--brand) 88%,var(--background));
  --brand-10:color-mix(in oklab,var(--brand) 8%,transparent);
  --brand-20:color-mix(in oklab,var(--brand) 16%,transparent);
  --hl-10:color-mix(in oklab,var(--hl) 10%,transparent);
  --hl-20:color-mix(in oklab,var(--hl) 22%,transparent);
  --ring-50:color-mix(in oklab,var(--ring) 50%,transparent);
  --fg-10:color-mix(in oklab,var(--foreground) 10%,transparent);
  --primary-5:color-mix(in oklab,var(--primary) 5%,transparent);
  --primary-10:color-mix(in oklab,var(--primary) 10%,transparent);
  --primary-20:color-mix(in oklab,var(--primary) 20%,transparent);
  --muted-50:color-mix(in oklab,var(--muted) 50%,transparent);
  --input-30:color-mix(in oklab,var(--input) 30%,transparent);
  --input-50:color-mix(in oklab,var(--input) 50%,transparent);
  --destructive-10:color-mix(in oklab,var(--destructive) 10%,transparent);
  --destructive-20:color-mix(in oklab,var(--destructive) 20%,transparent);
  --success-10:color-mix(in oklab,var(--success) 10%,transparent);
  --warning-10:color-mix(in oklab,var(--warning) 12%,transparent);
  --info-10:color-mix(in oklab,var(--info) 10%,transparent);
  --shimmer:color-mix(in oklab,var(--background) 75%,transparent);
  --grid-line:color-mix(in oklab,var(--foreground) 7%,transparent);
  --grid-cell:color-mix(in oklab,var(--foreground) 5%,transparent);
  --surface-muted:color-mix(in oklab,var(--muted) 60%,var(--background));
  --edge:color-mix(in oklab,var(--foreground) 9%,transparent);
  --glass:color-mix(in oklab,var(--card) 76%,transparent);
  --box:color-mix(in oklab,var(--card) 70%,transparent);
  --sunk:color-mix(in oklab,var(--foreground) 4.5%,transparent);
  --shadow-ring:0 0 0 1px var(--fg-10),var(--shadow-xs);
  --shadow-float:0 0 0 1px var(--fg-10),0 1px 2px rgb(0 0 0 / .04),0 24px 48px -18px rgb(0 0 0 / .18);
  --shadow-frame:0 0 0 1px var(--edge),0 2px 4px rgb(0 0 0 / .03),0 40px 90px -36px rgb(0 0 0 / .3);
}

/* Oscuro con los tonos carbón de la app de Claude: gris cálido, nunca negro puro */
.dark{
  color-scheme:dark;
  --background:#262624;
  --foreground:#faf9f5;
  --card:#30302e;
  --card-foreground:#faf9f5;
  --popover:#30302e;
  --popover-foreground:#faf9f5;
  --primary:#faf9f5;
  --primary-foreground:#262624;
  --secondary:#3b3b38;
  --secondary-foreground:#faf9f5;
  --muted:#3b3b38;
  --muted-foreground:#b4b2a8;
  --accent:#3b3b38;
  --accent-foreground:#faf9f5;
  --border:rgb(222 220 209 / 15%);
  --input:rgb(222 220 209 / 20%);
  --ring:#9c9a92;
  --success:oklch(.792 .209 151.711);        /* ≈ #4ade80 */
  --warning:oklch(.828 .189 84.429);         /* ≈ #fbbf24 */
  --destructive:oklch(.704 .191 22.216);     /* ≈ #f87171 */
  --info:oklch(.707 .165 254.624);
  --chart-1:oklch(.488 .243 264.376);
  --chart-2:oklch(.696 .17 162.48);
  --chart-3:oklch(.769 .188 70.08);
  --chart-4:oklch(.627 .265 303.9);
  --chart-5:oklch(.645 .246 16.439);
  --hl:#ff2d6b;
  --jelly-a:#5eead4;
  --jelly-b:#a78bfa;
  --jelly-c:#ff5c8a;
  --hl-foreground:#fff;
  --sidebar:#1f1e1d;
  --sidebar-foreground:#faf9f5;
  --sidebar-accent:#30302e;
  --sidebar-accent-foreground:#faf9f5;
  --sidebar-border:rgb(222 220 209 / 12%);
  --sidebar-edge:var(--sidebar-border);
  --sidebar-ring:#9c9a92;
  --nav-text:color-mix(in oklab,var(--sidebar-foreground) 82%,transparent);
  --nav-active-shadow:none;
  --header-border:var(--border);
  --tile-tint:12%;
  --overlay:rgb(0 0 0 / .45);
  --menu-dim:rgb(0 0 0 / .5);
  --shimmer:color-mix(in oklab,var(--foreground) 7%,transparent);
  --surface-muted:color-mix(in oklab,var(--card) 55%,var(--background));
  --glass:color-mix(in oklab,var(--card) 66%,transparent);
  --box:color-mix(in oklab,var(--card) 58%,transparent);
  --shadow-float:0 0 0 1px var(--fg-10),0 24px 48px -18px rgb(0 0 0 / .65);
  --shadow-frame:0 0 0 1px var(--edge),0 40px 90px -30px rgb(0 0 0 / .8),inset 0 1px 0 rgb(250 249 245 / 5%);
}

/* Panel de administración en claro: colores del panel de Dhru Fusion Pro */
.is-admin:not(.dark){
  --page:#f1f1f1;
  --foreground:#383838;
  --card-foreground:#383838;
  --popover-foreground:#383838;
  --primary:#000;
  --primary-foreground:#fff;
  --secondary:#ebebeb;
  --secondary-foreground:#383838;
  --muted:#ebebeb;
  --muted-foreground:#666;
  --accent:#ebebeb;
  --accent-foreground:#383838;
  --border:#e4e4e4;
  --input:#dcdcdc;
  --success:#127a43;                         /* texto legible sobre su tinte; el verde vivo es --chart-ok */
  --warning:#8f5c00;                         /* texto legible sobre su tinte; el ámbar vivo es --chart-bad */
  --success-10:#dcf6e8;
  --warning-10:#fff5de;
}

/* Bandas siempre oscuras (CTA, pie de la tienda, panel de marca del login) */
.fixed-dark{
  color-scheme:dark;
  --background:oklch(.13 0 0);
  --foreground:oklch(.985 0 0);
  --card:oklch(.18 0 0);
  --card-foreground:oklch(.985 0 0);
  --popover:oklch(.205 0 0);
  --popover-foreground:oklch(.985 0 0);
  --primary:oklch(.985 0 0);
  --primary-foreground:oklch(.145 0 0);
  --secondary:oklch(.269 0 0);
  --secondary-foreground:oklch(.985 0 0);
  --muted:oklch(.269 0 0);
  --muted-foreground:oklch(.72 0 0);
  --accent:oklch(.269 0 0);
  --accent-foreground:oklch(.985 0 0);
  --border:oklch(1 0 0 / 10%);
  --input:oklch(1 0 0 / 15%);
  --ring:oklch(.556 0 0);
  --success:oklch(.792 .209 151.711);
  --warning:oklch(.828 .189 84.429);
  --destructive:oklch(.704 .191 22.216);
  --info:oklch(.707 .165 254.624);
  --grid-line:color-mix(in oklab,var(--foreground) 6%,transparent);
  --shimmer:color-mix(in oklab,var(--foreground) 7%,transparent);
  --surface-muted:color-mix(in oklab,var(--card) 55%,var(--background));
  --glass:color-mix(in oklab,var(--card) 66%,transparent);
  --box:color-mix(in oklab,var(--card) 58%,transparent);
  --shadow-float:0 0 0 1px var(--fg-10),0 24px 48px -18px rgb(0 0 0 / .65);
  background:var(--background);
  color:var(--foreground);
}

/* En el tema oscuro las bandas toman el carbón más profundo de Claude. Las páginas de acceso son oscuras siempre, así que lo
   toman con cualquier tema (el acceso no sabe aún qué tema eligió la cuenta). */
.dark .fixed-dark,.fixed-dark.auth-body{
  --background:#1f1e1d;
  --foreground:#faf9f5;
  --card:#30302e;
  --card-foreground:#faf9f5;
  --popover:#30302e;
  --popover-foreground:#faf9f5;
  --primary:#faf9f5;
  --primary-foreground:#262624;
  --secondary:#3b3b38;
  --secondary-foreground:#faf9f5;
  --muted:#3b3b38;
  --muted-foreground:#b4b2a8;
  --accent:#3b3b38;
  --accent-foreground:#faf9f5;
  --border:rgb(222 220 209 / 15%);
  --input:rgb(222 220 209 / 20%);
  --ring:#9c9a92;
}