/* ═══════════════════════════════════════════════════════════════════════
 * tokens.css — FUENTE ÚNICA DE VERDAD de los tokens de color.
 *
 * Antes cada página declaraba su propio :root con la paleta copiada a mano:
 * 29 archivos con 3 paletas distintas conviviendo (la tienda usaba
 * --surface:#111113 y el panel #121212, --card:#18181b vs #1a1b1e, etc.), lo
 * que hacía que el panel no se viera igual que la página principal.
 *
 * Este archivo se carga en includes/_head.ejs, que TODAS las páginas incluyen,
 * así que declarar aquí un token lo aplica a todo el sitio. Las páginas ya NO
 * deben declarar estos tokens: si necesitas uno nuevo, agrégalo aquí.
 *
 * Qué NO vive aquí (a propósito):
 *   - --sidebar-w  (layout del panel)      → assets/admin/sidebar.css
 *   - --bn-h       (altura de la bottom nav) → assets/navbar.css
 *   - Tokens de una sola página/tema, que se inyectan desde JS o se declaran
 *     junto al componente que los usa:
 *       --pd-c1/--pd-c2/--pd-c3, --pd-buybar-h, --st-c1/--st-c2/--st-c3
 *         (acentos por producto)          → paginas/producto/[slug].ejs
 *       --preview-primary/--preview-secondary (swatches del formulario)
 *                                        → paginas/admin/config.ejs
 *
 * Tema aparte (NO usa esta hoja a propósito): paginas/ejemplos/*.ejs, que
 * declaran su paleta (azul marino) sobre `:host, .ca` / `.vm`. Son maquetas
 * de ejemplo autocontenidas, no parte del storefront ni del panel.
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Superficies ──
     Tres capas, cada una claramente más clara que la de abajo: fondo de página
     → surface (secciones, campos, cajas dentro de una tarjeta) → card (tarjetas
     y ventanas). Antes eran #0a0a0a / #111113 / #18181b: entre la primera y la
     segunda había 7 puntos de diferencia y entre la segunda y la tercera, 7
     más, así que en el celular las tarjetas no se distinguían del fondo.
     Ahora la diferencia es de 13 y de 10 puntos, y los bordes suben a #36363f
     (antes #27272a, que se confundía con el propio fondo punteado).

     ── ESTOS SON LOS VALORES DEL TEMA POR DEFECTO ──
     El tema por defecto es «Medianoche» (azul de noche) y, como es el de
     fábrica, NO se inyecta desde JS: estos valores de aquí SON ese tema. Si se
     cambian, hay que cambiarlos también en data/_helpers/temas.js (misma
     escalera: fondo → +13 → surface → +10 → card → +21 → border). */
  --bg: #080e22;
  --surface: #121a37;
  --card: #182349;
  --card-hover: #1e2b5b;
  --border: #273569;
  --border-light: #37498b;

  /* Punteado del fondo del panel. Es solo una textura: tiene que quedar MUY por
     debajo de las tarjetas. Estaba fijo en #2a2a2a — más claro que las propias
     tarjetas (#18181b) — así que el fondo competía con las ventanas y todo
     parecía el mismo plano. */
  --bg-dots: rgba(255, 255, 255, 0.035);

  /* ── Tipografía ── */
  --text: #fafafa;
  --text-secondary: #d4d4d8;
  --text-muted: #a1a1aa;
  --text-dim: #71717a;

  /* ── Colores de marca ──
     El acento de fábrica es ÍNDIGO (el que eligió el dueño) y, como es el de
     fábrica, NO se inyecta desde JS: estos valores de aquí SON ese acento. Si
     se cambian, hay que cambiarlos también en data/_helpers/acentos.js.
     Los nombres siguen siendo --purple* porque los usan ~800 reglas del sitio:
     cambiar el VALOR es lo que cambia el color. */
  --purple: #6366f1;
  --purple-dark: #4f46e5;
  --purple-light: #a5b4fc;
  --purple-hover: #4f46e5;
  --blue: #60a5fa;
  --emerald: #34d399;
  --red: #f87171;
  --yellow: #facc15;
  --orange: #fb923c;
  --pink: #818cf8;
  --cyan: #22d3ee;

  /* ── El color «PREMIUM» de los iconos de la barra de arriba (3 de octubre) ──
     El carrito, la campana, la cuenta y el «S/» se pintan con esta pareja
     (claro → oscuro). Ahora viaja CON EL TEMA: cada tema de _helpers/temas.js
     trae su propio --prem-1/--prem-2 (oro, plata, acero, latón…), así cambiar
     de tema cambia también este color. Estos son los del tema de fábrica
     (Medianoche): ORO, el mismo del logo. */
  --prem-1: #fbeab4;
  --prem-2: #d9a72e;

  /* ── Neutrales translúcidos ── */
  --white-3: rgba(255, 255, 255, 0.03);
  --white-5: rgba(255, 255, 255, 0.05);
  --white-8: rgba(255, 255, 255, 0.08);
  --white-10: rgba(255, 255, 255, 0.10);

  /* ── Tintes al 10-20% ──
     Derivados del color base correspondiente (mismo tono, misma alpha),
     para que un fondo tenue y su borde siempre combinen. */
  --purple-10: rgba(99, 102, 241, 0.10);
  --purple-20: rgba(99, 102, 241, 0.20);
  --purple-30: rgba(99, 102, 241, 0.30);
  --purple-40: rgba(99, 102, 241, 0.40);
  /* ── Mismo acento, en formato «r, g, b» ──
     Para las transparencias que NO son 10/20/30/40 (sombras y bordes al 5, 8,
     12, 15, 25, 35, 45, 55, 85%…). Así se escribe rgba(var(--purple-rgb), .15)
     y el valor sigue al color de marca: antes había más de cien sitios con el
     violeta escrito a mano y, al cambiar el acento, se quedaban del color viejo
     (el botón de escuchar de las tarjetas, entre ellos). */
  --purple-rgb: 99, 102, 241;
  --pink-rgb: 129, 140, 248;
  --emerald-10: rgba(52, 211, 153, 0.10);
  --blue-10: rgba(96, 165, 250, 0.10);
  --red-10: rgba(248, 113, 113, 0.10);
  --yellow-10: rgba(250, 204, 21, 0.10);
  --orange-10: rgba(251, 146, 60, 0.10);
  --pink-10: rgba(129, 140, 248, 0.10);
}

