:root {
  --color-bg: #F4EFE6;
  --color-bg-soft: #FBF7F0;
  --color-surface: #FFFDF8;
  --color-surface-warm: #F7EADC;
  --color-text: #2F302A;
  --color-muted: #757264;
  --color-border: #E1D6C6;
  --color-accent: #9D8061;
  --color-accent-strong: #735D46;
  --color-success: #6D8A73;
  --color-danger: #A66C60;
  --shadow-card: 0 18px 50px rgba(82, 65, 43, 0.10), 0 2px 10px rgba(82, 65, 43, 0.05);
  --shadow-soft: 0 10px 30px rgba(82, 65, 43, 0.08);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.35rem;
  --space-5: 1.75rem;
  --space-6: 2.5rem;
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;
}

/* Evitar selección de texto en elementos interactivos (evita el recuadro azul de Android) */
button, a, [role="button"],
.tab, .emotion-btn, .icon-button, .settings-btn,
.card, .entry-card, .avatar-option, label {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}

button:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid rgba(115, 93, 70, .4);
  outline-offset: 2px;
}

button:not(:disabled):active,
.tab:active,
.emotion-btn:active,
.icon-button:active,
.settings-btn:active,
a:active,
[role="button"]:active {
  transform: scale(0.95);
  opacity: 0.78;
  transition: transform 0.07s ease, opacity 0.07s ease;
}

html {
  min-height: 100%;
  background: var(--color-bg);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--color-text);
  background:
    radial-gradient(circle at 15% 5%, rgba(201, 183, 156, .38), transparent 34rem),
    radial-gradient(circle at 85% 15%, rgba(157, 128, 97, .18), transparent 28rem),
    linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg) 100%);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: .64;
}

:focus-visible {
  outline: 3px solid rgba(115, 93, 70, .34);
  outline-offset: 3px;
}

.app-shell {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: max(var(--space-4), env(safe-area-inset-top)) var(--space-3) max(var(--space-5), env(safe-area-inset-bottom));
}

/* ── Auth view: pantalla entera, tarjeta centrada ────────────────── */
.auth-view {
  min-height: 100svh;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: max(env(safe-area-inset-top), var(--space-3)) var(--space-3)
           max(env(safe-area-inset-bottom), var(--space-3));
}

/* ── Cabecera dentro de la tarjeta ────────────────────────────────── */
.auth-card-header { display: flex; flex-direction: column; gap: .25rem; }
.auth-card-brand  { display: flex; align-items: flex-start; gap: .7rem; }
.auth-card-brand .brand-mark {
  width: 2.2rem; height: 2.2rem; flex-shrink: 0; margin-top: .15rem;
}
.auth-card-brand-text h1 {
  font-size: clamp(1.3rem, 6vw, 2rem);
  line-height: 1.1;
  margin-bottom: 0;
  max-width: none;
  letter-spacing: -.03em;
}
.auth-card-brand-text .eyebrow { margin-bottom: .1rem; font-size: .68rem; }
.auth-card-header .lead { display: none; }   /* oculto en móvil */

/* ── Auth: inputs y botones compactos ─────────────────────────────── */
.auth-card input            { min-height: 42px; padding: .55rem .9rem; font-size: .92rem; }
.auth-card .button          { min-height: 44px; padding: .65rem 1rem;  font-size: .9rem; }
.auth-card .field-group     { gap: .25rem; }
.auth-card .field-error     { min-height: .7rem; font-size: .78rem; }
.auth-card .form-message    { font-size: .82rem; }
.auth-divider               { margin: -.15rem 0; font-size: .82rem; }
.auth-actions               { gap: var(--space-1); }

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--color-accent-strong);
  font-weight: 800;
  letter-spacing: .02em;
}

.brand-mark {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.hero-copy {
  max-width: 48rem;
}

.eyebrow {
  margin: 0 0 .45rem;
  color: var(--color-accent-strong);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--color-text);
  line-height: 1.05;
}

h1 {
  max-width: 11ch;
  margin-bottom: clamp(.2rem, 1vh, .6rem);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 9vw, 6.5rem);
  font-weight: 700;
  letter-spacing: -.055em;
}

h2 {
  margin-bottom: .35rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 3.4rem);
  letter-spacing: -.04em;
}

h3 {
  margin-bottom: 0;
  font-size: clamp(1.2rem, 4vw, 1.55rem);
  letter-spacing: -.02em;
}

.lead {
  max-width: 38rem;
  color: var(--color-muted);
  font-size: clamp(.9rem, 3vw, 1.1rem);
  margin-bottom: 0;
}

.card {
  border: 1px solid rgba(129, 105, 78, .13);
  border-radius: var(--radius-lg);
  background: rgba(255, 253, 248, .82);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px);
}

.auth-card {
  display: flex;
  flex-direction: column;
  gap: clamp(.4rem, 1.6vh, .85rem);
  padding: clamp(.85rem, 2.2vh, 1.35rem);
  scrollbar-width: none;
}
.auth-card::-webkit-scrollbar { display: none; }

.notice {
  border: 1px solid rgba(157, 128, 97, .24);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: #F4E7D4;
  color: var(--color-accent-strong);
  font-size: .95rem;
}

.field-group {
  display: grid;
  gap: .45rem;
}

label,
legend {
  color: var(--color-text);
  font-size: .94rem;
  font-weight: 750;
}

input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  color: var(--color-text);
  background: rgba(255, 255, 255, .68);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

textarea {
  resize: vertical;
  min-height: 7rem;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(115, 93, 70, .48);
  box-shadow: 0 0 0 4px rgba(157, 128, 97, .12);
  background: #fff;
}

.field-error,
.form-message {
  min-height: 1.25rem;
  margin: 0;
  color: var(--color-danger);
  font-size: .9rem;
}

.form-message.is-success {
  color: var(--color-success);
}

.auth-actions {
  display: grid;
  gap: var(--space-2);
}

.forgot-pw-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: .82rem;
  color: var(--color-accent);
  cursor: pointer;
  text-align: right;
  align-self: flex-end;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color .15s ease, text-decoration-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.forgot-pw-btn:hover,
.forgot-pw-btn:focus-visible {
  color: var(--color-accent-strong);
  text-decoration-color: currentColor;
}

/* ── Vista recuperar contraseña ─────────────────────────────────── */
#forgot-pw-view {
  display: grid;
  gap: var(--space-3);
}

.forgot-back-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: none;
  border: none;
  padding: 0;
  font-size: .84rem;
  font-weight: 700;
  color: var(--color-accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease;
}
.forgot-back-btn:hover { color: var(--color-accent-strong); }

.forgot-pw-header { display: grid; gap: .35rem; }

.forgot-pw-desc {
  margin: 0;
  font-size: .88rem;
  color: var(--color-muted);
  line-height: 1.45;
}

.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: 0;
  border-radius: 999px;
  padding: .9rem 1.15rem;
  font-weight: 800;
  letter-spacing: -.01em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

.button-primary {
  background: var(--color-accent-strong);
  color: #FFFDF8;
  box-shadow: 0 14px 30px rgba(115, 93, 70, .22);
}

.button-secondary,
.button-google,
.button-small {
  border: 1px solid rgba(115, 93, 70, .18);
  background: rgba(255, 253, 248, .78);
  color: var(--color-accent-strong);
}

.button-google .google-icon-wrap {
  width: 1.7rem;
  height: 1.7rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface-warm);
  font-weight: 900;
}

.button-small {
  min-height: 42px;
  padding-inline: .95rem;
}

.button-quiet {
  min-height: 44px;
  background: transparent;
  color: var(--color-danger);
}

.button-save {
  width: 100%;
  position: sticky;
  bottom: max(var(--space-3), env(safe-area-inset-bottom));
  z-index: 2;
}

.main-view {
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-6);
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
}

.topbar h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(2.15rem, 10vw, 4.6rem);
}

.icon-button {
  min-width: 54px;
  min-height: 44px;
  border: 1px solid rgba(115, 93, 70, .16);
  border-radius: 999px;
  background: rgba(255, 253, 248, .8);
  color: var(--color-accent-strong);
  font-weight: 800;
}

.tabbar {
  position: sticky;
  top: env(safe-area-inset-top);
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  border: 1px solid rgba(115, 93, 70, .14);
  border-radius: 999px;
  padding: .35rem;
  background: rgba(244, 239, 230, .78);
  backdrop-filter: blur(18px);
}

.tab {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-muted);
  font-weight: 800;
}

.tab.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
}

.view-panel {
  display: none;
}

.view-panel.is-active {
  display: block;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-3);
}

.section-heading p {
  margin-bottom: .25rem;
  color: var(--color-muted);
  text-align: right;
}

.daily-form,
.history-list {
  display: grid;
  gap: var(--space-4);
}

.mood-card,
.incidents-card,
.history-card {
  padding: var(--space-4);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.mood-value {
  min-width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface-warm);
  color: var(--color-accent-strong);
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
}

.mood-range {
  min-height: 44px;
  padding: 0;
  accent-color: var(--color-accent-strong);
  background: transparent;
}

.range-scale {
  display: flex;
  justify-content: space-between;
  color: var(--color-muted);
  font-size: .82rem;
}

.incidents-list {
  display: grid;
  gap: var(--space-3);
}

.incident-item {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  border: 1px solid rgba(129, 105, 78, .14);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: rgba(247, 234, 220, .42);
}

.incident-item legend {
  padding: 0 .45rem;
  color: var(--color-accent-strong);
}

.history-card {
  display: grid;
  gap: var(--space-3);
}

.history-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.history-date {
  margin: 0;
  font-weight: 900;
  letter-spacing: -.02em;
}

.mood-pair {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.mood-pill,
.emotion-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border-radius: 999px;
  padding: .35rem .75rem;
  background: var(--color-surface-warm);
  color: var(--color-accent-strong);
  font-size: .88rem;
  font-weight: 800;
}

.emotion-pill {
  background: rgba(109, 138, 115, .14);
  color: #536D59;
}

.incident-summary {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.incident-summary li {
  display: grid;
  gap: .35rem;
  border-top: 1px solid rgba(129, 105, 78, .12);
  padding-top: .75rem;
}

.empty-state {
  border: 1px dashed rgba(115, 93, 70, .24);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  color: var(--color-muted);
  background: rgba(255, 253, 248, .52);
  text-align: left;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

@media (min-width: 760px) {
  .app-shell {
    padding-inline: var(--space-6);
  }

  .auth-view {
    height: auto;
    min-height: 100svh;
    overflow: auto;
    align-items: center;
  }
  /* Restaurar tamaños completos en desktop */
  .auth-card-header .lead     { display: block; }
  .auth-card-brand-text h1    { font-size: clamp(2rem, 4vw, 3rem); }
  .auth-card input            { min-height: 48px; padding: .85rem 1rem; font-size: 1rem; }
  .auth-card .button          { min-height: 50px; padding: .9rem 1.15rem; font-size: 1rem; }
  .auth-card .field-group     { gap: .45rem; }
  .auth-card .field-error     { min-height: 1.25rem; font-size: .9rem; }
  .auth-divider               { margin: 0; font-size: 1rem; }
  .auth-actions               { gap: var(--space-2); }

  .auth-card {
    width: min(100%, 440px);
    margin: 0 auto;
    padding: var(--space-5);
    gap: var(--space-3);
  }

  .auth-actions {
    grid-template-columns: 1fr 1fr;
  }

  .main-view {
    max-width: 52rem;
    margin: 0 auto;
  }
}

@media (min-width: 1080px) {
  .main-view {
    max-width: 68rem;
  }

  .daily-form {
    grid-template-columns: 1fr 1fr;
  }

  .incidents-card,
  .button-save,
  .daily-form > .form-message {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ====================================================================
   MEJORAS DE INTERFAZ — Calma v2
   ==================================================================== */

/* ── Auth divider ────────────────────────────────────────────────────── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-muted);
  font-size: 0.82rem;
  margin: var(--space-1) 0;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ── Botón Google mejorado ───────────────────────────────────────────── */
.button-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 13px var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(82,65,43,0.06);
}
.button-google:hover {
  background: #fff;
  box-shadow: 0 4px 16px rgba(82,65,43,0.12);
  transform: translateY(-1px);
}
.button-google:active { transform: translateY(0); }

/* ── Botón primario con ícono ────────────────────────────────────────── */
.button-primary .btn-icon {
  display: inline-block;
  font-style: normal;
  margin-right: 4px;
  transition: transform 0.2s;
}
.button-primary:hover .btn-icon { transform: translateX(3px); }

/* ── Auth messages mejoradas ─────────────────────────────────────────── */
.form-message.is-error {
  color: var(--color-danger);
  background: rgba(166,108,96,0.08);
  border: 1px solid rgba(166,108,96,0.2);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: 0.88rem;
}
.form-message.is-loading {
  color: var(--color-accent);
  font-style: italic;
}
.form-message.is-success {
  color: var(--color-success);
  background: rgba(109,138,115,0.08);
  border: 1px solid rgba(109,138,115,0.2);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: 0.88rem;
}

/* ── Topbar mejorado ─────────────────────────────────────────────────── */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.brand-mark-sm {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-mark-sm img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  display: block;
}
.topbar h1 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  line-height: 1;
}
.topbar .eyebrow {
  font-size: 0.72rem;
  color: var(--color-muted);
  margin: 0 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.logout-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--color-muted);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.logout-btn:hover {
  color: var(--color-danger);
  border-color: rgba(166,108,96,0.35);
  background: rgba(166,108,96,0.06);
}

/* ── Date badge ──────────────────────────────────────────────────────── */
.date-badge {
  display: inline-block;
  background: var(--color-surface-warm);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.82rem;
  color: var(--color-accent-strong);
  font-weight: 500;
}

/* ── Botón guardar mejorado ──────────────────────────────────────────── */
.button-save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1rem;
  padding: 16px;
  letter-spacing: 0.01em;
}

/* ── Cards de estado de ánimo más expresivas ─────────────────────────── */
.mood-card .card-header {
  margin-bottom: var(--space-4);
}
.mood-value {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--color-accent-strong);
  line-height: 1;
  background: var(--color-surface-warm);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  min-width: 68px;
  text-align: center;
}

/* ── Range slider personalizado ─────────────────────────────────────── */
.mood-range {
  accent-color: var(--color-accent-strong);
  height: 6px;
  cursor: pointer;
}
.mood-range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
}

/* ── Historial — entrada con microinteracción ────────────────────────── */
.history-entry {
  animation: slideUp 0.25s ease-out both;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero copy mejorado ──────────────────────────────────────────────── */
.hero-copy h1 {
  line-height: 1.08;
}
.hero-copy .lead {
  font-size: 0.95rem;
  color: var(--color-muted);
  line-height: 1.6;
  margin-top: var(--space-2);
}

/* ── Brand lockup más grande ─────────────────────────────────────────── */
.brand-lockup {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  letter-spacing: -0.02em;
}
.brand-mark {
  font-size: 2.2rem;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════════
   CALMA v3 — NUEVOS COMPONENTES
   ═══════════════════════════════════════════════════════════════════ */

/* ── Auth extras ──────────────────────────────────────────────────── */
.auth-divider { display:flex; align-items:center; gap:.75rem; color:var(--color-muted); font-size:.82rem; margin:.25rem 0; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--color-border); }
.button-google { display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%; padding:13px 1rem; background:var(--color-surface); border:1.5px solid var(--color-border); border-radius:999px; color:var(--color-text); font-size:.95rem; font-weight:500; cursor:pointer; transition:background .2s, box-shadow .2s; box-shadow:0 2px 8px rgba(82,65,43,.06); }
.button-google:hover { background:#fff; box-shadow:0 4px 16px rgba(82,65,43,.12); }
.form-message.is-error { color:var(--color-danger); background:rgba(166,108,96,.08); border:1px solid rgba(166,108,96,.2); border-radius:var(--radius-sm); padding:.5rem .75rem; font-size:.86rem; }
.form-message.is-loading { color:var(--color-accent); font-style:italic; font-size:.88rem; }
.form-message.is-success { color:var(--color-success); background:rgba(109,138,115,.08); border:1px solid rgba(109,138,115,.2); border-radius:var(--radius-sm); padding:.5rem .75rem; font-size:.86rem; }
.save-success-rich { line-height:1.6; }

/* ── Topbar ─────────────────────────────────────────────────────────── */
.topbar-brand { display:flex; align-items:center; gap:.75rem; }
.brand-mark-sm { width:2rem; height:2rem; display:inline-flex; align-items:center; justify-content:center; }
.topbar h1 { font-family:var(--font-display); font-size:1.15rem; font-weight:700; margin:0; line-height:1; }
.topbar .eyebrow { font-size:.7rem; color:var(--color-muted); margin:0 0 2px; text-transform:uppercase; letter-spacing:.06em; }
.logout-btn { display:flex; align-items:center; gap:5px; font-size:.8rem; color:var(--color-muted); background:none; border:1px solid var(--color-border); border-radius:999px; padding:6px 13px; cursor:pointer; transition:all .2s; }
.logout-btn:hover { color:var(--color-danger); border-color:rgba(166,108,96,.4); background:rgba(166,108,96,.06); }

/* ── Tabs con 3 opciones ────────────────────────────────────────────── */
.tabbar { display:grid; grid-template-columns:repeat(3,1fr); }

/* ── Date badge ─────────────────────────────────────────────────────── */
.date-badge { display:inline-block; background:var(--color-surface-warm); border:1px solid var(--color-border); border-radius:999px; padding:3px 12px; font-size:.8rem; color:var(--color-accent-strong); font-weight:500; }

/* ── Range labels ───────────────────────────────────────────────────── */
.range-labels { display:flex; justify-content:space-between; margin-top:.3rem; font-size:.75rem; color:var(--color-muted); }

/* ── Nota libre ─────────────────────────────────────────────────────── */
.note-card textarea { width:100%; border:1.5px solid var(--color-border); border-radius:var(--radius-sm); padding:.75rem; font-size:.95rem; font-family:var(--font-body); color:var(--color-text); background:var(--color-bg-soft); resize:none; line-height:1.5; transition:border-color .2s; }
.note-card textarea:focus { outline:none; border-color:var(--color-accent); }
.char-count { font-size:.75rem; color:var(--color-muted); text-align:right; margin-top:.3rem; }

/* ── Mood value color dinámico ──────────────────────────────────────── */
.mood-value { transition:color .25s; }

/* ── Historial ──────────────────────────────────────────────────────── */
.history-list { display:flex; flex-direction:column; gap:.9rem; margin-top:1.2rem; }
.history-card { cursor:pointer; transition:transform .15s, box-shadow .15s; }
.history-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-card); }
.hcard-top { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; }
.hcard-date { display:flex; align-items:center; gap:.6rem; }
.hcard-emoji { font-size:1.4rem; line-height:1; }
.hcard-date strong { font-size:.95rem; color:var(--color-text); display:block; }
.hcard-avg { font-size:.78rem; color:var(--color-muted); }
.hcard-moods { display:flex; gap:.4rem; flex-shrink:0; }
.mood-pill { font-size:.8rem; padding:3px 9px; border-radius:999px; font-weight:600; background:var(--color-surface-warm); color:var(--color-accent-strong); border:1px solid var(--color-border); }
.hcard-note { font-size:.85rem; color:var(--color-muted); margin-top:.6rem; font-style:italic; line-height:1.45; border-left:2px solid var(--color-border); padding-left:.6rem; }
.hcard-incidents-count { font-size:.78rem; color:var(--color-accent); margin-top:.5rem; }

