/* ==========================================================================
   RD-ACCESO — acceso y confianza dentro de la app (rediseño de confianza, sección 5)
   1. Arranque sin parpadeo        5. Bienvenida: figura animada
   2. Intro «Conoce RANGO» (5.1)   6. Cuenta: «Tus datos y privacidad» (5.8) y «Acerca de RANGO» (5.9)
   3. Enlace «¿Qué es RANGO?»      7. A8 · presión de botón (todos los botones)
   4. Registro (5.2)
   Solo variables de design/tokens.css (los color-mix() derivan de tokens).
   Se carga ANTES de rd-global.css: donde rd-global define lo mismo, aquí se usa
   un selector con id o de mayor especificidad para ganar.
   ========================================================================== */

/* ---------- 1. Arranque sin parpadeo ----------
   Un script mínimo del <head> pone data-rd-boot="intro" | "signup" ANTES del primer
   pintado cuando no hay sesión guardada: así el login nunca se ve un instante antes
   de la intro (o del registro). rd-acceso.js lo quita al arrancar; si el script no
   llega a cargar, el propio <head> lo quita a los 4 s y queda el login de siempre. */
html[data-rd-boot] #screen-auth-login { display: none !important; }
html[data-rd-boot] .tabbar { display: none; }
html[data-rd-boot="intro"] #screen-auth-intro { display: flex; }
html[data-rd-boot="signup"] #screen-auth-signup { display: block; }
.screen.rd-noanim { animation: none !important; }

/* ---------- 2. Intro «Conoce RANGO» ---------- */
#screen-auth-intro { flex-direction: column; padding: 0; overflow: hidden; }
#screen-auth-intro.active { display: flex; }

.rd-intro-top {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--sp-4) + env(safe-area-inset-top)) var(--sp-6) 0;
}
#screen-auth-intro .rd-intro-top .auth-logo { margin: 0; }
.rd-intro-skip {
  min-width: var(--hit); min-height: var(--hit);
  margin-right: calc(var(--sp-3) * -1); padding: 0 var(--sp-3);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--r-pill);
  color: var(--text-2);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600;
  cursor: pointer; touch-action: manipulation;
  transition: color var(--dur-fast) ease;
}
.rd-intro-skip:hover { color: var(--text-1); }

/* carrusel: scroll horizontal nativo con imán (inercia del propio sistema) */
.rd-intro-carousel {
  flex: 1 1 0; min-height: 0;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  cursor: grab; -webkit-user-select: none; user-select: none;
}
.rd-intro-carousel::-webkit-scrollbar { display: none; }
.rd-intro-carousel:focus-visible { outline: 2px solid var(--performance-blue); outline-offset: -2px; border-radius: var(--r-md); }
.rd-intro-carousel.is-drag { scroll-snap-type: none; cursor: grabbing; }

.rd-slide {
  flex: 0 0 100%; min-width: 0;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; justify-content: center;
  --pad-b: var(--sp-4);                 /* relleno inferior: la nota fija lo compensa para pegarse al borde real */
  padding: var(--sp-4) var(--sp-6) var(--pad-b);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}
.rd-slide::-webkit-scrollbar { display: none; }
/* nada se comprime: si no cabe (móvil bajo), la diapositiva se desplaza; con espacio, el contenido queda centrado */
.rd-slide > * { flex-shrink: 0; }
.rd-slide:not(.rd-slide-hero) { justify-content: flex-start; }
.rd-slide:not(.rd-slide-hero) > :first-child { margin-top: auto; }
.rd-slide:not(.rd-slide-hero) > :last-child { margin-bottom: auto; }
.rd-slide-cap { margin-bottom: var(--sp-2); font-size: var(--fs-sm); font-weight: 500; color: var(--text-3); }
.rd-slide-title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display); font-size: var(--fs-screen); font-weight: 700;
  line-height: 1.12; letter-spacing: -0.025em; color: var(--text-1); text-wrap: balance;
}
.rd-slide-text { margin: 0; font-size: var(--fs-lg); line-height: 1.55; color: var(--text-2); max-width: 34ch; text-wrap: pretty; }

