/* Ryze · tienda web con los COLORES, el FONDO y la LETRA de la app (2026-11). La distribucion, los tamanos, las formas y
   el vidrio de la web quedan como estaban; Inicio, Cuenta y lo demas de la app quedan para la app (pedido del dueno). Los iconos se cambian en
   templates/_iconos_tienda.html y _iconos.html (herramientas/iconos_app_en_web.py).
   Los azules/violetas escritos a mano en las hojas viejas los cambia tienda-ryze-colores.css (generado). */

@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-display: swap; font-weight: 400 900; src: url("../fonts/schibsted/SchibstedGrotesk.woff2") format("woff2"); }

/* ---------- letra de la app en toda la web (solo la familia: mismos tamanos y pesos) ---------- */
body.tv2.tv2, body.tv2.tv2 :is(*, *::before, *::after) { font-family: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif !important; }
/* Schibsted con cifras tabulares separa "." y ":" de los numeros (210 . 000): cifras normales, como en el admin */
body.tv2.tv2, body.tv2.tv2 * { font-variant-numeric: normal !important; }
/* la letra de la app es un poco mas ancha: las etiquetas en mayuscula ("SOLO POR TIEMPO LIMITADO") siguen en un renglon */
body.tv2.tv2 .tag { letter-spacing: .02em; }

/* ---------- paleta Oceano tropical (frontend/ryze-pwa/src/styles/tokens.css) ---------- */
body.tv2.tv2 {
  --ra-suelo: #f2fbfd; --ra-superficie-2: #e3f5f9; --ra-tinta: #072b36; --ra-tinta-2: #3f5f69;
  --ra-curva: rgba(7, 43, 54, .13); --ra-curva-2: rgba(7, 43, 54, .2); --ra-sendero: #ffc93c; --ra-sobre-sendero: #072b36;
  --ra-premium: #0a6c7f; --ra-arena: #fff0b8; --ra-terreno: .22;
  --bg: var(--ra-suelo); --bg2: var(--ra-suelo); --tx: var(--ra-tinta); --tx2: var(--ra-tinta-2); --tx3: #4d6d77;
  --line-2: var(--ra-curva-2); --yel: var(--ra-premium); --yel-ink: #ffffff; --cy: var(--ra-premium);
  --ok: #117a56; --err: #c0392b;
  --color-primary: var(--ra-premium); --color-primary-dark: var(--ra-tinta); --color-primary-soft: var(--ra-superficie-2);
  --color-text: var(--ra-tinta); --color-text-secondary: var(--ra-tinta-2); --color-text-muted: var(--ra-tinta-2);
  --color-premium: var(--ra-premium); --acc: var(--ra-premium); --acc2: var(--ra-premium); --vio: var(--ra-premium);
  --grad: linear-gradient(135deg, #0a6c7f, #0b5566); --rf-btn: var(--ra-tinta); --rf-accent: var(--ra-premium);
  /* tonos de las tarjetas de la portada (eran azul/rosa/verde): los suaves de la app (liquen, arena, cielo) */
  --lg-a: 196, 238, 245; --lg-b: 255, 240, 184; --lg-c: 209, 240, 232; --tema-rgb: 7, 43, 54;
  background: var(--ra-suelo); color: var(--ra-tinta);
}
html.dark body.tv2.tv2 {
  --ra-suelo: #061d24; --ra-superficie-2: #11353f; --ra-tinta: #e6f6fa; --ra-tinta-2: #9dbcc6;
  --ra-curva: rgba(214, 240, 246, .12); --ra-curva-2: rgba(214, 240, 246, .2); --ra-premium: #4fd0e4; --ra-arena: #3a3216; --ra-terreno: .12;
  --tx3: #9dbcc6; --yel-ink: #052129; --ok: #6fdcb2; --err: #ff8f7f; --grad: linear-gradient(135deg, #0a6c7f, #075566);
  --lg-a: 15, 58, 68; --lg-b: 58, 50, 22; --lg-c: 18, 56, 58;
}
body.tv2.tv2 a:not([class]) { color: var(--ra-premium); }
body.tv2.tv2 :focus-visible { outline-color: var(--ra-sendero); }

/* ---------- fondo: el suelo con curvas de nivel de la app (sin las manchas de color) ---------- */
body.tv2.tv2 .fondo { background: var(--ra-suelo) !important; }
body.tv2.tv2 .fondo .blob { display: none; }
body.tv2.tv2 .fondo::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--ra-terreno); background-size: 620px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520' fill='none' stroke='%2314302a' stroke-width='0.9'%3E%3Cpath d='M260 70c90 0 170 50 175 140s-60 150-160 165S70 330 80 230 170 70 260 70Z'/%3E%3Cpath d='M262 110c66 0 125 38 128 104s-46 112-118 122-150-30-144-104 68-122 134-122Z'/%3E%3Cpath d='M264 150c44 0 82 26 84 70s-32 74-80 80-98-20-94-68 46-82 90-82Z'/%3E%3Cpath d='M-20 420c80-30 140 20 220 10s120-70 200-60 120 60 140 50'/%3E%3Cpath d='M-20 470c80-30 150 26 230 14s130-66 210-56 100 50 120 44'/%3E%3C/svg%3E"); }
html.dark body.tv2.tv2 .fondo::after { filter: invert(1); }
@media (prefers-reduced-transparency: reduce) { body.tv2.tv2 .fondo::after { display: none; } }

