/* ==========================================================================
   INTERIOR — la app por dentro, con el mismo lenguaje que la portada.

   Va DESPUÉS de app.css y solo toca lo que está dentro de la sesión (.app,
   las ventanas y el modo gimnasio): la portada y la entrada no cambian.
   Quitar el <link> de index.html devuelve el interior a como estaba.

   La idea, en cuatro cosas:
   1. Cada sección tiene su color (--acc) y ese color es luz, no pintura: un
      resplandor que respira arriba de la pantalla, el icono, la pastilla de
      la barra. Las tarjetas son blancas; los datos mandan.
   2. Una pieza estrella por pantalla (la tarjeta de «Hoy», la del panel): en
      oscuro, con brillos de su color, tipografía grande y el botón en claro.
   3. Todo lo que se toca contesta: sube, se ilumina donde está el dedo o el
      ratón, se hunde al pulsar.
   4. Todo lo que es dato se mueve para que se mire: cifras que suben desde
      cero, anillos que se dibujan, barras que se llenan al aparecer.
   Y todo se apaga con prefers-reduced-motion, al final del fichero.
   ========================================================================== */

/* --- El color de cada sección ----------------------------------------------
   Registrado como <color> para que, al cambiar de sección, el resplandor y
   los acentos se fundan de uno a otro en vez de saltar. */
