/* assets/css/componentes.css
   Componentes do Design System (nomes do vocabulário namethatui.com entre
   parênteses): botão, botão de ícone, campo (form field), pílula (badge),
   chip, controle segmentado (segmented control / toggle group), aviso em
   linha (inline alert / callout), toast, avatar, estado vazio (empty state),
   etapas (steps) e ícones. Classes antigas (.btn, .badge, .tab…) são
   apelidos das novas e seguem valendo nas telas existentes. */

/* ── Botão ─────────────────────────────────────────────────────────────── */
.botao,.btn{
  --b-fundo:var(--papel-2);--b-texto:var(--texto);--b-borda:var(--borda-forte);
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:0 16px;border-radius:var(--r);
  border:1px solid var(--b-borda);background:var(--b-fundo);color:var(--b-texto);
  font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;text-decoration:none;
  box-shadow:inset 0 1px 0 var(--vidro-brilho);
  transition:background var(--rapido) var(--curva),border-color var(--rapido),transform var(--rapido) var(--curva),box-shadow var(--rapido),opacity var(--rapido);
}
.botao:hover,.btn:hover{border-color:var(--bronze-borda)}
.botao:active,.btn:active{transform:scale(.97)}
.botao:disabled,.btn:disabled{opacity:.5;transform:none}
.botao.carregando,.btn.carregando{color:transparent!important}
.botao.carregando::after{
  content:'';position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--b-texto);border-right-color:transparent;animation:girar .7s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}

