/* MAINEVOLVE · estilos de la app pública (Fase 0)
   - Estilo «fitness»: el Liquid Glass fuego de app.css (no cambia).
   - Estilo «salud»: [data-estilo="salud"] → claro y limpio, tarjetas sólidas, el fuego solo como acento; más legible.
   - Modo sencillo: [data-sencillo] → letra y botones grandes, menos elementos (para mayores y principiantes).
   - Evo, la mascota de ADN (js/mascota.js). */

/* ═════════ ESTILO SALUD · CLARO ═════════ */
:root[data-estilo='salud'] {
  --glass-bg: #ffffff;
  --glass-bg-strong: #ffffff;
  --glass-border: rgba(40, 20, 10, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0);
  --glass-sheen: rgba(255, 255, 255, 0);
  --glass-shadow: 0 1px 2px rgba(70, 30, 10, 0.05), 0 10px 30px rgba(70, 30, 10, 0.07);
  --glass-blur: 0px;
  --glass-saturate: 100%;
  --glass-solid: #ffffff;
  --fill: #f5efea;
  --fill-hover: #efe5dd;
  --fill-inset: inset 0 0 0 rgba(0, 0, 0, 0);
  --hairline: rgba(40, 20, 10, 0.08);
  --modal-tint: rgba(255, 255, 255, 0.96);
  --scrim: rgba(40, 20, 10, 0.32);
  --option-bg: #ffffff;
  --radius-card: 22px;

  --text: #1d1813;
  --muted: #554c45;
  --faint: #8a8079;
  --accent-text: #c2410c;
  --up: #12804a;
  --down: #c41d2e;
  --grad-text: linear-gradient(90deg, #e2470f, #c81e2e);

  --bg: #fbf7f3;
  --bg-art:
    radial-gradient(40vw 30vw at 100% 0%, rgba(255, 120, 50, 0.13), transparent 70%),
    radial-gradient(36vw 28vw at 0% 100%, rgba(235, 49, 65, 0.08), transparent 70%);
  --chart-grid: rgba(0, 0, 0, 0.06);
  --chart-tick: #6b625b;
  --chart-point: #fff;
  color-scheme: light;
}
/* ═════════ ESTILO SALUD · OSCURO ═════════ */
:root[data-estilo='salud'][data-theme='dark'] {
  --glass-bg: #1c191a;
  --glass-bg-strong: #211d1e;
  --glass-border: rgba(255, 255, 255, 0.07);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.25);
  --glass-solid: #1c191a;
  --fill: #262123;
  --fill-hover: #302a2c;
  --hairline: rgba(255, 255, 255, 0.07);
  --modal-tint: rgba(28, 25, 26, 0.98);
  --scrim: rgba(0, 0, 0, 0.6);
  --option-bg: #1c191a;
  --text: #f5f1ee;
  --muted: #c2bab3;
  --faint: #8d847d;
  --accent-text: #ff8a4c;
  --up: #4ade80;
  --down: #ff7a85;
  --grad-text: linear-gradient(90deg, #ff8a3d, #ff5a64);
  --bg: #121011;
  --bg-art: radial-gradient(40vw 30vw at 100% 0%, rgba(255, 90, 31, 0.12), transparent 70%);
  --chart-grid: rgba(255, 255, 255, 0.06);
  --chart-tick: #8f8f8f;
  --chart-point: #000;
  color-scheme: dark;
}
/* En «salud» los títulos secundarios y botones usan la letra de texto (más legible que Bebas en mayúsculas) */
:root[data-estilo='salud'] h2, :root[data-estilo='salud'] h3 { font-family: var(--font); font-weight: 700; text-transform: none; letter-spacing: -0.01em; line-height: 1.2; }
:root[data-estilo='salud'] h2 { font-size: 20px; }
:root[data-estilo='salud'] h3 { font-size: 17px; }
:root[data-estilo='salud'] .btn { font: 600 15px/1 var(--font); text-transform: none; letter-spacing: 0; }
:root[data-estilo='salud'] .btn:not(.icon) { padding: 13px 22px; }
:root[data-estilo='salud'] .btn.sm:not(.icon) { font-size: 14px; padding: 9px 15px; }
:root[data-estilo='salud'] .card::before, :root[data-estilo='salud'] .kpi::before { display: none; }
:root[data-estilo='salud'] .kpi .label, :root[data-estilo='salud'] .label-caps { letter-spacing: 0.08em; }

/* ═════════ MODO SENCILLO ═════════ */
:root[data-sencillo] body { font-size: 18px; line-height: 1.5; }
:root[data-sencillo] h1 { font-size: 46px; }
:root[data-sencillo] h2 { font-size: 24px; }
:root[data-sencillo] .btn { min-height: 56px; font-size: 19px; padding: 16px 26px; }
:root[data-sencillo] .small { font-size: 16px; }
:root[data-sencillo] .card { padding: 24px; }
:root[data-sencillo] .no-sencillo { display: none !important; }
:root:not([data-sencillo]) .solo-sencillo { display: none !important; }

/* ═════════ EVO (mascota ADN) ═════════ */
.mascota { display: inline-block; width: var(--m-ancho); height: var(--m-alto); flex-shrink: 0; line-height: 0; vertical-align: bottom; filter: drop-shadow(0 6px 14px rgba(237, 92, 35, 0.32)); }
.mascota svg { width: 100%; height: 100%; overflow: visible; }
.mascota--n4 { filter: drop-shadow(0 8px 20px rgba(237, 92, 35, 0.48)); }
.mascota--n5 { filter: drop-shadow(0 10px 26px rgba(251, 140, 11, 0.6)); }
.mascota--triste { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18)) saturate(0.5) brightness(0.97); }
.mascota--dormida { filter: drop-shadow(0 4px 10px rgba(237, 92, 35, 0.2)) saturate(0.8); }
.mascota .m-atras { opacity: 0.55; }
.mascota .m-peldanos line { stroke: #fbbb0b; }
.mascota .m-peldanos line:nth-child(even) { stroke: #ff8a1f; }

.mascota .m-todo { transform-origin: 60px 210px; animation: evo-balanceo 3.6s ease-in-out infinite; }
.mascota .m-ojos { transform-origin: 60px 56px; animation: evo-parpadeo 4.6s infinite; }
.mascota .m-peldano { animation: evo-peldano 2.4s ease-in-out infinite; }
.mascota .m-flecha { transform-origin: 60px 16px; animation: evo-flecha 3.6s ease-in-out infinite; }
.mascota--feliz .m-todo { animation: evo-salto 0.9s cubic-bezier(0.34, 1.4, 0.64, 1) infinite; }
.mascota--feliz .m-flecha { animation: evo-flecha-feliz 0.45s ease-in-out infinite alternate; }
.mascota--feliz .m-destello { transform-box: fill-box; transform-origin: center; animation: evo-destello 1.8s ease-in-out infinite; }
.mascota--habla .m-boca-habla { transform-box: fill-box; transform-origin: center; animation: evo-habla 0.34s ease-in-out infinite alternate; }
.mascota--habla .m-todo { animation: evo-asiente 2.4s ease-in-out infinite; }
.mascota--triste .m-todo { animation-duration: 6s; }
.mascota--triste .m-flecha { transform: rotate(78deg); animation: none; }
.mascota--dormida .m-todo { animation-duration: 6s; }
.mascota--dormida .m-zetas { animation: evo-zetas 3s ease-in-out infinite; }
.mascota .m-brasa { transform-box: fill-box; transform-origin: center; animation: evo-brasa 2.6s ease-in infinite; opacity: 0; }

@keyframes evo-balanceo { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-2.2deg); } }
@keyframes evo-asiente { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(1.6deg) translateY(-2px); } }
@keyframes evo-parpadeo { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } }
@keyframes evo-peldano { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes evo-flecha { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-6deg); } }
@keyframes evo-flecha-feliz { from { transform: rotate(-8deg) translateY(1px); } to { transform: rotate(6deg) translateY(-3px); } }
@keyframes evo-salto { 0%, 100% { transform: translateY(0) scale(1, 1); } 35% { transform: translateY(-9px) scale(0.98, 1.03); } 70% { transform: translateY(0) scale(1.03, 0.97); } }
@keyframes evo-destello { 0%, 100% { transform: scale(0.2); opacity: 0; } 45% { transform: scale(1); opacity: 1; } 70% { transform: scale(0.8); opacity: 0.6; } }
@keyframes evo-habla { from { transform: scaleY(0.35); } to { transform: scaleY(1.05); } }
@keyframes evo-zetas { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-5px); opacity: 1; } }
@keyframes evo-brasa { 0% { transform: translateY(8px) scale(0.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-30px) scale(0.2); opacity: 0; } }