@property --acc     { syntax:'<color>'; inherits:true; initial-value:#22A05A; }
@property --acc-luz { syntax:'<color>'; inherits:true; initial-value:#8FE3B0; }
@property --acc-2   { syntax:'<color>'; inherits:true; initial-value:#2E6E8C; }

.app {
  --acc:#22A05A; --acc-luz:#8FE3B0; --acc-2:#2E6E8C;
  --tinta:#0D1210;
  --r-card:24px;
  --sombra-card:0 1px 2px rgba(16,20,19,.04), 0 16px 36px -24px rgba(16,20,19,.28);
  --sombra-card-alta:0 2px 4px rgba(16,20,19,.05), 0 30px 60px -28px rgba(16,20,19,.38);
  --muelle:cubic-bezier(.34,1.56,.64,1);
  transition:--acc .7s var(--curva), --acc-luz .7s var(--curva), --acc-2 .7s var(--curva);
}
.app[data-seccion="hoy"],  .app[data-seccion="panel"], .app[data-seccion="recordatorios"],
.app[data-seccion="plataforma"]         { --acc:#22A05A; --acc-luz:#8FE3B0; --acc-2:#2E8C7A; }
.app[data-seccion="agenda"], .app[data-seccion="reservar"]
                                         { --acc:#3D7BD9; --acc-luz:#A9C8F5; --acc-2:#6B5CD6; }
.app[data-seccion="clientes"], .app[data-seccion="progreso"]
                                         { --acc:#7B5CC4; --acc-luz:#CDB6F2; --acc-2:#C2549A; }
.app[data-seccion="rutinas"], .app[data-seccion="plan"]
                                         { --acc:#1F8FB0; --acc-luz:#8FD6EA; --acc-2:#3D7BD9; }
.app[data-seccion="ejercicios"]          { --acc:#139C86; --acc-luz:#7FE3D2; --acc-2:#22A05A; }
.app[data-seccion="cobros"], .app[data-seccion="comer"]
                                         { --acc:#D9822B; --acc-luz:#F7C58F; --acc-2:#D8573C; }
.app[data-seccion="constantes"]          { --acc:#E84057; --acc-luz:#FF97A4; --acc-2:#D9822B; }
.app[data-seccion="perfil"]              { --acc:#5C6F66; --acc-luz:#BFD0C7; --acc-2:#3D7BD9; }

/* La caja de cada pantalla hereda el de su sección (las capas de app.css le
   ponían el suyo propio por clase .pantalla-X). */
.app #pantalla, .app #pantalla[class] { --acc:inherit; --acc-luz:inherit; --acc-2:inherit;
  --acc-suave:color-mix(in srgb, var(--acc) 12%, transparent); }

/* En oscuro, el acento que se lee es la versión con luz. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .app {
    --tinta:#070A09;
    --sombra-card:0 1px 2px rgba(0,0,0,.45), 0 18px 40px -24px rgba(0,0,0,.8);
    --sombra-card-alta:0 2px 4px rgba(0,0,0,.5), 0 30px 60px -26px rgba(0,0,0,.9);
  }
}
:root[data-tema="oscuro"] .app {
  --tinta:#070A09;
  --sombra-card:0 1px 2px rgba(0,0,0,.45), 0 18px 40px -24px rgba(0,0,0,.8);
  --sombra-card-alta:0 2px 4px rgba(0,0,0,.5), 0 30px 60px -26px rgba(0,0,0,.9);
}
/* El acento como TEXTO: en claro el color tal cual; en oscuro, el de luz. */
.app { --acc-texto:var(--acc); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .app { --acc-texto:var(--acc-luz); } }
:root[data-tema="oscuro"] .app { --acc-texto:var(--acc-luz); }

/* --- El fondo ---------------------------------------------------------------
   Papel quieto, y arriba de cada pantalla un resplandor de su color que
   respira despacio y se funde hacia abajo. Pasa por detrás de la cabecera de
   cristal, que se tiñe sola. */
html:has(.app) body::before { opacity:.45; }
.app .principal { position:relative; overflow-x:clip; isolation:isolate; }
.app .principal::before, .app .principal::after {
  content:""; position:absolute; z-index:-1; pointer-events:none; border-radius:50%;
  filter:blur(60px);
}
.app .principal::before {
  width:min(720px, 90vw); height:420px; left:-8%; top:-150px;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--acc) 34%, transparent), transparent);
  animation:respira-1 16s ease-in-out infinite alternate;
}
.app .principal::after {
  width:min(560px, 80vw); height:360px; right:-6%; top:-110px;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--acc-2) 24%, transparent), transparent);
  animation:respira-2 19s ease-in-out infinite alternate;
}
@keyframes respira-1 { to { transform:translate(8%, 26px) scale(1.12); } }
@keyframes respira-2 { to { transform:translate(-10%, 40px) scale(1.18); } }

/* --- La cabecera ------------------------------------------------------------ */
.app .cabecera-web {
  background:color-mix(in srgb, var(--fondo) 62%, transparent);
  backdrop-filter:saturate(1.8) blur(20px); -webkit-backdrop-filter:saturate(1.8) blur(20px);
  border-bottom:1px solid color-mix(in srgb, var(--texto) 7%, transparent);
}
.app .marca-nombre {
  text-transform:none; font-size:16px; font-weight:700; letter-spacing:-.02em;
}
.app .cab-avatar {
  width:36px; height:36px; flex-basis:36px; border:none; color:#fff; font-weight:700;
  background:linear-gradient(135deg, var(--acc), var(--acc-2));
  box-shadow:0 0 0 2px var(--fondo), 0 0 0 3.5px color-mix(in srgb, var(--acc) 45%, transparent),
             0 8px 18px -8px color-mix(in srgb, var(--acc) 70%, transparent);
  transition:transform .4s var(--muelle), box-shadow .3s;
}
.app .cab-avatar:hover { transform:scale(1.08) rotate(-4deg); }
.app .marca-web .marca-logo { border-radius:11px; box-shadow:0 4px 12px -6px rgba(16,20,19,.3); }

/* --- El titular de cada pantalla -------------------------------------------
   Como una sección de la portada: la etiqueta con su icono, el titular
   grande y apretado, y la entradilla. Entra de nuevo en cada cambio. */
.app .titular-pagina { margin:10px 0 30px; }
.app .titular-eti {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
  padding:4px 13px 4px 4px; border-radius:99px;
  background:color-mix(in srgb, var(--acc) 9%, var(--superficie));
  border:1px solid color-mix(in srgb, var(--acc) 22%, var(--borde));
  color:var(--acc-texto); font-size:11.5px; font-weight:750; letter-spacing:.12em;
  text-transform:uppercase;
}
.app .titular-eti:empty { display:none; }
.app .titular-eti .ico-svg {
  width:26px; height:26px; padding:5px; border-radius:50%; box-sizing:border-box;
  background:linear-gradient(135deg, var(--acc), var(--acc-2)); color:#fff;
}
.app .titular-pagina h1 {
  font-size:clamp(34px, 5vw, 52px); font-weight:750; letter-spacing:-.045em; line-height:1.02;
  text-wrap:balance;
}
.app .titular-pagina h1::after { display:none; }
.app .titular-pagina .sub {
  font-size:clamp(15.5px, 1.4vw, 17.5px); color:var(--apagado); margin-top:12px; max-width:56ch;
  line-height:1.55; text-wrap:pretty;
}
.app .entra-titular > * { animation:titular-entra .8s var(--curva) backwards; }
.app .entra-titular > :nth-child(2) { animation-delay:.06s; }
.app .entra-titular > :nth-child(3) { animation-delay:.12s; }
@keyframes titular-entra { from { opacity:0; transform:translateY(16px); filter:blur(6px); } }

/* --- Las tarjetas -------------------------------------------------------------
   Blancas, esquinas generosas, sombra en capas. El color no va de fondo. */
.app #pantalla :is(.tarjeta, .quieta, .comer-mini, .ancha, .registro, .lado-tarjeta,
                   .resumen-reserva, .teja, .teja-rica, .act-card, .macro-card, .constantes,
                   .rutina-tarjeta, .tarjeta-ejercicio, .ficha-ejercicio, .proxima) {
  background:var(--superficie);
  border:1px solid color-mix(in srgb, var(--texto) 8%, transparent);
  border-radius:var(--r-card);
  box-shadow:var(--sombra-card);
  transition:transform .45s var(--curva), box-shadow .45s var(--curva), border-color .3s;
}
/* El foco de luz que sigue al ratón (vida.js pone --mx/--my). */
@media (hover:hover) {
  .app #pantalla :is(.tarjeta, .quieta, .teja, .teja-rica, .act-card, .rutina-tarjeta,
                     .tarjeta-ejercicio, .ancha):hover {
    border-color:color-mix(in srgb, var(--acc) 26%, var(--borde));
    box-shadow:var(--sombra-card-alta);
    background:
      radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
                      color-mix(in srgb, var(--acc) 7%, transparent), transparent 60%),
      var(--superficie);
  }
  .app #pantalla :is(.teja, .teja-rica, .act-card, .rutina-tarjeta, .tarjeta-ejercicio):hover {
    transform:translateY(-4px);
  }
}
.app #pantalla :is(.tarjeta-cab) {
  padding:18px 20px; border-bottom:1px solid color-mix(in srgb, var(--texto) 7%, transparent);
}
.app #pantalla .tarjeta-cab h3, .app .modal-cab h3, .velo .modal-cab h3 {
  font-size:17px; font-weight:700; letter-spacing:-.02em; padding-left:0;
}
.app .tarjeta-cab h3::before, .velo .modal-cab h3::before { display:none; }
.app #pantalla .tarjeta-pad { padding:20px; }