.botao-primario,.btn-primary,.btn-login{
  --b-texto:#2B1D05;--b-borda:rgba(255,236,190,.55);
  --b-fundo:linear-gradient(180deg,#F3D27E 0%,var(--bronze) 48%,var(--bronze-forte) 100%);
  background:var(--b-fundo);color:var(--b-texto)!important;
  box-shadow:inset 0 1px 0 rgba(255,250,235,.75),inset 0 -1px 0 rgba(90,60,10,.25),0 6px 18px rgba(201,151,58,.28);
}
.botao-primario:hover,.btn-primary:hover{filter:brightness(1.05);border-color:rgba(255,236,190,.8)}
.botao-secundario,.btn-secondary{--b-fundo:var(--papel-2);--b-texto:var(--texto)}
.botao-texto{--b-fundo:transparent;--b-borda:transparent;--b-texto:var(--bronze-texto);box-shadow:none;padding:0 10px}
.botao-texto:hover{background:var(--bronze-suave)}
.btn-danger{--b-fundo:var(--vermelho-suave);--b-texto:var(--vermelho);--b-borda:color-mix(in srgb,var(--vermelho) 35%,transparent)}
.btn-green{--b-fundo:var(--verde-suave);--b-texto:var(--verde);--b-borda:color-mix(in srgb,var(--verde) 35%,transparent)}
.botao-largo,.btn-login{width:100%}
.botao-mini,.btn-sm,.btn.btn-sm{min-height:32px;padding:0 12px;font-size:13px}
.btn-login{min-height:48px;font-size:15px}

/* Botão de ícone (só ícone, 40×40, com rótulo acessível obrigatório) */
.botao-icone{
  position:relative;display:inline-grid;place-items:center;flex:none;
  width:40px;height:40px;border-radius:var(--r);
  border:1px solid transparent;background:transparent;color:var(--texto-2);
  transition:background var(--rapido),color var(--rapido),border-color var(--rapido),transform var(--rapido) var(--curva);
}
.botao-icone:hover{background:var(--papel-2);color:var(--texto);border-color:var(--borda)}
.botao-icone:active{transform:scale(.94)}
.botao-icone[aria-pressed="true"]{color:var(--bronze-texto)}

/* ── Campo (form field) ────────────────────────────────────────────────── */
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;text-align:left}
.campo>span:first-child{font-size:13px;font-weight:600;color:var(--texto-2)}
.campo small{font-size:12px;color:var(--texto-3)}
.campo-com-botao{position:relative;display:block}
.campo-com-botao input{padding-right:48px}
.campo-com-botao .botao-icone{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:38px;height:38px}
label{display:block;font-size:13px;font-weight:600;color:var(--texto-2);margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=month],input[type=search],input:not([type]),select,textarea{
  width:100%;min-height:44px;padding:10px 14px;
  background:var(--papel-2);color:var(--texto);
  border:1px solid var(--borda-forte);border-radius:var(--r);
  font-size:15px;outline:none;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
  transition:border-color var(--rapido),box-shadow var(--rapido),background var(--rapido);
}
textarea{min-height:88px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--texto-3);opacity:1}
input:focus,select:focus,textarea:focus{border-color:var(--bronze);box-shadow:0 0 0 4px var(--bronze-suave)}
input:disabled,select:disabled,textarea:disabled,input[readonly]{opacity:.72}
select{appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--texto-3) 50%),linear-gradient(135deg,var(--texto-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;background-size:5px 5px;background-repeat:no-repeat}
select option{background:var(--fundo-2);color:var(--texto)}
input[type=checkbox],input[type=radio]{accent-color:var(--bronze);width:18px;height:18px}
input[type=file]{font-size:13px}

/* ── Pílula (badge) e etiqueta (tag) ───────────────────────────────────── */
.pilula,.badge{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  padding:3px 10px;border-radius:var(--r-pilula);
  font-size:12px;font-weight:600;line-height:1.4;
  background:var(--papel-2);color:var(--texto-2);border:1px solid var(--borda);
}
.pilula-alerta,.badge-yellow{background:var(--amarelo-suave);color:var(--laranja);border-color:transparent}
.pilula-perigo,.badge-red{background:var(--vermelho-suave);color:var(--vermelho);border-color:transparent}
.badge-green{background:var(--verde-suave);color:var(--verde);border-color:transparent}
.badge-blue{background:var(--azul-suave);color:var(--azul);border-color:transparent}
.badge-gold{background:var(--bronze-suave);color:var(--bronze-texto);border-color:transparent}
.badge-gray{background:var(--papel-2);color:var(--texto-3)}
.tag{display:inline-block;padding:2px 9px;margin:2px;border-radius:var(--r-mini);font-size:12px;background:var(--papel-2);color:var(--texto-2);border:1px solid var(--borda)}

/* ── Chip selecionável ─────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 12px 6px 8px;border-radius:var(--r);
  border:1px solid var(--borda-forte);background:var(--papel-2);font-size:13px;font-weight:500;color:var(--texto);cursor:pointer}
.chip:has(input:checked){border-color:var(--bronze-borda);background:var(--bronze-suave)}
.chip input{width:16px;height:16px}

/* ── Controle segmentado (segmented control) ───────────────────────────── */
.segmentos,.tabs,.company-tabs{
  display:inline-flex;gap:2px;padding:3px;margin-bottom:18px;
  background:var(--papel-2);border:1px solid var(--borda);border-radius:var(--r);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.12);max-width:100%;overflow-x:auto;scrollbar-width:none;
}
.segmentos button,.tab,.company-tabs button{
  flex:1 0 auto;min-height:34px;padding:0 16px;border:0;border-radius:12px;background:transparent;
  font-size:14px;font-weight:500;color:var(--texto-2);cursor:pointer;white-space:nowrap;
  transition:background var(--rapido) var(--curva),color var(--rapido),box-shadow var(--rapido);
  display:inline-flex;align-items:center;justify-content:center;
}
.segmentos button:hover,.tab:hover:not(.active),.company-tabs button:hover{color:var(--texto)}
.segmentos button.ativo,.tab.active,.company-tabs button.active{
  background:var(--papel-hover);color:var(--texto);font-weight:650;
  box-shadow:0 1px 3px rgba(0,0,0,.18),inset 0 1px 0 var(--vidro-brilho);
}
.company-tabs{display:flex}

/* ── Aviso em linha (inline alert) ─────────────────────────────────────── */
.alert,.nota{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:12px 16px;margin-bottom:12px;border-radius:var(--r);
  font-size:14px;line-height:1.45;border:1px solid transparent;
  background:var(--papel-2);color:var(--texto-2);
}
.alert>.btn,.alert>button{margin-left:auto}
.alert-warn,.nota-alerta{background:var(--amarelo-suave);color:var(--texto);border-color:color-mix(in srgb,var(--laranja) 30%,transparent)}
.alert-warn b{color:var(--laranja)}
.alert-danger{background:var(--vermelho-suave);color:var(--texto);border-color:color-mix(in srgb,var(--vermelho) 30%,transparent)}
.alert-info{background:var(--azul-suave);color:var(--texto);border-color:color-mix(in srgb,var(--azul) 26%,transparent)}
.alert-success{background:var(--verde-suave);color:var(--texto);border-color:color-mix(in srgb,var(--verde) 28%,transparent)}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.toast,#toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:900;
  max-width:min(520px,calc(100vw - 32px));padding:12px 18px;border-radius:var(--r);
  background:var(--vidro-forte);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--vidro-borda);box-shadow:var(--sombra-flutuante);
  color:var(--texto);font-size:14px;font-weight:500;
  transform:translate(-50%,24px);opacity:0;pointer-events:none;
  transition:transform var(--medio) var(--curva),opacity var(--rapido);
}
.toast.visivel{transform:translate(-50%,0);opacity:1}
.toast[data-tipo="erro"]{border-color:color-mix(in srgb,var(--vermelho) 45%,transparent)}

