/* XNO paginador plano (‹ Anterior · 1 2 3 · Siguiente ›). CDN: /files/bootstrap/css/styles-pager-xn.css */
body.xno-skin .ytph-pager,
body.xno-skin .profile-pager,
body.xno-skin .kp-pager,
body.xno-skin .xno-mix__pager,
body.xno-skin div.text-center:has(> .kp-pager),
body.xno-skin div.text-center:has(> ul.pagination){
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  width:100%!important;
  text-align:center!important;
  float:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:22px 0 14px!important;
  clear:both!important;
}
body.xno-skin .ytph-pager,
body.xno-skin .profile-pager{
  margin-top:8px!important;
  padding-top:18px!important;
  border-top:1px solid #2a2a30;
}
body.xno-skin .ytph-pager > .kp-pager,
body.xno-skin .profile-pager > .kp-pager,
body.xno-skin .text-center > .kp-pager,
body.xno-skin .xno-mix__pager > .kp-pager{
  padding:0!important;
  width:auto!important;
}
body.xno-skin .ytph-pager .hrline,
body.xno-skin .ytph-pager hr,
body.xno-skin .profile-pager .hrline,
body.xno-skin .profile-pager hr{display:none!important}

body.xno-skin nav.kp-pager,
body.xno-skin .kp-pager{
  display:flex!important;
  justify-content:center!important;
  width:100%!important;
  margin:0 auto!important;
  float:none!important;
  text-align:center!important;
}

/* Fila: laterales en 1fr | números centrados | laterales en 1fr
   Así el hover de Anterior/Siguiente no mueve los números. */
body.xno-skin .kp-pager--flat .kp-pager__row{
  display:grid!important;
  grid-template-columns:1fr auto 1fr!important;
  align-items:center!important;
  gap:0 8px!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
body.xno-skin .kp-pager--flat .kp-pager__side{
  display:inline-flex!important;
  align-items:center!important;
  min-width:0!important;
}
body.xno-skin .kp-pager--flat .kp-pager__side--prev{
  grid-column:1!important;
  justify-self:end!important;
}
body.xno-skin .kp-pager--flat .kp-pager__side--next{
  grid-column:3!important;
  justify-self:start!important;
}
body.xno-skin .kp-pager--flat .kp-pager__list{
  grid-column:2!important;
}

body.xno-skin ul.pagination,
body.xno-skin .kp-pager__list,
body.xno-skin nav.kp-pager > ul.pagination{
  display:inline-flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:center!important;
  gap:4px 6px!important;
  float:none!important;
  margin:0 auto!important;
  padding:0!important;
  list-style:none!important;
  width:auto!important;
  text-align:center!important;
}
body.xno-skin ul.pagination > li,
body.xno-skin .kp-pager__item{
  display:inline-flex!important;
  float:none!important;
  margin:0!important;
  position:static!important;
}

/* Números: caja fija siempre (sin salto al hover); solo activa/hover pintan */
body.xno-skin .kp-pager--flat ul.pagination > li > a,
body.xno-skin .kp-pager--flat ul.pagination > li > span,
body.xno-skin .kp-pager--flat .kp-pager__item > a,
body.xno-skin .kp-pager--flat .kp-pager__item > span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  float:none!important;
  box-sizing:border-box!important;
  min-width:36px!important;
  height:36px!important;
  padding:0!important;
  margin:0!important;
  border-radius:8px!important;
  border:1px solid transparent!important;
  background:transparent!important;
  color:#c8ccd2!important;
  font:600 15px/1.2 Arial,Helvetica,sans-serif!important;
  text-decoration:none!important;
  box-shadow:none!important;
  transform:none!important;
  transition:color .15s ease,background .15s ease,border-color .15s ease;
}
body.xno-skin .kp-pager--flat ul.pagination > li > a:hover,
body.xno-skin .kp-pager--flat ul.pagination > li > a:focus,
body.xno-skin .kp-pager--flat .kp-pager__item > a:hover,
body.xno-skin .kp-pager--flat .kp-pager__item > a:focus{
  color:#2ee6a8!important;
  text-decoration:none!important;
  transform:none!important;
}

/* Hover numbers (no activa): solo color/fondo, mismo tamaño */
body.xno-skin .kp-pager--flat ul.pagination > li:not(.active):not(.is-active):not(.is-disabled):not(.kp-pager__item--gap) > a:hover,
body.xno-skin .kp-pager--flat ul.pagination > li:not(.active):not(.is-active):not(.is-disabled):not(.kp-pager__item--gap) > a:focus,
body.xno-skin .kp-pager--flat .kp-pager__item:not(.active):not(.is-active):not(.is-disabled):not(.kp-pager__item--gap) > a:hover,
body.xno-skin .kp-pager--flat .kp-pager__item:not(.active):not(.is-active):not(.is-disabled):not(.kp-pager__item--gap) > a:focus{
  border-color:rgba(46,230,168,.28)!important;
  background:rgba(46,230,168,.1)!important;
  color:#2ee6a8!important;
}