/* ---------- colores de la app en los elementos (solo color: misma forma y tamano) ---------- */
body.tv2.tv2 .logo b { background: var(--ra-tinta); color: var(--ra-suelo); box-shadow: none; }
/* el boton principal es amarillo como en la app */
body.tv2.tv2 :is(.btn-pri, .boton-confirmar, .pedido-boton-principal, .info-boton:not(.cp-secundario):not(.info-boton-suave), .seguimiento-boton, .producto-boton) {
  background: var(--ra-sendero) !important; color: var(--ra-sobre-sendero) !important; }
body.tv2.tv2 :is(.btn-pri, .boton-confirmar, .pedido-boton-principal, .info-boton:not(.cp-secundario):not(.info-boton-suave), .seguimiento-boton, .producto-boton):hover { background: #ffd35c !important; }
body.tv2.tv2 :is(.btn-pri, .boton-confirmar, .pedido-boton-principal, .info-boton, .seguimiento-boton, .producto-boton):disabled {
  background: color-mix(in srgb, var(--ra-sendero) 45%, var(--ra-superficie-2)) !important; color: color-mix(in srgb, var(--ra-sobre-sendero) 70%, transparent) !important; }
/* portadas de pagina: el verde azulado Premium de la app (en oscuro tambien, el cian encandila en un bloque grande) */
body.tv2.tv2 .hero-info, html.dark body.tv2.tv2 .hero-info { background: #0a6c7f; }
body.tv2.tv2 .hero-info :is(h1, p) { color: #ffffff; -webkit-text-fill-color: currentColor; }
/* barra de abajo del celular: la seccion activa con el amarillo de la app */
body.tv2.tv2 .nav-m a[aria-current="page"] { background: var(--ra-arena); color: var(--ra-tinta); }
html.dark body.tv2.tv2 .nav-m a[aria-current="page"] { background: var(--ra-sendero); color: var(--ra-sobre-sendero); }
/* barra del carrito: oscura con el boton amarillo */
body.tv2.tv2 .cartbar { background: var(--ra-tinta); color: var(--ra-suelo); }
body.tv2.tv2 .cartbar span.go { background: var(--ra-sendero); color: var(--ra-sobre-sendero); }
html.dark body.tv2.tv2 .cartbar { background: var(--ra-superficie-2); color: var(--ra-tinta); }
/* campos */
body.tv2.tv2 :is(input, select, textarea):focus { border-color: var(--ra-premium); }
body.tv2.tv2 :is(input[type=checkbox], input[type=radio]) { accent-color: var(--ra-premium); }

/* ---------- pestanas seleccionadas (Mi GO Premium): antes el texto era del mismo color que el fondo ---------- */
body.tv2.tv2 .cp-tabs a[aria-current="page"] { background: var(--ra-premium); color: #ffffff; }
html.dark body.tv2.tv2 .cp-tabs a[aria-current="page"] { color: #052129; }        /* en oscuro el fondo es cian claro: texto oscuro */
body.tv2.tv2 .cp-tabs a[aria-current="page"] * { color: inherit; }

/* ---------- ajuste de distribucion pedido por el dueno (2026-11-07) ---------- */
/* Pokemonedas en dos columnas en el celular, igual que Espacio Pokemon y Espacio Mochila (.esp-sub .grid) */
@media (max-width: 560px) {
  body.tv2.tv2 #pokemonedas .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ---------- aviso para quien abre la app VIEJA: instalar la nueva (templates/_base_tienda.html, static/js/pwa.js) ---------- */
.aviso-nueva-app { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--ra-suelo, #f2fbfd) 82%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.aviso-nueva-app[hidden] { display: none; }
.aviso-nueva-app .ana-in { width: min(440px, 100%); padding: 26px 22px 20px; border-radius: 28px; display: grid; gap: 12px; text-align: left; }
.aviso-nueva-app h2 { margin: 2px 0 0; font-size: 24px; }
.aviso-nueva-app p, .aviso-nueva-app ol { margin: 0; color: var(--tx2); line-height: 1.5; }
.aviso-nueva-app ol { padding-left: 20px; display: grid; gap: 6px; }
.aviso-nueva-app .btn { width: 100%; justify-content: center; }
.aviso-nueva-app small { color: var(--tx3); text-align: center; }
html.con-aviso-app body { overflow: hidden; }

/* ---------- 2026-11-07: categoria elegida y boton de WhatsApp legibles en claro y oscuro ---------- */
body.tv2.tv2 .cat-nav a.on, body[data-page].tv2.tv2 .cat-nav a.on { background: #072b36; color: #ffffff; box-shadow: none; }
html.dark body.tv2.tv2 .cat-nav a.on, html.dark body[data-page].tv2.tv2 .cat-nav a.on { background: #4fd0e4; color: #052129; }
body.tv2.tv2 .boton-whatsapp-flotante { background: #072b36; color: #ffffff; }
html.dark body.tv2.tv2 .boton-whatsapp-flotante { background: #4fd0e4; color: #052129; }
/* "Mas" elegido en la barra de abajo: el mismo amarillo que las otras secciones (antes un gris apagado) */
body.tv2.tv2 .nav-m .nm-more.on { background: var(--ra-arena); color: var(--ra-tinta); box-shadow: none; }
html.dark body.tv2.tv2 .nav-m .nm-more.on { background: var(--ra-sendero); color: var(--ra-sobre-sendero); }