/* ── Fuente & Reset ── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:    #FFF8F0;
  --warm:     #FFF0E0;
  --terracota:#E8735A;
  --coral:    #F7A07B;
  --sage:     #6BAE8C;
  --mint:     #A8D8B9;
  --yellow:   #F4C842;
  --text:     #3D2C1E;
  --text-soft:#8A7060;
  --shadow:   0 4px 20px rgba(61,44,30,.10);
  --radius:   18px;
  --radius-sm:12px;
}

html { font-size: 16px; }
body {
  font-family: 'Nunito', sans-serif;
  background: var(--cream);
  color: var(--text);
  min-height: 100vh;
  max-width: 480px;
  margin: 0 auto;
  overflow-x: hidden;
}

/* ── Background pattern ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(232,115,90,.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 90%, rgba(107,174,140,.08) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5L55 20v30H5V20z' fill='none' stroke='%23E8735A' stroke-width='0.5' stroke-opacity='0.07'/%3E%3C/svg%3E");
  background-size: cover, cover, 60px 60px;
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* ── Header ── */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  background: white;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-left { display: flex; align-items: center; gap: 12px; }
.header-right { display: flex; gap: 8px; }
.header-greeting { font-weight: 800; font-size: 1rem; color: var(--text); }
.header-date { font-size: .78rem; color: var(--text-soft); font-weight: 600; }
.header-btn {
  background: var(--warm);
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 1.1rem;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  transition: transform .15s;
}
.header-btn:hover { transform: scale(1.1); }
.avatar-header-circle { border-radius: 50%; overflow: hidden; }

