/* NAV */
.pillnav{
  display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
  overflow-x:auto; padding:4px 0;
}
.pillbtn{
  appearance:none; border:0; cursor:pointer;
  background:#e9eef6; color:#3a4658;
  padding:.5rem .9rem; border-radius:9999px;
  font-weight:600; font-size:.92rem; line-height:1.1rem;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .02s ease;
  white-space:nowrap;
}
.pillbtn:hover{ background:#e3e9f3; }
.pillbtn:active{ transform: translateY(1px); }
.pillbtn.active{
  background:#0f172a; color:#fff;
  box-shadow:none;
}

/* Topbar sutil en todos los dispositivos */
.topbar { backdrop-filter: saturate(1.1) blur(6px); }

/* Píldoras de navegación */
.pillnav {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap; /* escritorio: puede saltar a 2 líneas si hace falta */
}
.pillbtn {
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: .45rem .8rem;
  border-radius: 9999px;
  font-size: .95rem;
}
.pillbtn:hover { background: #f8fafc; }
.pillbtn.active {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}

/* --- Móvil: mejor experiencia --- */
@media (max-width: 768px) {
  /* La pillnav se hace "carrusel" horizontal: no rompe la maquetación */
  .pillnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: .25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  .pillnav::-webkit-scrollbar { display: none; } /* WebKit */
  .pillbtn { flex: 0 0 auto; font-size: .9rem; padding: .4rem .7rem; }

  /* Portada más pequeña y centrada */
  #tab-actual .col-md-4 { text-align: center; }
  #cover {
    width: 65vw;
    max-width: 280px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: inline-block;
  }
}

/* Progreso suave */
.progress { --bs-progress-height: 10px; }


/* ----- Marca ----- */
.brand-logo { height: 28px; width: auto; }
@media (min-width: 768px){ .brand-logo { height: 32px; } }
.brand-text { font-size: 1.05rem; }

/* ----- Píldoras ----- */
.pillwrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.pillscroll {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: wrap;              /* en escritorio puede saltar de línea */
}
.pillbtn {
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: .45rem .8rem;
  border-radius: 9999px;
  font-size: .95rem;
  white-space: nowrap;
}
.pillbtn:hover { background: #f8fafc; }
.pillbtn.active {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}

/* Flechas móviles */
.pillarrow {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 9999px;
  width: 34px; height: 34px;
  line-height: 32px;
  text-align: center;
  font-size: 20px;
}

/* ----- Móvil: que quepa TODO cómodamente ----- */
@media (max-width: 768px){
  /* La nav se hace deslizante horizontal */
  .pillscroll {
    overflow-x: auto;
    flex-wrap: nowrap;          /* evita salto de línea */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .pillscroll::-webkit-scrollbar { display: none; }
  .pillbtn { flex: 0 0 auto; scroll-snap-align: start; font-size: .9rem; padding: .4rem .7rem; }

  /* Flechas pegadas a los bordes */
  .pillwrap { gap: .25rem; }
}

/* Progreso consistente */
.progress { --bs-progress-height: 10px; }

/* Portada más razonable en móvil (si no lo tenías ya) */
@media (max-width: 768px){
  #tab-actual .col-md-4 { text-align: center; }
  #cover {
    width: 60vw; max-width: 280px;
    aspect-ratio: 2/3; object-fit: cover;
    display: inline-block;
  }
}


/* Logo SIEMPRE pequeño */
.brand-logo{
  height:32px; width:32px;     /* fuerza tamaño fijo */
  object-fit: contain;         /* por si el png trae bordes */
  display:inline-block;
}
@media (min-width: 768px){
  .brand-logo{ height:36px; width:36px; } /* un pelín mayor en desktop */
}

/* evita que cualquier imagen del header se estire por error */
.topbar img{ max-height:40px; }


/* --- Gate (pantalla de acceso) --- */
#gate {
  display: grid;
  place-items: center;
  min-height: calc(100dvh - 64px); /* alto pantalla menos topbar */
  padding: 2rem 1rem;
}
.gate-card{
  display: flex; align-items: center; gap: 1rem;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
  padding: 1rem 1.25rem;
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
}
.app-locked main{ display:none !important; }  /* oculta la app si está bloqueada */