:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --bg: #f6f7fb;
  --card: #fff;
  --card-bg: var(--card);
  --bg-alt: rgba(0, 0, 0, 0.03);
  --text: #171923;
  --muted: #73798a;
  --primary: #6c63ff;
  --primary2: #8a82ff;
  --border: #e8eaf1;
  --success: #2fbf71;
  --warning: #f4b740;
  --danger: #ee6b6b;
  --skip: #8a82ff;
  --shadow: 0 10px 30px rgba(31, 35, 50, 0.07);
  --radius: 20px;
  --admob-banner-height: 52px;
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent
}
html,
body {
  overflow-x: hidden
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  padding-bottom: var(--safe-bottom);
  transition: background .25s ease, color .25s ease
}
button,
input,
select,
textarea {
  font: inherit;
  touch-action: manipulation
}
button {
  cursor: pointer;
  border: 0;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent
}
button:active,
.btn:active,
.status-btn:active {
  transform: scale(0.96);
  opacity: 0.88
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--primary);
  outline: 3px solid color-mix(in srgb, var(--primary) 55%, white);
  outline-offset: 2px
}
.app {
  min-height: 100vh;
  display: flex
}
.sidebar {
  width: 250px;
  background: #fff;
  border-right: 1px solid var(--border);
  padding: 24px 16px 110px;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  z-index: 60;
  overflow-y: auto;
  overscroll-behavior: contain
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 20px;
  padding: 4px 10px 22px;
  cursor: pointer;
  user-select: none
}
.brand-bubble {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--primary), #a99fff);
  display: grid;
  place-items: center;
  color: #fff;
  transition: transform .15s ease
}
.brand-bubble img,
.brand-bubble svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit
}
.brand-bubble:active {
  transform: scale(0.9)
}
.nav {
  display: grid;
  gap: 7px
}
.nav button,
.mobile-nav button {
  background: transparent;
  color: var(--muted);
  padding: 12px 14px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 650;
  position: relative
}
.nav button {
  text-align: left
}
.nav button.active,
.nav button:hover,
.mobile-nav button.active {
  background: #f0efff;
  color: var(--primary)
}
.side-bottom {
  position: absolute;
  bottom: 18px;
  left: 16px;
  right: 16px;
  display: grid;
  gap: 8px
}
.theme {
  width: 100%;
  padding: 11px 13px;
  border-radius: 14px;
  background: #f7f7fb;
  color: var(--muted);
  font-weight: 650
}
.main {
  flex: 1;
  max-width: 1500px;
  margin: 0 auto 0 250px;
  padding: 28px 34px 110px;
  min-width: 0
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px
}
.eyebrow {
  color: var(--muted);
  font-size: 14px;
  font-weight: 650
}
.title {
  font-size: 32px;
  line-height: 1.1;
  margin: 4px 0 0
}
.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}
.btn {
  padding: 11px 15px;
  border-radius: 14px;
  font-weight: 750;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px
}
.btn.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  border: 0;
  box-shadow: 0 8px 18px rgba(108, 99, 255, 0.22)
}
.btn.secondary {
  background: #f0efff;
  color: var(--primary);
  border-color: #d8d1ff
}
.btn.sm {
  padding: 7px 11px;
  font-size: 12px;
  border-radius: 10px
}
.btn.claim {
  background: linear-gradient(135deg, #2fbf71, #4ade80);
  color: #fff
}
.grid {
  display: grid;
  gap: 18px
}
.dash-grid {
  grid-template-columns: repeat(12, 1fr)
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  min-width: 0
}
.hero {
  grid-column: span 8;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, #fff 58%, #f0efff)
}
.hero h2 {
  font-size: 28px;
  margin: 0 0 8px
}
.hero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5
}
.stat-card {
  grid-column: span 4
}
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px
}
.stat-number {
  font-size: 34px;
  font-weight: 850
}
.muted {
  color: var(--muted)
}
.bar {
  height: 10px;
  background: #eeeef5;
  border-radius: 99px;
  overflow: hidden
}
.fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #9b93ff);
  border-radius: 99px;
  transition: width .35s
}
.section {
  grid-column: span 8
}
.sidecard {
  grid-column: span 4
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 10px;
  flex-wrap: wrap
}
.section-head h3 {
  margin: 0;
  font-size: 18px
}
.card.section {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.habit-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  gap: 10px;
}

/* ============================================================================
   ESTILO MODERNO MINIMALISTA (TODOIST / STREAKS) PARA LA LISTA DE INICIO
   ============================================================================ */
.habit-item-modern {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
body.dark .habit-item-modern {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.habit-item-modern:hover {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}
.habit-item-modern.is-done {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.04);
}
body.dark .habit-item-modern.is-done {
  border-color: rgba(34, 197, 94, 0.25);
  background: rgba(34, 197, 94, 0.06);
}
.habit-item-modern.is-failed {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.04);
}
.habit-item-modern.is-skipped {
  border-color: rgba(168, 85, 247, 0.35);
  background: rgba(168, 85, 247, 0.04);
}
.habit-item-modern.is-shield {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.04);
}

.habit-item-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
  user-select: none;
}
.habit-item-modern:hover .habit-item-icon {
  transform: scale(1.05);
}

.habit-item-body {
  flex: 1 1 0px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.habit-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
}
.habit-item-name {
  font-size: 14.5px;
  font-weight: 750;
  color: var(--text);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
  transition: opacity 0.2s ease, text-decoration 0.2s ease;
}
.habit-item-name.text-done {
  opacity: 0.75;
}
.habit-item-neg-pill {
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

.habit-item-meta {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  width: 100%;
  line-height: 1.3;
}
.habit-item-meta span {
  display: inline;
}
.meta-dot {
  opacity: 0.4;
  margin: 0 3px;
}
.meta-streak {
  font-weight: 700;
  color: var(--text);
}
.meta-qty, .meta-time {
  font-weight: 700;
}

.habit-item-progress {
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-top: 4px;
}
body.dark .habit-item-progress {
  background: rgba(255, 255, 255, 0.1);
}
.habit-item-progress-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.3s ease;
}

.habit-item-note {
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  margin-top: 2px;
}
.habit-item-note:hover {
  color: var(--primary);
}

.habit-item-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  margin-left: auto;
}

.habit-circle-check {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  user-select: none;
  touch-action: manipulation;
  color: var(--text);
  box-sizing: border-box;
  flex-shrink: 0;
}
.habit-circle-check:hover {
  transform: scale(1.08);
  border-color: var(--primary);
}
.habit-circle-check:active {
  transform: scale(0.92);
}
.habit-circle-check.not-done {
  border-color: rgba(99, 102, 241, 0.45);
  background: rgba(99, 102, 241, 0.04);
  color: var(--primary);
}
.habit-circle-check.not-done:hover {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
}
.habit-circle-check.is-done {
  background: #22c55e !important;
  border-color: #22c55e !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35);
}
.habit-circle-check.is-failed {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 800;
}
.habit-circle-check.is-skipped {
  background: #a855f7 !important;
  border-color: #a855f7 !important;
  color: #fff !important;
  font-size: 12px;
}
.habit-circle-check.is-shield {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #fff !important;
  font-size: 12px;
}
.habit-circle-check .check-svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  stroke-width: 3;
}
.habit-circle-check .check-svg-hover {
  width: 16px;
  height: 16px;
  opacity: 0;
  transition: opacity 0.15s ease;
  stroke: var(--primary);
}
.habit-circle-check:hover .check-svg-hover {
  opacity: 0.65;
}

.habit-qty-plus-btn {
  padding: 0 8px;
  height: 30px;
  min-height: 30px;
  border-radius: 9px;
  border: 1px solid rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.08);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  touch-action: manipulation;
  font-family: inherit;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
body.dark .habit-qty-plus-btn {
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.16);
}
.habit-qty-plus-btn:hover {
  background: var(--primary);
  color: #fff;
  transform: scale(1.05);
}

.habit-timer-icon-btn {
  width: 30px;
  height: 30px;
  min-height: 30px;
  border-radius: 9px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  box-sizing: border-box;
}
.habit-timer-icon-btn:hover {
  background: #f59e0b;
  color: #fff;
  transform: scale(1.05);
}

.habit-item-menu-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: all 0.15s ease;
  padding: 0;
  flex-shrink: 0;
  box-sizing: border-box;
}
.habit-item-menu-btn:hover {
  opacity: 1;
  background: var(--bg-alt);
  color: var(--text);
}

/* Modal de Menú Rápido */
.habit-quick-menu-modal {
  max-width: 380px !important;
  padding: 20px 18px !important;
  border-radius: 24px !important;
  text-align: left;
}
.habit-quick-menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.quick-menu-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}
.quick-menu-title-block {
  flex: 1;
  min-width: 0;
}
.quick-menu-name {
  margin: 0;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quick-menu-sub {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 2px;
}
.ghost-close {
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.habit-quick-menu-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quick-opt-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  text-align: left;
  user-select: none;
  box-sizing: border-box;
}
.quick-opt-item:hover {
  background: var(--bg-alt);
  border-color: var(--primary);
  transform: translateX(2px);
}
.quick-opt-item.active-opt.done {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.4);
  color: #16a34a;
}
.quick-opt-item.active-opt.fail {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}
.quick-opt-item.active-opt.skip {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.4);
  color: #a855f7;
}
.quick-opt-item.active-opt.shield {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.4);
  color: #f59e0b;
}
.opt-icon {
  font-size: 17px;
  flex-shrink: 0;
}
.opt-label {
  flex: 1;
}
.opt-badge {
  font-size: 11px;
  font-weight: 750;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.08);
}
body.dark .opt-badge {
  background: rgba(255, 255, 255, 0.12);
}
.opt-subnote {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  font-style: italic;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quick-opt-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 6px 0;
}

/* ============================================================================
   ORGANIZACIÓN Y REORDENAMIENTO DE HÁBITOS (MODAL & HOME CONTROLS)
   ============================================================================ */
.completed-habits-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px;
  font-size: 11px;
  font-weight: 750;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  user-select: none;
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
}
.completed-habits-divider::before,
.completed-habits-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.sort-badge-btn {
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.22);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s ease;
  user-select: none;
  font-family: inherit;
}
body.dark .sort-badge-btn {
  background: rgba(99, 102, 241, 0.16);
  border-color: rgba(99, 102, 241, 0.35);
  color: #a5b4fc;
}
.sort-badge-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.habit-organize-modal {
  max-width: 440px !important;
  width: min(440px, 92vw) !important;
  padding: 18px 16px 14px !important;
  border-radius: 24px !important;
  text-align: left;
  max-height: min(80vh, calc(100dvh - 64px - env(safe-area-inset-bottom, 24px))) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: auto auto max(28px, env(safe-area-inset-bottom, 28px)) auto !important;
  box-sizing: border-box !important;
}

#habitOrganizeModalBody {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.habit-organize-modal .modal-foot {
  flex-shrink: 0 !important;
  margin-top: 10px !important;
  padding: 0 !important;
  padding-bottom: max(4px, env(safe-area-inset-bottom, 4px)) !important;
}

.habit-organize-modal .modal-foot .btn {
  padding: 12px 18px !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
}
.habit-organize-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.organize-modal-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.12);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}
.organize-section-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.organize-mode-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.organize-chip {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 10px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
  color: var(--text);
  box-sizing: border-box;
}
.organize-chip:hover {
  border-color: var(--primary);
  background: var(--bg-alt);
}
.organize-chip.active {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.08);
  box-shadow: 0 0 0 1px var(--primary);
}
body.dark .organize-chip.active {
  background: rgba(99, 102, 241, 0.18);
}
.organize-chip .chip-emoji {
  font-size: 20px;
}
.organize-chip .chip-title {
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.2;
}
.organize-chip .chip-sub {
  font-size: 9.5px;
  color: var(--muted);
  line-height: 1.2;
}

.organize-toggle-row {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.organize-switch-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  font-size: 13px;
}


.organize-auto-banner {
  background: rgba(99, 102, 241, 0.07);
  border: 1.5px dashed rgba(99, 102, 241, 0.25);
  border-radius: 16px;
  padding: 14px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
body.dark .organize-auto-banner {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.35);
}
.auto-banner-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.auto-banner-content {
  flex: 1;
  min-width: 0;
}
.auto-banner-title {
  font-size: 13.5px;
  font-weight: 750;
  color: var(--text);
  margin-bottom: 3px;
}
.auto-banner-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.organize-habit-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-right: 4px;
  margin-bottom: 8px;
}
.organize-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: all 0.15s ease;
  user-select: none;
}
.organize-item:hover {
  border-color: rgba(99, 102, 241, 0.4);
}
.organize-rank {
  font-size: 12px;
  font-weight: 850;
  color: var(--muted);
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.organize-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
.organize-item-info {
  flex: 1;
  min-width: 0;
}
.organize-item-name {
  font-size: 13.5px;
  font-weight: 750;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.organize-item-tod {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 1px;
}
.organize-item.is-dragging {
  opacity: 0.95;
  border-color: var(--primary) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22), 0 0 0 1.5px var(--primary);
  background: var(--card);
  cursor: grabbing;
}
body.dark .organize-item.is-dragging {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.65), 0 0 0 1.5px var(--primary);
}
.organize-item-placeholder {
  border: 2px dashed var(--primary);
  border-radius: 14px;
  background: rgba(99, 102, 241, 0.08);
  margin-bottom: 8px;
  box-sizing: border-box;
  transition: all 0.15s ease;
}
.organize-drag-handle {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  color: var(--muted);
  flex-shrink: 0;
  transition: all 0.15s ease;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.organize-drag-handle:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.1);
}
.organize-drag-handle:active {
  cursor: grabbing;
  color: var(--primary);
  transform: scale(1.06);
}
/* Estilos para organización por momento del día */
.organize-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.3px;
}
.organize-group-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.organize-quick-tod {
  display: flex;
  gap: 2px;
  background: var(--bg);
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.organize-tod-btn {
  background: transparent;
  border: none;
  font-size: 13px;
  padding: 3px 5px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.45;
  transition: all 0.15s ease;
  line-height: 1;
}
.organize-tod-btn:hover {
  opacity: 0.85;
}
.organize-tod-btn.active {
  background: var(--primary);
  opacity: 1;
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}
.tod-section-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 6px;
  padding: 4px 2px 2px;
  font-size: 12.5px;
  font-weight: 850;
  color: var(--primary);
  letter-spacing: 0.4px;
  user-select: none;
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
}
.tod-section-divider:first-child {
  margin-top: 4px;
}
.tod-section-divider::after {
  content: "";
  flex: 1;
  height: 1.5px;
  background: var(--border);
}

.habit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: #fff;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.habit.is-archived {
  opacity: .75;
  border-style: dashed;
}
.habit.is-done {
  border-color: rgba(34, 197, 94, 0.35);
}
body.dark .habit.is-done {
  border-color: rgba(34, 197, 94, 0.25);
}
.habit-dot {
  width: 8px;
  min-height: 55px;
  border-radius: 99px;
  flex-shrink: 0;
}
.habit-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #f6f6fb;
  font-size: 22px;
  flex: none;
}
.habit-main {
  flex: 1;
  min-width: 0;
  max-width: 100%;
}
.habit-title {
  font-weight: 800;
  font-size: 16px;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: break-word;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.habit-meta {
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.habit-meta span {
  white-space: nowrap;
}
.habit-note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  background: rgba(108, 99, 255, 0.08);
  padding: 4px 8px;
  border-radius: 8px;
  display: inline-block;
  font-style: italic
}
.pill,
.tag,
.status-label {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800
}
.pill,
.tag {
  background: #f5f5fa
}
.status-label.done {
  background: #eafaf1;
  color: #258b58
}
.status-label.failed {
  background: #fff0f0;
  color: #c84b4b
}
.status-label.skipped {
  background: #f3f1ff;
  color: #6c63ff
}
.status-label.pending {
  background: #f5f6fa;
  color: var(--muted)
}
.status-label.shield {
  background: #fef9c3;
  color: #a16207
}
.status-label.vacation {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd
}
.habit-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 9px;
}
/* ============================================================================
   NUEVO SISTEMA DE BOTONES Y ACCIONES DE HÁBITOS (2 TIERS)
   ============================================================================ */
.habit-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}
.habit-card-actions.is-compact {
  gap: 5px;
  margin-top: 7px;
}

/* Fila de Estado Resuelto (Completado, Falló, Omitido, Escudo) */
.habit-resolved-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.habit-resolved-pill {
  flex: 1;
  min-height: 38px;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  touch-action: manipulation;
  font-family: inherit;
  white-space: nowrap;
  min-width: 0;
  box-sizing: border-box;
}
.habit-resolved-pill .resolved-check {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}
.habit-resolved-pill .resolved-text {
  font-size: 12.5px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.habit-resolved-pill .resolved-undo {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.8;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.06);
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}
body.dark .habit-resolved-pill .resolved-undo {
  background: rgba(255, 255, 255, 0.08);
}
.habit-resolved-pill:hover .resolved-undo {
  opacity: 1;
}

/* Variantes según el estado resuelto */
.habit-resolved-pill.is-done {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.38);
  color: #16a34a;
}
body.dark .habit-resolved-pill.is-done {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.45);
  color: #4ade80;
}
.habit-resolved-pill.is-done:hover {
  background: rgba(34, 197, 94, 0.2);
  transform: translateY(-1px);
}

.habit-resolved-pill.is-failed {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #ef4444;
}
body.dark .habit-resolved-pill.is-failed {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.45);
  color: #f87171;
}
.habit-resolved-pill.is-failed:hover {
  background: rgba(239, 68, 68, 0.2);
  transform: translateY(-1px);
}

.habit-resolved-pill.is-skipped {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.35);
  color: #a855f7;
}
body.dark .habit-resolved-pill.is-skipped {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.45);
  color: #c084fc;
}
.habit-resolved-pill.is-skipped:hover {
  background: rgba(168, 85, 247, 0.2);
  transform: translateY(-1px);
}

.habit-resolved-pill.is-shield {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.4);
  color: #d97706;
}
body.dark .habit-resolved-pill.is-shield {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.5);
  color: #fbbf24;
}
.habit-resolved-pill.is-shield:hover {
  background: rgba(245, 158, 11, 0.22);
  transform: translateY(-1px);
}

.habit-aux-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--muted);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  font-family: inherit;
  box-sizing: border-box;
}
.habit-aux-btn:hover {
  border-color: var(--primary);
  color: var(--text);
  background: var(--bg);
  transform: translateY(-1px);
}
.habit-aux-btn.has-note {
  border-color: rgba(14, 165, 233, 0.4);
  background: rgba(14, 165, 233, 0.1);
  color: #0ea5e9;
}

/* Ajustes compactos para lista de Inicio y Calendario */
.habit-card-actions.is-compact .habit-btn-primary {
  min-height: 38px;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 10px;
}
.habit-card-actions.is-compact .habit-resolved-pill {
  min-height: 34px;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 10px;
}
.habit-card-actions.is-compact .habit-aux-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 13px;
}
.habit-card-actions.is-compact .habit-sec-pill {
  min-height: 28px;
  padding: 4px 2px;
  font-size: 10.5px;
  border-radius: 8px;
}

/* Fila Primaria de Acción Principal */
.habit-action-primary-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.habit-btn-primary {
  flex: 1;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  touch-action: manipulation;
  font-family: inherit;
}
.habit-btn-primary.not-done {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.35);
  color: var(--primary);
}
body.dark .habit-btn-primary.not-done {
  background: rgba(129, 140, 248, 0.12);
  border-color: rgba(129, 140, 248, 0.35);
  color: #a5b4fc;
}
.habit-btn-primary.not-done:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
  transform: translateY(-1px);
}
.habit-btn-primary.is-done {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.45) !important;
  color: #16a34a !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.15);
}
body.dark .habit-btn-primary.is-done {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
  border-color: rgba(34, 197, 94, 0.5) !important;
}
.habit-btn-primary.qty-main {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(168, 85, 247, 0.14));
  border-color: rgba(99, 102, 241, 0.4);
  color: var(--primary);
}
body.dark .habit-btn-primary.qty-main {
  color: #c084fc;
}
.habit-btn-primary.qty-main:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-1px);
}
.habit-btn-primary.timer-main {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(234, 88, 12, 0.12));
  border-color: rgba(245, 158, 11, 0.4);
  color: #d97706;
}
body.dark .habit-btn-primary.timer-main {
  color: #fbbf24;
}
.habit-btn-primary.timer-main:hover {
  background: #f59e0b;
  color: #fff;
  transform: translateY(-1px);
}
.btn-check-icon {
  font-size: 16px;
  line-height: 1;
}
.btn-check-text {
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.2px;
}
.btn-check-xp {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(99, 102, 241, 0.16);
  margin-left: auto;
}
.btn-check-sub {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.75;
  margin-left: 4px;
}