/* ── Calendario ─────────────────────────────────────────────────────── */
.cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.cal-nav-btn { background:none; border:1px solid var(--color-border); border-radius:8px; color:var(--color-accent-strong); font-size:1.2rem; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s; }
.cal-nav-btn:hover { background:var(--color-surface-warm); }
.cal-month-label { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--color-text); }
.calendar-grid-wrap { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:.75rem; margin-bottom:1.2rem; }
.cal-weekdays { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; margin-bottom:.4rem; }
.cal-weekdays span { font-size:.7rem; color:var(--color-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; padding:.2rem 0; }
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-cell { position:relative; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:8px; font-size:.82rem; color:var(--color-muted); }
.cal-cell.cal-has-entry { cursor:pointer; font-weight:600; transition:transform .15s, background .15s; }
.cal-cell.cal-has-entry:hover { transform:scale(1.08); }
.cal-cell.cal-today .cal-day-num { background:var(--color-accent-strong); color:#fff; border-radius:50%; width:1.6rem; height:1.6rem; display:flex; align-items:center; justify-content:center; }
.cal-cell.mood-high { background:rgba(109,138,115,.18); color:var(--color-success); }
.cal-cell.mood-mid  { background:rgba(157,128,97,.15);  color:var(--color-accent-strong); }
.cal-cell.mood-low  { background:rgba(166,108,96,.18);  color:var(--color-danger); }
.cal-dot { position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:currentColor; }
.cal-day-num { font-size:.82rem; line-height:1; }

/* ── Modal ──────────────────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(47,48,42,.55); backdrop-filter:blur(4px); z-index:200; display:flex; align-items:flex-end; justify-content:center; animation:fadeOverlay .2s ease; }
.modal-overlay[hidden] { display:none; }
@keyframes fadeOverlay { from { opacity:0; } to { opacity:1; } }
.modal-sheet { background:var(--color-surface); border-radius:var(--radius-lg) var(--radius-lg) 0 0; width:100%; max-width:480px; max-height:88vh; overflow-y:auto; padding:.6rem 1.25rem 2.5rem; animation:slideSheet .28s cubic-bezier(.22,1,.36,1); }
/* Drag handle visual */
.modal-drag-handle {
  width: 100%;
  padding: .55rem 0 .35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.modal-drag-handle::after {
  content: '';
  display: block;
  width: 2.6rem;
  height: 4px;
  border-radius: 999px;
  background: var(--color-border);
  opacity: .7;
  transition: opacity .15s ease, width .15s ease;
}
.modal-drag-handle:active::after,
.modal-drag-handle.is-dragging::after {
  opacity: 1;
  width: 3.2rem;
  cursor: grabbing;
}
@keyframes slideSheet { from { transform:translateY(60px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.modal-header h3 { font-family:var(--font-display); font-size:1.1rem; color:var(--color-text); margin:0; }
.modal-close { background:var(--color-bg-soft); border:none; border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--color-muted); cursor:pointer; transition:background .2s; }
.modal-close:hover { background:var(--color-surface-warm); }
.modal-moods { display:flex; align-items:center; justify-content:space-around; background:var(--color-bg-soft); border-radius:var(--radius-md); padding:1.2rem .75rem; margin-bottom:.75rem; }
.modal-mood-block { text-align:center; }
.modal-mood-block .eyebrow { font-size:.72rem; color:var(--color-muted); margin-bottom:.3rem; }
.modal-mood-num { font-family:var(--font-display); font-size:2.4rem; font-weight:700; line-height:1; }
.modal-mood-num small { font-size:.9rem; opacity:.6; }
.modal-mood-divider { font-size:2rem; opacity:.4; }
.modal-avg { text-align:center; font-size:.85rem; color:var(--color-muted); margin-bottom:1rem; }
.modal-avg strong { color:var(--color-accent-strong); }
.modal-section { margin-top:1rem; }
.modal-section-title { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--color-muted); margin-bottom:.6rem; }
.modal-note-text { font-size:.92rem; color:var(--color-text); line-height:1.55; background:var(--color-bg-soft); border-radius:var(--radius-sm); padding:.75rem; border-left:3px solid var(--color-accent); }
.modal-incidents { display:flex; flex-direction:column; gap:.75rem; }
.modal-incident-item { background:var(--color-bg-soft); border-radius:var(--radius-sm); padding:.85rem; }
.modal-incident-header { display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; }
.modal-incident-num { width:1.4rem; height:1.4rem; border-radius:50%; background:var(--color-accent); color:#fff; font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.modal-incident-comment { font-size:.9rem; color:var(--color-text); font-weight:500; margin-bottom:.25rem; }
.modal-incident-consequence { font-size:.82rem; color:var(--color-muted); font-style:italic; }
.modal-no-incidents { font-size:.85rem; color:var(--color-muted); text-align:center; padding:1rem 0; }
.emotion-pill { display:inline-block; font-size:.75rem; padding:2px 9px; border-radius:999px; font-weight:600; background:var(--color-surface-warm); color:var(--color-accent-strong); border:1px solid var(--color-border); }
.ep-alegria, .ep-gratitud, .ep-orgullo { background:rgba(109,138,115,.15); color:var(--color-success); border-color:rgba(109,138,115,.3); }
.ep-tristeza, .ep-culpa, .ep-miedo    { background:rgba(166,108,96,.12); color:var(--color-danger);  border-color:rgba(166,108,96,.3); }
.ep-ansiedad, .ep-enojo, .ep-frustracion { background:rgba(157,128,97,.15); color:#7a5c36;            border-color:rgba(157,128,97,.3); }

/* ── Estadísticas ───────────────────────────────────────────────────── */
.stats-content { display:flex; flex-direction:column; gap:1.2rem; width:100%; box-sizing:border-box; min-width:0; }
/* ── Acciones del encabezado del resumen (íconos) ── */
.section-heading-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
/* El encabezado de "Mi resumen" en una sola fila (no que se vaya abajo) */
#stats-panel .section-heading { flex-wrap: nowrap; margin: .35rem 0 .75rem; }
#stats-panel .section-heading h2 { flex: 0 1 auto; white-space: nowrap; }
.stats-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-accent-strong);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.stats-icon-btn:hover { background: var(--color-surface-warm, #FBF6EC); }
.stats-icon-btn:active { transform: scale(.92); }
.stats-icon-btn[hidden] { display: none; }

/* ── Menú compartir (hoja inferior) ── */
.share-menu-sheet { max-width: 460px; }
.share-options { display: flex; flex-direction: column; gap: .65rem; padding: .25rem .25rem 1rem; }
.share-option {
  display: flex; align-items: center; gap: .85rem;
  width: 100%; box-sizing: border-box;
  padding: .9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  text-align: left; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.share-option:hover { box-shadow: 0 4px 14px rgba(82,65,43,.08); }
.share-option:active { transform: scale(.985); }
.share-option[hidden] { display: none; }
.share-option-icon {
  flex-shrink: 0; width: 46px; height: 46px;
  display: grid; place-items: center; border-radius: 13px;
}
.share-option-icon svg { width: 24px; height: 24px; }
.share-option-text { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.share-option-title { font-weight: 600; font-size: .98rem; color: var(--color-text); }
.share-option-sub { font-size: .8rem; color: var(--color-muted); }

/* ── Orbe hero del resumen (panel "Mi resumen") ── */
.stats-hero {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  width: 100%; box-sizing: border-box;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.2rem 1.5rem;
  text-align: center;
}
.stats-hero-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-muted); margin: 0 0 .25rem;
}
.stats-hero .ws-hero-orb { width: 84px; height: 84px; }
.stats-hero .ws-hero-name { font-size: 1.85rem; }
.stats-hero .ws-hero-times { max-width: 19rem; line-height: 1.5; }
.stats-hero-orb-neutral {
  --c: #C9B79C;
  background: radial-gradient(circle at 38% 32%, #E8DCC4, #C9B79C) !important;
}

.stats-kpi-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; width:100%; box-sizing:border-box; min-width:0; }
.stats-kpi { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:1rem; text-align:center; box-sizing:border-box; min-width:0; overflow:hidden; }
.stats-kpi-val { display:block; font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--color-accent-strong); line-height:1; }
.stats-kpi-label { font-size:.75rem; color:var(--color-muted); text-transform:uppercase; letter-spacing:.04em; display:block; margin-top:.25rem; }
.stats-trend { background:var(--color-surface-warm); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:.6rem .9rem; font-size:.85rem; color:var(--color-accent-strong); text-align:center; font-weight:500; }
.stats-section { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:1rem 1.1rem; width:100%; box-sizing:border-box; min-width:0; }
.stats-section-title { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--color-muted); margin-bottom:.75rem; }
.stats-highlight-row { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; width:100%; box-sizing:border-box; min-width:0; }
.stats-highlight { border-radius:var(--radius-sm); padding:.8rem; display:flex; flex-direction:column; gap:.2rem; box-sizing:border-box; min-width:0; overflow:hidden; }
.stats-highlight.best  { background:rgba(109,138,115,.12); border:1px solid rgba(109,138,115,.25); }
.stats-highlight.worst { background:rgba(166,108,96,.1);   border:1px solid rgba(166,108,96,.2); }
.stats-hl-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--color-muted); }
.stats-hl-date  { font-size:.8rem;  color:var(--color-text); font-weight:500; }
.stats-hl-val   { font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:var(--color-accent-strong); }
.stats-emotions { display:flex; flex-direction:column; gap:.55rem; }
.stats-emotion-row { display:flex; align-items:center; gap:.6rem; }
.emotion-bar-wrap { flex:1; height:6px; background:var(--color-border); border-radius:999px; overflow:hidden; }
.emotion-bar { height:100%; background:var(--color-accent); border-radius:999px; transition:width .4s ease; }
.emotion-cnt { font-size:.78rem; color:var(--color-muted); font-weight:600; min-width:1.5rem; text-align:right; }
.stats-total-inc { font-size:.78rem; color:var(--color-muted); margin-top:.6rem; text-align:right; }
.sparkline-wrap {
  background: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-surface) 100%);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.sparkline-svg {
  width: 100%;
  height: 96px;
  display: block;
  color: var(--color-muted);
}
.sparkline-labels { display:flex; justify-content:space-between; font-size:.7rem; color:var(--color-muted); margin-top:.45rem; }
.sparkline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .65rem;
  margin-top: .75rem;
  align-items: center;
}
.spark-legend-dot {
  display: inline-block;
  width: .52rem;
  height: .52rem;
  border-radius: 50%;
  vertical-align: middle;
  flex-shrink: 0;
}
.spark-legend-lbl {
  font-size: .7rem;
  color: var(--color-muted);
  vertical-align: middle;
}

/* ── Toast ──────────────────────────────────────────────────────────── */
.toast { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%); background:rgba(47,34,20,.93); color:#FDF5E8; padding:.6rem 1.2rem; border-radius:999px; font-size:.85rem; font-weight:500; z-index:300; animation:toastIn .2s ease; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.toast[hidden] { display:none; }
@keyframes toastIn { from { opacity:0; transform:translateX(-50%) translateY(8px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }

/* ── Empty state ────────────────────────────────────────────────────── */
.empty-state { text-align:center; color:var(--color-muted); padding:2rem 1rem; font-size:.9rem; line-height:1.6; }

/* ── Incident item mejorado ─────────────────────────────────────────── */
.incident-item { border:1.5px solid var(--color-border); border-radius:var(--radius-md); padding:1rem; margin-bottom:.75rem; background:var(--color-bg-soft); }
.incident-item legend { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--color-accent); padding:0 .4rem; }
.remove-incident { color:var(--color-danger); font-size:.78rem; margin-top:.5rem; background:none; border:none; cursor:pointer; padding:0; opacity:.7; }
.remove-incident:hover { opacity:1; }

/* ═══════════════════════════════════════════════════════════════════
   CALMA v3.1 — ICONOS SVG + CORRECCIÓN DE MÁRGENES
   ═══════════════════════════════════════════════════════════════════ */

/* ── Iconos SVG inline ──────────────────────────────────────────────── */
.ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  flex-shrink: 0;
  color: inherit;
}
.ico-sm {
  width: .9em;
  height: .9em;
}
.ico-inline {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
/* Iconos de estado de ánimo en tarjetas */
.ico-state {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
}
.ico-high { color: var(--color-success); }
.ico-mid  { color: var(--color-accent); }
.ico-low  { color: var(--color-danger); }

/* Label con icono en eyebrow */
.ico-label {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.ico-label .ico {
  opacity: .75;
}

/* Icono en mood-pill */
.mood-pill .ico {
  width: .85em;
  height: .85em;
  opacity: .8;
}

/* hcard-ico usa el mismo espacio que antes hcard-emoji */
.hcard-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Modal mood divider con icono */
.modal-mood-divider .ico-state {
  width: 2rem;
  height: 2rem;
  opacity: .5;
}

/* Stats icons en títulos */
.stats-section-title .ico-inline,
.stats-trend .ico-inline {
  vertical-align: -0.2em;
  margin-right: .25rem;
}

/* ── Corrección de márgenes ─────────────────────────────────────────── */

/* Evitar que el contenido se salga lateralmente */
.app-shell {
  overflow-x: hidden;
}

/* View panels: asegurar padding consistente sin overflow */
.view-panel {
  box-sizing: border-box;
  width: 100%;
}

/* Calendario: las celdas no deben desbordarse */
.calendar-grid-wrap {
  overflow: hidden;
  box-sizing: border-box;
}
.calendar-grid {
  width: 100%;
  box-sizing: border-box;
}
.cal-cell {
  min-width: 0;
  box-sizing: border-box;
}
.cal-day-num {
  font-size: .78rem;
}

/* Stats KPI grid: asegurar que las 2 columnas no se desborden */
.stats-kpi-grid {
  box-sizing: border-box;
  width: 100%;
}
.stats-kpi {
  min-width: 0;
  box-sizing: border-box;
}

/* Sparkline: no salirse */
.sparkline-wrap {
  width: 100%;
  box-sizing: border-box;
}

/* Modal sheet: no salirse en pantallas pequeñas */
.modal-sheet {
  box-sizing: border-box;
  width: 100%;
}

/* Historial: cards no desbordarse */
.history-card {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}
.hcard-top {
  min-width: 0;
}
.hcard-date {
  min-width: 0;
  overflow: hidden;
}
.hcard-date strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}

/* Emotion pills en stats: no desbordarse */
.stats-emotion-row {
  min-width: 0;
  flex-wrap: nowrap;
}
.stats-emotion-row .emotion-pill {
  flex-shrink: 0;
  max-width: 7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Incidents: texto largo no desbordarse */
.modal-incident-comment,
.modal-incident-consequence {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Note card: textarea anchura correcta */
.note-card {
  box-sizing: border-box;
}
.note-card textarea {
  box-sizing: border-box;
  width: 100%;
}

/* Botón guardar: texto con icono alineado */
.button-save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.button-save .ico-sm {
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   CALMA v5 — FIXES DESBORDAMIENTO Y PADDING FALTANTE
   ═══════════════════════════════════════════════════════════════════ */

/* note-card le faltaba padding como el resto de las cards */
.note-card {
  padding: var(--space-4);
}

/* Todos los .card con contenido directo: box-sizing seguro */
.card {
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
}

/* incident-item: no salirse del card padre */
.incident-item {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.incident-item input,
.incident-item select,
.incident-item textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* section-heading: evitar que el date-badge empuje fuera */
.section-heading {
  flex-wrap: wrap;
}
.section-heading h2 {
  min-width: 0;
}

/* Cal-nav label: no salirse si el mes es muy largo */
.cal-month-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  flex: 1;
}

/* Stats highlight: texto no desbordarse */
.stats-hl-date {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Modal moods: no salirse en pantallas muy pequeñas */
.modal-moods {
  box-sizing: border-box;
  width: 100%;
}

/* Mood range: ancho completo sin overflow */
.mood-range {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* hcard-moods: no empujar fuera de la tarjeta */
.hcard-moods {
  flex-shrink: 0;
  flex-wrap: nowrap;
}

/* ================================================================
   FIX RESUMEN/STATS — Centrado correcto en todos los dispositivos
   ================================================================ */
#stats-panel {
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.stats-content,
.stats-kpi-grid,
.stats-highlight-row,
.stats-section,
.stats-emotions,
.sparkline-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* Evitar que el text-align o margin-left rompa el centrado */
.stats-hl-label,
.stats-hl-date,
.stats-hl-val {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* En pantallas muy pequeñas, apilar los KPIs en lugar de 2 columnas */
@media (max-width: 360px) {
  .stats-kpi-grid,
  .stats-highlight-row {
    grid-template-columns: 1fr;
  }
}


/* ================================================================
   PERFIL — tarjeta en resumen
   ================================================================ */
.profile-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  margin-bottom: .5rem;
}

.profile-avatar-wrap {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-accent, #9D8061);
  background: var(--color-accent, #9D8061);
  box-shadow: 0 4px 14px rgba(115, 93, 70, 0.28), 0 1px 4px rgba(115, 93, 70, 0.18);
  padding: 0;
}

.profile-avatar-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}

.profile-info {
  flex: 1;
  min-width: 0;
}

.profile-username {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text, #2C1A0E);
  margin: 0 0 .4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-actions {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: .3rem;
}

/* ================================================================
   MODAL DE AVATARES
   ================================================================ */
.avatar-modal-sheet {
  max-width: 420px !important;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  padding: .25rem 0 .5rem;
}

.avatar-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  background: var(--color-surface, #FFFDF8);
  border: 2.5px solid var(--color-border, #D4C4B0);
  border-radius: var(--radius-md, 12px);
  padding: .9rem .5rem .6rem;
  cursor: pointer;
  transition: border-color .18s, transform .15s, box-shadow .18s;
  box-shadow: 0 2px 8px rgba(115, 93, 70, 0.07);
}

.avatar-option:hover {
  border-color: var(--color-accent-strong, #735D46);
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(115, 93, 70, 0.18);
}

.avatar-option.is-selected {
  border-color: var(--color-accent-strong, #735D46);
  border-width: 3px;
  background: rgba(115, 93, 70, 0.10);
  box-shadow: 0 4px 16px rgba(115, 93, 70, 0.22), 0 0 0 3px rgba(115, 93, 70, 0.14);
}

.avatar-option svg {
  width: 64px;
  height: 64px;
  display: block;
}

.avatar-option-label {
  font-size: .7rem;
  color: var(--color-muted, #A08060);
  text-align: center;
  line-height: 1.2;
}


/* ================================================================
   CAMPO USERNAME — solo visible al registrar
   ================================================================ */
#username-field {
  animation: fadeIn .2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}



/* ================================================================
   ANIMACIONES GENERALES
   ================================================================ */
@keyframes incidentSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulseGreen {
  0%   { box-shadow: 0 0 0 0 rgba(109,138,115,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(109,138,115,0); }
  100% { box-shadow: 0 0 0 0 rgba(109,138,115,0); }
}

/* Entrada de tarjetas de historial */
.history-card {
  animation: fadeSlideUp .3s ease both;
}

/* Entrada del modal */
.modal-sheet {
  animation: fadeSlideUp .25s ease both;
}

/* ================================================================
   BOTÓN ELIMINAR EVENTO EN MODAL (solo día en curso)
   ================================================================ */
.delete-incident-btn {
  margin-left: auto;
  background: none;
  border: 1px solid var(--color-danger, #c0392b);
  color: var(--color-danger, #c0392b);
  border-radius: 999px;
  padding: .2rem .7rem;
  font-size: .72rem;
  cursor: pointer;
  opacity: .75;
  transition: opacity .2s, background .2s, color .2s, transform .15s;
  white-space: nowrap;
}

.delete-incident-btn:hover {
  background: var(--color-danger, #c0392b);
  color: #fff;
  opacity: 1;
  transform: scale(1.04);
}

.delete-incident-btn:active {
  transform: scale(.97);
}

.modal-incident-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

/* ================================================================
   EVENTO GUARDADO — ocultar botón eliminar con transición
   ================================================================ */
.incident-saved .remove-incident {
  /* Ocultar via JS para permitir animación de colapso */
  pointer-events: none;
}

/* Animación al guardar el formulario completo */
.incident-saved {
  animation: pulseGreen .6s ease;
}

/* ================================================================
   AVATARES — imagen en lugar de SVG
   ================================================================ */
.profile-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  display: block;
}

.avatar-option img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  display: block;
  transition: transform .2s ease;
  border: 3px solid var(--color-accent, #9D8061);
  background: var(--color-accent, #9D8061);
  box-shadow: 0 3px 10px rgba(115, 93, 70, 0.25);
}

.avatar-option:hover img {
  transform: scale(1.06);
}

.avatar-option.is-selected img {
  border-color: var(--color-accent-strong, #735D46);
  box-shadow: 0 0 0 3px var(--color-accent-strong, #735D46), 0 4px 14px rgba(115, 93, 70, 0.30);
}

/* Animación entrada de avatares en el modal */
.avatar-option {
  animation: fadeSlideUp .2s ease both;
}
.avatar-option:nth-child(1) { animation-delay: .03s; }
.avatar-option:nth-child(2) { animation-delay: .06s; }
.avatar-option:nth-child(3) { animation-delay: .09s; }
.avatar-option:nth-child(4) { animation-delay: .12s; }
.avatar-option:nth-child(5) { animation-delay: .15s; }
.avatar-option:nth-child(6) { animation-delay: .18s; }


/* ================================================================
   AVATAR UPLOAD — opción subir foto propia
   ================================================================ */
.avatar-option-upload {
  border-style: dashed;
  border-color: var(--color-accent, #9D8061);
  background: rgba(157,128,97,.06);
}
.avatar-option-upload:hover {
  background: rgba(157,128,97,.12);
}
.avatar-option-upload.is-selected {
  border-style: solid;
  border-color: var(--color-accent-strong, #735D46);
  background: rgba(157,128,97,.12);
}
.avatar-upload-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface-warm, #F7EADC);
  color: var(--color-accent, #9D8061);
  border: 3px solid var(--color-accent, #9D8061);
  box-shadow: 0 3px 10px rgba(115, 93, 70, 0.15);
}
/* 7 hijos posibles (1 upload + 6 avatares) */
.avatar-option:nth-child(7) { animation-delay: .21s; }

/* ================================================================
   FIX ANIMACIONES — evitar parpadeo en calendario y modal
   ================================================================ */

/* El calendario NO debe tener animación que cause flash */
.cal-cell {
  transition: background .15s ease, border-color .15s ease;
}
/* Solo el modal y las tarjetas de historial tienen fade entrada */
.history-card {
  animation: fadeSlideUp .28s ease both;
}
/* El modal-incident-item necesita max-height inicial definida para colapsar bien */
.modal-incident-item {
  overflow: visible;
  max-height: 600px; /* suficientemente grande */
  transition: none; /* sin transición por defecto — se aplica inline al eliminar */
}

/* ================================================================
   FIX: incident-saved — transición limpia sin !important que la rompa
   ================================================================ */
.incident-saved .remove-incident {
  /* Se maneja via JS con inline styles para la animación de colapso */
  pointer-events: none;
}



/* ══════════════════════════════════════════════════════════════════
   SPLASH SCREEN — animación de carga inicial
   ══════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
   SPLASH SCREEN — Pantalla de carga
   ════════════════════════════════════════════════════════════════════ */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 30% 0%,   rgba(201, 183, 156, .55), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(157, 128, 97,  .30), transparent 45%),
    linear-gradient(160deg, #FBF7F0 0%, #F4EFE6 100%);
  transition: opacity .5s ease, visibility .5s ease;
}

.splash-screen.splash-hiding {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  animation: splashFadeIn .65s cubic-bezier(.16,1,.3,1) both;
}

@keyframes splashFadeIn {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}

/* Anillo decorativo detrás del logo */
.splash-logo-wrap {
  position: relative;
  width: 8rem;
  height: 8rem;
  display: grid;
  place-items: center;
}

.splash-logo-wrap::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(
    rgba(157,128,97,.22) 0deg,
    rgba(201,183,156,.55) 90deg,
    rgba(115,93,70,.12) 180deg,
    rgba(201,183,156,.40) 270deg,
    rgba(157,128,97,.22) 360deg
  );
  animation: splashRing 3.5s linear infinite;
  mask: radial-gradient(circle at center, transparent 62%, black 64%);
  -webkit-mask: radial-gradient(circle at center, transparent 62%, black 64%);
}

@keyframes splashRing {
  to { transform: rotate(360deg); }
}

.splash-logo {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background: rgba(255,253,248,.85);
  box-shadow:
    0 20px 60px rgba(82,65,43,.16),
    0 4px 16px  rgba(82,65,43,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
  display: grid;
  place-items: center;
  animation: splashPulse 3s ease-in-out infinite;
  overflow: hidden;
}

.splash-logo img {
  width: 4.2rem;
  height: 4.2rem;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(82,65,43,.20));
}

@keyframes splashPulse {
  0%, 100% { box-shadow: 0 20px 60px rgba(82,65,43,.16), 0 4px 16px rgba(82,65,43,.08), inset 0 1px 0 rgba(255,255,255,.9); }
  50%       { box-shadow: 0 28px 70px rgba(115,93,70,.24), 0 6px 22px rgba(115,93,70,.14), inset 0 1px 0 rgba(255,255,255,.9); }
}

.splash-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -.055em;
  color: var(--color-accent-strong);
  line-height: 1;
}

.splash-subtitle {
  margin: -.6rem 0 0;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
  opacity: .7;
}

.splash-dots {
  display: flex;
  gap: .45rem;
  align-items: center;
}

.splash-dots span {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: .3;
  animation: splashDot 1.4s ease-in-out infinite;
}

.splash-dots span:nth-child(2) { animation-delay: .22s; }
.splash-dots span:nth-child(3) { animation-delay: .44s; }

@keyframes splashDot {
  0%, 80%, 100% { opacity: .3;  transform: scale(.8); }
  40%            { opacity: .9; transform: scale(1.2); }
}

/* ================================================================
   EMBUDO DE PLUTCHIK — Emotion Picker
   ================================================================ */

/* El output que ahora muestra texto en lugar de número */
.mood-value-text {
  font-size: .78rem;
  font-weight: 700;
  max-width: 7rem;
  text-align: right;
  line-height: 1.25;
  word-break: break-word;
  color: var(--color-accent-strong);
  font-family: var(--font-body);
}

/* Contenedor del picker */
.emotion-picker {
  margin-top: var(--space-3);
}

/* Texto de ayuda en cada paso */
.emotion-hint {
  margin: 0 0 .7rem;
  color: var(--color-muted);
  font-size: .82rem;
  text-align: center;
  letter-spacing: .01em;
}

/* Paso — animación de entrada */
.emotion-step {
  animation: fadeSlideUp .22s ease both;
}

.emotion-step.is-hidden {
  display: none;
}

/* Grid de 5 columnas para emociones primarias */
.emotion-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .45rem;
}

/* Grid de 3 columnas para sub-emociones */
.emotion-grid-sub {
  grid-template-columns: repeat(3, 1fr);
}

/* Botón de emoción */
.emotion-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: .7rem .3rem .6rem;
  background: rgba(255, 253, 248, .6);
  color: var(--color-text);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease,
              transform .18s ease, box-shadow .18s ease;
  min-height: 0; /* override .button min-height */
}

.emotion-btn:hover {
  background: rgba(255, 253, 248, .95);
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.emotion-btn:active {
  transform: translateY(0);
}

.emotion-btn.is-selected {
  border-color: var(--color-accent-strong);
  background: rgba(115, 93, 70, .09);
  box-shadow: 0 0 0 3px rgba(115, 93, 70, .13);
}

/* Sub-emociones: ligeramente más grandes */
.emotion-grid-sub .emotion-btn {
  font-size: .78rem;
  padding: .8rem .5rem .7rem;
}

/* El punto de color */
.emotion-dot {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: .82;
  transition: opacity .18s ease, transform .18s ease;
}

.emotion-btn:hover .emotion-dot,
.emotion-btn.is-selected .emotion-dot {
  opacity: 1;
  transform: scale(1.1);
}

/* Botón "← Volver" */
.emotion-back-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: .65rem;
  color: var(--color-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: color .15s ease;
  min-height: 0; /* override .button */
}

.emotion-back-btn:hover {
  color: var(--color-accent-strong);
}

/* ================================================================
   ABRAZO ESTADÍSTICO — mensaje post-guardado
   ================================================================ */
.hug-card {
  margin-top: var(--space-3);
  border: 1px solid rgba(129, 105, 78, .13);
  border-radius: var(--radius-md);
  background: rgba(255, 253, 248, .78);
  box-shadow: var(--shadow-soft);
  padding: var(--space-3) var(--space-4);
  animation: fadeSlideUp .3s ease both;
}

.hug-card p {
  margin: 0;
  font-size: .92rem;
  color: var(--color-text);
  line-height: 1.55;
}

.hug-stat {
  display: block;
  margin-top: .3rem;
  font-size: .82rem;
  color: var(--color-muted);
}

/* ================================================================
   CABALLO DE TROYA — botón + textarea de reflexión
   ================================================================ */
.trojan-btn {
  width: 100%;
  margin-top: var(--space-2);
  border: 1.5px solid rgba(115, 93, 70, .22);
  border-radius: var(--radius-md);
  background: rgba(255, 253, 248, .6);
  padding: .85rem var(--space-3);
  color: var(--color-accent-strong);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease,
              box-shadow .18s ease, transform .18s ease;
  min-height: 0;
  background-image: linear-gradient(
    135deg,
    rgba(201, 183, 156, .12) 0%,
    rgba(157, 128, 97, .06) 100%
  );
}

.trojan-btn:hover {
  border-color: var(--color-accent-strong);
  background: rgba(255, 253, 248, .95);
  box-shadow: 0 6px 20px rgba(115, 93, 70, .12);
  transform: translateY(-1px);
}

.trojan-area {
  margin-top: var(--space-2);
  animation: fadeSlideUp .25s ease both;
}

.trojan-area label {
  display: block;
  margin-bottom: .45rem;
  color: var(--color-muted);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.trojan-area textarea {
  min-height: 5.5rem;
  font-size: .92rem;
}

.trojan-save-btn {
  margin-top: .65rem;
  width: 100%;
  min-height: 0;
  padding: .7rem 1rem;
  font-size: .85rem;
}

/* Estado "reflexión guardada" */
.trojan-saved-msg {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: var(--space-2);
  color: var(--color-success);
  font-size: .85rem;
  font-weight: 700;
  animation: fadeSlideUp .25s ease both;
}
/* ================================================================
   HISTORIAL v2 — Emotion-based history cards
   ================================================================ */
.hcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}
.hcard-date {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}
.hcard-date strong {
  font-size: .92rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.hcard-emotions {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-top: .2rem;
}
.hcard-emo-slot {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.hcard-emo-time {
  color: var(--color-muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.hcard-emo-time .ico { width: .82rem; height: .82rem; }

.hcard-emo-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .65rem;
  border-radius: 999px;
  background: var(--color-surface-warm);
  border: 1px solid var(--color-border);
  font-size: .78rem;
  font-weight: 650;
  color: var(--color-text);
  line-height: 1.3;
}
.hcard-emo-dot {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.hcard-note {
  margin: 0;
  font-size: .82rem;
  color: var(--color-muted);
  font-style: italic;
  line-height: 1.5;
}
.hcard-footer {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  padding-top: .55rem;
  border-top: 1px solid rgba(129,105,78,.1);
}
.hcard-meta {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .72rem;
  color: var(--color-muted);
  font-weight: 600;
  letter-spacing: .01em;
}
.hcard-reflection-tag { color: var(--color-accent-strong); }
.hcard-reflection-tag .ico { width: .78rem; height: .78rem; }

/* ================================================================
   MODAL v2 — Emotion display in day modal
   ================================================================ */
.modal-emo-block {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .45rem;
  min-height: 2.2rem;
}
.modal-emo-dot {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.modal-emo-label {
  font-size: .96rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}
.modal-emo-label small {
  display: block;
  font-size: .76rem;
  font-weight: 500;
  color: var(--color-muted);
  margin-top: .1rem;
}
.modal-emo-empty {
  font-size: .85rem;
  color: var(--color-muted);
  font-style: italic;
}
.modal-reflection {
  background: rgba(115,93,70,.06);
  border-left: 3px solid var(--color-accent);
}

/* ================================================================
   STATS v2 — Emotion-frequency based summary
   ================================================================ */
.stats-dominant {
  padding-left: 1.1rem !important;
}
.stats-dominant-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: .55rem;
}
.stats-dominant-dot {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: .88;
}
.stats-dominant-text { min-width: 0; }
.stats-dominant-label {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--color-text);
  margin: 0;
  line-height: 1.05;
}
.stats-dominant-sub {
  font-size: .8rem;
  color: var(--color-muted);
  margin: .25rem 0 0;
}
.stats-emo-dot {
  width: .72rem;
  height: .72rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.stats-emo-name {
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-text);
  min-width: 5.2rem;
  flex-shrink: 0;
}
.stats-empty-icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: .5rem;
  opacity: .5;
}
/* ================================================================
   CALMA — FIX HISTORIAL MÓVIL (desbordamiento, modal, centrado)
   ================================================================ */

/* El panel de historial nunca se desborda hacia la derecha */
#history-panel {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Contenedor de navegación del calendario: centrado y sin overflow */
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
  width: 100%;
  box-sizing: border-box;
}

/* Label del mes: centrado y que no desborde */
.cal-month-label {
  flex: 1;
  text-align: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Wrap del calendario: nunca más ancho que su padre */
.calendar-grid-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* El grid de días ocupa exactamente 100% */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Cada celda del calendario */
.cal-cell {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Weekdays labels también centrados */
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: .4rem;
  width: 100%;
  box-sizing: border-box;
}

/* Lista de historial */
#history-list {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Tarjetas de historial: nunca se desbordan */
.history-card,
.mood-card,
.incidents-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── MODAL — Fix desbordamiento de texto al dar clic en un día ── */
.modal-sheet {
  box-sizing: border-box;
  width: 100%;
  max-width: min(480px, calc(100vw - 2rem));
  overflow-y: auto;
  overflow-x: hidden;
}

/* Todo el contenido del modal respeta el ancho */
.modal-body > *,
#modal-body > * {
  max-width: 100%;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: break-word;
}

.modal-incident-comment,
.modal-incident-consequence,
.modal-note-text,
.modal-emo-label {
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 100%;
}

/* Emociones en el modal */
.modal-emo-block {
  flex-wrap: wrap;
  gap: .45rem;
  max-width: 100%;
}

/* Incidents dentro del modal */
.modal-incident-item {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.modal-incident-header {
  max-width: 100%;
  overflow: hidden;
}

/* Sección de notas en el modal */
.modal-note-text {
  max-width: 100%;
  box-sizing: border-box;
}

/* ── TROJAN/REFLEXIÓN — Solo visible cuando se activa el botón ── */
/* La clase .is-hidden garantiza display:none */
.trojan-area.is-hidden {
  display: none !important;
}

/* El área de reflexión cuando está visible */
.trojan-area:not(.is-hidden) {
  display: block;
  animation: fadeSlideUp .25s ease both;
}

/* ── HUG CARD — animación de entrada suave ── */
.hug-card {
  animation: fadeSlideUp .32s ease both;
}

/* ── BOTÓN TROJAN — animación de entrada ── */
.trojan-btn {
  animation: fadeSlideUp .38s ease both;
}

/* ── TARJETAS HISTORIAL — animaciones escalonadas bonitas ── */
.history-list .history-card:nth-child(1) { animation-delay: .04s; }
.history-list .history-card:nth-child(2) { animation-delay: .08s; }
.history-list .history-card:nth-child(3) { animation-delay: .12s; }
.history-list .history-card:nth-child(4) { animation-delay: .16s; }
.history-list .history-card:nth-child(5) { animation-delay: .20s; }

/* ── CELDAS DEL CALENDARIO — micro-animación de entrada ── */
.cal-cell.cal-has-entry {
  animation: calCellPop .2s ease both;
}

@keyframes calCellPop {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── MODAL — entrada más elegante con spring ── */
@keyframes slideSheetSpring {
  0%   { transform: translateY(80px) scale(.97); opacity: 0; }
  60%  { transform: translateY(-6px) scale(1.005); opacity: 1; }
  80%  { transform: translateY(3px) scale(.999); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.modal-sheet {
  animation: slideSheetSpring .38s cubic-bezier(.22,1,.36,1) both;
}

/* ── BOTÓN GUARDAR — feedback al guardar ── */
@keyframes savePulse {
  0%   { box-shadow: 0 0 0 0 rgba(109,138,115,.5); }
  60%  { box-shadow: 0 0 0 10px rgba(109,138,115,0); }
  100% { box-shadow: 0 0 0 0 rgba(109,138,115,0); }
}

.button-save.saved-feedback {
  animation: savePulse .5s ease;
  background: var(--color-success) !important;
}

/* ── TOAST — más visible y bonito ── */
.toast {
  border-radius: var(--radius-md);
  padding: .75rem 1.35rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(47,48,42,.22);
  letter-spacing: -.01em;
}

/* Asegurar que el section-heading no desborde en móvil */
.section-heading {
  flex-wrap: wrap;
  max-width: 100%;
  box-sizing: border-box;
}

/* ── hcard-top: no desbordarse nunca ── */
.hcard-top {
  max-width: 100%;
  overflow: visible;
}

/* ── Pills de emoción en las tarjetas ── */
.hcard-emo-pill {
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}

/* ── Nota de la tarjeta historial ── */
.hcard-note {
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* ── Footer de tarjeta historial ── */
.hcard-footer {
  max-width: 100%;
  box-sizing: border-box;
}

/* ── Responsive pequeño (<380px): calendario un poco más compacto ── */
@media (max-width: 380px) {
  .cal-cell {
    font-size: .72rem;
  }
  .calendar-grid-wrap {
    padding: .5rem;
  }
  .modal-sheet {
    padding: 1.1rem 1rem 2rem;
  }
}

/* ================================================================
   HISTORIAL — Texto de reflexión visible en la tarjeta
   ================================================================ */
.hcard-reflection-text {
  margin: .45rem 0 0;
  font-size: .82rem;
  color: var(--color-accent-strong);
  font-style: italic;
  line-height: 1.5;
  border-left: 2px solid rgba(115, 93, 70, .3);
  padding-left: .65rem;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 100%;
}


/* ════════════════════════════════════════════════════════════════════
   CALMA — ANIMACIONES DE RENDIMIENTO (Hardware-Only)
   Reglas: solo transform + opacity. Cero repaints/reflows.
   Todas las curvas son cubic-bezier orgánicas y calmantes.
   ════════════════════════════════════════════════════════════════════ */


/* ── 1. MICROINTERACCIÓN — Botones de Emociones ─────────────────────
   Hundimiento suave al presionar + rebote imperceptible al soltar.
   La curva de retorno (spring) usa un ligero overshooting (1.56)
   que se siente natural sin ser agresivo.
   ─────────────────────────────────────────────────────────────────── */

.emotion-btn {
  /* Spring de retorno: sale de la escala prensada con un micro-rebote */
  transition:
    transform  0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.18s ease,
    background  0.18s ease;
}

/* Escritorio: hover = hundimiento anticipatorio muy leve */
@media (hover: hover) {
  .emotion-btn:hover {
    transform: scale(0.97) translateY(-1px);
    box-shadow: var(--shadow-soft);
  }
}

/* Presión activa (táctil + escritorio): hundimiento real */
.emotion-btn:active {
  transform: scale(0.93);
  box-shadow: none;
  /* Bajada rápida, subida lenta — asimetría que se siente física */
  transition:
    transform  0.09s cubic-bezier(0.4, 0, 1, 1),
    box-shadow 0.09s ease;
}

/* Estado seleccionado: no aplica la escala de hover para no confundir */
.emotion-btn.is-selected {
  transform: scale(1);
}
.emotion-btn.is-selected:active {
  transform: scale(0.95);
}


/* ── 2. TRANSICIÓN DE PANTALLA — Fade-in flotante ───────────────────
   Uso: añadir .view-enter al contenedor en JS, luego en el siguiente
   frame (requestAnimationFrame o setTimeout 0) añadir .view-enter-active.
   El panel "flota" 7 px hacia su lugar. Solo opacity + transform.
   ─────────────────────────────────────────────────────────────────── */

.view-enter {
  opacity: 0;
  transform: translateY(7px);
  /* Estado inicial estático — sin transición todavía */
}

.view-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity   0.36s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Alternativa declarativa con @keyframes para usar desde CSS puro
   (útil si prefieres class-toggle sin JS de dos pasos) */
@keyframes viewFloatIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.view-panel.is-active {
  /* Se reemplaza el display:block anterior con esta versión animada */
  display: block;
  animation: viewFloatIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}


/* ── 3. SKELETON LOADING — Shimmer de izquierda a derecha ───────────
   Técnica: pseudo-elemento con translateX(). Cero background-position.
   El gradiente semitransparente barre la tarjeta de forma suave.
   will-change: transform se activa solo en el pseudo-elemento que
   se mueve — no en el elemento contenedor — para minimizar capas.
   ─────────────────────────────────────────────────────────────────── */

@keyframes skeletonSweep {
  from { transform: translateX(-110%); }
  to   { transform: translateX(210%);  }
}

/* Clase base de cualquier bloque esqueleto */
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(201, 183, 156, 0.22);
  border-radius: var(--radius-sm);
}

/* El barrido de brillo */
.skeleton::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Gradiente estrecho: entrada y salida suaves, pico brillante al centro */
  background: linear-gradient(
    90deg,
    transparent          0%,
    rgba(255, 253, 248, 0.55) 45%,
    rgba(255, 253, 248, 0.75) 50%,
    rgba(255, 253, 248, 0.55) 55%,
    transparent          100%
  );
  transform: translateX(-110%);
  will-change: transform;
  /* Curva ease-in-out suave, duración larga para calma */
  animation: skeletonSweep 2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* Variante de pulso (sin barrido, solo opacidad) — para iconos / avatares */
@keyframes skeletonPulse {
  0%, 100% { opacity: 1;    }
  50%       { opacity: 0.55; }
}

.skeleton-pulse {
  position: relative;
  background: rgba(201, 183, 156, 0.22);
  border-radius: var(--radius-sm);
  animation: skeletonPulse 2.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* ── Anatomía de una tarjeta de historial en carga ─────────────────
   Uso: reemplazar .history-card por .history-card-skeleton mientras
   Firestore devuelve los datos. */

.history-card-skeleton {
  /* Hereda el card base */
  border: 1px solid rgba(129, 105, 78, 0.10);
  border-radius: var(--radius-lg);
  background: rgba(255, 253, 248, 0.72);
  box-shadow: var(--shadow-soft);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

/* Línea de fecha — ancha */
.skeleton-line {
  height: 0.85rem;
  border-radius: 999px;
}

/* Líneas de contenido con anchos distintos para realismo */
.skeleton-line-lg  { width: 55%; }
.skeleton-line-md  { width: 38%; }
.skeleton-line-sm  { width: 22%; }

/* Bloque de pill de emoción */
.skeleton-pill {
  height: 1.6rem;
  width: 5.5rem;
  border-radius: 999px;
}

/* Bloque de avatar / ícono redondo */
.skeleton-circle {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Animación escalonada entre tarjetas esqueleto */
.history-card-skeleton:nth-child(1) .skeleton::before,
.history-card-skeleton:nth-child(1) .skeleton-pulse { animation-delay: 0s;    }
.history-card-skeleton:nth-child(2) .skeleton::before,
.history-card-skeleton:nth-child(2) .skeleton-pulse { animation-delay: 0.18s; }
.history-card-skeleton:nth-child(3) .skeleton::before,
.history-card-skeleton:nth-child(3) .skeleton-pulse { animation-delay: 0.36s; }
.history-card-skeleton:nth-child(4) .skeleton::before,
.history-card-skeleton:nth-child(4) .skeleton-pulse { animation-delay: 0.54s; }


/* ── Respeto a prefers-reduced-motion (ya existe el bloque global,
   pero se refuerza explícitamente para estas nuevas animaciones) ─── */
@media (prefers-reduced-motion: reduce) {
  .emotion-btn,
  .emotion-btn:active {
    transition: none !important;
  }
  .view-enter-active,
  .view-panel.is-active {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .skeleton::before {
    animation: none !important;
  }
  .skeleton-pulse {
    animation: none !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   CALMA — MÓDULO DE CONFIGURACIÓN
   Settings gear button + full-height bottom sheet + lang selector
   + donation card. Solo transform/opacity para animaciones.
   ════════════════════════════════════════════════════════════════════ */


/* ── Botón engranaje (topbar) ────────────────────────────────────────
   Toque táctil: 44 × 44 px mínimo. Ícono: 16 × 16 px delicado.
   ─────────────────────────────────────────────────────────────────── */

.topbar-actions {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.settings-btn {
  /* Área táctil generosa */
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(115, 93, 70, .16);
  border-radius: 999px;
  background: rgba(255, 253, 248, .8);
  color: var(--color-accent-strong);
  /* Spring de retorno al soltar */
  transition:
    transform  .35s cubic-bezier(0.34, 1.56, 0.64, 1),
    background .2s ease,
    box-shadow .2s ease;
}

@media (hover: hover) {
  .settings-btn:hover {
    background: var(--color-surface-warm);
    box-shadow: var(--shadow-soft);
    transform: rotate(30deg) scale(1.05);
  }
}

.settings-btn:active {
  transform: rotate(60deg) scale(0.92);
  transition:
    transform  .1s cubic-bezier(0.4, 0, 1, 1),
    background .1s ease;
}

/* Estado "abierto": el ícono queda girado */
.settings-btn[aria-expanded="true"] {
  transform: rotate(90deg);
  background: var(--color-surface-warm);
}


/* ── Settings overlay (backdrop) ────────────────────────────────────
   El backdrop se desvanece con opacity. La hoja sube con translateY.
   Ambas son propiedades compositor-only → 60fps garantizados.
   ─────────────────────────────────────────────────────────────────── */

.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Estado CERRADO */
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s cubic-bezier(0.22, 1, 0.36, 1);
}

.settings-overlay[hidden] {
  display: none;
}

.settings-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Backdrop clickeable para cerrar */
.settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(47, 48, 42, .52);
  backdrop-filter: blur(5px);
  cursor: pointer;
}

/* La hoja de configuración */
.settings-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  /* En móviles ocupa hasta el 96% de la altura de la pantalla */
  max-height: 96dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-surface);
  box-shadow:
    0 -24px 60px rgba(47, 48, 42, .18),
    0 -4px 16px rgba(47, 48, 42, .10);
  /* Estado CERRADO: oculta debajo de la pantalla */
  transform: translateY(100%);
  transition: transform .42s cubic-bezier(0.22, 1, 0.36, 1);
  /* Padding seguro para notches iOS */
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

.settings-overlay.is-open .settings-sheet {
  transform: translateY(0);
}

/* La pastilla superior la provee .modal-drag-handle (interactivo).
   El ::before decorativo se eliminó para no duplicar la rayita. */


/* ── Header del modal ────────────────────────────────────────────────*/

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 1.25rem 1rem;
  /* border-bottom eliminado: el modal-drag-handle ya actúa como separador visual */
}

.settings-header-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.settings-header-icon {
  width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.settings-header-icon img {
  width: 1.8rem;
  height: 1.8rem;
  object-fit: contain;
  display: block;
}

.settings-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--color-text);
}

.settings-close {
  /* Área táctil: 44 × 44 px */
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(115, 93, 70, .14);
  border-radius: 50%;
  background: var(--color-bg-soft);
  color: var(--color-muted);
  transition:
    transform  .28s cubic-bezier(0.34, 1.56, 0.64, 1),
    background .18s ease,
    color      .18s ease;
}

.settings-close:hover {
  background: var(--color-surface-warm);
  color: var(--color-accent-strong);
  transform: rotate(90deg) scale(1.08);
}

.settings-close:active {
  transform: rotate(90deg) scale(0.9);
  transition-duration: .08s;
}


/* ── Cuerpo del modal ────────────────────────────────────────────────*/

.settings-body {
  padding: 1rem 1.25rem;
  display: grid;
  gap: 1.1rem;
}

.settings-section {
  border: 1px solid rgba(129, 105, 78, .12);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.15rem;
  background: rgba(255, 253, 248, .62);
}

.settings-section-title {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .85rem;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-muted);
}


/* ── Selector de idioma ──────────────────────────────────────────────*/

.lang-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
}

.lang-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  min-height: 78px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: .75rem .4rem .65rem;
  background: rgba(255, 253, 248, .5);
  color: var(--color-muted);
  cursor: pointer;
  /* Spring de retorno */
  transition:
    transform     .32s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color  .18s ease,
    background    .18s ease,
    color         .18s ease,
    box-shadow    .22s ease;
}

.lang-flag {
  font-size: 1.5rem;
  line-height: 1;
}

.lang-code {
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .05em;
  color: inherit;
}

.lang-name {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--color-muted);
  opacity: .8;
}

@media (hover: hover) {
  .lang-btn:hover {
    border-color: var(--color-accent);
    background: rgba(255, 253, 248, .95);
    color: var(--color-accent-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
  }
}

.lang-btn:active {
  transform: scale(0.94);
  transition: transform .08s ease;
}

.lang-btn.is-active,
.lang-btn[aria-pressed="true"] {
  border-color: var(--color-accent-strong);
  border-width: 2px;
  background: rgba(115, 93, 70, .08);
  color: var(--color-accent-strong);
  box-shadow:
    0 0 0 3px rgba(115, 93, 70, .12),
    var(--shadow-soft);
}

.lang-btn.is-active .lang-name,
.lang-btn[aria-pressed="true"] .lang-name {
  color: var(--color-accent);
  opacity: 1;
}


/* ── Tarjeta de donación ─────────────────────────────────────────────*/

.donation-card {
  background: linear-gradient(
    135deg,
    rgba(201, 183, 156, .18) 0%,
    rgba(247, 234, 220, .55) 50%,
    rgba(255, 253, 248, .65) 100%
  );
  border-color: rgba(157, 128, 97, .22);
}

.donation-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.donation-title {
  margin-bottom: .6rem;
  color: var(--color-accent-strong);
}

.donation-copy {
  margin: 0;
  font-size: .88rem;
  color: var(--color-muted);
  line-height: 1.6;
}

.donation-copy strong {
  color: var(--color-accent-strong);
  font-weight: 700;
}

.donation-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  align-self: flex-start;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  padding: .75rem 1.3rem;
  background: var(--color-accent-strong);
  color: #FFFDF8;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: -.01em;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(115, 93, 70, .28);
  transition:
    transform  .32s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow .22s ease,
    background .18s ease;
}

@media (hover: hover) {
  .donation-btn:hover {
    background: #5c4836;
    box-shadow: 0 14px 36px rgba(115, 93, 70, .38);
    transform: translateY(-2px) scale(1.02);
  }
}

.donation-btn:active {
  transform: scale(0.96);
  box-shadow: 0 6px 16px rgba(115, 93, 70, .22);
  transition: transform .09s ease, box-shadow .09s ease;
}


/* ── Pie del modal ───────────────────────────────────────────────────*/

.settings-footer-note {
  margin: 0;
  text-align: center;
  font-size: .72rem;
  color: var(--color-muted);
  opacity: .65;
  line-height: 1.7;
}

.settings-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: .2em;
}


/* ── POLÍTICA DE PRIVACIDAD — checkbox en registro ──────────────────*/
.privacy-check-field {
  margin-bottom: .75rem;
}

.privacy-label {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .85rem;
  color: var(--color-muted);
  cursor: pointer;
  line-height: 1.4;
}

.privacy-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: .15rem;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.privacy-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: .2em;
  font-size: inherit;
  cursor: pointer;
  font-weight: 600;
}

.privacy-link-btn:hover {
  color: var(--color-accent);
}

/* ── MODAL POLÍTICA — cuerpo con scroll ─────────────────────────────*/
.privacy-modal-sheet {
  max-height: 85vh;
}

.privacy-modal-body {
  font-size: .85rem;
  color: var(--color-text);
  line-height: 1.65;
  padding-bottom: .5rem;
}

.privacy-modal-body h4 {
  font-family: var(--font-display);
  font-size: .95rem;
  margin: 1.1rem 0 .3rem;
  color: var(--color-text);
}

.privacy-modal-body p {
  margin: 0 0 .6rem;
  color: var(--color-muted);
}

.privacy-modal-body a {
  color: var(--color-accent-strong);
}

.privacy-updated {
  font-size: .78rem;
  color: var(--color-muted);
  opacity: .7;
  margin-bottom: .75rem !important;
}

/* ── ZONA PELIGROSA en Settings ──────────────────────────────────────*/
.danger-zone-section {
  border: 1.5px solid rgba(166, 108, 96, .25);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  background: rgba(166, 108, 96, .04);
}

.danger-zone-title {
  color: var(--color-danger) !important;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.danger-zone-title svg {
  stroke: var(--color-danger);
  flex-shrink: 0;
}

.danger-zone-desc {
  font-size: .82rem;
  color: var(--color-muted);
  margin: .35rem 0 .85rem;
  line-height: 1.45;
}

.danger-zone-btn {
  display: flex;
  align-items: center;
  gap: .45rem;
  background: none;
  border: 1.5px solid var(--color-danger);
  color: var(--color-danger);
  border-radius: var(--radius-sm);
  padding: .55rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.danger-zone-btn:hover {
  background: var(--color-danger);
  color: #fff;
}

/* ── Animaciones de entrada escalonada de las secciones ─────────────*/

@keyframes settingsSectionIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.settings-overlay.is-open .settings-section:nth-child(1) {
  animation: settingsSectionIn .3s cubic-bezier(0.22, 1, 0.36, 1) .12s both;
}

.settings-overlay.is-open .settings-section:nth-child(2) {
  animation: settingsSectionIn .3s cubic-bezier(0.22, 1, 0.36, 1) .21s both;
}

.settings-overlay.is-open .settings-footer-note {
  animation: settingsSectionIn .3s cubic-bezier(0.22, 1, 0.36, 1) .28s both;
}


/* ── Respeto a prefers-reduced-motion ───────────────────────────────*/

@media (prefers-reduced-motion: reduce) {
  .settings-btn,
  .settings-btn:active,
  .settings-btn[aria-expanded="true"],
  .settings-close,
  .lang-btn,
  .lang-btn:active,
  .donation-btn,
  .donation-btn:active {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  .settings-overlay,
  .settings-sheet {
    transition: none !important;
    animation: none !important;
  }
  .settings-overlay.is-open .settings-section,
  .settings-overlay.is-open .settings-footer-note {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   CALMA — NUEVAS FUNCIONES: historial colapsable, calendario
   destacado, scroll-to-top, menú contextual, animaciones mejoradas
   ════════════════════════════════════════════════════════════════════ */

/* ── Historia: botón expandir/colapsar ──────────────────────────── */
.history-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  margin-top: .5rem;
  padding: .85rem 1rem;
  border: 1.5px dashed rgba(115,93,70,.28);
  border-radius: var(--radius-lg);
  background: rgba(255,253,248,.55);
  color: var(--color-accent-strong);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition:
    background .22s ease,
    border-color .22s ease,
    transform .32s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow .22s ease;
}

.history-expand-btn:hover {
  background: rgba(255,253,248,.95);
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.history-expand-btn:active {
  transform: scale(.97);
  transition-duration: .09s;
}

.history-expand-btn svg {
  flex-shrink: 0;
  transition: transform .28s cubic-bezier(0.34,1.56,0.64,1);
}

.history-expand-btn:hover svg {
  transform: translateY(2px);
}

.history-collapse-btn {
  border-style: solid;
  border-color: rgba(115,93,70,.18);
  background: rgba(201,183,156,.10);
}

.history-collapse-btn:hover svg {
  transform: translateY(-2px);
}

/* ── Scroll-to-top ──────────────────────────────────────────────── */
.history-scroll-top-btn {
  position: sticky;
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  margin: .75rem auto 0;
  border: 1.5px solid rgba(115,93,70,.22);
  border-radius: 50%;
  background: rgba(255,253,248,.92);
  backdrop-filter: blur(12px);
  color: var(--color-accent-strong);
  box-shadow: 0 6px 20px rgba(82,65,43,.16);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(.85);
  transition:
    opacity .32s cubic-bezier(0.22,1,0.36,1),
    transform .32s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow .22s ease;
  pointer-events: none;
}

.history-scroll-top-btn.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.history-scroll-top-btn:hover {
  box-shadow: 0 10px 28px rgba(82,65,43,.24);
  transform: translateY(-2px) scale(1.06);
}

.history-scroll-top-btn:active {
  transform: scale(.94);
  transition-duration: .09s;
}

/* ── Calendario: día destacado ──────────────────────────────────── */
.cal-cell.cal-important {
  outline: 1.5px solid rgba(201,168,76,.55);
  outline-offset: -2px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 70% 25%, rgba(201,168,76,.18), transparent 55%),
    rgba(201,168,76,.06);
  box-shadow:
    inset 0 0 0 1px rgba(201,168,76,.08),
    0 2px 10px -2px rgba(201,168,76,.28);
  transition: box-shadow .35s ease, outline-color .35s ease, transform .25s ease;
}

.cal-cell.cal-important .cal-day-num {
  color: #8A6712;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.cal-star {
  position: absolute;
  top: 3px;
  right: 3px;
  width: .82rem;
  height: .82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #D4AE3D;
  filter: drop-shadow(0 1px 1.5px rgba(155,122,26,.45));
  animation: starBloom .55s cubic-bezier(0.34,1.56,0.64,1) both,
             starGlow 2.6s ease-in-out 1s infinite;
  pointer-events: none;
}

.cal-star svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes starBloom {
  0%   { opacity: 0; transform: scale(.2) rotate(-90deg); }
  55%  { opacity: 1; transform: scale(1.25) rotate(8deg); }
  78%  { transform: scale(.92) rotate(-3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes starGlow {
  0%, 100% { filter: drop-shadow(0 1px 1.5px rgba(155,122,26,.45)); }
  50%      { filter: drop-shadow(0 0 4px rgba(212,174,61,.85)) drop-shadow(0 1px 2px rgba(155,122,26,.4)); }
}

/* Botón bookmark interactivo en tarjeta historial */
.hcard-star-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-sm);
  color: var(--color-border);
  transition: color .18s ease, background .18s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.hcard-star-btn svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}
.hcard-star-btn:hover {
  color: var(--color-accent);
  background: rgba(157,128,97,.12);
  transform: scale(1.08);
}
.hcard-star-btn:active {
  transform: scale(0.88);
}
.hcard-star-btn.is-starred {
  color: var(--color-accent-strong);
  filter: drop-shadow(0 1px 3px rgba(115,93,70,.3));
}
.hcard-star-btn.is-starred svg {
  animation: bookmarkPop .42s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes bookmarkPop {
  0%   { transform: scale(0.5) translateY(-4px); opacity: 0; }
  60%  { transform: scale(1.2) translateY(1px);  opacity: 1; }
  100% { transform: scale(1)   translateY(0);    opacity: 1; }
}

/* Badge destacado en tarjeta historial (legacy — se mantiene por si acaso) */
.hcard-important-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: .4rem;
  width: 1.05rem;
  height: 1.05rem;
  vertical-align: -2px;
  color: #D4AE3D;
  filter: drop-shadow(0 1px 1.5px rgba(155,122,26,.4));
  animation: starPop .45s cubic-bezier(0.34,1.56,0.64,1) both;
}

.hcard-important-badge svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes starPop {
  0%   { transform: scale(0) rotate(-40deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg);  opacity: 1; }
}


/* ── Toast con icono ─────────────────────────────────────────────── */
.toast-ico {
  display: inline-flex;
  width: 1.05rem;
  height: 1.05rem;
  margin-right: .5rem;
  vertical-align: -3px;
}
.toast-ico svg { width: 100%; height: 100%; display: block; }
.toast-ico-star {
  color: #D4AE3D;
  animation: starPop .42s cubic-bezier(0.34,1.56,0.64,1) both;
  filter: drop-shadow(0 1px 1.5px rgba(155,122,26,.4));
}
.toast-ico-star-off {
  color: rgba(255,255,255,.7);
}

/* Contexto menu: iconos SVG (sustituye emoji) */
.cal-ctx-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
}
.cal-ctx-ico svg { width: 100%; height: 100%; display: block; }
.cal-ctx-ico.is-filled   { color: #D4AE3D; }
.cal-ctx-ico.is-outline  { color: var(--color-muted, #9D8061); }

/* ── Menú contextual del calendario ────────────────────────────── */
.cal-context-menu {
  position: fixed;
  z-index: 400;
  min-width: 170px;
  border: 1px solid rgba(129,105,78,.18);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow:
    0 12px 40px rgba(47,48,42,.20),
    0 2px 8px rgba(47,48,42,.10);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(.96);
  transform-origin: top center;
  transition:
    opacity .18s cubic-bezier(0.22,1,0.36,1),
    transform .22s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
}

.cal-context-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.cal-ctx-btn {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .75rem 1rem;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: .85rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}

.cal-ctx-btn:not(:last-child) {
  border-bottom: 1px solid rgba(129,105,78,.1);
}

.cal-ctx-btn:hover {
  background: var(--color-surface-warm);
}

.cal-ctx-btn:active {
  background: rgba(201,183,156,.4);
}

.cal-ctx-btn .cal-ctx-ico {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cal-ctx-btn .cal-ctx-ico svg { width: 100%; height: 100%; display: block; }

/* ── Toast mejorado con animación de salida ─────────────────────── */
.toast {
  transition: opacity .28s ease, transform .28s ease;
}

.toast.toast-hide {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(10px) !important;
}

/* ── Animaciones de entrada mejoradas para view-panel ──────────── */
@keyframes panelFadeIn {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.view-panel.is-active {
  display: block;
  animation: panelFadeIn .32s cubic-bezier(0.22,1,0.36,1) both;
}

/* ── Animación mejorada para tarjetas de historial escalonadas ─── */
@keyframes cardRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.history-card {
  animation: cardRise .35s cubic-bezier(0.22,1,0.36,1) both;
}

/* ── Modal sheet: spring de entrada ────────────────────────────── */
@keyframes sheetSpring {
  0%   { transform: translateY(90px) scale(.97); opacity: 0; }
  55%  { transform: translateY(-5px) scale(1.004); opacity: 1; }
  75%  { transform: translateY(2px) scale(.999); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.modal-sheet {
  animation: sheetSpring .42s cubic-bezier(0.22,1,0.36,1) both;
}

/* ── Calendario: celda con entrada más suave ────────────────────── */
@keyframes cellFade {
  from { opacity: 0; transform: scale(.84); }
  to   { opacity: 1; transform: scale(1); }
}

.cal-cell.cal-has-entry {
  animation: cellFade .22s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* Reducir motion para accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .history-expand-btn,
  .history-scroll-top-btn,
  .cal-context-menu,
  .cal-cell.cal-has-entry,
  .hcard-star-btn,
  .hcard-star-btn svg,
  .modal-sheet,
  .streak-chip,
  .streak-flame svg {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   RACHA — chip compacto en section-heading de Hoy
   ════════════════════════════════════════════════════════════════════ */
@keyframes streakBannerIn {
  from { opacity: 0; transform: translateY(-4px) scale(.92); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

@keyframes flamePulse {
  0%, 100% { filter: drop-shadow(0 1px 3px rgba(184,120,30,.45)); transform: scale(1);    }
  50%       { filter: drop-shadow(0 2px 7px rgba(184,120,30,.8));  transform: scale(1.12); }
}

/* Contenedor derecho del section-heading */
.section-heading-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}

/* Chip de racha */
.streak-chip {
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  padding: .2rem .48rem .2rem .28rem;
  border-radius: 99px;
  background: rgba(201,149,42,.13);
  border: 1px solid rgba(201,149,42,.26);
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-accent-strong);
  white-space: nowrap;
  animation: streakBannerIn .35s cubic-bezier(0.22,1,0.36,1) both;
  cursor: default;
}

/* Llama SVG dentro del chip */
.streak-flame {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .88rem;
  height: .88rem;
}

.streak-flame svg {
  width: 100%;
  height: 100%;
  display: block;
  color: #C9952A;
  filter: drop-shadow(0 1px 3px rgba(201,149,42,.5));
}

/* Semana: pulso suave */
.streak-chip[data-level="week"] .streak-flame svg {
  color: #B87A20;
  animation: flamePulse 2.8s ease-in-out infinite;
}

/* Mes: pulso más vivo */
.streak-chip[data-level="month"] .streak-flame svg {
  color: #9D6416;
  animation: flamePulse 2s ease-in-out infinite;
}
.streak-chip[data-level="month"] {
  background: rgba(184,120,30,.16);
  border-color: rgba(184,120,30,.32);
}

.streak-chip-txt {
  line-height: 1;
}

/* ── Racha en tarjeta de perfil ──────────────────────────────────── */
.profile-streak {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-top: .35rem;
  font-size: .82rem;
  color: var(--color-muted);
}

.profile-streak-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .95rem;
  height: .95rem;
  flex-shrink: 0;
}

.profile-streak-ico svg {
  width: 100%;
  height: 100%;
  display: block;
  color: #C9952A;
  filter: drop-shadow(0 1px 2px rgba(201,149,42,.4));
}

.profile-streak-val {
  font-weight: 700;
  color: var(--color-accent-strong);
}

/* ── Toast llama ─────────────────────────────────────────────────── */
.toast-ico-flame {
  color: #C9952A;
  animation: starPop .42s cubic-bezier(0.34,1.56,0.64,1) both;
  filter: drop-shadow(0 1px 3px rgba(201,149,42,.5));
}

/* ════════════════════════════════════════════════════════════════════
   RECORDATORIOS — sección en settings
   ════════════════════════════════════════════════════════════════════ */
.notif-card {
  background: var(--color-bg-soft, #FBF7F0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.notif-label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-text);
  flex: 1;
}

/* Toggle switch */
.notif-toggle {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 99px;
  border: none;
  background: var(--color-border);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background .22s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.notif-toggle.is-on {
  background: var(--color-accent);
}

.notif-toggle-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
  transition: transform .22s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
}

.notif-toggle.is-on .notif-toggle-thumb {
  transform: translateX(18px);
}

.notif-times {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding-top: .5rem;
  border-top: 1px solid var(--color-border);
  animation: panelFadeIn .22s ease both;
}

.notif-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.notif-time-label {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .86rem;
  color: var(--color-muted);
}

.notif-time-label svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.notif-time-input {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: .88rem;
  padding: .3rem .55rem;
  font-family: var(--font-body);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
}

.notif-time-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

.notif-status {
  font-size: .8rem;
  color: var(--color-muted);
  margin: 0;
  min-height: 1.1em;
}

/* ════════════════════════════════════════════════════════════════════
   PERFIL — botones de acción rediseñados
   ════════════════════════════════════════════════════════════════════ */
.profile-action-btn {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(115, 93, 70, .18);
  background: rgba(255, 253, 248, .75);
  color: var(--color-accent-strong);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.profile-action-btn:hover  { background: rgba(255,253,248,1); border-color: rgba(115,93,70,.28); }
.profile-action-btn:active { transform: scale(.96); }
.profile-action-btn svg    { opacity: .65; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════════
   SUPPORT CHIP — botón "Apoya Calma" en el heading de resumen
   ════════════════════════════════════════════════════════════════════ */
.support-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 149, 42, .3);
  background: rgba(201, 149, 42, .1);
  color: var(--color-accent-strong);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .18s, transform .14s;
  -webkit-tap-highlight-color: transparent;
}
.support-chip-btn:hover  { background: rgba(201,149,42,.18); }
.support-chip-btn:active { transform: scale(.95); }
.support-chip-btn svg    { flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════════
   SUPPORT OVERLAY — modal "Apoya Calma"
   ════════════════════════════════════════════════════════════════════ */
.support-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(244, 239, 230, .96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: supportIn .42s cubic-bezier(.22,1,.36,1) both;
}
.support-overlay.support-closing {
  animation: supportOut .36s ease-in both;
}

@keyframes supportIn  {
  from { opacity: 0; transform: scale(.93); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes supportOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.94); }
}

.support-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  max-width: 310px;
  width: 100%;
}

.support-close {
  position: absolute;
  top: -2.2rem;
  right: -.5rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: rgba(255,253,248,.8);
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.support-close:hover { background: rgba(255,253,248,1); color: var(--color-text); }

/* ── Animación de pulsos concéntricos ─── */
.support-anim {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}
.support-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(201, 149, 42, .12);
  animation: supportPulse 2.8s ease-out infinite;
}
.support-ring--2 { animation-delay: .9s; }
.support-ring--3 { animation-delay: 1.8s; }

@keyframes supportPulse {
  0%   { transform: scale(.55); opacity: .8; }
  100% { transform: scale(2);   opacity: 0; }
}

.support-icon-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 149, 42, .14);
  border-radius: 50%;
  border: 1px solid rgba(201, 149, 42, .22);
  color: var(--color-accent-strong);
  animation: supportIconFloat 3.5s ease-in-out infinite;
}
@keyframes supportIconFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

/* ── Texto ─── */
.support-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 7vw, 2rem);
  letter-spacing: -.03em;
  color: var(--color-text);
  margin: 0;
  max-width: none;
  line-height: 1.1;
}
.support-body {
  font-size: .92rem;
  color: var(--color-muted);
  line-height: 1.55;
  margin: -.5rem 0 0;
}
.support-text { display: flex; flex-direction: column; gap: .5rem; }

/* ── CTA ─── */
.support-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  text-decoration: none;
  border-radius: 999px;
  padding: .75rem 2rem;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  width: 100%;
  transition: transform .15s, box-shadow .15s;
}
.support-cta:hover  { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(82,65,43,.22); }
.support-cta:active { transform: scale(.97); }

/* ════════════════════════════════════════════════════════════════════
   PREMIUM — BANNER + OVERLAY + PAYWALL + CONTENT + TREE JOURNEY
   ════════════════════════════════════════════════════════════════════ */

/* ── Banner de entrada en el perfil ────────────────────────────────── */
.open-premium-btn {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  margin: .25rem 0 1.1rem;
  padding: .95rem 1.05rem;
  border: 1px solid rgba(201,168,76,.45);
  border-radius: var(--radius-md, 20px);
  background:
    linear-gradient(135deg, rgba(201,168,76,.18), rgba(157,128,97,.12) 60%, rgba(115,93,70,.10));
  box-shadow: 0 6px 18px rgba(157,128,97,.14);
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.open-premium-btn:hover  { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(157,128,97,.22); border-color: rgba(201,168,76,.7); }
.open-premium-btn:active { transform: scale(.985); }

.open-premium-icon {
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #E7C96A, #C9A84C 70%);
  color: #5b4a23;
  box-shadow: 0 4px 10px rgba(201,168,76,.35), inset 0 1px 2px rgba(255,255,255,.5);
}

.open-premium-text {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-width: 0;
  flex: 1;
}
.open-premium-badge {
  align-self: flex-start;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: #6b5417;
  background: linear-gradient(135deg, #E7C96A, #C9A84C);
  border-radius: 999px;
  padding: .12rem .5rem;
  margin-bottom: .1rem;
}
.open-premium-title {
  font-size: .96rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.open-premium-sub {
  font-size: .8rem;
  color: var(--color-muted);
  line-height: 1.3;
}
.open-premium-arrow {
  flex-shrink: 0;
  color: var(--color-accent-strong);
  opacity: .8;
}
.open-premium-btn.is-premium .open-premium-icon {
  background: radial-gradient(circle at 35% 30%, #F0DA8E, #C9A84C 70%);
}

/* ── OVERLAY (espejo de settings) ──────────────────────────────────── */
.premium-overlay {
  position: fixed;
  inset: 0;
  z-index: 510;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s cubic-bezier(0.22, 1, 0.36, 1);
}
.premium-overlay[hidden] { display: none; }
.premium-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.premium-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(47, 48, 42, .52);
  backdrop-filter: blur(5px);
  cursor: pointer;
}

.premium-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: 96dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-surface);
  box-shadow:
    0 -24px 60px rgba(47, 48, 42, .18),
    0 -4px 16px rgba(47, 48, 42, .10);
  transform: translateY(100%);
  transition: transform .42s cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}
.premium-overlay.is-open .premium-sheet {
  transform: translateY(0);
}

.premium-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .25rem 1.1rem 1rem;
}
.premium-header-title {
  margin: 0;
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--color-text);
}
.premium-status-pill {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: #6b5417;
  background: linear-gradient(135deg, #E7C96A, #C9A84C);
  border-radius: 999px;
  padding: .2rem .55rem;
  box-shadow: 0 2px 6px rgba(201,168,76,.3);
}
.premium-status-pill[hidden] { display: none; }

.premium-close {
  min-width: 40px;
  min-height: 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(115, 93, 70, .14);
  border-radius: 50%;
  background: var(--color-bg-soft);
  color: var(--color-muted);
  cursor: pointer;
  transition: transform .28s cubic-bezier(0.34, 1.56, 0.64, 1), background .18s, color .18s;
}
.premium-close:hover  { background: var(--color-surface-warm); color: var(--color-accent-strong); transform: rotate(90deg) scale(1.08); }
.premium-close:active { transform: rotate(90deg) scale(.9); transition-duration: .08s; }

.premium-body {
  padding: 1.1rem 1.1rem 0;
}

/* ── PAYWALL ─────────────────────────────────────────────────────── */
.premium-paywall {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 2rem 1.5rem 2.5rem;
  text-align: center;
  animation: panelFadeIn .3s ease both;
}

.paywall-icon {
  width: 4.4rem;
  height: 4.4rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(231,201,106,.4), rgba(201,168,76,.16) 70%);
  color: #C9A84C;
  filter: drop-shadow(0 4px 12px rgba(201,168,76,.28));
}
.paywall-icon svg {
  width: 2.3rem;
  height: 2.3rem;
}

.paywall-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2rem);
  letter-spacing: -.03em;
  margin: 0;
  color: var(--color-text);
  line-height: 1.1;
}

.paywall-subtitle {
  font-size: .92rem;
  color: var(--color-muted);
  line-height: 1.55;
  max-width: 28ch;
  margin: -.3rem 0 0;
}

.paywall-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  text-align: left;
  width: 100%;
  max-width: 340px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 22px);
  padding: 1.1rem 1.25rem;
}

.paywall-features li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .88rem;
  color: var(--color-text);
  line-height: 1.45;
}

.paywall-check {
  color: var(--color-success, #6D8A73);
  flex-shrink: 0;
  margin-top: .08rem;
  display: inline-flex;
}
.paywall-check svg {
  width: 1.05rem;
  height: 1.05rem;
}

.paywall-price-block {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin-top: .2rem;
}

.paywall-price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent-strong);
  margin: 0;
  letter-spacing: -.02em;
}

.paywall-price-sub {
  font-size: .8rem;
  color: var(--color-muted);
  margin: 0;
}

.paywall-cta {
  width: 100%;
  max-width: 340px;
  border-radius: 999px;
  padding: .85rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.paywall-promo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  width: 100%;
  max-width: 340px;
}

.paywall-promo-toggle {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: .83rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0;
}

.promo-input-wrap {
  display: flex;
  gap: .5rem;
  width: 100%;
  animation: panelFadeIn .2s ease both;
}

.promo-input {
  flex: 1;
  padding: .55rem .85rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm, 14px);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  outline: none;
  transition: border-color .15s;
}
.promo-input:focus {
  border-color: var(--color-accent);
}

.promo-message {
  font-size: .82rem;
  min-height: 1.2em;
  color: var(--color-muted);
  margin: 0;
}
.promo-message.is-error   { color: var(--color-danger, #A66C60); }
.promo-message.is-success { color: var(--color-success, #6D8A73); }

/* ── LEVEL CARD ──────────────────────────────────────────────────── */
.level-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  border-radius: var(--radius-md, 22px);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.level-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(157,128,97,.16);
  border-color: rgba(201,168,76,.5);
}
.level-card:active { transform: scale(.99); }
.level-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.level-icon-wrap {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(122,168,138,.28), rgba(94,140,112,.12) 70%);
  color: #5E8C70;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.level-icon-wrap.pulse {
  animation: levelIconPulse .6s cubic-bezier(.34,1.56,.64,1) both;
}

.level-card-aside {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}
.level-card-chevron {
  display: inline-flex;
  color: var(--color-muted);
  opacity: .65;
}

@keyframes levelIconPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  70%  { transform: scale(.9); }
  100% { transform: scale(1); }
}

.level-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
}

.level-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

.level-xp-bar-wrap {
  width: 100%;
}

.level-xp-bar-track {
  width: 100%;
  height: 6px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}

.level-xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-strong));
  border-radius: 999px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}

.level-xp-label {
  font-size: .75rem;
  color: var(--color-muted);
  margin: 0;
}

.challenge-streak-chip {
  display: flex;
  align-items: center;
  gap: .25rem;
  background: rgba(201,149,42,.12);
  color: #C9A84C;
  border-radius: 999px;
  padding: .2rem .6rem;
  font-size: .78rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── CHALLENGES SECTION HEADING ──────────────────────────────────── */
.challenges-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}
.challenges-section-heading h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--color-text);
}

/* ── CHALLENGE CARDS ─────────────────────────────────────────────── */
.challenges-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.challenge-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 1rem 1.1rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  position: relative;
  transition: opacity .3s ease, transform .3s ease;
}

.challenge-card.is-done {
  opacity: .6;
}

.challenge-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  align-self: flex-start;
  letter-spacing: .01em;
}
.challenge-cat-icon {
  display: inline-flex;
}
.challenge-cat-icon svg {
  width: .95rem;
  height: .95rem;
}

.challenge-text {
  font-size: .9rem;
  color: var(--color-text);
  line-height: 1.5;
  margin: 0;
  transition: color .2s;
}
.challenge-card.is-done .challenge-text {
  color: var(--color-muted);
}

.challenge-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.challenge-xp {
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-accent-strong);
  background: rgba(157,128,97,.1);
  border-radius: 999px;
  padding: .15rem .55rem;
}

.challenge-complete-btn {
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: .35rem .9rem;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.challenge-complete-btn:hover  { background: var(--color-accent-strong); }
.challenge-complete-btn:active { transform: scale(.94); }

.challenge-done-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-success, #6D8A73);
  color: #fff;
  flex-shrink: 0;
}
.challenge-done-icon svg {
  width: 15px;
  height: 15px;
}

/* ── XP FLOAT ANIMATION ─────────────────────────────────────────── */
.xp-float {
  position: absolute;
  top: .5rem;
  right: .75rem;
  font-size: .85rem;
  font-weight: 800;
  color: var(--color-accent-strong);
  pointer-events: none;
  animation: xpFloat .9s ease both;
  z-index: 10;
}

@keyframes xpFloat {
  0%   { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; transform: translateY(-22px); }
  100% { opacity: 0; transform: translateY(-30px); }
}

/* ── ALL DONE STATE ──────────────────────────────────────────────── */
.challenges-all-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  animation: allDoneBounce .5s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes allDoneBounce {
  0%   { opacity: 0; transform: scale(.8); }
  70%  { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

.all-done-icon {
  width: 3.6rem;
  height: 3.6rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(231,201,106,.35), rgba(201,168,76,.14) 70%);
  color: #C9A84C;
}
.all-done-icon svg {
  width: 2rem;
  height: 2rem;
}

.all-done-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -.02em;
}

.all-done-sub {
  font-size: .88rem;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.5;
}

/* ── PREMIUM ACTIVE LABEL ───────────────────────────────────────── */
.premium-active-label {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--color-accent-strong);
  background: rgba(157,128,97,.1);
  border-radius: 999px;
  padding: .2rem .65rem;
  margin-bottom: .75rem;
}

/* ── Panel fade in animation (used by paywall + premium content) ── */
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── GESTIONAR SUSCRIPCIÓN ──────────────────────────────────────── */
.premium-manage {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.premium-manage[hidden] { display: none; }

.premium-manage-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--color-muted);
  margin: 0 0 .65rem;
  letter-spacing: .01em;
}

.premium-manage-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 18px);
  background: var(--color-surface);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.premium-manage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  font-size: .88rem;
}
.premium-manage-label {
  color: var(--color-muted);
}
.premium-manage-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  color: var(--color-text);
}
.premium-status-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: #C9A84C;
  box-shadow: 0 0 0 3px rgba(201,168,76,.2);
}
.premium-manage-plan {
  font-weight: 600;
  color: var(--color-text);
}

.premium-cancel-btn {
  margin-top: .3rem;
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--color-danger, #A66C60);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: .2rem 0;
}
.premium-cancel-btn[hidden] { display: none; }

.premium-cancel-confirm {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: .25rem;
  padding-top: .65rem;
  border-top: 1px dashed var(--color-border);
  animation: panelFadeIn .2s ease both;
}
.premium-cancel-confirm[hidden] { display: none; }
.premium-cancel-q {
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.premium-cancel-actions {
  display: flex;
  gap: .5rem;
}
.premium-cancel-yes {
  background: var(--color-danger, #A66C60);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: .4rem 1rem;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s, transform .15s;
}
.premium-cancel-yes:hover  { filter: brightness(.95); }
.premium-cancel-yes:active { transform: scale(.95); }
.premium-cancel-no {
  background: var(--color-bg-soft, #F1EADF);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: .4rem 1.1rem;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.premium-cancel-no:hover  { background: var(--color-surface-warm, #EFE6D8); }
.premium-cancel-no:active { transform: scale(.95); }

/* ── CAMINO DE CRECIMIENTO (Tree Journey) ───────────────────────── */
.tree-journey {
  padding: .25rem 0 .5rem;
}
.tree-journey[hidden] { display: none; }
.tree-journey.is-in {
  animation: treeJourneyIn .42s cubic-bezier(.22,1,.36,1) both;
}
@keyframes treeJourneyIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

.tree-back {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: none;
  border: none;
  color: var(--color-accent-strong);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  padding: .25rem .1rem;
  margin-bottom: .5rem;
}
.tree-back:hover { color: var(--color-accent); }

.tree-journey-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--color-text);
  text-align: center;
  margin: 0 0 1rem;
}

.tree-scene {
  width: 100%;
  max-width: 320px;
  margin: 0 auto 1rem;
  border-radius: var(--radius-md, 20px);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(115,93,70,.14);
  border: 1px solid var(--color-border);
}
.tree-scene svg { display: block; }

.tree-current {
  text-align: center;
  margin-bottom: 1.5rem;
}
.tree-current-level {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent-strong);
  margin: 0 0 .15rem;
  letter-spacing: .01em;
}
.tree-current-xp {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1;
  letter-spacing: -.02em;
}
.tree-xp-unit {
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-muted);
}

.tree-next-hint {
  text-align: center;
  font-size: .85rem;
  color: var(--color-muted);
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

.tree-milestones {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.tree-milestone {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem .85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 16px);
  background: var(--color-surface);
}
.tree-milestone-icon {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-bg-soft, #F1EADF);
  color: var(--color-muted);
}
.tree-milestone-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}
.tree-milestone-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}
.tree-milestone-range {
  font-size: .75rem;
  color: var(--color-muted);
}
.tree-milestone-state {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--color-muted);
}
.tree-milestone-state svg {
  width: .9rem;
  height: .9rem;
}