/* Los iconos en su pastilla: el degradado de su sección, como en la portada. */
.app #pantalla :is(.teja-rica-ico, .teja-ico) {
  width:38px; height:38px; flex:0 0 38px; border-radius:12px; display:grid; place-items:center;
  color:var(--acc-texto);
  background:linear-gradient(135deg, color-mix(in srgb, var(--acc) 22%, transparent),
                                     color-mix(in srgb, var(--acc) 8%, transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--acc) 18%, transparent);
}
.app #pantalla :is(.teja-rica-ico, .teja-ico) .ico-svg { width:19px; height:19px; }

/* --- Botones ----------------------------------------------------------------
   Una sola voz para la acción principal, en todas las pantallas: tinta con su
   brillo (en oscuro, claro). Lo de cada sección va en el color, no en el
   botón. Los demás, en pastilla con borde fino. */
.app :is(#pantalla, .lateral) .btn, .velo .btn {
  border-radius:99px; padding:10px 18px; font-weight:650; letter-spacing:-.005em;
  border:1px solid color-mix(in srgb, var(--texto) 14%, transparent);
  background:var(--superficie);
  transition:transform .35s var(--muelle), box-shadow .3s var(--curva), background .2s, border-color .2s;
}
.app :is(#pantalla, .lateral) .btn:hover, .velo .btn:hover {
  background:var(--superficie-2); border-color:color-mix(in srgb, var(--texto) 22%, transparent);
}
.app :is(#pantalla, .lateral) .btn:active, .velo .btn:active { transform:scale(.96); }
.app #pantalla .btn-s, .velo .btn-s { padding:6px 13px; font-size:13px; }
.app #pantalla .btn-p, .velo .btn-p,
.app #pantalla[class] .btn-p {
  background:var(--acento); color:var(--acento-texto); border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 10px 22px -12px rgba(16,20,19,.6);
  filter:none;
}
.app #pantalla .btn-p:hover:not(:disabled), .velo .btn-p:hover:not(:disabled) {
  background:var(--acento); transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
             0 16px 30px -14px color-mix(in srgb, var(--acc) 70%, rgba(16,20,19,.6));
}
.app #pantalla .btn-p::after, .velo .btn-p::after {
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
}
.app #pantalla .btn-fantasma { border-color:transparent; background:transparent; }
.app #pantalla .btn-peligro { border-color:transparent; background:transparent; color:var(--rojo); }
.app #pantalla .btn-peligro:hover { background:var(--rojo-suave); }

