/* ═══════════════════════════════════════════════════════════════
   PERFIL TOROIDAL · Estilos del botón de nav + modal de login
   ─────────────────────────────────────────────────────────────── */

:root {
  --pt-gold: #f0cc60;
  --pt-gold-dim: #c9a84c;
  --pt-purple: #2d1457;
  --pt-purple-deep: #1a0a2e;
  --pt-surface: rgba(26, 10, 46, 0.85);
  --pt-text: #f0e6ff;
  --pt-text-dim: #a08cc8;
}

/* ── WIDGET: posiciones ───────────────────────────────────────── */
/* Modo flotante (fallback cuando no hay <nav class="top-nav">) */
.pt-nav-widget {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 999;            /* Debajo del top-nav (z=1000) para no taparlo */
  font-family: 'Cinzel', serif;
}
/* Modo inline: cuando el widget vive dentro del navbar principal (con nav-logo) */
.top-nav .pt-nav-widget {
  position: relative;
  top: auto;
  right: auto;
  z-index: auto;
  /* No usamos margin-left:auto para no romper el justify-content del nav */
}
/* Modo section: navbar sin logo, centrado. Widget absoluto para no ocupar
   espacio flex y no provocar wrap/scroll extra. */
.top-nav[data-pt-inline="true"] .pt-nav-widget {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}


.pt-btn-enter,
.pt-btn-user {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: rgba(26, 10, 46, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(240, 204, 96, 0.35);
  color: var(--pt-gold);
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  font-weight: 500;
}

.pt-btn-enter:hover,
.pt-btn-user:hover {
  background: rgba(240, 204, 96, 0.12);
  border-color: rgba(240, 204, 96, 0.65);
  box-shadow: 0 0 18px rgba(240, 204, 96, 0.18);
}

.pt-btn-icon {
  font-size: 0.85rem;
  opacity: 0.9;
}

.pt-btn-arrow {
  font-size: 0.65rem;
  margin-left: 0.1rem;
  opacity: 0.75;
  transition: transform 0.2s;
}

/* Cuando el widget vive dentro del navbar, mantener tamano compacto */
.top-nav .pt-nav-widget { flex-shrink: 0; }
.top-nav .pt-btn-user {
  padding: 0.42rem 0.85rem;
  gap: 0.45rem;
}
/* En mobile el widget queda DENTRO del navbar y compacto (solo avatar +
   chevron, sin nombre) para que quepa junto al logo en la primera fila
   sin empujar nada a una nueva fila. El nombre se ve cuando se abre el
   dropdown. */
@media (max-width: 760px) {
  .top-nav .pt-btn-enter {
    padding: 0.42rem 0.85rem;
    font-size: 0.62rem;
    letter-spacing: 0.13em;
  }
  .top-nav .pt-btn-user {
    padding: 0.32rem 0.55rem;
    gap: 0.3rem;
  }
  /* En mobile ocultamos el nombre del usuario: el pill se reduce a
     [avatar][chevron] (~64px) — asi cabe sobrado junto al logo */
  .top-nav .pt-btn-user #pt-user-name { display: none; }
}

.pt-nav-widget.open .pt-btn-arrow {
  transform: rotate(180deg);
}

/* ── DROPDOWN DE USUARIO ──────────────────────────────────────── */
.pt-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 200px;
  background: rgba(18, 8, 32, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(240, 204, 96, 0.25);
  border-radius: 10px;
  padding: 0.4rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.pt-nav-widget.open .pt-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pt-dropdown a,
.pt-dropdown button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.65rem 0.9rem;
  background: transparent;
  border: none;
  color: var(--pt-text);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.pt-dropdown a:hover,
.pt-dropdown button:hover {
  background: rgba(240, 204, 96, 0.08);
  color: var(--pt-gold);
}

.pt-dropdown button {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pt-dropdown-sep {
  height: 1px;
  background: rgba(240, 204, 96, 0.12);
  margin: 0.3rem 0.5rem;
}

/* ── MODAL OVERLAY ────────────────────────────────────────────── */
.pt-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 4, 20, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}

.pt-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ── MODAL ────────────────────────────────────────────────────── */
.pt-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(160deg, rgba(26, 10, 46, 0.98) 0%, rgba(18, 8, 32, 0.98) 100%);
  border: 1px solid rgba(240, 204, 96, 0.3);
  border-radius: 16px;
  padding: 2.5rem 2rem 2rem;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(240, 204, 96, 0.06);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Usamos dvh donde se soporta (iOS 15+, Android moderno) para que el
     modal se ajuste al viewport visible cuando aparece el teclado. */
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pt-modal-overlay.active .pt-modal {
  transform: translateY(0) scale(1);
}

.pt-modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  background: transparent;
  border: none;
  color: var(--pt-text-dim);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}

.pt-modal-close:hover {
  color: var(--pt-gold);
  background: rgba(240, 204, 96, 0.08);
}

/* ── HEADER DEL MODAL ─────────────────────────────────────────── */
.pt-modal-header {
  text-align: center;
  margin-bottom: 1.75rem;
}

.pt-modal-sep {
  color: var(--pt-gold);
  font-size: 0.85rem;
  letter-spacing: 0.5em;
  opacity: 0.7;
  margin-bottom: 0.8rem;
}

.pt-modal-header h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--pt-gold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 0.7rem;
}