/* Bocadillo de Evo */
.mascota-dice { display: flex; align-items: flex-end; gap: 10px; }
.mascota-bocadillo { position: relative; margin: 0 0 12px; padding: 13px 16px; border-radius: 20px 20px 20px 6px; background: var(--fill); border: 1px solid var(--glass-border); font-size: 15px; line-height: 1.45; color: var(--text); max-width: 46ch; }
:root[data-sencillo] .mascota-bocadillo { font-size: 19px; }

@media (prefers-reduced-motion: reduce) {
  .mascota *, .mascota .m-todo { animation: none !important; }
}

/* Barra inferior en modo sencillo: iconos y textos más grandes */
@media (max-width: 760px) {
  :root[data-sencillo] .bottom-nav a, :root[data-sencillo] .bottom-nav button { font-size: 12px; letter-spacing: 0.04em; padding: 9px 0; }
  :root[data-sencillo] .bottom-nav a svg, :root[data-sencillo] .bottom-nav button svg { width: 26px; height: 26px; }
}

/* ═════════ SÍMBOLO DEL LOGO ═════════ */
.simbolo { display: inline-block; width: var(--s-tam); height: var(--s-tam); flex-shrink: 0; line-height: 0; }
.simbolo img { width: 100%; height: 100%; object-fit: contain; }
.simbolo-dice { display: flex; align-items: flex-start; gap: 12px; }
.simbolo-avatar { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--fill); border: 1px solid var(--glass-border); flex-shrink: 0; padding: 4px; }
.simbolo-avatar .simbolo { width: 100%; height: 100%; }
.simbolo-bocadillo { margin: 0; padding: 12px 15px; border-radius: 6px 18px 18px 18px; background: var(--fill); border: 1px solid var(--glass-border); font-size: 15px; line-height: 1.45; color: var(--text); }
:root[data-sencillo] .simbolo-bocadillo { font-size: 19px; }
:root[data-sencillo] .simbolo-avatar { width: 64px; height: 64px; }