/* Chips y etiquetas */
.app #pantalla .chip, .velo .chip {
  border-radius:99px; transition:transform .3s var(--muelle), background .2s, color .2s, border-color .2s;
}
.app #pantalla .chip:active, .velo .chip:active { transform:scale(.94); }
.app #pantalla .chip.on, .app #pantalla[class] .chip.on, .velo .chip.on {
  background:var(--acento); color:var(--acento-texto); border-color:transparent;
  box-shadow:0 6px 14px -8px rgba(16,20,19,.55);
}
.app #pantalla .eti { border-radius:99px; font-weight:700; letter-spacing:.01em; }

/* Campos: foco con el verde de la marca, no el azul de iOS. */
:is(input, select, textarea):focus {
  border-color:var(--marca-clara) !important;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--marca-clara) 20%, transparent) !important;
}
::selection { background:color-mix(in srgb, var(--marca-clara) 28%, transparent); }
:root { accent-color:var(--marca-clara); }
.app #pantalla .entrada, .velo .entrada { border-radius:14px; }

/* --- La pieza estrella de la pantalla (.hero) ------------------------------
   Oscura siempre, con dos brillos de su color que se mueven despacio, la
   letra en blanco y el botón en claro: lo primero que se mira. */
.app #pantalla .hero {
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--tinta); color:#EEF3F0;
  border:1px solid rgba(255,255,255,.07); border-radius:30px;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:0 34px 70px -34px color-mix(in srgb, var(--acc) 55%, rgba(0,0,0,.6)),
             0 2px 6px rgba(0,0,0,.18);
}
.app #pantalla .hero::before, .app #pantalla .hero::after {
  content:""; position:absolute; z-index:-1; border-radius:50%; pointer-events:none;
  filter:blur(46px); animation:none;
}
.app #pantalla .hero::before {
  width:420px; height:420px; left:-140px; top:-190px; opacity:.75;
  background:radial-gradient(closest-side, var(--acc), transparent);
  animation:brillo-1 12s ease-in-out infinite alternate;
}
.app #pantalla .hero::after {
  width:360px; height:360px; right:-120px; bottom:-200px; opacity:.55;
  background:radial-gradient(closest-side, var(--acc-2), transparent);
  animation:brillo-2 15s ease-in-out infinite alternate;
}
@keyframes brillo-1 { to { transform:translate(70px, 50px) scale(1.15); } }
@keyframes brillo-2 { to { transform:translate(-60px, -40px) scale(1.2); } }
.app #pantalla .hero :is(h2, .display-2) {
  color:#fff; font-size:clamp(30px, 4.4vw, 44px); font-weight:750; letter-spacing:-.045em;
  line-height:1.04; text-wrap:balance;
}
.app #pantalla .hero :is(.saludo, .hero-pauta) { color:rgba(238,243,240,.72); }
.app #pantalla .hero :is(.encima, .encima-marca) {
  color:var(--acc-luz); font-weight:750; letter-spacing:.14em;
}
.app #pantalla .hero .chapa-viva {
  background:color-mix(in srgb, var(--acc-luz) 16%, transparent); color:var(--acc-luz);
  border:1px solid color-mix(in srgb, var(--acc-luz) 28%, transparent);
}
.app #pantalla .hero .punto-vivo { background:var(--acc-luz); }
.app #pantalla .hero :is(.hero-linea, .hero-sep) { background:rgba(255,255,255,.1); }
.app #pantalla .hero .cifra-txt .n {
  color:#fff; font-size:34px; font-weight:750; letter-spacing:-.04em;
}
.app #pantalla .hero .cifra-txt .q { color:rgba(238,243,240,.62); }
.app #pantalla .hero [data-contar].contado { color:#fff; }
.app #pantalla .hero .anillo-fondo { stroke:rgba(255,255,255,.12); }
.app #pantalla .hero .anillo-linea {
  stroke:var(--acc-luz); filter:drop-shadow(0 0 6px color-mix(in srgb, var(--acc-luz) 60%, transparent));
}
.app #pantalla .hero .dentro { color:#fff; }
/* El botón de la pieza estrella: claro, grande, con su flecha que empuja. */
.app #pantalla .hero .btn-p, .app #pantalla[class] .hero .btn-p {
  background:#fff; color:#0D1210; height:56px; border-radius:99px; font-size:17px; font-weight:750;
  box-shadow:0 14px 30px -14px color-mix(in srgb, var(--acc-luz) 90%, transparent),
             inset 0 -2px 0 rgba(0,0,0,.06);
}
.app #pantalla .hero .btn-p::before {
  content:"→"; order:2; font-size:19px; transition:transform .35s var(--muelle);
}
.app #pantalla .hero .btn-p:hover::before { transform:translateX(5px); }
.app #pantalla .hero .btn-p::after {
  background:linear-gradient(100deg, transparent, color-mix(in srgb, var(--acc-luz) 55%, transparent), transparent);
  animation:brillo-boton 3.6s var(--curva-suave) 1.2s infinite;
}
@keyframes brillo-boton { 0%, 60% { translate:-120% 0; } 100% { translate:120% 0; } }

