/* =============================================================================
   HU-1 · Mis viajes + Wizard "Crear viaje" + Unirme con código
   ============================================================================= */

@layer components {

  /* ---------------------------------------------------------------------------
     Controles nuevos: stepper, switch, select, código
     --------------------------------------------------------------------------- */
  .stepper {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface-raised);
    justify-self: start;
  }
  .stepper .btn--icon { font-size: var(--fs-lg); }
  .stepper__value {
    min-inline-size: 3ch;
    text-align: center;
    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;
  }
  .stepper .btn { --btn-h: 44px; }

  .switch-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .switch-row__text { display: grid; gap: 2px; min-inline-size: 0; }
  .switch {
    position: relative;
    flex-shrink: 0;
    inline-size: 52px;
    block-size: 32px;
    margin: 0;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: background-color var(--dur-base) var(--ease-out);
  }
  .switch::after {
    content: "";
    position: absolute;
    inset-block-start: 4px;
    inset-inline-start: 4px;
    inline-size: 24px;
    block-size: 24px;
    border-radius: 50%;
    background: var(--c-white);
    box-shadow: var(--shadow-1);
    transition: translate var(--dur-base) var(--ease-spring);
  }
  .switch:checked { background: var(--c-lagoon-700); }
  .switch:checked::after { translate: 20px 0; }
  .switch:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }

  select.input {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: var(--space-7);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233E5C73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
  }
  input[type="date"].input { min-inline-size: 0; }

  .field-row { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

  .suggestions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .suggestion {
    min-block-size: 36px;
    padding-inline: var(--space-3);
    border: 1.5px dashed var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    transition: background-color var(--dur-fast), border-color var(--dur-fast);
  }
  .suggestion:hover { background: var(--color-surface); border-style: solid; }

  /* ---------------------------------------------------------------------------
     Wizard: estructura
     --------------------------------------------------------------------------- */
  .wizard { min-block-size: 100dvh; display: flex; flex-direction: column; }

  .wizard-top {
    position: sticky;
    inset-block-start: env(safe-area-inset-top, 0px);
    z-index: var(--z-nav);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-3);
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .wizard-top__label { font-size: var(--fs-sm); font-weight: var(--fw-bold); text-align: center; }
  .wizard-top__label span { color: var(--color-text-muted); font-weight: var(--fw-semibold); }

  /* Progreso: 4 estampillas pequeñas */
  .progress-stamps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .progress-stamps li {
    block-size: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-sunken);
    overflow: hidden;
  }
  .progress-stamps li::before {
    content: "";
    display: block;
    block-size: 100%;
    inline-size: 0;
    background: var(--color-primary);
    transition: inline-size var(--dur-slow) var(--ease-spring);
  }
  .progress-stamps li[data-done]::before,
  .progress-stamps li[aria-current="step"]::before { inline-size: 100%; }
  .progress-stamps li[aria-current="step"]::before { background: var(--c-sun-400); }

  .wizard-body {
    flex: 1;
    display: grid;
    gap: var(--space-6);
    inline-size: 100%;
    max-inline-size: 1080px;
    margin-inline: auto;
    padding-block: var(--space-5) calc(120px + env(safe-area-inset-bottom, 0px));
  }
  @media (min-width: 960px) {
    .wizard-body { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: var(--space-8); }
    .wizard-preview { position: sticky; inset-block-start: 96px; }
  }

  .step { display: grid; gap: var(--space-5); align-content: start; min-inline-size: 0; }
  .step[hidden] { display: none; }
  .step.is-entering { animation: step-in var(--dur-slow) var(--ease-out); }
  .step.is-entering[data-dir="back"] { animation-name: step-in-back; }
  @keyframes step-in      { from { opacity: 0; transform: translateX(28px); } }
  @keyframes step-in-back { from { opacity: 0; transform: translateX(-28px); } }

  .step__head { display: grid; gap: var(--space-2); }
  .step__title { font-size: var(--fs-2xl); }
  .step__lead { color: var(--color-text-muted); font-size: var(--fs-md); max-inline-size: 46ch; }

  .wizard-actions {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-nav);
    padding-block: var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom, 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);
  }
  .wizard-actions__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    max-inline-size: 1080px;
    margin-inline: auto;
  }
  .wizard-actions__inner .btn--primary { flex: 1; max-inline-size: 360px; margin-inline-start: auto; }

  /* ---------------------------------------------------------------------------
     Calculadora de meta (paso 3)
     --------------------------------------------------------------------------- */
  .calc {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: var(--radius-l);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    transition: border-color var(--dur-base), background-color var(--dur-base);
  }
  .calc__formula { font-size: var(--fs-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
  .calc__total {
    font-family: var(--font-display);
    font-variation-settings: var(--display-variation);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }
  .calc__verdict { font-weight: var(--fw-semibold); }
  .calc__per { font-size: var(--fs-sm); color: var(--color-text-muted); }
  .calc[data-state="match"] { border-color: var(--color-success); background: var(--color-success-tint); }
  .calc[data-state="match"] .calc__verdict { color: var(--color-success-text); }
  .calc[data-state="short"] { border-color: var(--c-sun-400); background: var(--color-highlight-tint, rgb(255 194 61 / .28)); }
  .calc__fix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--fs-sm); }

  .quota-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  .note {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-m);
    background: var(--color-surface);
    font-size: var(--fs-sm);
  }

  .settings-list { display: grid; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-l); border: 1px solid var(--color-border); background: var(--color-surface-raised); }
  .settings-list hr { margin: 0; }

  /* ---------------------------------------------------------------------------
     Postal en vivo (vista previa)
     --------------------------------------------------------------------------- */
  .trip-postcard .postcard__media { display: grid; place-items: end start; padding: var(--space-4); color: var(--c-ink-900); }
  .trip-postcard__dest {
    font-family: var(--font-hand);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    rotate: -3deg;
    text-shadow: 0 1px 0 rgb(255 255 255 / .5);
  }
  .trip-postcard__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--fs-sm); }
  .trip-postcard__facts li { display: flex; justify-content: space-between; gap: var(--space-3); }
  .trip-postcard__facts span { color: var(--color-text-muted); }
  .trip-postcard__facts b { text-align: end; font-variant-numeric: tabular-nums; }
  .is-placeholder { color: var(--color-text-muted); font-weight: var(--fw-medium); font-style: italic; }
  .wizard-preview__label { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); margin-block-end: var(--space-3); }
  @media (max-width: 959px) { .wizard-preview { display: none; } }
  @media (min-width: 960px) { .wizard-preview-inline { display: none; } }

  /* ---------------------------------------------------------------------------
     Paso 4: viaje creado + invitación
     --------------------------------------------------------------------------- */
  .created-stamp { justify-self: start; }
  .invite-code {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-l);
    background: var(--color-surface);
    text-align: center;
  }
  .invite-code__value {
    font-family: var(--font-display);
    font-variation-settings: var(--display-variation);
    font-size: clamp(2rem, 1.4rem + 3vw, 2.8rem);
    font-weight: var(--fw-black);
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
    user-select: all;
  }
  .invite-code .cluster { justify-content: center; }
  .btn--whatsapp { --btn-bg: #25D366; --btn-fg: #0B3B1E; --btn-border: transparent; }
  .btn--whatsapp:hover:not(:disabled) { --btn-bg: #3BE07A; }

  /* ---------------------------------------------------------------------------
     Mis viajes
     --------------------------------------------------------------------------- */
  .trips-page { display: grid; gap: var(--space-6); inline-size: 100%; max-inline-size: 1080px; margin-inline: auto; padding-block: var(--space-4) var(--space-8); }
  .trips-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); }
  .trips-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .trips-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
  .trip-card__countdown {
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-end: var(--space-3);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: rgb(255 248 239 / .9);
    color: var(--c-ink-900);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
  }
  .trip-card .postcard__media { color: var(--c-ink-900); }
  .trip-card--new {
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--space-3);
    min-block-size: 280px;
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-l);
    background: transparent;
    color: var(--color-text);
    text-align: center;
    text-decoration: none;
    transition: background-color var(--dur-base), border-color var(--dur-base);
  }
  .trip-card--new:hover { background: var(--color-surface); border-color: var(--color-text-muted); }
  .trip-card--new__plus {
    display: grid;
    place-items: center;
    inline-size: 56px;
    block-size: 56px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 28px;
    font-weight: var(--fw-bold);
  }

  .empty-state {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-4);
    border-radius: var(--radius-l);
    background: var(--color-surface);
    text-align: center;
  }
  .empty-state__art { inline-size: 160px; max-inline-size: 100%; block-size: auto; }
  .empty-state h2 { font-size: var(--fs-xl); max-inline-size: 20ch; }
  .empty-state p { color: var(--color-text-muted); max-inline-size: 40ch; }
  .empty-state .cluster { justify-content: center; }
  .bottle-bob { animation: bob 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes bob { 50% { transform: translateY(-6px) rotate(-4deg); } }

  /* Código de invitación (unirse) */
  .code-input {
    inline-size: 100%;
    min-block-size: 64px;
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-m);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-display);
    font-variation-settings: var(--display-variation);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
  }
  .code-input::placeholder { color: var(--color-text-muted); opacity: .5; }
  .code-input:focus-visible { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 25%, transparent); }
  .code-input[aria-invalid="true"] { border-color: var(--color-danger); animation: wiggle 400ms var(--ease-out); }
}

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