/* Painel · equipe, minha conta e configurações (usa os tokens de admin.css).
   Tudo fica dentro de .ajustes para não mexer nas outras telas. */

/* ── peças comuns ── */
.ajustes .campo > .campo-rotulo, .ajustes .campo-rotulo{font-size:12.5px; font-weight:500; color:var(--ink-soft)}
.ajustes .campo > .ajuda{font-size:12px; font-weight:400; color:var(--ink-dim)}
.ajustes .campo > .campo-erro, .ajustes .campo-erro{font-size:12.5px; font-weight:500; color:var(--erro-texto)}
.ajustes .entrada[aria-invalid="true"]{border-color:var(--perigo)}
.ajustes .entrada[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(229,140,133,.3)}
.ajustes .modal-caixa{max-height:calc(100svh - 32px); overflow:auto}
.ajustes-texto{color:var(--ink-2); margin-bottom:4px}
.ajustes-form{display:flex; flex-direction:column; gap:14px}
.ajustes-grupo{margin:0; padding:0; border:0; min-width:0; display:flex; flex-direction:column; gap:8px}
.ajustes-grupo > legend{padding:0; margin-bottom:8px}
.ajustes-secoes{display:flex; flex-direction:column; gap:18px; max-width:880px}
.ajustes-secao{min-width:0}
.ajustes-cabeca{margin-bottom:16px}
.ajustes-cabeca h2{scroll-margin-top:84px}
.ajustes-cabeca p{margin-top:4px; color:var(--ink-soft); font-size:13.5px}
.ajustes-cabeca--acao{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap}
.ajustes-cabeca--acao > div{flex:1 1 260px; min-width:0}
.ajustes-salvar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-top:4px}
.ajustes-marcar{display:inline-flex; align-items:center; gap:10px; align-self:flex-start; color:var(--ink-2); cursor:pointer; font-size:13.5px}
.ajustes-marcar input, .equipe-opcao input{width:18px; height:18px; margin:0; flex:none; accent-color:var(--gold); cursor:pointer}
/* ocupado sem perder o foco: aria-disabled no lugar de disabled (o foco fica no botão) */
.ajustes .botao[aria-disabled="true"]{opacity:.55; cursor:not-allowed}
.ajustes select[aria-disabled="true"]{opacity:.7; cursor:progress}

/* ── equipe ── */
.equipe-papeis{margin-bottom:18px}
.equipe-papeis h2{font-size:15px; margin-bottom:10px}
.equipe-papeis dl{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:10px 18px; margin:0}
.equipe-papeis dt{font-weight:600; color:var(--ink)}
.equipe-papeis dd{margin:2px 0 0; color:var(--ink-soft); font-size:13.5px}

.equipe-lista{list-style:none; margin:0; padding:0; border:1px solid var(--border); border-radius:var(--raio); background:var(--surface); overflow:hidden}
.equipe-linha{display:grid; grid-template-columns:minmax(220px, 1.5fr) minmax(150px, .8fr) minmax(170px, 1fr) auto;
  grid-template-areas:"pessoa papel situacao acoes"; align-items:center; gap:12px 16px; padding:14px 16px; border-top:1px solid var(--border)}
.equipe-linha:first-child{border-top:0}
.equipe-linha--inativa{background:var(--bg-2)}
.equipe-linha--inativa .avatar{opacity:.55}
.equipe-pessoa{grid-area:pessoa; display:flex; align-items:center; gap:12px; min-width:0}
.equipe-ident{min-width:0}
.equipe-nome{font-weight:600; color:var(--ink); overflow-wrap:anywhere}
.equipe-nome .etiqueta{margin-left:4px; vertical-align:1px}
.equipe-email{font-size:12.5px; color:var(--ink-soft); overflow-wrap:anywhere}
.equipe-papel{grid-area:papel; min-width:0}
.equipe-papel select{min-height:36px; padding:6px 10px}
.equipe-papel-fixo{color:var(--ink-2); font-weight:500}
.equipe-situacao{grid-area:situacao; display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0}
.equipe-acesso{font-size:12.5px; color:var(--ink-soft)}
.equipe-acoes{grid-area:acoes; display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end}
.equipe-vazio{margin-top:16px}

.equipe-opcao{display:flex; align-items:flex-start; gap:12px; min-height:44px; padding:10px 12px; border:1px solid var(--border-2); border-radius:var(--raio-sm); cursor:pointer}
.equipe-opcao input{margin-top:2px}
.equipe-opcao > span{display:flex; flex-direction:column; gap:1px}
.equipe-opcao strong{color:var(--ink); font-weight:600}
.equipe-opcao:has(input:checked){border-color:var(--acento); background:var(--gold-wash)}
.equipe-opcao:has(input:focus-visible){outline:2px solid var(--acento); outline-offset:2px}

.senha-temporaria{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 0 10px}
.senha-temporaria-valor{flex:1 1 200px; display:block; padding:12px 14px; border-radius:var(--raio-sm); border:1px dashed var(--borda-campo); background:var(--bg);
  color:var(--ink); font:600 20px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing:.06em; text-align:center; user-select:all; overflow-wrap:anywhere}
.senha-uma-vez{display:flex; gap:8px; align-items:flex-start; margin:0 0 12px; font-size:13px; color:var(--ink-soft)}
.senha-uma-vez svg{flex:none; margin-top:1px; color:var(--acento)}
.senha-confirmar{margin-top:16px; padding:12px 14px; border-radius:var(--raio-sm); border:1px solid var(--alerta); border-left-width:4px; background:var(--gold-wash)}
.senha-confirmar p{color:var(--ink-2)}
.senha-confirmar strong{color:var(--ink)}
.senha-confirmar .modal-acoes{margin-top:12px; flex-wrap:wrap}