/* diapositiva 1: la figura ocupa el espacio que sobra (entre 110 y 320 px) */
.rd-fig {
  flex: 1 1 0; min-height: 110px; max-height: 320px;
  display: flex; flex-direction: column;
  margin-bottom: var(--sp-6); padding: var(--sp-3) var(--sp-3) var(--sp-2);
  background: var(--surface-player);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  box-shadow: var(--inner-glow);
}
.rd-fig .fig { flex: 1; min-height: 0; width: 100%; }
.rd-fig .fig-cue { flex: none; }
.rd-fig-fallback { flex: 1; display: flex; align-items: center; justify-content: center; }
/* la figura solo se pinta con la diapositiva a la vista: sin ella queda el espacio, no un hueco roto */
.rd-slide-hero { justify-content: flex-start; }

/* diapositivas 2 y 3: filas del sistema (.group / .row) */
.rd-rows { list-style: none; margin: var(--sp-5) 0 0; padding: 0; background: var(--surface-2); }
.rd-rows .row { align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); }
.rd-rows .row-title { line-height: 1.3; }
.rd-rows .row-sub { color: var(--text-2); line-height: 1.45; }
.rd-num {
  background: color-mix(in srgb, var(--performance-blue) 14%, transparent);
  color: var(--performance-blue-text, var(--text-1));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--performance-blue) 28%, transparent);
  font-family: var(--font-display); font-size: var(--fs-body); font-weight: 600; font-variant-numeric: tabular-nums;
}
/* la nota de salud (dato de seguridad) queda SIEMPRE a la vista: si la diapositiva no cabe, se desplazan las filas por debajo de ella */
.rd-slide-note {
  position: sticky; bottom: calc(var(--pad-b) * -1); z-index: 1;
  margin: var(--sp-4) 0 0; padding: var(--sp-2) var(--sp-1);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--text-3);
  background: var(--surface-0);
}
/* indicio de scroll: difuminado sobre la nota (o al pie de la diapositiva si no hay nota) mientras quede contenido por ver (rd-acceso.js pone .has-more) */
.rd-slide-note::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--sp-6);
  background: linear-gradient(to top, var(--surface-0), transparent);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) ease;
}
.rd-slide.has-more .rd-slide-note::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rd-slide-note::before { transition: none; } }
.rd-slide.has-more:not(:has(.rd-slide-note)) {
  /* máscara: solo cuenta la opacidad; el token es un opaco cualquiera */
  -webkit-mask-image: linear-gradient(to bottom, var(--obsidian-black) calc(100% - var(--sp-8)), transparent);
  mask-image: linear-gradient(to bottom, var(--obsidian-black) calc(100% - var(--sp-8)), transparent);
}
.rd-slide-note a, .rd-terms a {
  color: var(--performance-blue-text, var(--text-1));
  text-decoration: underline; text-underline-offset: 2px;
}

/* Pantallas bajas: todo un poco más compacto. Se mide el alto de la propia pantalla (contenedor), así sirve igual
   en el móvil que en el marco de escritorio (allí el «teléfono» es más bajo que la ventana); sin unidades de
   contenedor, el respaldo usa el alto de la ventana. Lo que aun así no quepa se desplaza, con indicio de scroll
   y la nota de salud fija. */
@supports (container-type: size) {
  #screen-auth-intro { container-type: size; }
  @container (max-height: 760px) {
    .rd-slide { --pad-b: var(--sp-2); padding-top: var(--sp-2); }
    .rd-slide-title { font-size: var(--fs-title); margin-bottom: var(--sp-2); }
    .rd-slide-text { font-size: var(--fs-body); }
    .rd-rows { margin-top: var(--sp-2); }
    .rd-rows .row { min-height: 0; padding: var(--sp-2) var(--sp-3); }
    .rd-rows .row-sub { line-height: 1.35; }
    .rd-slide-note { margin-top: var(--sp-2); }
    .rd-fig { margin-bottom: var(--sp-4); }
    #screen-auth-intro .rd-intro-foot { gap: var(--sp-2); padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); }   /* id: la regla base del pie va más abajo */
  }
  @container (max-height: 600px) {   /* móvil muy bajo (320×568…) */
    .rd-slide-cap { margin-bottom: var(--sp-1); }
    .rd-rows .row { gap: var(--sp-2); }
    .rd-rows .row-icon { width: 28px; height: 28px; }
  }
}
@supports not (container-type: size) {
  @media (max-height: 760px) {
    .rd-slide { --pad-b: var(--sp-2); padding-top: var(--sp-2); }
    .rd-slide-title { font-size: var(--fs-title); margin-bottom: var(--sp-2); }
    .rd-slide-text { font-size: var(--fs-body); }
    .rd-rows { margin-top: var(--sp-2); }
    .rd-rows .row { min-height: 0; padding: var(--sp-2) var(--sp-3); }
    .rd-rows .row-sub { line-height: 1.35; }
    .rd-slide-note { margin-top: var(--sp-2); }
    .rd-fig { margin-bottom: var(--sp-4); }
    #screen-auth-intro .rd-intro-foot { gap: var(--sp-2); padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); }   /* id: la regla base del pie va más abajo */
  }
  @media (max-height: 600px) {
    .rd-slide-cap { margin-bottom: var(--sp-1); }
    .rd-rows .row { gap: var(--sp-2); }
    .rd-rows .row-icon { width: 28px; height: 28px; }
  }
}

