/* =========================================================
   NOVIOS HUB (premium) + MODAL PIN (overlay real)
   Solo se aplica bajo .page-novios y clases nv-*
   ========================================================= */

.page-novios .nv-wrap{
  min-height: 100dvh;
}

/* ---------- GRID HUB ---------- */
.page-novios .nv-hub-grid{
  display: grid;
  gap: 18px;
  margin-top: 14px;
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 860px){
  .page-novios .nv-hub-grid{
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
}

/* ---------- CARD PREMIUM ---------- */
.page-novios .nv-hub-card{
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  border-radius: 26px;
  padding: 22px;
  min-height: 210px;

  text-decoration: none;
  color: inherit;

  background: rgba(255,255,255,.74);
  border: 1px solid rgba(30,18,22,.10);

  box-shadow:
    0 20px 60px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.78);

  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

@media (hover:hover){
  .page-novios .nv-hub-card:hover{
    transform: translateY(-3px);
    border-color: rgba(184,110,136,.25);
    box-shadow:
      0 30px 95px rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.85);
  }
}

/* Fondo acuarela REAL (se verá sí o sí si la ruta existe) */
.page-novios .nv-hub-bg{
  position: absolute;
  inset: -18px;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  filter: blur(16px) saturate(1.05) contrast(.98);
  opacity: .95;
}

/* Velo para legibilidad */
.page-novios .nv-hub-veil{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 300px at 18% 0%,
      rgba(255,255,255,.95),
      rgba(255,255,255,.55)
    ),
    linear-gradient(to bottom,
      rgba(255,255,255,.18),
      rgba(255,255,255,.88)
    );
  backdrop-filter: blur(2px);
}

/* Contenido sobre el fondo */
.page-novios .nv-hub-content{
  position: relative;
  display: grid;
  gap: 8px;
}

.page-novios .nv-hub-title{
  font-weight: 950;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: .15px;
}

.page-novios .nv-hub-sub{
  color: rgba(25,16,18,.62);
  line-height: 1.35;
}

/* footer */
.page-novios .nv-hub-footer{
  position: relative;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-novios .nv-hub-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(30,18,22,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
  font-size: 12px;
  color: rgba(25,16,18,.72);
  white-space: nowrap;
}

.page-novios .nv-hub-go{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(30,18,22,.12);
  box-shadow:
    0 10px 18px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.85);
  font-weight: 900;
  font-size: 18px;
}

/* nota */
.page-novios .nv-hub-note{
  margin-top: 14px;
}

/* =========================================================
   MODAL PIN (overlay real, centrado, premium)
   ========================================================= */
.page-novios .nv-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,.65), rgba(255,255,255,.15)),
    rgba(10,8,9,.35);

  backdrop-filter: blur(8px);
}

.page-novios .nv-modal.is-on{
  display: flex;
}

.page-novios .nv-modal-card{
  width: min(520px, 100%);
  border-radius: 26px;
  overflow: hidden;

  background: rgba(255,255,255,.85);
  border: 1px solid rgba(30,18,22,.12);

  box-shadow:
    0 30px 110px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.85);
}

.page-novios .nv-modal-head{
  padding: 18px 18px 12px;
  background:
    radial-gradient(900px 200px at 15% 0%, rgba(255,245,248,.98), rgba(255,255,255,.75));
  border-bottom: 1px solid rgba(30,18,22,.08);
}

.page-novios .nv-modal-title{
  margin: 6px 0 0;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .2px;
}

.page-novios .nv-modal-body{
  padding: 16px 18px 18px;
}

.page-novios .nv-input{
  width: 100%;
  margin-top: 6px;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(30,18,22,.14);
  background: rgba(255,255,255,.90);
  outline: none;
  font-size: 16px;
}

.page-novios .nv-input:focus{
  border-color: rgba(184,110,136,.35);
  box-shadow: 0 0 0 5px rgba(232,184,198,.25);
}