/* Activa: caja mint (span, sin link) */
body.xno-skin .kp-pager--flat ul.pagination > li.active > span,
body.xno-skin .kp-pager--flat ul.pagination > .active > span,
body.xno-skin .kp-pager--flat ul.pagination > .active > span:hover,
body.xno-skin .kp-pager--flat ul.pagination > .active > span:focus,
body.xno-skin .kp-pager--flat .kp-pager__item.active > span,
body.xno-skin .kp-pager--flat .kp-pager__item.is-active > span{
  border-color:rgba(46,230,168,.45)!important;
  background:rgba(46,230,168,.16)!important;
  color:#2ee6a8!important;
  cursor:default!important;
}

/* Anterior / Siguiente (laterales) */
body.xno-skin .kp-pager--flat .kp-pager__side > a,
body.xno-skin .kp-pager--flat .kp-pager__side > span{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  box-sizing:border-box!important;
  height:36px!important;
  padding:0 2px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#b8bcc4!important;
  font:600 14px/1.2 Arial,Helvetica,sans-serif!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  transform:none!important;
  transition:color .15s ease;
}
body.xno-skin .kp-pager--flat .kp-pager__side > a:hover,
body.xno-skin .kp-pager--flat .kp-pager__side > a:focus{
  color:#2ee6a8!important;
  background:transparent!important;
  border:0!important;
  text-decoration:none!important;
  transform:none!important;
}
body.xno-skin .kp-pager--flat .kp-pager__side.is-disabled > span{
  color:#555a63!important;
  cursor:default!important;
  opacity:1!important;
}
body.xno-skin .kp-pager--flat .kp-pager__chev{
  font-size:1.15em;
  line-height:1;
  font-weight:400;
}
body.xno-skin .kp-pager--flat .kp-pager__item--gap > span{
  min-width:0!important;
  height:auto!important;
  padding:6px 2px!important;
  color:#666!important;
  letter-spacing:.08em;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
}

/* Fallback si no hay --flat (por si llega HTML viejo en caché): mismo look mint */
body.xno-skin:not(:has(.kp-pager--flat)) ul.pagination > li > a,
body.xno-skin:not(:has(.kp-pager--flat)) ul.pagination > li > span,
body.xno-skin:not(:has(.kp-pager--flat)) .kp-pager__item > a,
body.xno-skin:not(:has(.kp-pager--flat)) .kp-pager__item > span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:40px!important;
  height:40px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  border:1px solid #333!important;
  background:#1a1a1f!important;
  color:#ddd!important;
  font-size:13px!important;
  font-weight:700!important;
}
body.xno-skin:not(:has(.kp-pager--flat)) ul.pagination > .active > a,
body.xno-skin:not(:has(.kp-pager--flat)) ul.pagination > .active > span,
body.xno-skin:not(:has(.kp-pager--flat)) .kp-pager__item.active > a{
  background:#2ee6a8!important;
  border-color:#2ee6a8!important;
  color:#04140f!important;
}

@media (max-width:480px){
  body.xno-skin .kp-pager--flat .kp-pager__row{
    gap:0 4px!important;
  }
  body.xno-skin .kp-pager--flat ul.pagination,
  body.xno-skin .kp-pager--flat .kp-pager__list{
    gap:4px 4px!important;
  }
  body.xno-skin .kp-pager--flat .kp-pager__side > a,
  body.xno-skin .kp-pager--flat .kp-pager__side > span{
    font-size:13px!important;
  }
  body.xno-skin .kp-pager--flat ul.pagination > li > a,
  body.xno-skin .kp-pager--flat ul.pagination > li > span,
  body.xno-skin .kp-pager--flat .kp-pager__item > a,
  body.xno-skin .kp-pager--flat .kp-pager__item > span{
    min-width:32px!important;
    height:32px!important;
  }
  body.xno-skin .kp-pager--flat .kp-pager__side > a,
  body.xno-skin .kp-pager--flat .kp-pager__side > span,
  body.xno-skin .kp-pager--flat .kp-pager__item--gap > span{
    height:32px!important;
  }
  body.xno-skin .kp-pager--flat .kp-pager__item--gap > span{
    height:auto!important;
    min-width:0!important;
  }
}