/* Botones secundarios en fila primaria */
.habit-btn-secondary {
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
  font-family: inherit;
}
.habit-btn-secondary:hover {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.08);
  color: var(--primary);
}
.habit-btn-aux-done {
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.08);
  color: #16a34a;
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
body.dark .habit-btn-aux-done {
  color: #4ade80;
}
.habit-btn-aux-done:hover {
  background: rgba(34, 197, 94, 0.2);
  transform: scale(1.05);
}
.habit-btn-aux {
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.habit-btn-aux:hover {
  border-color: var(--primary);
  color: var(--text);
}

/* Fila Secundaria de Opciones (Falló, Omitir, Escudo, Nota) */
.habit-action-secondary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
}
.habit-sec-pill {
  padding: 6px 4px;
  min-height: 32px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  transition: all 0.15s ease;
  user-select: none;
  font-family: inherit;
}
.habit-sec-pill .sec-icon {
  font-size: 12px;
  line-height: 1;
}
.habit-sec-pill .sec-label {
  font-size: 10.5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.habit-sec-pill:hover {
  border-color: var(--primary);
  color: var(--text);
  background: var(--bg-alt);
}
.habit-sec-pill.sec-active-fail {
  background: rgba(239, 68, 68, 0.16) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  font-weight: 750;
}
.habit-sec-pill.sec-active-skip {
  background: rgba(168, 85, 247, 0.16) !important;
  color: #a855f7 !important;
  border-color: rgba(168, 85, 247, 0.45) !important;
  font-weight: 750;
}
.habit-sec-pill.sec-active-shield {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #f59e0b !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  font-weight: 750;
}
.habit-sec-pill.sec-active-note {
  background: rgba(14, 165, 233, 0.16) !important;
  color: #0ea5e9 !important;
  border-color: rgba(14, 165, 233, 0.45) !important;
  font-weight: 750;
}
.quick-status {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.quick-status-row {
  width: 100%;
  display: flex;
  gap: 6px;
  align-items: center;
}
.quick-status-utils {
  flex-wrap: wrap;
}
.quick-status-utils .status-btn {
  flex: 1 1 0;
  min-width: 80px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
  min-height: 38px;
}
.quick-status-actions {
  display: flex;
  gap: 6px;
  width: 100%;
}
.quick-status-actions .status-btn {
  flex: 1 1 0px;
  min-width: 0;
  padding: 8px 2px;
  font-size: 16px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.status-btn {
  padding: 8px 10px;
  border-radius: 11px;
  background: #f5f6fa;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center
}
.status-btn:hover {
  transform: translateY(-1px)
}
.status-btn.done-active {
  background: #eafaf1;
  color: #258b58;
  border-color: #bde8ce
}
.status-btn.fail-active {
  background: #fff0f0;
  color: #c84b4b;
  border-color: #f1c4c4
}
.status-btn.skip-active {
  background: #f3f1ff;
  color: #6c63ff;
  border-color: #d8d1ff
}
.status-btn.shield-active {
  background: #fef9c3 !important;
  color: #a16207 !important;
  border-color: #eab308 !important
}
.quick {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px
}
.quick .q {
  padding: 14px;
  border-radius: 16px;
  background: #f8f8fc
}
.quick b {
  display: block;
  font-size: 22px
}
.mini-list {
  display: grid;
  gap: 0
}
.mini-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border)
}
.mini-item:last-child {
  border-bottom: 0
}
.page {
  display: none
}
.page.active {
  display: block
}
.page-sub {
  margin: 0 0 20px;
  color: var(--muted)
}
.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px
}
.filters input,
.filters select,
.field input,
.field select,
.field textarea {
  border: 1px solid var(--border);
  background: #fff;
  padding: 10px 12px;
  border-radius: 12px;
  outline: 0
}
.filters input:focus,
.filters select:focus {
  border-color: var(--primary);
}
.habits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 16px;
}
.habit-big {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.habit-big .top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.habit-top-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.habit-top-actions .btn.sm {
  padding: 4px 6px;
  min-width: 30px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  opacity: 0.65;
  font-size: 13px;
  color: var(--muted);
  transition: all 0.15s ease;
  box-shadow: none;
}
.habit-top-actions .btn.sm:hover,
.habit-top-actions .btn.sm:active {
  background: var(--bg-alt);
  border-color: var(--border);
  opacity: 1;
  color: var(--text);
  transform: translateY(-1px);
}
.habit-top-actions .btn.sm.btn-del:hover,
.habit-top-actions .btn.sm.btn-del:active {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
.habit-metric-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
}
.grow {
  flex: 1;
  min-width: 0;
}
.habit-big .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px
}
.progress-mini {
  height: 8px
}
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px
}
.cal-head {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  text-align: center
}
.day {
  min-height: 90px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 9px;
  cursor: pointer
}
.day.today {
  border: 2px solid var(--primary)
}
.dots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%
}

/* SANTUARIO Y ESCENARIOS PREMIUM */
.pet-page {
  display: block;
  width: 100%;
}
.pet-page-companion {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}
.pet-page-shop {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .pet-page-companion,
  .pet-page-shop {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
.pet-stage {
  min-height: 390px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%, #f0edff 0 35%, #fff 70%);
  border-radius: 22px;
  position: relative;
  user-select: none;
  cursor: pointer;
  overflow: hidden;
  transition: background .4s ease, box-shadow .3s ease, border-color .3s ease;
  padding: 22px 16px;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  isolation: isolate
}
.pet-stage::before,
.pet-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity .4s ease
}
.pet-stage::before {
  z-index: 0
}
.pet-stage::after {
  z-index: 1
}
.stage-illustration-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 -3px 8px rgba(0, 0, 0, .16));
}
.stage-illustration-svg path,
.stage-illustration-svg ellipse,
.stage-illustration-svg circle {
  vector-effect: non-scaling-stroke
}
.pet-stage.perfect-day-glow {
  box-shadow: inset 0 0 36px rgba(250, 204, 21, 0.45), 0 0 30px rgba(250, 204, 21, 0.35) !important;
  border: 1.5px solid rgba(250, 204, 21, 0.65) !important
}
.stage-ripple {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
  transform: translate(-50%, -50%) scale(1);
  animation: rippleExpand .75s ease-out forwards;
  pointer-events: none;
  z-index: 9
}
@keyframes rippleExpand {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: .95
  }
  100% {
    transform: translate(-50%, -50%) scale(26);
    opacity: 0
  }
}
/* Partículas dinámicas al tocar escenario */
.biome-particle {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 2;
  animation: floatParticle 1.4s ease-out forwards
}
@keyframes floatParticle {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: .9
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0);
    opacity: 0
  }
}

/* Día Perfecto iluminado */
.pet-stage.perfect-day-mode {
  box-shadow: inset 0 0 45px rgba(250, 204, 21, 0.55), 0 0 30px rgba(250, 204, 21, 0.4) !important;
  border: 2px solid rgba(250, 204, 21, 0.85) !important
}

/* Animaciones de estado de la mascota y su contenedor */
.pet-svg.anim-happy,
.pet-avatar-box.anim-happy {
  animation: petJump .65s ease-in-out !important;
}
.pet-svg.anim-celebrate,
.pet-avatar-box.anim-celebrate {
  animation: petSpin .85s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.pet-svg.anim-sad,
.pet-avatar-box.anim-sad {
  animation: petSad 1.2s ease forwards !important;
}
.pet-svg.anim-egg-wobble,
.pet-avatar-box.anim-egg-wobble {
  animation: eggWobble .6s ease-in-out !important;
}

@keyframes eggWobble {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-8deg) scale(1.04); }
  40% { transform: rotate(8deg) scale(1.04); }
  60% { transform: rotate(-5deg) scale(1.02); }
  80% { transform: rotate(5deg) scale(1.02); }
}

@keyframes petJump {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-24px) scale(1.08, 0.92);
  }
}

@keyframes petSpin {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.18) rotate(180deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
  }
}

@keyframes petSad {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(12px) scale(0.93);
    opacity: .85;
  }
}

@keyframes petJump {
  0%,
  100% {
    transform: translateY(0) scale(1)
  }
  50% {
    transform: translateY(-16px) scale(1.08, 0.94)
  }
}
@keyframes petSpin {
  0% {
    transform: scale(1) rotate(0deg)
  }
  50% {
    transform: scale(1.2) rotate(180deg)
  }
  100% {
    transform: scale(1) rotate(360deg)
  }
}

/* ============================================================================
   💖 PARTÍCULAS EMOCIONALES & ESTILOS DE ÁNIMO
   ============================================================================ */
.pet-float-particle {
  position: absolute;
  pointer-events: none;
  font-size: 20px;
  user-select: none;
  z-index: 999;
  animation: floatParticleUp 1.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes floatParticleUp {
  0% {
    transform: translate(0, 0) scale(0.5);
    opacity: 0;
  }
  15% {
    transform: translate(var(--pdx, 0px), -12px) scale(1.3);
    opacity: 1;
  }
  80% {
    opacity: 0.85;
  }
  100% {
    transform: translate(calc(var(--pdx, 0px) * 1.4), -65px) scale(0.9);
    opacity: 0;
  }
}

.pet-mood-badge {
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pet-mood-badge:hover {
  transform: scale(1.18);
}
.pet-mood-badge.glow-radiant {
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.7);
  border-color: #f59e0b !important;
}
.pet-mood-badge.glow-happy {
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.6);
  border-color: #22c55e !important;
}
.pet-mood-badge.glow-energetic {
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.7);
  border-color: #f97316 !important;
}
.pet-mood-badge.glow-sleepy {
  box-shadow: 0 0 12px rgba(129, 140, 248, 0.6);
  border-color: #818cf8 !important;
}
.pet-mood-badge.glow-gloomy {
  box-shadow: 0 0 10px rgba(251, 146, 60, 0.5);
  border-color: #fb923c !important;
}
.pet-mood-badge.glow-heartbroken {
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.6);
  border-color: #ef4444 !important;
}
.pet-mood-badge.glow-vacation {
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.6);
  border-color: #0ea5e9 !important;
}
.pet-mood-badge.glow-serene {
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
  border-color: #38bdf8 !important;
}