/* Estado: alcanzado */
.tree-milestone.is-reached .tree-milestone-icon {
  background: rgba(122,168,138,.18);
  color: #5E8C70;
}
.tree-milestone.is-reached .tree-milestone-state {
  color: #5E8C70;
}
/* Estado: actual — destacado en oro */
.tree-milestone.is-current {
  border-color: rgba(201,168,76,.55);
  background: linear-gradient(135deg, rgba(201,168,76,.14), rgba(231,201,106,.08));
  box-shadow: 0 4px 14px rgba(201,168,76,.16);
}
.tree-milestone.is-current .tree-milestone-icon {
  background: radial-gradient(circle at 35% 30%, #E7C96A, #C9A84C 75%);
  color: #5b4a23;
}
.tree-milestone.is-current .tree-milestone-state {
  color: #B0892C;
}
/* Estado: bloqueado */
.tree-milestone.is-locked {
  opacity: .65;
}
.tree-milestone.is-locked .tree-milestone-name,
.tree-milestone.is-locked .tree-milestone-range {
  color: var(--color-muted);
}

#premium-content {
  animation: panelFadeIn .3s ease both;
  padding-bottom: 2rem;
}

/* ════════════════════════════════════════════════════════════════════
   PREMIUM — BENTO DASHBOARD (Task 3)
   ════════════════════════════════════════════════════════════════════ */