/* --- Las tejas del panel (cifras de mando) --------------------------------- */
.app #pantalla .teja { padding:20px; }
.app #pantalla :is(.teja.verde, .teja.ambar, .teja.rojo) { background:var(--superficie); }
.app #pantalla .teja-que {
  font-size:11.5px; font-weight:750; letter-spacing:.1em; color:var(--tenue);
}
.app #pantalla .teja-cifra {
  font-size:clamp(32px, 3.4vw, 40px); font-weight:750; letter-spacing:-.05em; line-height:1.05;
  font-variant-numeric:tabular-nums; margin:10px 0 4px;
}
.app #pantalla .teja.verde .teja-ico { color:var(--verde); }
.app #pantalla .teja.ambar .teja-ico { color:var(--ambar); }
.app #pantalla .teja.rojo .teja-ico  { color:var(--rojo); }
.app #pantalla :is(.teja-barra, .meta-barra, .const-barra, .avance-barra) {
  height:7px; border-radius:99px; overflow:hidden;
  background:color-mix(in srgb, var(--texto) 8%, transparent);
}
.app #pantalla :is(.teja-barra, .meta-barra, .const-barra, .avance-barra) > i {
  display:block; height:100%; border-radius:99px; transform-origin:left center;
  background:linear-gradient(90deg, var(--acc), var(--acc-2));
  animation:barra-crece 1.3s var(--curva) .2s backwards;
}
.app #pantalla .teja.ambar .teja-barra > i { background:linear-gradient(90deg, #D9822B, #F2B066); }
.app #pantalla .teja.rojo .teja-barra > i  { background:linear-gradient(90deg, #D6453D, #F08A7E); }
@keyframes barra-crece { from { transform:scaleX(0); } }

/* Las cifras de cualquier tira de datos, grandes y apretadas. */
.app #pantalla :is(.dato .val, .tira-datos .val) {
  font-size:clamp(26px, 2.6vw, 32px); font-weight:750; letter-spacing:-.045em;
}
.app #pantalla :is(.dato .etq, .tira-datos .etq, .etq-mini) {
  letter-spacing:.1em; font-weight:750; color:var(--tenue);
}
.app #pantalla .etq-mini { color:var(--acc-texto); }

