/* componentes/botoes.css — Botões (.btn e variantes, estado ocupado, check animado), controle segmentado e interruptor. */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 11px 18px; min-height: 42px; border-radius: var(--raio); border: 1px solid transparent; cursor: pointer; background: var(--superficie); color: var(--tinta); overflow: hidden; transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), background .16s, border-color .16s, color .16s; white-space: nowrap; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.btn .ico { width: 16px; height: 16px; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--sombra-2); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: var(--sombra-1); }
.btn-primario { background: linear-gradient(180deg, #12d15c, var(--verde)); color: var(--tinta); border-color: #09b34d; }
.btn-primario::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); transition: left .6s var(--ease-out); }
.btn-primario:hover::after { left: 140%; }
.btn-marca { background: linear-gradient(180deg, #c81010, var(--vermelho)); color: #fff; border-color: var(--vermelho-escuro); }
.btn-marca::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .6s var(--ease-out); }
.btn-marca:hover::after { left: 140%; }
.btn-secundario { border-color: var(--borda-forte); }
.btn-secundario:hover { border-color: var(--tinta); }
.btn-tinta { background: linear-gradient(180deg, #2b3038, var(--tinta)); color: #fff; border-color: var(--tinta); }
.btn-tinta:hover { border-color: var(--vermelho); }
.btn-perigo { border-color: var(--vermelho-borda); color: var(--vermelho); background: #fff; }
.btn-perigo:hover { background: var(--vermelho-claro); border-color: var(--vermelho); }
.btn-fantasma { border-color: transparent; color: var(--cinza); background: transparent; }
.btn-fantasma:hover { box-shadow: none; transform: none; background: rgba(18,18,18,.05); color: var(--tinta); }
.btn-sm { padding: 7px 12px; min-height: 34px; font-size: 12px; }
.btn-ico { padding: 0; width: 40px; min-height: 40px; border-radius: 50%; }
.btn-ico.btn-sm { width: 34px; min-height: 34px; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .65; cursor: progress; transform: none; box-shadow: none; }
.btn[aria-busy="true"] { pointer-events: none; }
.btn .spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; display: none; }
.btn[aria-busy="true"] .spin { display: inline-block; }
.btn[aria-busy="true"] .rotulo-normal { display: none; }
.btn .rotulo-ocupado { display: none; }
.btn[aria-busy="true"] .rotulo-ocupado { display: inline; }
@keyframes gira { to { transform: rotate(360deg); } }
/* Botão de download: o ícone do tipo (.ico-arq, de parciais/icones_arquivo) vale no estado normal, o spinner no ocupado e o check no sucesso — nunca dois juntos, nem um espaço vazio. */
.btn[aria-busy="true"] .ico-arq { display: none; }
.check-ok { display: none; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.btn.sucesso .check-ok { display: inline-block; animation: desenha .35s var(--ease-out) forwards; }
.btn.sucesso .ico-arq { display: none; }
@keyframes desenha { to { stroke-dashoffset: 0; } }
.acoes-exportar { justify-content: flex-end; margin-bottom: 10px; }
.acoes-exportar a { text-decoration: none; }

.segment { position: relative; display: inline-flex; border: 1px solid var(--borda-forte); border-radius: 999px; padding: 3px; background: var(--superficie); isolation: isolate; }
.segment button { position: relative; z-index: 1; border: 0; background: transparent; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--cinza); border-radius: 999px; transition: color .2s; }
.segment button.on { color: #fff; }
.segment .cursor { position: absolute; top: 3px; bottom: 3px; left: 3px; width: 60px; background: var(--tinta); border-radius: 999px; z-index: 0; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--cinza); cursor: pointer; user-select: none; }
.toggle input { appearance: none; width: 34px; height: 20px; border-radius: 999px; background: var(--cinza-fraco); position: relative; transition: background .2s; cursor: pointer; margin: 0; }
.toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s var(--ease-out); }
.toggle input:checked { background: var(--tinta); }
.toggle input:checked::after { transform: translateX(14px); }