/* ═══ COMPORTAMIENTO «APP» EN EL CELULAR ═══
   El navegador deja arrastrar la página de lado (ese rebote elástico al pasar
   el dedo) y agrandar el texto al girar el teléfono; una app nativa no hace
   ninguna de las dos. Se corta SOLO lo horizontal: el scroll vertical sigue
   igual y las filas que se deslizan a propósito (carrusel de anuncios, filas
   de chips, tablas anchas, galería del panel) siguen funcionando porque el
   bloqueo va en el documento, no en ellas. */
html, body {
  overscroll-behavior-x: none;   /* sin rebote lateral al llegar al borde */
  overflow-x: clip;              /* red de seguridad: nada desplaza la ventana */
  /* Chromium/Android puede convertir el eje vertical en `hidden` al combinar
     `overflow-x: clip` con el valor inicial `visible`. El contenido seguía
     cargando, pero el dedo ya no podía desplazar página ni panel. El eje
     vertical se declara explícitamente para conservar el scroll táctil. */
  overflow-y: auto;
  -webkit-text-size-adjust: 100%;/* iOS no infla el texto al girar */
  text-size-adjust: 100%;
}
/* En lo que se toca, sin el doble toque de zoom (el toque responde al instante). */
a, button, [role="button"], label, select, input { touch-action: manipulation; }

/* ═══ SIN SELECCIÓN DE TEXTO AL MANTENER PULSADO ═══
   El navegador, al dejar el dedo apoyado sobre cualquier texto, lo marcaba y
   abría «Seleccionar / Copiar» (y en las imágenes, «Guardar imagen»). Una app
   nativa no hace eso: aquí se corta.
   Las zonas las marca _head.ejs en <html data-zona="…">:
     · app    → la tienda pública: no se selecciona nunca (tampoco con mouse:
                es la cara que ve el cliente);
     · panel  → administración y super administración: igual que una app SOLO
                en pantallas táctiles. Con mouse/trackpad el texto se sigue
                seleccionando como siempre, porque copiar un id, un correo o un
                precio es parte del trabajo;
     · editor → editor de plantillas: sin restricción, seleccionar código es su
                razón de ser.

   En todas las zonas quedan EXENTOS los campos de escritura (input, textarea y
   contenteditable): ahí seleccionar y pegar es lo normal. */