/* --- Aparecer al bajar y cifras que suben (vida.js) ------------------------ */
.app #pantalla .por-ver {
  opacity:0; transform:translateY(28px) scale(.985); filter:blur(5px);
  animation:none !important;
  transition:opacity .8s var(--curva), transform .8s var(--curva), filter .8s var(--curva);
  transition-delay:var(--retraso-ver, 0ms);
}
.app #pantalla .por-ver.visto { opacity:1; transform:none; filter:none; }
.app #pantalla .por-ver:not(.visto) :is(.teja-barra, .meta-barra, .const-barra, .avance-barra) > i {
  animation-play-state:paused;
}
.app #pantalla .contando { font-variant-numeric:tabular-nums; }

/* --- La barra de pestañas (móvil): una isla flotante ------------------------
   Despegada de los bordes, de cristal, con una píldora que se desliza de una
   pestaña a otra (app.js la coloca). */
@media (max-width:900px) {
  :root:has(.app .pestanas) { --alto-pestanas:calc(84px + env(safe-area-inset-bottom, 0px)); }
  .app .pestanas {
    left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    height:64px; padding:6px; border-radius:26px;
    background:color-mix(in srgb, var(--superficie) 78%, transparent);
    backdrop-filter:saturate(1.8) blur(22px); -webkit-backdrop-filter:saturate(1.8) blur(22px);
    border:1px solid color-mix(in srgb, var(--texto) 9%, transparent);
    box-shadow:0 18px 40px -16px rgba(16,20,19,.35), 0 2px 8px rgba(16,20,19,.08);
  }
  .app .pestana { position:relative; z-index:1; font-size:10.5px; gap:2px; }
  .app .pestana .ico { width:auto; height:28px; background:none !important; animation:none !important; }
  .app .pestana.activo { color:var(--tinte-cat, var(--acc-texto)); }
  .app .pestana.activo .ico { transform:translateY(-1px) scale(1.08); transition:transform .45s var(--muelle); }
  .app .pestana-marca {
    position:absolute; z-index:0; top:6px; bottom:6px; left:0; border-radius:20px;
    background:color-mix(in srgb, var(--tinte-marca, var(--acc)) 15%, transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tinte-marca, var(--acc)) 22%, transparent);
    transition:transform .55s var(--muelle), width .55s var(--muelle), background .4s;
    pointer-events:none;
  }
  .app .pestanas .rayas { width:18px; }
  :root:has(.app .pestanas) .barra-confirmar {
    left:12px; right:12px; bottom:var(--alto-pestanas); border-radius:22px;
    border:1px solid var(--borde);
  }
  .app .contenido { padding-top:14px; }
  .app .titular-pagina { margin:4px 0 24px; }
}

/* --- El menú lateral (ordenador) ------------------------------------------- */
.app .lateral { background:color-mix(in srgb, var(--superficie) 72%, transparent); }
.app .nav-item { border-radius:14px; font-weight:600; }
.app .lateral > .nav-marca { border-radius:14px; }