.pet-happiness-card {
  transition: all .3s ease;
}
.pet-happiness-card:hover {
  border-color: rgba(108, 99, 255, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* 1. CIUDAD NEÓN (CYBERPUNK SKYLINE & GRID) */
.pet-stage.bg-cyber {
  background: linear-gradient(180deg, #12022b 0%, #260847 38%, #0b0c16 85%, #05060a 100%)
}
.pet-stage.bg-cyber::before {
  background-image: radial-gradient(circle at 50% 30%, rgba(217, 70, 239, 0.22) 0%, transparent 65%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 250'%3E%3Cdefs%3E%3ClinearGradient id='cb1' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%231e1338'/%3E%3Cstop offset='100%25' stop-color='%23080911'/%3E%3C/linearGradient%3E%3ClinearGradient id='cb2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23130d24'/%3E%3Cstop offset='100%25' stop-color='%2305050a'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- Far Skyline --%3E%3Cpath d='M20 250 V110 H60 V90 H90 V130 H140 V75 H175 V110 H220 V60 H260 V105 H300 V70 H345 V125 H385 V80 H430 V140 H475 V115 H500 V250 Z' fill='url(%23cb1)' opacity='.7'/%3E%3C!-- Near Skyline --%3E%3Cpath d='M0 250 V140 H45 V115 H80 V165 H125 V95 H165 V135 H205 V80 H245 V130 H290 V100 H335 V150 H375 V110 H415 V165 H460 V125 H500 V250 Z' fill='url(%23cb2)'/%3E%3C!-- Windows & Neon Accents --%3E%3Crect x='138' y='108' width='6' height='8' rx='1' fill='%2306b6d4' opacity='.9'/%3E%3Crect x='150' y='125' width='6' height='8' rx='1' fill='%23facc15' opacity='.85'/%3E%3Crect x='215' y='95' width='7' height='9' rx='1' fill='%23ec4899' opacity='.95'/%3E%3Crect x='230' y='110' width='6' height='8' rx='1' fill='%2306b6d4' opacity='.85'/%3E%3Crect x='22' y='155' width='6' height='7' rx='1' fill='%23ec4899' opacity='.8'/%3E%3Crect x='305' y='118' width='6' height='9' rx='1' fill='%2338bdf8' opacity='.9'/%3E%3Crect x='385' y='128' width='7' height='8' rx='1' fill='%23a855f7' opacity='.9'/%3E%3Crect x='425' y='175' width='6' height='7' rx='1' fill='%2306b6d4' opacity='.85'/%3E%3C!-- Beacons --%3E%3Ccircle cx='245' cy='78' r='2' fill='%23ef4444'/%3E%3Ccircle cx='125' cy='93' r='1.8' fill='%23ef4444'/%3E%3Ccircle cx='375' cy='108' r='1.8' fill='%23ef4444'/%3E%3C!-- Cyber Highway / Platform --%3E%3Cellipse cx='250' cy='248' rx='210' ry='22' fill='%23090a12' stroke='%2306b6d4' stroke-width='2.5'/%3E%3Cpath d='M70 248 Q250 220 430 248' fill='none' stroke='%23d946ef' stroke-width='2' opacity='.6'/%3E%3C/svg%3E"), linear-gradient(180deg, transparent 68%, rgba(6, 182, 212, 0.3) 69%, transparent 70%), linear-gradient(90deg, rgba(217, 70, 239, 0.18) 1px, transparent 1px);
  background-size: auto, 100% auto, 100% 28px, 28px 100%;
  background-position: center, bottom center, center, center;
  background-repeat: no-repeat, no-repeat, repeat, repeat
}
.pet-stage.bg-cyber::after {
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0px, rgba(255, 255, 255, 0.035) 2px, transparent 2px, transparent 7px);
  animation: cyberScan 4s linear infinite;
  opacity: .7
}
@keyframes cyberScan {
  from {
    background-position: 0 0
  }
  to {
    background-position: 0 98px
  }
}

/* 2. CASTILLO LUNAR (GOTHIC CITADEL & MOONLIGHT) */
.pet-stage.bg-castle {
  background: radial-gradient(circle at 75% 22%, #241f5c 0%, #111633 45%, #050814 100%)
}
.pet-stage.bg-castle::before {
  background-image: radial-gradient(circle at 76% 20%, #ffffff 0%, #e0e7ff 12%, rgba(165, 180, 252, 0.35) 26%, transparent 50%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 250'%3E%3Cdefs%3E%3ClinearGradient id='cstGrad' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%2313172e'/%3E%3Cstop offset='100%25' stop-color='%23050711'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- Castle Towers and Walls --%3E%3Cpath d='M0 250 L0 180 Q60 160 110 185 L110 125 L122 105 L134 125 L134 180 L170 180 L170 85 L188 55 L206 85 L206 180 L242 180 L242 115 L260 90 L278 115 L278 180 Q340 160 410 190 L410 135 L428 110 L446 135 L446 195 Q475 190 500 195 L500 250 Z' fill='url(%23cstGrad)'/%3E%3C!-- Castle Windows --%3E%3Crect x='182' y='110' width='10' height='16' rx='5' fill='%23fef08a' opacity='.9'/%3E%3Crect x='254' y='130' width='10' height='16' rx='5' fill='%2393c5fd' opacity='.85'/%3E%3Crect x='118' y='145' width='8' height='12' rx='4' fill='%23fef08a' opacity='.75'/%3E%3Crect x='422' y='150' width='8' height='14' rx='4' fill='%23c084fc' opacity='.8'/%3E%3C!-- Stone Dais Platform --%3E%3Cellipse cx='250' cy='246' rx='190' ry='22' fill='%230a0e1c' stroke='%23475569' stroke-width='2'/%3E%3Cellipse cx='250' cy='246' rx='160' ry='16' fill='none' stroke='%236366f1' stroke-width='1.5' opacity='.5'/%3E%3C/svg%3E");
  background-size: auto, 100% auto;
  background-position: center, bottom center;
  background-repeat: no-repeat
}
.pet-stage.bg-castle::after {
  background-image: radial-gradient(circle, #93c5fd 1.4px, transparent 1.4px), radial-gradient(circle, #c084fc 1.8px, transparent 1.8px);
  background-size: 95px 95px, 140px 140px;
  animation: castleWisps 7s ease-in-out infinite alternate;
  opacity: .8
}
@keyframes castleWisps {
  0% {
    transform: translateY(0) scale(0.96);
    opacity: .45
  }
  100% {
    transform: translateY(-22px) scale(1.04);
    opacity: .95
  }
}

/* 3. TEMPLO ZEN (TORII, FUJI & SAKURA BLOSSOMS) */
.pet-stage.bg-zen {
  background: linear-gradient(180deg, #fed7e2 0%, #f472b6 36%, #701a75 75%, #3b0764 100%)
}
.pet-stage.bg-zen::before {
  background-image: radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.95) 0%, rgba(254, 205, 211, 0.55) 25%, transparent 52%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 250'%3E%3Cdefs%3E%3ClinearGradient id='fuji' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%236b21a8' opacity='.6'/%3E%3Cstop offset='100%25' stop-color='%234a044e' opacity='.8'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- Mount Fuji Silhouette --%3E%3Cpath d='M100 250 L200 130 Q250 100 300 130 L400 250 Z' fill='url(%23fuji)'/%3E%3Cpath d='M225 115 Q250 100 275 115 L285 140 Q250 130 215 140 Z' fill='%23ffffff' opacity='.85'/%3E%3C!-- Torii Gate & Hill --%3E%3Cpath d='M0 250 Q125 190 250 215 Q375 190 500 225 V250 Z' fill='%2328051a'/%3E%3Cpath d='M160 175 H340 V184 H322 V232 H308 V184 H192 V232 H178 V184 H160 Z M148 166 Q250 156 352 166 V173 Q250 164 148 173 Z' fill='%2318020f'/%3E%3C!-- Platform Ring --%3E%3Cellipse cx='250' cy='246' rx='180' ry='18' fill='%231b0313' stroke='%23f472b6' stroke-width='2' opacity='.85'/%3E%3C/svg%3E");
  background-size: auto, 100% auto;
  background-position: center, bottom center;
  background-repeat: no-repeat
}
.pet-stage.bg-zen::after {
  background-image: radial-gradient(ellipse 4px 2.5px, #fce7f3 95%, transparent), radial-gradient(ellipse 5px 3px, #f472b6 95%, transparent);
  background-size: 85px 85px, 130px 130px;
  animation: sakuraDrift 7.5s linear infinite;
  opacity: .9
}
@keyframes sakuraDrift {
  from {
    transform: translate(0, -20px) rotate(0deg)
  }
  to {
    transform: translate(55px, 95px) rotate(240deg)
  }
}

/* 4. ESTACIÓN ORBITAL (DEEP COSMOS, GAS GIANT & OBSERVATION DECK) */
.pet-stage.bg-orbital {
  background: radial-gradient(circle at 35% 28%, #1e1b4b 0%, #09090b 68%, #000000 100%)
}
.pet-stage.bg-orbital::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 250'%3E%3C!-- Gas Giant with Ring --%3E%3Ccircle cx='380' cy='75' r='48' fill='%230284c7' opacity='.9'/%3E%3Ccircle cx='380' cy='75' r='48' fill='url(%23gasGrad)'/%3E%3Cdefs%3E%3ClinearGradient id='gasGrad' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%2338bdf8' stop-opacity='.9'/%3E%3Cstop offset='50%25' stop-color='%230369a1' stop-opacity='.6'/%3E%3Cstop offset='100%25' stop-color='%23082f49'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='380' cy='75' rx='85' ry='16' fill='none' stroke='%23bae6fd' stroke-width='4' transform='rotate(-20 380 75)' opacity='.8'/%3E%3C!-- Distant Planets --%3E%3Ccircle cx='90' cy='60' r='10' fill='%23e11d48' opacity='.7'/%3E%3Ccircle cx='160' cy='110' r='4' fill='%23fbbf24' opacity='.8'/%3E%3C!-- Space Station Flight Deck --%3E%3Cpath d='M-20 250 Q250 160 520 250 Z' fill='%230284c7' opacity='.22'/%3E%3Cpath d='M-20 260 Q250 170 520 260 Z' fill='%23090d16' stroke='%230284c7' stroke-width='3'/%3E%3Cpath d='M100 215 L180 250 M400 215 L320 250' stroke='%2338bdf8' stroke-width='1.5' opacity='.45'/%3E%3Cellipse cx='250' cy='246' rx='170' ry='16' fill='%230b1120' stroke='%2338bdf8' stroke-width='2'/%3E%3C/svg%3E"), linear-gradient(90deg, rgba(56, 189, 248, 0.1) 1px, transparent 1px);
  background-size: 100% auto, 36px 100%;
  background-position: bottom center, center;
  background-repeat: no-repeat, repeat
}
.pet-stage.bg-orbital::after {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.95) 1.2px, transparent 1.2px), radial-gradient(circle, rgba(56, 189, 248, 0.85) 1.8px, transparent 1.8px);
  background-size: 65px 65px, 115px 115px;
  animation: orbitalStars 26s linear infinite;
  opacity: .8
}
@keyframes orbitalStars {
  from {
    background-position: 0 0, 0 0
  }
  to {
    background-position: -65px 130px, 115px -230px
  }
}

/* 5. OASIS DEL DESIERTO (STARRY NIGHT, PYRAMIDS & GOLDEN DUNES) */
.pet-stage.bg-desert {
  background: linear-gradient(180deg, #0a0f1d 0%, #1a103c 32%, #6c1d06 72%, #b45309 100%)
}
.pet-stage.bg-desert::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 250'%3E%3C!-- Golden Crescent Moon --%3E%3Cpath d='M370 42 A16 16 0 1 0 390 56 A13 13 0 1 1 370 42 Z' fill='%23fef08a' filter='drop-shadow(0 0 8px %23fde047)'/%3E%3C!-- Distant Pyramids --%3E%3Cpath d='M90 200 L160 120 L230 200 Z' fill='%23451a03' opacity='.85'/%3E%3Cpath d='M160 120 L230 200 L210 200 Z' fill='%23290e02' opacity='.6'/%3E%3Cpath d='M190 205 L245 145 L300 205 Z' fill='%23361402' opacity='.95'/%3E%3C!-- Rolling Dunes --%3E%3Cpath d='M0 215 Q130 180 270 205 Q390 175 500 215 V250 H0 Z' fill='%23200801'/%3E%3Cpath d='M0 230 Q160 200 320 225 Q420 210 500 232 V250 H0 Z' fill='%23130400'/%3E%3Cellipse cx='250' cy='246' rx='180' ry='16' fill='%231a0701' stroke='%23f59e0b' stroke-width='2' opacity='.85'/%3E%3C/svg%3E");
  background-size: 100% auto;
  background-position: bottom center;
  background-repeat: no-repeat
}
.pet-stage.bg-desert::after {
  background-image: radial-gradient(circle, #fef08a 1.3px, transparent 1.3px), radial-gradient(circle, #fb923c 1.7px, transparent 1.7px);
  background-size: 85px 85px, 135px 135px;
  animation: desertDust 8.5s ease-in-out infinite alternate;
  opacity: .75
}
@keyframes desertDust {
  0% {
    transform: translate(0, 0)
  }
  100% {
    transform: translate(-28px, -16px)
  }
}

/* 6. BOSQUE ESMERALDA (ENCHANTED PINES & GLOWING FIREFLIES) */
.pet-stage.bg-forest {
  background: radial-gradient(circle at 50% 25%, #047857 0%, #064e3b 42%, #02231c 85%, #01130f 100%)
}
.pet-stage.bg-forest::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 250'%3E%3Cdefs%3E%3ClinearGradient id='forGrad' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23033f30'/%3E%3Cstop offset='100%25' stop-color='%23011a14'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- Background Pines --%3E%3Cpath d='M0 250 L0 160 Q35 125 70 165 Q120 100 170 160 Q220 90 280 155 Q330 110 380 165 Q430 95 500 150 V250 Z' fill='url(%23forGrad)' opacity='.7'/%3E%3C!-- Foreground Dense Trees --%3E%3Cpath d='M0 250 L0 185 L35 145 L70 185 L115 130 L160 185 L210 120 L260 185 L310 135 L360 185 L415 125 L470 185 L500 155 V250 Z' fill='%23011c15'/%3E%3C!-- Mossy Mound Platform --%3E%3Cellipse cx='250' cy='246' rx='190' ry='20' fill='%23022c22' stroke='%2310b981' stroke-width='2'/%3E%3Cellipse cx='250' cy='246' rx='160' ry='14' fill='%2303392c' opacity='.7'/%3E%3C/svg%3E");
  background-size: 100% auto;
  background-position: bottom center;
  background-repeat: no-repeat
}
.pet-stage.bg-forest::after {
  background-image: radial-gradient(circle, #a7f3d0 1.8px, transparent 1.8px), radial-gradient(circle, #fef08a 2.4px, transparent 2.4px);
  background-size: 85px 85px, 125px 125px;
  animation: fireflies 6.8s ease-in-out infinite alternate;
  opacity: .9
}
@keyframes fireflies {
  0% {
    background-position: 0 12px, 25px 0;
    opacity: .45
  }
  50% {
    background-position: 22px -18px, -18px 28px;
    opacity: 1
  }
  100% {
    background-position: -18px -38px, 38px -12px;
    opacity: .55
  }
}

/* 7. VOLCÁN CARMESÍ (LAVA PEAKS, SMOKE & BURNING EMBERS) */
.pet-stage.bg-volcano {
  background: radial-gradient(circle at 50% 28%, #dc2626 0%, #881337 42%, #280507 85%, #120102 100%)
}
.pet-stage.bg-volcano::before {
  background-image: radial-gradient(ellipse at 50% 105%, rgba(249, 115, 22, 0.8) 0%, rgba(239, 68, 68, 0.3) 40%, transparent 65%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 250'%3E%3C!-- Jagged Volcanic Crags --%3E%3Cpath d='M0 250 L75 140 L160 195 L250 105 L340 185 L425 125 L500 185 V250 Z' fill='%23220406'/%3E%3C!-- Lava Fissures --%3E%3Cpath d='M235 118 L250 105 L265 118 L255 175 L265 210 L245 250' stroke='%23f97316' stroke-width='4' fill='none' stroke-linecap='round' filter='drop-shadow(0 0 6px %23ef4444)'/%3E%3Cpath d='M150 200 L160 195 L175 220 L165 250' stroke='%23fbbf24' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C!-- Obsidian Altar Platform --%3E%3Cellipse cx='250' cy='246' rx='185' ry='20' fill='%23190203' stroke='%23f97316' stroke-width='2.5'/%3E%3Cellipse cx='250' cy='246' rx='155' ry='14' fill='%232a0507' stroke='%23ef4444' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: auto, 100% auto;
  background-position: center, bottom center;
  background-repeat: no-repeat;
  animation: lavaPulse 2.8s ease-in-out infinite alternate
}
.pet-stage.bg-volcano::after {
  background-image: radial-gradient(circle, #f97316 2px, transparent 2px), radial-gradient(circle, #fbbf24 1.4px, transparent 1.4px);
  background-size: 75px 105px, 115px 145px;
  animation: embersRise 4.4s linear infinite;
  opacity: .95
}
@keyframes lavaPulse {
  from {
    opacity: .75
  }
  to {
    opacity: 1
  }
}
@keyframes embersRise {
  from {
    background-position: 0 105px, 0 145px
  }
  to {
    background-position: 30px -105px, -30px -145px
  }
}

/* 8. AURORA BOREAL (POLAR LIGHTS, GLACIERS & FROST) */
.pet-stage.bg-aurora {
  background: radial-gradient(circle at 50% 18%, #10b981 0%, #065f46 26%, #0c4a6e 62%, #021827 100%)
}
.pet-stage.bg-aurora::before {
  background-image: radial-gradient(ellipse at 50% 12%, rgba(52, 211, 153, 0.65) 0%, rgba(6, 182, 212, 0.3) 45%, transparent 65%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 250'%3E%3C!-- Aurora Curtains --%3E%3Cpath d='M-50 120 Q120 40 250 110 Q380 180 550 90 L550 0 L-50 0 Z' fill='rgba(52,211,153,0.18)' filter='blur(6px)'/%3E%3C!-- Glacier Silhouette --%3E%3Cpath d='M0 250 L25 180 L45 205 L70 170 L90 200 L130 160 L155 205 L190 175 L220 210 L275 155 L315 200 L365 170 L400 205 L450 160 L480 195 L500 175 V250 Z' fill='%23021924'/%3E%3C!-- Ice Floe Platform --%3E%3Cellipse cx='250' cy='246' rx='190' ry='20' fill='%23042433' stroke='%2338bdf8' stroke-width='2'/%3E%3Cellipse cx='250' cy='246' rx='160' ry='14' fill='%2306354a' stroke='%2367e8f9' stroke-width='1' opacity='.7'/%3E%3C/svg%3E");
  background-size: auto, 100% auto;
  background-position: center, bottom center;
  background-repeat: no-repeat;
  animation: auroraWave 5.5s ease-in-out infinite alternate
}
.pet-stage.bg-aurora::after {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.85) 1.2px, transparent 1.2px), radial-gradient(circle, #a7f3d0 1.5px, transparent 1.5px);
  background-size: 85px 85px, 120px 120px;
  opacity: .65
}
@keyframes auroraWave {
  from {
    transform: scaleY(0.93) skewX(-2.5deg)
  }
  to {
    transform: scaleY(1.1) skewX(2.5deg)
  }
}

/* 9. ABISMO OCEÁNICO (DEEP TRENCH, RUINS & RISING BUBBLES) */
.pet-stage.bg-ocean {
  background: radial-gradient(circle at 50% 30%, #0284c7 0%, #0369a1 38%, #082f49 78%, #011422 100%)
}
.pet-stage.bg-ocean::before {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 42%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 250'%3E%3C!-- Sun Rays Underwater --%3E%3Cpolygon points='180,0 220,0 290,250 210,250' fill='rgba(255,255,255,0.06)'/%3E%3Cpolygon points='320,0 350,0 440,250 380,250' fill='rgba(255,255,255,0.05)'/%3E%3C!-- Sunken Temple Columns --%3E%3Cpath d='M0 250 L0 205 L50 205 L50 150 L75 150 L75 205 L135 205 L135 120 L165 120 L165 205 L330 205 L330 140 L360 140 L360 205 L425 205 L425 165 L450 165 L450 205 L500 205 V250 Z' fill='%23011a2c'/%3E%3C!-- Seabed Dais --%3E%3Cellipse cx='250' cy='246' rx='190' ry='20' fill='%23022238' stroke='%2338bdf8' stroke-width='2'/%3E%3Cellipse cx='250' cy='246' rx='160' ry='14' fill='%23033252' opacity='.6'/%3E%3C/svg%3E");
  background-size: auto, 100% auto;
  background-position: center, bottom center;
  background-repeat: no-repeat
}
.pet-stage.bg-ocean::after {
  background-image: radial-gradient(circle, rgba(186, 230, 253, 0.85) 2.2px, transparent 2.2px), radial-gradient(circle, rgba(255, 255, 255, 0.95) 3.2px, transparent 3.2px);
  background-size: 70px 125px, 100px 170px;
  animation: bubblesUp 5s linear infinite;
  opacity: .85
}
@keyframes bubblesUp {
  from {
    background-position: 0 125px, 0 170px
  }
  to {
    background-position: 18px -125px, -18px -170px
  }
}

/* 10. ATARDECER COSTERO (WARM GRADIENTS, SILHOUETTES & FIRE-SUN) */
.pet-stage.bg-sunset {
  background: linear-gradient(180deg, #fdba74 0%, #f43f5e 36%, #881337 72%, #380314 100%)
}
.pet-stage.bg-sunset::before {
  background-image: radial-gradient(circle at 50% 36%, rgba(254, 240, 138, 0.85) 0%, rgba(251, 146, 60, 0.5) 26%, rgba(244, 63, 94, 0) 54%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 250'%3E%3C!-- Coastal Cliffs & Lighthouse --%3E%3Cpath d='M0 250 L0 195 Q100 175 190 200 L190 145 L202 135 L214 145 L214 200 Q350 180 500 215 V250 Z' fill='%23380415'/%3E%3Ccircle cx='202' cy='152' r='4' fill='%23fef08a' filter='drop-shadow(0 0 6px %23fde047)'/%3E%3C!-- Cliffside Overlook Platform --%3E%3Cellipse cx='250' cy='246' rx='190' ry='20' fill='%2322020c' stroke='%23fb923c' stroke-width='2'/%3E%3Cellipse cx='250' cy='246' rx='160' ry='14' fill='%23380415' opacity='.7'/%3E%3C/svg%3E");
  background-size: auto, 100% auto;
  background-position: center, bottom center;
  background-repeat: no-repeat
}
.pet-stage.bg-sunset::after {
  background-image: radial-gradient(circle, #fde047 1.6px, transparent 1.6px), radial-gradient(circle, #f43f5e 1.8px, transparent 1.8px);
  background-size: 80px 80px, 120px 120px;
  animation: sunMotes 5.8s ease-in-out infinite alternate;
  opacity: .7
}
@keyframes sunMotes {
  from {
    transform: translateY(0)
  }
  to {
    transform: translateY(-24px)
  }
}

/* 11. NEBULOSA CÓSMICA (INTERSTELLAR DUST & STARFIELDS) */
.pet-stage.bg-nebula {
  background: radial-gradient(circle at 50% 22%, #581c87 0%, #2e1065 40%, #0f0728 80%, #05020e 100%)
}
.pet-stage.bg-nebula::before {
  background-image: radial-gradient(ellipse at 25% 65%, rgba(168, 85, 247, 0.35) 0%, transparent 65%), radial-gradient(ellipse at 75% 30%, rgba(59, 130, 246, 0.35) 0%, transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 250'%3E%3C!-- Nebula Cloud Dust and Rune Circle --%3E%3Cellipse cx='250' cy='246' rx='190' ry='22' fill='%23120524' stroke='%23a855f7' stroke-width='2.5'/%3E%3Cellipse cx='250' cy='246' rx='155' ry='16' fill='none' stroke='%2338bdf8' stroke-width='1.5' stroke-dasharray='6 4' opacity='.75'/%3E%3C/svg%3E");
  background-size: auto, auto, 100% auto;
  background-position: center, center, bottom center;
  background-repeat: no-repeat
}
.pet-stage.bg-nebula::after {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.9) 1.2px, transparent 1.2px), radial-gradient(circle, rgba(192, 132, 252, 0.95) 1.8px, transparent 1.8px);
  background-size: 65px 65px, 115px 115px;
  animation: cosmicDrift 22s linear infinite;
  opacity: .8
}
@keyframes cosmicDrift {
  from {
    background-position: 0 0, 0 0
  }
  to {
    background-position: 65px 130px, -115px 230px
  }
}

/* 12. MATRIZ CUÁNTICA (CYBER VAULT & BINARY DATA STREAM) */
.pet-stage.bg-matrix {
  background: radial-gradient(circle at 50% 28%, #064e3b 0%, #022c22 45%, #01150f 85%, #000705 100%)
}
.pet-stage.bg-matrix::before {
  background-image: linear-gradient(180deg, transparent 65%, rgba(34, 197, 94, 0.3) 66%, transparent 67%), linear-gradient(90deg, rgba(34, 197, 94, 0.2) 1px, transparent 1px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 250'%3E%3C!-- Quantum Grid Pad --%3E%3Cellipse cx='250' cy='246' rx='190' ry='22' fill='%23021911' stroke='%2322c55e' stroke-width='2.5'/%3E%3Cellipse cx='250' cy='246' rx='155' ry='16' fill='none' stroke='%2386efac' stroke-width='1.5' stroke-dasharray='8 5'/%3E%3Cpath d='M170 246 L330 246 M250 230 L250 262' stroke='%2322c55e' stroke-width='1.5' opacity='.6'/%3E%3C/svg%3E");
  background-size: 100% 22px, 22px 100%, 100% auto;
  background-position: center, center, bottom center;
  background-repeat: repeat, repeat, no-repeat
}
.pet-stage.bg-matrix::after {
  background-image: repeating-linear-gradient(180deg, rgba(34, 197, 94, 0.9) 0px, rgba(34, 197, 94, 0.9) 2px, transparent 2px, transparent 15px);
  background-size: 100% 95px;
  animation: matrixRain 2.4s linear infinite;
  opacity: .55
}
@keyframes matrixRain {
  from {
    background-position: 0 0
  }
  to {
    background-position: 0 95px
  }
}

/* Tratamiento visual premium de los escenarios: la ilustracion inferior se
   conserva, pero cada bioma gana una atmosfera propia y mejor separacion de
   planos para que la mascota sea el punto focal. */
.pet-stage.bg-cyber {
  background: radial-gradient(ellipse at 50% 18%, rgba(236, 72, 153, .42), transparent 34%), linear-gradient(115deg, rgba(6, 182, 212, .18), transparent 38%), linear-gradient(180deg, #17052d 0%, #321052 42%, #090b16 100%);
  background-blend-mode: screen, screen, normal
}
.pet-stage.bg-forest {
  background: radial-gradient(ellipse at 50% 14%, rgba(167, 243, 208, .3), transparent 28%), linear-gradient(75deg, rgba(16, 185, 129, .18), transparent 40%), radial-gradient(circle at 50% 20%, #087f63, #064e3b 45%, #01130f 100%);
  background-blend-mode: screen, screen, normal
}
.pet-stage.bg-volcano {
  background: radial-gradient(ellipse at 50% 82%, rgba(251, 146, 60, .55), transparent 34%), linear-gradient(105deg, rgba(239, 68, 68, .22), transparent 45%), radial-gradient(circle at 50% 25%, #ef4444, #881337 46%, #120102 100%);
  background-blend-mode: screen, screen, normal
}
.pet-stage.bg-nebula {
  background: radial-gradient(ellipse at 20% 66%, rgba(192, 132, 252, .5), transparent 38%), radial-gradient(ellipse at 82% 25%, rgba(59, 130, 246, .48), transparent 34%), linear-gradient(145deg, #4c1d95 0%, #1e1b4b 48%, #05020e 100%);
  background-blend-mode: screen, screen, normal
}

.pet-stage.bg-cyber .pet-avatar-box {
  filter: drop-shadow(0 0 18px rgba(6, 182, 212, 0.55))
}
.pet-stage.bg-castle .pet-avatar-box {
  filter: drop-shadow(0 0 18px rgba(147, 197, 253, 0.5))
}
.pet-stage.bg-zen .pet-avatar-box {
  filter: drop-shadow(0 0 16px rgba(244, 114, 182, 0.5))
}
.pet-stage.bg-orbital .pet-avatar-box {
  filter: drop-shadow(0 0 18px rgba(56, 189, 248, 0.55))
}
.pet-stage.bg-desert .pet-avatar-box {
  filter: drop-shadow(0 0 18px rgba(251, 191, 36, 0.45))
}
.pet-stage.bg-forest .pet-avatar-box {
  filter: drop-shadow(0 0 16px rgba(52, 211, 153, 0.45))
}
.pet-stage.bg-volcano .pet-avatar-box {
  filter: drop-shadow(0 0 20px rgba(239, 68, 68, 0.6))
}
.pet-stage.bg-aurora .pet-avatar-box {
  filter: drop-shadow(0 0 18px rgba(16, 185, 129, 0.55))
}
.pet-stage.bg-ocean .pet-avatar-box {
  filter: drop-shadow(0 0 18px rgba(14, 165, 233, 0.55))
}
.pet-stage.bg-sunset .pet-avatar-box {
  filter: drop-shadow(0 0 18px rgba(251, 146, 60, 0.55))
}
.pet-stage.bg-nebula .pet-avatar-box {
  filter: drop-shadow(0 0 18px rgba(168, 85, 247, 0.5))
}
.pet-stage.bg-matrix .pet-avatar-box {
  filter: drop-shadow(0 0 20px rgba(34, 197, 94, 0.6))
}

.pet-visual-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 2
}
.pet-avatar-box {
  position: relative;
  width: 178px;
  height: 205px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition: transform .2s ease, filter .3s ease;
  isolation: isolate;
}
#homePetBox {
  position: relative;
  isolation: isolate;
}
.pet-svg,
.pet-svg *,
.accessory-svg,
.accessory-svg * {
  forced-color-adjust: none !important;
  print-color-adjust: exact !important;
  -webkit-print-color-adjust: exact !important;
  color-scheme: light !important
}
.pet-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 14px rgba(35, 25, 80, 0.2));
  transition: transform .15s ease;
  position: relative;
  z-index: 2;
  overflow: visible;
  transform-origin: 50% 60%
}
.pet-actor-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 60%;
}
.pet-actor-stage:not(.pet-mini) {
  animation: petIdle 3.8s ease-in-out infinite;
}
.pet-stage:active .pet-actor-stage,
.pet-stage:active .pet-svg {
  animation: none;
  transform: scale(0.92) translateY(2px);
}
.pet-svg .pet-pupil {
  transform-box: fill-box;
  transform-origin: center;
  animation: petBlink 5.2s ease-in-out infinite
}
.pet-svg .pet-tail {
  transform-box: fill-box;
  transform-origin: left center;
  animation: petTail 2.6s ease-in-out infinite
}
.pet-svg .pet-wing {
  transform-box: fill-box;
  transform-origin: center;
  animation: petWing 3.6s ease-in-out infinite
}
@keyframes petIdle {
  0%,
  100% {
    transform: translateY(0) rotate(0deg)
  }
  50% {
    transform: translateY(-4px) rotate(-0.6deg)
  }
}
@keyframes petBlink {
  0%,
  91%,
  100% {
    transform: scaleY(1)
  }
  94%,
  96% {
    transform: scaleY(0.08)
  }
}
@keyframes petTail {
  0%,
  100% {
    transform: rotate(0)
  }
  50% {
    transform: rotate(5deg)
  }
}
@keyframes petWing {
  0%,
  100% {
    transform: scaleY(1) rotate(0)
  }
  50% {
    transform: scaleY(0.96) rotate(2deg)
  }
}
.pet-stage:active .pet-svg {
  animation: none;
  transform: scale(0.92) translateY(2px)
}
.pet-bouncing {
  animation: petBounce .5s ease
}
@keyframes petBounce {
  0%,
  100% {
    transform: scale(1) translateY(0)
  }
  50% {
    transform: scale(1.08) translateY(-10px)
  }
}

.pet-accessory-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none
}
.pet-accessory-layer.layer-clothes {
  z-index: 3
}
.pet-accessory-layer.layer-hat {
  z-index: 6
}
.pet-accessory-layer.layer-glasses {
  z-index: 7
}
.accessory-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible
}
.pet-info-box {
  text-align: center;
  margin-top: 10px;
  width: 100%;
  position: relative;
  z-index: 4
}
.pet-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px
}
.pet-name {
  margin: 0;
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -0.5px
}
.pet-edit-btn {
  padding: 3px 7px;
  font-size: 11px
}
.pet-subtitle {
  font-size: 13px;
  font-weight: 600;
  margin-top: 3px
}
.pet-tap-hint {
  display: block;
  font-size: 11px;
  margin-top: 4px;
  font-weight: 500
}
.pet-mood-badge {
  position: absolute;
  bottom: 4px;
  right: -4px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  display: grid;
  place-items: center;
  font-size: 18px;
  border: 3px solid var(--border);
  z-index: 8
}

.pet-aura-layer {
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  z-index: 0; /* ESTRICTAMENTE DETRÁS DE LA MASCOTA (z-index: 2) */
  pointer-events: none;
  transform-origin: 50% 55%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#homePetBox .pet-aura-layer {
  inset: -16px;
}

/* Aura de Fuego (201) */
.aura-fire {
  background: radial-gradient(circle at 50% 55%,
    rgba(255, 150, 0, 0.5) 0%,
    rgba(249, 115, 22, 0.65) 45%,
    rgba(239, 68, 68, 0.5) 68%,
    rgba(185, 28, 28, 0.2) 84%,
    transparent 96%
  );
  filter: drop-shadow(0 0 24px rgba(249, 115, 22, 0.75)) drop-shadow(0 0 44px rgba(239, 68, 68, 0.45));
  animation: auraFirePulse 1.6s ease-in-out infinite alternate;
}
.aura-fire::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(254, 240, 138, 0.6) 0%,
    rgba(249, 115, 22, 0.45) 55%,
    transparent 75%
  );
  filter: blur(8px);
  animation: auraFireSwirl 3.4s linear infinite;
}
.aura-fire::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px dashed rgba(251, 146, 60, 0.4);
  animation: auraSpin 7s linear infinite;
}

/* Brillo Estelar (202) */
.aura-stars {
  background: radial-gradient(circle at 50% 55%,
    rgba(216, 180, 254, 0.5) 0%,
    rgba(168, 85, 247, 0.65) 45%,
    rgba(59, 130, 246, 0.55) 70%,
    rgba(147, 51, 234, 0.25) 86%,
    transparent 98%
  );
  filter: drop-shadow(0 0 25px rgba(168, 85, 247, 0.75)) drop-shadow(0 0 46px rgba(59, 130, 246, 0.5));
  animation: auraStarsPulse 3s ease-in-out infinite alternate;
}
.aura-stars::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(232, 121, 249, 0.55) 0%,
    rgba(99, 102, 241, 0.4) 60%,
    transparent 80%
  );
  filter: blur(9px);
  animation: auraSpin 9s linear infinite;
}
.aura-stars::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px dotted rgba(192, 132, 252, 0.5);
  animation: auraSpinReverse 11s linear infinite;
}

/* Fuerza Divina (203) */
.aura-lightning {
  background: radial-gradient(circle at 50% 55%,
    rgba(254, 240, 138, 0.6) 0%,
    rgba(250, 204, 21, 0.72) 42%,
    rgba(6, 182, 212, 0.62) 70%,
    rgba(234, 179, 8, 0.25) 88%,
    transparent 98%
  );
  filter: drop-shadow(0 0 28px rgba(250, 204, 21, 0.85)) drop-shadow(0 0 50px rgba(6, 182, 212, 0.55));
  animation: auraLightningPulse 1s ease-in-out infinite alternate;
}
.aura-lightning::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(34, 211, 238, 0.5) 55%,
    transparent 78%
  );
  filter: blur(8px);
  animation: auraFlicker 0.45s infinite alternate;
}
.aura-lightning::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px dashed rgba(250, 204, 21, 0.5);
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.45);
  animation: auraSpin 4.5s linear infinite;
}

@keyframes auraFirePulse {
  0% { transform: scale(0.93); opacity: 0.78; }
  100% { transform: scale(1.07); opacity: 1; }
}
@keyframes auraFireSwirl {
  0% { transform: rotate(0deg) scale(0.95); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(0.95); }
}
@keyframes auraStarsPulse {
  0% { transform: scale(0.92); opacity: 0.75; }
  100% { transform: scale(1.06); opacity: 1; }
}
@keyframes auraLightningPulse {
  0% { transform: scale(0.94); opacity: 0.8; }
  100% { transform: scale(1.08); opacity: 1; filter: drop-shadow(0 0 35px rgba(250, 204, 21, 0.95)) drop-shadow(0 0 55px rgba(6, 182, 212, 0.65)); }
}
@keyframes auraPulse {
  from { transform: scale(0.88); opacity: .6; }
  to { transform: scale(1.15); opacity: 1; }
}
@keyframes auraSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes auraSpinReverse {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
@keyframes auraFlicker {
  0% { opacity: .45; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1.08); }
}

/* SHOP & MODALS */
.shop-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 2px 8px;
  margin-bottom: 12px;
  cursor: grab;
  user-select: none
}
.shop-tabs.is-dragging {
  cursor: grabbing
}
.shop-tabs::-webkit-scrollbar {
  display: none
}
.shop-tab {
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 750;
  background: #f5f5fa;
  color: var(--muted);
  white-space: nowrap;
  flex: none
}
.shop-tab.active {
  background: var(--primary);
  color: #fff
}
.inventory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 10px
}
.item {
  padding: 26px 8px 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  text-align: center;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative
}
.item .emoji {
  font-size: 30px;
  margin-bottom: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 36px
}
.item-tag {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 99px
}
.rarity-common {
  border-color: #cbd5e1
}
.rarity-common .item-tag {
  background: #e2e8f0;
  color: #475569
}
.rarity-rare {
  border-color: #93c5fd
}
.rarity-rare .item-tag {
  background: #dbeafe;
  color: #1d4ed8
}
.rarity-epic {
  border-color: #d8b4fe
}
.rarity-epic .item-tag {
  background: #f3e8ff;
  color: #7e22ce
}
.rarity-legendary {
  border-color: #fde047;
  box-shadow: 0 4px 14px rgba(250, 204, 21, 0.2)
}
.rarity-legendary .item-tag {
  background: #fef08a;
  color: #a16207
}
.deal-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 6px
}
.preview-banner {
  background: #f0efff;
  border: 1px dashed var(--primary);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px
}
.battery-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: linear-gradient(135deg, rgba(108, 99, 255, 0.08), rgba(244, 183, 64, 0.12));
  border: 1.5px solid rgba(108, 99, 255, 0.28);
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 20px;
  box-shadow: 0 4px 18px rgba(108, 99, 255, 0.06);
  animation: fadeInDown 0.3s ease;
}
body.dark .battery-banner {
  background: linear-gradient(135deg, rgba(108, 99, 255, 0.18), rgba(244, 183, 64, 0.1));
  border-color: rgba(108, 99, 255, 0.45);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}