html[data-zona="app"] body {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;   /* iOS: sin menú al mantener pulsado */
}
html[data-zona="app"] input,
html[data-zona="app"] textarea,
html[data-zona="app"] [contenteditable="true"],
html[data-zona="app"] [contenteditable="plaintext-only"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
/* Las imágenes no se arrastran ni ofrecen guardarse al mantener el dedo. */
html[data-zona="app"] img,
html[data-zona="app"] svg { -webkit-user-drag: none; user-drag: none; }

/* El PANEL (administración y super administración), solo con el dedo: en una
   notebook o PC con mouse/trackpad nada de esto se activa y se copia igual que
   siempre. Mismo criterio que _head.ejs usa para cortar el menú al mantener
   pulsado: sin ratón (hover: none) o con puntero grueso (dedo). */
@media (hover: none), (pointer: coarse) {
  html[data-zona="panel"] body {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;   /* iOS: sin menú al mantener pulsado */
  }
  html[data-zona="panel"] input,
  html[data-zona="panel"] textarea,
  html[data-zona="panel"] select,
  html[data-zona="panel"] [contenteditable="true"],
  html[data-zona="panel"] [contenteditable="plaintext-only"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }
  /* Las imágenes del panel tampoco se arrastran ni ofrecen «Guardar imagen». */
  html[data-zona="panel"] img,
  html[data-zona="panel"] svg { -webkit-user-drag: none; user-drag: none; }
}

/* ── BARRA DE DESPLAZAMIENTO ──────────────────────────────────────────────
   La barra de la PÁGINA no se dibuja: es una capa del navegador que va pegada
   al borde de la ventana, así que se montaba ENCIMA del menú de arriba y del de
   abajo (parecía estar sobre ellos cuando bajabas hasta el final) y se veía
   como una línea cruzando la barra. Con esto la página se desliza igual —con el
   dedo, con la rueda y con las flechas del teclado— pero sin esa raya encima.
   Las listas INTERNAS (el catálogo, los diálogos, el menú del panel) conservan
   su barra fina de 6px y oscura, que sí ayuda a ver que hay más contenido. */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { width: 0; height: 0; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,0.22);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.4); }
::-webkit-scrollbar-corner { background: transparent; }

/* ═══ EL MENÚ DE LA APP NO SE ASOMA POR LOS HUECOS DEL TECLADO ═══
   Mientras se escribe DENTRO de una ventana (chat de IA, formularios del panel,
   carrito, reproductor), el marco fijo de la app (barra de arriba y menú de
   abajo) se oculta. Al abrirse el teclado la página se achica y esos elementos,
   que están pegados a los bordes, suben hasta quedar detrás del teclado: como el
   teclado de Android es semitransparente, se veían «subir y bajar» por los
   huecos. La clase la pone _head.ejs cuando detecta teclado abierto + campo
   enfocado dentro de una ventana; al cerrar el teclado vuelven solos. */
html.kb-con-ventana #bottom-nav,
html.kb-con-ventana #navbar,
/* El PANEL tiene su propio marco: la barra de arriba (.panel-barra), el cajón
   lateral y el botón flotante del asistente. Con el teclado abierto también
   subían y se veían por los huecos, así que se ocultan igual. */
html.kb-con-ventana .panel-barra,
html.kb-con-ventana .sidebar,
html.kb-con-ventana .sidebar-scrim,
html.kb-con-ventana #iaBoton { visibility: hidden !important; }

/* Y también cuando SOLO está el teclado abierto con una ventana en pantalla,
   aunque el navegador no informe el campo enfocado en ese momento: Android
   avisa del teclado unos milisegundos antes de mover el foco, y en ese hueco el
   marco alcanzaba a verse subir por los huecos del teclado. Con esto no llega a
   aparecer: en cuanto hay teclado + ventana, el marco se oculta. */
html.kb-abierto:has(.modal-overlay.show) #bottom-nav,
html.kb-abierto:has(.modal-overlay.show) #navbar,
html.kb-abierto:has(.modal-overlay.show) .panel-barra,
html.kb-abierto:has(.modal-overlay.show) .sidebar,
html.kb-abierto:has(.modal-overlay.show) .sidebar-scrim,
html.kb-abierto:has(.modal-overlay.show) #iaBoton { visibility: hidden !important; }

/* ═══ ICONOS DE LÍNEA EN LOS TÍTULOS (3 de octubre) ═══
   Los <h1>/<h2> del programa empezaban con un emoji (📝 Textos, 📦 Productos…).
   Ahora empiezan con el DIBUJO de línea de includes/_ico.ejs: se ve igual en
   todos los teléfonos. El <svg> ya trae su width/height; acá solo se acomoda
   con la línea de texto y se le deja el aire a la derecha. */
.ico-titulo { vertical-align: -4px; margin-right: 8px; flex: none; }
h1 > .ico-titulo:first-child, h2 > .ico-titulo:first-child { display: inline-block; }

