/* =====================================================================
   RANGO — adaptación a cualquier pantalla (va el ÚLTIMO de los rd-*.css)
   · Teléfono (< 768 px): pantalla completa, dock inferior.
   · Tablet / computadora (≥ 768 px): la app ocupa toda la ventana, sin
     marco de teléfono; navegación lateral y contenido en una columna
     centrada y legible.
   Solo tokens de design/tokens.css y del rediseño.
   ===================================================================== */

:root {
  --rail-w: 96px;
  --content-max: 760px;
}

/* ---------- 1. Fuera el marco de demo en TODAS las pantallas ---------- */
body {
  padding: 0;
  gap: 0;
  align-items: stretch;
  justify-content: stretch;
}
.phone {
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.screen-pad { padding-top: calc(var(--sp-6) + env(safe-area-inset-top)); }

/* ---------- 2. Teléfonos estrechos: que las pestañas no se pisen ---------- */
@media (max-width: 374px) {
  .tabbar { left: 4px; right: 4px; padding: 3px; }
  .tab { flex: 1 1 auto; min-width: 44px; font-size: 10px; letter-spacing: -0.01em; gap: 2px; padding-inline: 2px; }
  .tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .screen-pad { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}

/* ---------- 3. Tablet y computadora: navegación lateral ---------- */
@media (min-width: 768px) {
  .phone { flex-direction: column; }

  /* el contenido deja sitio a la barra lateral (salvo en sesión, test guiado, acceso o timer a pantalla completa) */
  .phone:not(.in-player):not(.auth-mode):not(.timer-immersive) .screen { margin-left: var(--rail-w); }

  .tabbar {
    top: 0; bottom: 0; left: 0; right: auto;
    width: var(--rail-w);
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--sp-2);
    padding: calc(var(--sp-6) + env(safe-area-inset-top)) var(--sp-2) var(--sp-6);
    border: 0;
    border-right: 1px solid var(--hairline);
    border-radius: 0;
    background: var(--surface-0);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .phone.in-player .tabbar { transform: translateX(-110%); }
  .tab-indicator { display: none; }
  .tab {
    flex: 0 0 auto;
    min-height: 64px;
    border-radius: var(--r-md);
    font-size: var(--fs-micro);
  }
  .tab:hover { color: var(--text-1); background: var(--surface-1); }
  .tab.active {
    color: var(--text-1);
    background: color-mix(in srgb, var(--performance-blue) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--performance-blue) 30%, transparent);
  }

  /* columna de contenido centrada y legible */
  .screen-pad {
    max-width: var(--content-max);
    margin-inline: auto;
    padding-left: var(--sp-8, 40px);
    padding-right: var(--sp-8, 40px);
    padding-bottom: calc(var(--sp-8, 40px) + env(safe-area-inset-bottom));
  }

  /* acceso (login / registro / intro): tarjeta centrada */
  .phone.auth-mode .screen-pad,
  .phone.auth-mode .auth-pad { max-width: 480px; margin-inline: auto; }
}

/* computadora ancha: barra con etiqueta al lado del icono y contenido algo más ancho */
@media (min-width: 1100px) {
  :root { --rail-w: 224px; --content-max: 880px; }
  .tab {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--sp-3);
    min-height: 48px;
    padding: 0 var(--sp-4);
    font-size: var(--fs-sm);
    letter-spacing: 0;
  }
  .tabbar::before {
    content: "RANGO";
    display: block;
    padding: 0 var(--sp-4) var(--sp-5);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-body);
    letter-spacing: 0.14em;
    color: var(--text-1);
  }
}

/* ---------- 4. Player en pantallas anchas: figura a la izquierda, controles a la derecha ---------- */
@media (min-width: 900px) {
  #screen-player .player { flex-direction: row; }
  #screen-player .player-video { height: 100%; width: 50%; flex: 0 0 50%; }
  #screen-player .player-video::after {
    left: auto; top: 0; height: auto; width: 30%;
    background: linear-gradient(to right, transparent, var(--surface-0));
  }
  #screen-player .player-body {
    flex: 1;
    min-width: 0;
    max-width: 560px;
    padding-left: var(--sp-8, 40px);
    padding-right: calc(var(--sp-8, 40px) + env(safe-area-inset-right));
  }
  #screen-player .player-ring-wrap { --ring: clamp(96px, 16vh, 150px); }
}

/* cuenta atrás antes de la sesión: botón con ancho de botón, no de pantalla */
@media (min-width: 768px) {
  .session-countdown .btn { width: auto; min-width: 240px; max-width: 360px; }
}

/* ---------- 4. Teléfono: la barra inferior SIEMPRE visible ----------
   Algunos navegadores móviles (iOS antiguos, navegadores dentro de Instagram/TikTok)
   calculan 100vh/100dvh contando su propia barra; por eso la app se fija a los bordes
   de lo visible y la barra va dentro, pegada abajo. */
@media (max-width: 767px) {
  /* fijada a los 4 bordes de lo visible: el navegador le da el alto exacto (con o sin su barra), sin depender de vh */
  .phone { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; }
  .tabbar { position: absolute; }
}

/* En el iPhone la barra va subida por la franja del gesto de inicio: al esconderla
   (sesión, grabación, cronómetro a pantalla completa) hay que bajarla del todo. */
@media (max-width: 767px) {
  .phone.in-player .tabbar,
  .phone.timer-immersive .tabbar { transform: translateY(calc(100% + var(--sp-6) + env(safe-area-inset-bottom))); }
}

/* Sesión generada: «Empezar sesión» siempre a la vista, pegado abajo (por encima de la barra en el teléfono) */
#sessionPad .sess-cta-sticky {
  position: sticky;
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  z-index: 3;
  min-height: 56px;
  font-size: var(--fs-lg, 17px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--obsidian-black) 70%, transparent), 0 8px 22px color-mix(in srgb, var(--performance-blue) 30%, transparent);
}
@media (max-width: 767px) {
  #sessionPad .sess-cta-sticky { bottom: calc(84px + env(safe-area-inset-bottom)); }
}