/* ── LOGIN PAGE ── */
.login-page {
  background: linear-gradient(145deg, #FFF8F0 0%, #FFE8D6 50%, #FFF0E8 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Partículas flotantes */
.login-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.particle {
  position: absolute;
  bottom: -30px;
  animation: floatParticle linear infinite;
  user-select: none;
}
@keyframes floatParticle {
  0%   { transform: translateY(0) rotate(0deg);   opacity: var(--op, .2); }
  50%  { transform: translateY(-45vh) rotate(180deg); }
  100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

.login-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px 48px;
  gap: 28px;
  min-height: 100vh;
}

/* Animaciones de entrada */
@keyframes dropIn {
  0%   { opacity: 0; transform: translateY(-40px) scale(.9); }
  70%  { transform: translateY(6px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.5); }
  70%  { transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes riseIn {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-drop { animation: dropIn .6s cubic-bezier(.4,0,.2,1) both; }
.animate-pop  { animation: popIn  .5s cubic-bezier(.4,0,.2,1) both; }
.animate-rise { animation: riseIn .45s cubic-bezier(.4,0,.2,1) both; }

/* Hero */
.login-hero { text-align: center; }
.house-iso {
  font-size: 5rem;
  line-height: 1;
  display: block;
  margin-bottom: 10px;
  filter: drop-shadow(0 6px 14px rgba(232,115,90,.3));
  animation: houseBob 3s ease-in-out infinite;
}
@keyframes houseBob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.login-title {
  font-size: 2rem;
  font-weight: 900;
  color: var(--terracota);
  margin-bottom: 4px;
  letter-spacing: -.02em;
  text-shadow: 0 2px 8px rgba(232,115,90,.2);
}
.login-sub { color: var(--text-soft); font-weight: 700; font-size: 1rem; }

/* Queco grande con anillo pulsante */
.queco-login { text-align: center; }
.queco-ring {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  padding: 5px;
  background: linear-gradient(135deg, var(--terracota), var(--yellow), var(--sage));
  animation: ringPulse 2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(232,115,90,.4);
}
@keyframes ringPulse {
  0%,100% { box-shadow: 0 0 0 0   rgba(232,115,90,.4), 0 8px 24px rgba(232,115,90,.25); }
  50%      { box-shadow: 0 0 0 10px rgba(232,115,90,.0), 0 8px 24px rgba(232,115,90,.25); }
}
.queco-img-big {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
  display: block;
  transition: transform .3s;
}
.queco-ring:hover .queco-img-big { transform: scale(1.06); }
.queco-label {
  font-size: .88rem;
  color: var(--text-soft);
  font-weight: 800;
  margin-top: 10px;
  letter-spacing: .01em;
}

/* Avatar picker PRO */
.avatar-picker-pro {
  display: flex;
  gap: 24px;
  justify-content: center;
}
.avatar-btn-pro {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0;
  font-family: 'Nunito', sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.avatar-pro-wrap {
  position: relative;
  width: 120px;
  height: 120px;
}
.avatar-pro-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
  box-shadow: 0 8px 28px rgba(61,44,30,.18);
  transition: transform .25s cubic-bezier(.4,0,.2,1),
              box-shadow .25s,
              border-color .25s;
  display: block;
}
.avatar-pro-glow {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(var(--terracota), var(--yellow), var(--sage), var(--coral), var(--terracota));
  opacity: 0;
  transition: opacity .3s;
  z-index: -1;
  animation: spinGlow 3s linear infinite;
}
@keyframes spinGlow {
  to { transform: rotate(360deg); }
}
.avatar-pro-check {
  position: absolute;
  bottom: 4px; right: 4px;
  width: 28px; height: 28px;
  background: var(--sage);
  border-radius: 50%;
  border: 3px solid white;
  color: white;
  font-size: 1rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0);
  transition: opacity .2s, transform .3s cubic-bezier(.4,0,.2,1);
}
.avatar-pro-name {
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--text);
  transition: color .2s;
}

/* Hover */
.avatar-btn-pro:hover .avatar-pro-img {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 16px 40px rgba(61,44,30,.22);
}
.avatar-btn-pro:hover .avatar-pro-glow { opacity: .5; }

/* Seleccionado */
.avatar-btn-pro.selected .avatar-pro-img {
  border-color: var(--terracota);
  transform: translateY(-8px) scale(1.08);
  box-shadow: 0 20px 48px rgba(232,115,90,.35);
}
.avatar-btn-pro.selected .avatar-pro-glow { opacity: 1; }
.avatar-btn-pro.selected .avatar-pro-check {
  opacity: 1;
  transform: scale(1);
}
.avatar-btn-pro.selected .avatar-pro-name { color: var(--terracota); }

/* Animación dot pop */
@keyframes dotPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}
.pin-dot.pop { animation: dotPop .2s ease; }

/* Shake error */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}
.shake { animation: shake .4s ease; }

/* PIN */
.pin-section { width: 100%; max-width: 300px; text-align: center; }
.pin-label { font-weight: 700; font-size: .95rem; color: var(--text-soft); margin-bottom: 12px; }
.pin-display {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
}
.pin-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2.5px solid var(--terracota);
  background: white;
  transition: background .15s;
}
.pin-dot.filled { background: var(--terracota); }
.numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.numpad-btn {
  background: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 18px 0;
  font-size: 1.3rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(61,44,30,.08);
  transition: transform .1s, background .1s;
}
.numpad-btn:active { transform: scale(.93); background: var(--warm); }
.numpad-clear { color: var(--terracota); }
.numpad-ok { background: var(--sage); color: white; }
.numpad-ok:active { background: #5a9a7b; }
.pin-error {
  margin-top: 14px;
  color: var(--terracota);
  font-weight: 700;
  font-size: .9rem;
  background: #FFF0EE;
  border-radius: 10px;
  padding: 8px 14px;
}

/* ── QUECO centrado home ── */
.queco-home-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 0;
}
.queco-home-ring {
  position: relative;
  display: inline-block;
  padding: 5px;
  border-radius: 50%;
  background: conic-gradient(var(--terracota), var(--yellow), var(--sage), var(--coral), var(--terracota));
  animation: spinGlowHome 4s linear infinite, quecoFloat 3s ease-in-out infinite;
  box-shadow: 0 8px 32px rgba(232,115,90,.3);
}
@keyframes spinGlowHome {
  to { filter: hue-rotate(360deg); }
}
@keyframes quecoFloat {
  0%,100% { transform: translateY(0)    rotate(-2deg); }
  25%      { transform: translateY(-6px) rotate(2deg); }
  50%      { transform: translateY(0)    rotate(-1deg); }
  75%      { transform: translateY(-4px) rotate(1deg); }
}
.queco-home-img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
  display: block;
}
.queco-home-badge {
  background: white;
  border-radius: 99px;
  padding: 5px 14px;
  font-size: .82rem;
  font-weight: 800;
  color: var(--text-soft);
  box-shadow: 0 2px 10px rgba(61,44,30,.1);
  letter-spacing: .01em;
}

