/* ==========================================================================
   navegador-interno.css — Aviso "ábrelo en tu navegador" (TikTok, Instagram…)

   Prefijo:    .navint-*
   Lo usa:     js/utils/navegador-interno.js (se inyecta en <body>)

   Modo Operate: una tarea puntual (salir del navegador de la app), no una
   pieza de venta. La marca está en el zorro y en el violeta, nada más.

   A diferencia del aviso de cookies, esto SÍ es un modal con velo: mientras la
   persona siga dentro de TikTok, lo importante de la página (registrarse,
   pagar) no le va a funcionar, y eso tiene que quedar por delante.

   Los grises de texto son los de css/pages/doc.css (#5F5B57 / #A5A3B4):
   --text-secondary da 3.22:1 y no pasa AA.
   ========================================================================== */

.navint-overlay {
  /* Curva de cajón de iOS (emil-design-eng): arranca rápido y asienta suave. */
  --navint-ease: cubic-bezier(0.32, 0.72, 0, 1);

  position: fixed;
  inset: 0;
  /* dvh: con 100vh la hoja queda debajo de la barra del navegador en móvil. */
  height: 100dvh;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(20, 18, 33, 0);
  overscroll-behavior: contain;
  transition: background-color 300ms var(--navint-ease);
}

.navint-overlay.is-open { background: rgba(20, 18, 33, 0.55); }

/* ── Hoja ─────────────────────────────────────────────────────────────── */

