/* Las barras de pestañas y de pills de un sitio, por tokens (09-10-2026).
 *
 * Que barra: TODAS las de Bootstrap que el core y los marcos emiten (.nav-tabs, .nav-pills, .customtab, la de
 * <rxs-tabs-nav> de un marco declarado en options_types.json.tabsTpl, las pills de una pestaña `mode=3`).
 * Que estilo: `prs.ui_tabs` de la fila del sitio pone `rxs-tabs-<estilo>` en el <html> (rxsUiSiteHtmlClass) y
 * pide esta hoja; un modulo lo declara para sus barras con `options_types.json.tabsEstilo` y una barra suelta con la
 * clase `rxs-tabs--<estilo>` en su <ul>. La de la barra gana a la del sitio. Sin ninguna de las tres, nada cambia.
 * Como se ve: solo tokens. Los de abajo son el default y salen de UI v2 (acento, bordes, superficies, redondeo), asi
 * que acompañan al tema oscuro del sitio (prs.tema) y a su marca; cualquiera se pisa con una fila de `ui_tokens` del
 * sitio (html:root, le gana a este :root) o en el css del theme.
 *
 * Estilos: subrayado (linea bajo la activa), pildora (la activa rellena con el acento), segmentado (control
 * segmentado sobre un riel), tarjeta (la pestaña clasica de carpeta). En el celular la barra no se parte: se desliza.
 */