/* ═══ ICONOS DE LÍNEA SUELTOS (4 de octubre) ═══
   Los botones, pestañas y etiquetas del panel y de la tienda también dejaron
   los emojis (💾 Guardar, 🗑️ Borrar, ➕ Añadir…): ahora son el dibujo de línea
   de includes/_ico.ejs. Se les da un tamaño de texto para que queden sentados
   en la línea; el CSS de cada botón puede pisarlo si quiere más grande. */
svg.ico { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; flex: none; }
button > svg.ico:first-child, a > svg.ico:first-child { margin-right: 5px; }

/* ═══ EL MORADO DE LOS PACKS, EN TODA LA APP (TIENDA Y PANEL) ═══
   El pack completo es la compra insignia: su color tiene que ser el mismo en
   todos lados, para que se reconozca de un vistazo —la tarjeta en «Mis packs»,
   la etiqueta del producto, la ficha, el armador de paquetes del panel…—.
   Se declara acá (tokens.css lo carga TODO, tienda y administración) y se usa
   con var(), así no hay dos morados distintos conviviendo.

   Los valores salen del pack insignia de la portada: violeta + fucsia. */
:root {
  --pack-1: #7c3aed;                        /* violeta del pack */
  --pack-2: #ec4899;                        /* fucsia del pack */
  --pack-borde: rgba(124, 58, 237, 0.42);   /* borde normal */
  --pack-borde-fuerte: rgba(124, 58, 237, 0.62);
  --pack-fondo-1: rgba(124, 58, 237, 0.30); /* resplandor violeta */
  --pack-fondo-2: rgba(236, 72, 153, 0.16); /* resplandor fucsia */
  --pack-texto: #ddd6fe;                    /* lila claro para el texto */
  --pack-chip: rgba(124, 58, 237, 0.20);
}

/* La etiqueta del TIPO en el panel («🎁 Paquete»): morada como el pack.
   Lleva !important porque esas etiquetas traen su color en línea. */
.type-badge--pack {
  background: var(--pack-chip) !important;
  border: 1px solid rgba(124, 58, 237, 0.5) !important;
  color: var(--pack-texto) !important;
}
/* En las tarjetas del panel, el producto que ES un pack se marca con el borde
   morado para reconocerlo de un vistazo (la clase la pone admin/productos.js). */
.product-card.es-pack { border-color: var(--pack-borde); }
.product-card.es-pack:hover { border-color: var(--pack-borde-fuerte); }

/* ═══ EL COLOR PREMIUM DE LOS CURSOS, EN TODA LA APP ═══
   Igual que los packs con su morado, los CURSOS tienen su propio color: azul
   con un resplandor cian. Es a propósito distinto del morado de los packs (y del
   verde de «listo») para que se reconozca de un vistazo qué es un curso y qué es
   un pack, tanto en la tienda como en la administración. */
:root {
  --curso-1: #2563eb;                         /* azul del curso */
  --curso-2: #06b6d4;                         /* cian del curso */
  --curso-borde: rgba(37, 99, 235, 0.42);
  --curso-borde-fuerte: rgba(37, 99, 235, 0.62);
  --curso-fondo-1: rgba(37, 99, 235, 0.28);
  --curso-fondo-2: rgba(6, 182, 212, 0.16);
  --curso-texto: #bfdbfe;                     /* celeste claro para el texto */
  --curso-chip: rgba(37, 99, 235, 0.20);
}

/* Mis cursos (perfil): la tarjeta del curso con su azul y su resplandor. */
#courses-card .acq-item {
  border: 1px solid var(--curso-borde);
  background:
    radial-gradient(120% 130% at 0% 0%, var(--curso-fondo-1), transparent 62%),
    radial-gradient(120% 130% at 100% 100%, var(--curso-fondo-2), transparent 62%),
    var(--card);
}
#courses-card .acq-item:hover {
  border-color: var(--curso-borde-fuerte);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(37, 99, 235, 0.38), transparent 62%),
    radial-gradient(120% 130% at 100% 100%, rgba(6, 182, 212, 0.22), transparent 62%),
    var(--card);
}
#courses-card .acq-item-title a { color: #fff; }
#courses-card .course-variant-tag {
  background: rgba(37, 99, 235, 0.24);
  border-color: rgba(37, 99, 235, 0.55);
  color: var(--curso-texto);
}

/* La etiqueta del TIPO en el panel («🎓 Curso») y la tarjeta del curso. */
.type-badge--curso {
  background: var(--curso-chip) !important;
  border: 1px solid rgba(37, 99, 235, 0.5) !important;
  color: var(--curso-texto) !important;
}
.product-card.es-curso { border-color: var(--curso-borde); }
.product-card.es-curso:hover { border-color: var(--curso-borde-fuerte); }