/* ── MINI RANKING avatares grandes ── */
.mini-rank-avatar-wrap {
  position: relative;
  display: inline-block;
}
.mini-rank-avatar-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
  box-shadow: 0 4px 14px rgba(61,44,30,.15);
  transition: transform .2s;
}
.avatar-me-glow .mini-rank-avatar-img {
  border-color: var(--terracota);
  box-shadow: 0 0 0 4px rgba(232,115,90,.25), 0 6px 20px rgba(232,115,90,.3);
  animation: mePulse 2s ease-in-out infinite;
}
@keyframes mePulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(232,115,90,.25), 0 6px 20px rgba(232,115,90,.3); }
  50%      { box-shadow: 0 0 0 8px rgba(232,115,90,.1),  0 6px 20px rgba(232,115,90,.3); }
}
.avatar-me-crown {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.1rem;
  animation: crownBob .8s ease-in-out infinite alternate;
}
@keyframes crownBob {
  from { transform: translateX(-50%) translateY(0); }
  to   { transform: translateX(-50%) translateY(-3px); }
}

/* ── PROGRESS ── */
.progress-section {
  margin: 16px 16px 0;
  background: white;
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.progress-header {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: .88rem;
  color: var(--text-soft);
  margin-bottom: 10px;
}
.progress-pts { color: var(--terracota); font-weight: 900; font-size: 1rem; }
.progress-bar-wrap {
  background: #F0E8E0;
  border-radius: 99px;
  height: 14px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--coral), var(--terracota));
  border-radius: 99px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.progress-footer {
  margin-top: 8px;
  font-size: .8rem;
  color: var(--text-soft);
  font-weight: 600;
  text-align: right;
}
.all-done { color: var(--yellow); font-weight: 800; }

/* ── MINI RANKING ── */
.mini-ranking {
  display: flex;
  gap: 12px;
  margin: 14px 16px 0;
}
.mini-rank-card {
  flex: 1;
  background: white;
  border-radius: var(--radius);
  padding: 18px 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
  transition: transform .2s;
}
.mini-rank-card:hover { transform: translateY(-3px); }
.mini-rank-card.me {
  border-color: var(--terracota);
  background: linear-gradient(160deg, #FFF3EE, #FFEEE8);
}
.mini-rank-name { font-weight: 900; font-size: .95rem; color: var(--text); margin-top: 4px; }
.mini-rank-pts {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--terracota);
}
.mini-rank-pts span { font-size: .72rem; font-weight: 700; margin-left: 2px; color: var(--text-soft); }

/* ── TASKS ── */
.tasks-section { padding: 16px 16px 100px; }
.section-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 14px;
}
.tasks-grid { display: flex; flex-direction: column; gap: 10px; }