.battery-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.battery-banner-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}
.battery-banner-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.35;
}
.battery-banner-text strong {
  font-size: 14px;
  font-weight: 750;
  color: var(--text);
}
.battery-banner-text span {
  color: var(--muted);
  font-size: 12px;
}
.battery-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.battery-banner-btn {
  white-space: nowrap;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(108, 99, 255, 0.25);
}
.battery-banner-close {
  background: transparent;
  border: none;
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
}
.battery-banner-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text);
}
@media (max-width: 640px) {
  .battery-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 14px;
  }
  .battery-banner-actions {
    justify-content: flex-end;
  }
}
.chart {
  height: 200px;
  display: flex;
  align-items: end;
  gap: 10px;
  padding-top: 20px
}
.barcol {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  gap: 6px;
  height: 100%
}
.barcol i {
  display: block;
  width: 100%;
  max-width: 32px;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, var(--primary2), var(--primary));
  min-height: 4px
}
.barcol span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 750;
  text-align: center
}
.stats-grid {
  grid-template-columns: repeat(4, 1fr)
}
.big-stat {
  font-size: 28px;
  font-weight: 850
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 18, 28, 0.45);
  display: none;
  place-items: center;
  padding: 20px;
  z-index: 100;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px)
}
#yesterdayReviewModal {
  z-index: 500 !important;
}
.modal-backdrop.show {
  display: grid
}
/* ==========================================================================
   ESTRUCTURA LIMPIA Y SIMÉTRICA PARA MODALES (ESPECIAL MÓVIL)
   ========================================================================== */
.modal {
  width: min(640px, 94vw);
  background: var(--card);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0; /* Evita que inputs con contenido largo rompan la columna */
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--border);
  background: #fff;
  padding: 11px 13px;
  border-radius: 12px;
  outline: 0;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color .2s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--primary);
}

/* Modo gradual protegido contra desbordamiento */
.gradual-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
  padding: 14px;
  background: rgba(108, 99, 255, 0.05);
  border: 1px dashed var(--primary);
  border-radius: 14px;
  box-sizing: border-box;
  width: 100%;
}

/* Subtareas responsivas */
.subtask-container {
  padding: 12px;
  background: #f8f9fc;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.subtask-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.subtask-row:last-child {
  margin-bottom: 0;
}

/* Adaptación fluida para pantallas estrechas / móvil */
@media (max-width: 580px) {
  .modal {
    padding: 16px 14px;
    width: 95vw;
    border-radius: 18px;
  }
  
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  
  .gradual-panel {
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 12px;
  }
  
  .modal-foot {
    flex-direction: column-reverse;
    gap: 8px;
  }
  
  .modal-foot button {
    width: 100%;
  }
}
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px
}
.day-selector {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}
.day-chip {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer
}
.day-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary)
}
.reminders {
  display: grid;
  gap: 8px
}
.rem-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px
}
.bounty-card {
  border: 1px dashed var(--border);
  padding: 12px;
  border-radius: 14px;
  background: #fbfbfe;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px
}
.timer-display {
  font-size: 56px;
  font-weight: 900;
  text-align: center;
  font-variant-numeric: tabular-nums;
  margin: 20px 0;
  letter-spacing: 2px;
  color: var(--primary)
}
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #181a24;
  color: #fff;
  padding: 13px 16px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  display: none;
  z-index: 120
}
.toast.show {
  display: block
}
.quantity-picker {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: 14px;
  margin: 20px 0 8px
}
.quantity-step {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #f0efff;
  color: var(--primary);
  font-size: 30px;
  font-weight: 800
}
.quantity-picker output {
  text-align: center;
  color: var(--text);
  font-size: 38px;
  line-height: 1;
  font-weight: 850;
  font-variant-numeric: tabular-nums
}
.quantity-range {
  width: 100%;
  accent-color: var(--primary);
  min-height: 32px
}
.quantity-scale {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
  margin-top: -3px
}
.future-lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  padding: 6px 0
}
.connection-status {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 750;
  box-shadow: var(--shadow);
  z-index: 119;
  transition: opacity .2s ease, transform .2s ease;
}
.connection-status[hidden] {
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px)
}
.empty {
  padding: 30px;
  text-align: center;
  color: var(--muted)
}
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--border);
  z-index: 50;
  justify-content: space-around;
  align-items: center;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.05);
  transition: bottom 0.25s ease, padding 0.25s ease;
}
body.has-admob-banner .mobile-nav {
  bottom: calc(var(--admob-banner-height, 50px) + max(env(safe-area-inset-bottom, 0px), 12px) + 8px);
  padding: 6px 4px 6px;
  border-bottom: 2px solid rgba(108, 99, 255, 0.25);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
body.has-admob-banner::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--admob-banner-height, 50px) + max(env(safe-area-inset-bottom, 0px), 12px) + 8px);
  background: var(--bg);
  z-index: 45;
  pointer-events: none;
}

/* Blindaje de modales y paneles contra overlay de AdMob Banner */
body.has-admob-banner .modal-backdrop {
  padding-bottom: calc(var(--admob-banner-height, 50px) + max(env(safe-area-inset-bottom, 0px), 12px) + 16px) !important;
}
body.has-admob-banner .modal {
  max-height: calc(86vh - var(--admob-banner-height, 50px)) !important;
}
body.has-admob-banner #adminModal .modal {
  max-height: calc(85vh - var(--admob-banner-height, 50px)) !important;
}
body.has-admob-banner #adminModalBody {
  padding-bottom: 42px !important;
}
body.has-admob-banner #sanctuaryModalContent {
  padding-bottom: 28px !important;
}
body.has-admob-banner #wheelActionArea {
  padding-bottom: 18px !important;
}
body.has-admob-banner .modal-styled-qty {
  padding-bottom: 20px !important;
}
.mobile-nav button {
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  min-width: 48px
}
.mobile-nav button span:first-child {
  font-size: 18px;
  line-height: 1
}
.xp-float {
  position: fixed;
  z-index: 999;
  font-weight: 900;
  color: var(--primary);
  animation: floatxp 1.2s ease forwards;
  pointer-events: none
}
@keyframes floatxp {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.8)
  }
  20% {
    opacity: 1
  }
  100% {
    opacity: 0;
    transform: translateY(-70px) scale(1.15)
  }
}
.pet-reaction {
  position: fixed;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  font-size: 34px;
  font-weight: 900;
  z-index: 998;
  animation: react 1.4s ease forwards;
  pointer-events: none
}
@keyframes react {
  0% {
    opacity: 0;
    transform: translate(-50%, 15px) scale(0.7)
  }
  25% {
    opacity: 1
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -55px) scale(1.15)
  }
}

/* ADMIN & PREVIEWS */
.admin-section {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
  background: #fcfcfd
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 10px
}
.pet-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
  gap: 8px;
  margin-top: 10px
}
.pet-preview-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 4px;
  text-align: center;
  background: #fff;
  cursor: pointer;
  transition: transform .15s;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}
.pet-preview-card:hover {
  transform: scale(1.04);
  border-color: var(--primary)
}
.pet-mini {
  filter: drop-shadow(0 3px 5px rgba(35, 25, 80, 0.18))
}
.pet-preview-card .pet-svg {
  width: 42px;
  height: 49px;
  display: block;
  margin: auto
}
.pet-preview-card b {
  margin-top: 2px
}

@media(max-width:768px) {
  .pet-avatar-box {
    width: 145px;
    height: 170px
  }
  .pet-mood-badge {
    right: -2px;
    bottom: 0
  }
}
@media(prefers-reduced-motion:reduce) {
  .pet-svg:not(.pet-mini),
  .pet-svg .pet-pupil,
  .pet-svg .pet-tail,
  .pet-svg .pet-wing,
  .pet-stage::after,
  .pet-stage::before {
    animation: none !important
  }
}

/* DARK MODE */
/* Blindaje total para que ningún filtro afecte a los dibujos */
.pet-avatar-box,
.pet-svg,
.pet-svg *,
.pet-accessory-layer,
.accessory-svg,
.accessory-svg * {
  forced-color-adjust: none !important;
  print-color-adjust: exact !important;
  -webkit-print-color-adjust: exact !important;
  color-scheme: light !important;
  mix-blend-mode: normal !important;
}
/* Solo aplica el fondo oscuro neutro si el usuario no tiene ningún escenario equipado */
/* ==========================================================================
   MODO OSCURO PREMIUM & OPTIMIZADO V2
   ========================================================================== */
body.dark {
  --bg: #0b0d14;
  --card: #131722;
  --card-bg: var(--card);
  --bg-alt: rgba(255, 255, 255, 0.04);
  --text: #f1f3f9;
  --muted: #8e95ab;
  --border: #22283a;
  --shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
  --primary: #7c72ff;
  --primary2: #9d94ff;
  color-scheme: dark;
}

/* Scrollbars nativos en modo oscuro */
body.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body.dark ::-webkit-scrollbar-track {
  background: #0b0d14;
}
body.dark ::-webkit-scrollbar-thumb {
  background: #252c40;
  border-radius: 99px;
  border: 2px solid #0b0d14;
}
body.dark ::-webkit-scrollbar-thumb:hover {
  background: #3a4462;
}