.navint-sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  /* Sin overflow aquí: recortaría al zorro, que asoma por encima del borde.
     El desplazamiento, si hace falta, lo hace .navint-body. */
  padding: 28px 20px max(20px, env(safe-area-inset-bottom));
  background: var(--bg-white, #fff);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 40px rgba(20, 18, 33, 0.18);
  color: var(--text-primary, #2B2B2B);
  font-family: var(--font-family, 'Public Sans', system-ui, sans-serif);

  transform: translateY(100%);
  transition: transform 360ms var(--navint-ease);
}

.navint-overlay.is-open .navint-sheet { transform: none; }

[data-theme="dark"] .navint-sheet {
  background: #1C1B22;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
}

/* 88dvh menos el relleno de la hoja: en un teléfono bajo, el texto se
   desplaza y los botones siguen alcanzables. */
.navint-body {
  max-height: calc(88dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* El zorro asoma por encima del borde de la hoja, del lado derecho, con la
   varita hacia la esquina donde está el ⋯ real. */
.navint-fox {
  position: absolute;
  right: 12px;
  top: -112px;
  width: 124px;
  height: auto;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  transition: opacity 280ms var(--navint-ease) 120ms,
              transform 360ms var(--navint-ease) 120ms;
}

.navint-overlay.is-open .navint-fox { opacity: 1; transform: none; }

.navint-title {
  margin: 0 132px 8px 0; /* no montarse sobre el zorro */
  font-size: 1.25rem;
  font-weight: var(--fw-bold, 700);
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text-primary, #2B2B2B);
}

.navint-text {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.55;
  color: #5F5B57;
}

[data-theme="dark"] .navint-text { color: #A5A3B4; }

/* ── Pasos ────────────────────────────────────────────────────────────── */

.navint-steps {
  counter-reset: navint;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.navint-steps li {
  counter-increment: navint;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  line-height: 1.45;
}

.navint-steps li::before {
  content: counter(navint);
  flex: 0 0 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--violet-light, rgba(108, 43, 255, 0.1));
  color: var(--violet-dark, #581BE5);
  font-size: 0.85rem;
  font-weight: var(--fw-bold, 700);
}

[data-theme="dark"] .navint-steps li::before { color: #C4B5FD; }

/* El ⋯ dibujado igual que en la barra de la app, para que se reconozca. */
.navint-dots {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 26px;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--bg-secondary, #ECEAE7);
  font-weight: var(--fw-extra, 900);
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.04em;
}

[data-theme="dark"] .navint-dots { background: #2C2A36; }

/* ── Acciones ─────────────────────────────────────────────────────────── */

.navint-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

.navint-btn {
  min-height: 48px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: var(--fw-semi, 600);
  border-radius: var(--r-md, 12px);
  border: 1px solid var(--violet, #6C2BFF);
  background: var(--bg-white, #fff);
  color: var(--violet, #6C2BFF);
  cursor: pointer;
  transition: background-color 160ms ease-out, transform 160ms ease-out;
}

.navint-btn--primary {
  background: var(--violet, #6C2BFF);
  color: #fff;
}

[data-theme="dark"] .navint-btn {
  background: transparent;
  border-color: #9D86FF;
  color: #C4B5FD;
}

[data-theme="dark"] .navint-btn--primary {
  background: #6C2BFF;
  border-color: #6C2BFF;
  color: #fff;
}

.navint-link {
  min-height: 44px;
  padding: 10px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: var(--fw-semi, 600);
  color: #5F5B57;
  cursor: pointer;
  border-radius: var(--r-md, 12px);
  transition: background-color 160ms ease-out, transform 160ms ease-out;
}

[data-theme="dark"] .navint-link { color: #A5A3B4; }

@media (hover: hover) and (pointer: fine) {
  .navint-btn:hover { background: rgba(108, 43, 255, 0.08); }
  .navint-btn--primary:hover { background: var(--violet-dark, #581BE5); }
  .navint-link:hover { background: rgba(0, 0, 0, 0.04); }
  [data-theme="dark"] .navint-link:hover { background: rgba(255, 255, 255, 0.06); }
}

.navint-btn:active,
.navint-link:active { transform: scale(0.97); }

.navint-btn:focus-visible,
.navint-link:focus-visible {
  outline: 2px solid var(--violet, #6C2BFF);
  outline-offset: 2px;
}

[data-theme="dark"] .navint-btn:focus-visible,
[data-theme="dark"] .navint-link:focus-visible { outline-color: #9D86FF; }

.navint-status {
  margin: 10px 0 0;
  min-height: 1.3em;
  text-align: center;
  font-size: 0.86rem;
  font-weight: var(--fw-semi, 600);
  color: #15803D; /* 5.0:1 sobre blanco */
}

[data-theme="dark"] .navint-status { color: #4ADE80; }

/* ── Señal en la esquina de la pantalla ───────────────────────────────── */
/* Arriba a la derecha de la página, justo debajo del ⋯ real de la app. */

.navint-pointer {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  border-radius: var(--r-full, 9999px);
  background: var(--violet, #6C2BFF);
  color: #fff;
  box-shadow: 0 6px 20px rgba(108, 43, 255, 0.35);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 240ms ease-out 200ms, transform 360ms var(--navint-ease) 200ms;
}

.navint-overlay.is-open .navint-pointer {
  opacity: 1;
  transform: none;
  animation: navint-nudge 1.6s ease-in-out 900ms infinite;
}

.navint-pointer-dots {
  font-weight: var(--fw-extra, 900);
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: 0.04em;
}

.navint-pointer svg { width: 20px; height: 20px; }

/* Un empujoncito hacia la esquina, no un rebote: indica dirección. */
@keyframes navint-nudge {
  0%, 60%, 100% { transform: translate(0, 0); }
  30%           { transform: translate(3px, -4px); }
}

/* ── Escritorio (poco probable, pero que no se vea roto) ──────────────── */

@media (min-width: 640px) {
  .navint-overlay { align-items: center; }
  .navint-sheet {
    border-radius: 24px;
    transform: translateY(16px) scale(0.97);
    opacity: 0;
    transition: transform 300ms var(--navint-ease), opacity 200ms ease-out;
  }
  .navint-overlay.is-open .navint-sheet { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .navint-overlay,
  .navint-sheet,
  .navint-fox,
  .navint-pointer,
  .navint-btn,
  .navint-link {
    transition: none !important;
  }
  .navint-overlay.is-open .navint-pointer { animation: none; }
}