.task-card {
  background: white;
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
  transition: transform .15s, border-color .2s, background .2s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.task-card:active { transform: scale(.97); }
.task-card.done {
  background: #F0FBF5;
  border-color: var(--mint);
}
.task-icon { font-size: 1.8rem; min-width: 40px; text-align: center; }
.task-info { flex: 1; }
.task-name { font-weight: 800; font-size: .97rem; color: var(--text); }
.task-doers { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.doer-badge {
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
}
.task-check {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #F0E8E0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 900;
  color: var(--text-soft);
  transition: background .2s, color .2s;
  flex-shrink: 0;
}
.task-card.done .task-check {
  background: var(--sage);
  color: white;
}

/* ── CONFETTI ── */
#confetti-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -10px;
  width: 10px; height: 10px;
  border-radius: 2px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ── STAR FLOATER ── */
.star-floater {
  position: absolute;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--yellow);
  pointer-events: none;
  z-index: 1000;
  text-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.star-floater.float-up {
  animation: floatUp .9s ease-out forwards;
}
@keyframes floatUp {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-80px); opacity: 0; }
}

/* ══════════════════════════════════════
   RANKING PAGE — efectos pro
══════════════════════════════════════ */

.ranking-page {
  background: linear-gradient(160deg, #FFF8F0 0%, #FFE8D6 60%, #FFF0E8 100%);
  min-height: 100vh;
}

/* Estrellas fondo */
.ranking-bg-stars {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.bg-star {
  position: absolute; bottom: -20px;
  animation: floatParticle linear infinite;
}

/* ── Podio PRO ── */
.podium-pro {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  padding: 10px 0 0;
}
.podium-pro-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.podium-pro-crown {
  font-size: 1.6rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.crown-animate {
  animation: crownBob .9s ease-in-out infinite alternate;
  font-size: 2rem;
}

/* Anillos de avatar según posición */
.podium-pro-avatar-wrap {
  position: relative;
  border-radius: 50%;
  padding: 4px;
  display: inline-block;
}
.gold-ring {
  background: conic-gradient(#FFD700, #FFA500, #FFD700, #FFFACD, #FFD700);
  animation: spinGlow 3s linear infinite;
  box-shadow: 0 0 20px rgba(255,215,0,.5), 0 8px 30px rgba(255,165,0,.3);
}
.silver-ring {
  background: conic-gradient(#C0C0C0, #E8E8E8, #A8A8A8, #EFEFEF, #C0C0C0);
  animation: spinGlow 4s linear infinite reverse;
  box-shadow: 0 0 12px rgba(192,192,192,.5);
}
.bronze-ring {
  background: conic-gradient(#C68642, #E8A060, #B07030, #D4956A, #C68642);
  animation: spinGlow 5s linear infinite;
  box-shadow: 0 0 12px rgba(198,134,66,.4);
  animation: quecoFloat 2.5s ease-in-out infinite;
}
.podium-pro-img {
  width: 68px; height: 68px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
  display: block;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.podium-pro-img-lg {
  width: 90px; height: 90px;
  border: 5px solid white;
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
}
.queco-wag { animation: quecoWagImg 1.2s ease-in-out infinite; }
@keyframes quecoWagImg {
  0%,100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}

/* Chispas del 1º */
.podium-sparkles {
  position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 4px;
  font-size: .85rem;
  animation: sparkleAnim 1.5s ease-in-out infinite;
  z-index: 2;
}
@keyframes sparkleAnim {
  0%,100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50%      { opacity: .5; transform: translateX(-50%) scale(1.3); }
}

.podium-pro-name { font-weight: 900; font-size: .88rem; color: var(--text); }
.podium-pro-name-lg { font-size: 1.1rem; }

.podium-pro-pts { font-size: .95rem; font-weight: 900; }
.podium-pro-pts span { font-size: .68rem; font-weight: 700; margin-left: 2px; color: var(--text-soft); }
.podium-pro-pts-lg { font-size: 1.3rem; }
.gold-pts   { color: #D4900A; }
.silver-pts { color: #888; }
.bronze-pts { color: #C68642; }

.podium-pro-block {
  width: 100%;
  border-radius: 14px 14px 0 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.4rem;
  color: white;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.15);
}
.podium-pro-block span { text-shadow: 0 2px 4px rgba(0,0,0,.2); }
.gold-block   { background: linear-gradient(180deg,#FFD740,#E8A000); height: 80px; }
.silver-block { background: linear-gradient(180deg,#D0D0D0,#A0A0A0); height: 58px; }
.bronze-block { background: linear-gradient(180deg,#E09850,#C06820); height: 44px; font-size: 1rem; }

/* ── Score table PRO ── */
.score-row-pro {
  background: white;
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 3px 12px rgba(61,44,30,.08);
  border: 2.5px solid transparent;
  transition: transform .2s;
  margin-bottom: 10px;
}
.score-row-pro:hover { transform: translateX(4px); }
.score-me {
  border-color: var(--terracota);
  background: linear-gradient(135deg, #FFF3EE, #FFEEE8);
}
.score-pos-badge {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #F0E8E0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: .82rem;
  color: var(--text-soft);
  flex-shrink: 0;
}
.pos-gold   { background: linear-gradient(135deg,#FFD740,#E8A000); color: white; }
.pos-silver { background: linear-gradient(135deg,#D0D0D0,#A0A0A0); color: white; }

.score-avatar-lg {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
  box-shadow: 0 3px 10px rgba(61,44,30,.15);
  flex-shrink: 0;
}
.score-info { flex: 1; min-width: 0; }
.score-name-pro { font-weight: 900; font-size: .95rem; margin-bottom: 6px; }
.score-bar-pro-wrap {
  height: 10px;
  background: #F0E8E0;
  border-radius: 99px;
  overflow: hidden;
}
.score-bar-pro-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
}
.score-pts-pro {
  font-size: 1.2rem; font-weight: 900;
  min-width: 44px; text-align: right; flex-shrink: 0;
}
.score-pts-pro span { font-size: .68rem; font-weight: 700; color: var(--text-soft); margin-left: 2px; }

/* ── Today cards PRO ── */
.ranking-today-section {
  margin: 14px 16px 0;
  background: white;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.today-cards-pro {
  display: flex;
  gap: 14px;
}
.today-card-pro {
  flex: 1;
  border-radius: var(--radius);
  background: var(--warm);
  border: 2.5px solid transparent;
  overflow: hidden;
  transition: transform .2s;
}
.today-card-pro:hover { transform: translateY(-4px); }
.today-me-pro {
  border-color: var(--terracota);
  background: linear-gradient(160deg,#FFF3EE,#FFEEE8);
  box-shadow: 0 6px 20px rgba(232,115,90,.18);
}
.today-card-inner {
  position: relative;
  padding: 20px 12px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.today-leader-ribbon {
  position: absolute; top: 0; right: 0;
  background: linear-gradient(135deg,#FFD740,#E8A000);
  color: white; font-size: .68rem; font-weight: 900;
  padding: 4px 10px;
  border-radius: 0 var(--radius) 0 var(--radius-sm);
}
.today-avatar-wrap { position: relative; }
.today-avatar-pro {
  width: 80px; height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
  box-shadow: 0 6px 20px rgba(61,44,30,.18);
  display: block;
  transition: transform .2s;
}
.today-card-pro:hover .today-avatar-pro { transform: scale(1.06); }
.today-me-ring .today-avatar-pro {
  border-color: var(--terracota);
  box-shadow: 0 0 0 5px rgba(232,115,90,.2), 0 6px 20px rgba(232,115,90,.3);
}
.today-name-pro  { font-weight: 900; font-size: 1rem; }
.today-pts-pro   { font-size: 1.25rem; font-weight: 900; }
.today-pts-pro span { font-size: .72rem; font-weight: 700; color: var(--text-soft); }

.ranking-today-label {
  margin: 14px 16px 0;
  background: white;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-soft);
  box-shadow: var(--shadow);
  text-align: center;
}
.ranking-today-label strong {
  color: var(--terracota);
  font-weight: 800;
}

.ranking-week-range {
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-soft);
  margin-top: -10px;
  margin-bottom: 14px;
  letter-spacing: .01em;
}

.ranking-section {
  margin: 16px 16px 0;
  background: white;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.ranking-title {
  font-size: 1.15rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 20px;
  color: var(--text);
}

/* Podio */
.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}
.podium-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.podium-crown { font-size: 1.4rem; }
.podium-avatar { border-radius: 50%; overflow: hidden; }
.podium-avatar-lg { width: 72px; height: 72px; }
.podium-name { font-weight: 800; font-size: .88rem; color: var(--text); }
.podium-name-lg { font-size: 1rem; }
.podium-pts { font-size: 1rem; font-weight: 900; color: var(--terracota); }
.podium-pts span { font-size: .7rem; font-weight: 700; color: var(--text-soft); }
.podium-pts-lg { font-size: 1.3rem; }
.podium-block {
  width: 100%;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.2rem;
  color: white;
}
.first-block  { background: var(--yellow);    height: 70px; }
.second-block { background: var(--sage);      height: 50px; }
.third-block  { background: var(--coral);     height: 40px; font-size: 1rem; }

/* Score table */
.score-table-section { margin: 14px 16px 0; }
.score-table-title {
  font-weight: 800;
  font-size: .95rem;
  color: var(--text-soft);
  margin-bottom: 10px;
  padding-left: 4px;
}
.score-table { display: flex; flex-direction: column; gap: 10px; }
.score-row {
  background: white;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(61,44,30,.07);
  border: 2px solid transparent;
}
.score-me { border-color: var(--terracota); background: #FFF3EE; }
.score-pos { font-weight: 900; font-size: .95rem; color: var(--text-soft); min-width: 24px; }
.score-avatar { border-radius: 50%; overflow: hidden; }
.score-name { font-weight: 800; font-size: .9rem; flex: 1; }
.score-bar-wrap {
  width: 80px; height: 8px;
  background: #F0E8E0;
  border-radius: 99px;
  overflow: hidden;
}
.score-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .5s;
}
.score-pts { font-weight: 900; font-size: 1rem; min-width: 36px; text-align: right; }

/* Today cards */
.ranking-today { margin-top: 14px; margin-bottom: 24px; }
.today-cards { display: flex; gap: 12px; }
.today-card {
  flex: 1;
  background: var(--warm);
  border-radius: var(--radius);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 2px solid transparent;
}
.today-me { border-color: var(--terracota); background: #FFF3EE; }
.today-avatar { border-radius: 50%; overflow: hidden; }
.today-name { font-weight: 800; font-size: .9rem; }
.today-pts { font-size: 1.1rem; font-weight: 900; }
.today-pts span { font-size: .72rem; font-weight: 700; color: var(--text-soft); }
.today-winner-badge {
  background: var(--yellow);
  color: var(--text);
  font-size: .72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
  text-align: center;
}

/* ── Avatar circular (fotos reales) ── */
.avatar-circle {
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #E8927C;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  display: block;
  flex-shrink: 0;
}

/* ── Tarea bloqueada (ya hecha por el otro) ── */
.task-card.blocked {
  background: #F5F5F5;
  opacity: .72;
  cursor: not-allowed;
}
.task-card.blocked .task-icon { filter: grayscale(.6); }
.task-card.blocked .task-name { color: var(--text-soft); }
.task-card.blocked .task-check {
  background: #E0D8D0;
  color: #B0A898;
  font-size: .85rem;
}
.task-blocked-msg {
  font-size: .72rem;
  font-weight: 700;
  color: #B0A898;
  margin-top: 3px;
}

/* Sacudida al intentar tocar bloqueada */
@keyframes blockedShake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-7px); }
  40%      { transform: translateX(7px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
.blocked-shake { animation: blockedShake .45s ease; }

/* ── Toast bloqueado ── */
.toast-blocked {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: #2D1A0E;
  color: white;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: .92rem;
  padding: 12px 22px;
  border-radius: 99px;
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
  z-index: 500;
  white-space: nowrap;
  pointer-events: none;
}
@keyframes toastIn  {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(10px); }
}
.toast-show { animation: toastIn  .3s ease forwards; }
.toast-hide { animation: toastOut .4s ease forwards; }

/* ── Utilidades ── */
a { text-decoration: none; }