/* Superficies principales y jerarquía de capas */
body.dark .sidebar {
  background: #0f121b;
  border-right-color: #1e2436;
}
body.dark .main {
  background: var(--bg);
}
body.dark .card {
  background: var(--card);
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
body.dark .mobile-nav {
  background: rgba(15, 18, 27, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top-color: #1e2436;
  border-bottom-color: #1e2436;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}
body.dark .modal {
  background: #141825;
  border: 1px solid #283148;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
}
body.dark .modal-backdrop {
  background: rgba(4, 6, 12, 0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Tarjeta Hero */
body.dark .hero {
  background: linear-gradient(135deg, #141826 35%, #221c44 100%);
  border-color: rgba(124, 114, 255, 0.28);
  box-shadow: 0 12px 32px rgba(124, 114, 255, 0.08);
}

/* Tarjetas de Hábitos y Contenedores */
body.dark .habit {
  background: #161b28;
  border-color: rgba(255, 255, 255, 0.07);
}
body.dark .habit:hover {
  background: #1a2132;
  border-color: rgba(124, 114, 255, 0.35);
}
body.dark .habit-icon {
  background: #1c2234;
  border-color: #2a334d;
}
body.dark .habit-note {
  background: rgba(124, 114, 255, 0.12);
  color: #c4b5fd;
  border: 1px solid rgba(124, 114, 255, 0.25);
}

/* Subtareas responsivas en oscuro */
body.dark .subtask-container {
  background: #0f131d;
  border-color: #22283a;
}
body.dark .subtask-item {
  color: var(--text);
}
body.dark .subtask-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Navegación y botones de la barra lateral */
body.dark .nav button {
  color: #8e95ab;
}
body.dark .nav button:hover {
  background: rgba(124, 114, 255, 0.12);
  color: #f1f3f9;
}
body.dark .nav button.active,
body.dark .mobile-nav button.active {
  background: rgba(124, 114, 255, 0.22);
  color: #a99fff;
  font-weight: 800;
}
body.dark .theme {
  background: #151926;
  border-color: #242c40;
  color: #cdd3e4;
}
body.dark .theme:hover {
  background: #1c2234;
  border-color: var(--primary);
  color: #fff;
}

/* Botones y controles interactivos */
body.dark .btn {
  background: #1a2030;
  color: var(--text);
  border-color: #28324a;
}
body.dark .btn:hover {
  background: #222a40;
  border-color: #384668;
}
body.dark .btn.secondary {
  background: rgba(124, 114, 255, 0.14);
  color: #a99fff;
  border-color: rgba(124, 114, 255, 0.32);
}
body.dark .btn.secondary:hover {
  background: rgba(124, 114, 255, 0.25);
  color: #fff;
  border-color: rgba(124, 114, 255, 0.5);
}

/* Formulario e inputs */
body.dark input,
body.dark select,
body.dark textarea {
  color-scheme: dark;
}
body.dark .filters input,
body.dark .filters select,
body.dark .field input,
body.dark .field select,
body.dark .field textarea,
body.dark select option {
  background: #0f131d;
  color: var(--text);
  border-color: #252c40;
}
body.dark .filters input:focus,
body.dark .filters select:focus,
body.dark .field input:focus,
body.dark .field select:focus,
body.dark .field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124, 114, 255, 0.2);
}

/* Botones de estado de hábitos en oscuro */
body.dark .status-btn {
  background: #171c2a;
  color: var(--muted);
  border-color: #252c40;
}
body.dark .status-btn:hover {
  background: #1f2538;
  color: var(--text);
  border-color: #36405c;
}
body.dark .status-label.pending {
  background: #1a2030;
  color: var(--muted);
}
body.dark .status-label.done,
body.dark .status-btn.done-active {
  background: rgba(47, 191, 113, 0.2) !important;
  color: #4ade80 !important;
  border-color: rgba(74, 222, 128, 0.45) !important;
}
body.dark .status-label.failed,
body.dark .status-btn.fail-active {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
  border-color: rgba(248, 113, 113, 0.45) !important;
}
body.dark .status-label.skipped,
body.dark .status-btn.skip-active {
  background: rgba(139, 92, 246, 0.2) !important;
  color: #c4b5fd !important;
  border-color: rgba(167, 139, 250, 0.45) !important;
}
body.dark .status-label.shield,
body.dark .status-btn.shield-active {
  background: rgba(234, 179, 8, 0.2) !important;
  color: #fde047 !important;
  border-color: rgba(250, 204, 21, 0.45) !important;
}
body.dark .status-label.vacation {
  background: rgba(14, 165, 233, 0.2) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
}

/* Badges de dificultad y polaridad */
body.dark .diff-easy {
  background: rgba(56, 189, 248, 0.16);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}
body.dark .diff-medium {
  background: rgba(234, 179, 8, 0.16);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.3);
}
body.dark .diff-hard {
  background: rgba(249, 115, 22, 0.16);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.3);
}
body.dark .diff-epic {
  background: rgba(168, 85, 247, 0.16);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}
body.dark .habit-polarity-pos {
  background: rgba(47, 191, 113, 0.18);
  color: #4ade80;
}
body.dark .habit-polarity-neg {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
}

/* Pastillas, etiquetas y chips */
body.dark .pill,
body.dark .tag {
  background: #1a2030;
  color: #cdd3e4;
  border: 1px solid #273048;
}
body.dark .day-chip {
  background: #171c2a;
  color: var(--text);
  border-color: #252c40;
}
body.dark .day-chip.active {
  background: rgba(124, 114, 255, 0.25);
  border-color: var(--primary);
  color: #fff;
}
body.dark span.tag[style*="background:#fef08a"] {
  background: rgba(234, 179, 8, 0.2) !important;
  color: #fde047 !important;
  border: 1px solid rgba(234, 179, 8, 0.4) !important;
}

/* Calendario */
body.dark .day {
  background: #141825;
  border-color: #22283a;
}
body.dark .day:hover {
  background: #1c2234;
  border-color: var(--primary);
}
body.dark .day.today {
  border-color: var(--primary);
  box-shadow: 0 0 14px rgba(124, 114, 255, 0.3);
}
body.dark .day strong {
  color: var(--text);
}
body.dark .cal-head {
  color: var(--muted);
}

/* Barras de progreso */
body.dark .bar {
  background: #1b2030;
}

/* Santuario e inventario en oscuro */
body.dark .pet-stage:not([class*="bg-"]) {
  background: radial-gradient(circle at 50% 35%, #241f48 0%, #0d0f17 72%);
  border-color: #242c40;
}
body.dark .pet-mood-badge {
  background: #151926;
  border-color: #283148;
}
body.dark .shop-tab {
  background: #151926;
  color: var(--muted);
  border: 1px solid #232a3c;
}
body.dark .shop-tab:hover {
  background: #1c2234;
  color: var(--text);
}
body.dark .shop-tab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
body.dark .item {
  background: #151926;
  border-color: #242b3e;
}
body.dark .item:hover {
  border-color: rgba(124, 114, 255, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
body.dark .rarity-common { border-color: #2d3748; }
body.dark .rarity-common .item-tag { background: #1e2638; color: #94a3b8; }
body.dark .rarity-rare { border-color: #1e3a8a; }
body.dark .rarity-rare .item-tag { background: rgba(30, 58, 138, 0.4); color: #93c5fd; }
body.dark .rarity-epic { border-color: #581c87; }
body.dark .rarity-epic .item-tag { background: rgba(88, 28, 135, 0.4); color: #d8b4fe; }
body.dark .rarity-legendary { border-color: #713f12; box-shadow: 0 4px 14px rgba(234, 179, 8, 0.15); }
body.dark .rarity-legendary .item-tag { background: rgba(113, 63, 18, 0.4); color: #fde047; }
body.dark .preview-banner {
  background: rgba(124, 114, 255, 0.14);
  border-color: rgba(124, 114, 255, 0.45);
}

/* Quick stats y Misiones */
body.dark .quick .q {
  background: #161b28;
  border: 1px solid #232a3c;
}
body.dark .bounty-card {
  background: #161b28;
  border-color: #232a3c;
}
body.dark .bounty-card:hover {
  border-color: rgba(124, 114, 255, 0.35);
}

/* Selector de cantidad y tarjetas auxiliares */
body.dark .quantity-step {
  background: rgba(124, 114, 255, 0.18);
  color: #a99fff;
}
body.dark .gradual-panel {
  background: rgba(124, 114, 255, 0.08);
  border-color: rgba(124, 114, 255, 0.35);
}
body.dark .notification-test-card {
  background: #161b28;
  border-color: #252c40;
}
body.dark .admin-section {
  background: #161b28;
  border-color: #242b3e;
}
body.dark .pet-preview-card {
  background: #191f2e;
  border-color: #28324a;
}
body.dark .toast {
  background: #1d2334;
  border: 1px solid #333d58;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
}
body.dark .empty {
  color: var(--muted);
}

/* ============================================================================
   TABLET & MOBILE BASE (PANTALLAS <= 1024px: IPAD, TABLETS Y MÓVILES)
   ============================================================================ */
@media (max-width: 1024px) {
  .sidebar {
    display: none !important;
  }
  .mobile-nav {
    display: flex !important;
  }
  .main {
    margin-left: 0 !important;
  }
  .toast {
    right: 16px;
    left: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    text-align: center;
    transition: bottom 0.25s ease;
  }
  body.has-admob-banner .toast {
    bottom: calc(var(--admob-banner-height, 50px) + max(env(safe-area-inset-bottom, 0px), 12px) + 64px);
  }
  .connection-status {
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }
  body.has-admob-banner .connection-status {
    bottom: calc(var(--admob-banner-height, 50px) + max(env(safe-area-inset-bottom, 0px), 12px) + 60px);
  }
  .admin-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pet-preview-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .modal-backdrop {
    padding: calc(max(env(safe-area-inset-top, 0px), 12px) + 8px) 16px calc(max(env(safe-area-inset-bottom, 0px), 12px) + 8px);
  }
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  .habit-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }
  .status-actions {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin-top: 10px;
  }
  .quick-status {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
  }
  .quick-status-row {
    width: 100%;
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .quick-status-utils {
    flex-wrap: wrap;
  }
  .quick-status-utils .status-btn {
    flex: 1 1 0;
    min-width: 70px;
    padding: 8px 8px;
    font-size: 12.5px;
    font-weight: 750;
    min-height: 38px;
  }
  .quick-status-actions {
    display: flex;
    gap: 6px;
    width: 100%;
  }
  .quick-status-actions .status-btn {
    flex: 1 1 0px;
    min-width: 0;
    padding: 8px 2px;
    font-size: 16px;
    min-height: 42px;
    width: auto;
  }
  .status-btn {
    padding: 9px 8px;
    font-size: 12px;
    min-height: 42px;
    border-radius: 12px;
    touch-action: manipulation;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .habit-top-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .habit-top-actions .btn.sm {
    min-width: 36px;
    min-height: 36px;
    padding: 6px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }
}

/* ============================================================================
   EXPERIENCIA PREMIUM PARA IPAD Y TABLETS (601px <= ancho <= 1024px)
   ============================================================================ */
@media (min-width: 601px) and (max-width: 1024px) {
  /* Dock flotante centrado de navegación tipo iPad */
  .mobile-nav {
    max-width: 650px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid var(--border) !important;
    border-bottom: none !important;
    padding: 8px 20px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Lienzo principal centrado y estilizado */
  .main {
    max-width: 860px !important;
    margin: 0 auto !important;
    padding: calc(max(env(safe-area-inset-top, 0px), 16px) + 16px) 24px calc(110px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.has-admob-banner .main {
    padding-bottom: calc(75px + var(--admob-banner-height, 50px) + max(env(safe-area-inset-bottom, 0px), 12px)) !important;
  }

  /* Barra superior equilibrada horizontalmente */
  .topbar {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 22px !important;
  }
  .topbar > div {
    width: auto !important;
  }
  .topbar .actions {
    width: auto !important;
    justify-content: flex-end !important;
  }
  .title {
    font-size: 26px !important;
  }

  /* Cuadrícula del Dashboard sin huecos vacíos */
  .dash-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    width: 100% !important;
  }
  .hero,
  .stat-card,
  .section,
  .sidecard {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: auto !important;
    box-sizing: border-box !important;
  }
  .hero {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 24px 28px !important;
    gap: 20px !important;
  }
  .hero > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .hero > div[style*="min-width:150px"] {
    flex-shrink: 0 !important;
    min-width: 160px !important;
    width: auto !important;
  }
  .hero h2 {
    font-size: 24px !important;
  }

  /* Hábitos en tablet: elegante vista de 2 columnas */
  .habits-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .filters {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }
  .filters input {
    flex: 1 1 200px !important;
    width: auto !important;
  }
  .filters select {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 140px !important;
  }
  .filters button {
    width: auto !important;
  }

  /* Página de Mascota en iPad */
  .pet-page {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    max-width: 720px !important;
    margin: 0 auto !important;
  }
  .pet-stage {
    min-height: 350px !important;
    border-radius: 20px !important;
    padding: 24px 20px !important;
    width: 100% !important;
  }
  .pet-avatar-box {
    width: 160px !important;
    height: 185px !important;
  }
  .inventory {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
  }
  .item {
    padding: 20px 8px 10px !important;
  }
  .stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
  }

  /* Perfil en iPad */
  .profile-hero-card {
    padding: 22px 26px !important;
    margin-bottom: 18px !important;
  }
  .profile-hero-split {
    grid-template-columns: 1fr auto 1fr !important;
    gap: 18px !important;
    align-items: center !important;
  }
  .profile-resource-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
  }
  .profile-settings-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* Calendario y Notas en iPad */
  .cal-card,
  .cal-notes-card {
    max-width: 820px !important;
    margin: 0 auto 20px !important;
  }
  .calendar {
    gap: 8px !important;
  }
  .day {
    min-height: 68px !important;
  }

  /* Botón Flotante de Ruleta en iPad */
  .wheel-fab {
    bottom: calc(75px + max(env(safe-area-inset-bottom, 0px), 10px)) !important;
    right: 24px !important;
    width: 52px !important;
    height: 52px !important;
  }
  body.has-admob-banner .wheel-fab {
    bottom: calc(var(--admob-banner-height, 50px) + max(env(safe-area-inset-bottom, 0px), 12px) + 72px) !important;
  }

  /* Modales en iPad */
  .modal {
    max-width: 600px !important;
    width: 90% !important;
    border-radius: 22px !important;
    padding: 22px !important;
    margin: auto !important;
  }
  .modal-foot {
    flex-direction: row !important;
    justify-content: flex-end !important;
  }
  .modal-foot button {
    width: auto !important;
  }
}

/* ============================================================================
   PANTALLAS MÓVILES (<= 600px: SMARTPHONES)
   ============================================================================ */
@media (max-width: 600px) {
  .main {
    padding: calc(max(env(safe-area-inset-top, 0px), 16px) + 12px) calc(max(env(safe-area-inset-right, 0px), 12px)) calc(95px + env(safe-area-inset-bottom, 0px)) calc(max(env(safe-area-inset-left, 0px), 12px));
  }
  body.has-admob-banner .main {
    padding-bottom: calc(65px + var(--admob-banner-height, 50px) + max(env(safe-area-inset-bottom, 0px), 12px)) !important;
  }
  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 14px;
  }
  .topbar > div {
    width: 100%;
  }
  .topbar > button,
  .topbar .actions {
    width: 100%;
    justify-content: center;
  }
  .title {
    font-size: 22px;
  }
  .hero {
    flex-direction: column;
    grid-column: span 12 !important;
    padding: 16px;
    gap: 14px;
  }
  .hero h2 {
    font-size: 20px;
  }
  .hero > div[style*="min-width:150px"] {
    min-width: 0 !important;
    width: 100%;
  }
  .stat-card,
  .sidecard,
  .section {
    grid-column: span 12 !important;
    padding: 16px;
  }
  .dash-grid,
  .grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
  .pet-page {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .pet-stage {
    min-height: 290px;
    border-radius: 18px;
    padding: 16px 10px;
    width: 100%;
    min-width: 0;
  }
  .pet-avatar-box {
    width: 140px;
    height: 165px;
  }
  .pet-mood-badge {
    width: 32px;
    height: 32px;
    font-size: 16px;
    bottom: 0;
    right: 0;
  }
  .pet-info-box {
    margin-top: 6px;
  }
  .pet-name {
    font-size: 19px;
  }
  .pet-subtitle {
    font-size: 12px;
  }
  .pet-tap-hint {
    font-size: 10.5px;
    margin-top: 2px;
  }
  .inventory {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
  .item {
    padding: 24px 6px 8px;
  }
  .item .emoji {
    min-height: 30px;
  }
  .preview-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 8px 10px;
  }
  .filters {
    flex-direction: column;
    gap: 8px;
  }
  .filters input,
  .filters select,
  .filters button {
    width: 100%;
  }
  .habits-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .habit {
    padding: 12px;
  }
  .habit-dot {
    min-height: 45px;
  }
  .calendar {
    gap: 4px;
  }
  .cal-head {
    font-size: 11px;
  }
  .day {
    min-height: 55px;
    padding: 4px;
  }
  .day strong {
    font-size: 12px;
  }
  .dots {
    gap: 2px;
    margin-top: 4px;
  }
  .dot {
    width: 5px;
    height: 5px;
  }
  .modal {
    padding: 16px;
    border-radius: 18px;
    max-height: 88vh;
    width: 100%;
    max-width: 100%;
  }
  .modal-foot {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .modal-foot button {
    width: 100%;
  }
  .card {
    padding: 14px;
  }
}
@media all and (display-mode: standalone) {
  .main {
    padding-top: calc(max(env(safe-area-inset-top, 24px), 24px) + 12px);
  }
}
@media(max-width:380px) {
  .main {
    padding-left: 8px;
    padding-right: 8px;
  }
  .habit {
    padding: 10px 8px;
    gap: 8px;
  }
  .habit-dot {
    min-height: 40px;
  }
  .habit-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
    border-radius: 10px;
  }
  .habit-title {
    font-size: 14.5px;
    gap: 4px;
  }
  .habit-item-modern {
    padding: 8px 10px;
    gap: 8px;
  }
  .habit-item-icon {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
  .habit-circle-check {
    width: 32px;
    height: 32px;
  }
  .habit-qty-plus-btn, .habit-timer-icon-btn {
    height: 28px;
    min-height: 28px;
  }
  .quick-status-row {
    gap: 4px;
  }
  .quick-status-actions .status-btn {
    min-height: 38px;
    font-size: 14px;
    padding: 6px 1px;
  }
  .quick-status-utils .status-btn {
    font-size: 11.5px;
    padding: 6px 6px;
    min-height: 34px;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .pet-avatar-box {
    width: 125px;
    height: 148px;
  }
  .inventory {
    grid-template-columns: 1fr 1fr !important;
  }
  .status-btn {
    font-size: 10px;
  }
}

/* MEJORAS DEL CALENDARIO V2 */
.cal-top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cal-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.day {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.day:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--primary2);
}
.day.is-perfect {
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.08) 0%, var(--card) 100%);
  border-color: rgba(250, 204, 21, 0.6) !important;
}
.day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.day-num {
  font-size: 13px;
  font-weight: 800;
}
.day-badge {
  font-size: 11px;
}
.day-mini-bar {
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 4px;
}
.day-mini-fill {
  height: 100%;
  background: var(--success);
  border-radius: 99px;
  transition: width .2s ease;
}
body.dark .day.is-perfect {
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.12) 0%, var(--card) 100%);
}
.day-modal-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
  text-align: center;
}
.day-summary-box {
  background: var(--bg);
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.day-summary-box b {
  display: block;
  font-size: 18px;
  margin-top: 2px;
}

/* Resaltado de rango de fechas y selección en el Calendario */
.day.selected-day {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.18) !important;
  font-weight: bold;
}
.day.in-range-day {
  background: rgba(99, 102, 241, 0.08) !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
}
body.dark .day.selected-day {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.4);
  background: rgba(99, 102, 241, 0.28) !important;
}
body.dark .day.in-range-day {
  background: rgba(99, 102, 241, 0.16) !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
}

/* ============================================================================
   DIARIO Y NOTAS DEL CALENDARIO (AGENDA / CALENDAR NOTES)
   ============================================================================ */
.cal-notes-card {
  margin-top: 24px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
@media (max-width: 480px) {
  .cal-notes-card {
    padding: 16px 14px;
  }
}

.cal-notes-header {
  margin-bottom: 16px;
}
.cal-notes-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.cal-notes-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.cal-notes-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cal-notes-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.cal-notes-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
}
.cal-notes-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  background: rgba(99, 102, 241, 0.12);
  color: var(--primary);
  border: 1px solid rgba(99, 102, 241, 0.25);
  white-space: nowrap !important;
  flex-shrink: 0;
}
body.dark .cal-notes-badge {
  background: rgba(129, 140, 248, 0.18);
  color: #a5b4fc;
  border-color: rgba(129, 140, 248, 0.3);
}
.cal-notes-sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}
.cal-notes-add-btn {
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 12.5px;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cal-notes-add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
}
@media (max-width: 480px) {
  .cal-notes-top-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .cal-notes-add-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Barra de controles: Búsqueda y Selector de Hábito */
.cal-notes-controls-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 560px) {
  .cal-notes-controls-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
.cal-notes-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.cal-notes-search-icon {
  position: absolute;
  left: 12px;
  font-size: 14px;
  opacity: 0.6;
  pointer-events: none;
}
.cal-notes-search-input {
  width: 100%;
  height: 40px;
  padding: 0 34px 0 36px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
  font-family: inherit;
}
.cal-notes-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.cal-notes-clear-btn {
  position: absolute;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-notes-clear-btn:hover {
  color: var(--text);
}
.cal-notes-habit-wrap {
  position: relative;
  width: 100%;
}
.cal-notes-habit-wrap .cal-notes-select {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 0 32px 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}
.cal-notes-habit-wrap .cal-notes-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Fila de chips de fechas rápidas */
.cal-notes-quick-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  margin-bottom: 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  cursor: grab;
  user-select: none;
  scroll-behavior: smooth;
}
.cal-notes-quick-chips::-webkit-scrollbar {
  display: none;
}
.cal-notes-quick-chips.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}
.cal-filter-chip {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
  font-family: inherit;
  touch-action: pan-x pan-y;
  user-select: none;
}
.cal-filter-chip:hover {
  border-color: var(--primary);
  color: var(--text);
}
.cal-filter-chip.active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.3);
}

/* Selector de Rango de Fechas (Desde / Hasta) */
.cal-notes-date-range-box {
  background: rgba(99, 102, 241, 0.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: calNotesFadeIn 0.2s ease-out;
}
@keyframes calNotesFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
body.dark .cal-notes-date-range-box {
  background: rgba(255, 255, 255, 0.03);
}
.cal-range-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cal-range-tag {
  font-size: 11.5px;
  font-weight: 750;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cal-range-clear-btn {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: none;
  border-radius: 6px;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  transition: background .15s ease;
}
.cal-range-clear-btn:hover {
  background: rgba(239, 68, 68, 0.2);
}
.cal-range-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
}
.cal-date-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cal-date-input-group label {
  font-size: 10.5px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
}
.cal-notes-date-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 12.5px;
  background: var(--card);
  color: var(--text);
  outline: none;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
  font-family: inherit;
}
.cal-notes-date-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Lista de notas */
.cal-notes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cal-note-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  background: var(--bg);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.cal-note-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  border-color: rgba(99, 102, 241, 0.3);
}
.cal-note-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}
.cal-note-habit-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 8px;
  font-weight: 750;
  font-size: 13.5px;
  color: var(--text);
}
.cal-note-icon {
  font-size: 16px;
}
.cal-note-habit-name {
  font-weight: 750;
}
.cal-note-meta-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cal-note-date-badge {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.cal-note-body {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 10px;
  margin-bottom: 10px;
  border-left: 3px solid rgba(99, 102, 241, 0.4);
}
body.dark .cal-note-body {
  background: rgba(255, 255, 255, 0.025);
  border-left-color: rgba(129, 140, 248, 0.4);
}
.cal-note-quote-glyph {
  font-size: 15px;
  opacity: 0.7;
  flex-shrink: 0;
  margin-top: 1px;
}
.cal-note-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  flex: 1;
}
.cal-note-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

/* Estado vacío de notas */
.cal-notes-empty {
  text-align: center;
  padding: 36px 18px;
  border: 1.5px dashed var(--border);
  border-radius: 16px;
  margin: 8px 0;
  background: rgba(0, 0, 0, 0.01);
}
body.dark .cal-notes-empty {
  background: rgba(255, 255, 255, 0.01);
}
.cal-notes-empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
  opacity: 0.7;
}
.cal-notes-empty-title {
  font-size: 16px;
  font-weight: 750;
  margin-bottom: 4px;
  color: var(--text);
}
.cal-notes-empty-desc {
  font-size: 13px;
  max-width: 400px;
  margin: 0 auto 16px;
  line-height: 1.4;
  color: var(--muted);
}

/* SISTEMA AVANZADO DE HÁBITOS */
.subtask-list {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}
.subtask-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.subtask-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 4px 0;
}
.subtask-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.habit-polarity-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.habit-polarity-pos {
  background: #eafaf1;
  color: #258b58;
}
.habit-polarity-neg {
  background: #fff0f0;
  color: #c84b4b;
}
.diff-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.diff-easy { background: #e0f2fe; color: #0369a1; }
.diff-medium { background: #fef9c3; color: #854d0e; }
.diff-hard { background: #ffedd5; color: #c2410c; }
.diff-epic { background: #f3e8ff; color: #7e22ce; }

/* ==========================================================================
   MÓDULO DE ESTADÍSTICAS AVANZADAS V2
   ========================================================================== */
.stats-time-filter {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 16px;
}
.stats-trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
  margin-top: 6px;
}
.trend-up {
  background: rgba(47, 191, 113, 0.15);
  color: #258b58;
}
.trend-down {
  background: rgba(238, 107, 107, 0.15);
  color: #c84b4b;
}
.trend-neutral {
  background: rgba(115, 121, 138, 0.15);
  color: var(--muted);
}

/* Mapa de calor de consistencia */
.heatmap-container {
  overflow-x: auto;
  padding: 6px 2px 10px;
  -webkit-overflow-scrolling: touch;
}
.heatmap-grid {
  display: grid;
  grid-template-rows: repeat(7, 12px);
  grid-auto-flow: column;
  grid-auto-columns: 12px;
  gap: 3.5px;
}
.heat-cell {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--border);
  transition: transform .1s ease;
  cursor: pointer;
}
.heat-cell:hover {
  transform: scale(1.3);
  z-index: 5;
}
.heat-0 { background: #e8eaf1; }
.heat-1 { background: #c7eed8; }
.heat-2 { background: #8de0ad; }
.heat-3 { background: #48cf82; }
.heat-4 { background: #258b58; }

body.dark .heat-0 { background: #1e2232; }
body.dark .heat-1 { background: #134e32; }
body.dark .heat-2 { background: #1a754b; }
body.dark .heat-3 { background: #2fbf71; }
body.dark .heat-4 { background: #4ade80; }

/* Tarjeta de Hábitos Negativos */
.vices-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.vice-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  text-align: center;
}
.vice-box b {
  display: block;
  font-size: 20px;
  margin-top: 2px;
  color: #c84b4b;
}


/* === BOCADILLO DE DIÁLOGO DINÁMICO === */
.pet-speech-bubble {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #1a1e2d;
  border-radius: 16px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(20, 15, 45, 0.15), 0 2px 6px rgba(0, 0, 0, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  max-width: 290px;
  margin: 0 auto 14px auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 10;
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
  animation: bubblePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.pet-speech-bubble:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 28px rgba(20, 15, 45, 0.2);
}
.pet-speech-bubble:active {
  transform: scale(0.97);
}
.pet-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px 8px 0;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.95) transparent;
  display: block;
  width: 0;
}
.pet-speech-bubble .bubble-icon {
  font-size: 15px;
  flex-shrink: 0;
}
.pet-speech-bubble .bubble-text {
  flex: 1;
}
@keyframes bubblePop {
  0% { opacity: 0; transform: scale(0.8) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.bubble-bounce {
  animation: bubblePop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body.dark .pet-speech-bubble {
  background: rgba(26, 29, 45, 0.92);
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
body.dark .pet-speech-bubble::after {
  border-color: rgba(26, 29, 45, 0.92) transparent;
}

/* === SELECTOR DE MODO SANTUARIO (ARMARIO vs TIENDA) === */
.sanctuary-mode-switch {
  display: flex;
  background: var(--border);
  padding: 4px;
  border-radius: 14px;
  margin-bottom: 16px;
  gap: 4px;
}
.sanctuary-mode-switch button {
  flex: 1;
  border-radius: 10px;
  font-weight: 700;
  transition: all 0.2s ease;
}


/* ==========================================================================
   🏆 SISTEMA DE LOGROS & TROFEOS 2.0
   ========================================================================== */
.ach-mastery-banner {
  background: linear-gradient(135deg, rgba(108, 99, 255, 0.10), rgba(138, 130, 255, 0.04));
  border: 1px solid rgba(108, 99, 255, 0.22);
  border-radius: 18px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
body.dark .ach-mastery-banner {
  background: linear-gradient(135deg, rgba(108, 99, 255, 0.18), rgba(20, 24, 37, 0.75));
  border-color: rgba(108, 99, 255, 0.35);
}
.ach-mastery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.ach-mastery-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ach-mastery-title strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.ach-mastery-score {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.ach-pending-alert {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
  animation: pulseBadge 1.8s infinite;
}
.ach-mastery-bar {
  height: 8px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
body.dark .ach-mastery-bar {
  background: rgba(255, 255, 255, 0.1);
}
.ach-mastery-fill {
  height: 100%;
  background: linear-gradient(90deg, #6c63ff, #ec4899, #f59e0b);
  border-radius: 6px;
  transition: width 0.4s ease;
}

/* Filtros */
.ach-filter-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  cursor: grab;
  user-select: none;
  scroll-behavior: smooth;
}
.ach-filter-row::-webkit-scrollbar { display: none; }
.ach-filter-row.is-dragging,
.ach-cat-chips.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}
.ach-tab-btn {
  flex-shrink: 0;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  touch-action: pan-x pan-y;
  user-select: none;
}
.ach-tab-btn:hover { border-color: var(--primary); color: var(--text); }
.ach-tab-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(108, 99, 255, 0.25);
}
.ach-tab-btn .badge {
  background: rgba(255, 255, 255, 0.25);
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 4px;
  font-size: 11px;
}
.ach-tab-btn:not(.active) .badge {
  background: var(--border);
  color: var(--muted);
}
.ach-cat-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  cursor: grab;
  user-select: none;
  scroll-behavior: smooth;
}
.ach-cat-chips::-webkit-scrollbar { display: none; }
.ach-chip {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  touch-action: pan-x pan-y;
  user-select: none;
}
.ach-chip:hover { color: var(--text); }
.ach-chip.active {
  background: rgba(108, 99, 255, 0.12);
  border-color: var(--primary);
  color: var(--primary);
}
body.dark .ach-chip.active {
  background: rgba(108, 99, 255, 0.25);
  color: #c4b5fd;
}

/* Tarjetas */
.ach-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ach-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.ach-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
body.dark .ach-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.ach-card.tier-bronze { border-left: 4px solid #cd7f32; }
.ach-card.tier-silver { border-left: 4px solid #94a3b8; }
.ach-card.tier-gold { border-left: 4px solid #f59e0b; }
.ach-card.tier-diamond { border-left: 4px solid #38bdf8; }

.ach-card.claimed { opacity: 0.82; }
.ach-card.unlocked:not(.claimed) {
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), var(--card));
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.15);
}
body.dark .ach-card.unlocked:not(.claimed) {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), var(--card));
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.25);
}

.ach-badge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 48px;
}
.ach-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(0, 0, 0, 0.04);
}
body.dark .ach-icon-circle {
  background: rgba(255, 255, 255, 0.06);
}
.tier-bronze .ach-icon-circle { background: rgba(205, 127, 50, 0.15); }
.tier-silver .ach-icon-circle { background: rgba(148, 163, 184, 0.15); }
.tier-gold .ach-icon-circle { background: rgba(245, 158, 11, 0.15); }
.tier-diamond .ach-icon-circle { background: rgba(56, 189, 248, 0.15); }

.ach-tier-pill {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 6px;
}
.tier-bronze .ach-tier-pill { color: #cd7f32; background: rgba(205, 127, 50, 0.12); }
.tier-silver .ach-tier-pill { color: #64748b; background: rgba(148, 163, 184, 0.18); }
.tier-gold .ach-tier-pill { color: #d97706; background: rgba(245, 158, 11, 0.15); }
.tier-diamond .ach-tier-pill { color: #0284c7; background: rgba(56, 189, 248, 0.18); }
body.dark .tier-silver .ach-tier-pill { color: #cbd5e1; }
body.dark .tier-gold .ach-tier-pill { color: #fbbf24; }
body.dark .tier-diamond .ach-tier-pill { color: #7dd3fc; }

.ach-info {
  flex: 1;
  min-width: 0;
}
.ach-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.ach-title {
  font-weight: 750;
  font-size: 14px;
  color: var(--text);
}
.ach-rewards {
  font-size: 11px;
  font-weight: 700;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
  padding: 2px 7px;
  border-radius: 8px;
}
body.dark .ach-rewards {
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.2);
}
.ach-desc {
  font-size: 12px;
  color: var(--muted);
  margin: 3px 0 7px;
  line-height: 1.35;
}
.ach-prog-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ach-bar {
  flex: 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.07);
  border-radius: 4px;
  overflow: hidden;
}
body.dark .ach-bar {
  background: rgba(255, 255, 255, 0.08);
}
.ach-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: width 0.3s ease;
}
.ach-card.unlocked .ach-bar-fill {
  background: #22c55e;
}
.ach-prog-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.ach-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.ach-claim-btn {
  background: linear-gradient(135deg, #f59e0b, #e11d48) !important;
  color: #fff !important;
  font-weight: 800;
  border: none !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
  animation: pulseBadge 1.8s infinite;
  cursor: pointer;
  white-space: nowrap;
}
.ach-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 10px;
  white-space: nowrap;
}
.ach-status-badge.claimed {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}
body.dark .ach-status-badge.claimed {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}
.ach-status-badge.locked {
  background: rgba(0, 0, 0, 0.04);
  color: var(--muted);
}
body.dark .ach-status-badge.locked {
  background: rgba(255, 255, 255, 0.05);
}

/* Badge en la barra de navegación */
.nav-ach-badge {
  position: absolute;
  top: 5px;
  right: 12px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
  animation: pulseBadge 1.8s infinite;
  pointer-events: none;
  z-index: 10;
}
@media (max-width: 1024px) {
  .nav-ach-badge {
    top: 3px;
    right: 8px;
  }
}

/* Banner flotante de celebración en vivo */
.ach-celebrate-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-40px);
  background: linear-gradient(135deg, #1e1b4b, #312e81);
  color: #fff;
  padding: 12px 18px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 25px rgba(99, 102, 241, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 99999;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  max-width: 90vw;
}
.ach-celebrate-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ach-celebrate-icon {
  font-size: 28px;
}
.ach-celebrate-text strong {
  display: block;
  font-size: 13px;
  color: #fde047;
}
.ach-celebrate-text span {
  font-size: 12px;
  color: #e0e7ff;
}
.ach-celebrate-btn {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}


/* ==========================================================================
   👤 PERFIL 3-SUBTABS & HERO LAYOUT (Celular & PC)
   ========================================================================== */
.profile-subnav {
  display: flex;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
body.dark .profile-subnav {
  background: #141825;
  border-color: #262f45;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.profile-subnav-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-radius: 13px;
  padding: 9px 8px;
  color: var(--muted);
  font-weight: 750;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  white-space: nowrap;
  box-sizing: border-box;
}
.profile-subnav-btn:hover {
  color: var(--text);
  background: rgba(108, 99, 255, 0.06);
}
.profile-subnav-btn.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 3px 10px rgba(108, 99, 255, 0.32);
}
.subnav-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1;
}
.subnav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.subnav-pill {
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
  animation: pulseBadge 1.8s infinite;
  flex-shrink: 0;
  line-height: 1.2;
}

/* Tarjeta Hero Aventurero & Compañero */
.profile-hero-card {
  padding: 18px 20px;
  margin-bottom: 16px;
  box-sizing: border-box;
}
.profile-hero-split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 20px;
  align-items: center;
}
.profile-hero-divider {
  width: 1px;
  height: 90%;
  background: var(--border);
  align-self: center;
}
.profile-hero-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.profile-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.profile-avatar-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(108, 99, 255, 0.15), rgba(138, 130, 255, 0.25));
  border: 2px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  cursor: default;
  user-select: none;
}
.profile-pet-preview-box {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-pet-preview-box svg {
  width: 100%;
  height: 100%;
}
.profile-hero-meta {
  flex: 1;
  min-width: 0;
}
.profile-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.profile-hero-name {
  margin: 0;
  font-size: 17px;
  font-weight: 850;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-hero-pet-name {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-hero-lvl {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.profile-pill-badge {
  font-size: 11px;
  font-weight: 800;
  background: rgba(108, 99, 255, 0.12);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 8px;
}
body.dark .profile-pill-badge {
  background: rgba(108, 99, 255, 0.25);
  color: #c4b5fd;
}
.profile-mood-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-top: 4px;
}
.profile-xp-box {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  padding: 8px 12px;
}
body.dark .profile-xp-box {
  background: rgba(255, 255, 255, 0.03);
}

/* Grid de Recursos (Bento Boxes) */
.profile-resource-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.profile-res-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  min-width: 0;
}
.profile-res-box.clickable {
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  touch-action: manipulation;
}
.profile-res-box.clickable:active {
  transform: scale(0.97);
}
.mini-item.clickable {
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
  touch-action: manipulation;
}
.mini-item.clickable:active {
  opacity: 0.75;
  transform: scale(0.98);
}
.profile-res-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
}
.profile-res-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.profile-res-num {
  font-size: 17px;
  font-weight: 850;
  color: var(--text);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-res-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Toggle Switch estilizado */
.toggle-switch-wrap {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.toggle-switch-wrap input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 24px;
}
body:not(.dark) .toggle-slider {
  background-color: rgba(0, 0, 0, 0.1);
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
}
.toggle-switch-wrap input:checked + .toggle-slider {
  background-color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 10px rgba(124, 114, 255, 0.4);
}
.toggle-switch-wrap input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

/* Select elegante de Configuración */
.settings-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 28px 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 11px;
  max-width: 165px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  transition: border-color 0.2s, background-color 0.2s;
}
body:not(.dark) .settings-select {
  background-color: rgba(0, 0, 0, 0.035);
}
.settings-select:focus {
  outline: none;
  border-color: var(--primary);
  background-color: rgba(255, 255, 255, 0.09);
}
.settings-select option {
  background-color: var(--card, #1a1e2e);
  color: var(--text, #ffffff);
}

/* Ajustes & Configuración Grid */
.profile-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.profile-settings-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.icon-only-btn {
  padding: 4px 6px !important;
  font-size: 12px !important;
  background: transparent !important;
  border: none !important;
}

/* Subtarjetas de Ajustes, Cuenta & Respaldos */
.settings-section-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
body:not(.dark) .settings-section-card {
  background: rgba(0, 0, 0, 0.025);
}
.settings-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.settings-section-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.settings-section-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.settings-section-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.settings-section-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}
.settings-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 20px;
  font-weight: 600;
  flex-shrink: 0;
}
.settings-pill.success {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}
.settings-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.settings-grid-actions-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.settings-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 9px;
  white-space: nowrap;
}
.settings-danger-btn {
  background: none;
  border: none;
  color: #ef4444;
  font-size: 11.5px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  transition: opacity 0.2s ease;
}
.settings-danger-btn:hover {
  opacity: 1;
}

/* Responsive para Móvil (max-width: 600px) */
@media (max-width: 600px) {
  .profile-hero-card {
    padding: 16px;
    margin-bottom: 14px;
  }
  .profile-hero-split {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .profile-hero-divider {
    width: 100%;
    height: 1px;
    margin: 2px 0;
  }
  .profile-resource-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }
  .profile-res-box {
    padding: 11px 12px;
  }
  .profile-settings-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Regla especial para pantallas <= 600px: compactar nombres de pestañas */
@media (max-width: 600px) {
  .subnav-prefix,
  .subnav-suffix {
    display: none;
  }
  .profile-subnav {
    border-radius: 15px;
    padding: 3px;
    gap: 3px;
    margin-bottom: 14px;
  }
  .profile-subnav-btn {
    padding: 8px 4px;
    font-size: 12px;
    border-radius: 12px;
    gap: 4px;
  }
  .subnav-icon {
    font-size: 14px;
  }
}

@media (max-width: 360px) {
  .profile-subnav-btn {
    padding: 7px 2px;
    font-size: 11px;
    gap: 3px;
  }
  .subnav-icon {
    font-size: 13px;
  }
  .subnav-pill {
    padding: 1px 4px;
    font-size: 9px;
  }
}



/* ==========================================================================
   🛠️ REGLAS GENERALES DE ESPACIADOS, MODALES, SANTUARIO Y CALENDARIO
   ========================================================================== */

/* 1. Modales: El botón de cierre nunca debe ocupar el 100% del ancho */
.modal .topbar,
.modal-clean-header {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}
.modal .topbar > button:last-child,
.modal-close-icon-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 14px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  cursor: pointer !important;
}
.modal-close-icon-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* 2. Santuario Cósmico: Chips de Mascotas con Espacios Claros */
.sanctuary-strip-card {
  margin-top: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
}
.sanctuary-pets-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.sanctuary-pets-scroll::-webkit-scrollbar {
  display: none;
}
.sanctuary-phases-scroll {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.sanctuary-phases-scroll::-webkit-scrollbar {
  display: none;
}
.sanctuary-pet-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px 12px;
  min-width: 86px;
  flex-shrink: 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.sanctuary-pet-chip.active {
  background: rgba(108, 99, 255, 0.16);
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(108, 99, 255, 0.25);
}
.sanctuary-pet-chip.locked {
  opacity: 0.8;
  border-style: dashed;
}
.pet-chip-status {
  font-size: 16px;
  line-height: 1;
}
.pet-chip-name {
  font-size: 12.5px;
  font-weight: 750;
  white-space: nowrap;
  max-width: 82px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.pet-chip-val {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap !important; /* IMPIDE que (250 y 💰) se partan en 2 líneas */
  color: var(--muted);
  line-height: 1.2;
}
.pet-chip-val.price {
  color: #fbbf24;
  font-weight: 800;
}

/* 3. Modal de Hábitos por Cantidad */
.modal-styled-qty {
  padding: 20px 18px !important;
}
.qty-target-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(108, 99, 255, 0.08);
  border: 1px solid rgba(108, 99, 255, 0.2);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
}
.qty-hero-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 10px 0 14px;
}
.qty-step-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--border);
  color: var(--text);
  font-size: 24px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.qty-step-btn:active {
  transform: scale(0.92);
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.qty-hero-input-wrap {
  width: 120px;
  text-align: center;
}
.qty-hero-number {
  width: 100% !important;
  font-size: 38px !important;
  font-weight: 900 !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  color: var(--text) !important;
  padding: 0 !important;
  outline: none !important;
}
.qty-preset-chips {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}
.qty-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  padding: 5px 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.qty-chip:hover, .qty-chip:active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* 4. Calendario: Espacios y Alineación de Cabeceras y Números */
.cal-card {
  padding: 18px 20px;
}
.cal-top-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.cal-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.cal-month-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  text-transform: capitalize;
  color: var(--text);
}
.cal-legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.02);
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.cal-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.calendar {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.cal-head {
  text-align: center;
  font-size: 11.5px;
  font-weight: 750;
  color: var(--muted);
  padding: 4px 0 8px;
  text-transform: capitalize;
}
.day {
  min-height: 64px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 5px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.day-empty {
  opacity: 0;
  pointer-events: none;
  border: none !important;
  background: transparent !important;
}
.day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 4px;
}
.day-num {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.day-pct-badge {
  font-size: 9.5px;
  font-weight: 750;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 4px;
  border-radius: 5px;
  white-space: nowrap;
  line-height: 1.1;
}
body.dark .day-pct-badge {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

@media (max-width: 480px) {
  .cal-card {
    padding: 14px 12px;
  }
  .calendar {
    gap: 4px !important;
  }
  .cal-head {
    font-size: 10px;
    padding: 2px 0 6px;
  }
  .day {
    min-height: 52px;
    padding: 4px 3px;
    border-radius: 9px;
  }
  .day-num {
    font-size: 11.5px;
  }
  /* En pantallas móviles muy compactas, ocultar el texto de % para que jamás colisione */
  .day-pct-badge {
    display: none;
  }
}

/* ============================================================================
   FASE 1: EMOCIÓN SENSORIAL & RECOMPENSAS INMEDIATAS
   ============================================================================ */

/* --- 1.1 CINEMÁTICA DE EVOLUCIÓN ÉPICA --- */
.evo-backdrop {
  z-index: 2300 !important;
  background: rgba(4, 3, 12, 0.95) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  padding: 14px !important;
  display: none;
}
.evo-backdrop.show {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.evo-container {
  position: relative;
  width: 100%;
  max-width: 520px;
  min-height: 580px;
  max-height: 92vh;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 38%, #1c0e3f 0%, #0d0920 60%, #05030e 100%);
  border: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 0 50px rgba(139, 92, 246, 0.35), 0 25px 60px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  box-sizing: border-box;
  text-align: center;
}

/* Sunburst de rayos cósmicos giratorios */
.evo-sunburst {
  position: absolute;
  width: 900px;
  height: 900px;
  top: 38%;
  left: 50%;
  margin: -450px 0 0 -450px;
  background: repeating-conic-gradient(from 0deg, rgba(168, 85, 247, 0.12) 0deg 15deg, transparent 15deg 30deg);
  border-radius: 50%;
  pointer-events: none;
  animation: evoSunburstSpin 24s linear infinite;
  z-index: 1;
}
@keyframes evoSunburstSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.evo-cosmic-glow {
  position: absolute;
  top: 15%;
  left: 20%;
  right: 20%;
  height: 300px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.3) 0%, rgba(245, 158, 11, 0.15) 50%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 2;
  animation: evoGlowPulse 4s ease-in-out infinite alternate;
}
@keyframes evoGlowPulse {
  0% { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.15); opacity: 1; }
}

.evo-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}

.evo-flash {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.75s ease-out;
}
.evo-flash.flash-bang {
  opacity: 1 !important;
  transition: none !important;
}

.evo-content {
  position: relative;
  z-index: 10;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.evo-badge-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #fde047;
  background: rgba(253, 224, 71, 0.12);
  border: 1px solid rgba(253, 224, 71, 0.3);
  text-transform: uppercase;
  margin-bottom: 8px;
  box-shadow: 0 0 15px rgba(253, 224, 71, 0.2);
}

.evo-pet-stage {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 10px auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.evo-pet-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.45s ease;
}
.evo-pet-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Estado de Acumulación (Vibración y brillo de silueta) */
.evo-buildup-active {
  animation: evoShake 0.1s ease-in-out infinite alternate, evoEnergyGlow 2.4s ease-in-out forwards;
}
@keyframes evoShake {
  0% { transform: translate(-2px, -1px) rotate(-1deg); }
  100% { transform: translate(2px, 1px) rotate(1deg); }
}
@keyframes evoEnergyGlow {
  0% { filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.4)); }
  50% { filter: drop-shadow(0 0 30px rgba(168, 85, 247, 0.9)) brightness(2); }
  100% { filter: drop-shadow(0 0 50px #ffffff) brightness(12); }
}

.evo-hidden {
  opacity: 0 !important;
  transform: scale(0.3) !important;
  pointer-events: none;
}

.evo-pop-in {
  opacity: 1 !important;
  transform: scale(1) !important;
  animation: evoPopBounce 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes evoPopBounce {
  0% { opacity: 0; transform: scale(0.2) rotate(-8deg); }
  60% { opacity: 1; transform: scale(1.15) rotate(3deg); }
  85% { transform: scale(0.96) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Textos e Info */
.evo-title {
  margin: 4px 0 6px;
  font-size: 24px;
  font-weight: 850;
  background: linear-gradient(135deg, #ffffff 20%, #fde047 60%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.evo-subtitle {
  margin: 0 0 16px;
  font-size: 14px;
  color: #cbd5e1;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Tarjeta de atributos */
.evo-stats-card {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 440px;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.evo-stat-chip {
  flex: 1;
  min-width: 110px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  color: #fff;
  font-size: 12.5px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.evo-stat-chip span {
  font-size: 18px;
}
.evo-stat-chip b {
  font-weight: 700;
  letter-spacing: 0.2px;
}

.evo-actions {
  width: 100%;
  max-width: 320px;
}
.evo-celebrate-btn {
  width: 100%;
  padding: 13px 20px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 16px;
  background: linear-gradient(135deg, #7c3aed, #a855f7 50%, #ec4899 100%);
  color: #fff;
  border: none;
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.45);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.2s ease;
}
.evo-celebrate-btn:hover {
  box-shadow: 0 10px 30px rgba(168, 85, 247, 0.65);
}

.evo-revealed-info {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* --- 1.2 CELEBRACIÓN "DÍA PERFECTO" --- */
.perfect-day-backdrop {
  z-index: 2200 !important;
}
.perfect-day-card {
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 20px 60px rgba(245, 158, 11, 0.25), 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}
body.dark .perfect-day-card {
  background: #121422 !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  box-shadow: 0 25px 70px rgba(245, 158, 11, 0.25), 0 10px 35px rgba(0, 0, 0, 0.6) !important;
}

.perfect-day-halo {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 220px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.22) 0%, rgba(245, 158, 11, 0.08) 50%, transparent 70%);
  pointer-events: none;
}
@keyframes perfectDayCrownBounce {
  0% { transform: scale(1) translateY(0); }
  100% { transform: scale(1.12) translateY(-4px); }
}

.perfect-day-rewards {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 12px 0;
}
.reward-pill {
  flex: 1;
  min-width: 100px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 12px;
  text-align: left;
}
body.dark .reward-pill {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
}
.reward-pill .rp-icon {
  font-size: 22px;
}
.reward-pill b {
  font-size: 13px;
  color: #d97706;
  display: block;
}
body.dark .reward-pill b {
  color: #fbbf24;
}
.reward-pill .rp-sub {
  font-size: 10.5px;
  color: var(--muted);
}

/* Aura dorada de la mascota en Home */
.pet-perfect-day-aura {
  position: relative;
}
.pet-perfect-day-aura::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.45) 0%, rgba(245, 158, 11, 0.2) 50%, transparent 72%);
  animation: perfectDayHaloPulse 3s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
.pet-perfect-day-aura::after {
  content: '✨';
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: 16px;
  animation: perfectDaySparkle 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 10;
}
.pet-perfect-day-aura svg {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.6));
}
@keyframes perfectDayHaloPulse {
  0% { transform: scale(0.92); opacity: 0.6; }
  100% { transform: scale(1.15); opacity: 1; }
}
@keyframes perfectDaySparkle {
  0%, 100% { transform: scale(0.85) rotate(0deg); opacity: 0.6; }
  50% { transform: scale(1.3) rotate(25deg); opacity: 1; }
}

.perfect-day-home-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 800;
  color: #78350f;
  background: linear-gradient(135deg, #fef08a, #fde047);
  border: 1px solid rgba(234, 179, 8, 0.4);
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.35);
}
body.dark .perfect-day-home-badge {
  color: #fef08a;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.25), rgba(245, 158, 11, 0.15));
  border-color: rgba(234, 179, 8, 0.5);
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.2);
}

@media (max-width: 480px) {
  .evo-container {
    max-height: 96vh;
    padding: 18px 14px;
    border-radius: 22px;
  }
  .evo-sunburst {
    width: 600px;
    height: 600px;
    margin: -300px 0 0 -300px;
  }
  .evo-pet-stage {
    width: 170px;
    height: 170px;
    margin: 6px auto 10px;
  }
  .evo-title {
    font-size: 20px;
  }
  .evo-subtitle {
    font-size: 12.5px;
    margin-bottom: 12px;
  }
  .evo-stats-card {
    gap: 6px;
    margin-bottom: 16px;
  }
  .evo-stat-chip {
    padding: 6px 10px;
    font-size: 11.5px;
    min-width: 90px;
  }
  .evo-stat-chip span {
    font-size: 16px;
  }
  .evo-celebrate-btn {
    padding: 11px 16px;
    font-size: 14.5px;
  }
}


/* ============================================================================
   🎡 RULETA DIARIA DE BIENESTAR
   ============================================================================ */
.wheel-banner-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(168, 85, 247, 0.08) 100%);
  border: 1px solid rgba(99, 102, 241, 0.22);
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: 14px;
}
.wheel-banner-card:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.15);
}
.wheel-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wheel-banner-badge {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: grid;
  place-items: center;
  font-size: 22px;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
  flex-shrink: 0;
}
.wheel-pulse {
  animation: wheelPulseBtn 2s infinite alternate;
}
@keyframes wheelPulseBtn {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.5); }
  100% { transform: scale(1.05); box-shadow: 0 0 14px 4px rgba(99, 102, 241, 0.4); }
}

/* Modal de Ruleta Responsive */
#dailyWheelModal {
  z-index: 2500 !important;
}
#dailyWheelModal.show {
  display: grid !important;
}
.wheel-modal-card {
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(120% 65% at 50% -5%, rgba(168, 85, 247, 0.42) 0%, transparent 65%),
    radial-gradient(90% 60% at 50% 42%, rgba(99, 102, 241, 0.25) 0%, transparent 70%),
    linear-gradient(165deg, #1e1548 0%, #111633 48%, #090d1f 100%);
  border: 1.5px solid rgba(250, 204, 21, 0.42);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.82),
    0 0 45px rgba(139, 92, 246, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 24px rgba(168, 85, 247, 0.12);
  color: #ffffff;
}
.wheel-card-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
  background-image:
    radial-gradient(1.5px 1.5px at 14% 12%, #fef08a 90%, transparent),
    radial-gradient(1.2px 1.2px at 86% 16%, #ffffff 90%, transparent),
    radial-gradient(1.6px 1.6px at 24% 38%, #c084fc 90%, transparent),
    radial-gradient(1.4px 1.4px at 82% 44%, #38bdf8 90%, transparent),
    radial-gradient(1.2px 1.2px at 10% 68%, #fde047 90%, transparent),
    radial-gradient(1.5px 1.5px at 90% 72%, #f472b6 90%, transparent);
}
.wheel-modal-topbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 3px;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}
.wheel-modal-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.wheel-modal-header-main {
  width: 100%;
  text-align: left;
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}
.wheel-modal-eyebrow {
  color: #fde047 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 12px rgba(250, 204, 21, 0.55) !important;
  margin: 0 !important;
  white-space: nowrap;
}
.wheel-modal-title {
  color: #ffffff !important;
  font-size: 21px !important;
  font-weight: 850 !important;
  margin: 2px 0 3px !important;
  letter-spacing: -0.3px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 0 18px rgba(250, 204, 21, 0.22) !important;
}
.wheel-modal-desc {
  color: #e2e8f0 !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  opacity: 0.92 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  text-align: left !important;
}
.wheel-modal-card .muted {
  color: #cbd5e1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.wheel-spins-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(250, 204, 21, 0.16);
  color: #fef08a;
  border: 1px solid rgba(250, 204, 21, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}
.wheel-spins-pill.is-done {
  background: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.3);
}
.wheel-close-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  font-size: 15px !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}
.wheel-close-btn:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  transform: scale(1.08) !important;
}
.wheel-modal-topbar,
.wheel-modal-header-main,
.wheel-stage-container,
.wheel-prize-pool,
.wheel-reward-banner,
#wheelActionArea {
  flex-shrink: 0 !important;
}

.wheel-stage-container {
  position: relative;
  width: min(264px, 62vmin);
  height: min(264px, 62vmin);
  margin: 4px auto 8px;
  flex-shrink: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.wheel-stage-container.is-spinning .wheel-ambient-glow,
.wheel-stage-container.is-spinning .wheel-orbit-ring {
  animation-play-state: paused;
}
.wheel-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 104%;
  height: 104%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 204, 21, 0.28) 0%, rgba(168, 85, 247, 0.35) 38%, rgba(56, 189, 248, 0.18) 64%, transparent 76%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 1;
  animation: wheelAuraPulse 3.2s ease-in-out infinite alternate;
}
.wheel-orbit-ring {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1.5px dashed rgba(250, 204, 21, 0.32);
  box-shadow: 0 0 20px rgba(250, 204, 21, 0.12);
  pointer-events: none;
  z-index: 1;
  animation: auraSpin 32s linear infinite;
}
.wheel-pedestal-base {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 72%;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(250, 204, 21, 0.35) 0%, rgba(139, 92, 246, 0.22) 52%, transparent 78%);
  filter: blur(5px);
  pointer-events: none;
  z-index: 1;
}
@keyframes wheelAuraPulse {
  0% { transform: translate(-50%, -50%) scale(0.93); opacity: 0.65; }
  100% { transform: translate(-50%, -50%) scale(1.07); opacity: 1; }
}
.wheel-pointer {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  z-index: 25;
  pointer-events: none;
  transform-origin: 50% 12px;
  transition: transform 0.15s ease-out;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.wheel-pointer:not(.is-spinning) {
  animation: pointerIdleFloat 1.8s ease-in-out infinite alternate;
}
@keyframes pointerIdleFloat {
  0% { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(-50%, 3.5px, 0); }
}
.wheel-pointer.is-spinning {
  animation: pointerTickFlap 0.08s infinite alternate cubic-bezier(0.3, 0, 0.7, 1);
}
@keyframes pointerTickFlap {
  0% { transform: translate3d(-50%, 0, 0) rotate(-11deg); }
  100% { transform: translate3d(-50%, 0, 0) rotate(9deg); }
}
.wheel-disc-shadow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.68),
    0 0 24px rgba(139, 92, 246, 0.3);
  pointer-events: none;
  z-index: 1;
}
.wheel-disc-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 12px rgba(250, 204, 21, 0.25);
  transition: transform 4.5s cubic-bezier(0.15, 0.9, 0.2, 1.0);
  transform-origin: center center;
  z-index: 2;
  will-change: transform;
  transform: rotate(0deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.wheel-disc-wrap.can-spin {
  cursor: pointer;
}
.wheel-disc-wrap.can-spin:hover .wheel-hub-core {
  filter: brightness(1.15);
}
.wheel-disc-wrap.prize-won-pulse {
  animation: wheelWinCelebration 0.85s ease-out;
}
@keyframes wheelWinCelebration {
  0% { filter: drop-shadow(0 0 0px #f59e0b); }
  40% { filter: drop-shadow(0 0 28px #facc15); }
  100% { filter: drop-shadow(0 0 10px #f59e0b); }
}
.wheel-sector-win-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.wheel-sector.is-winner .wheel-sector-win-overlay {
  opacity: 1;
  animation: sectorWinnerFlash 0.65s ease-in-out infinite alternate;
}
@keyframes sectorWinnerFlash {
  0% { opacity: 0.45; }
  100% { opacity: 0.95; }
}
.wheel-bulb-a {
  animation: marqueeBulbA 0.85s ease-in-out infinite alternate;
}
.wheel-bulb-b {
  animation: marqueeBulbB 0.85s ease-in-out infinite alternate;
}
@keyframes marqueeBulbA {
  0% { opacity: 1; }
  100% { opacity: 0.35; }
}
@keyframes marqueeBulbB {
  0% { opacity: 0.35; }
  100% { opacity: 1; }
}
.wheel-disc-wrap.is-spinning .wheel-bulb-a,
.wheel-disc-wrap.is-spinning .wheel-bulb-b {
  animation: none !important;
  opacity: 0.9;
}

/* Grilla de Premios Posibles debajo del disco */
.wheel-prize-pool {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 2px 0 6px;
  position: relative;
  z-index: 2;
}
.wheel-prize-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 11px;
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.wheel-prize-chip .chip-icon {
  font-size: 13.5px;
  line-height: 1;
  flex-shrink: 0;
}
.wheel-prize-chip.is-won {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.28), rgba(245, 158, 11, 0.2));
  border-color: #facc15;
  color: #fef08a;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.45);
  transform: scale(1.05);
}

.wheel-reward-banner {
  flex-shrink: 0 !important;
  min-height: 66px !important;
  margin: 7px 0 6px !important;
  padding: 10px 14px !important;
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.24) 0%, rgba(168, 85, 247, 0.2) 50%, rgba(236, 72, 153, 0.16) 100%) !important;
  border: 1.5px solid rgba(250, 204, 21, 0.6) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  animation: popReward 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
}
.wheel-reward-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  animation: shimmerReward 2.2s infinite;
  pointer-events: none;
}
@keyframes shimmerReward {
  100% { left: 200%; }
}
.wheel-reward-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.wheel-reward-icon {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
  animation: rewardIconBounce 1s ease-in-out infinite alternate;
  flex-shrink: 0;
}
@keyframes rewardIconBounce {
  0% { transform: scale(1) translateY(0); }
  100% { transform: scale(1.12) translateY(-3px); }
}
.wheel-reward-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #fde047;
  text-transform: uppercase;
  margin-bottom: 3px;
  line-height: 1.2;
}
.wheel-reward-title {
  font-size: 15.5px;
  font-weight: 850;
  display: block;
  color: #ffffff;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
@keyframes popReward {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-height: 720px) {
  .wheel-stage-container {
    width: min(220px, 52vmin) !important;
    height: min(220px, 52vmin) !important;
    margin: 2px auto 4px !important;
  }
  .wheel-modal-title {
    font-size: 18px !important;
  }
  .wheel-modal-desc {
    display: none !important;
  }
  .wheel-prize-pool {
    gap: 4px !important;
    margin: 2px 0 4px !important;
  }
}
.wheel-action-btn {
  width: 100%;
  padding: 14px 18px;
  font-size: 15.5px;
  font-weight: 850;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.3px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.wheel-action-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.wheel-action-btn:active {
  transform: scale(0.97);
}
.wheel-action-btn .btn-shine {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.36), transparent);
  animation: btnShineSweep 2.5s infinite;
  pointer-events: none;
}
@keyframes btnShineSweep {
  100% { left: 200%; }
}
.wheel-btn-free {
  background: linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #ec4899 100%);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(147, 51, 234, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.wheel-btn-bonus {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 50%, #e11d48 100%);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.wheel-btn-ad {
  background: linear-gradient(135deg, #6d28d9 0%, #9333ea 55%, #c026d3 100%);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.wheel-btn-coins-sub {
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 700;
  width: 100%;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(250, 204, 21, 0.28);
  color: #fef08a;
  transition: background 0.2s ease, transform 0.15s ease;
}
.wheel-btn-coins-sub:hover {
  background: rgba(250, 204, 21, 0.15);
}
.wheel-btn-coins-sub:active {
  transform: scale(0.97);
}


/* ============================================================================
   🎡 BOTÓN FLOTANTE DISCRETO (FAB) - GIRO GRATIS Y GIRO BONUS
   ============================================================================ */
.wheel-fab {
  position: fixed;
  right: 16px;
  bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #ec4899 100%);
  border: 2px solid rgba(254, 240, 138, 0.75);
  box-shadow: 0 6px 20px rgba(147, 51, 234, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 95;
  transition: bottom 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, opacity 0.3s ease;
  animation: wheelFabFloat 2.6s ease-in-out infinite;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
body.has-admob-banner .wheel-fab {
  bottom: calc(var(--admob-banner-height, 50px) + max(env(safe-area-inset-bottom, 0px), 12px) + 58px);
}
.wheel-fab:hover {
  transform: scale(1.08) rotate(8deg);
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.65), 0 0 14px rgba(250, 204, 21, 0.45);
}
.wheel-fab:active {
  transform: scale(0.92);
}
.wheel-fab-icon {
  font-size: 23px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.wheel-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef08a, #f59e0b);
  color: #451a03;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.wheel-fab-badge.bonus {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #ffffff;
  font-size: 10px;
}

@keyframes wheelFabFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (min-width: 1025px) {
  .wheel-fab {
    bottom: 24px;
    right: 24px;
    width: 54px;
    height: 54px;
  }
}


/* ============================================================================
   🐾 PESTAÑAS LIMPIAS: MI MASCOTA vs TIENDA & ARMARIO
   ============================================================================ */
.pet-top-tabs-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  width: 100%;
}
.pet-top-tabs {
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.05);
  padding: 4px;
  border-radius: 16px;
  border: 1px solid var(--border);
  width: 100%;
  max-width: 440px;
}
body.dark .pet-top-tabs {
  background: rgba(255, 255, 255, 0.05);
}
.pet-top-tab {
  flex: 1;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 750;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.pet-top-tab.active {
  background: var(--card);
  color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
body.dark .pet-top-tab.active {
  background: rgba(99, 102, 241, 0.24);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Tarjeta elegante para abrir el Santuario */
.sanctuary-entry-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  margin-top: 14px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.sanctuary-entry-card:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.12);
}
.sanctuary-entry-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sanctuary-entry-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
  display: grid;
  place-items: center;
  font-size: 22px;
  border: 1px solid rgba(99, 102, 241, 0.25);
  flex-shrink: 0;
}

/* ============================================================================
   🎋 4 NUEVOS HÁBITATS ZEN (100% CÓDIGO CSS / 300 MONEDAS)
   ============================================================================ */
/* 1. Jardín Zen */
.pet-stage.bg-zen-garden {
  background: radial-gradient(circle at 50% 30%, #fdf2f8 0%, #fbcfe8 45%, #be185d 85%, #831843 100%);
}
.pet-stage.bg-zen-garden::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 88%, rgba(244, 114, 182, 0.45) 0%, transparent 60%),
              radial-gradient(circle at 20% 20%, rgba(253, 242, 248, 0.7) 0%, transparent 35%);
  pointer-events: none;
}
.pet-stage.bg-zen-garden .pet-avatar-box {
  filter: drop-shadow(0 0 16px rgba(244, 114, 182, 0.55));
}

