/* =============================================================================
   home-progreso.css — Portada (24-sep, elegido por Axel en Maqueta_Menu_24sep):
   · B  tu progreso en cada tarjeta: barra dorada en el borde de abajo + etiqueta
        corta arriba a la derecha (lo pinta js/home-progreso.js)
   · A  "Sigue donde lo dejaste": tarjeta blanca bajo el saludo
   · menú lateral: banner Premium, valores en "Tu progreso", grupo "Cuenta"
   ========================================================================== */

/* --- B · progreso en la tarjeta --- */
.app-feature-card .hp-borde { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; z-index: 3; background: rgba(255,255,255,.15); pointer-events: none; }
.app-feature-card .hp-borde i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FFE58A, #F5B82E); border-radius: 0 3px 3px 0; transition: width 900ms cubic-bezier(.22,1,.36,1); }
.app-feature-card .hp-etq {
    position: absolute; top: .6rem; right: .7rem; z-index: 3; pointer-events: none;
    font-size: .68rem; font-weight: 900; color: #3B2A00; white-space: nowrap;
    background: linear-gradient(135deg, #FFE58A, #F5B82E); padding: .18rem .5rem; border-radius: 99px;
    box-shadow: 0 3px 8px rgba(0,0,0,.25);
    animation: hp-etq 420ms cubic-bezier(.2,1.4,.4,1) 300ms both;
}
@keyframes hp-etq { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* --- C · Sigue donde lo dejaste: BARRA FLOTANTE abajo (Axel 24-sep eligió la C:
   la de arriba empujaba las tarjetas). Como el reproductor de Spotify: siempre a
   mano del pulgar, sin mover nada. --- */
.hp-cont {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--sai-bottom)); z-index: 40;
    display: flex; align-items: center; gap: .7rem; max-width: 496px; margin: 0 auto;
    padding: .55rem .6rem .55rem .55rem; border: 0; border-radius: 20px; cursor: pointer; text-align: left;
    background: rgba(42, 22, 80, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 12px 30px rgba(20, 10, 40, .45), 0 0 0 1px rgba(255,255,255,.06);
    font-family: inherit; animation: hp-cont 520ms cubic-bezier(.22,1.2,.36,1) 600ms both;
}
@keyframes hp-cont { from { opacity: 0; transform: translateY(120%); } to { opacity: 1; transform: none; } }
.hp-cont:active { transform: scale(.98); }
.hp-cont img { width: 44px; height: 44px; flex: none; object-fit: contain; }
.hp-cont__t { flex: 1; min-width: 0; }
.hp-cont__t small { display: block; font-size: .62rem; font-weight: 900; letter-spacing: .06em; color: #C4B5FD; text-transform: uppercase; }
.hp-cont__t b { display: block; font-size: .92rem; font-weight: 900; color: #fff; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-cont__t span { display: block; font-size: .74rem; font-weight: 700; color: #C9BBEA; margin-top: .05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-cont__go { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #A155FF, #7A2BD9); box-shadow: 0 3px 0 #4A1690; }
body.hp-con-cont #app-main { padding-bottom: calc(96px + var(--sai-bottom)); }   /* que la barra no tape la última tarjeta */
/* Fuera de la vista mientras hay algo delante (menú lateral, login, bienvenida) */
body.side-menu-open .hp-cont, body.auth-checking .hp-cont, body.auth-locked .hp-cont, body.avatar-modal-open .hp-cont { animation: none; opacity: 0; pointer-events: none; transform: translateY(120%); transition: opacity 200ms, transform 260ms; }

/* --- 4 · saludo que cambia: la palabra clave en dorado --- */
.home-hero__title .hp-dorado { color: #E0A800; }

/* --- 2 · anillo de la meta alrededor de tu perro (sustituye al círculo junto a "Path Accent") --- */
body.hp-con-anillo .goal-ring { display: none !important; }
#profile-btn { position: relative; overflow: visible; }
.hp-anillo { position: absolute; inset: -7px; pointer-events: none; }
.hp-anillo svg { width: 100%; height: 100%; overflow: visible; }
.hp-anillo circle { fill: none; stroke-width: 4; }
.hp-anillo__bg { stroke: rgba(255,255,255,.18); }
.hp-anillo__arco { stroke: #F5B82E; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.22,1,.36,1); }
.hp-anillo.is-ok .hp-anillo__arco { stroke: #FFD34D; filter: drop-shadow(0 0 4px #FFD34D); }
.hp-anillo__num { position: absolute; right: -8px; bottom: -9px; font: 900 10px/1.4 Nunito, system-ui, sans-serif; color: #3B2A00; white-space: nowrap;
    background: linear-gradient(135deg, #FFE58A, #F5B82E); border-radius: 99px; padding: 0 5px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }

/* --- 3 · orden semanal: nota del lunes + "te echa de menos" --- */
.hp-orden-nota { margin: 0 0 .5rem; font-size: .78rem; font-weight: 800; color: #7A5CB8; transition: opacity 500ms, transform 500ms; animation: hp-cont 420ms ease both; }
.hp-orden-nota.is-out { opacity: 0; transform: translateY(-4px); }
.app-feature-card .hp-echa {
    position: absolute; left: 4.6rem; bottom: .55rem; z-index: 4; pointer-events: none; white-space: nowrap;
    font: 900 .7rem Nunito, system-ui, sans-serif; color: #fff; background: rgba(255, 90, 95, .92);
    padding: .2rem .55rem; border-radius: 99px; box-shadow: 0 3px 8px rgba(0,0,0,.3);
    animation: hp-etq 420ms cubic-bezier(.2,1.4,.4,1) 500ms both;
}

/* --- 5 · tu perro reacciona (js/avatar.js) --- */
.profile-btn--salta { animation: perro-salta 520ms cubic-bezier(.3,1.5,.5,1); }
@keyframes perro-salta { 0%, 100% { transform: none; } 35% { transform: translateY(-6px) rotate(-8deg) scale(1.08); } 65% { transform: translateY(0) scale(.96); } }
/* 26-sep: el bocadillo sale a la IZQUIERDA de tu perro, en el header y con el pico
   hacia él (antes caía debajo y tapaba el saludo). La posición la pone avatar.js. */
.perro-boc {
    position: fixed; top: 0; right: 0; z-index: 110; max-width: 240px;
    background: #fff; color: #2A1650; font: 800 .86rem/1.25 Nunito, system-ui, sans-serif;
    padding: .5rem .8rem; border-radius: 16px; box-shadow: 0 10px 26px rgba(0,0,0,.25);
    opacity: 0; transform: translateY(-50%) scale(.9); transform-origin: 100% 50%; pointer-events: none;
    transition: opacity 200ms, transform 280ms cubic-bezier(.2,1.5,.4,1);
}
.perro-boc::after { content: ""; position: absolute; right: -7px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left-color: #fff; border-right-width: 0; }
.perro-boc.is-in { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.perro-boc small { display: block; margin-top: .15rem; font-size: .7rem; font-weight: 900; color: #8A2BE2; }
@media (prefers-reduced-motion: reduce) { .profile-btn--salta { animation: none; } }

/* --- Menú lateral --- */
.hp-prem {
    display: flex; align-items: center; gap: .7rem; width: 100%; margin: .2rem 0 .8rem; padding: .75rem .85rem;
    border: 0; border-radius: 16px; cursor: pointer; text-align: left; font-family: inherit;
    background: linear-gradient(135deg, #FFE58A, #F5B82E); color: #3B2A00; font-weight: 900; font-size: 1rem;
    box-shadow: 0 6px 16px rgba(245,184,46,.3);
}
.hp-prem small { display: block; font-size: .72rem; font-weight: 800; opacity: .85; }
.hp-prem__s { width: 2.2rem; height: 2.2rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.45); }
.hp-prem.is-activo { background: linear-gradient(135deg, #FFF3C4, #FFE58A); }
.side-menu-link .hp-val { margin-left: auto; font-size: .78rem; font-weight: 900; color: #C4B5FD; background: rgba(167,139,250,.14); padding: .15rem .5rem; border-radius: 99px; white-space: nowrap; }
.hp-cuenta { display: none; padding: .2rem 0 .4rem 2.6rem; }
.hp-cuenta.is-abierta { display: block; }
.hp-cuenta .side-menu-delete { margin: 0; }
.side-menu-link .hp-flecha { margin-left: auto; transition: transform 200ms; opacity: .7; }
.side-menu-link[aria-expanded="true"] .hp-flecha { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) { .hp-cont, .app-feature-card .hp-etq { animation: none; } }

/* 24-sep: "Cambiar de perro" en el menú lateral (js/avatar.js) con la foto del tuyo */
.menu-perro__foto { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; object-fit: cover; background: #F3EEFF; box-shadow: 0 0 0 2px rgba(124,58,237,.35); }

/* 28-sep: al volver de una sección, "Sigue donde lo dejaste" ya está puesta (sin esperar a la sesión ni a su entrada) */
body:not(.side-menu-open):not(.avatar-modal-open):not(.auth-locked) .hp-cont.hp-cont--ya { animation: none; opacity: 1; transform: none; pointer-events: auto; }

/* =============================================================================
   28-sep (Axel) · tres tarjetas con vida (ver extrasTarjetas en js/home-progreso.js)
   ========================================================================== */
/* Accent Correction: 15 huellas recorren el borde; las hechas en ORO, una a una */
.app-feature-card[data-target="accent-exercises"] .hp-borde { display: none; }   /* la barra fina la sustituyen las huellas */
.hp-rastro { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; }
.hp-rastro__h { fill: rgba(255, 255, 255, .16); }
.hp-rastro__h.is-on { fill: #F5B82E; filter: drop-shadow(0 0 3px rgba(245, 184, 46, .55)); animation: hp-huella 380ms cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(500ms + var(--i) * 70ms); transform-box: fill-box; transform-origin: center; }
@keyframes hp-huella { from { opacity: 0; scale: .2; } to { opacity: 1; scale: 1; } }
.app-feature-card .hp-etq { display: inline-flex; align-items: center; gap: .25rem; }
.hp-etq__h { width: 11px; height: 11px; fill: currentColor; }
/* Curso completo: un brillo dorado da la vuelta al borde */
.hp-brillo { position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 2px; pointer-events: none;
    background: conic-gradient(from var(--hp-ang, 0deg), transparent 0 70%, #FFE58A 80%, #F5B82E 86%, transparent 94%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: hp-vuelta 3.2s linear infinite; }
@property --hp-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes hp-vuelta { to { --hp-ang: 360deg; } }

/* Exercises: la PESA que se llena + contador de palabras del bloque */
.app-feature-card[data-target="exercises"] .hp-borde { display: none; }
.hp-pesa { display: flex; align-items: center; gap: 3px; margin-top: .45rem; max-width: 190px; }
.hp-pesa__disco { flex: none; width: 7px; height: 16px; border-radius: 3px; background: linear-gradient(180deg, #D8C6FF, #9B7BE8); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
.hp-pesa__barra { flex: 1; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .16); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.hp-pesa__barra i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #FFE58A, #F5B82E); transition: width 900ms cubic-bezier(.22, 1, .36, 1) 350ms; }
.hp-pesa__n { flex: none; margin-left: .45rem; font-size: .7rem; font-weight: 900; color: #FFE58A; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-pesa__n .hp-pesa__cuenta { color: #fff; }

/* Books: MODO NOCHE (luna, estrellas y azul de cuento) cuando la portada está en noche */
html[data-momento="noche"] .app-feature-card.feature-books {
    background-color: #0B1640;
    background-image:
        radial-gradient(circle at 78% 30%, rgba(255, 236, 170, .20) 0 16%, transparent 34%),
        radial-gradient(1.4px 1.4px at 22% 18%, #fff 60%, transparent 100%),
        radial-gradient(1.2px 1.2px at 42% 72%, #fff 60%, transparent 100%),
        radial-gradient(1.6px 1.6px at 58% 22%, #fff 60%, transparent 100%),
        radial-gradient(1.1px 1.1px at 12% 80%, #fff 60%, transparent 100%),
        radial-gradient(1.3px 1.3px at 50% 50%, #fff 60%, transparent 100%),
        linear-gradient(160deg, #182C6B 0%, #0B1640 60%, #070E2C 100%);
}
html[data-momento="noche"] .app-feature-card.feature-books::before {
    content: ""; position: absolute; z-index: 1; pointer-events: none;
    top: 12px; right: 112px; width: 26px; height: 26px; border-radius: 50%;
    box-shadow: -7px 4px 0 0 #FFE7A3; filter: drop-shadow(0 0 8px rgba(255, 231, 163, .7));
    transform: rotate(-18deg); background: transparent; animation: hp-luna 5s ease-in-out infinite alternate;
}
@keyframes hp-luna { to { filter: drop-shadow(0 0 14px rgba(255, 231, 163, .95)); } }
html[data-momento="noche"] .app-feature-card.feature-books::after { background: rgba(120, 150, 255, .35); opacity: .45; }
html[data-momento="noche"] .app-feature-card.feature-books .card-background-image { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)) drop-shadow(0 0 14px rgba(255, 220, 140, .35)); }
html[data-momento="noche"] .app-feature-card.feature-books .card-text::after {
    content: "Cuento de buenas noches"; display: block; margin-top: .3rem; font-size: .68rem; font-weight: 900; letter-spacing: .04em; color: #FFE7A3;
}

@media (prefers-reduced-motion: reduce) {
    .hp-rastro__h.is-on, .hp-brillo, html[data-momento="noche"] .app-feature-card.feature-books::before { animation: none; }
}
/* 28-sep: la luna junto a Freddye (el ::before de la tarjeta traía left:0 de la línea de luz) y más estrellas */
html[data-momento="noche"] .app-feature-card.feature-books::before { left: auto; right: 118px; top: 14px; bottom: auto; height: 26px; }
html[data-momento="noche"] .app-feature-card.feature-books { background-image: radial-gradient(circle at 78% 30%, rgba(255, 236, 170, .20) 0 16%, transparent 34%), radial-gradient(1.4px 1.4px at 22% 18%, #fff 60%, transparent 100%), radial-gradient(1.2px 1.2px at 42% 72%, #fff 60%, transparent 100%), radial-gradient(1.6px 1.6px at 58% 22%, #fff 60%, transparent 100%), radial-gradient(1.1px 1.1px at 12% 80%, #fff 60%, transparent 100%), radial-gradient(1.3px 1.3px at 50% 50%, #fff 60%, transparent 100%), radial-gradient(1.5px 1.5px at 33% 40%, #fff 60%, transparent 100%), radial-gradient(1.2px 1.2px at 64% 84%, #fff 60%, transparent 100%), radial-gradient(1.7px 1.7px at 70% 12%, #fff 60%, transparent 100%), radial-gradient(1.1px 1.1px at 6% 30%, #fff 60%, transparent 100%), linear-gradient(160deg, #182C6B 0%, #0B1640 60%, #070E2C 100%); }
/* 28-sep (Axel): fuera la pesa de Exercises; vuelve su barrita fina de siempre */
.app-feature-card[data-target="exercises"] .hp-borde { display: block; }
.hp-pesa { display: none; }