.pt-modal-header p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  color: var(--pt-text-dim);
  font-style: italic;
  line-height: 1.5;
  margin: 0;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* ── BOTÓN DE GOOGLE ──────────────────────────────────────────── */
.pt-btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.85rem 1rem;
  background: #fff;
  color: #1f1f1f;
  border: none;
  border-radius: 8px;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pt-btn-google:hover {
  background: #f6f6f6;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

.pt-btn-google:active {
  transform: translateY(0);
}

.pt-btn-google svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ── DIVIDER "o con email" ────────────────────────────────────── */
.pt-divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1.5rem 0 1.2rem;
  color: var(--pt-text-dim);
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
}

.pt-divider::before,
.pt-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(240, 204, 96, 0.3), transparent);
}

.pt-divider::before {
  background: linear-gradient(to left, rgba(240, 204, 96, 0.3), transparent);
}

.pt-divider::after {
  background: linear-gradient(to right, rgba(240, 204, 96, 0.3), transparent);
}

/* ── FORMULARIO EMAIL ─────────────────────────────────────────── */
.pt-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pt-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(240, 204, 96, 0.22);
  color: var(--pt-text);
  font-family: 'Cormorant Garamond', Georgia, serif;
  /* IMPORTANTE: 16px previene el zoom automatico de iOS Safari al hacer
     focus en un input. Si es <16px, iOS hace zoom y rompe el layout del
     modal, dejando el boton de submit fuera de la pantalla. */
  font-size: 16px;
  border-radius: 6px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s, background 0.2s;
}

.pt-input:focus {
  border-color: rgba(240, 204, 96, 0.6);
  background: rgba(255, 255, 255, 0.06);
}

.pt-input::placeholder {
  color: var(--pt-text-dim);
  opacity: 0.55;
  font-style: italic;
}

/* Opcional: nombre solo en registro */
.pt-name-wrap {
  display: none;
}

.pt-modal.mode-signup .pt-name-wrap {
  display: block;
}

.pt-btn-submit {
  width: 100%;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, var(--pt-gold) 0%, var(--pt-gold-dim) 100%);
  color: var(--pt-purple-deep);
  border: none;
  border-radius: 8px;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.2s, transform 0.15s, box-shadow 0.2s;
  margin-top: 0.3rem;
  box-shadow: 0 4px 18px rgba(240, 204, 96, 0.25);
}

.pt-btn-submit:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(240, 204, 96, 0.4);
}

.pt-btn-submit:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

.pt-form-error {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.88rem;
  color: #e98b8b;
  text-align: center;
  margin: 0.2rem 0 0;
  min-height: 1.1em;
  font-style: italic;
}

.pt-form-success {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.88rem;
  color: #78d8b5;
  text-align: center;
  margin: 0.2rem 0 0;
  font-style: italic;
}

/* ── TOGGLE REGISTRARSE / LOGIN ───────────────────────────────── */
.pt-toggle {
  text-align: center;
  margin-top: 1rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.9rem;
  color: var(--pt-text-dim);
}

.pt-toggle button {
  background: transparent;
  border: none;
  color: var(--pt-gold);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 0 0.25rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(240, 204, 96, 0.35);
  transition: color 0.2s, text-decoration-color 0.2s;
}