/* 2. Noche Estrellada */
.pet-stage.bg-starry-night {
  background: radial-gradient(ellipse at 50% 20%, #1e1b4b 0%, #0f172a 50%, #020617 100%);
}
.pet-stage.bg-starry-night::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle, #facc15 1.5px, transparent 1.5px),
    radial-gradient(circle, #e0e7ff 1.8px, transparent 1.8px),
    radial-gradient(circle, #38bdf8 1.2px, transparent 1.2px);
  background-size: 80px 80px, 120px 120px, 60px 60px;
  background-position: 0 0, 40px 60px, 20px 30px;
  opacity: 0.85;
  pointer-events: none;
}
.pet-stage.bg-starry-night .pet-avatar-box {
  filter: drop-shadow(0 0 18px rgba(250, 204, 21, 0.5));
}

/* 3. Crepúsculo Místico */
.pet-stage.bg-mystic-twilight {
  background: linear-gradient(160deg, #3b0764 0%, #581c87 35%, #831843 70%, #f43f5e 100%);
}
.pet-stage.bg-mystic-twilight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 85%, rgba(244, 63, 94, 0.4) 0%, transparent 55%),
              radial-gradient(ellipse at 80% 25%, rgba(192, 132, 252, 0.35) 0%, transparent 45%);
  pointer-events: none;
}
.pet-stage.bg-mystic-twilight .pet-avatar-box {
  filter: drop-shadow(0 0 16px rgba(192, 132, 252, 0.6));
}

/* 4. Bambú Serena */
.pet-stage.bg-serene-bamboo {
  background: radial-gradient(circle at 50% 25%, #064e3b 0%, #022c22 55%, #011c15 100%);
}
.pet-stage.bg-serene-bamboo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 90%, rgba(52, 211, 153, 0.35) 0%, transparent 60%),
              linear-gradient(90deg, transparent 48%, rgba(5, 150, 105, 0.12) 50%, transparent 52%);
  background-size: auto, 40px 100%;
  pointer-events: none;
}
.pet-stage.bg-serene-bamboo .pet-avatar-box {
  filter: drop-shadow(0 0 16px rgba(52, 211, 153, 0.5));
}