.premium-dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 340px) {
  .premium-dashboard { grid-template-columns: 1fr; }
}

.bento-widget {
  background: linear-gradient(160deg, #FFFDF8, #FBF6EC);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: .95rem 1rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(157,128,97,.07);
  animation: bentoIn .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes bentoIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.bento-widget::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.55), transparent);
  opacity: .7;
}

.bento-widget-title {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--color-muted);
  margin-bottom: .55rem;
  text-transform: uppercase;
}

/* Widget de nivel (ancho completo, clickeable) */
.bento-level {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  background: linear-gradient(135deg, #FFFDF8, #F7EFDF);
  border-color: rgba(201,168,76,.35);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bento-level:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(201,168,76,.2);
  border-color: rgba(201,168,76,.6);
}
.bento-level:active { transform: scale(.99); }
.bento-level:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.bento-level .level-card-hint {
  font-size: .72rem;
  font-weight: 600;
  color: #B0892C;
  margin: .15rem 0 0;
}

/* Tiles de estadística (racha / total / categoría) */
.bento-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  justify-content: center;
  min-height: 96px;
}
.bento-icon {
  display: inline-flex;
  width: 1.8rem;
  height: 1.8rem;
  color: var(--color-accent);
}
.bento-icon svg { width: 100%; height: 100%; }
.bento-icon-flame { color: #C9A84C; }
.bento-big {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
  letter-spacing: -.02em;
}
.bento-label {
  font-size: .76rem;
  color: var(--color-muted);
  line-height: 1.25;
}

/* Categoría favorita */
.bento-favcat-icon {
  display: inline-flex;
  width: 1.7rem;
  height: 1.7rem;
  margin: .15rem 0;
}
.bento-favcat-icon svg { width: 100%; height: 100%; }
.bento-favcat-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

/* Widget XP semanal — mini barras */
.bento-chart { display: flex; flex-direction: column; }
.bento-bars {
  display: flex;
  align-items: flex-end;
  gap: .3rem;
  height: 46px;
  margin: .1rem 0 .5rem;
}
.xp-bar {
  flex: 1;
  display: flex;
  align-items: flex-end;
  height: 100%;
  background: rgba(225,214,198,.4);
  border-radius: 5px;
  overflow: hidden;
}
.xp-bar-fill {
  width: 100%;
  background: linear-gradient(180deg, #D9BD6E, #C9A84C);
  border-radius: 5px;
  transition: height .5s cubic-bezier(.22,1,.36,1);
}
.xp-bar.is-today .xp-bar-fill {
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-strong));
}
.bento-chart-total {
  font-size: .8rem;
  font-weight: 700;
  color: var(--color-accent-strong);
}