.pt-toggle button:hover {
  color: #ffdf80;
  text-decoration-color: var(--pt-gold);
}

.pt-forgot {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--pt-text-dim);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.82rem;
  font-style: italic;
  cursor: pointer;
  margin-top: 0.5rem;
  padding: 0.3rem;
  opacity: 0.75;
  transition: opacity 0.2s, color 0.2s;
}

.pt-forgot:hover {
  opacity: 1;
  color: var(--pt-gold);
}

/* ── PIE DEL MODAL ────────────────────────────────────────────── */
.pt-privacy {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.78rem;
  color: var(--pt-text-dim);
  text-align: center;
  font-style: italic;
  opacity: 0.7;
  margin: 1.4rem 0 0;
  line-height: 1.45;
}

/* ── AVATAR CIRCLE (cuando logueado) ──────────────────────────── */
.pt-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pt-gold), var(--pt-purple));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--pt-purple-deep);
  font-weight: 600;
  font-family: 'Cinzel', serif;
  flex-shrink: 0;
  object-fit: cover;
  overflow: hidden;
}

.pt-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pt-avatar.is-geometry {
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.32), transparent 34%),
    linear-gradient(135deg, rgba(240,204,96,0.22), rgba(45,20,87,0.98));
  color: var(--pt-gold);
  border: 1px solid rgba(240,204,96,0.5);
  box-shadow: 0 0 18px rgba(240,204,96,0.18);
}

.pt-avatar.is-geometry svg {
  width: 78%;
  height: 78%;
  display: block;
  filter: drop-shadow(0 0 5px rgba(240,204,96,0.24));
}

.pt-avatar-overlay .pt-modal {
  max-width: 620px;
}

.pt-avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.4rem;
}

.pt-avatar-choice {
  appearance: none;
  border: 1px solid rgba(240,204,96,0.16);
  background:
    radial-gradient(circle at 50% 0%, rgba(240,204,96,0.08), transparent 62%),
    rgba(255,255,255,0.035);
  color: var(--pt-text);
  border-radius: 14px;
  padding: 0.9rem 0.65rem 0.8rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  min-height: 144px;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.pt-avatar-choice:hover,
.pt-avatar-choice:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(240,204,96,0.48);
  background:
    radial-gradient(circle at 50% 0%, rgba(240,204,96,0.16), transparent 64%),
    rgba(255,255,255,0.055);
  box-shadow: 0 16px 34px rgba(0,0,0,0.28);
  outline: none;
}

.pt-avatar-choice.selected {
  border-color: rgba(240,204,96,0.82);
  box-shadow: 0 0 0 1px rgba(240,204,96,0.18), 0 0 26px rgba(240,204,96,0.14);
}

.pt-avatar-choice:disabled {
  cursor: wait;
  opacity: 0.72;
}

.pt-avatar-choice-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: var(--pt-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(240,204,96,0.12), rgba(45,20,87,0.55));
  border: 1px solid rgba(240,204,96,0.25);
}

.pt-avatar-choice-icon svg {
  width: 72%;
  height: 72%;
  display: block;
}

.pt-avatar-choice-name {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pt-gold);
  text-align: center;
  line-height: 1.3;
}

.pt-avatar-choice-desc {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.82rem;
  line-height: 1.25;
  color: var(--pt-text-dim);
  text-align: center;
}

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  .pt-nav-widget {
    top: 0.75rem;
    right: 0.75rem;
  }

  .pt-btn-enter,
  .pt-btn-user {
    padding: 0.42rem 0.9rem;
    font-size: 0.62rem;
    letter-spacing: 0.15em;
  }

  .pt-btn-user span:not(.pt-btn-icon):not(.pt-btn-arrow) {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* En mobile el modal sale arriba (no centrado) para que el teclado de iOS
     no empuje el formulario fuera de la pantalla. El usuario hace scroll
     dentro del modal si hace falta. */
  .pt-modal-overlay {
    align-items: flex-start;
    padding: 1rem 1rem 1rem;
  }
  .pt-modal {
    padding: 2rem 1.5rem 1.5rem;
    margin-top: 1.5rem;
  }

  .pt-avatar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pt-modal-header h2 {
    font-size: 1rem;
  }

  .pt-dropdown {
    min-width: 180px;
  }
}