/* ── Avatar ────────────────────────────────────────────────────────────── */
.avatar{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(150deg,var(--patina),#2E7F74);color:#fff;font-size:14px;font-weight:700}
.avatar-mini{width:28px;height:28px;font-size:12px}

/* ── Estado vazio (empty state) ────────────────────────────────────────── */
.estado-vazio,.empty-state{text-align:center;padding:48px 24px;color:var(--texto-2)}
.estado-vazio{display:grid;justify-items:center;gap:10px;border:1px dashed var(--borda-forte);border-radius:var(--r);background:var(--papel)}
.estado-vazio h3{font-size:var(--t-destaque);color:var(--texto)}
.estado-vazio p{max-width:46ch}
.estado-vazio .ico{color:var(--bronze-texto)}

/* ── Etapas (steps) ────────────────────────────────────────────────────── */
.etapas{display:flex;gap:6px;justify-content:center;list-style:none;margin:4px 0 18px}
.etapas button{width:8px;height:8px;padding:0;border-radius:var(--r-pilula);border:0;background:var(--borda-forte);transition:width var(--medio) var(--curva),background var(--rapido)}
.etapas button[aria-current="step"]{width:26px;background:var(--bronze)}

/* ── Divisor ───────────────────────────────────────────────────────────── */
.divisor{display:flex;align-items:center;gap:12px;margin:18px 0 12px;color:var(--texto-3);font-size:12px}
.divisor::before,.divisor::after{content:'';flex:1;height:1px;background:var(--borda-forte)}
.divider{border:0;border-top:1px solid var(--borda);margin:20px 0}

/* ── Ícones em telas antigas (máscara; cor herdada do texto) ───────────── */
[class^="ico-"],[class*=" ico-"]{display:inline-block;width:16px;height:16px;vertical-align:-3px;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.access-denied [class^="ico-"]{width:44px;height:44px;color:var(--bronze-texto)}
.ico-lapis{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 5.5 18.5 8.5 9 18l-4 1 1-4z'/%3E%3Cpath d='m13.5 7.5 3 3'/%3E%3C/svg%3E")}
.ico-salvar{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6.5A2.5 2.5 0 0 1 7.5 4h8l3.5 3.5v10A2.5 2.5 0 0 1 16.5 20h-9A2.5 2.5 0 0 1 5 17.5z'/%3E%3Cpath d='M8.5 4v4.5h6V4M8 20v-5.5h8V20'/%3E%3C/svg%3E")}
.ico-lixeira{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14M10 4h4M7 7l.8 12a1.6 1.6 0 0 0 1.6 1.5h5.2a1.6 1.6 0 0 0 1.6-1.5L17 7'/%3E%3C/svg%3E")}
.ico-cadeado{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='3'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E")}
.ico-grafico{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5h16'/%3E%3Cpath d='M7 16v-4.5'/%3E%3Cpath d='M11 16V8'/%3E%3Cpath d='M15 16v-6'/%3E%3Cpath d='M19 16V5.5'/%3E%3C/svg%3E")}
.ico-recibo{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h12v17l-2.4-1.5-2.4 1.5-2.4-1.5-2.4 1.5L6 20.5z'/%3E%3Cpath d='M9 8.5h6M9 12h6M9 15.5h3.5'/%3E%3C/svg%3E")}

/* Seletor de período (DRE, dashboard, empresa): compacto, não ocupa a linha toda. */
select.seletor-periodo{width:auto;min-width:200px;min-height:38px;font-size:14px}

/* ── Switch (estilo iOS) ───────────────────────────────────────────────── */
.switch{position:relative;flex:none;width:44px;height:26px;padding:0;border:0;border-radius:var(--r-pilula);
  background:color-mix(in srgb,var(--texto) 18%,transparent);box-shadow:inset 0 0 0 1px var(--borda);
  transition:background var(--medio) var(--curva)}
.switch-botao{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.25),0 0 0 .5px rgba(0,0,0,.06);transition:transform var(--medio) var(--curva),width var(--rapido) var(--curva)}
.switch:active .switch-botao{width:26px}
.switch[aria-checked="true"]{background:#34C759}
.switch[aria-checked="true"] .switch-botao{transform:translateX(18px)}
.switch[aria-checked="true"]:active .switch-botao{transform:translateX(14px)}
.switch:disabled{opacity:.45}