/* pie fijo: indicadores + botones */
.rd-intro-foot {
  flex: none; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: 0 var(--sp-6) calc(var(--sp-6) + env(safe-area-inset-bottom));
}
.rd-dots { display: flex; justify-content: center; }
.rd-dot {
  position: relative; width: var(--hit); height: var(--hit);
  display: flex; align-items: center; justify-content: center;
  padding: 0; background: none; border: 0; border-radius: var(--r-pill);
  cursor: pointer; touch-action: manipulation;
}
.rd-dot i {
  display: block; width: 8px; height: 8px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--bone-white) 45%, transparent);
  transition: width var(--dur-base) var(--ease-out-strong), background var(--dur-base) ease;
}
.rd-dot[aria-current="true"] i { width: 24px; background: var(--performance-blue); }
.rd-dot:focus-visible, .rd-intro-skip:focus-visible { outline: 2px solid var(--performance-blue); outline-offset: 2px; }
.rd-intro-foot .btn { margin: 0; }

/* ---------- 3. Enlace «¿Qué es RANGO?» (pantalla Inicia sesión) ---------- */
#screen-auth-login .auth-link.rd-about-link {
  align-self: center; margin-top: var(--sp-1);
  color: var(--text-3); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
}
#screen-auth-login .auth-link.rd-about-link:hover { color: var(--text-1); }
#screen-auth-login .auth-link.rd-about-link[hidden] { display: none; }

/* ---------- 4. Registro: «Gratis · Sin tarjeta» y aceptación ---------- */
.auth-screen .rd-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-6); }
.auth-screen .rd-title-row h1.app-title { margin: 0; }
.rd-free-tag {
  display: inline-flex; align-items: center;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--hairline-strong);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; color: var(--text-2);
  white-space: nowrap;
}
.rd-terms { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-3); text-align: center; text-wrap: balance; }
.rd-terms a { white-space: nowrap; } /* el enlace no se parte en dos líneas */
.rd-terms + .rd-terms { margin-top: var(--sp-1); }

/* ---------- 5. Bienvenida: figura animada en lugar del icono ---------- */
.welcome-fig {
  height: 176px; display: flex; flex-direction: column;
  margin-bottom: var(--sp-5); padding: var(--sp-2) var(--sp-3) var(--sp-1);
  background: var(--surface-player);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
}
.welcome-fig .fig { flex: 1; min-height: 0; width: 100%; }
.welcome-fig .fig-cue { flex: none; }
/* El botón principal no cambia de sitio entre pasos: la tarjeta tiene un alto mínimo común (el de la pantalla,
   con tope de 660 px) y el botón se ancla abajo. Con la figura o el icono, la tarjeta ya no se encoge y se
   centra distinto en cada paso. cqh = alto de la propia pantalla: sirve igual en el móvil y en el marco de escritorio. */