/* Widget anillo de progreso */
.bento-ring { display: flex; flex-direction: column; align-items: center; }
.ring-wrap { width: 64px; height: 64px; margin: .15rem 0 .4rem; }
.ring-progress {
  transition: stroke-dashoffset .8s cubic-bezier(.22,1,.36,1);
}
.ring-text {
  font-size: 14px;
  font-weight: 700;
  fill: var(--color-accent-strong);
  font-family: var(--font-display);
}
.bento-ring-label {
  font-size: .74rem;
  font-weight: 600;
  color: var(--color-muted);
  text-align: center;
  line-height: 1.3;
}

/* Widget calendario mini (ancho completo) */
.bento-calendar { grid-column: 1 / -1; }
.mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .28rem;
}
.mini-cal-dow {
  text-align: center;
  font-size: .62rem;
  font-weight: 700;
  color: var(--color-muted);
  opacity: .7;
  padding-bottom: .15rem;
}
.mini-cal-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 8px;
  position: relative;
}
.mini-cal-cell.is-empty { background: transparent; }
.mini-cal-num {
  font-size: .64rem;
  color: var(--color-muted);
}
.mini-cal-cell.is-some {
  background: rgba(201,168,76,.16);
}
.mini-cal-cell.is-some .mini-cal-num { color: #B0892C; }
.mini-cal-cell.is-full {
  background: radial-gradient(circle at 40% 35%, #E7C96A, #C9A84C 80%);
}
.mini-cal-cell.is-full .mini-cal-num { color: #5b4a23; font-weight: 700; }
.mini-cal-cell.is-today {
  outline: 1.5px solid var(--color-accent-strong);
  outline-offset: -1.5px;
}

/* Botones de acción premium */
.premium-actions {
  display: flex;
  gap: .6rem;
  margin: 1.4rem 0 .5rem;
}
.premium-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: .7rem .8rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.premium-action-btn:hover { border-color: rgba(201,168,76,.5); background: #FBF6EC; }
.premium-action-btn:active { transform: scale(.97); }
.premium-action-btn svg { color: var(--color-accent); }

/* ════════════════════════════════════════════════════════════════════
   PREMIUM — RETOS ELABORADOS (Task 4)
   ════════════════════════════════════════════════════════════════════ */
.challenge-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.challenge-diff {
  display: inline-flex;
  gap: .2rem;
  align-items: center;
}
.diff-dot {
  display: inline-flex;
  width: .55rem;
  height: .55rem;
  color: var(--color-border);
}
.diff-dot.is-on { color: var(--color-accent); }
.diff-dot svg { width: 100%; height: 100%; }

/* Reto destacado */
.challenge-card.is-featured {
  background: linear-gradient(150deg, #FFFDF8, #F7EFDF);
  border-color: rgba(201,168,76,.4);
  padding: 1.1rem 1.15rem 1rem;
  box-shadow: 0 6px 18px rgba(201,168,76,.13);
}
.challenge-featured-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #B0892C;
  background: rgba(201,168,76,.16);
  border-radius: 999px;
  padding: .2rem .6rem;
  margin-bottom: .15rem;
}
.challenge-card.is-featured .challenge-text {
  font-size: 1rem;
  font-weight: 600;
}
.challenge-card.is-featured .challenge-complete-btn {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-strong));
  padding: .5rem 1.2rem;
  font-size: .88rem;
}

/* Reto completado: borde dorado a la izquierda */
.challenge-card.is-done {
  opacity: .72;
  border-left: 3px solid #C9A84C;
}
.challenge-card.just-done {
  animation: challengeDonePop .8s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes challengeDonePop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.025); box-shadow: 0 8px 24px rgba(201,168,76,.28); }
  100% { transform: scale(1); }
}

