/* Barra de abas "pílula" (dono, 16/10/2026 — modelo: barra do financeiro da Sanemax). COMPONENTE ÚNICO: vale para qualquer
   barra com a classe .abas-pilula (js/abas-pilula.js põe a pílula que desliza, o teclado e a rolagem até a aba aberta).
   Só muda o visual da barra; o conteúdo das abas não muda. */
:root { --abas-faixa: #eef1f6; --abas-pilula: #ffffff; --abas-texto: #6b7280; --abas-texto-forte: #111827; --abas-sombra: 0 1px 3px rgba(16, 24, 40, .12), 0 1px 2px rgba(16, 24, 40, .06); }
:root[data-theme="escuro"] { --abas-faixa: #1f2430; --abas-pilula: #353c4d; --abas-texto: #9aa3b5; --abas-texto-forte: #f3f4f6; --abas-sombra: 0 1px 3px rgba(0, 0, 0, .45); }
.abas-pilula { position: relative; display: flex; align-items: center; gap: 2px; padding: 4px; margin: 0 0 var(--space-3, 12px); background: var(--abas-faixa); border: 0 !important; border-radius: 12px;
  overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.abas-pilula::-webkit-scrollbar { display: none; }
/* centraliza sem esconder nada quando a barra rola (margem automática nas pontas) */
.abas-pilula > :is(button, a, [role="tab"]):first-of-type { margin-left: auto; }
.abas-pilula > :is(button, a, [role="tab"]):last-of-type { margin-right: auto; }
.abas-pilula > :is(button, a, [role="tab"]) { position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 6px 16px !important;
  margin-top: 0; margin-bottom: 0; border: 0 !important; border-radius: 9px; background: transparent !important; box-shadow: none !important; outline-offset: 2px;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--abas-texto) !important; text-decoration: none; cursor: pointer; transition: color .15s ease; }
.abas-pilula > :is(button, a, [role="tab"])::after, .abas-pilula > :is(button, a, [role="tab"])::before { display: none !important; }
.abas-pilula > :is(button, a, [role="tab"]):hover { color: var(--abas-texto-forte) !important; }
.abas-pilula > :is([aria-selected="true"], [aria-pressed="true"], [aria-current="page"]) { color: var(--abas-texto-forte) !important; font-weight: 650; outline: none; }
.abas-pilula > :is(button, a, [role="tab"]):focus-visible { outline: 2px solid var(--accent, #313460); }
/* contador entre parênteses: "No galpão (32)" */
.abas-pilula > :is(button, a, [role="tab"]) :is(b, .abas-cont) { background: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0; font-size: inherit; font-weight: inherit; color: inherit !important; }
.abas-pilula > :is(button, a, [role="tab"]) :is(b, .abas-cont):not(:empty)::before { content: "("; }
.abas-pilula > :is(button, a, [role="tab"]) :is(b, .abas-cont):not(:empty)::after { content: ")"; }
.abas-pilula-ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 9px; background: var(--abas-pilula); box-shadow: var(--abas-sombra);
  transition: transform .25s ease, width .25s ease, opacity .15s; pointer-events: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .abas-pilula-ind, .abas-pilula { transition: none; scroll-behavior: auto; } }
@media (max-width: 700px) { .abas-pilula > :is(button, a, [role="tab"]) { padding: 6px 13px !important; font-size: 13.5px; } }
.abas-pilula > :is([aria-selected="true"], [aria-pressed="true"], [aria-current="page"]) { outline: none !important; }
.abas-pilula > :is(button, a, [role="tab"]):focus-visible { outline: 2px solid var(--accent, #313460) !important; }
/* contador de alerta (ex.: atrasadas) continua vermelho */
.abas-pilula > :is(button, a, [role="tab"]) b.gc-cont-atraso { color: var(--critical, #b91c1c) !important; }
.abas-pilula > .cf-sep { flex: 0 0 1px; align-self: stretch; margin: 6px 4px; background: var(--gridline, #d0d5dd); }
/* dentro de grades (ex.: Seguro e PGR) a barra ocupa a linha toda e não estica para baixo */
.abas-pilula { grid-column: 1 / -1; align-self: start; height: auto; }
/* link de ação dentro da barra (ex.: "Regras da apólice →") não é aba: fica no fim, discreto */
.abas-pilula > a.sg-link-regras { margin-left: auto !important; font-size: 13px; }
.abas-pilula { min-width: 0; max-width: 100%; } /* não alarga a grade da tela: rola dentro dela */