/* ============================================================================
   🎒 EQUIPAMIENTO ACTIVO Y SLOTS VISUALES EN ARMARIO
   ============================================================================ */
.equipped-overview-card {
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
body.dark .equipped-overview-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.09);
}

.equipped-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.equipped-slot-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-width: 0;
}
.equipped-slot-card:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.4);
}
.equipped-slot-card.filled {
  border-color: rgba(99, 102, 241, 0.45);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.06));
}
.equipped-slot-card.empty {
  opacity: 0.65;
  border-style: dashed;
}
.equipped-slot-card.empty:hover {
  opacity: 1;
  border-color: var(--primary);
}

.slot-badge {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.slot-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.slot-text small {
  font-size: 9.5px;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.slot-text b {
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slot-remove-btn {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  flex-shrink: 0;
}
.slot-remove-btn:hover {
  background: #ef4444;
  color: #fff;
}
.slot-add-hint {
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
}

/* Ítem en la cuadrícula cuando está actualmente en uso */
.item.is-equipped {
  border: 2px solid #818cf8 !important;
  background: linear-gradient(145deg, rgba(99, 102, 241, 0.12), rgba(168, 85, 247, 0.08)) !important;
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.25) !important;
  position: relative;
}
.equipped-tag-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
  letter-spacing: 0.3px;
  z-index: 2;
}

/* ============================================================================
   ⚡ ESENCIALES DE SUPERVIVENCIA EN TIENDA (CUADRÍCULA COMPACTA 2x2)
   ============================================================================ */
.shop-essentials-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, rgba(99, 102, 241, 0.06) 100%);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.shop-essentials-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.shop-essential-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 11px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  min-width: 0;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.shop-essential-card:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.shop-essential-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.shop-essential-card-icon {
  font-size: 22px;
  line-height: 1;
}
.shop-essential-card-badge {
  font-size: 10px;
  font-weight: 750;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--muted);
  white-space: nowrap;
}
body.dark .shop-essential-card-badge {
  background: rgba(255, 255, 255, 0.08);
}
.shop-essential-card-badge.active-boost {
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
}
.shop-essential-card-body {
  flex: 1;
  margin-bottom: 8px;
  min-width: 0;
}
.shop-essential-card-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-essential-card-sub {
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.shop-essential-card-btn {
  width: 100%;
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-top: auto;
}

/* ============================================================================
   🎡 TARJETA DE RULETA EN INICIO (HOME ENTRY CARD)
   ============================================================================ */
.wheel-home-entry-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.09) 55%, rgba(236, 72, 153, 0.06) 100%);
  border: 1.5px solid rgba(99, 102, 241, 0.26);
  border-radius: 18px;
  cursor: pointer;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