/* Checkmark draw-in */
.challenge-done-icon {
  background: linear-gradient(135deg, #C9A84C, #B8973F);
}
.challenge-done-icon.is-drawing svg polyline {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: checkDraw .5s ease forwards .05s;
}
@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}

/* Ráfaga de partículas doradas */
.challenge-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 12;
}
.burst-particle {
  position: absolute;
  top: 0; left: 0;
  width: var(--bd, 7px); height: var(--bd, 7px);
  margin: calc(var(--bd, 7px) / -2) 0 0 calc(var(--bd, 7px) / -2);
  border-radius: 50%;
  opacity: 0;
  animation: burstFly .9s cubic-bezier(.18,.72,.28,1) forwards;
}
.burst-gold {
  background: radial-gradient(circle at 35% 30%, #F0D97A, #C9A84C);
  box-shadow: 0 0 4px rgba(201,168,76,.6);
}
.burst-bronze {
  background: radial-gradient(circle at 35% 30%, #C9A84C, #9D8061);
}
@keyframes burstFly {
  0%   { opacity: 1;   transform: translate(0,0) scale(1.1); }
  60%  { opacity: .85; }
  100% { opacity: 0;   transform: translate(var(--bx), var(--by)) scale(.25); }
}

/* Ripple de luz dorada al completar */
.challenge-ripple {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(201,168,76,.28) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  animation: challengeRipple .7s ease-out forwards;
}
@keyframes challengeRipple {
  0%   { opacity: 0;   transform: scale(.6); }
  30%  { opacity: 1; }
  100% { opacity: 0;   transform: scale(1.18); }
}

/* Celebración: todos hechos */
.challenges-all-done.is-celebrate {
  animation: allDoneBounce .55s cubic-bezier(.34,1.56,.64,1) both;
}
.challenges-all-done .all-done-icon {
  animation: trophySway 2.6s ease-in-out infinite;
}
@keyframes trophySway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}
.all-done-xp {
  font-size: .82rem;
  font-weight: 800;
  color: #B0892C;
  background: rgba(201,168,76,.14);
  border-radius: 999px;
  padding: .3rem .85rem;
  margin: .35rem 0 0;
}

/* ════════════════════════════════════════════════════════════════════
   PREMIUM — GESTIÓN: toggle, hora, reactivar (Tasks 8 + 9)
   ════════════════════════════════════════════════════════════════════ */
.premium-manage.is-highlight .premium-manage-card {
  animation: managePulse 1s ease both;
}
@keyframes managePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
  30%      { box-shadow: 0 0 0 4px rgba(201,168,76,.22); }
}
.premium-manage.is-cancelled .premium-status-dot {
  background: var(--color-muted);
  box-shadow: 0 0 0 3px rgba(117,114,100,.18);
}

