/* CHARACTER CARD */
  /* Avatar sin anillo y a lo grande: con nivel, racha y el aro fuera, el retrato
     se queda con toda la columna. Es la inversión emocional de la app. */
  /* Avatar elástico: manda en monitor grande, se contiene en portátil para no
     comerse el pliegue. */
  /* La ficha sube un poco (menos padding arriba) para dejar sitio a la fila de
     acciones, que ocupa todo el ancho debajo del retrato y las barras. */
  .character-card{display:grid;grid-template-columns:auto 1fr;gap:14px 22px;align-items:center;padding-top:14px;}
  .char-acciones{grid-column:1 / -1;}
  .avatar-col{display:flex;align-items:center;justify-content:center;}
  /* Retrato (avatar.js): botón que abre el menú del personaje. Fondo negro de
     respaldo para que el recorte del cuadrado nunca enseñe la tarjeta. */
  .avatar-upload{
    position:relative;overflow:hidden;padding:0;font:inherit;
    width:clamp(110px,11vw,186px);height:clamp(110px,11vw,186px);
    border-radius:26px;background-color:#0b0a08;background-size:cover;background-position:center 30%;
    border:1.5px solid rgba(255,207,77,.22);display:flex;align-items:flex-end;justify-content:center;
    cursor:pointer;color:var(--dim2);text-align:center;transition:border-color .2s,box-shadow .3s,transform .15s;
  }
  .avatar-upload:active{transform:scale(.97);}
  .avatar-upload:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
  /* Nombre de la forma sobre un degradado: se lee sin tapar la cara. */
  .avatar-tag{
    width:100%;padding:18px 4px 7px;pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));
    font-family:var(--font-stat);font-size:9.5px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
    color:var(--gold);text-shadow:0 1px 4px rgba(0,0,0,.9);
  }
  /* Marco por tier: el brillo crece con el progreso, no con la imagen. */
  .avatar-t1{border-color:rgba(255,207,77,.22);}
  .avatar-t2{border-color:rgba(255,207,77,.45);box-shadow:0 0 12px rgba(255,190,60,.18);}
  .avatar-t3{border-color:rgba(255,207,77,.65);box-shadow:0 0 18px rgba(255,190,60,.28);}
  .avatar-t4{border-color:rgba(255,207,77,.9);box-shadow:0 0 26px rgba(255,190,60,.42),inset 0 0 18px rgba(255,190,60,.18);animation:avatarAura 3.2s ease-in-out infinite;}
  .avatar-t5{border:2px solid #ffd86b;box-shadow:0 0 34px rgba(255,200,70,.55),0 0 70px rgba(255,170,40,.22),inset 0 0 22px rgba(255,200,70,.25);animation:avatarAura 2.4s ease-in-out infinite;}
  @keyframes avatarAura{50%{box-shadow:0 0 40px rgba(255,200,70,.6),0 0 80px rgba(255,170,40,.25),inset 0 0 24px rgba(255,200,70,.3);}}
  @media(prefers-reduced-motion:reduce){.avatar-t4,.avatar-t5{animation:none;}}

  /* «Próxima forma»: el bucle abierto del personaje, bajo la barra de XP. */
  .forma-next{
    display:inline-flex;align-items:center;gap:8px;align-self:flex-start;max-width:520px;
    background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;text-align:left;
    font-size:11px;color:var(--dim2);
  }
  .forma-next b{color:var(--text);}
  .forma-next em{font-style:normal;color:var(--dim2);}
  .forma-next:hover b{color:var(--gold);}
  .forma-next.done{cursor:default;color:var(--gold);}
  .forma-next-thumb{
    flex:none;width:24px;height:24px;border-radius:7px;background-size:cover;background-position:center 30%;
    filter:blur(1.5px) brightness(.8) saturate(.7);border:1px solid rgba(255,207,77,.35);
  }

  /* Menú del personaje (hoja inferior). */
  .avatar-sheet .sheet-sub b{color:var(--gold);}
  .avatar-formas{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px;}
  .avatar-forma{
    position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
    background:none;border:none;padding:0;cursor:pointer;font:inherit;color:var(--text);min-width:0;
  }
  .avatar-forma-img{
    width:100%;aspect-ratio:1;border-radius:14px;background-color:#0b0a08;background-size:cover;background-position:center 30%;
    border:1.5px solid var(--border);transition:border-color .2s,box-shadow .2s;
  }
  .avatar-forma:hover .avatar-forma-img{border-color:rgba(255,207,77,.6);}
  .avatar-forma.on .avatar-forma-img{border-color:var(--gold);box-shadow:0 0 14px rgba(255,190,60,.45);}
  .avatar-forma-name{font-size:10px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .avatar-forma-lvl{font-size:9.5px;color:var(--dim2);}
  .avatar-forma.on .avatar-forma-lvl{color:var(--gold);font-weight:700;}
  /* Bloqueadas: se intuyen, no se ven. Es la promesa de lo que viene. */
  .avatar-forma.locked{cursor:default;}
  .avatar-forma.locked .avatar-forma-img{filter:blur(4px) brightness(.38) saturate(.4);}
  .avatar-forma.locked .avatar-forma-name{color:var(--dim);}
  .avatar-forma-lock{position:absolute;top:0;left:0;right:0;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:18px;pointer-events:none;}
  .avatar-opts{display:flex;flex-direction:column;gap:8px;}
  .avatar-opt{
    display:block;width:100%;text-align:left;padding:11px 13px;border-radius:12px;cursor:pointer;
    background:var(--card2);border:1px solid var(--border);color:var(--text);font:inherit;font-size:13px;font-weight:600;
  }
  .avatar-opt:hover{border-color:rgba(255,207,77,.5);}
  .avatar-opt.dim{background:none;color:var(--dim2);font-weight:500;}

  /* Acciones rápidas (acciones.js): «Hice algo bien» manda; «Tropecé» es sobrio,
     sin rojo, para que anotar una caída no se sienta como un castigo. */
  .acc-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .acc-btn{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-height:50px;padding:8px 10px;border-radius:14px;cursor:pointer;font:inherit;text-align:center;
    transition:transform .12s,border-color .2s,background .2s;
  }
  .acc-btn:active{transform:scale(.97);}
  .acc-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
  .acc-t{font-family:var(--font-stat);font-size:14px;font-weight:800;}
  .acc-s{font-size:10.5px;font-weight:600;opacity:.75;}
  .acc-ok{background:linear-gradient(180deg,rgba(255,207,77,.2),rgba(255,207,77,.08));border:1px solid rgba(255,207,77,.55);color:var(--gold);}
  .acc-ok:hover{background:linear-gradient(180deg,rgba(255,207,77,.28),rgba(255,207,77,.12));border-color:var(--gold);}
  .acc-mal{background:var(--card2);border:1px solid var(--border);color:var(--dim);}
  .acc-mal:hover{border-color:rgba(255,255,255,.22);color:var(--text);}
  .acc-x2{font-style:normal;font-size:10px;font-weight:800;padding:1px 6px;border-radius:9px;background:var(--gold);color:#1a1405;margin-left:4px;vertical-align:1px;}
  .acc-semana{margin-top:8px;font-size:11px;color:var(--dim2);text-align:center;}
  .acc-semana b{color:var(--dim);font-weight:800;}
  .acc-semana b.g{color:var(--green);}
  /* Hoja de motivos. */
  .acc-sheet .sheet-sub b{color:var(--gold);}
  .acc-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .acc-chip{
    display:flex;align-items:center;gap:8px;text-align:left;padding:12px 11px;border-radius:12px;cursor:pointer;
    background:var(--card2);border:1px solid var(--border);color:var(--text);font:inherit;font-size:12.5px;font-weight:600;line-height:1.25;
  }
  .acc-chip span{font-size:18px;flex:none;}
  .acc-chip:hover{border-color:rgba(255,207,77,.5);}
  .acc-chip:active{transform:scale(.98);}
  .acc-opt{
    display:block;width:100%;text-align:left;margin-bottom:10px;padding:11px 13px;border-radius:12px;cursor:pointer;
    background:rgba(255,122,59,.1);border:1px solid rgba(255,122,59,.4);color:var(--text);font:inherit;font-size:13px;font-weight:700;
  }
  .acc-opt small{display:block;font-weight:500;font-size:11px;color:var(--dim);margin-top:2px;}

  /* Evolución en el modal de nivel: la forma nueva aparece con un destello. */
  .evo-reveal{
    width:170px;height:170px;margin:4px auto 12px;border-radius:28px;overflow:hidden;background:#0b0a08;
    animation:evoIn .9s cubic-bezier(.2,.9,.3,1.2) both;
  }
  .evo-reveal img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;animation:evoFlash 1.1s ease-out both;}
  .evo-kicker{font-family:var(--font-stat);font-size:11px;font-weight:800;letter-spacing:3px;color:var(--gold);}
  @keyframes evoIn{0%{transform:scale(.6);opacity:0;}100%{transform:scale(1);opacity:1;}}
  @keyframes evoFlash{0%{filter:brightness(3) saturate(0) blur(6px);}100%{filter:none;}}
  @media(prefers-reduced-motion:reduce){.evo-reveal,.evo-reveal img{animation:none;}}
  /* Ángel y demonio acompañan al rango, no al retrato. */
  .spirit-row{display:inline-flex;align-items:flex-end;gap:2px;margin-left:2px;}
  .spirit-wrap{position:relative;display:inline-flex;}
  .spirit-wrap svg{width:26px;height:36px;display:block;}
  .spirit-wrap.angel{filter:drop-shadow(0 0 6px rgba(255,236,170,.65));}
  .spirit-wrap.devil{filter:drop-shadow(0 0 5px rgba(180,20,20,.45));}
  .avatar-upload:hover{border-color:var(--gold);color:var(--gold);}
  .avatar-upload.herido{filter:grayscale(1) brightness(.7);border-color:rgba(255,207,77,.4);}
  .char-info{display:flex;flex-direction:column;gap:8px;min-width:0;}

  /* Sparkline de 7 días: sustituye a la gráfica los días que no toca. */
  .spark-row{display:flex;align-items:center;gap:10px;margin-top:2px;}
  .spark-label{font-size:11px;color:var(--dim2);letter-spacing:.3px;}
  .spark{display:block;flex:none;overflow:visible;}
  .spark-delta{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;}
  .spark-delta.up{color:var(--green);}
  .spark-delta.down{color:var(--red);}
  .name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .char-name{font-size:20px;font-weight:800;}
  .pill{font-size:11px;font-weight:700;padding:4px 9px;border-radius:20px;background:var(--card2);border:1px solid var(--border);display:inline-flex;align-items:center;gap:4px;}
  .rank-pill{color:var(--gold);border-color:rgba(255,207,77,0.3);}
  /* Techo a las barras: estiradas a 950px dejan de comunicar "casi lo tengo". */
  .bar-row{display:flex;flex-direction:column;gap:3px;max-width:520px;}
  .bar-label{display:flex;justify-content:space-between;font-size:10.5px;color:var(--dim2);font-weight:600;}
  .bar-label em{font-style:normal;font-weight:700;margin-left:4px;}
  .bar-label .xp-hoy{color:var(--green);}
  .bar-label .vida-est.debil{color:#ff6b6b;}
  .bar-label .vida-est.herido{color:var(--gold);}
  .bar .fill{transition:width .5s cubic-bezier(.3,1,.4,1);}
  .bar{height:9px;background:#0d0d10;border-radius:10px;overflow:hidden;border:1px solid var(--border);position:relative;}
  .bar .fill{height:100%;border-radius:10px;transition:width .6s cubic-bezier(.3,1,.4,1);}
  .bar.xp .fill{background:linear-gradient(90deg,#2ec77a,#34d399);}
  .bar.hp .fill{background:linear-gradient(90deg,var(--red),var(--gold));}
  .bar.hp.danger .fill{background:linear-gradient(90deg,#ff3b3b,#ff6b6b);animation:pulseGlow 1s infinite;}
  .bar.goal-bar .fill{background:linear-gradient(90deg,var(--green),#1fa97a);}
  /* Botón secundario genérico (lo usan Motivación y el creador de hábitos). */
  .day-btn{
    margin-top:4px;background:none;border:1px solid var(--border);color:var(--dim);
    font-size:11px;padding:7px;border-radius:10px;cursor:pointer;transition:.2s;width:100%;
  }
  .day-btn:hover{border-color:var(--gold);color:var(--gold);}
  /* "Pasar al día siguiente" vive ahora en el pie del menú, con los ajustes de
     desarrollo: es una herramienta de simulación, no una feature del producto. */
  .sidebar-item.dev-day-btn{color:var(--dim2);font-size:13px;}
  .sidebar-item.dev-day-btn:hover{color:var(--gold);}
  @keyframes pulseGlow{0%,100%{box-shadow:0 0 0 rgba(255,157,59,0);}50%{box-shadow:0 0 10px rgba(255,157,59,.5);}}

  /* ROW DOTS / DELETE MENU */
  .row-dots{
    position:absolute;right:2px;top:50%;transform:translateY(-50%);opacity:0;transition:.15s;
    background:none;border:none;color:var(--dim2);font-size:17px;cursor:pointer;padding:5px 9px;border-radius:8px;
  }
  .habit-row-wrap:hover .row-dots{opacity:1;}
  .row-dots:hover{background:rgba(255,255,255,.08);color:var(--text);}
  .row-menu{
    position:absolute;right:6px;top:100%;margin-top:2px;background:var(--card2);border:1px solid var(--border);
    border-radius:10px;overflow:hidden;z-index:50;box-shadow:0 6px 18px rgba(0,0,0,.45);
  }
  .row-menu button{display:block;width:100%;background:none;border:none;color:var(--red);font-size:12.5px;font-weight:600;padding:9px 16px;cursor:pointer;text-align:left;white-space:nowrap;}
  .row-menu button:hover{background:rgba(255,59,59,.1);}