body.dark .wheel-home-entry-card {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.22) 0%, rgba(126, 34, 206, 0.18) 55%, rgba(15, 23, 42, 0.65) 100%);
  border-color: rgba(168, 85, 247, 0.38);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.wheel-home-entry-card.has-free-spin {
  border-color: rgba(245, 158, 11, 0.52);
  box-shadow: 0 6px 20px rgba(147, 51, 234, 0.16);
}
body.dark .wheel-home-entry-card.has-free-spin {
  border-color: rgba(250, 204, 21, 0.55);
  box-shadow: 0 8px 26px rgba(147, 51, 234, 0.28), 0 0 16px rgba(250, 204, 21, 0.12);
}
.wheel-home-entry-card:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.22);
}
.wheel-home-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.wheel-home-badge {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #4f46e5 0%, #9333ea 55%, #ec4899 100%);
  border: 1.5px solid rgba(254, 240, 138, 0.65);
  display: grid;
  place-items: center;
  font-size: 23px;
  box-shadow: 0 5px 14px rgba(147, 51, 234, 0.38);
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wheel-home-entry-card:hover .wheel-home-badge {
  transform: rotate(25deg) scale(1.06);
}
.pill-ready {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(16, 185, 129, 0.16)) !important;
  color: #15803d !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
  font-weight: 800 !important;
}
body.dark .pill-ready {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(16, 185, 129, 0.22)) !important;
  color: #4ade80 !important;
  border-color: rgba(74, 222, 128, 0.45) !important;
}
.pill-bonus {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(236, 72, 153, 0.16)) !important;
  color: #b45309 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  font-weight: 800 !important;
}
body.dark .pill-bonus {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.24), rgba(236, 72, 153, 0.22)) !important;
  color: #fde047 !important;
  border-color: rgba(250, 204, 21, 0.45) !important;
}

@keyframes adminSpotlightPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.8); }
  50% { transform: scale(1.08); box-shadow: 0 0 24px 6px rgba(236, 72, 153, 0.9); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.8); }
}
.admin-spotlight {
  animation: adminSpotlightPulse 1.2s ease-in-out 3 !important;
  border-color: #f59e0b !important;
}

/* Animaciones de enfoque para hábito activado desde notificación */
@keyframes habitHighlightPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }
  50% { transform: scale(1.02); box-shadow: 0 0 18px 5px rgba(99, 102, 241, 0.5); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
@keyframes habitHighlightPulseShield {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.7); }
  50% { transform: scale(1.02); box-shadow: 0 0 18px 5px rgba(14, 165, 233, 0.5); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
}
@keyframes habitHighlightPulseFailed {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(238, 107, 107, 0.7); }
  50% { transform: scale(1.02); box-shadow: 0 0 18px 5px rgba(238, 107, 107, 0.5); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(238, 107, 107, 0); }
}
.highlight-pulse {
  animation: habitHighlightPulse 1.2s ease-in-out 2 !important;
  border-color: #6366f1 !important;
}
.highlight-pulse-shield {
  animation: habitHighlightPulseShield 1.2s ease-in-out 2 !important;
  border-color: #0ea5e9 !important;
}
.highlight-pulse-failed {
  animation: habitHighlightPulseFailed 1.2s ease-in-out 2 !important;
  border-color: #ee6b6b !important;
}

#widgetGuideModal {
  z-index: 1500 !important;
}

/* Vista previa del Widget en la app */
.widget-preview-card {
  background: linear-gradient(135deg, #1a1d2e 0%, #141724 50%, #0f111b 100%);
  border: 1.5px solid #2e3452;
  border-radius: 20px;
  padding: 13px;
  text-align: left;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  font-family: inherit;
}
.widget-preview-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #21263d;
  border: 1.5px solid #4f46e5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.widget-preview-pill {
  background: #23273d;
  border: 1px solid #353b5c;
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.widget-preview-btn {
  background: #4f46e5;
  color: #fff;
  border-radius: 12px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* ==========================================================================
   NUEVA EXPERIENCIA DE CREACIÓN DE HÁBITOS (EXPRÉS, VISUAL, PLANTILLAS & RPG)
   ========================================================================== */

/* Barra de agarre para Bottom-Sheet en móvil */
.modal-drag-handle {
  width: 42px;
  height: 4.5px;
  border-radius: 4px;
  background: var(--border);
  margin: 0 auto 12px;
  display: none;
  opacity: 0.8;
}

/* Sugerencias Inteligentes */
.smart-habit-suggestions {
  margin-top: 8px;
  animation: fadeInDown 0.2s ease-out;
}
.smart-suggestion-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(108, 99, 255, 0.08);
  border: 1px dashed var(--primary);
  border-radius: 12px;
  font-size: 13px;
}
.smart-suggestion-pill b {
  color: var(--primary);
}

/* Selector Visual de Iconos & Popover */
.icon-selector-wrap {
  width: 100%;
}
.icon-picker-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  text-align: left;
  box-sizing: border-box;
}
.icon-picker-trigger:hover,
.icon-picker-trigger:focus-visible {
  border-color: var(--primary);
  background: rgba(108, 99, 255, 0.04);
}
.icon-picker-glyph {
  font-size: 22px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(108, 99, 255, 0.08);
  border-radius: 8px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.icon-picker-trigger:hover .icon-picker-glyph {
  transform: scale(1.1);
}
.icon-picker-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.icon-picker-arrow {
  font-size: 12px;
  color: var(--muted);
  transition: transform 0.2s ease;
}
.icon-display-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.icon-display-btn:hover {
  border-color: var(--primary);
  transform: scale(1.05);
}
.emoji-picker-panel {
  margin-top: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  animation: fadeInDown 0.2s ease-out;
}
.emoji-search-box {
  margin-bottom: 8px;
}
.emoji-search-input, .template-search-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
  background: var(--card);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}
.emoji-search-input:focus, .template-search-input:focus {
  border-color: var(--primary);
}
.emoji-tab-bar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.emoji-tab-bar {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 2px 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scroll-behavior: smooth;
  flex: 1;
  min-width: 0;
  user-select: none;
  cursor: grab;
}
.emoji-tab-bar::-webkit-scrollbar {
  display: none;
}
.emoji-tab-bar:active {
  cursor: grabbing;
}
.emoji-tab {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 750;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  touch-action: pan-x;
  user-select: none;
  transition: all 0.15s ease;
  font-family: inherit;
}
.emoji-tab:hover {
  background: var(--card);
  color: var(--text);
  border-color: var(--primary);
}
.emoji-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}
.tab-scroll-btn {
  width: 26px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  user-select: none;
  transition: all 0.15s ease;
  line-height: 1;
}
.tab-scroll-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 6px;
  max-height: 145px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 4px 2px;
}
.emoji-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 19px;
  padding: 6px 0;
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
  transition: background 0.15s ease, transform 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emoji-btn:hover, .emoji-btn:focus-visible {
  background: rgba(108, 99, 255, 0.12);
  transform: scale(1.15);
}

/* Paleta de Colores Predefinida */
.color-palette-presets {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  flex-shrink: 0;
}
.color-swatch:hover {
  transform: scale(1.12);
}
.color-swatch.active {
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--primary);
  transform: scale(1.06);
}
.color-swatch-custom {
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

/* Selector Momento del Día */
.time-of-day-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.time-chip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 2px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.time-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Tarjeta Recompensa RPG Mascota */
.habit-pet-reward-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(135deg, rgba(108, 99, 255, 0.08) 0%, rgba(59, 130, 246, 0.06) 100%);
  border: 1px solid rgba(108, 99, 255, 0.25);
  border-radius: 16px;
  padding: 13px 15px;
  margin: 4px 0;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.reward-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.reward-pet-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(108, 99, 255, 0.15);
  border: 2px solid rgba(108, 99, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(108, 99, 255, 0.2);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.reward-pet-avatar:hover {
  transform: scale(1.08) rotate(4deg);
}
.reward-pet-avatar svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 42px;
  max-height: 42px;
  object-fit: contain;
}
.reward-card-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.reward-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.reward-title {
  font-size: 12.5px;
  color: var(--muted);
}
.reward-title b {
  color: var(--text);
}
.reward-badges {
  display: flex;
  gap: 6px;
  align-items: center;
}
.reward-pill {
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.reward-pill.xp-pill {
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
}
.reward-pill.coin-pill {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}
.reward-pet-speech {
  font-size: 11.5px;
  font-style: italic;
  color: var(--primary);
  background: rgba(108, 99, 255, 0.08);
  border-left: 3px solid var(--primary);
  border-radius: 4px 8px 8px 4px;
  padding: 4px 9px;
  display: inline-block;
  line-height: 1.35;
  transition: all 0.2s ease;
}

/* Chips de Dificultad Dinámica a Ancho Completo */
.reward-card-bottom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.diff-chip-group {
  display: flex;
  gap: 6px;
  width: 100%;
}
.diff-chip {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 4px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}
.diff-chip:hover {
  border-color: var(--primary);
  color: var(--text);
}
.diff-chip.active[data-diff="easy"] {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  color: #10b981;
}
.diff-chip.active[data-diff="medium"] {
  background: rgba(59, 130, 246, 0.15);
  border-color: #3b82f6;
  color: #3b82f6;
}
.diff-chip.active[data-diff="hard"] {
  background: rgba(249, 115, 22, 0.15);
  border-color: #f97316;
  color: #f97316;
}
.diff-chip.active[data-diff="epic"] {
  background: rgba(168, 85, 247, 0.15);
  border-color: #a855f7;
  color: #a855f7;
}

.diff-hint-text {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
  text-align: center;
  line-height: 1.3;
  transition: all 0.2s ease;
}

/* Acordeón Opciones Avanzadas (Transición Fluida CSS Grid) */
.advanced-toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(108, 99, 255, 0.04);
  border: 1px dashed var(--border);
  border-radius: 12px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  transition: all 0.15s ease;
}
.advanced-toggle-btn:hover {
  background: rgba(108, 99, 255, 0.08);
  border-color: var(--primary);
}
.advanced-fields-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, padding 0.25s ease;
  opacity: 0;
  padding: 0 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid transparent;
  border-top: none;
  border-radius: 0 0 14px 14px;
}
.advanced-fields-panel.expanded {
  grid-template-rows: 1fr;
  opacity: 1;
  padding: 8px 12px 14px;
  border-color: var(--border);
}
.advanced-fields-panel-inner {
  min-height: 0;
  overflow: hidden;
}

/* Modal Plantillas de Hábitos */
.template-category-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scrollbar-width: none;
}
.template-category-tabs::-webkit-scrollbar {
  display: none;
}
.tab-chip {
  padding: 6px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  color: var(--muted);
  transition: all 0.15s ease;
}
.tab-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  max-height: 54vh;
  overflow-y: auto;
  padding: 4px 2px;
}
.template-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.template-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 8px 24px rgba(108, 99, 255, 0.12);
}
.template-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.template-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.template-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.template-meta {
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.template-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}

/* Animaciones de Entrada y Feedback */
@keyframes slideUpSheet {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes shakeInput {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.input-error-shake {
  animation: shakeInput 0.35s ease-in-out !important;
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

/* Modo oscuro para nuevos componentes */
body.dark .smart-suggestion-pill {
  background: rgba(108, 99, 255, 0.15);
  border-color: #6366f1;
}
body.dark .icon-picker-trigger {
  background: #181d30;
  border-color: #2e3553;
  color: #fff;
}
body.dark .icon-picker-trigger:hover {
  background: rgba(99, 102, 241, 0.12);
  border-color: #6366f1;
}
body.dark .icon-picker-glyph {
  background: rgba(99, 102, 241, 0.25);
}
body.dark .icon-picker-label {
  color: #e2e8f0;
}
body.dark .icon-picker-arrow {
  color: #94a3b8;
}
body.dark .icon-display-btn {
  background: #1b2034;
  border-color: #2e3553;
}
body.dark .emoji-picker-panel {
  background: #1b2034;
  border-color: #2e3553;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
body.dark .time-chip {
  background: #1b2034;
  border-color: #2e3553;
}
body.dark .time-chip.active {
  background: #6366f1;
  border-color: #6366f1;
}
body.dark .habit-pet-reward-card {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(30, 41, 59, 0.6) 100%);
  border-color: rgba(99, 102, 241, 0.3);
}
body.dark .reward-pet-avatar {
  background: rgba(99, 102, 241, 0.25);
  border-color: rgba(99, 102, 241, 0.4);
}
body.dark .reward-pet-speech {
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.16);
  border-left-color: #818cf8;
}
body.dark .diff-chip {
  background: #1b2034;
  border-color: #2e3553;
}
body.dark .advanced-toggle-btn {
  background: rgba(99, 102, 241, 0.08);
  border-color: #2e3553;
}
body.dark .advanced-fields-panel {
  background: rgba(15, 23, 42, 0.4);
}
body.dark .advanced-fields-panel.expanded {
  border-color: #2e3553;
}
body.dark .tab-chip {
  background: #1b2034;
  border-color: #2e3553;
}
body.dark .template-card {
  background: #181d30;
  border-color: #272f4e;
}
body.dark .template-card:hover {
  border-color: #6366f1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
body.dark .emoji-search-input, body.dark .template-search-input {
  background: #181d30;
  border-color: #2e3553;
}

/* Adaptación responsive para pantallas móviles (Efecto Bottom-Sheet NATIVO) */
@media (max-width: 600px) {
  .modal-backdrop.show {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-backdrop.show .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 26px 26px 0 0 !important;
    max-height: 90vh !important;
    margin: 0 !important;
    padding: 16px 16px 28px !important;
    animation: slideUpSheet 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .modal-drag-handle {
    display: block !important;
  }
  .habit-pet-reward-card {
    padding: 12px 12px;
  }
  .reward-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .diff-chip {
    padding: 6px 2px;
    font-size: 11px;
  }
  .diff-hint-text {
    text-align: center;
    font-size: 11px;
    margin-top: 2px;
  }
  .time-of-day-selector {
    grid-template-columns: repeat(2, 1fr);
  }
  .templates-grid {
    grid-template-columns: 1fr;
    max-height: 48vh;
  }

  /* Elevación automática de modales en móvil sobre el banner AdMob */
  body.has-admob-banner .modal-backdrop.show {
    padding-bottom: calc(var(--admob-banner-height, 50px) + max(env(safe-area-inset-bottom, 0px), 12px) + 2px) !important;
  }
  body.has-admob-banner .modal-backdrop.show .modal {
    max-height: calc(88vh - var(--admob-banner-height, 50px) - max(env(safe-area-inset-bottom, 0px), 12px)) !important;
    border-radius: 26px 26px 20px 20px !important;
    margin-bottom: 2px !important;
    padding-bottom: 20px !important;
  }
  body.has-admob-banner .modal-foot {
    padding-bottom: 6px !important;
  }
  body.has-admob-banner .templates-grid {
    max-height: calc(44vh - var(--admob-banner-height, 50px)) !important;
  }

  /* Modal de Bienvenida/Onboarding inmersivo y centrado */
  #onboardingModal.modal-backdrop.show {
    align-items: center !important;
    justify-content: center !important;
    background: rgba(10, 14, 26, 0.94) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding: 16px !important;
    z-index: 1000 !important;
  }
  #onboardingModal.modal-backdrop.show .modal {
    border-radius: 26px !important;
    max-height: 92vh !important;
    width: min(440px, 92vw) !important;
    max-width: 92vw !important;
    margin: auto !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
  }
}

/* ==========================================================================
   NUEVA SUITE DE ESTADÍSTICAS & DOSSIER DE HÁBITOS
   ========================================================================== */
#stats .topbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin-bottom: 18px !important;
  width: 100% !important;
}
#stats .topbar > div {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
#stats .topbar .eyebrow {
  text-align: center !important;
}
#stats .topbar .title {
  text-align: center !important;
  margin: 4px 0 0 !important;
}
#stats .topbar .page-sub {
  text-align: center !important;
  margin: 6px auto 0 !important;
  max-width: 480px;
}

.stats-control-panel {
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 480px) {
  .stats-control-panel {
    padding: 12px 10px;
    gap: 10px;
  }
}

/* Selector de período con formato Segmented Control perfectamente centrado y balanceado */
.stats-period-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--bg);
  padding: 4px;
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  cursor: grab;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
}
.stats-period-selector::-webkit-scrollbar {
  display: none;
}
.stats-period-selector.is-dragging {
  cursor: grabbing;
}
.stats-period-btn {
  flex: 1 1 0px;
  min-width: 0;
  padding: 8px 4px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: all .15s ease;
  font-family: inherit;
  touch-action: pan-x pan-y;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.stats-period-btn:hover {
  color: var(--text);
  background: rgba(99, 102, 241, 0.06);
}
.stats-period-btn.active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

/* Fila de filtros de hábitos y categorías */
.stats-filters-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  align-items: center;
}
.stats-select-wrap {
  position: relative;
  width: 100%;
}
.stats-filter-select {
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  padding: 0 28px 0 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.stats-filter-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Barra de acciones y exportación */
.stats-actions-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}
.stats-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: all .15s ease;
  font-family: inherit;
  white-space: nowrap;
}
.stats-action-btn:hover {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.08);
  color: var(--primary);
  transform: translateY(-1px);
}

/* Cuadrículas de métricas principales */
.stats-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 520px) {
  .stats-overview-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
.stats-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}
@media (max-width: 560px) {
  .stats-split-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.stats-trend-chart {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  justify-content: space-between;
  height: 175px;
  padding: 16px 4px 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}
.stats-trend-chart::-webkit-scrollbar {
  display: none;
}
.stats-trend-chart.is-dragging {
  cursor: grabbing;
}
.trend-col {
  flex: 1;
  min-width: 32px;
  max-width: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s ease;
}
.trend-col:hover {
  transform: translateY(-2px);
}
.trend-col.is-today .trend-day-label {
  color: var(--primary);
  font-weight: 800;
}
.trend-pct-label {
  font-size: 10.5px;
  font-weight: 800;
  margin-bottom: 4px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trend-bar-track {
  flex: 1;
  width: 100%;
  max-width: 22px;
  background: rgba(108, 99, 255, 0.08);
  border-radius: 8px 8px 4px 4px;
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}
body.dark .trend-bar-track {
  background: rgba(0, 0, 0, 0.28);
}
.trend-bar-fill {
  width: 100%;
  border-radius: 7px 7px 0 0;
  transition: height 0.35s ease;
}
.trend-fill-perfect {
  background: linear-gradient(180deg, #ffd700 0%, #f59e0b 100%);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}
.trend-fill-high {
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
}
.trend-fill-med {
  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
}
.trend-fill-low {
  background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
}
.trend-fill-zero {
  background: transparent;
}
.trend-day-label {
  font-size: 11px;
  text-align: center;
  margin-top: 6px;
  line-height: 1.1;
  font-weight: 600;
}

/* Totales Acumulados de Vida */
.stats-life-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.stats-life-card {
  background: var(--bg-alt, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.stats-life-icon {
  font-size: 24px;
  margin-bottom: 4px;
}
.stats-life-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.stats-life-label {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Disciplina por Momento del Día */
.stats-tod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.stats-tod-card {
  background: var(--bg-alt, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}
.stats-tod-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.stats-tod-bar {
  height: 8px;
  background: rgba(108, 99, 255, 0.12);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 8px;
}
body.dark .stats-tod-bar {
  background: rgba(255, 255, 255, 0.08);
}
.stats-tod-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
}

/* Expediente de Hábito Individual */
.habit-dossier-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  margin-top: 16px;
}
.stage-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.stage-compare-card {
  background: var(--bg-alt, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

/* ==========================================================================
   MODAL TARJETA DE AVENTURERO (SHARE CARD) - RESPONSIVE & MOBILE READY
   ========================================================================== */
.share-card-modal-content {
  max-width: 440px !important;
  width: min(440px, 94vw) !important;
  text-align: center;
  padding: 18px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.share-card-preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6px 0;
  min-height: 0;
  flex: 1 1 auto;
}

#shareCardCanvas {
  max-width: 100%;
  max-height: min(42vh, 320px);
  width: auto;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(10, 8, 25, 0.4);
  display: block;
  background: #0d1117;
  object-fit: contain;
  margin: 0 auto;
}

.share-card-hint {
  font-size: 12px;
  margin: 6px 0 12px;
  line-height: 1.35;
}

.share-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}

.share-card-actions .btn-share-main {
  width: 100% !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 46px !important;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35) !important;
  cursor: pointer;
  touch-action: manipulation;
}

.share-card-secondary-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.share-card-secondary-row .btn-share-sub {
  flex: 1 1 50% !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 42px !important;
  white-space: nowrap !important;
  cursor: pointer;
  touch-action: manipulation;
}

@media (max-width: 480px) {
  #shareCardCanvas {
    max-height: min(38vh, 260px);
  }
  .share-card-modal-content {
    padding: 14px 12px 18px !important;
  }
}

/* En caso de banner activo de AdMob, asegurar que el canvas reduzca su altura para que los botones nunca se tapen */
body.has-admob-banner #shareCardCanvas {
  max-height: min(32vh, 230px);
}



/* ==========================================================================
   CABECERA COMPACTA DE HÁBITOS & PILLS SIN SALTO DE LÍNEA
   ========================================================================== */
.habits-header-compact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.habits-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.habits-toolbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.habits-search-box {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.habits-search-icon {
  position: absolute;
  left: 11px;
  font-size: 13px;
  color: var(--muted);
  pointer-events: none;
}
.habits-search-box input {
  width: 100%;
  padding: 8px 12px 8px 32px !important;
  font-size: 13px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  box-sizing: border-box;
}
.habits-quick-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.habits-icon-btn {
  width: 36px;
  height: 36px;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 11px !important;
  font-size: 15px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.habits-icon-btn:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.habits-filters-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.habits-filters-strip select {
  width: 100%;
  padding: 7px 8px !important;
  font-size: 11.5px !important;
  font-weight: 650;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  box-sizing: border-box;
  text-overflow: ellipsis;
  outline: none;
}

/* Fila de etiquetas del hábito (Categoría + Momento sin salto) */
.habit-tags-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-top: 3px;
  scrollbar-width: none;
}
.habit-tags-row::-webkit-scrollbar {
  display: none;
}
.habit-tags-row .pill {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 10.5px;
  padding: 2.5px 8px;
  line-height: 1.2;
}
.habit-stats-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11.5px;
  margin-top: 4px;
  white-space: nowrap;
}