/* =============================================================================
   Dashboard de Ahorro (HU-2)
   Shell de la app (header, tab bar / rail) + Horizonte + Playa + Frasco mes a mes
   ============================================================================= */

@layer components {

  /* ---------------------------------------------------------------------------
     Tokens propios de la escena (claro / oscuro)
     --------------------------------------------------------------------------- */
  :root {
    --sky-top: var(--c-sun-200);
    --sky-bottom: var(--c-coral-400);
    --sea-top: var(--c-lagoon-500);
    --sea-bottom: #138A84;
    --sun: #FFF4D6;
    --sun-glow: rgb(255 244 214 / .55);
    --horizon-ink: var(--c-ink-900);
    --sand: var(--c-sand-200);
    --tabbar-h: 72px;
    --rail-w: 96px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --sky-top: var(--c-ink-800);
      --sky-bottom: #8A4250;
      --sea-top: #0E5E5A;
      --sea-bottom: #093C3A;
      --sun: var(--c-sun-400);
      --sun-glow: rgb(255 194 61 / .4);
      --horizon-ink: var(--c-sand-100);
      --sand: #24496A;
    }
  }
  :root[data-theme="dark"] {
    --sky-top: var(--c-ink-800);
    --sky-bottom: #8A4250;
    --sea-top: #0E5E5A;
    --sea-bottom: #093C3A;
    --sun: var(--c-sun-400);
    --sun-glow: rgb(255 194 61 / .4);
    --horizon-ink: var(--c-sand-100);
    --sand: #24496A;
  }

  /* ---------------------------------------------------------------------------
     Shell
     --------------------------------------------------------------------------- */
  .app { padding-block-end: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--space-5)); }

  body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    block-size: env(safe-area-inset-top, 0px);
    z-index: 60;
    background: var(--color-bg);
  }

  .gutter {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  .demo-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    padding-block: var(--space-2);
    background: var(--color-surface-sunken);
    font-size: var(--fs-xs);
  }
  .demo-bar__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  .app-header {
    position: sticky;
    inset-block-start: env(safe-area-inset-top, 0px);
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-3);
    background: color-mix(in srgb, var(--color-bg) 90%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .trip-switch {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-inline-size: 0;
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text);
    text-align: start;
  }
  .trip-switch:hover { background: var(--color-surface); }
  .trip-switch__cover {
    flex-shrink: 0;
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--radius-m);
    background: var(--grad-horizon);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06);
  }
  .trip-switch__text { display: grid; min-inline-size: 0; }
  .trip-switch__name {
    font-family: var(--font-display);
    font-variation-settings: var(--display-variation);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .trip-switch__meta { font-size: var(--fs-xs); color: var(--color-text-muted); white-space: nowrap; }

  .bell { position: relative; }
  .bell__dot {
    position: absolute;
    inset-block-start: 11px;
    inset-inline-end: 12px;
    inline-size: 9px;
    block-size: 9px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-bg);
  }

  /* Layout de la página: 1 columna móvil, 2 columnas desde 1024px */
  .page {
    display: grid;
    gap: var(--space-5);
    inline-size: 100%;
    max-inline-size: 1120px;
    margin-inline: auto;
    padding-block: var(--space-2) var(--space-6);
  }
  .page__main, .page__aside { display: grid; gap: var(--space-5); align-content: start; min-inline-size: 0; }

  .page-title { display: grid; gap: var(--space-1); }
  .page-title h1 { font-size: var(--fs-2xl); }

  @media (min-width: 1024px) {
    .app { padding-block-end: var(--space-6); padding-inline-start: var(--rail-w); }
    .page { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-6); }
    .page__aside { position: sticky; inset-block-start: 88px; }
  }

  /* Panel genérico (solo donde se necesita separar un objeto) */
  .panel {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-l);
    background: var(--color-surface-raised);
    min-inline-size: 0;
  }
  .panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
  }
  .panel__title {
    font-family: var(--font-display);
    font-variation-settings: var(--display-variation);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
  }
  .panel__sub { font-size: var(--fs-sm); color: var(--color-text-muted); }

  /* ---------------------------------------------------------------------------
     El Horizonte
     --------------------------------------------------------------------------- */
  .horizon {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius-l);
    background: var(--sky-bottom);
    color: var(--horizon-ink);
    box-shadow: var(--shadow-postcard);
  }
  .horizon__scene { display: block; inline-size: 100%; block-size: auto; max-inline-size: 100%; }
  .horizon__copy {
    position: absolute;
    inset: 0 0 auto 0;
    display: grid;
    gap: var(--space-1);
    padding: var(--space-5);
    max-inline-size: 78%;
  }
  .horizon__eyebrow {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .85;
  }
  .horizon__amount {
    font-family: var(--font-display);
    font-variation-settings: var(--display-variation);
    font-size: clamp(2rem, 1.4rem + 3.2vw, 3.052rem);
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .horizon__goal { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

  .sun { transform: translateY(calc(var(--rise, 0) * -1px)); transition: transform 1.4s var(--ease-spring); }
  .sun-glow { opacity: var(--glow, .3); transition: opacity 1.4s var(--ease-out); }
  .waves { animation: waves 9s linear infinite; }
  .waves--slow { animation-duration: 14s; animation-direction: reverse; }
  @keyframes waves { to { transform: translateX(-120px); } }

  .horizon__footer {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-5);
    background: var(--color-surface-raised);
    color: var(--color-text);
  }
  .horizon__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-1) var(--space-4);
    font-size: var(--fs-sm);
  }
  .horizon__stats b { font-variant-numeric: tabular-nums; }

  /* Medidor con marcas de hitos a escala */
  .milestone-meter { position: relative; padding-block-end: 22px; }
  .milestone-meter__tick {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(var(--at) * 1%);
    display: grid;
    justify-items: center;
    translate: -50% 0;
    pointer-events: none;
  }
  .milestone-meter__tick::before {
    content: "";
    inline-size: 2px;
    block-size: 20px;
    background: var(--color-surface-raised);
    opacity: .9;
  }
  .milestone-meter__tick span {
    font-size: 10px;
    font-weight: var(--fw-bold);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }
  .milestone-meter__tick[data-reached] span { color: var(--color-success-text); }
  .milestone-meter__tick:first-child { translate: 0 0; justify-items: start; }
  .milestone-meter__tick:last-child  { translate: -100% 0; justify-items: end; }
  .milestone-meter .meter { block-size: 20px; }

  .next-milestone {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-m);
    background: var(--color-highlight-tint, rgb(255 194 61 / .28));
    font-size: var(--fs-sm);
  }
  .next-milestone__pct {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    inline-size: 44px;
    aspect-ratio: 1;
    border: 2px dashed currentColor;
    border-radius: 50%;
    font-weight: var(--fw-black);
    font-size: var(--fs-xs);
  }

  /* ---------------------------------------------------------------------------
     Mi aporte del mes
     --------------------------------------------------------------------------- */
  .my-turn { gap: var(--space-3); }
  .my-turn__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .my-turn__amount {
    font-family: var(--font-display);
    font-variation-settings: var(--display-variation);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
  }
  .my-turn[data-state="paid"] { background-image: var(--texture-grain), linear-gradient(var(--color-success-tint), var(--color-success-tint)); }

  /* ---------------------------------------------------------------------------
     La playa: una tumbona por integrante
     --------------------------------------------------------------------------- */
  .beach {
    list-style: none;
    padding: var(--space-4) var(--space-2) var(--space-2);
    margin: 0;
    display: grid;
    grid-template-columns: repeat(var(--count, 5), minmax(0, 1fr));
    gap: var(--space-2);
    border-radius: var(--radius-m);
    background: linear-gradient(180deg, transparent 0 34%, var(--sand) 34%);
  }
  .lounger { display: grid; justify-items: center; gap: var(--space-2); text-align: center; min-inline-size: 0; }
  .lounger[data-tone="1"] { --tone: var(--c-coral-500); }
  .lounger[data-tone="2"] { --tone: var(--c-lagoon-500); }
  .lounger[data-tone="3"] { --tone: var(--c-sun-400); }
  .lounger[data-tone="4"] { --tone: var(--c-capsule-300); }
  .lounger[data-tone="5"] { --tone: var(--c-peach-200); }

  .lounger__art { inline-size: 100%; max-inline-size: 64px; block-size: auto; overflow: visible; }
  .lounger__canopy {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transition: transform var(--dur-slow) var(--ease-spring), fill var(--dur-base);
    fill: var(--tone);
  }
  .lounger__stripe { transition: opacity var(--dur-base); }
  .lounger[data-state="pending"] .lounger__canopy { transform: scale(.16, 1.05); fill: var(--color-border-strong); }
  .lounger[data-state="pending"] .lounger__stripe { opacity: 0; }
  .lounger__towel { fill: var(--tone); }
  .lounger__frame { stroke: var(--color-text); }
  .lounger__pole  { stroke: var(--color-text-muted); }

  .lounger__name { font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1.2; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lounger__state { font-size: 11px; white-space: nowrap; color: var(--color-text-muted); }
  .lounger[data-state="paid"] .lounger__state { color: var(--color-success-text); font-weight: var(--fw-semibold); }
  .lounger .btn--nudge { --btn-h: 32px; --btn-px: var(--space-2); --btn-fs: var(--fs-xs); max-inline-size: 100%; }
  .lounger.is-arriving .lounger__art { animation: pop var(--dur-slow) var(--ease-spring); }

  /* ---------------------------------------------------------------------------
     El frasco mes a mes
     --------------------------------------------------------------------------- */
  .jar-strip {
    display: grid;
    grid-template-columns: repeat(var(--months, 25), minmax(0, 1fr));
    gap: 3px;
    align-items: end;
    block-size: 76px;
  }
  .jar-strip__cell {
    position: relative;
    block-size: 100%;
    border-radius: 5px 5px 3px 3px;
    background: var(--color-surface-sunken);
    overflow: hidden;
  }
  .jar-strip__fill {
    position: absolute;
    inset: auto 0 0;
    block-size: calc(var(--fill, 0) * 1%);
    background: var(--c-lagoon-500);
    transition: block-size var(--dur-slow) var(--ease-spring);
  }
  .jar-strip__cell[data-extra] .jar-strip__fill { background: linear-gradient(180deg, var(--c-sun-400) 0 22%, var(--c-lagoon-500) 22%); }
  .jar-strip__cell[data-state="current"] { outline: 2px solid var(--color-primary); outline-offset: 1px; }
  .jar-strip__cell[data-state="future"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--color-border); }
  .jar-strip__cell[data-state="future"][data-projected] { box-shadow: inset 0 0 0 1.5px var(--color-success); }
  .jar-strip__labels {
    display: grid;
    grid-template-columns: repeat(var(--months, 25), minmax(0, 1fr));
    gap: 3px;
    font-size: 10px;
    font-weight: var(--fw-bold);
    color: var(--color-text-muted);
    white-space: nowrap;
  }
  .jar-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--fs-xs); color: var(--color-text-muted); }
  .jar-legend i { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; }

  .projection {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-m);
    background: var(--color-success-tint);
    color: var(--color-text);
    font-size: var(--fs-sm);
  }
  .projection b { color: var(--color-success-text); }

  /* ---------------------------------------------------------------------------
     Hitos
     --------------------------------------------------------------------------- */
  .milestones { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-3); align-items: center; }
  .milestones .stamp { --r: 4px; rotate: var(--tilt, -5deg); }
  .milestones .stamp__value { font-size: var(--fs-md); }
  .milestones .stamp__label { font-size: 9px; max-inline-size: 76px; white-space: normal; line-height: 1.15; }
  .milestone-todo {
    display: grid;
    place-items: center;
    inline-size: 56px;
    aspect-ratio: 1;
    border: 2px dashed var(--color-border-strong);
    border-radius: 50%;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
  }

  /* ---------------------------------------------------------------------------
     Aportes recientes
     --------------------------------------------------------------------------- */
  .feed { list-style: none; margin: 0; padding: 0; display: grid; }
  .feed__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-block-end: 1px dashed var(--color-border);
  }
  .feed__item:last-child { border-block-end: 0; }
  .feed__who { font-weight: var(--fw-bold); line-height: 1.25; }
  .feed__meta { font-size: var(--fs-xs); color: var(--color-text-muted); }
  .feed__note { font-family: var(--font-hand); font-size: 1.15rem; line-height: 1.1; color: var(--color-text); }
  .feed__amount { display: grid; justify-items: end; gap: 2px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
  .feed__item.is-new { animation: feed-in var(--dur-slow) var(--ease-spring); background: linear-gradient(90deg, var(--color-highlight-tint, rgb(255 194 61 / .28)), transparent 70%); border-radius: var(--radius-s); }
  @keyframes feed-in { from { opacity: 0; transform: translateY(-10px); } }

  .badges-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  /* ---------------------------------------------------------------------------
     Tab bar (móvil) → rail (escritorio)
     --------------------------------------------------------------------------- */
  .tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-nav);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    padding-block: var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
    border-block-start: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface-raised) 94%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .tabbar__item {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    min-block-size: 52px;
    border-radius: var(--radius-m);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: var(--fw-bold);
    text-decoration: none;
  }
  .tabbar__item svg { inline-size: 24px; block-size: 24px; }
  .tabbar__item[aria-current="page"] { color: var(--color-text); }
  .tabbar__item[aria-current="page"] svg { color: var(--color-accent-text); }
  .tabbar__item:hover { color: var(--color-text); }
  .tabbar__fab-wrap { display: grid; justify-items: center; gap: 2px; font-size: 11px; font-weight: var(--fw-bold); color: var(--color-text); }
  .tabbar__fab {
    display: grid;
    place-items: center;
    inline-size: 60px;
    block-size: 60px;
    margin-block-start: -30px;
    border: 4px solid var(--color-surface-raised);
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: var(--shadow-primary);
    transition: transform var(--dur-fast) var(--ease-spring);
  }
  .tabbar__fab:hover  { transform: scale(1.05); }
  .tabbar__fab:active { transform: scale(.94); }
  .tabbar__fab svg { inline-size: 28px; block-size: 28px; }

  @media (min-width: 1024px) {
    .tabbar {
      inset: 0 auto 0 0;
      inline-size: var(--rail-w);
      grid-template-columns: 1fr;
      grid-auto-rows: min-content;
      align-content: start;
      gap: var(--space-2);
      padding: calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--space-2) var(--space-5);
      border-block-start: 0;
      border-inline-end: 1px solid var(--color-border);
    }
    .tabbar__fab-wrap { order: -1; margin-block-end: var(--space-3); }
    .tabbar__fab { margin-block-start: 0; }
    .tabbar__item { min-block-size: 64px; }
    .tabbar__item[aria-current="page"] { background: var(--color-surface); }
  }

  /* ---------------------------------------------------------------------------
     Celebración de hito (pantalla completa)
     --------------------------------------------------------------------------- */
  .celebration {
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: 100%;
    max-block-size: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--grad-golden);
    color: var(--c-ink-900);
  }
  .celebration[open] { display: grid; place-items: center; animation: fade-in var(--dur-base) var(--ease-out); }
  .celebration::backdrop { background: transparent; }
  .celebration__inner {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    max-inline-size: 420px;
    padding: var(--space-6) max(16px, env(safe-area-inset-left, 0px));
    text-align: center;
  }
  .celebration .stamp { --r: 7px; --stamp-bg: var(--c-sand-50); }
  .celebration .stamp__value { font-size: clamp(3rem, 2rem + 6vw, 4.5rem); }
  .celebration h2 { font-size: var(--fs-2xl); }
  .celebration p { font-size: var(--fs-md); max-inline-size: 32ch; }
  .celebration .btn--secondary { --btn-border: var(--c-ink-900); --btn-fg: var(--c-ink-900); }
  .celebration .btn--primary { --btn-bg: var(--c-ink-900); --btn-fg: var(--c-sand-50); box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .waves { animation: none; }
}