.page-novios .nv-modal-actions{
  padding: 0 18px 18px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Botón entrar: que se vea premium aunque style.css no lo haga */
.page-novios #pinEnter.btn.primary{
  border-radius: 14px;
  padding: 12px 16px;
}
/* ====== PALETA ORO ROSA (solo HUB) ====== */
.page-novios{
  --nv-rose-1: rgba(255,245,248,.98);
  --nv-rose-2: rgba(232,184,198,.92);
  --nv-rose-3: rgba(184,110,136,.45);
  --nv-ink: rgba(58,26,38,.95);
  --nv-muted: rgba(58,26,38,.62);
  --nv-glass: rgba(255,255,255,.72);
}

/* Topbar: que se note “zona especial” */
.page-novios .nv-topbar{
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(184,110,136,.18);
}

.page-novios .nv-title{
  color: var(--nv-ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

.page-novios .nv-sub{
  color: var(--nv-muted);
}

/* Botón “Salir” en oro rosa */
.page-novios #logoutBtn.btn.ghost{
  background: linear-gradient(180deg, var(--nv-rose-1), var(--nv-rose-2));
  border: 1px solid rgba(184,110,136,.30);
  color: rgba(88,38,55,.95);
  box-shadow: 0 10px 22px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.78);
}

/* Card contenedora “Módulos” más premium */
.page-novios .nv-card{
  border: 1px solid rgba(184,110,136,.18) !important;
  background: rgba(255,255,255,.70) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.10) !important;
}

/* ====== ACUARELA: que se vea ====== */
.page-novios .nv-hub-bg{
  opacity: 1 !important;
  filter: blur(10px) saturate(1.15) contrast(1.02) !important;
}

/* Velo más “oro rosa” y menos agresivo */
.page-novios .nv-hub-veil{
  background:
    radial-gradient(900px 320px at 12% 0%,
      rgba(255,245,248,.92),
      rgba(255,255,255,.46)
    ),
    linear-gradient(to bottom,
      rgba(255,255,255,.10),
      rgba(255,255,255,.78)
    ) !important;
}

/* Tipos dentro del hub */
.page-novios .nv-hub-title{
  color: var(--nv-ink);
}

.page-novios .nv-hub-sub{
  color: var(--nv-muted);
}

/* Pill oro rosa */
.page-novios .nv-hub-pill{
  background: linear-gradient(180deg, rgba(255,245,248,.92), rgba(255,255,255,.72)) !important;
  border: 1px solid rgba(184,110,136,.22) !important;
  color: rgba(88,38,55,.88) !important;
}

/* Botón flecha */
.page-novios .nv-hub-go{
  background: linear-gradient(180deg, rgba(255,245,248,.92), rgba(232,184,198,.65)) !important;
  border: 1px solid rgba(184,110,136,.22) !important;
  color: rgba(88,38,55,.95);
}

/* Nota final */
.page-novios .nv-hub-note{
  color: rgba(58,26,38,.55) !important;
}

/* ====== MODAL PIN: look premium oro rosa ====== */
.page-novios .nv-modal{
  background:
    radial-gradient(1200px 600px at 20% 10%,
      rgba(255,245,248,.70),
      rgba(255,255,255,.18)
    ),
    rgba(38,18,26,.38) !important;
}

.page-novios .nv-modal-head{
  background:
    radial-gradient(900px 220px at 15% 0%,
      rgba(255,245,248,.98),
      rgba(232,184,198,.62)
    ) !important;
}

.page-novios .nv-modal-title{
  color: var(--nv-ink);
}

.page-novios #pinEnter.btn.primary{
  background: linear-gradient(180deg, rgba(255,245,248,.98), rgba(232,184,198,.92));
  border: 1px solid rgba(184,110,136,.35);
  color: rgba(88,38,55,.95);
  box-shadow: 0 12px 28px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.78);
}