.premium-manage-toggle-row,
.premium-manage-time-row { align-items: center; }
.premium-manage-time-row[hidden] { display: none; }

.premium-toggle {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: none;
  background: var(--color-border);
  cursor: pointer;
  padding: 0;
  transition: background .2s ease;
  flex-shrink: 0;
}
.premium-toggle.is-on {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-strong));
}
.premium-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.premium-toggle.is-on .premium-toggle-knob { transform: translateX(18px); }

.premium-time-input {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: .3rem .55rem;
  font-size: .85rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
}

.premium-reactivate-btn {
  margin-top: .4rem;
  align-self: flex-start;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-strong));
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: .45rem 1.1rem;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s, transform .15s;
}
.premium-reactivate-btn:hover  { filter: brightness(1.04); }
.premium-reactivate-btn:active { transform: scale(.96); }
.premium-reactivate-btn[hidden] { display: none; }

/* ════════════════════════════════════════════════════════════════════
   PREMIUM — HISTORIAL (Task 5)
   ════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
   RESUMEN SEMANAL
   ════════════════════════════════════════════════════════════════════ */

/* ── Tarjeta de entrada (dashboard) ── */
.weekly-entry {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  padding: 1rem 1.1rem;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  color: #FFFDF8;
  background: linear-gradient(135deg, #735D46 0%, #9D8061 48%, #B8973F 100%);
  box-shadow: 0 8px 22px rgba(115,93,70,.28);
  transition: transform .18s ease, box-shadow .18s ease;
}
.weekly-entry:active { transform: scale(.985); }
.weekly-entry-shine {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 48%, transparent 66%);
  transform: translateX(-120%);
  animation: weeklyShine 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes weeklyShine {
  0%, 60% { transform: translateX(-120%); }
  80%, 100% { transform: translateX(120%); }
}
.weekly-entry-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,.16);
}
.weekly-entry-icon svg { width: 23px; height: 23px; color: #FFFDF8; }
.weekly-entry-text { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; z-index: 1; }
.weekly-entry-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.weekly-entry-sub { font-size: .78rem; opacity: .85; }
.weekly-entry-arrow { z-index: 1; opacity: .85; }

/* ── Sub-vista ── */
.weekly-summary { padding: .25rem 0 2.5rem; }
.weekly-summary[hidden] { display: none; }
.weekly-summary.is-in { animation: treeJourneyIn .42s cubic-bezier(.22,1,.36,1) both; }

.ws-head { text-align: center; margin: .25rem 0 1.4rem; }
.ws-eyebrow {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #B8973F; margin: 0 0 .35rem;
}
.ws-title {
  font-family: var(--font-display);
  font-size: 1.55rem; font-weight: 700; line-height: 1.15;
  letter-spacing: -.02em; color: var(--color-text); margin: 0 0 .35rem;
}
.ws-range { font-size: .85rem; color: var(--color-muted); margin: 0; }

/* ── Tarjetas con stagger ── */
.ws-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 1.1rem 1.15rem;
  margin-bottom: .85rem;
  box-shadow: 0 4px 14px rgba(82,65,43,.05);
  opacity: 0;
  animation: wsRise .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes wsRise {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ws-card-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-muted);
  margin: 0 0 .8rem; text-align: center;
}

/* ── Héroe: emoción dominante ── */
.ws-hero { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: .4rem 0 .2rem; }
.ws-hero-orb {
  position: relative;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--c) 70%, #fff), var(--c));
  box-shadow: 0 8px 26px color-mix(in srgb, var(--c) 45%, transparent);
}
.ws-hero-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--c);
  opacity: 0;
  animation: wsOrbPulse 2.8s ease-out infinite;
}
.ws-hero-ring--2 { animation-delay: 1.4s; }
@keyframes wsOrbPulse {
  0%   { opacity: .55; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.7); }
}
.ws-hero-name { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; }
.ws-hero-times { font-size: .85rem; color: var(--color-muted); }

