/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.font-signature {
  font-family: "Dancing Script", cursive;
}

.font-typewriter {
  font-family: "Courier Prime", monospace;
}

/* Onboarding "guided focus": de-emphasize upcoming questions to reduce cognitive
   load. Applied/removed by guided_form_controller. Custom classes (not Tailwind
   utilities) so opacity is set without inline styles (CSP-safe). */
.guided-question {
  transition: opacity 0.3s ease;
}

.guided-question--upcoming {
  opacity: 0.4;
}

.guided-question--active {
  opacity: 1;
}

/* Onboarding: calm staggered text reveal */
@keyframes onboarding-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Onboarding: page-level fade in */
@keyframes onboarding-page-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-onboarding-fade-up            { animation: onboarding-fade-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.animate-onboarding-fade-up-delay-1    { animation: onboarding-fade-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both; }
.animate-onboarding-fade-up-delay-2    { animation: onboarding-fade-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s  both; }
.animate-onboarding-fade-up-delay-3    { animation: onboarding-fade-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s both; }
.animate-onboarding-page-fade          { animation: onboarding-page-fade 0.4s ease-out both; }

/* Onboarding: apertura de la sub-lista dentro de una opción (síntomas, "Otra cosa").
   conditional-field sólo alterna el atributo `hidden`, así que la lista aparecía de golpe
   y no se leía como que se abrió algo — parecía que la pantalla había cambiado sola.
   La animación arranca sola al pasar de display:none a visible, sin JS de por medio.
   0.45s: más lento que el fade de página porque acá el movimiento ES el mensaje. */
@keyframes onboarding-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.onboarding-reveal { animation: onboarding-reveal 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* Commitment typewriter: lime highlighter drawn left→right after each paragraph. */
mark.onboarding-marker {
  color: inherit;
  background-color: transparent;
  background-image: linear-gradient(#E5FC5A, #E5FC5A);
  background-repeat: no-repeat;
  background-position: left 72%;
  background-size: 0% 0.45em;
  padding: 0 0.05em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

mark.onboarding-marker.is-lit {
  background-size: 100% 0.45em;
}

/* Respeta a quien pidió menos movimiento en el sistema operativo. */
@media (prefers-reduced-motion: reduce) {
  .onboarding-reveal { animation: none; }

  mark.onboarding-marker,
  mark.onboarding-marker.is-lit {
    background-size: 100% 0.45em;
    transition: none;
  }
}

/* Onboarding commitment: calmer staggered reveal (longer delays) */
.animate-onboarding-fade-up-calm-1 { animation: onboarding-fade-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s  both; }
.animate-onboarding-fade-up-calm-2 { animation: onboarding-fade-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 1.0s  both; }
.animate-onboarding-fade-up-calm-3 { animation: onboarding-fade-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 1.6s  both; }
.animate-onboarding-fade-up-calm-4 { animation: onboarding-fade-up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 2.2s  both; }
.animate-onboarding-fade-up-calm-5 { animation: onboarding-fade-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 2.75s both; }
.animate-onboarding-fade-up-calm-6 { animation: onboarding-fade-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 3.2s  both; }

/* Commitment poem: line-by-line reveal — 0.25s between lines, +0.45s gap between stanzas */
.animate-commitment-l1  { animation: onboarding-fade-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s  both; }
.animate-commitment-l2  { animation: onboarding-fade-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s both; }
.animate-commitment-l3  { animation: onboarding-fade-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.7s  both; }
.animate-commitment-l4  { animation: onboarding-fade-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.95s both; }
.animate-commitment-l5  { animation: onboarding-fade-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.4s  both; }
.animate-commitment-l6  { animation: onboarding-fade-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.65s both; }
.animate-commitment-l7  { animation: onboarding-fade-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 2.1s  both; }
.animate-commitment-l8  { animation: onboarding-fade-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 2.35s both; }
.animate-commitment-l9  { animation: onboarding-fade-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 2.8s  both; }
.animate-commitment-l10 { animation: onboarding-fade-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 3.25s both; }
.animate-commitment-l11 { animation: onboarding-fade-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 3.6s  both; }

/* Onboarding intro (welcome): slower, calmer reveal - 0.5s between elements */
.animate-onboarding-intro-1 { animation: onboarding-fade-up 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0s both; }
.animate-onboarding-intro-2 { animation: onboarding-fade-up 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both; }
.animate-onboarding-intro-3 { animation: onboarding-fade-up 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) 1.0s both; }
.animate-onboarding-intro-4 { animation: onboarding-fade-up 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 2.0s both; }

@media (prefers-reduced-motion: reduce) {
  .animate-onboarding-fade-up,
  .animate-onboarding-fade-up-delay-1,
  .animate-onboarding-fade-up-delay-2,
  .animate-onboarding-fade-up-delay-3,
  .animate-onboarding-page-fade,
  .animate-onboarding-fade-up-calm-1,
  .animate-onboarding-fade-up-calm-2,
  .animate-onboarding-fade-up-calm-3,
  .animate-onboarding-fade-up-calm-4,
  .animate-onboarding-fade-up-calm-5,
  .animate-onboarding-fade-up-calm-6,
  .animate-commitment-l1,  .animate-commitment-l2,  .animate-commitment-l3,
  .animate-commitment-l4,  .animate-commitment-l5,  .animate-commitment-l6,
  .animate-commitment-l7,  .animate-commitment-l8,  .animate-commitment-l9,
  .animate-commitment-l10, .animate-commitment-l11,
  .animate-onboarding-intro-1,
  .animate-onboarding-intro-2,
  .animate-onboarding-intro-3,
  .animate-onboarding-intro-4 {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Protocol card gradient backgrounds (CSP-safe, no inline styles) */
.action-plan-card-bg-alimentacion {
  background: linear-gradient(135deg, #86b817 0%, #a8d629 100%);
}

.action-plan-card-bg-suplementacion {
  background: linear-gradient(135deg, #065f46 0%, #047857 100%);
}

.action-plan-card-bg-pautas-generales {
  background: linear-gradient(135deg, #28404f 0%, #3d5a6b 100%);
}

.action-plan-card-bg-actividad-fisica {
  background: linear-gradient(135deg, #e5fc5a 0%, #c7e14f 100%);
}

.action-plan-card-bg-default {
  background: linear-gradient(135deg, #86b817 0%, #a8d629 100%);
}

/* Membership edge-to-edge — content continues under status bar / home indicator */
html.membership-edge-to-edge {
  background-color: transparent;
}

html.membership-edge-to-edge body {
  background: transparent;
}

/* Apply to fixed full-page backgrounds (e.g. membership hero) */
.membership-page-background {
  top: calc(-1 * env(safe-area-inset-top, 0px));
  bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
  height: calc(100dvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
}

/* Safe area insets for iOS notch/home indicator - CSP-safe alternative to inline styles */
.pt-safe {
  padding-top: env(safe-area-inset-top);
}

.pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Membership bottom nav — flush to screen bottom; safe-area padding lifts the pill above the home indicator */
.membership-bottom-nav-anchor {
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* VERA overlay: sheet is hidden until JS morphs it out of the FAB */
.vera-overlay-panel {
  visibility: hidden;
  pointer-events: none;
  z-index: 45;
  box-shadow: 0 -12px 40px rgba(40, 64, 79, 0.14);
  overscroll-behavior: none;
}

.vera-overlay-panel.is-dragging {
  user-select: none;
}

/* Rubber-band on the document moves a position:fixed sheet with it on iOS.
   Keep page scrolling at peek/medium, but kill the bounce while VERA is open. */
html.vera-sheet-open {
  overscroll-behavior-y: none;
}

.vera-overlay-panel.is-visible {
  visibility: visible;
  pointer-events: auto;
}

.vera-overlay-panel.is-visible .vera-chat-body {
  padding-bottom: var(--vera-nav-inset, 0px);
}

.vera-overlay-panel.is-peek .vera-chat-body {
  display: none;
}

/* Keep the flex spacer so the close X stays on the right; hide only the CTAs */
.vera-overlay-panel.is-peek .vera-header-actions > * {
  display: none;
}

/* Chat bubbles: round like cards, but keep the DaisyUI tail corner square
   so the pointer attaches cleanly (full radius breaks the join) */
#vera_chat_overlay .chat-start .chat-bubble {
  border-radius: var(--radius-box, 1rem);
  border-end-start-radius: 0;
}

#vera_chat_overlay .chat-end .chat-bubble {
  border-radius: var(--radius-box, 1rem);
  border-end-end-radius: 0;
}

#membership-bottom-nav.is-vera-large .vera-overlay-panel {
  z-index: 60;
  box-shadow: 0 -16px 48px rgba(40, 64, 79, 0.22);
}

#membership-bottom-nav.is-vera-large .vera-chat-body {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
}

#membership-bottom-nav.is-vera-large [data-membership-nav-target="navPill"] {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-vera-overlay-target="fab"] {
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 700ms cubic-bezier(0.4, 0, 0.2, 1),
              width 700ms cubic-bezier(0.4, 0, 0.2, 1),
              min-width 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

#membership-bottom-nav.is-vera-open [data-vera-overlay-target="fab"] {
  opacity: 0;
  width: 0;
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
  transform: scale(0.5);
}

/* While tucking closed: FAB full-size (invisible) in the same layout as when open measures it */
#membership-bottom-nav.is-vera-open.is-vera-tucking [data-vera-overlay-target="fab"] {
  width: 4rem;
  min-width: 4rem;
  opacity: 0;
  transform: none;
  pointer-events: none;
}

#membership-bottom-nav.is-vera-open.is-vera-tucking .membership-nav-cluster {
  gap: 0.75rem;
}

#membership-bottom-nav.is-vera-open .membership-nav-cluster {
  gap: 0;
}

[data-vera-overlay-target="backdrop"] {
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  [data-vera-overlay-target="fab"],
  #membership-bottom-nav.is-vera-open [data-vera-overlay-target="fab"] {
    transition: opacity 150ms ease-out;
    transform: none;
  }

  [data-vera-overlay-target="backdrop"] {
    transition: opacity 150ms ease-out;
  }

  #membership-bottom-nav.is-vera-large [data-membership-nav-target="navPill"] {
    transform: none;
  }
}

/* Journey timeline animations */
@keyframes journey-scale-in {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes journey-slide-right {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes journey-connector-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.animate-journey-scale-in      { animation: journey-scale-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.animate-journey-slide-right   { animation: journey-slide-right 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.animate-journey-fade-up       { animation: onboarding-fade-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.animate-journey-connector-grow { animation: journey-connector-grow 0.4s ease-out both; transform-origin: top; }

@media (prefers-reduced-motion: reduce) {
  .animate-journey-scale-in,
  .animate-journey-slide-right,
  .animate-journey-fade-up,
  .animate-journey-connector-grow {
    animation: none;
    opacity: 1;
    transform: none;
  }
}


/* ── Onboarding dark glassmorphism form card ──────────────────────────────── */

/* Inputs: bottom-border only, white text */
.onboarding-dark-form .input,
.onboarding-dark-form .input-bordered {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.38);
  border-radius: 0;
  color: white;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0.25rem;
  line-height: 1.25rem;
}
.onboarding-dark-form .input:focus,
.onboarding-dark-form .input-bordered:focus {
  outline: none;
  box-shadow: none;
  border-bottom-color: #d4e157;
}
.onboarding-dark-form .input::placeholder,
.onboarding-dark-form .textarea::placeholder {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.onboarding-dark-form .select { font-size: 0.875rem; }
.onboarding-dark-form .select:invalid,
.onboarding-dark-form .select option[value=""] { color: rgba(255, 255, 255, 0.42); }

/* Browser autofill override — prevents white fill injected by :-webkit-autofill */
.onboarding-dark-form .input:-webkit-autofill,
.onboarding-dark-form .input:-webkit-autofill:hover,
.onboarding-dark-form .input:-webkit-autofill:focus,
.onboarding-dark-form .textarea:-webkit-autofill,
.onboarding-dark-form .textarea:-webkit-autofill:hover,
.onboarding-dark-form .textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,0.06) inset;
  box-shadow: 0 0 0 1000px rgba(255,255,255,0.06) inset;
  -webkit-text-fill-color: white;
  border-bottom: 1px solid rgba(255,255,255,0.38) !important;
  border-radius: 0 !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Textarea: start as one line and auto-resize so the bottom rule stays close to the answer. */
.onboarding-dark-form .textarea,
.onboarding-dark-form .textarea-bordered {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.38);
  border-radius: 0;
  color: white;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0.25rem;
  padding-bottom: 0.35rem;
  line-height: 1.25rem;
  resize: none;
  field-sizing: content;
  min-height: 2rem;
  max-height: 12rem;
  overflow-y: auto;
}

/* Mobile: min-height only — fixed 5rem left huge gaps under short answers.
   Autogrow Stimulus controller adjusts height on input without field-sizing. */
@media (max-width: 640px) {
  .onboarding-dark-form .textarea,
  .onboarding-dark-form .textarea-bordered {
    field-sizing: fixed;
    height: auto;
    min-height: 2rem;
    max-height: 12rem;
  }
}
.onboarding-dark-form .textarea:focus,
.onboarding-dark-form .textarea-bordered:focus {
  outline: none;
  box-shadow: none;
  border-bottom-color: #d4e157;
}

/* Select */
.onboarding-dark-form .select,
.onboarding-dark-form .select-bordered {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.38);
  border-radius: 0;
  color: white;
  padding-left: 0;
}
.onboarding-dark-form .select option { color: #1a2e1a; background: white; }

/* Labels and text overrides */
.onboarding-dark-form .label-text { color: rgba(255,255,255,0.9); }
.onboarding-dark-form .label-text-alt { color: rgba(255,255,255,0.6); }
.onboarding-dark-form .text-black { color: white; }
.onboarding-dark-form .text-kiwell-charcoal { color: white; }
.onboarding-dark-form .text-error { color: #fca5a5; }

/* Number stepper value display */
.onboarding-dark-form [data-number-stepper-target="display"] { color: white; }

/* Draft status text */
.onboarding-dark-form [data-form-wizard-target="draftStatus"] { color: rgba(255,255,255,0.55); }

/* Navigation separator */
.onboarding-dark-form .border-white\/20 { border-color: rgba(255,255,255,0.20); }

/* Buttons: lime primary, white outline for inactive/secondary states */
.onboarding-dark-form .btn-primary {
  background: #d4e157;
  border-color: #d4e157;
  color: #1a2e1a;
}
.onboarding-dark-form .btn-primary:hover { background: #cdd94e; border-color: #cdd94e; }

.onboarding-dark-form .btn-outline {
  border-color: rgba(255,255,255,0.55);
  color: white;
  background: transparent;
}
.onboarding-dark-form .btn-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: white;
  color: white;
}

.onboarding-dark-form .btn-sm.rounded-lg {
  border-radius: 0.5rem;
}

/* Birthdate scroll picker (onboarding mobile) —
   Used on the light (bg-base-100) onboarding wizard; colors are dark-on-light
   so items are visible even when no dark background is present. */
.birthdate-scroll-picker__labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.birthdate-scroll-picker__label {
  text-align: center;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: oklch(0.5 0 0 / 60%);
}

.birthdate-scroll-picker__viewport {
  position: relative;
}

.birthdate-scroll-picker__highlight {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 1;
  height: 2.5rem;
  transform: translateY(-50%);
  border-radius: 0.5rem;
  background: oklch(0.25 0 0 / 80%);
  border-top: 1px solid oklch(1 0 0 / 15%);
  border-bottom: 1px solid oklch(1 0 0 / 15%);
  pointer-events: none;
}

.birthdate-scroll-picker__columns {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.birthdate-scroll-picker__column {
  height: 9rem;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  border-radius: 0.75rem;
  background: oklch(0.96 0 0);
  border: 1px solid oklch(0.88 0 0);
  scrollbar-width: none;
}

.birthdate-scroll-picker__column::-webkit-scrollbar {
  display: none;
}

.birthdate-scroll-picker__pad {
  height: 3.25rem;
  flex-shrink: 0;
}

.birthdate-scroll-picker__item {
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  color: oklch(0.55 0 0 / 55%);
  transition: color 0.15s ease, font-size 0.15s ease, font-weight 0.15s ease;
}

.birthdate-scroll-picker__item--selected {
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 700;
  text-shadow: 0 1px 4px oklch(0 0 0 / 40%);
}

/* Single-column number scroll (peso/altura) reuses birthdate visuals.
   Compact drum-style control so two pickers fit naturally on a 390 px screen. */
.birthdate-scroll-picker--single .birthdate-scroll-picker__columns--single {
  grid-template-columns: 1fr;
}

.birthdate-scroll-picker--single .birthdate-scroll-picker__highlight {
  height: 2.5rem;
  left: 50%;
  right: auto;
  width: calc(100% - 0.5rem);
  max-width: 9.5rem;
  transform: translate(-50%, -50%);
}

.birthdate-scroll-picker--single .birthdate-scroll-picker__column {
  max-width: 10rem;
  margin-inline: auto;
  height: 7rem;
}

.birthdate-scroll-picker--single .birthdate-scroll-picker__pad {
  height: 2.25rem;
}

.birthdate-scroll-picker--single .birthdate-scroll-picker__item {
  height: 2.5rem;
  font-size: 1rem;
}

/* Pill checkbox groups */
.onboarding-dark-form .onboarding-pill-group {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.onboarding-dark-form .onboarding-pill-group label {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 9999px;
  padding: 0.375rem 0.875rem;
  color: white;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  gap: 0;
}
.onboarding-dark-form .onboarding-pill-group label:has(.checkbox:checked) {
  background: #d4e157;
  color: #1a2e1a;
  border-color: #d4e157;
}
.onboarding-dark-form .onboarding-pill-group .checkbox { display: none; }
.onboarding-dark-form .onboarding-pill-group .label-text {
  color: inherit;
  font-size: 0.875rem;
  font-weight: 400;
}

/* Fitness questionnaire modal — light pills on white modal-box */
.fitness-questionnaire-modal .onboarding-pill-group {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.fitness-questionnaire-modal .onboarding-pill-group label {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  padding: 0.375rem 0.875rem;
  color: #1a2e1a;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  gap: 0;
}
.fitness-questionnaire-modal .onboarding-pill-group label:has(.checkbox:checked) {
  background: #d4e157;
  color: #1a2e1a;
  border-color: #d4e157;
}
.fitness-questionnaire-modal .onboarding-pill-group .checkbox { display: none; }
.fitness-questionnaire-modal .onboarding-pill-group .label-text {
  color: inherit;
  font-size: 0.875rem;
  font-weight: 400;
}

/* Fitness questionnaire modal — toggle buttons (onboarding-style, light background) */
.fitness-questionnaire-modal .btn-primary {
  background: #d4e157;
  border-color: #d4e157;
  color: #1a2e1a;
}
.fitness-questionnaire-modal .btn-primary:hover {
  background: #cdd94e;
  border-color: #cdd94e;
}
.fitness-questionnaire-modal .btn-outline {
  border-color: #e5e7eb;
  color: #1a2e1a;
  background: #f9fafb;
}
.fitness-questionnaire-modal .btn-outline:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #1a2e1a;
}

/* Collapsible checkbox group panels */
.onboarding-dark-form .collapse {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.20);
}
.onboarding-dark-form .collapse-title { color: white; }

/* Interstitial encouraging screen */
.onboarding-dark-form .text-kiwell-charcoal\/65 { color: rgba(255,255,255,0.65); }

/* File input */
.onboarding-dark-form .file-input { color: rgba(255,255,255,0.8); }
.onboarding-dark-form .file-input::file-selector-button {
  background: rgba(255,255,255,0.15);
  color: white;
  border-color: rgba(255,255,255,0.3);
}

/* Phone input select */
.onboarding-dark-form .select.w-28 { padding-left: 0; }

/* Voice recorder — shared (onboarding + professional notes) */
.voice-recorder-mic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border-radius: 9999px;
  border: 1.5px solid #86b817;
  background: rgba(134, 184, 23, 0.15);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.voice-recorder-mic-btn:hover {
  background: rgba(134, 184, 23, 0.28);
  border-color: #9acd32;
}
.voice-recorder-preview-panel {
  background: rgba(243, 244, 246, 0.96);
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
  width: 100%;
}
.voice-recorder-status {
  font-size: 0.75rem;
  line-height: 1.35;
  margin-top: 0.375rem;
}
.voice-recorder-status-default {
  color: #6b7280;
}
.voice-recorder-status-error {
  color: #dc2626;
}
.voice-recorder-player {
  opacity: 1;
}

/* Sign-up page: dark gradient overlay over background photo */
.sign-up-overlay {
  background: linear-gradient(180deg, rgba(13,26,38,0.45) 0%, rgba(13,26,38,0.1) 28%, rgba(13,26,38,0.55) 55%, rgba(13,26,38,0.88) 100%);
}

/* Fondo del <body> en las pantallas oscuras del onboarding (KIW-1269).
   Mismo color base que el gradiente de .sign-up-overlay de acá arriba, y vive al lado
   para que no puedan separarse: el webview pinta este color en el overscroll y debajo del
   contenido, así que si no coincide con el fondo real aparece una franja de otro color al
   final de la página. Clase propia y no una utility arbitraria de Tailwind porque el valor
   lo emite OnboardingVisualsHelper desde Ruby, donde el scanner de Tailwind no llega. */
.onboarding-surface-dark {
  background-color: #0D1A26;
}

/* Sign-up page: Fraunces italic title with WONK axis (design system variable font) */
.signup-title {
  font-family: var(--font-fraunces, "Fraunces", ui-serif, serif);
  font-style: italic;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

/* ── Unified auth screen (sign-in / sign-up) ─────────────────────────────── */

/* Glass card with subtle top illumination */
.auth-glass-card {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 8px 48px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 60px rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}

/* Suplementación page — warm ambient layer (scoped, subtle) */
.suplementacion-warm {
  position: relative;
}

.suplementacion-warm::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 80% 8%, rgba(251, 191, 130, 0.14) 0%, transparent 60%),
    radial-gradient(800px 700px at 15% 90%, rgba(244, 164, 96, 0.08) 0%, transparent 62%);
}

.text-supplement-heading {
  color: #3B352E;
}

/* Supplement slot cards — patient 3D coverflow carousel + glass panel */
.supplement-carousel {
  position: relative;
  perspective: 1100px;
  -webkit-perspective: 1100px;
}

.supplement-carousel__viewport {
  overflow: hidden;
  overflow-y: visible;
  touch-action: pan-y pinch-zoom;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.supplement-carousel__stage {
  position: relative;
  width: 100%;
  min-height: max(20rem, var(--slot-card-min-height, 20rem));
  margin-left: auto;
  margin-right: auto;
  transform-style: preserve-3d;
  transition: height 0.35s ease;
}

.supplement-carousel__card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 84vw;
  max-width: 22rem;
  min-height: max(20rem, var(--slot-card-min-height, 20rem));
  transform: translateX(-50%);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease;
  cursor: pointer;
}

@media (min-width: 768px) {
  .supplement-carousel__card {
    width: min(22rem, 84vw);
  }
}

.supplement-carousel__card[aria-hidden="false"] {
  cursor: default;
}

.supplement-carousel__nav {
  position: absolute;
  top: 50%;
  z-index: 40;
  transform: translateY(-50%);
}

.supplement-carousel__nav--prev {
  left: -0.25rem;
}

.supplement-carousel__nav--next {
  right: -0.25rem;
}

.supplement-carousel__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.35);
  transition: width 0.2s ease, background-color 0.2s ease;
}

.supplement-carousel__dot--active {
  width: 1.5rem;
  background-color: rgba(255, 255, 255, 0.9);
}

@media (prefers-reduced-motion: reduce) {
  .supplement-carousel__card {
    transition: none;
  }

  .supplement-carousel__dot {
    transition: none;
  }
}

.supplement-slot-overlay {
  background: linear-gradient(
    180deg,
    rgba(30, 51, 64, 0.12) 0%,
    rgba(30, 51, 64, 0.04) 35%,
    rgba(30, 51, 64, 0.38) 65%,
    rgba(30, 51, 64, 0.62) 100%
  );
}

/* Bright backgrounds (sunrise / midday sun) wash out the white instructional
   text, so darken the top of the gradient where the title and tip sit. */
.supplement-slot-overlay--morning,
.supplement-slot-overlay--midday {
  background: linear-gradient(
    180deg,
    rgba(30, 51, 64, 0.45) 0%,
    rgba(30, 51, 64, 0.28) 30%,
    rgba(30, 51, 64, 0.34) 55%,
    rgba(30, 51, 64, 0.62) 100%
  );
}

.supplement-slot-glass {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}

/* VERA week plan card — higher contrast on hero backgrounds */
.week-plan-card--on-dark {
  background: rgba(30, 51, 64, 0.58);
  border-color: rgba(255, 255, 255, 0.22);
}

.week-plan-card--on-light {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 36px rgba(40, 64, 79, 0.12);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
}

/* Membership hero surfaces — opaque cards and legible controls over photo backgrounds */
.membership-hero-card {
  border-radius: 1rem;
  overflow: hidden;
}

.membership-hero-card--on-dark {
  background: rgba(30, 51, 64, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

/*
 * Night / dark photo hero: glass components that hardcode charcoal text
 * (text-kiwell-charcoal, text-base-content, etc.) become light automatically.
 * Scope is the membership hero surface wrapper — do not change individual screens.
 * Lime CTAs keep charcoal text (excluded via .btn / bg-kiwell-lime).
 */
.membership-hero-surface[data-on-light="false"] :is(
  .glass-luminous,
  .glass-light,
  .glass-medium,
  .glass-heavy,
  .supplement-slot-glass
) {
  color: rgba(255, 255, 255, 0.92);
}

.membership-hero-surface[data-on-light="false"] :is(
  .glass-luminous,
  .glass-light,
  .glass-medium,
  .glass-heavy,
  .supplement-slot-glass
) :is(
  [class*="text-kiwell-charcoal"],
  [class*="text-base-content"],
  [class*="text-kiwell-slate"],
  .label-text
):not(.btn):not([class*="bg-kiwell-lime"]) {
  color: rgba(255, 255, 255, 0.92) !important;
}

.membership-hero-surface[data-on-light="false"] :is(
  .glass-luminous,
  .glass-light,
  .glass-medium,
  .glass-heavy,
  .supplement-slot-glass
) :is(
  [class*="text-kiwell-charcoal/"],
  [class*="text-base-content/"],
  [class*="text-kiwell-slate/"]
):not(.btn):not([class*="bg-kiwell-lime"]) {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Opaque brand cards / lime icon tiles on white — keep charcoal labels inside dark glass heroes */
.supplement-brand-card {
  color: var(--color-kiwell-charcoal);
}

.membership-hero-surface[data-on-light="false"] .supplement-slot-glass .supplement-brand-card,
.membership-hero-surface[data-on-light="false"] .supplement-slot-glass .supplement-brand-card :is(
  [class*="text-kiwell-charcoal"],
  [class*="text-base-content"],
  [class*="text-kiwell-slate"],
  .text-accent
) {
  color: var(--color-kiwell-charcoal) !important;
}

/* Lime icon chips (wearables benefits, etc.): charcoal icons must stay readable on lime */
.membership-hero-surface[data-on-light="false"] .supplement-slot-glass [class*="bg-kiwell-lime"] :is(
  [class*="text-kiwell-charcoal"],
  [class*="stroke-kiwell-charcoal"],
  svg,
  path
) {
  color: var(--color-kiwell-charcoal) !important;
  stroke: var(--color-kiwell-charcoal) !important;
}

.membership-hero-card--on-dark .btn-outline {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
}

.membership-hero-card--on-dark .btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
}

.membership-hero-card--on-dark .btn-ghost {
  color: rgba(255, 255, 255, 0.85);
}

.membership-hero-card--on-dark .btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.membership-hero-card--on-dark .badge-ghost {
  border-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.1);
}

.membership-hero-card--on-light {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 36px rgba(40, 64, 79, 0.12);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
}

.membership-hero-input {
  width: 100%;
  min-height: 6rem;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
}

.membership-hero-input--on-dark {
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}

.membership-hero-input--on-dark::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.membership-hero-input--on-light {
  background-color: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(40, 64, 79, 0.18);
  color: var(--color-kiwell-charcoal);
}

.membership-hero-input--on-light::placeholder {
  color: rgba(40, 64, 79, 0.5);
}

.membership-hero-btn-ghost {
  display: flex;
  width: 100%;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  border-width: 1px;
  border-style: solid;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.membership-hero-btn-ghost--on-dark {
  border-color: rgba(255, 255, 255, 0.55);
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.membership-hero-btn-ghost--on-dark:hover {
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.membership-hero-btn-ghost--on-light {
  border-color: rgba(40, 64, 79, 0.35);
  background-color: rgba(255, 255, 255, 0.55);
  color: var(--color-kiwell-charcoal);
}

.membership-hero-btn-ghost--on-light:hover {
  background-color: rgba(255, 255, 255, 0.75);
  color: var(--color-kiwell-charcoal);
}

.membership-hero-link-on-photo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.membership-hero-link-on-photo--on-dark {
  background-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

.membership-hero-link-on-photo--on-dark:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.membership-hero-link-on-photo--on-light {
  background-color: rgba(255, 255, 255, 0.55);
  color: var(--color-kiwell-charcoal);
}

.membership-hero-link-on-photo--on-light:hover {
  background-color: rgba(255, 255, 255, 0.75);
  color: var(--color-kiwell-charcoal);
}

.membership-hero-surface .btn-ghost.text-base-content\/60,
.membership-hero-surface .btn-ghost.text-base-content\/50 {
  color: inherit;
}

.membership-dudas-channel-card--muted {
  background-color: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(40, 64, 79, 0.12) !important;
}

.membership-dudas-channel-card--muted [data-color-desc] {
  color: rgba(40, 64, 79, 0.8) !important;
}

.supplement-slot-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.supplement-slot-card__inner {
  position: relative;
  z-index: 10;
}

/* Hábitos Esenciales — warm ambient layer + image cards */
.pautas-generales-warm {
  position: relative;
}

.pautas-generales-warm::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 75% 10%, rgba(80, 121, 95, 0.12) 0%, transparent 60%),
    radial-gradient(800px 700px at 20% 92%, rgba(240, 237, 232, 0.55) 0%, transparent 62%);
}

.text-habits-heading {
  color: #2D4838;
}

/* Actividad Física / Hábitos / Suplementación — dark cover + light header chrome */
.actividad-fisica-dark,
.pautas-generales-dark,
.suplementacion-dark {
  position: relative;
}

.actividad-fisica-dark .breadcrumbs :is(a, span),
.pautas-generales-dark .breadcrumbs :is(a, span),
.suplementacion-dark .breadcrumbs :is(a, span) {
  color: rgba(255, 255, 255, 0.85);
}

.actividad-fisica-dark .breadcrumbs a:hover,
.pautas-generales-dark .breadcrumbs a:hover,
.suplementacion-dark .breadcrumbs a:hover {
  color: white;
}

.actividad-fisica-dark .breadcrumbs .protocol-breadcrumb-current,
.pautas-generales-dark .breadcrumbs .protocol-breadcrumb-current,
.suplementacion-dark .breadcrumbs .protocol-breadcrumb-current {
  color: rgba(255, 255, 255, 0.75) !important;
}

.actividad-fisica-dark .breadcrumbs > ul > li,
.pautas-generales-dark .breadcrumbs > ul > li,
.suplementacion-dark .breadcrumbs > ul > li {
  color: rgba(255, 255, 255, 0.6);
}

.actividad-fisica-dark .breadcrumbs > ul > li + li::before,
.pautas-generales-dark .breadcrumbs > ul > li + li::before,
.suplementacion-dark .breadcrumbs > ul > li + li::before {
  border-color: rgba(255, 255, 255, 0.55) !important;
  opacity: 0.85;
}

.text-actividad-heading {
  color: white;
}

/* Mobile navbar over dark protocol heroes (SERO sidebar layout).
   Navbar is a sibling of main, not inside .actividad-fisica-dark — use :has(). */
.drawer-content:has(.actividad-fisica-dark) > .navbar,
.drawer-content:has(.pautas-generales-dark) > .navbar,
.drawer-content:has(.suplementacion-dark) > .navbar {
  background-color: rgba(0, 0, 0, 0.55);
  border-bottom-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.drawer-content:has(.actividad-fisica-dark) > .navbar a,
.drawer-content:has(.pautas-generales-dark) > .navbar a,
.drawer-content:has(.suplementacion-dark) > .navbar a,
.drawer-content:has(.actividad-fisica-dark) > .navbar label,
.drawer-content:has(.pautas-generales-dark) > .navbar label,
.drawer-content:has(.suplementacion-dark) > .navbar label {
  color: rgba(255, 255, 255, 0.9);
}

.drawer-content:has(.actividad-fisica-dark) > .navbar svg,
.drawer-content:has(.pautas-generales-dark) > .navbar svg,
.drawer-content:has(.suplementacion-dark) > .navbar svg {
  color: rgba(255, 255, 255, 0.9);
  stroke: currentColor;
}

.drawer-content:has(.actividad-fisica-dark) > .navbar a:hover,
.drawer-content:has(.pautas-generales-dark) > .navbar a:hover,
.drawer-content:has(.suplementacion-dark) > .navbar a:hover,
.drawer-content:has(.actividad-fisica-dark) > .navbar label:hover,
.drawer-content:has(.pautas-generales-dark) > .navbar label:hover,
.drawer-content:has(.suplementacion-dark) > .navbar label:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: white;
}

.drawer-content:has(.actividad-fisica-dark) > .navbar img[alt="Kiwell"],
.drawer-content:has(.pautas-generales-dark) > .navbar img[alt="Kiwell"],
.drawer-content:has(.suplementacion-dark) > .navbar img[alt="Kiwell"] {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.actividad-fisica-dark .btn-circle.btn-ghost,
.pautas-generales-dark .btn-circle.btn-ghost,
.suplementacion-dark .btn-circle.btn-ghost {
  color: white;
}

.actividad-fisica-dark .btn-circle.btn-ghost svg,
.pautas-generales-dark .btn-circle.btn-ghost svg,
.suplementacion-dark .btn-circle.btn-ghost svg {
  color: white;
  stroke: currentColor;
}

.actividad-fisica-dark .btn-circle.btn-ghost:hover,
.pautas-generales-dark .btn-circle.btn-ghost:hover,
.suplementacion-dark .btn-circle.btn-ghost:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.12);
}

.actividad-fisica-dark .protocol-sources-footnote > div,
.pautas-generales-dark .protocol-sources-footnote > div,
.suplementacion-dark .protocol-sources-footnote > div {
  border-color: rgba(255, 255, 255, 0.25);
}

.actividad-fisica-dark .protocol-sources-footnote a,
.pautas-generales-dark .protocol-sources-footnote a,
.suplementacion-dark .protocol-sources-footnote a {
  color: rgba(255, 255, 255, 0.75);
}

.actividad-fisica-dark .protocol-sources-footnote a:hover,
.pautas-generales-dark .protocol-sources-footnote a:hover,
.suplementacion-dark .protocol-sources-footnote a:hover {
  color: white;
}

.actividad-fisica-dark .protocol-sources-footnote svg,
.pautas-generales-dark .protocol-sources-footnote svg,
.suplementacion-dark .protocol-sources-footnote svg {
  color: rgba(255, 255, 255, 0.75);
}

.actividad-fisica-dark .protocol-sources-footnote .protocol-ai-disclaimer,
.pautas-generales-dark .protocol-sources-footnote .protocol-ai-disclaimer,
.suplementacion-dark .protocol-sources-footnote .protocol-ai-disclaimer {
  color: rgba(255, 255, 255, 0.75);
}

.actividad-fisica-dark .protocol-sources-footnote .protocol-ai-disclaimer svg,
.pautas-generales-dark .protocol-sources-footnote .protocol-ai-disclaimer svg,
.suplementacion-dark .protocol-sources-footnote .protocol-ai-disclaimer svg {
  color: rgba(255, 255, 255, 0.75);
  stroke: currentColor;
}

/* Membership menu — Laboratorio accordion matches transparent row background */
.membership-laboratorio-menu,
.membership-laboratorio-menu > input[type="checkbox"] {
  background-color: transparent;
}
.membership-laboratorio-menu:has(> input[type="checkbox"]:checked),
.membership-laboratorio-menu > input[type="checkbox"]:checked {
  background-color: transparent;
}

/* Chevrons de filas del menú membresía — tono uniforme (punto medio entre /40 y el arrow del collapse) */
.membership-menu-row-chevron {
  color: color-mix(in srgb, var(--color-base-content) 50%, transparent);
}

.membership-laboratorio-menu.collapse-arrow > .collapse-title:after {
  color: color-mix(in srgb, var(--color-base-content) 50%, transparent);
}

/* Insight panels — visible expand chevrons on dark glass */
.membership-insight-panel .membership-insight-accordion.collapse-arrow > .collapse-title:after,
.membership-insight-panel .membership-insight-subsection.collapse-arrow > .collapse-title:after {
  color: rgba(255, 255, 255, 0.88);
  opacity: 1;
}

.membership-insight-subsection.collapse-arrow > .collapse-title {
  padding-right: 2.5rem;
}

/* Membership bottom nav — warm frosted glass (same look on all hero scenarios) */
.membership-nav-glass {
  background-color: color-mix(in srgb, white 68%, transparent);
  border: 1px solid color-mix(in srgb, white 72%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 10px 36px color-mix(in srgb, #f5e6c8 25%, transparent);
}

/* KIW: hide the bottom nav pill while the member is typing in a text field
   elsewhere on the page (onboarding wizard, protocol forms, etc.) — on a
   short phone screen the pill competes with the keyboard for the same
   handful of visible rows. Mirrors is-vera-large's navPill treatment;
   the .vera-overlay-panel keeps working normally since VERA's own composer
   drives detentValue instead of this class. */
#membership-bottom-nav.is-typing [data-membership-nav-target="navPill"] {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  #membership-bottom-nav.is-typing [data-membership-nav-target="navPill"] {
    transition: opacity 150ms ease-out;
    transform: none;
  }
}

/* Blurred hero surfaces — stronger nav glass so the pill stays legible over busy photos */
.membership-hero-blurred-surface .membership-nav-glass {
  background-color: color-mix(in srgb, white 82%, transparent);
  border: 1px solid color-mix(in srgb, white 88%, transparent);
  box-shadow:
    0 12px 40px color-mix(in srgb, #1e3340 16%, transparent),
    0 2px 10px color-mix(in srgb, black 12%, transparent);
}

/* Protocol hierarchy guide (Trini video) — compact mobile sheet with dismiss margins */
.protocol-hierarchy-modal.modal-bottom .modal-box {
  margin-top: 2.5rem;
  margin-right: 0.75rem;
  max-height: calc(100dvh - 3rem);
}

@media (min-width: 640px) {
  .protocol-hierarchy-modal.sm\:modal-middle .modal-box {
    margin-top: 0;
    margin-right: auto;
    max-height: calc(100vh - 5em);
  }
}

/* Dudas modal — mismo frosted glass que el bottom nav */
.membership-dudas-modal-box {
  background-color: color-mix(in srgb, white 68%, transparent) !important;
  border: 1px solid color-mix(in srgb, white 72%, transparent) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 10px 36px color-mix(in srgb, #f5e6c8 25%, transparent);
}

/* Hero plan header icons on dark backgrounds — see matching rules in tailwind/application.css */
.membership-hero-icon-actions .btn-circle.btn-ghost,
.membership-hero-icon-actions .btn-ghost {
  color: rgb(255 255 255 / 0.85) !important;
}

.membership-hero-icon-actions .btn-ghost svg,
.membership-hero-icon-actions .btn-ghost svg path {
  color: rgb(255 255 255 / 0.85) !important;
  stroke: rgb(255 255 255 / 0.85) !important;
}

.membership-hero-icon-actions .btn-ghost:hover,
.membership-hero-icon-actions .btn-ghost:hover svg,
.membership-hero-icon-actions .btn-ghost:hover svg path {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Membership header — flat light bar, hides on scroll */
.membership-header {
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(40, 64, 79, 0.08);
  transition: transform 0.3s ease, opacity 0.25s ease;
}

.membership-header--hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.membership-header__bar {
  display: grid;
  grid-template-columns: 2.75rem 1fr 2.75rem;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.375rem 0;
}

.membership-header__slot {
  display: flex;
  align-items: center;
}

.membership-header__slot--start {
  justify-content: flex-start;
}

.membership-header__slot--center {
  justify-content: center;
  min-width: 0;
}

.membership-header__slot--end {
  justify-content: flex-end;
}

.membership-header__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-kiwell-charcoal);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.membership-header__icon-btn:active {
  transform: scale(0.95);
}

.membership-header__icon-btn svg,
.membership-header__icon-btn svg path {
  color: var(--color-kiwell-charcoal) !important;
  stroke: var(--color-kiwell-charcoal) !important;
}

.membership-header__icon-btn:hover {
  background-color: rgba(40, 64, 79, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .membership-header {
    transition: none;
  }
}

/* Membership header sobre fondo fotográfico (home wearables / preview) */
.membership-header--on-media {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.membership-header--on-media-light .membership-header__icon-btn,
.membership-header--on-media-light .membership-header__icon-btn svg,
.membership-header--on-media-light .membership-header__icon-btn svg path {
  color: #fff !important;
  stroke: #fff !important;
}

.membership-header--on-media-light .membership-header__icon-btn:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.membership-header--on-media-dark .membership-header__icon-btn,
.membership-header--on-media-dark .membership-header__icon-btn svg,
.membership-header--on-media-dark .membership-header__icon-btn svg path {
  color: var(--color-kiwell-charcoal) !important;
  stroke: var(--color-kiwell-charcoal) !important;
}

.membership-header--on-media-dark .membership-header__icon-btn:hover {
  background-color: rgba(40, 64, 79, 0.08);
}

/* Widget de protocolos sobre fondo oscuro.
   Panel may be a direct child (lab journey) or nested inside .protocol-status-bar (home widget + addon). */
.protocol-status-bar--on-media > .bg-base-100,
.protocol-status-bar--on-media .protocol-status-bar__panel.bg-base-100,
.protocol-status-bar--on-media .protocol-status-bar__panel,
.membership-insight-panel > .bg-base-100 {
  background: rgba(0, 0, 0, 0.3) !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(12px);
}

/* Indicadores — insight accordions darker than light stats card (mediodia) */
.membership-hero-surface[data-on-light="true"] .membership-insight-panel > .bg-base-100 {
  background: rgba(30, 51, 64, 0.84);
  border-color: rgba(255, 255, 255, 0.16);
}

/* Indicadores — insight accordions deeper than stats glass (noche / mañana) */
.membership-hero-surface[data-on-light="false"] .membership-insight-panel > .bg-base-100 {
  background: rgba(0, 0, 0, 0.38);
  border-color: rgba(255, 255, 255, 0.18);
}

.protocol-status-bar--on-media [class*="ring-offset-base-100"] {
  --tw-ring-offset-color: transparent;
}

.protocol-status-bar--on-media .text-base-content,
.membership-insight-panel .text-base-content {
  color: rgba(255, 255, 255, 0.9);
}

.protocol-status-bar--on-media .text-base-content\/50,
.membership-insight-panel .text-base-content\/50 {
  color: rgba(255, 255, 255, 0.55);
}

.protocol-status-bar--on-media .bg-base-200,
.membership-insight-panel .bg-base-200 {
  background-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.75);
}

.protocol-status-bar--on-media .ring-base-300,
.membership-insight-panel .ring-base-300 {
  --tw-ring-color: rgba(255, 255, 255, 0.25);
}

.protocol-status-bar--on-media .bg-base-300,
.membership-insight-panel .bg-base-300 {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Onboarding invite strip hanging under the protocols widget.
   Readable on both light and dark hero photos (time-of-day backgrounds). */
.protocol-status-bar__addon {
  background: rgba(217, 243, 87, 0.45);
  border-color: rgba(40, 64, 79, 0.15);
}

.protocol-status-bar__addon-text {
  color: rgba(40, 64, 79, 0.92);
}

/* Dark hero (noche / mañana): white text on soft lime glass */
.protocol-status-bar--on-media .protocol-status-bar__addon,
.membership-hero-surface[data-on-light="false"] .protocol-status-bar__addon {
  background: rgba(217, 243, 87, 0.28);
  border-color: rgba(255, 255, 255, 0.22);
}

.protocol-status-bar--on-media .protocol-status-bar__addon-text,
.membership-hero-surface[data-on-light="false"] .protocol-status-bar__addon-text {
  color: rgba(255, 255, 255, 0.95);
}

/* Light hero (mediodía): charcoal text on stronger lime */
.membership-hero-surface[data-on-light="true"] .protocol-status-bar__addon {
  background: rgba(217, 243, 87, 0.55);
  border-color: rgba(40, 64, 79, 0.18);
}

.membership-hero-surface[data-on-light="true"] .protocol-status-bar__addon-text {
  color: rgba(40, 64, 79, 0.92);
}

/* Plan page cards grid (may sit on dark photo without --on-media wrapper) */
.protocol-status-bar__addon--on-dark {
  background: rgba(217, 243, 87, 0.28);
  border-color: rgba(255, 255, 255, 0.22);
}

.protocol-status-bar__addon--on-dark .protocol-status-bar__addon-text {
  color: rgba(255, 255, 255, 0.95);
}

.protocol-full-bleed {
  width: 95vw;
  max-width: 95vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* Full-page protocol cover — fisherman visible near top on mobile */
.protocol-section-bg--pautas-generales .protocol-section-bg__image {
  object-position: 82% 92%;
}

@media (min-width: 768px) {
  .protocol-section-bg--pautas-generales .protocol-section-bg__image {
    object-position: 76% 82%;
  }
}

/* Suplementación — pill stack visible al abrir la pantalla */
.protocol-section-bg--suplementacion .protocol-section-bg__image {
  object-position: center 82%;
}

@media (min-width: 768px) {
  .protocol-section-bg--suplementacion .protocol-section-bg__image {
    object-position: center 72%;
  }
}

.essential-habits-stack {
  display: flex;
  flex-direction: column;
  background-color: #1e3340;
  border-radius: 1.5rem;
}

.essential-habits-stack .essential-habit-card--stacked:not(:first-child),
.essential-habits-stack .essential-habits-activity-teaser {
  margin-top: -0.5rem;
}

.essential-habits-activity-teaser {
  position: relative;
  z-index: 11;
  width: 100%;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.55),
    0 -5px 14px rgba(255, 255, 255, 0.12);
}

.essential-habit-card--stacked {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem 1.5rem 0 0;
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.55),
    0 -5px 14px rgba(255, 255, 255, 0.12);
}

.essential-habit-card--stacked.essential-habit-card--stack-last {
  border-radius: 1.5rem;
}

.essential-habit-card--z-1 { z-index: 1; }
.essential-habit-card--z-2 { z-index: 2; }
.essential-habit-card--z-3 { z-index: 3; }
.essential-habit-card--z-4 { z-index: 4; }
.essential-habit-card--z-5 { z-index: 5; }
.essential-habit-card--z-6 { z-index: 6; }
.essential-habit-card--z-7 { z-index: 7; }
.essential-habit-card--z-8 { z-index: 8; }
.essential-habit-card--z-9 { z-index: 9; }
.essential-habit-card--z-10 { z-index: 10; }

.essential-habit-card--stacked.essential-habit-card--expanded {
  z-index: 50;
  overflow: visible;
  padding-bottom: 0.5rem;
}

.essential-habits-stack:has(.essential-habit-card--expanded)
  .essential-habit-card--stacked:not(.essential-habit-card--expanded) {
  margin-top: 0;
}

.essential-habit-card {
  min-height: 6.3rem;
}

.essential-habit-card__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.essential-habit-card__panel-inner {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.55s ease,
    transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 0.7s;
}

.essential-habit-card__panel--open {
  grid-template-rows: 1fr;
}

.essential-habit-card__panel--open .essential-habit-card__panel-inner {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity 0.55s ease 0.15s,
    transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s,
    visibility 0s;
}

.wearable-context-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wearable-context-panel-inner {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.6s ease,
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 0.7s;
}

.wearable-context-panel--open {
  grid-template-rows: 1fr;
}

.wearable-context-panel--open .wearable-context-panel-inner {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s ease 0.15s,
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s,
    visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .essential-habit-card__panel,
  .essential-habit-card__panel-inner,
  .wearable-context-panel,
  .wearable-context-panel-inner {
    transition: none;
  }

  .essential-habits-stack .essential-habit-card--stacked,
  .essential-habits-stack .essential-habits-activity-teaser {
    animation: none;
  }
}

/* Wallet-style stagger on first paint of the essential habits stack */
@keyframes essential-habit-stack-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .essential-habits-stack .essential-habit-card--stacked,
  .essential-habits-stack .essential-habits-activity-teaser {
    animation: essential-habit-stack-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .essential-habits-stack .essential-habit-card--z-1 { animation-delay: 0ms; }
  .essential-habits-stack .essential-habit-card--z-2 { animation-delay: 55ms; }
  .essential-habits-stack .essential-habit-card--z-3 { animation-delay: 110ms; }
  .essential-habits-stack .essential-habit-card--z-4 { animation-delay: 165ms; }
  .essential-habits-stack .essential-habit-card--z-5 { animation-delay: 220ms; }
  .essential-habits-stack .essential-habit-card--z-6 { animation-delay: 275ms; }
  .essential-habits-stack .essential-habit-card--z-7 { animation-delay: 330ms; }
  .essential-habits-stack .essential-habit-card--z-8 { animation-delay: 385ms; }
  .essential-habits-stack .essential-habit-card--z-9 { animation-delay: 440ms; }
  .essential-habits-stack .essential-habit-card--z-10 { animation-delay: 495ms; }
  .essential-habits-stack .essential-habits-activity-teaser { animation-delay: 550ms; }
}

.essential-habit-card--stacked .essential-habit-card__inner {
  min-height: 6.3rem;
}

.essential-habit-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}

.essential-habit-card__inner {
  position: relative;
  z-index: 10;
}

.essential-habit-overlay {
  background: linear-gradient(
    180deg,
    rgba(30, 51, 64, 0.5) 0%,
    rgba(30, 51, 64, 0.4) 35%,
    rgba(30, 51, 64, 0.55) 65%,
    rgba(30, 51, 64, 0.78) 100%
  );
}

.essential-habit-overlay--bright {
  background: linear-gradient(
    180deg,
    rgba(30, 51, 64, 0.62) 0%,
    rgba(30, 51, 64, 0.52) 30%,
    rgba(30, 51, 64, 0.58) 55%,
    rgba(30, 51, 64, 0.78) 100%
  );
}

.essential-habit-overlay--light {
  background: linear-gradient(
    180deg,
    rgba(30, 51, 64, 0.08) 0%,
    rgba(30, 51, 64, 0.05) 45%,
    rgba(30, 51, 64, 0.12) 100%
  );
}

/* Frase ambiental del hero: va suelta sobre la foto, sin card. El escenario elige el
   color del texto mirando la parte de arriba de la imagen, pero el bloque ahora vive
   más abajo, donde la foto puede tener un árbol, el mar o el pasto. El halo lo despega
   del fondo sin encerrarlo en una superficie. */
.hero-ambient-text--on-light {
  text-shadow:
    0 1px 14px rgba(255, 255, 255, 0.95),
    0 0 30px rgba(255, 255, 255, 0.75);
}

.hero-ambient-text--on-dark {
  text-shadow:
    0 1px 12px rgba(30, 51, 64, 0.8),
    0 0 28px rgba(30, 51, 64, 0.6);
}

/* Segmented toggle track: Crear cuenta / Ya tengo cuenta */
.auth-tab-track {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}

.auth-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1 1 0%;
  padding: 0.5rem 0.25rem;
  border-radius: 0.75rem;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    transform 0.15s ease,
    backdrop-filter 0.25s ease;
}
@media (min-width: 768px) {
  .auth-tab {
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
  }
}
.auth-tab:hover:not(.auth-tab-active) {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
}
.auth-tab:active { transform: scale(0.98); }
.auth-tab:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}
.auth-tab-active,
.auth-tab-active:hover {
  background: linear-gradient(
    180deg,
    rgba(40, 64, 79, 0.38) 0%,
    rgba(40, 64, 79, 0.22) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-weight: 600;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    inset 0 0 32px rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
}

/* Auth submit — pill CTA (explicit radius; input[type=submit] ignores DaisyUI token) */
.auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.875rem 1.5rem;
  line-height: 1.25;
  border-radius: 9999px;
}

/* Auth form field error state (signup validation) */
.auth-field-input-error {
  border-color: #EF5350 !important;
}
.auth-phone-row-error {
  border-color: #EF5350 !important;
}

/* Accordion panels: smooth height via grid-template-rows 0fr -> 1fr */
.auth-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.auth-panel-inner {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.3s ease,
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 0.45s;
}
.auth-panel-open { grid-template-rows: 1fr; }
.auth-panel-open .auth-panel-inner {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity 0.35s ease 0.12s,
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s,
    visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .auth-panel,
  .auth-panel-inner,
  .auth-tab {
    transition: none;
  }
}

/* Protocol welcome intro (suplementación / hábitos / actividad física)
   Calm fade + soft rise — transitions (not one-shot keyframes) so exit can
   reverse the same motion before the protocol underneath is revealed. */
.welcome-intro-dialog {
  --welcome-intro-duration: 560ms;
  --welcome-intro-ease: cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0;
  transition: opacity var(--welcome-intro-duration) var(--welcome-intro-ease);
}

.welcome-intro-dialog.welcome-intro-dialog--visible {
  opacity: 1;
}

.welcome-intro-dialog::backdrop {
  background: rgba(8, 16, 12, 0.28);
  opacity: 0;
  transition: opacity var(--welcome-intro-duration) var(--welcome-intro-ease);
}

.welcome-intro-dialog.welcome-intro-dialog--visible::backdrop {
  opacity: 1;
}

.welcome-intro-dialog .welcome-intro-panel {
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition:
    opacity calc(var(--welcome-intro-duration) + 40ms) var(--welcome-intro-ease),
    transform calc(var(--welcome-intro-duration) + 80ms) var(--welcome-intro-ease);
  will-change: opacity, transform;
}

.welcome-intro-dialog.welcome-intro-dialog--visible .welcome-intro-panel {
  opacity: 1;
  transform: none;
}

/* Soft slide crossfade between steps */
@keyframes welcome-intro-slide-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.welcome-intro-footer {
  /* Keep primary CTA above the iPhone home indicator (same idea as .membership-sheet-content). */
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: no-preference) {
  .welcome-intro-slide.welcome-intro-slide--active:not(.hidden) {
    animation: welcome-intro-slide-in 0.42s var(--welcome-intro-ease) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-intro-dialog,
  .welcome-intro-dialog::backdrop,
  .welcome-intro-dialog .welcome-intro-panel {
    transition-duration: 1ms;
  }

  .welcome-intro-slide.welcome-intro-slide--active:not(.hidden) {
    animation: none;
  }
}

/* Safe-area bottom padding for iPhone home-indicator */
.membership-sheet-content {
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

/* Auth shell (sign-in/sign-up) bleeds its photo background edge-to-edge
   (see _public_layout, which skips pt-safe/pb-safe for fullscreen pages) —
   this keeps the logo/card clear of the status bar and home indicator. */
.auth-shell-safe-area {
  padding-top: max(3rem, env(safe-area-inset-top));
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

/* Auth form autofill override — cross-browser (Chrome/Safari/Edge use box-shadow trick; Firefox respects the 9999s transition delay) */
.auth-glass-card input:-webkit-autofill,
.auth-glass-card input:-webkit-autofill:hover,
.auth-glass-card input:-webkit-autofill:focus,
.auth-glass-card input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08) inset;
  box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08) inset;
  -webkit-text-fill-color: white;
  caret-color: white;
  transition: background-color 9999s ease-in-out 0s;
}

/* Firefox: :autofill pseudo-class (Gecko, no -webkit- prefix needed) */
.auth-glass-card input:autofill {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: white !important;
}

/* Membership layout: single calm opacity fade on <main> for Turbo visits.
   The bottom nav/header shell is data-turbo-permanent (doesn't re-mount),
   so only the swapped page content needs this — fallback smoothing for
   WebViews where meta turbo-view-transition doesn't apply (WKWebView < iOS 18).

   When View Transitions ARE supported, disable this fade — otherwise the page
   animates twice (VT + this class) and feels like a double blink. */
@keyframes membership-content-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.membership-content-fade-in {
  animation: membership-content-fade-in 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Active bottom-nav tab — keep transitions on the permanent shell so the
   charcoal/lime pill eases instead of hard-cutting between pages. */
.membership-nav-tab {
  -webkit-tap-highlight-color: transparent;
}

/* Hard guarantee for the active pill — utilities can get lost when Stimulus
   rewrites className on the permanent nav inside the native WebView. */
.membership-nav-tab.is-active,
a.membership-nav-tab.is-active,
button.membership-nav-tab.is-active {
  background-color: var(--color-accent, #28404F) !important;
  color: var(--color-kiwell-lime, #E5FC5A) !important;
  box-shadow: 0 1px 2px rgb(40 64 79 / 0.18);
}

.membership-nav-tab.is-active svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  color: var(--color-kiwell-lime, #E5FC5A) !important;
  stroke: currentColor;
}

.membership-nav-tab.is-active span {
  color: var(--color-kiwell-lime, #E5FC5A) !important;
  font-weight: 700;
  letter-spacing: 0;
}

.membership-nav-tab svg,
.membership-nav-tab span {
  transition: color 280ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

@supports (view-transition-name: none) {
  .membership-content-fade-in {
    animation: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .membership-content-fade-in {
    animation: none;
    transform: none;
  }

  .membership-nav-tab,
  .membership-nav-tab svg,
  .membership-nav-tab span {
    transition: none !important;
  }
}


/* --- Apertura de hábitos esenciales (tipo sobre) ------------------------------------ */
/* Las tarjetas entran de a una con un efecto de "carta que aparece". Todo vive en clases
   porque la CSP de producción bloquea estilos inline. */

/* La página dibuja una imagen de fondo a pantalla completa. Sin contexto de apilado propio,
   esa imagen queda por encima de los controles: el botón de Volver se veía pero el click se
   lo comía el <img>. */
.habit-reveal {
  position: relative;
  z-index: 1;
}

/* Paso 1: intro sola, centrada verticalmente para que se lea como pantalla propia. */
.habit-reveal--intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(70dvh, 32rem);
}

.habit-reveal--intro .habit-reveal__intro {
  margin-bottom: 0;
}

/* La tarjeta crece con su texto. Antes tenía alto fijo por escalones de viewport y el
   detalle scrolleaba adentro, para que los pulgares nunca cayeran debajo del pliegue; el
   costo era un hábito partido al medio con una barra de scroll propia, que se lee como
   contenido escondido. Ahora manda el contenido: sólo una tarjeta está visible a la vez
   (las demás llevan `hidden`, que Tailwind fuerza con display:none !important), así que
   la tarjeta en flujo define el alto del escenario. En un hábito largo los pulgares
   quedan más abajo y se llega scrolleando la página, que es un gesto conocido —a
   diferencia de un scroll interno sin borde visible. */
.habit-reveal__stage {
  position: relative;
  perspective: 1200px;
}

.habit-reveal__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.55);
}

/* Piso, no techo: con poco texto la tarjeta tiene que seguir leyéndose como tarjeta y no
   como una franja. */
.habit-reveal__card { min-height: 11rem; }

@media (min-height: 640px) { .habit-reveal__card { min-height: 14rem; } }
@media (min-height: 700px) { .habit-reveal__card { min-height: 18rem; } }

.habit-reveal__card--active {
  animation: habit-reveal-in 760ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* El detalle entra apenas después del título de la tarjeta, no todo junto. */
.habit-reveal__card--active .habit-reveal__body > * {
  animation: habit-reveal-body-in 620ms ease-out both;
}

.habit-reveal__card--active .habit-reveal__body > *:nth-child(1) { animation-delay: 200ms; }
.habit-reveal__card--active .habit-reveal__body > *:nth-child(2) { animation-delay: 300ms; }
.habit-reveal__card--active .habit-reveal__body > *:nth-child(3) { animation-delay: 400ms; }

.habit-reveal__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.habit-reveal__body {
  position: relative;
  z-index: 1;
  padding: 1.25rem;
}

/* Salidas distintas según el pulgar, para que el gesto se sienta distinto. */
.habit-reveal__card--out-up {
  animation: habit-reveal-out-up 300ms ease-in both;
}

.habit-reveal__card--out-down {
  animation: habit-reveal-out-down 300ms ease-in both;
}

/* Pegados al pie del viewport: un hábito largo empuja los botones fuera de la pantalla
   y decidir obligaría a scrollear primero. Sticky + safe-area los deja siempre a mano.
   Sin degradado: los botones lima sólidos contrastan solos sobre el fondo. */
.habit-reveal__actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 1rem;
  padding: 0.75rem 0 max(1rem, env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.75rem;
}

/* Misma jerarquía visual: dos botones lima pill con icono + texto. Charcoal sobre lima
   pasa WCAG; blanco sobre lima no. */
.habit-reveal__choice {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1 1 0;
  min-width: 0;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border-radius: 9999px;
  background: #d9f357;
  color: #1b2d24;
  box-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.35);
  transition: transform 140ms ease, filter 140ms ease;
}

.habit-reveal__choice:active {
  transform: scale(0.96);
}

/* Sólo donde hay hover de verdad: en touch, :hover se queda pegado después del tap. */
@media (hover: hover) and (pointer: fine) {
  .habit-reveal__choice:hover {
    filter: brightness(1.05);
  }
}

.habit-reveal__choice-label {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  color: #1b2d24;
}

/* Intro suelta: pantalla propia antes de la primera tarjeta. */
.habit-reveal__intro {
  text-align: center;
  margin-bottom: 0.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: habit-reveal-intro-in 620ms ease-out both;
}

/* Los tamaños del intro viven acá y no en clases de Tailwind para que la variante de
   pantalla baja pueda achicarlos: en un teléfono chico este bloque es lo que empujaba los
   pulgares fuera de la pantalla. */
.habit-reveal__intro-title { font-size: 1.75rem; }
.habit-reveal__intro-body { margin-top: 0.75rem; font-size: 1rem; max-width: 22rem; }

@media (min-width: 768px) {
  .habit-reveal__intro-title { font-size: 2rem; }
  .habit-reveal__intro-body { font-size: 1.125rem; }
}

/* Teléfonos bajos (SE, Androids chicos): la tarjeta y el texto ceden alto antes que los
   controles, que son los que no pueden quedar fuera de alcance. */
@media (max-height: 720px) {
  .habit-reveal--intro { min-height: min(60dvh, 24rem); }
  .habit-reveal__intro { margin-bottom: 0.625rem; }
  .habit-reveal__intro-title { font-size: 1.375rem; }
  .habit-reveal__intro-body { margin-top: 0.375rem; font-size: 0.875rem; }
  .habit-reveal__progress { margin-bottom: 0.5rem; }
  .habit-reveal__actions { margin-top: 0.75rem; gap: 0.5rem; }
  .habit-reveal__choice { min-height: 2.75rem; padding: 0.625rem 0.75rem; }
  .habit-reveal__choice-label { font-size: 0.8125rem; }
}

/* Al salir, el bloque colapsa a height: 0 — pero sin overflow oculto su texto sigue
   dibujándose fuera de la caja y, aunque no se ve, se come los clicks del botón de Volver,
   que queda justo debajo. pointer-events cierra el caso aunque el colapso falle. */
.habit-reveal__intro--gone {
  animation: habit-reveal-intro-out 280ms ease-in both;
  overflow: hidden;
  pointer-events: none;
}

.habit-reveal__progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  min-height: 1.75rem;
}

.habit-reveal__progress[hidden] { display: none; }

.habit-reveal__back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: rgb(255 255 255 / 0.65);
  flex-shrink: 0;
}

.habit-reveal__back:hover { color: rgb(255 255 255 / 0.95); }
.habit-reveal__back[hidden] { display: none; }

.habit-reveal__count {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.6);
}

.habit-reveal__card--back {
  animation: habit-reveal-back 320ms ease-out both;
}

.habit-reveal__actions[hidden] { display: none; }
.habit-reveal__stage[hidden] { display: none; }

.habit-reveal__success {
  text-align: center;
  padding: 2.5rem 1rem;
  animation: habit-reveal-intro-in 520ms ease-out both;
}

.habit-reveal__success.hidden { display: none; }

.habit-reveal__success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 1.25rem;
  border-radius: 9999px;
  color: #fff;
  background: rgb(134 184 23 / 0.35);
  border: 1px solid rgb(134 184 23 / 0.55);
  animation: habit-reveal-mark-in 640ms cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

.habit-reveal__success-title { animation: habit-reveal-body-in 560ms ease-out 220ms both; }
.habit-reveal__success-body { animation: habit-reveal-body-in 560ms ease-out 380ms both; }
.habit-reveal__success-summary { animation: habit-reveal-body-in 560ms ease-out 520ms both; }

/* El único rebote del flujo, y es a propósito: marca el logro. */
@keyframes habit-reveal-mark-in {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

/* Sin rebote a propósito: la idea es que se asiente, no que salte. */
@keyframes habit-reveal-in {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes habit-reveal-body-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes habit-reveal-out-up {
  to { opacity: 0; transform: translateY(-36px) scale(0.94); }
}

@keyframes habit-reveal-out-down {
  to { opacity: 0; transform: translateY(36px) scale(0.94); }
}

@keyframes habit-reveal-back {
  from { opacity: 0; transform: translateX(-24px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes habit-reveal-intro-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes habit-reveal-intro-out {
  to { opacity: 0; transform: translateY(-8px); height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
}

/* Respeta a quien pidió menos movimiento: se ve el cambio de tarjeta, sin el vuelo. */
@media (prefers-reduced-motion: reduce) {
  .habit-reveal__card--active,
  .habit-reveal__card--back,
  .habit-reveal__intro,
  .habit-reveal__card--out-up,
  .habit-reveal__card--out-down,
  .habit-reveal__success,
  .habit-reveal__success-mark,
  .habit-reveal__card--active .habit-reveal__body > *,
  .habit-reveal__success-title,
  .habit-reveal__success-body,
  .habit-reveal__success-summary {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}

/* El CTA se perdía como texto suelto sobre la foto. Con fondo propio se lee como botón sin
   la saturación del primario, que era lo que competía con las tarjetas de hábitos. */
.essential-habits-activity-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.16);
  border: 1px solid rgb(255 255 255 / 0.35);
  backdrop-filter: blur(4px);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  transition: background-color 160ms ease;
}

.essential-habits-activity-teaser:hover .essential-habits-activity-cta {
  background: rgb(255 255 255 / 0.28);
}

/* El "¿sabías que...?" de actividad física vive en la apertura, grande y dentro de la
   tarjeta, donde sostiene la decisión. En la lista ya elegida repetirlo es ruido. */
.habit-reveal__fact {
  border-left: 3px solid rgb(255 255 255 / 0.4);
  padding-left: 0.875rem;
}

/* ===========================================================================
   Paywall — pantalla "estamos armando tu plan"
   Barra determinada y no un spinner: un spinner no dice si falta poco o mucho,
   y la espera acá puede ser de varios segundos. La barra llega al 92% con un
   ease largo y el 8% restante lo completa `--done`, así que el final siempre
   se siente como que terminó y no como que se cortó.
   =========================================================================== */
.plan-preparing {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  padding: 2rem 0;
}

.plan-preparing__title {
  max-width: 20ch;
  animation: plan-preparing-enter 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Altura fija: si el contenedor se encoge con el texto más corto, la barra de
   abajo salta en cada cambio de paso. */
.plan-preparing__steps {
  position: relative;
  width: 100%;
  min-height: 3.25rem;
}

.plan-preparing__step {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.75);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.plan-preparing__step--active {
  opacity: 1;
  transform: translateY(0);
}

.plan-preparing__track {
  width: 100%;
  max-width: 16rem;
  height: 3px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.18);
  overflow: hidden;
  animation: plan-preparing-enter 700ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;
}

.plan-preparing__bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: rgb(255 255 255 / 0.9);
  /* 6,5s: apenas por encima del techo de la espera (7s contando el remate de
     `--done`), para que la barra nunca se quede clavada esperando. La curva es un
     ease-out suave — con uno más agresivo llegaba a la mitad en el primer segundo
     y el resto se leía como colgada. */
  animation: plan-preparing-fill 6.5s cubic-bezier(0.25, 0.45, 0.35, 0.95) forwards;
}

/* Corta la animación larga en el ancho que tenga y la lleva al 100%. */
.plan-preparing--done .plan-preparing__bar {
  width: 100%;
  animation: none;
  transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Aparece recién cuando la barra llegó al final. Con visibility y no sólo con opacity
   para que tampoco se pueda tabular hasta él antes de tiempo. */
.plan-preparing__continue {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 400ms ease, transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 400ms;
}

.plan-preparing--done .plan-preparing__continue {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

@keyframes plan-preparing-fill {
  from { width: 0; }
  to   { width: 92%; }
}

@keyframes plan-preparing-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .plan-preparing__title,
  .plan-preparing__track {
    animation: none;
  }

  .plan-preparing__step {
    transition: opacity 200ms ease;
    transform: none;
  }

  .plan-preparing__bar {
    width: 92%;
    animation: none;
  }

  .plan-preparing--done .plan-preparing__bar {
    transition: none;
  }

  .plan-preparing__continue {
    transition: none;
  }
}

/* ===========================================================================
   Aviso que sólo aparece con el campo enfocado (`focus_hint` en el YAML).
   Con :focus-within y no con Stimulus: es puramente visual y no necesita estado,
   así que no tiene por qué depender de que el JS haya cargado. Anima max-height y
   no display, para que no dé el salto seco de un none → block.
   =========================================================================== */
.onboarding-focus-hint {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-base-content, #28404f);
  transition: max-height 260ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 200ms ease,
              margin-top 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.onboarding-focus-hint-field:focus-within .onboarding-focus-hint {
  max-height: 8rem;
  opacity: 0.75;
  margin-top: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-focus-hint {
    transition: none;
  }
}