/* ==========================================================================
   Apps estrella (Packs y ofertas, Contra reembolso, Comentarios, Beneficio): icono propio de app, grupo
   destacado en el carril y escaparate en Inicio. Va después de sala.css y usa sus tokens.
   ========================================================================== */

/* ---- iconos de app: cada una con su marca, como en una pantalla de inicio ---- */
.app-ic { --t:28px; position:relative; flex:none; display:grid; place-items:center; width:var(--t); height:var(--t); border-radius:8px; font-style:normal;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(0,0,0,.18), 0 6px 14px -8px rgba(0,0,0,.6); isolation:isolate; }
.app-ic::before { content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:radial-gradient(120% 80% at 25% 0%, rgba(255,255,255,.35), transparent 55%); }
.app-ic svg { width:58% !important; height:58% !important; stroke:#fff !important; color:#fff !important; fill:none; stroke-width:2 !important; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.app-ic--packs { background:linear-gradient(135deg,#b9b0ff 0%,#7c6cf6 48%,#2c1ab8 100%); }
.app-ic--cod { background:linear-gradient(135deg,#ff9a1a 0%,#ff4d4d 52%,#3f5bff 100%); }
.app-ic--comentarios { background:linear-gradient(135deg,#5ef2c4 0%,#13a98a 50%,#08525f 100%); }
.app-ic--beneficio { background:linear-gradient(135deg,#e6ff6a 0%,#3fcf6e 48%,#0b6b45 100%); }
.app-ic--xl { --t:46px; border-radius:13px; }

/* punto de estado en la esquina del icono (activa / a medias) */
.app-ic[data-estado]::after { content:""; position:absolute; right:-3px; bottom:-3px; width:9px; height:9px; border-radius:50%; border:2px solid var(--lateral); background:transparent; display:none; }
.app-ic[data-estado="activa"]::after { display:block; background:#3DD994; }
.app-ic[data-estado="instalada"]::after, .app-ic[data-estado="pausa"]::after { display:block; background:#F2B544; }

/* ---- baldosas del resto del menú: mismo diseño que las apps, un degradado por familia ---- */
.nav-ic--general { background:linear-gradient(135deg,#c3c8d8 0%,#6f7690 50%,#2e3245 100%); }
.nav-ic--tienda { background:linear-gradient(135deg,#9eeaff 0%,#25a8e0 50%,#0f4f8f 100%); }
.nav-ic--crear { background:linear-gradient(135deg,#ffd27a 0%,#ff7a3d 50%,#b8300f 100%); }
.nav-ic--crecer { background:linear-gradient(135deg,#ffa8d8 0%,#e0458f 50%,#6e1458 100%); }
.nav-ic--ajustes { background:linear-gradient(135deg,#b7bccb 0%,#5d6378 50%,#272a38 100%); }
.nav-ic--meta { background:linear-gradient(135deg,#8fd0ff 0%,#0866ff 52%,#0a2a86 100%); }
.nav a.nav-app .nav-ic--meta svg { stroke-width:2.1 !important; }

/* Meta Ads va sola, en su propio sitio encima de «Tus apps»: una línea fina la separa de lo de arriba */
.nav-solo { margin:12px 0 2px; padding-top:10px; border-top:1px solid var(--rail-linea); }
.rail-compacta .nav-solo { margin:8px 0 0; padding-top:8px; }

/* ---- filas del menú (todas con baldosa, nombre y una línea de ayuda) ---- */
.nav-grupo-apps { color:#fff; opacity:.9; }
.nav-apps { margin:0 0 4px; padding:3px 0; border-radius:10px; background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  box-shadow:inset 0 0 0 1px var(--rail-linea); }
.nav a.nav-app { display:grid; grid-template-columns:28px minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:11px; row-gap:0; align-items:center;
  min-height:42px; padding:4px 8px; color:#E7E8EC; }
.nav-apps a.nav-app { margin:0 4px; }
.nav a.nav-app .app-ic { grid-row:1 / 3; grid-column:1; transition:transform .45s var(--ease-muelle), filter .25s; }
.nav a.nav-app .nav-ic { filter:saturate(.82) brightness(.94); }
.nav a.nav-app:hover .app-ic { transform:translateY(-1px) scale(1.06); }
.nav a.nav-app:hover .nav-ic, .nav a.nav-app.on .nav-ic { filter:none; }
.nav a.nav-app:hover svg, .nav a.nav-app.on svg { transform:none; }
.nav a.nav-app > span { grid-column:2; grid-row:1; align-self:end; font-weight:600; font-size:13.5px; line-height:1.2; white-space:nowrap; }
.nav a.nav-app .nav-app-hint { grid-column:2; grid-row:2; align-self:start; font-size:11.5px; line-height:1.3; color:var(--rail-tenue); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .2s, opacity .2s; }
.nav a.nav-app:hover .nav-app-hint, .nav a.nav-app.on .nav-app-hint { color:var(--rail-txt); }
.nav a.nav-app > em { grid-column:3; grid-row:1 / 3; margin:0; }
.nav a.nav-app.on { color:#fff; background:rgba(255,255,255,.075); }
.nav a.nav-app .nav-ind { left:-6px; }
.nav-apps a.nav-app .nav-ind { left:-10px; }
.nav a.nav-app:focus-visible { outline:2px solid var(--accion); outline-offset:-2px; }
.nav a.nav-app:focus-visible .nav-app-hint { color:var(--rail-txt); }
/* submenús (Tienda, Packs, Contra reembolso): el hilo sale del centro de la baldosa y el texto cae bajo el nombre */
.lateral .nav .nav-sub::before { left:22px; }
.lateral .nav .nav-sub a { min-height:30px; padding-left:47px; }
.lateral .nav .nav-sub a.on::before { left:20px; }
.lateral .nav-apps .nav-sub { margin:0 4px 4px; }
.nav-ajustes { margin-bottom:-2px; }

/* el menú se desplaza con suavidad: bordes que se funden cuando queda algo por ver arriba o abajo */
.nav-princ { overscroll-behavior:contain; scrollbar-width:thin; scroll-padding:24px 0; }
.nav-princ.mas-arriba { -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 22px); mask-image:linear-gradient(to bottom, transparent 0, #000 22px); }
.nav-princ.mas-abajo { -webkit-mask-image:linear-gradient(to top, transparent 0, #000 26px); mask-image:linear-gradient(to top, transparent 0, #000 26px); }
.nav-princ.mas-arriba.mas-abajo { -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%); }

/* pantallas bajas (portátil de ~800 px): filas y cabeceras más apretadas, la ayuda sigue en una línea */
@media (min-width:901px) and (max-height:900px) {
  .nav a.nav-app { grid-template-columns:26px minmax(0,1fr) auto; column-gap:10px; min-height:38px; padding:3px 8px; }
  .nav a.nav-app .app-ic { --t:26px; border-radius:7px; }
  .nav a.nav-app > span { font-size:13px; line-height:1.15; }
  .nav a.nav-app .nav-app-hint { font-size:11px; line-height:1.25; }
  .lateral .nav-grupo { padding:11px 10px 4px; font-size:11px; }
  .lateral .nav .nav-sub::before { left:21px; } .lateral .nav .nav-sub a { min-height:28px; padding-left:44px; } .lateral .nav .nav-sub a.on::before { left:19px; }
}

/* cifra del día junto al nombre */
.app-chip { font-style:normal; font-size:11px; font-weight:600; line-height:18px; padding:0 7px; border-radius:5px; color:var(--rail-txt); white-space:nowrap;
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); font-family:var(--cifras); font-variant-numeric:tabular-nums; }
.app-chip b { color:#fff; font-weight:700; }
.app-chip--dinero.pos { color:#3DD994; background:rgba(61,217,148,.1); box-shadow:inset 0 0 0 1px rgba(61,217,148,.22); }
.app-chip--dinero.neg { color:#FF625A; background:rgba(255,98,90,.1); box-shadow:inset 0 0 0 1px rgba(255,98,90,.24); }

/* carril plegado: solo las baldosas, centradas, con el punto de estado; el nombre sale en la etiqueta al pasar */
@media (min-width:901px) {
  .rail-compacta .nav-apps { background:none; box-shadow:none; padding:0; }
  .rail-compacta .nav a.nav-app, .rail-compacta .nav-apps a.nav-app { grid-template-columns:28px; padding:5px 0 5px 14px; margin:0; min-height:40px; }
  .rail-compacta .nav a.nav-app .app-ic { --t:28px; border-radius:8px; }
  .rail-compacta .nav a.nav-app .nav-app-hint, .rail-compacta .nav a.nav-app .app-chip { display:none; }
  .rail-compacta .nav a.nav-app > span { position:absolute; width:1px; overflow:hidden; }
  .rail-compacta .nav a.nav-app .badge { position:absolute; left:34px; top:1px; }
  .rail-compacta .nav a.nav-app .nav-ind, .rail-compacta .nav-apps a.nav-app .nav-ind { left:-6px; }
  .rail-compacta .nav-grupo-apps { font-size:0; }
}
/* cajón del móvil: filas cómodas para el dedo */
@media (max-width:900px) {
  .nav a.nav-app { min-height:52px; padding:6px 10px; }
  .nav a.nav-app .app-ic { --t:30px; }
  .nav a.nav-app { grid-template-columns:30px minmax(0,1fr) auto; }
  .lateral .nav .nav-sub a { min-height:40px; padding-left:51px; }
  .lateral .nav .nav-sub::before { left:25px; } .lateral .nav .nav-sub a.on::before { left:23px; }
}

/* ---- escaparate de Inicio ---- */
.apps-esc { margin:28px 0 8px; }
.apps-esc-cab { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.apps-esc-cab p { margin:0; color:var(--tenue); font-size:13px; }
.apps-esc-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.app-card { --c:#7c6cf6; position:relative; display:flex; flex-direction:column; gap:8px; min-width:0; padding:18px 18px 16px; border-radius:var(--r-card); background:var(--tarjeta);
  box-shadow:inset 0 0 0 1px var(--linea); overflow:hidden; isolation:isolate; transition:box-shadow .25s, transform .45s var(--ease-out); }
.app-card::before { content:""; position:absolute; inset:0 0 auto 0; height:120px; z-index:-1; opacity:.16; pointer-events:none;
  background:radial-gradient(90% 100% at 0% 0%, var(--c), transparent 70%); transition:opacity .3s; }
.app-card:hover { box-shadow:inset 0 0 0 1px var(--linea-3); transform:translateY(-2px); }
.app-card:hover::before { opacity:.26; }
.app-card--packs { --c:#7c6cf6; } .app-card--cod { --c:#ff5b2e; } .app-card--comentarios { --c:#13c39b; } .app-card--beneficio { --c:#3fcf6e; }
.app-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:4px; }
.app-card h3 { margin:0; font-size:16px; }
.app-card-que { margin:0; color:var(--suave); font-size:13px; line-height:1.45; flex:1; }
.app-estado { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--tenue); padding:3px 8px; border-radius:20px;
  background:var(--lienzo-2); white-space:nowrap; }
.app-estado i { width:6px; height:6px; border-radius:50%; background:var(--linea-3); }
.app-estado[data-estado="activa"] { color:var(--ok); background:var(--ok-claro); }
.app-estado[data-estado="activa"] i { background:var(--ok); box-shadow:0 0 0 3px var(--ok-borde); animation:app-latido 2.4s var(--ease-out) infinite; }
.app-estado[data-estado="instalada"], .app-estado[data-estado="pausa"] { color:var(--alerta); background:var(--alerta-claro); }
.app-estado[data-estado="instalada"] i, .app-estado[data-estado="pausa"] i { background:var(--alerta); }
@keyframes app-latido { 0%, 100% { box-shadow:0 0 0 0 var(--ok-borde); } 50% { box-shadow:0 0 0 4px transparent; } }
.app-card-cifra { display:flex; flex-direction:column; gap:1px; padding:10px 0 4px; border-top:1px solid var(--linea); margin-top:4px; }
.app-card-cifra b { font-family:var(--cifras); font-size:26px; font-weight:650; letter-spacing:-.02em; line-height:1.1; color:var(--tinta); font-variant-numeric:tabular-nums; }
.app-card-cifra.neg b { color:var(--error); }
.app-card-cifra small { color:var(--tenue); font-size:12px; }
.app-card-cifra.vacia b { color:var(--linea-3); }
.app-card-pend { font-style:normal; color:var(--accion); font-weight:600; }
.app-card-abrir { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin-top:6px; }
.app-card-abrir svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .3s var(--ease-out); }
.app-card-abrir:hover svg { transform:translateX(3px); }
@media (max-width:1180px) { .apps-esc-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px) {
  .apps-esc-grid { grid-template-columns:1fr; gap:10px; }
  .app-card { display:grid; grid-template-columns:46px minmax(0,1fr); column-gap:14px; row-gap:4px; padding:14px; }
  .app-card header { grid-column:1; grid-row:1 / 4; flex-direction:column; margin:0; }
  .app-card header .app-estado { display:none; }
  .app-card h3, .app-card-que, .app-card-cifra, .app-card-abrir { grid-column:2; }
  .app-card-que { font-size:12.5px; }
  .app-card-cifra { flex-direction:row; align-items:baseline; gap:8px; padding-top:8px; }
  .app-card-cifra b { font-size:20px; }
  .app-card-cifra.vacia b { display:none; }
  .app-card-abrir { width:auto; justify-self:start; min-height:0; padding:7px 14px; margin-top:4px; }
}
@media (prefers-reduced-motion:reduce) { .app-estado i { animation:none; } }

/* en las pantallas de entrar y alta, arriba del formulario */
.acc-idioma { display:inline-flex; align-items:center; gap:6px; margin-right:auto; font-size:13px; color:var(--suave); }
.acc-idioma svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.acc-idioma select { width:auto; min-width:0; padding:4px 26px 4px 8px; font-size:13px; height:auto; margin:0; background-color:transparent; }
.acc-form { position:relative; }
.acc-form .acc-idioma { position:absolute; left:18px; top:18px; margin:0; }
/* en el móvil, el idioma y el tema van encima de la tarjeta (no montados en su borde) y el aviso del idioma, en su
   sitio encima del formulario en vez de flotar tapando los campos */
@media (max-width:860px) {
  .acc-form { flex-direction:column; justify-content:flex-start; padding-top:72px; }
}
@media (max-width:560px) { .acc-lado { gap:18px; justify-content:flex-start; } .acc-lado > div > p, .acc-lado .acc-pie { display:none; } .acc-lado h2 { font-size:28px; margin:0; } }