@supports (height: 1cqh) {
  #screen-welcome { container-type: size; }
  .welcome-card {
    display: flex; flex-direction: column;
    min-height: min(660px, calc(100cqh - var(--sp-6) * 2 - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  }
  .welcome-card > .btn:not(.btn + .btn) { margin-top: auto; }
}
/* Pantallas bajas: el paso más alto (las tres sesiones) debe caber en la pantalla; se comprimen márgenes, no textos.
   (id delante: rd-global.css se carga después y define estos mismos márgenes.) Por altura de la pantalla (contenedor)
   y, sin unidades de contenedor, por altura de la ventana. */
@supports (height: 1cqh) {
  @container (max-height: 700px) {
    #screen-welcome .welcome-card { padding-bottom: var(--sp-5); }   /* el margen superior (40 px) se mantiene: «Saltar» queda sobre él */
    #screen-welcome .welcome-fig { height: 144px; margin-bottom: var(--sp-4); }
    #screen-welcome .welcome-icon { margin-bottom: var(--sp-3); }
    #screen-welcome .welcome-dots { margin-bottom: var(--sp-3); }
    #screen-welcome .welcome-card .auth-lead,
    #screen-welcome .welcome-types { margin-bottom: var(--sp-5); }
    #screen-welcome .welcome-type-row { padding: var(--sp-3); }
  }
  @container (max-height: 600px) {
    #screen-welcome .welcome-fig { height: 120px; }
    #screen-welcome .welcome-card h1.app-title { font-size: var(--fs-title); }
  }
}
@supports not (height: 1cqh) {
  @media (max-height: 700px) {
    #screen-welcome .welcome-card { padding-bottom: var(--sp-5); }
    #screen-welcome .welcome-fig { height: 144px; margin-bottom: var(--sp-4); }
    #screen-welcome .welcome-icon { margin-bottom: var(--sp-3); }
    #screen-welcome .welcome-dots { margin-bottom: var(--sp-3); }
    #screen-welcome .welcome-card .auth-lead,
    #screen-welcome .welcome-types { margin-bottom: var(--sp-5); }
    #screen-welcome .welcome-type-row { padding: var(--sp-3); }
  }
  @media (max-height: 600px) {
    #screen-welcome .welcome-fig { height: 120px; }
    #screen-welcome .welcome-card h1.app-title { font-size: var(--fs-title); }
  }
}

/* ---------- 6. Cuenta: datos y privacidad · Acerca de ---------- */
#screen-account .rd-priv .row { align-items: center; }
#screen-account .rd-priv .row:has(.row-sub) { align-items: flex-start; } /* filas con texto largo: icono arriba */
#screen-account .rd-priv .row:has(.row-sub) .row-icon { margin-top: 1px; }
#screen-account .rd-priv .row-sub { color: var(--text-2); line-height: 1.45; }
#screen-account .rd-priv a.row { align-items: center; text-decoration: none; }
#screen-account .rd-priv a.row .go-arrow { margin-left: auto; align-self: center; }
#screen-account .rd-priv a.row:focus-visible { outline: 2px solid var(--performance-blue); outline-offset: -2px; }
#screen-account .rd-priv .row[hidden] { display: none; }
#screen-account .rd-priv .row-value { font-family: var(--font-display); font-variant-numeric: tabular-nums; color: var(--text-2); }

#screen-account .rd-delete-zone { padding: var(--sp-4); border-top: 1px solid var(--hairline); }
#screen-account .rd-delete-zone > .acc-note { margin: 0 0 var(--sp-3); color: var(--text-2); }
#screen-account .btn.rd-btn-coral {
  background: transparent; color: var(--coral-text);
  border: 1px solid color-mix(in srgb, var(--module-advertencia) 50%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  #screen-account .btn.rd-btn-coral:hover { background: color-mix(in srgb, var(--module-advertencia) 10%, transparent); }
}
#screen-account .btn.rd-btn-coral:focus-visible { outline: 2px solid var(--module-advertencia); outline-offset: 2px; }

/* ---------- 7. A8 · presión de botón ----------
   Escala .97 en 140 ms con --ease-out-strong. rd-global ya la definía para .btn;
   aquí se fija de forma explícita, se extiende al botón de Google y se apaga
   por completo con prefers-reduced-motion (rd-global solo quitaba la transición,
   la escala se aplicaba igual de golpe). Ningún .btn tiene transform propio en
   reposo (timer, wizard y player solo cambian tamaño/orden), así que :active
   no pisa nada; .tab, .chip y los botones de icono conservan su escala y solo
   se anulan con movimiento reducido. */
.btn:active, .btn-google:active {
  transform: scale(.97);
  transition: transform 140ms var(--ease-out-strong, cubic-bezier(.23, 1, .32, 1));
}
.btn:disabled:active, .btn[disabled]:active, .btn-google:disabled:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .btn:active, .btn-google:active, .chip:active, .mode-card:active, .movement-card:active,
  .row-action:active, .link-card:active, .tab:active, .wiz-back:active, .account-btn:active,
  .pro-lock:active, .timer-fs-btn:active, .rec-exit:active, .rec-btn:active, .close-x:active,
  .admin-refresh-btn:active, .rd-ibtn:active, .rd-dot:active, .rd-intro-skip:active { transform: none !important; }
}