:root{
 --rx-tabs-gap:.35rem;
 --rx-tabs-pad:.55rem 1.05rem;
 --rx-tabs-fs:.95rem;
 --rx-tabs-fw:600;
 --rx-tabs-radius:calc(.7rem * var(--rx-v2-radius-k,var(--rx-site-rk,1)));
 --rx-tabs-ink:var(--rx-v2-muted,#5f6b7a);
 --rx-tabs-ink-hover:var(--rx-v2-text,#1d242c);
 --rx-tabs-bg:transparent;
 --rx-tabs-bg-hover:var(--rx-v2-hover,rgba(0,0,0,.045));
 --rx-tabs-on-bg:var(--rx-v2-accent,var(--rx-site-acc,var(--rx-color1,#333)));
 --rx-tabs-on-ink:var(--rx-v2-accent-ink,#fff);
 --rx-tabs-on-line:var(--rx-tabs-on-bg);
 --rx-tabs-on-surface:var(--rx-v2-panel,#fff);
 --rx-tabs-line:var(--rx-v2-border,rgba(0,0,0,.12));
 --rx-tabs-track:var(--rx-v2-panel-2,rgba(0,0,0,.05));
 --rx-tabs-shadow:0 1px 3px rgba(0,0,0,.14);
 --rx-tabs-underline:2px;
}

/* lo comun a los cuatro: la barra en una fila que se desliza, el link sin el borde de Bootstrap */
:is(:root:is(.rxs-tabs-subrayado,.rxs-tabs-pildora,.rxs-tabs-segmentado,.rxs-tabs-tarjeta) :is(.nav-tabs,.nav-pills,.customtab):not([class*="rxs-tabs--"]),:root .rxs-tabs--subrayado,:root .rxs-tabs--pildora,:root .rxs-tabs--segmentado,:root .rxs-tabs--tarjeta){
 display:flex;flex-wrap:nowrap;gap:var(--rx-tabs-gap);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;
 margin:0 0 1rem;padding:0;border:0;list-style:none;background:none;max-width:100%}
:is(:root:is(.rxs-tabs-subrayado,.rxs-tabs-pildora,.rxs-tabs-segmentado,.rxs-tabs-tarjeta) :is(.nav-tabs,.nav-pills,.customtab):not([class*="rxs-tabs--"]),:root .rxs-tabs--subrayado,:root .rxs-tabs--pildora,:root .rxs-tabs--segmentado,:root .rxs-tabs--tarjeta)::-webkit-scrollbar{display:none}
:is(:root:is(.rxs-tabs-subrayado,.rxs-tabs-pildora,.rxs-tabs-segmentado,.rxs-tabs-tarjeta) :is(.nav-tabs,.nav-pills,.customtab):not([class*="rxs-tabs--"]),:root .rxs-tabs--subrayado,:root .rxs-tabs--pildora,:root .rxs-tabs--segmentado,:root .rxs-tabs--tarjeta)>li{flex:0 0 auto;margin:0;float:none}
:is(:root:is(.rxs-tabs-subrayado,.rxs-tabs-pildora,.rxs-tabs-segmentado,.rxs-tabs-tarjeta) :is(.nav-tabs,.nav-pills,.customtab):not([class*="rxs-tabs--"]),:root .rxs-tabs--subrayado,:root .rxs-tabs--pildora,:root .rxs-tabs--segmentado,:root .rxs-tabs--tarjeta).nav-fill>li{flex:1 0 auto}
:is(:root:is(.rxs-tabs-subrayado,.rxs-tabs-pildora,.rxs-tabs-segmentado,.rxs-tabs-tarjeta) :is(.nav-tabs,.nav-pills,.customtab):not([class*="rxs-tabs--"]),:root .rxs-tabs--subrayado,:root .rxs-tabs--pildora,:root .rxs-tabs--segmentado,:root .rxs-tabs--tarjeta) .nav-link{
 display:flex;align-items:center;justify-content:center;gap:.45rem;width:100%;padding:var(--rx-tabs-pad);font-size:var(--rx-tabs-fs);font-weight:var(--rx-tabs-fw);
 line-height:1.25;white-space:nowrap;color:var(--rx-tabs-ink);background:var(--rx-tabs-bg);border:0;border-radius:0;box-shadow:none;cursor:pointer;
 transition:color .15s,background-color .15s,box-shadow .15s,border-color .15s}
:is(:root:is(.rxs-tabs-subrayado,.rxs-tabs-pildora,.rxs-tabs-segmentado,.rxs-tabs-tarjeta) :is(.nav-tabs,.nav-pills,.customtab):not([class*="rxs-tabs--"]),:root .rxs-tabs--subrayado,:root .rxs-tabs--pildora,:root .rxs-tabs--segmentado,:root .rxs-tabs--tarjeta) .nav-link:hover{color:var(--rx-tabs-ink-hover)}
:is(:root:is(.rxs-tabs-subrayado,.rxs-tabs-pildora,.rxs-tabs-segmentado,.rxs-tabs-tarjeta) :is(.nav-tabs,.nav-pills,.customtab):not([class*="rxs-tabs--"]),:root .rxs-tabs--subrayado,:root .rxs-tabs--pildora,:root .rxs-tabs--segmentado,:root .rxs-tabs--tarjeta) .nav-link:focus-visible{outline:2px solid var(--rx-tabs-on-bg);outline-offset:2px}

/* subrayado */
:is(:root.rxs-tabs-subrayado :is(.nav-tabs,.nav-pills,.customtab):not([class*="rxs-tabs--"]),:root .rxs-tabs--subrayado){gap:calc(var(--rx-tabs-gap) * 2);box-shadow:inset 0 -1px 0 var(--rx-tabs-line)}
:is(:root.rxs-tabs-subrayado :is(.nav-tabs,.nav-pills,.customtab):not([class*="rxs-tabs--"]),:root .rxs-tabs--subrayado) .nav-link{padding-left:.15rem;padding-right:.15rem;box-shadow:inset 0 calc(var(--rx-tabs-underline) * -1) 0 transparent}
:is(:root.rxs-tabs-subrayado :is(.nav-tabs,.nav-pills,.customtab):not([class*="rxs-tabs--"]),:root .rxs-tabs--subrayado) :is(.nav-link.active,.active>.nav-link){color:var(--rx-tabs-on-line);background:transparent;box-shadow:inset 0 calc(var(--rx-tabs-underline) * -1) 0 var(--rx-tabs-on-line)}

/* pildora */
:is(:root.rxs-tabs-pildora :is(.nav-tabs,.nav-pills,.customtab):not([class*="rxs-tabs--"]),:root .rxs-tabs--pildora) .nav-link{border-radius:999px}
:is(:root.rxs-tabs-pildora :is(.nav-tabs,.nav-pills,.customtab):not([class*="rxs-tabs--"]),:root .rxs-tabs--pildora) .nav-link:hover{background:var(--rx-tabs-bg-hover)}
:is(:root.rxs-tabs-pildora :is(.nav-tabs,.nav-pills,.customtab):not([class*="rxs-tabs--"]),:root .rxs-tabs--pildora) :is(.nav-link.active,.active>.nav-link){color:var(--rx-tabs-on-ink);background:var(--rx-tabs-on-bg)}

/* segmentado */
:is(:root.rxs-tabs-segmentado :is(.nav-tabs,.nav-pills,.customtab):not([class*="rxs-tabs--"]),:root .rxs-tabs--segmentado){
 display:inline-flex;gap:2px;padding:4px;border-radius:var(--rx-tabs-radius);background:var(--rx-tabs-track)}
:is(:root.rxs-tabs-segmentado :is(.nav-tabs,.nav-pills,.customtab):not([class*="rxs-tabs--"]),:root .rxs-tabs--segmentado) .nav-link{border-radius:calc(var(--rx-tabs-radius) - 3px)}
:is(:root.rxs-tabs-segmentado :is(.nav-tabs,.nav-pills,.customtab):not([class*="rxs-tabs--"]),:root .rxs-tabs--segmentado) :is(.nav-link.active,.active>.nav-link){color:var(--rx-tabs-ink-hover);background:var(--rx-tabs-on-surface);box-shadow:var(--rx-tabs-shadow)}

/* tarjeta */
:is(:root.rxs-tabs-tarjeta :is(.nav-tabs,.nav-pills,.customtab):not([class*="rxs-tabs--"]),:root .rxs-tabs--tarjeta){gap:2px;box-shadow:inset 0 -1px 0 var(--rx-tabs-line)}
:is(:root.rxs-tabs-tarjeta :is(.nav-tabs,.nav-pills,.customtab):not([class*="rxs-tabs--"]),:root .rxs-tabs--tarjeta) .nav-link{border:1px solid transparent;border-bottom:0;border-radius:var(--rx-tabs-radius) var(--rx-tabs-radius) 0 0}
:is(:root.rxs-tabs-tarjeta :is(.nav-tabs,.nav-pills,.customtab):not([class*="rxs-tabs--"]),:root .rxs-tabs--tarjeta) .nav-link:hover{background:var(--rx-tabs-bg-hover)}
:is(:root.rxs-tabs-tarjeta :is(.nav-tabs,.nav-pills,.customtab):not([class*="rxs-tabs--"]),:root .rxs-tabs--tarjeta) :is(.nav-link.active,.active>.nav-link){color:var(--rx-tabs-ink-hover);background:var(--rx-tabs-on-surface);border-color:var(--rx-tabs-line);box-shadow:0 1px 0 var(--rx-tabs-on-surface)}

@media (prefers-reduced-motion:reduce){
 :is(:root[class*="rxs-tabs-"],:root) :is(.nav-tabs,.nav-pills,.customtab,[class*="rxs-tabs--"]) .nav-link{transition:none}
}

/* La barra de secciones de una pagina ({{rxs.secciones}}, njs/rxs-secciones.js; sitio-contrato-nativo.md §14): la fila de pills o
   pestañas de arriba con su cantidad, y el boton al final. Pegada, con el fondo del sitio esmerilado para que no tape a secas. */
.rxs-secnav{padding:12px 0;background:color-mix(in srgb,var(--rv-surface,var(--rx-v2-panel,#fff)) 88%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rv-line,var(--rx-tabs-line))}
.rxs-secnav-in{display:flex;align-items:center;gap:16px;max-width:var(--rxs-ancho,1180px);margin:0 auto;padding:0 24px}
.rxs-secnav .rxs-secnav-ul{flex:1 1 auto;min-width:0;margin:0;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.rxs-secnav .rxs-secnav-ul .nav-link{gap:7px;align-items:baseline}
.rxs-secnav-n{font-weight:800;color:var(--rv-acc-tx,var(--rx-tabs-on-bg))}
.rxs-secnav .nav-link.active .rxs-secnav-n{color:inherit}
/* la activa de la barra en pildora: `li.nav-item a.active{color:var(--rx-color1)!important}` de custom/mixlo/ncustom.css (en el bundle de mosto) la dejaba con el texto del color del relleno */
.rxs-secnav .rxs-tabs--pildora :is(.nav-link.active,.active>.nav-link){color:var(--rx-tabs-on-ink,#fff)!important}
.rxs-secnav-cta{flex:none;margin-left:auto;white-space:nowrap}
.rxs-secnav-vacia{display:none}
.rxs-sec-ancla{display:block;height:0;overflow:hidden}
@media (max-width:575px){.rxs-secnav{padding:8px 0}.rxs-secnav-in{padding:0 16px}.rxs-secnav-cta{display:none}}