/* ============================================================
   APEX GUEST — estilos propios de /guest.html.

   Se cargan SOLO en esta página (no en index.html), así que no hay
   ninguna regla aquí que pueda afectar a Free/Pro/Max/MAX. Reutiliza
   los tokens de base.css (--bg, --text, --border, --space-*) igual que
   el resto de la app, sin redefinir ninguno — misma regla que sigue
   APEX MAX con max.css.
   ============================================================ */

/* ============================================================
   CHROME DE LA APP — .app-shell/.sidebar/.bottom-nav/.content-scroll
   son las MISMAS clases que index.html (app.css + progress.css):
   Guest no tiene su propio layout, hereda el de Free tal cual. Aquí
   solo van los añadidos propios: la insignia "Guest" y los botones de
   cuenta, que en Free no existen (ahí ya hay sesión).
   ============================================================ */
.guest-badge{
  font-size:.7rem; font-weight:700; letter-spacing:.02em;
  color:var(--text); opacity:.6; vertical-align:middle;
  border:1px solid var(--border); border-radius:999px;
  padding:2px 8px; margin-left:6px;
}

/* Reemplaza al menú de cuenta (auth-box) que Free tiene al pie del
   sidebar: Guest no tiene sesión que gestionar, solo dos salidas. */
.guest-sidebar-account{
  display:flex; flex-direction:column; gap:var(--space-2);
  padding-top:var(--space-4); margin-top:var(--space-4);
  border-top:1px solid var(--border-soft);
}
.guest-sidebar-account .btn{ width:100%; margin-top:0; }

/* Acceso a login siempre visible en móvil, sin tener que abrir "Más"
   primero — mismo criterio que exige mantener "Iniciar sesión"
   visible en la landing. */
.guest-mobile-login{
  margin-left:auto; width:auto !important; margin-top:0 !important;
  padding:6px 14px !important; font-size:var(--text-caption-size) !important;
  min-height:0 !important;
}

.guest-quota-note{
  display:inline-block; margin-top:var(--space-3) !important;
  font-size:.85rem; opacity:1 !important;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:6px 14px;
}
.guest-age-confirm{
  display:flex; align-items:flex-start; gap:8px; margin-top:var(--space-5);
  color:var(--muted); font-size:.85rem; line-height:1.4; cursor:pointer;
}
.guest-age-confirm input{ flex:0 0 auto; margin-top:2px; accent-color:var(--blue); }
.guest-quota-note.is-empty{ color:var(--red); border-color:var(--red); }
.dash-intro .guest-quota-note{ margin-top:var(--space-4) !important; }

.guest-convert{
  margin-top:var(--space-8); text-align:center;
  border:1px solid var(--border); border-radius:16px;
  padding:var(--space-7) var(--space-5); background:var(--surface);
}
.guest-convert h2{ margin:0 0 var(--space-2); font-size:1.2rem; }
.guest-convert p{ margin:0 0 var(--space-5); opacity:.8; }

/* ============================================================
   SELECTOR DE MODO — mismo componente visual que .amode-grid/
   .amode-card de la app real (app.css, cargado también aquí), para
   que Guest se sienta el producto real y no una maqueta aparte. Los
   dos modos ("Analizar con gráfico" y "Analizar decisión") funcionan
   de verdad — ver initModeToggle() en guest.js.
   ============================================================ */
.guest-lock-badge{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; margin-left:6px; opacity:.7;
}
/* Dentro de un .tab del sidebar/bottom-nav, el candado se empuja al
   borde derecho — mismo mecanismo que .tab-badge-pro (analysis.css). */
.tab .guest-lock-badge{ margin-left:auto; }

/* ============================================================
   MODAL DE CONVERSIÓN — abre al tocar una pestaña bloqueada del
   sidebar. Reutiliza .tt-modal/.tt-modal-backdrop (tracker.css, ya
   cargado aquí) como base, pero con su propio contenido centrado —
   mismo lenguaje que .auth-delete-icon en index.html: un icono real
   (nunca un emoji, que se ve distinto según la plataforma) dentro de
   una insignia de color, no un símbolo suelto flotando en el texto.
   ============================================================ */
#guestLockModal .tt-modal-head{ text-align:center; }
#guestLockModal .tt-modal-body{ text-align:center; }
.guest-lock-icon{
  width:52px; height:52px; margin:0 auto var(--space-4);
  border-radius:50%; background:var(--blue-soft); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
}
.guest-lock-desc{ color:var(--muted); margin:0 0 var(--space-6); line-height:1.55; }
/* Grid, no flex: con flex:1 un texto más largo ("Crear cuenta gratis")
   fuerza un ancho de contenido mínimo mayor que el reparto equitativo
   y termina más ancho que el otro botón — con columnas de grid los dos
   son exactamente iguales, pase lo que pase el texto de cada uno. */
.guest-lock-actions{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
.guest-lock-actions .btn{
  width:auto; margin-top:0; text-decoration:none;
}
@media(max-width:380px){
  .guest-lock-actions{ grid-template-columns:1fr; }
}
body.guest-modal-open{ overflow:hidden; }