/* ── Tendencia ── */
.ws-trend { display: flex; align-items: center; justify-content: center; gap: .65rem; }
.ws-trend-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 12px;
}
.ws-trend-icon svg { width: 22px; height: 22px; }
.ws-trend-txt { font-size: 1rem; font-weight: 600; color: var(--color-text); }
.ws-trend.is-up   .ws-trend-icon { background: rgba(122,168,138,.16); color: #5E8C70; }
.ws-trend.is-down .ws-trend-icon { background: rgba(155,125,181,.16); color: #8A6BAA; }
.ws-trend.is-flat .ws-trend-icon { background: rgba(157,128,97,.16);  color: #9D8061; }
.ws-trend.is-new  .ws-trend-icon { background: rgba(201,168,76,.18);  color: #B8973F; }

/* ── Trío de stats ── */
.ws-stats { display: flex; justify-content: space-around; text-align: center; }
.ws-stat { display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.ws-stat + .ws-stat { border-left: 1px solid var(--color-border); }
.ws-stat-num {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 700;
  color: var(--color-text); line-height: 1;
}
.ws-stat-den { font-size: .95rem; color: var(--color-muted); font-weight: 600; }
.ws-stat-label { font-size: .72rem; color: var(--color-muted); }

/* ── Distribución ── */
.ws-dist { display: flex; flex-direction: column; gap: .6rem; }
.ws-dist-row { display: flex; align-items: center; gap: .6rem; }
.ws-dist-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ws-dist-name { width: 4.6rem; font-size: .82rem; color: var(--color-text); flex-shrink: 0; }
.ws-dist-bar {
  flex: 1; height: 8px; border-radius: 999px;
  background: var(--color-border); overflow: hidden;
}
.ws-dist-fill {
  display: block; height: 100%; border-radius: 999px;
  transform-origin: left center;
  animation: wsBar .8s cubic-bezier(.22,1,.36,1) both;
  animation-delay: .25s;
}
@keyframes wsBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ws-dist-cnt { width: 1.4rem; text-align: right; font-size: .8rem; font-weight: 600; color: var(--color-muted); }

/* ── Mejor / más difícil ── */
.ws-days { display: flex; gap: .7rem; }
.ws-day {
  flex: 1; display: flex; flex-direction: column; gap: .3rem;
  padding: .85rem .9rem; border-radius: 14px;
  border: 1px solid var(--color-border);
}
.ws-day--best { background: rgba(122,168,138,.08); border-color: rgba(122,168,138,.3); }
.ws-day--hard { background: rgba(155,125,181,.07); border-color: rgba(155,125,181,.28); }
.ws-day-tag { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); }
.ws-day-date { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--color-text); }
.ws-day-emo { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; }
.ws-day-dot { width: 8px; height: 8px; border-radius: 50%; }

/* ── Frase reflexiva ── */
.ws-phrase {
  position: relative;
  margin-top: .4rem;
  padding: 1.2rem 1.2rem 1.2rem 2.6rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(201,168,76,.1), rgba(157,128,97,.08));
  border: 1px solid rgba(201,168,76,.22);
  opacity: 0;
  animation: wsRise .6s cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--d, 0ms);
}
.ws-phrase-q {
  position: absolute; top: 1rem; left: .95rem;
  width: 22px; height: 22px; color: #C9A84C; opacity: .55;
}
.ws-phrase p {
  margin: 0; font-family: var(--font-display);
  font-size: 1rem; line-height: 1.5; font-style: italic; color: var(--color-text);
}

/* ── Estado sin datos ── */
.ws-empty { text-align: center; padding: 1.5rem .5rem; }
.ws-empty-orb {
  width: 56px; height: 56px; margin: 0 auto .9rem; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #E8DCC4, #C9B79C);
  animation: wsOrbBreathe 3s ease-in-out infinite;
}
@keyframes wsOrbBreathe { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.08); opacity: 1; } }
.ws-empty-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--color-text); margin: 0 0 .35rem; }
.ws-empty-sub { font-size: .88rem; color: var(--color-muted); line-height: 1.5; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .ws-card, .ws-phrase, .ws-dist-fill, .weekly-entry-shine,
  .ws-hero-ring, .ws-empty-orb { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   CARTA A TU FUTURO YO
   ════════════════════════════════════════════════════════════════════ */

/* Entrada (reusa .weekly-entry; gradiente crepuscular distinto) */
.letters-entry { background: linear-gradient(135deg, #5A4E6B 0%, #8A6E72 55%, #B89A6A 100%); }
.letters-entry-badge {
  position: absolute; top: 8px; right: 10px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; color: #5A4E6B;
  background: #F5D060; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  z-index: 2;
}

/* Sub-vista */
.future-letters { padding: .25rem 0 2.5rem; }
.future-letters[hidden] { display: none; }
.future-letters.is-in { animation: treeJourneyIn .42s cubic-bezier(.22,1,.36,1) both; }

.letters-head { text-align: center; margin: .25rem 0 1.3rem; }
.letters-intro { font-size: .9rem; color: var(--color-muted); line-height: 1.55; margin: .4rem auto 0; max-width: 22rem; }

.letters-section-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-muted);
  margin: 1.3rem 0 .65rem;
}
.letters-ready-label { color: #B8973F; }

/* Tarjetas de carta */
.letter-card {
  position: relative;
  display: flex; align-items: center; gap: .8rem;
  width: 100%; box-sizing: border-box;
  padding: .9rem 1rem; margin-bottom: .6rem;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  text-align: left; cursor: default;
  color: var(--color-text);
}
button.letter-card { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
button.letter-card:active { transform: scale(.985); }
.letter-card-icon {
  flex-shrink: 0; width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 11px;
  background: rgba(157,128,97,.12); color: var(--color-accent-strong);
}
.letter-card-icon svg { width: 21px; height: 21px; }
.letter-card-info { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.letter-card-title { font-weight: 600; font-size: .92rem; color: var(--color-text); }
.letter-card-sub { font-size: .78rem; color: var(--color-muted); }
.letter-card-cta {
  flex-shrink: 0; font-size: .82rem; font-weight: 700; color: #fff;
  background: var(--color-accent); padding: .4rem .9rem; border-radius: 999px;
}

/* Lista para abrir — destacada con glow dorado */
.letter-card--ready {
  border-color: rgba(201,168,76,.5);
  background: linear-gradient(135deg, rgba(201,168,76,.12), rgba(184,151,63,.06));
  overflow: hidden;
}
.letter-card--ready .letter-card-icon { background: rgba(201,168,76,.22); color: #B8973F; }
.letter-card-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 18% 50%, rgba(245,208,96,.28), transparent 60%);
  animation: letterGlow 2.6s ease-in-out infinite; pointer-events: none;
}
@keyframes letterGlow { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.letter-card--sealed { opacity: .92; }
.letter-card--sealed .letter-card-icon { background: rgba(122,98,75,.12); }
.letter-card--opened .letter-card-icon { background: rgba(157,128,97,.1); color: var(--color-muted); }
.letters-sealed-list { display: flex; flex-direction: column; }

/* Compositor */
.letter-compose {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px; padding: 1.1rem 1.15rem;
  margin-top: .3rem;
}
.letter-textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--color-border); border-radius: 12px;
  background: var(--color-bg);
  padding: .85rem .95rem; font-size: .95rem; line-height: 1.6;
  font-family: inherit; color: var(--color-text); resize: vertical;
  min-height: 7rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.letter-textarea:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(157,128,97,.14);
}
.letters-deliver-q { font-size: .85rem; color: var(--color-text); margin: 1rem 0 .55rem; font-weight: 600; }
.letters-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.letters-chip {
  flex: 1; min-width: 4rem;
  border: 1px solid var(--color-border); background: var(--color-bg);
  border-radius: 999px; padding: .55rem .4rem;
  font-size: .85rem; font-weight: 600; color: var(--color-muted);
  cursor: pointer; transition: all .15s ease;
}
.letters-chip.is-active {
  background: var(--color-accent); border-color: var(--color-accent);
  color: #fff; box-shadow: 0 4px 12px rgba(157,128,97,.28);
}
.letter-seal-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.letter-seal-msg { font-size: .82rem; margin: .6rem 0 0; text-align: center; min-height: 1rem; }
.letter-seal-msg.is-error { color: #C97B6A; }

/* Vista de lectura */
.letter-read { text-align: center; padding: .5rem 0 1rem; }
.letter-read.is-in { animation: letterReveal .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes letterReveal { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.letter-read-seal {
  width: 56px; height: 56px; margin: 0 auto .8rem;
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #D8B85A, #B8973F);
  color: #fff; box-shadow: 0 6px 18px rgba(184,151,63,.4);
  animation: sealPop .55s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes sealPop { from { transform: scale(0); } to { transform: scale(1); } }
.letter-read-seal svg { width: 28px; height: 28px; }
.letter-read-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #B8973F; margin: 0 0 .25rem; }
.letter-read-dates { font-size: .82rem; color: var(--color-muted); margin: 0 0 1.1rem; }
.letter-read-paper {
  text-align: left;
  background: linear-gradient(180deg, #FFFDF8, #FBF6EC);
  border: 1px solid var(--color-border);
  border-radius: 16px; padding: 1.4rem 1.3rem;
  box-shadow: 0 6px 20px rgba(82,65,43,.08);
  margin-bottom: 1.2rem;
}
.letter-read-text {
  margin: 0; font-family: var(--font-display);
  font-size: 1.05rem; line-height: 1.75; color: var(--color-text); white-space: normal;
}
.letter-read-back { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .letter-card-glow, .letter-read.is-in, .letter-read-seal { animation: none !important; }
}

.premium-history { padding: .25rem 0 2rem; }
.premium-history[hidden] { display: none; }
.premium-history.is-in {
  animation: treeJourneyIn .42s cubic-bezier(.22,1,.36,1) both;
}
.premium-history-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--color-text);
  margin: 0 0 1rem;
}
.history-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin-bottom: 1.5rem;
}
.history-tile {
  background: linear-gradient(160deg, #FFFDF8, #F7EFDF);
  border: 1px solid rgba(201,168,76,.3);
  border-radius: 16px;
  padding: .85rem .5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.history-tile-num {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}
.history-tile-label {
  font-size: .68rem;
  color: var(--color-muted);
  line-height: 1.25;
}
.history-section-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 .65rem;
}
.history-section-title[hidden] { display: none; }

.history-categories {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-bottom: 1.5rem;
}
.history-categories[hidden] { display: none; }
.history-cat-row {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.history-cat-icon {
  display: inline-flex;
  width: 1.3rem;
  height: 1.3rem;
  flex-shrink: 0;
}
.history-cat-icon svg { width: 100%; height: 100%; }
.history-cat-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-text);
  width: 4.5rem;
  flex-shrink: 0;
}
.history-cat-bar {
  flex: 1;
  height: 7px;
  background: rgba(225,214,198,.5);
  border-radius: 999px;
  overflow: hidden;
}
.history-cat-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .5s cubic-bezier(.22,1,.36,1);
}
.history-cat-count {
  font-size: .8rem;
  font-weight: 700;
  color: var(--color-muted);
  width: 1.6rem;
  text-align: right;
  flex-shrink: 0;
}

.history-log {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.history-log[hidden] { display: none; }
.history-entry {
  display: flex;
  align-items: center;
  gap: .7rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: .7rem .8rem;
}
.history-entry-badge {
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #fff;
}
.history-entry-icon { display: inline-flex; }
.history-entry-icon svg { width: 1.05rem; height: 1.05rem; }
.history-entry-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.history-entry-text {
  font-size: .82rem;
  color: var(--color-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.history-entry-meta {
  font-size: .7rem;
  color: var(--color-muted);
}
.history-entry-xp {
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-accent-strong);
  flex-shrink: 0;
}
.history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--color-muted);
}
.history-empty[hidden] { display: none; }
.history-empty svg { width: 2.4rem; height: 2.4rem; color: var(--color-accent); opacity: .6; }
.history-empty p { font-size: .9rem; margin: 0; line-height: 1.5; }

/* ════════════════════════════════════════════════════════════════════
   PREMIUM — TREE JOURNEY: ANIMACIÓN (Task 7)
   ════════════════════════════════════════════════════════════════════ */
.tree-scene { position: relative; }
.tree-scene-stage {
  transform-origin: 50% 100%;
}
.tree-scene.is-animated .tree-scene-stage {
  animation: treeDrawIn .7s ease both, treeSway 5s ease-in-out 1s infinite;
}
@keyframes treeDrawIn {
  from { opacity: 0; transform: scale(.94) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes treeSway {
  0%, 100% { transform: rotate(-1.6deg); }
  50%      { transform: rotate(1.6deg); }
}
.tree-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.tree-particle {
  position: absolute;
  bottom: 18%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(231,201,106,.9), rgba(201,168,76,.5));
  opacity: 0;
  animation: treeFloat 6s ease-in-out infinite;
}
.tree-particle--1 { left: 20%; animation-delay: 0s;   }
.tree-particle--2 { left: 35%; animation-delay: 1.1s; }
.tree-particle--3 { left: 50%; animation-delay: 2.3s; }
.tree-particle--4 { left: 64%; animation-delay: .6s;  }
.tree-particle--5 { left: 76%; animation-delay: 3.1s; }
.tree-particle--6 { left: 88%; animation-delay: 1.8s; }
@keyframes treeFloat {
  0%   { opacity: 0; transform: translateY(0) scale(.8); }
  15%  { opacity: .9; }
  80%  { opacity: .5; }
  100% { opacity: 0; transform: translateY(-60px) scale(1.1); }
}
.tree-milestone.is-current {
  animation: milestonePulse 2.4s ease-in-out infinite;
}
@keyframes milestonePulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(201,168,76,.16); }
  50%      { box-shadow: 0 6px 20px rgba(201,168,76,.34); }
}

@media (prefers-reduced-motion: reduce) {
  .tree-scene.is-animated .tree-scene-stage,
  .tree-particle,
  .tree-milestone.is-current,
  .challenges-all-done .all-done-icon { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   ACOMPAÑAMIENTO PROFESIONAL — directorio de psicólogos
   ════════════════════════════════════════════════════════════════════ */
/* Botón de acceso destacado: círculo verde salvia con halo suave */
.psy-btn {
  position: relative;
  min-width: 44px; width: 44px; min-height: 44px; height: 44px;
  padding: 0; display: inline-grid; place-items: center;
  border: none; border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #88B79A, #5E8C70);
  box-shadow: 0 4px 14px rgba(94,140,112,.42);
}
.psy-btn svg { position: relative; z-index: 1; }
.psy-btn::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(94,140,112,.5);
  animation: psyPulse 2.8s cubic-bezier(.22,1,.36,1) infinite;
  pointer-events: none;
}
@keyframes psyPulse {
  0%   { box-shadow: 0 0 0 0 rgba(94,140,112,.45); }
  70%  { box-shadow: 0 0 0 11px rgba(94,140,112,0); }
  100% { box-shadow: 0 0 0 0 rgba(94,140,112,0); }
}
.psy-btn:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) {
  .psy-btn::after { animation: none; }
}

.psy-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
}
.psy-overlay[hidden] { display: none; }
.psy-backdrop {
  position: absolute; inset: 0; background: rgba(47,48,42,.42);
  opacity: 0; transition: opacity .42s ease;
}
.psy-overlay.is-open .psy-backdrop { opacity: 1; }
.psy-sheet {
  position: relative; z-index: 1; width: 100%; max-width: 560px;
  max-height: 94dvh; display: flex; flex-direction: column;
  background: var(--color-bg); border-radius: 24px 24px 0 0;
  box-shadow: 0 -24px 60px rgba(47,48,42,.2);
  transform: translateY(100%); transition: transform .42s cubic-bezier(.22,1,.36,1);
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.psy-overlay.is-open .psy-sheet { transform: translateY(0); }
.psy-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: .25rem 1.25rem .9rem; gap: 1rem; flex-shrink: 0;
}
.psy-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5E8C70; margin: 0 0 .15rem; }
.psy-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--color-text); margin: 0; }
.psy-close {
  flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center;
  border: none; border-radius: 50%; background: var(--color-surface);
  color: var(--color-text); cursor: pointer;
}
.psy-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 1.25rem 1.5rem; }
.psy-intro { font-size: .9rem; color: var(--color-muted); line-height: 1.55; margin: 0 0 1rem; }

.psy-filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.psy-chip {
  border: 1px solid var(--color-border); background: var(--color-surface);
  border-radius: 999px; padding: .4rem .9rem; font-size: .82rem; font-weight: 600;
  color: var(--color-muted); cursor: pointer; transition: all .15s ease;
}
.psy-chip.is-active { background: #5E8C70; border-color: #5E8C70; color: #fff; }

.psy-admin-add {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: .8rem; margin-bottom: 1rem;
  border: 1.5px dashed var(--color-accent); border-radius: 14px;
  background: rgba(157,128,97,.06); color: var(--color-accent-strong);
  font-weight: 600; font-size: .9rem; cursor: pointer;
}
.psy-admin-add[hidden] { display: none; }

.psy-list { display: flex; flex-direction: column; gap: .7rem; }
.psy-card {
  display: flex; align-items: center; gap: .9rem; width: 100%; box-sizing: border-box;
  padding: .85rem; border: 1px solid var(--color-border); border-radius: 18px;
  background: var(--color-surface); text-align: left; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.psy-card:active { transform: scale(.99); }
.psy-card:hover { box-shadow: 0 6px 18px rgba(82,65,43,.08); }
.psy-card.is-featured { border-color: rgba(201,168,76,.5); background: linear-gradient(135deg, rgba(201,168,76,.08), var(--color-surface)); }
.psy-card-photo {
  width: 58px; height: 58px; flex-shrink: 0; border-radius: 50%;
  object-fit: cover; object-position: center top;
}
.psy-card-initials {
  display: grid; place-items: center; background: #7AA88A; color: #fff;
  font-weight: 700; font-size: 1.2rem; font-family: var(--font-display);
}
.psy-card-info { display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 0; }
.psy-card-name { font-weight: 700; font-size: 1rem; color: var(--color-text); display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.psy-verified { display: inline-flex; color: #5E8C70; }
.psy-verified svg { width: 16px; height: 16px; }
.psy-inactive-badge { font-size: .65rem; font-weight: 700; text-transform: uppercase; color: #C97B6A; background: rgba(201,123,106,.14); padding: .1rem .4rem; border-radius: 6px; }
.psy-card-title { font-size: .82rem; color: var(--color-muted); }
.psy-card-tags { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .1rem; }
.psy-tag { font-size: .72rem; color: #5E8C70; background: rgba(122,168,138,.14); padding: .15rem .5rem; border-radius: 999px; }
.psy-tag-alt { color: #735D46; background: rgba(157,128,97,.14); }
.psy-rating { display: inline-flex; align-items: center; gap: .2rem; font-size: .85rem; font-weight: 700; color: #B8973F; flex-shrink: 0; }
.psy-rating svg { width: 15px; height: 15px; }
.psy-card-chevron { color: var(--color-muted); flex-shrink: 0; }

.psy-empty { text-align: center; color: var(--color-muted); padding: 2rem 1rem; }
.psy-empty svg { width: 44px; height: 44px; opacity: .4; margin-bottom: .6rem; }
.psy-empty p { font-size: .9rem; margin: 0; }

.psy-crisis {
  display: flex; gap: .6rem; margin-top: 1.4rem; padding: .9rem 1rem;
  background: rgba(201,123,106,.08); border: 1px solid rgba(201,123,106,.25);
  border-radius: 14px;
}
.psy-crisis svg { flex-shrink: 0; color: #C97B6A; margin-top: 2px; }
.psy-crisis p { font-size: .78rem; color: #8a5a50; line-height: 1.55; margin: 0; }

/* Detalle */
.psy-back {
  display: inline-flex; align-items: center; gap: .35rem; background: none; border: none;
  color: var(--color-accent-strong); font-weight: 600; font-size: .92rem; cursor: pointer;
  padding: .25rem 0; margin-bottom: .75rem;
}
.psy-detail-head { text-align: center; padding: .5rem 0 1rem; }
.psy-detail-photo { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; object-position: center top; margin: 0 auto .8rem; display: block; }
.psy-detail-photo.psy-card-initials { font-size: 2.4rem; }
.psy-detail-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin: 0; overflow-wrap: anywhere; }
.psy-detail-title { font-size: .95rem; color: var(--color-muted); margin: .2rem 0 0; overflow-wrap: anywhere; }
.psy-verified-row { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; padding: .3rem .7rem; font-size: .8rem; font-weight: 600; color: #4A7359; background: rgba(94,140,112,.12); border-radius: 999px; }
.psy-verified-row svg { width: 16px; height: 16px; }

.psy-contacts { display: flex; gap: .6rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.psy-contact {
  flex: 1; min-width: 120px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem; border: 1px solid var(--color-border); border-radius: 14px;
  background: var(--color-surface); color: var(--color-text); font-weight: 600; font-size: .9rem; cursor: pointer;
}
.psy-contact svg { width: 19px; height: 19px; }
.psy-wa { background: #25D366; border-color: #25D366; color: #fff; }

.psy-section { margin-bottom: 1.2rem; }
.psy-section-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 .5rem; }
.psy-bio { font-size: .92rem; line-height: 1.65; color: var(--color-text); margin: 0; overflow-wrap: anywhere; word-break: break-word; }
.psy-tags-wrap { display: flex; gap: .4rem; flex-wrap: wrap; }
.psy-meta { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: .4rem 1rem; }
.psy-meta-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--color-border); }
.psy-meta-row:last-child { border-bottom: none; }
.psy-meta-label { font-size: .85rem; color: var(--color-muted); flex-shrink: 0; }
.psy-meta-val { font-size: .88rem; color: var(--color-text); font-weight: 600; text-align: right; overflow-wrap: anywhere; min-width: 0; }

.psy-feedback-btn {
  width: 100%; padding: .75rem; border: 1px solid var(--color-border); border-radius: 12px;
  background: none; color: var(--color-muted); font-size: .85rem; cursor: pointer; margin-top: .4rem;
}
.psy-admin-row { display: flex; gap: .6rem; margin-top: 1rem; }
.psy-admin-edit, .psy-admin-del { flex: 1; padding: .7rem; border-radius: 12px; font-weight: 600; font-size: .88rem; cursor: pointer; border: 1px solid var(--color-border); }
.psy-admin-edit { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.psy-admin-del { background: none; color: #C97B6A; border-color: rgba(201,123,106,.4); }

/* Formulario admin */
.psy-form-title { font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 1rem; color: var(--color-text); }
.psy-form { display: flex; flex-direction: column; }
.psy-f-label { font-size: .8rem; font-weight: 600; color: var(--color-text); margin: .7rem 0 .3rem; }
.psy-f-input {
  width: 100%; box-sizing: border-box; border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-surface); padding: .65rem .8rem; font-size: .92rem; font-family: inherit; color: var(--color-text);
}
.psy-f-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(157,128,97,.12); }
.psy-f-check { display: flex; align-items: center; gap: .5rem; margin-top: .8rem; font-size: .9rem; color: var(--color-text); cursor: pointer; }
.psy-f-save { margin-top: 1.4rem; width: 100%; }