/* components/buttons.css — Botões de ação (.btn) e suas variações: .primary, .dark, .out, .auto e .danger; botão quadrado de ícone (.sq), botão de ícone pequeno (.iconbtn), pílula (.chipbtn) e alternador (.seg). */

.btn{display:flex;align-items:center;justify-content:center;width:100%;padding:1rem;border-radius:14px;font-weight:700;font-size:1.05rem;transition:.15s}
.btn.primary{background:var(--btn);color:#fff}
.btn.primary:disabled{background:var(--primary-off);cursor:not-allowed}
.btn.dark{background:var(--btn);color:#fff}
.btn.out{border:2px solid var(--btn)}
.btn.auto{width:auto;padding:.9rem 1.6rem}
.sq{width:50px;height:50px;border-radius:14px;background:var(--bg);display:grid;place-items:center;flex:none}
.sq:disabled{opacity:.35;cursor:not-allowed}
.btn.danger{background:var(--err);color:#fff}
.btn.out.danger{background:transparent;color:var(--err);border-color:var(--err)}
.iconbtn{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--muted);flex:none}
.iconbtn:hover{background:var(--primary-soft);color:var(--brand)}
.iconbtn[data-cancel]:hover{background:var(--err-soft);color:var(--err)}
.iconbtn .i{width:18px;height:18px}
.chipbtn{padding:.45rem .9rem;border-radius:99px;border:1px solid var(--brand);background:#fff;font-weight:700;font-size:.85rem;color:var(--brand)}
.seg{display:inline-flex;background:var(--soft-surface);border-radius:10px;padding:3px}
.seg button{padding:.4rem 1rem;border-radius:8px;font-weight:700;font-size:.85rem;color:var(--brand)}
.seg button[aria-pressed="true"]{background:var(--btn);color:#fff}

/* Mouse por cima de um botão: só um sombreamento, sem trocar a cor */
.btn:hover:not(:disabled),.chipbtn:hover,.seg button:hover,.sq:hover:not(:disabled),.tab:hover{box-shadow:var(--btn-shadow)}
.chipbtn:focus-visible,.seg button:focus-visible,.iconbtn:focus-visible,.linkbtn:focus-visible,.linkcell:focus-visible{outline:3px solid var(--brand-light);outline-offset:2px}