/* ── minha conta ── */
.conta-aviso{display:flex; gap:14px; align-items:flex-start; max-width:880px; margin-bottom:18px; padding:16px 18px; border-radius:var(--raio);
  background:var(--gold-wash); border:1px solid var(--alerta); border-left-width:4px}
.conta-aviso > svg{flex:none; margin-top:2px; color:var(--alerta)}
.conta-aviso h2{font-size:16px}
.conta-aviso p{margin-top:4px; color:var(--ink-2)}
.conta-aviso .botao{margin-top:10px}
.conta-aviso--ok{background:var(--surface); border-color:var(--ok)}
.conta-aviso--ok > svg{color:var(--ok)}
.conta-identidade{display:flex; align-items:center; gap:14px; min-width:0}
.conta-identidade > div{min-width:0}
.conta-nome{font-weight:600; color:var(--ink); font-size:15.5px; overflow-wrap:anywhere}
.conta-sub{font-size:12.5px; color:var(--ink-soft); overflow-wrap:anywhere}

.conta-cores{display:flex; flex-wrap:wrap; gap:10px}
.conta-cor{position:relative; display:inline-grid; place-items:center; cursor:pointer}
.conta-cor input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.conta-cor-amostra{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; border:1px solid var(--borda-campo); color:var(--avatar-ink)}
.conta-cor-amostra--auto{border-style:dashed; border-width:2px}
.conta-cor input:checked + .conta-cor-amostra{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--ink)}
.conta-cor input:focus-visible + .conta-cor-amostra{outline:2px solid var(--acento); outline-offset:5px}

.conta-aparelhos{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.conta-aparelho{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--border)}
.conta-aparelho:first-child{border-top:0; padding-top:0}
.conta-aparelho > div{min-width:0}
.conta-aparelho-nome{font-weight:600; color:var(--ink-2)}
.conta-aparelho-nome .etiqueta{margin-left:4px; vertical-align:1px}
.conta-so-este{margin-top:10px}

/* ── configurações ── */
.cfg-indice{display:flex; flex-wrap:wrap; gap:6px; margin:-6px 0 16px; max-width:880px}
.cfg-indice .botao{border-color:var(--border-2)}
.cfg-prefixo{position:relative}
.cfg-prefixo > span{position:absolute; left:12px; top:50%; translate:0 -50%; color:var(--ink-soft); pointer-events:none}
.cfg-prefixo .entrada{padding-left:28px}
.cfg-mensagem{min-height:120px}
.cfg-variaveis{display:flex; flex-wrap:wrap; gap:8px; margin-top:-4px}
.cfg-previa{padding:12px 14px; border-radius:var(--raio-sm) var(--raio) var(--raio) var(--raio); background:var(--elev); border:1px solid var(--border)}
.cfg-previa-rotulo{font-size:12px; color:var(--ink-soft); margin-bottom:6px}
.cfg-previa-texto{color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere}
.cfg-faixas{display:flex; flex-wrap:wrap; gap:8px}
.cfg-faixas .selo{white-space:normal}
.cfg-interruptor{display:flex; flex-direction:column; gap:4px}
.cfg-interruptor .interruptor{align-items:flex-start; min-height:32px}
.cfg-interruptor .trilho{flex:none; margin-top:1px}
.cfg-interruptor-texto{color:var(--ink-2); padding-top:1px}
.cfg-interruptor .ajuda{padding-left:50px}
.cfg-dias{display:flex; flex-wrap:wrap; gap:8px}
.cfg-dia{position:relative; display:inline-flex}
.cfg-dia input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.cfg-dia span{display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:58px; min-height:38px; padding:0 12px; border-radius:999px;
  border:1px solid var(--borda-campo); color:var(--ink-2); font-weight:500}
.cfg-dia input:checked + span{border-color:var(--acento); background:var(--gold-wash); color:var(--ink)}
.cfg-dia input:checked + span svg{color:var(--acento)}
.cfg-dia input:focus-visible + span{outline:2px solid var(--acento); outline-offset:2px}
.cfg-horarios{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; align-items:start}
.cfg-curto{max-width:320px}
.cfg-nota{display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--ink-soft)}
.cfg-nota svg{flex:none; margin-top:1px}

/* ── responsivo ── */
@media (max-width:1100px){
  .equipe-linha{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); grid-template-areas:"pessoa situacao" "papel acoes"}
}
@media (max-width:640px){
  .equipe-linha{grid-template-columns:minmax(0, 1fr); grid-template-areas:"pessoa" "situacao" "papel" "acoes"}
  .equipe-acoes{justify-content:flex-start}
  .equipe-situacao{flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px 10px}
  .cfg-interruptor .ajuda{padding-left:0}
}

/* toque: alvos com pelo menos 44px */
@media (pointer:coarse){
  .conta-cor-amostra{width:44px; height:44px}
  .cfg-dia span{min-height:44px}
  .ajustes-marcar{min-height:44px}
  .equipe-papel select{min-height:44px}
  .cfg-interruptor .interruptor{min-height:44px; align-items:center}
  .cfg-interruptor .trilho{margin-top:0}
}

/* Página curta no celular: sem isto a grade do .app reparte a sobra da altura
   entre as linhas e a barra do topo estica (ver needs do integrador). */
.app:has(.ajustes){align-content:start}