/* El color de cada sección en su icono, igual en el menú y en la barra. */
.app :is(.nav-item, .pestana)[data-ruta="panel"], .app :is(.nav-item, .pestana)[data-ruta="hoy"]
  { --n1:#22A05A; --n2:#62D08F; --tinte-cat:#22A05A; }
.app :is(.nav-item, .pestana)[data-ruta="agenda"], .app :is(.nav-item, .pestana)[data-ruta="reservar"]
  { --n1:#3D7BD9; --n2:#7FA9EE; --tinte-cat:#3D7BD9; }
.app :is(.nav-item, .pestana)[data-ruta="clientes"], .app :is(.nav-item, .pestana)[data-ruta="progreso"]
  { --n1:#7B5CC4; --n2:#AC91E8; --tinte-cat:#7B5CC4; }
.app :is(.nav-item, .pestana)[data-ruta="rutinas"], .app :is(.nav-item, .pestana)[data-ruta="plan"]
  { --n1:#1F8FB0; --n2:#62C0DB; --tinte-cat:#1F8FB0; }
.app :is(.nav-item, .pestana)[data-ruta="ejercicios"] { --n1:#139C86; --n2:#52CDB7; --tinte-cat:#139C86; }
.app :is(.nav-item, .pestana)[data-ruta="cobros"], .app :is(.nav-item, .pestana)[data-ruta="comer"]
  { --n1:#D9822B; --n2:#F2B066; --tinte-cat:#D9822B; }
.app :is(.nav-item, .pestana)[data-ruta="constantes"] { --n1:#E84057; --n2:#FF8A96; --tinte-cat:#E84057; }
.app :is(.nav-item, .pestana)[data-ruta="perfil"] { --n1:#5C6F66; --n2:#93A79D; --tinte-cat:#5C6F66; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .app .pestana.activo { color:var(--n2, var(--acc-luz)); }
}
:root[data-tema="oscuro"] .app .pestana.activo { color:var(--n2, var(--acc-luz)); }

/* --- Ventanas: hoja que sube desde abajo en el móvil ----------------------- */
.velo { backdrop-filter:blur(8px) saturate(1.2); -webkit-backdrop-filter:blur(8px) saturate(1.2); }
.velo .modal {
  border-radius:28px; border:1px solid color-mix(in srgb, var(--texto) 8%, transparent);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55);
  animation:ventana-sube .5s var(--muelle, cubic-bezier(.34,1.56,.64,1));
}
@keyframes ventana-sube { from { opacity:0; transform:translateY(40px) scale(.97); } }
@media (max-width:900px) {
  .velo .modal { border-radius:28px 28px 0 0; padding-top:6px; }
  .velo .modal::before {
    content:""; display:block; width:40px; height:5px; border-radius:5px; margin:4px auto 2px;
    background:color-mix(in srgb, var(--texto) 18%, transparent);
  }
}

/* --- Avisos flotantes (toasts) ---------------------------------------------- */
.avisos-flotantes > * {
  border-radius:18px !important; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.45) !important;
  animation:aviso-entra .55s var(--muelle, cubic-bezier(.34,1.56,.64,1)) !important;
}
@keyframes aviso-entra { from { opacity:0; transform:translateY(-16px) scale(.94); } }

/* --- Confeti (vida.js · celebrar) ------------------------------------------- */
.confeti { position:fixed; inset:0; pointer-events:none; z-index:300; overflow:hidden; }
.confeti i {
  position:absolute; display:block; will-change:transform, opacity;
  animation:confeti var(--dura) cubic-bezier(.2,.65,.3,1) forwards;
}
@keyframes confeti {
  0%   { transform:translate(-50%, -50%) rotate(0); opacity:1; }
  35%  { transform:translate(calc(-50% + var(--dx) * .6), calc(-50% + var(--dy))) rotate(calc(var(--gira) * .4)); opacity:1; }
  100% { transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 640px)) rotate(var(--gira)); opacity:0; }
}

/* --- Menos movimiento -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .app, .app * { transition-duration:.01ms !important; }
  .app .principal::before, .app .principal::after, .app #pantalla .hero::before,
  .app #pantalla .hero::after, .app #pantalla .hero .btn-p::after,
  .app .entra-titular > *, .app #pantalla :is(.teja-barra, .meta-barra, .const-barra, .avance-barra) > i,
  .velo .modal, .avisos-flotantes > * { animation:none !important; }
  .app #pantalla .por-ver { opacity:1; transform:none; filter:none; }
  .confeti { display:none; }
}

/* --- Retoques del panel: tejas sin galón y barras de la semana con luz ---- */
.app #pantalla .teja::before { display:none; }
.app #pantalla .barra-valor {
  border-radius:10px 10px 5px 5px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--acc) 62%, #fff), var(--acc));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  animation-delay:calc(.15s + var(--i, 0) * 70ms);
}
.app #pantalla .barra-col.hoy .barra-valor {
  background:linear-gradient(180deg, var(--acc-2), var(--acc));
  box-shadow:0 12px 26px -10px color-mix(in srgb, var(--acc) 85%, transparent),
             inset 0 1px 0 rgba(255,255,255,.3);
}
.app #pantalla .barra-tope {
  border-radius:10px 10px 5px 5px; background:color-mix(in srgb, var(--texto) 6%, transparent);
}
.app #pantalla .barra-col.hoy .barra-etq { color:var(--acc-texto); font-weight:800; }
.app #pantalla .barra-cifra { font-weight:750; color:var(--texto); }
.app #pantalla .leyenda-barras .lleno { background:var(--acc); }
.app #pantalla .teja-chispa { color:var(--acc-texto); }

/* Repintado de fondo del panel y la agenda: nada se anima, se queda quieto. */
.app #pantalla.sin-animar, .app #pantalla.sin-animar * { animation:none !important; }