/* Equipe Cariello — tema claro/escuro. Texto grande e contraste alto para quem tem vista cansada. */
:root,
:root[data-tema="claro"] {
  --fundo: #f2f6fa;
  --brilho: rgba(10, 100, 164, .08);
  --cartao: #ffffff;
  --cartao-2: #f6f9fc;
  --borda: #dfe7ef;
  --borda-forte: #c4d0dc;
  --texto: #1a2734;
  --texto-suave: #5a6b7c;
  --primaria: #0a64a4;
  --primaria-2: #0a64a4;
  --primaria-fundo: #dcecf8;
  --sobre-primaria: #ffffff;
  --foco: #f59e0b;
  --erro: #b42318;
  --erro-fundo: #fee4e2;
  --pendente: #a14a07;
  --pendente-fundo: #fff1d6;
  --analise: #0e7490;
  --analise-fundo: #d5eff4;
  --concluido: #067647;
  --concluido-fundo: #d9f5e5;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -8px rgba(16, 24, 40, .10);
  --sombra-forte: 0 10px 24px -10px rgba(10, 100, 164, .5);
  color-scheme: light;
}

:root[data-tema="escuro"] {
  --fundo: #0a1119;
  --brilho: rgba(107, 184, 240, .10);
  --cartao: #111b26;
  --cartao-2: #0d1620;
  --borda: #203041;
  --borda-forte: #354a60;
  --texto: #eaf1f8;
  --texto-suave: #9fb1c3;
  --primaria: #6bb8f0;
  --primaria-2: #6bb8f0;
  --primaria-fundo: #14324a;
  --sobre-primaria: #07202f;
  --foco: #fbbf24;
  --erro: #fda29b;
  --erro-fundo: #3c1513;
  --pendente: #fdc56b;
  --pendente-fundo: #36270c;
  --analise: #67d4e8;
  --analise-fundo: #0e3440;
  --concluido: #6ce9a6;
  --concluido-fundo: #0f3323;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -8px rgba(0, 0, 0, .55);
  --sombra-forte: 0 10px 24px -10px rgba(107, 184, 240, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { font-size: 112.5%; } /* 18px: tudo em rem cresce junto */

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(60rem 28rem at 50% -8rem, var(--brilho), transparent 70%),
    var(--fundo);
  background-repeat: no-repeat;
  color: var(--texto);
  font-family: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 6px; }
.ic { flex: none; }

.pular { position: absolute; left: -999px; top: 0; background: var(--primaria); color: var(--sobre-primaria); padding: .75rem 1rem; z-index: 30; }
.pular:focus { left: 0; }

/* ---------- Topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--cartao) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--borda);
}
.topo-in { max-width: 72rem; margin: 0 auto; padding: .7rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.marca { display: flex; align-items: center; gap: .7rem; color: var(--texto); text-decoration: none; min-width: 0; }
.marca-logo { width: 2.6rem; height: 2.6rem; border-radius: .85rem; display: block; flex: none; box-shadow: var(--sombra-forte); }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marca-nome { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap; }
.marca-sub { font-size: .75rem; color: var(--texto-suave); font-weight: 500; }
.topo-acoes { display: flex; align-items: center; gap: .5rem; }
.usuario { display: none; align-items: center; gap: .55rem; font-weight: 600; font-size: .9rem; color: var(--texto-suave); margin-right: .25rem; }
.avatar {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--primaria-fundo); color: var(--primaria); font-weight: 800; font-size: .8rem;
}
@media (min-width: 40rem) { .usuario:not([hidden]) { display: inline-flex; } }
@media (max-width: 30rem) { .marca-sub { display: none; } }

.btn-icone {
  width: 2.9rem; height: 2.9rem; display: grid; place-items: center; cursor: pointer;
  background: var(--cartao); color: var(--texto); border: 1.5px solid var(--borda); border-radius: .85rem;
  transition: border-color .15s, background-color .15s;
}
.btn-icone:hover { border-color: var(--primaria); color: var(--primaria); }

/* ---------- Menu ---------- */
.abas {
  max-width: 72rem; margin: 1.1rem auto 0; padding: 0 1rem;
  display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }
.aba {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; flex: 1 0 auto;
  min-height: 3.2rem; padding: .5rem 1.1rem; white-space: nowrap;
  background: var(--cartao); color: var(--texto); border: 1.5px solid var(--borda); border-radius: .95rem;
  font-weight: 700; font-size: .95rem; text-decoration: none; transition: border-color .15s;
}
.aba:hover { border-color: var(--primaria); }
.aba[aria-current="page"] { background: linear-gradient(135deg, var(--primaria), var(--primaria-2)); border-color: transparent; color: #fff; box-shadow: var(--sombra-forte); }
@media (min-width: 40rem) { .aba { flex: 0 0 auto; } }

.miolo { max-width: 72rem; margin: 0 auto; padding: 1.25rem 1rem 6rem; outline: none; }
.estreito { max-width: 46rem; margin: 0 auto; }

/* ---------- Tipografia ---------- */
h1 { font-size: 1.75rem; line-height: 1.2; letter-spacing: -.02em; margin: .25rem 0 .35rem; font-weight: 800; }
h2 { font-size: 1.1rem; margin: 0 0 .9rem; font-weight: 700; letter-spacing: -.01em; }
.sub { color: var(--texto-suave); margin: 0 0 1.25rem; font-size: 1rem; }
.titulo-linha { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.titulo-linha .sub { margin: 0; }
.acoes-exportar { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- Cartões ---------- */
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 1.25rem; padding: 1.25rem; box-shadow: var(--sombra); margin-bottom: 1rem; }
.cartao-0 { padding: 0; overflow: hidden; }
.cartao-cab { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--borda); display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.cartao-cab h2 { margin: 0; }
.grade-2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 56rem) { .grade-2 { grid-template-columns: 3fr 2fr; align-items: start; } }

/* ---------- Botões ---------- */
.btn {
  appearance: none; border: 1.5px solid transparent; cursor: pointer; font: inherit; font-weight: 700;
  min-height: 3.3rem; padding: .6rem 1.4rem; border-radius: .95rem; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  transition: transform .08s, box-shadow .15s, border-color .15s, filter .15s;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-principal { background: linear-gradient(135deg, var(--primaria), var(--primaria-2)); color: #fff; font-size: 1.05rem; min-height: 3.6rem; width: 100%; box-shadow: var(--sombra-forte); }
.btn-principal:hover:not([disabled]) { filter: brightness(1.07); }
.btn-auto { width: auto; }
.btn-contorno { background: var(--cartao); color: var(--texto); border-color: var(--borda-forte); }
.btn-contorno:hover { border-color: var(--primaria); color: var(--primaria); }
.btn-mini { min-height: 2.9rem; padding: .3rem 1rem; font-size: .9rem; white-space: nowrap; }
.btn-perigo { color: var(--erro); }
.btn-perigo:hover { border-color: var(--erro); color: var(--erro); }
.voltar { margin-bottom: 1rem; }

/* ---------- Formulários ---------- */
.campo { margin-bottom: 1.15rem; }
.campo > label, .rotulo { display: block; font-weight: 700; margin-bottom: .4rem; font-size: 1rem; }
.dica { color: var(--texto-suave); font-weight: 500; font-size: .9rem; }
.obrig { color: var(--erro); }
.entrada {
  width: 100%; min-height: 3.4rem; padding: .7rem 1rem; font: inherit; font-size: 1.05rem;
  color: var(--texto); background: var(--cartao-2); border: 1.5px solid var(--borda-forte); border-radius: .9rem;
  transition: border-color .15s, box-shadow .15s;
}
.entrada::placeholder { color: var(--texto-suave); opacity: .75; }
textarea.entrada { min-height: 8rem; resize: vertical; }
select.entrada { appearance: auto; }
.entrada:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 4px var(--primaria-fundo), 0 0 0 6px var(--primaria); }
.entrada[aria-invalid="true"] { border-color: var(--erro); }
.msg-erro { color: var(--erro); font-weight: 600; margin: .4rem 0 0; font-size: .95rem; }
.caixa-erro { display: flex; gap: .6rem; align-items: flex-start; background: var(--erro-fundo); color: var(--erro); border: 1.5px solid var(--erro); border-radius: 1rem; padding: .9rem 1rem; margin-bottom: 1rem; font-weight: 600; }
.linha2 { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .linha2 { grid-template-columns: 1fr 1fr; } }

.escolha { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .55rem; }
.escolha input { position: absolute; opacity: 0; pointer-events: none; }
.escolha label {
  display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.3rem; margin: 0; padding: .4rem .7rem;
  border: 1.5px solid var(--borda-forte); border-radius: .95rem; cursor: pointer; background: var(--cartao-2); font-weight: 700; text-align: center;
}
.escolha label:hover { border-color: var(--primaria); }
.escolha input:checked + label { background: var(--primaria-fundo); border-color: var(--primaria); color: var(--primaria); box-shadow: inset 0 0 0 1.5px var(--primaria); }
.escolha input:focus-visible + label { outline: 3px solid var(--foco); outline-offset: 2px; }

.senha-linha { position: relative; }
.senha-linha .entrada { padding-right: 7rem; }
/* Centralizado sem transform: o :active dos botões troca o transform e fazia este botão descer. */
.senha-ver { position: absolute; right: .4rem; top: 0; bottom: 0; margin: auto 0; height: fit-content; }

.busca-caixa { position: relative; }
.busca-caixa .ic { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--texto-suave); pointer-events: none; }
.busca-caixa .entrada { padding-left: 2.9rem; }
.busca-caixa input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

.nome-linha { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.selo-mini { padding: .15rem .65rem; font-size: .8rem; line-height: 1.3; }

/* ---------- Estatísticas ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1.25rem; }
@media (min-width: 40rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 64rem) { .stats.cinco { grid-template-columns: repeat(5, 1fr); } }
.stat {
  appearance: none; font: inherit; color: var(--texto); text-align: left; cursor: pointer; text-decoration: none;
  background: var(--cartao); border: 1.5px solid var(--borda); border-radius: 1.15rem; padding: 1rem;
  box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .6rem; min-height: 6.6rem; transition: border-color .15s, transform .1s;
}
.stat:hover { border-color: var(--primaria); transform: translateY(-1px); }
.stat[aria-pressed="true"] { border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-fundo), var(--sombra); }
.stat-topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--texto-suave); font-weight: 600; font-size: .9rem; }
.stat-ic { width: 2.2rem; height: 2.2rem; border-radius: .7rem; display: grid; place-items: center; background: var(--primaria-fundo); color: var(--primaria); }
.stat-num { font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.stat.t-pendente .stat-ic { background: var(--pendente-fundo); color: var(--pendente); }
.stat.t-em_analise .stat-ic { background: var(--analise-fundo); color: var(--analise); }
.stat.t-concluido .stat-ic { background: var(--concluido-fundo); color: var(--concluido); }
.stat.t-atraso .stat-ic { background: var(--erro-fundo); color: var(--erro); }

/* ---------- Lista de demandas (líder) ---------- */
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.item {
  display: block; text-decoration: none; color: var(--texto); background: var(--cartao);
  border: 1.5px solid var(--borda); border-radius: 1.15rem; padding: 1.05rem 1.15rem; box-shadow: var(--sombra);
  transition: border-color .15s, transform .1s;
}
.item:hover { border-color: var(--primaria); transform: translateY(-1px); }
.item-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; flex-wrap: wrap; }
.item-nome { font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; }
.item-texto { margin: .45rem 0 .55rem; color: var(--texto-suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-rodape { font-size: .9rem; color: var(--texto-suave); display: flex; gap: .4rem 1rem; flex-wrap: wrap; align-items: center; }

.selo { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; padding: .3rem .75rem .3rem .6rem; border-radius: 999px; font-weight: 700; font-size: .85rem; }
.selo-pendente { background: var(--pendente-fundo); color: var(--pendente); }
.selo-em_analise { background: var(--analise-fundo); color: var(--analise); }
.selo-concluido { background: var(--concluido-fundo); color: var(--concluido); }
.selo-papel { background: var(--primaria-fundo); color: var(--primaria); }
.selo-inativo { background: var(--cartao-2); color: var(--texto-suave); border: 1px solid var(--borda-forte); }

.alerta-dias { display: inline-flex; align-items: center; gap: .45rem; margin-top: .65rem; background: var(--erro-fundo); color: var(--erro); border-radius: .75rem; padding: .4rem .75rem; font-weight: 700; font-size: .88rem; }
.alerta-dias.solto { margin: 0; }

.vazio { text-align: center; padding: 2.5rem 1rem; color: var(--texto-suave); }
.vazio .vazio-ic { width: 4rem; height: 4rem; border-radius: 1.2rem; margin: 0 auto 1rem; display: grid; place-items: center; background: var(--primaria-fundo); color: var(--primaria); }
.vazio p { margin: 0 0 1rem; }

/* ---------- Detalhe ---------- */
.dl { margin: 0; }
.dl > div { padding: .75rem 0; border-top: 1px solid var(--borda); }
.dl > div:first-child { border-top: 0; padding-top: 0; }
.dl dt { color: var(--texto-suave); font-size: .85rem; font-weight: 600; }
.dl dd { margin: .1rem 0 0; font-size: 1.05rem; word-break: break-word; font-weight: 500; }
.dl a { color: var(--primaria); font-weight: 600; }
.cabeca-detalhe { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
.cabeca-detalhe h1 { margin: 0; }
.texto-pedido { margin: 0; font-size: 1.1rem; white-space: pre-wrap; }

.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.passos li { display: flex; gap: .8rem; align-items: center; padding: .75rem .9rem; border: 1.5px solid var(--borda); border-radius: 1rem; color: var(--texto-suave); font-weight: 500; }
.passos .bola { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--borda-forte); font-weight: 700; font-size: .9rem; flex: none; }
.passos li.feito { color: var(--texto); border-color: var(--concluido); }
.passos li.feito .bola { background: var(--concluido); border-color: var(--concluido); color: var(--cartao); }
.passos li.atual { color: var(--texto); border-color: var(--primaria); background: var(--primaria-fundo); font-weight: 700; }
.passos li.atual .bola { background: var(--primaria); border-color: var(--primaria); color: #fff; }

.recado { background: var(--primaria-fundo); border-radius: 1rem; padding: 1rem 1.1rem; }
.recado p { margin: 0; }

/* ---------- Tabelas (admin) ---------- */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); font-weight: 700; padding: .75rem 1.25rem; background: var(--cartao-2); border-bottom: 1px solid var(--borda); }
.tabela td { padding: .9rem 1.25rem; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr.clicavel { cursor: pointer; }
.tabela tbody tr.clicavel:hover { background: var(--cartao-2); }
.tabela .forte { font-weight: 700; }
.tabela .suave { color: var(--texto-suave); font-size: .9rem; }
.tabela a.link-linha { color: inherit; text-decoration: none; }
.tabela a.link-linha:hover { color: var(--primaria); }
.num-dir { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 47.99rem) {
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { padding: 1rem 1.1rem; border-bottom: 1px solid var(--borda); }
  .tabela tbody tr:last-child { border-bottom: 0; }
  .tabela td { padding: .2rem 0; border: 0; display: flex; justify-content: space-between; gap: 1rem; }
  .tabela td[data-rotulo]::before { content: attr(data-rotulo); color: var(--texto-suave); font-size: .85rem; font-weight: 600; flex: none; }
  .tabela td.primeira { display: block; font-size: 1.1rem; padding-bottom: .5rem; }
  .tabela td.primeira::before { content: none; }
  .num-dir { text-align: left; }
}

.filtros { display: grid; gap: .75rem; grid-template-columns: 1fr; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--borda); }
@media (min-width: 48rem) { .filtros { grid-template-columns: 2fr 1fr 1fr; } }
.filtros .campo { margin: 0; }
.filtros .campo > label { font-size: .85rem; margin-bottom: .3rem; color: var(--texto-suave); }
.filtros .entrada { min-height: 3rem; font-size: 1rem; }
.marca-check { display: flex; align-items: center; gap: .6rem; font-weight: 600; cursor: pointer; padding: .25rem 0; }
.marca-check input { width: 1.3rem; height: 1.3rem; accent-color: var(--primaria); }
.rodape-tabela { padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; color: var(--texto-suave); font-size: .9rem; border-top: 1px solid var(--borda); }

/* ---------- Ranking ---------- */
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.rank-topo { display: flex; justify-content: space-between; gap: .75rem; font-weight: 600; margin-bottom: .35rem; }
.rank-topo .suave { color: var(--texto-suave); font-weight: 500; font-size: .9rem; }
.barra { height: .65rem; background: var(--primaria-fundo); border-radius: 999px; overflow: hidden; display: flex; }
.barra i { display: block; height: 100%; }
.barra .b-conc { background: var(--concluido); }
.barra .b-anal { background: var(--analise); }
.barra .b-pend { background: var(--pendente); }
.legenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--texto-suave); margin-top: .9rem; font-weight: 500; }
.legenda span::before { content: ""; display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .4rem; background: currentColor; }
.legenda .l-conc { color: var(--concluido); }
.legenda .l-anal { color: var(--analise); }
.legenda .l-pend { color: var(--pendente); }

.linha-atencao { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1.25rem; border-bottom: 1px solid var(--borda); text-decoration: none; color: var(--texto); }
.linha-atencao:last-child { border-bottom: 0; }
.linha-atencao:hover { background: var(--cartao-2); }
.linha-atencao .quem { min-width: 0; }
.linha-atencao .quem b { display: block; }
.linha-atencao .quem span { color: var(--texto-suave); font-size: .88rem; }

/* ---------- Login ---------- */
.login-caixa { max-width: 27rem; margin: 1.5rem auto 0; }
.login-caixa .logo-grande { width: 3.6rem; height: 3.6rem; border-radius: 1.1rem; margin-bottom: 1.1rem; }
.dica-demo { background: var(--primaria-fundo); border-radius: 1rem; padding: .9rem 1rem; margin-bottom: 1rem; font-size: .92rem; }
.dica-demo p { margin: 0 0 .6rem; font-weight: 600; }
.dica-demo .contas { display: flex; gap: .5rem; flex-wrap: wrap; }
.dica-demo button { min-height: 2.6rem; font-size: .88rem; padding: .2rem .9rem; }

/* ---------- Sucesso ---------- */
.sucesso { text-align: center; padding: 2rem 1rem; }
.sucesso .check { width: 5rem; height: 5rem; border-radius: 50%; margin: 0 auto 1.1rem; display: grid; place-items: center; background: var(--concluido-fundo); color: var(--concluido); }
.sucesso .acoes { display: grid; gap: .7rem; margin-top: 1.5rem; }

/* ---------- Toast e rodapé demo ---------- */
.toast { position: fixed; left: 50%; bottom: 3.2rem; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: .6rem; max-width: calc(100% - 2rem); padding: .85rem 1.2rem; border-radius: 1rem; font-weight: 600; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .45); }
.toast-ok { background: var(--concluido); color: var(--cartao); }
.toast-erro { background: var(--erro); color: var(--cartao); }
.aviso-demo { position: fixed; left: 0; right: 0; bottom: 0; text-align: center; padding: .55rem 1rem; background: var(--cartao); color: var(--texto-suave); font-weight: 600; font-size: .82rem; border-top: 1px solid var(--borda); z-index: 15; }

/* ---------- Janela de confirmação ---------- */
.dialogo { width: min(26rem, calc(100% - 2rem)); padding: 1.4rem; border: 1px solid var(--borda); border-radius: 1.25rem; background: var(--cartao); color: var(--texto); box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .55); }
.dialogo::backdrop { background: rgba(8, 11, 20, .6); backdrop-filter: blur(2px); }
.dialogo h2 { margin: 0 0 .6rem; font-size: 1.2rem; }
.dialogo p { margin: 0 0 1.2rem; color: var(--texto-suave); }
.dialogo-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.btn-perigo-cheio { background: var(--erro); box-shadow: none; color: var(--cartao); width: 100%; min-height: 3.3rem; font-size: 1rem; }
.btn-perigo-cheio:hover:not([disabled]) { filter: brightness(1.08); }

/* ---------- Animações (curtas e suaves; desligam em "reduzir movimento") ---------- */
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes crescer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes gira { from { transform: rotate(-90deg) scale(.6); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes tracar { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
@keyframes balancar { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 5px var(--erro-fundo); } }
@keyframes toast-entra { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Entrada escalonada: o JS marca cada bloco com --i (0, 1, 2…) */
.entra { animation: subir .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 55ms); }

.barra { transform-origin: left center; animation: crescer .9s cubic-bezier(.2, .7, .2, 1) .25s both; }
.passos li.atual .bola { animation: balancar 2.4s ease-in-out 1s 2; }
.alerta-dias { animation: balancar 2.6s ease-in-out 1.2s 2; }

/* Botões: brilho que passa ao apontar, e leve "afundar" ao clicar */
.btn-principal { position: relative; overflow: hidden; }
.btn-principal::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 200% 0;
}
.btn-principal:hover:not([disabled])::after { animation: brilho 1.1s ease; }
.btn:active, .aba:active, .stat:active, .item:active { transform: scale(.98); }

/* Tema: o botão gira e as cores trocam suavemente */
.btn-icone.gira .ic { animation: gira .5s cubic-bezier(.2, .7, .2, 1); }
html.trocando-tema *, html.trocando-tema *::before, html.trocando-tema *::after { transition: background-color .35s, color .35s, border-color .35s, box-shadow .35s !important; }

/* Logo da tela de entrada flutua de leve */
.logo-grande { animation: flutuar 4.5s ease-in-out infinite; }

/* Carregando: blocos que brilham no lugar de um texto parado */
.esqueleto { display: grid; gap: .75rem; }
.esqueleto i {
  display: block; height: 5.2rem; border-radius: 1.15rem; border: 1px solid var(--borda);
  background: linear-gradient(100deg, var(--cartao) 30%, var(--primaria-fundo) 50%, var(--cartao) 70%);
  background-size: 300% 100%; animation: brilho 1.4s linear infinite;
}
.esqueleto i:first-child { height: 2.4rem; width: 55%; }

/* Confirmação de envio: círculo que "pula" e o ✓ que se desenha */
.sucesso .check { animation: pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.sucesso .check path { stroke-dasharray: 30; animation: tracar .5s ease .35s both; }

/* Janela e aviso */
.dialogo[open] { animation: pop .25s cubic-bezier(.2, .9, .3, 1); }
.dialogo[open]::backdrop { animation: aparecer .25s ease; }
.toast:not([hidden]) { animation: toast-entra .35s cubic-bezier(.2, .9, .3, 1); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Categoria, fotos, atualizações e lembretes ---------- */
.escolha-larga { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.btn.ocupado { opacity: .6; pointer-events: none; }
.item-rodape { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }

.fotos-bloco + .fotos-bloco { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--borda); }
.fotos-cab { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.fotos-cab h3 { margin: 0; font-size: 1.05rem; }
.fotos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; }
.foto { position: relative; margin: 0; aspect-ratio: 1; border-radius: .9rem; overflow: hidden; background: var(--cartao-2); border: 1px solid var(--borda); }
.foto-abrir { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.foto-abrir:hover img { transform: scale(1.05); }
.foto-x { position: absolute; top: .35rem; right: .35rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; border: 0; cursor: pointer; background: rgba(8, 11, 20, .72); color: #fff; }
.foto-x:hover { background: var(--erro); color: #fff; }
.foto-ver { width: min(52rem, calc(100% - 1.5rem)); text-align: center; }
.foto-ver img { max-width: 100%; max-height: 72vh; border-radius: .8rem; display: block; margin: 0 auto 1rem; }

.linha-tempo { list-style: none; margin: 0 0 1.2rem; padding: 0; position: relative; }
.linha-tempo::before { content: ""; position: absolute; left: .85rem; top: .6rem; bottom: .6rem; width: 2px; background: var(--borda); }
.linha-tempo li { position: relative; display: flex; gap: .8rem; padding: .55rem 0; }
.lt-ponto { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--primaria-fundo); color: var(--primaria); border: 2px solid var(--cartao); position: relative; z-index: 1; }
.lt-status .lt-ponto { background: var(--concluido-fundo); color: var(--concluido); }
.lt-meta { font-size: .88rem; color: var(--texto-suave); }
.linha-tempo p { margin: .15rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.lt-status p { font-weight: 600; }
.lt-form .entrada { min-height: 5.5rem; margin: .4rem 0 .8rem; }
.lt-form label { font-weight: 700; }

.lembretes { list-style: none; margin: 0 0 1rem; padding: 0; }
.lembretes li { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--borda); }
.lembretes .marca-check { flex: 1; min-width: 0; }
.lembretes li.feito .marca-check span { text-decoration: line-through; color: var(--texto-suave); }
.lembretes .btn-mini { min-height: 2.4rem; padding: .2rem .6rem; }
.lb-data { flex: none; font-size: .85rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; background: var(--primaria-fundo); color: var(--primaria); white-space: nowrap; }
.lb-data.atrasado { background: var(--erro-fundo); color: var(--erro); }
.lb-data.hoje { background: var(--pendente-fundo); color: var(--pendente); }
.lb-data.feito { background: var(--concluido-fundo); color: var(--concluido); }

/* ======================================================================
   Visual inspirado em apps de gestão da cidade: roxo, cartões brancos,
   menu inferior flutuante no celular e selos de situação sólidos.
   ====================================================================== */
body { background: var(--fundo); }
.topo { background: var(--cartao); backdrop-filter: none; -webkit-backdrop-filter: none; }
.cartao, .stat, .item { border-radius: 1.1rem; }

.btn { border-radius: .85rem; }
.btn-principal { background: var(--primaria); color: var(--sobre-primaria); box-shadow: var(--sombra-forte); }
.btn-principal::after { display: none; }

/* Menu: pílulas no computador, barra flutuante embaixo no celular */
.aba { border: 0; background: transparent; color: var(--texto-suave); box-shadow: none; }
.aba:hover { background: var(--primaria-fundo); color: var(--primaria); }
.aba[aria-current="page"] { background: var(--primaria-fundo); color: var(--primaria); box-shadow: none; }
@media (min-width: 48rem) {
  .abas { gap: .35rem; }
  .aba { flex: 0 0 auto; border-radius: 999px; }
}
@media (max-width: 47.99rem) {
  .abas {
    position: fixed; left: .75rem; right: .75rem; bottom: .75rem; margin: 0; padding: .4rem; max-width: none; z-index: 25;
    justify-content: space-around; gap: .15rem; overflow: visible;
    background: var(--cartao); border: 1px solid var(--borda); border-radius: 2rem; box-shadow: 0 12px 32px -8px rgba(20, 8, 40, .35);
  }
  .aba { flex-direction: column; gap: .1rem; flex: 1 1 0; min-width: 0; min-height: 3.6rem; padding: .35rem .3rem; border-radius: 1.6rem; font-size: .68rem; font-weight: 600; }
  .miolo { padding-bottom: 8rem; }
  .toast { bottom: 6.6rem; }
  .aviso-demo { left: .75rem; right: .75rem; bottom: 5.9rem; border: 1px solid var(--borda); border-radius: .8rem; }
  .topo #btn-sair { display: none; }

  /* Botão do meio em destaque, como a barra do Instagram: só o ícone, redondo e levantado */
  .abas { align-items: center; }
  .aba-centro, .aba-centro[aria-current="page"] {
    flex: 0 0 3.7rem; width: 3.7rem; height: 3.7rem; min-height: 0; margin-top: -1.3rem; padding: 0; border-radius: 50%;
    background: var(--primaria); color: var(--sobre-primaria); box-shadow: 0 10px 22px -8px rgba(10, 100, 164, .7), 0 0 0 .35rem var(--cartao);
  }
  .aba-centro:hover { background: var(--primaria); color: var(--sobre-primaria); }
  .aba-centro span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .abas { position: fixed; }
}

/* Selos de situação: sólidos, em maiúsculas */
.selo-pendente, .selo-em_analise, .selo-concluido { color: #fff; text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; border-radius: .45rem; padding: .3rem .6rem; }
.selo-pendente { background: #b4650b; }
.selo-em_analise { background: #0e7490; }
.selo-concluido { background: #2e7d32; }
.selo-pendente .ic, .selo-em_analise .ic, .selo-concluido .ic { display: none; }
.selo-papel .ic { margin-right: -.1rem; }

/* Início do líder */
.hero { background: linear-gradient(150deg, #0a73bd, #003e6b); color: #fff; border-radius: 1.5rem; padding: 1.2rem 1.2rem 1.3rem; margin-bottom: 1.4rem; box-shadow: 0 18px 36px -18px rgba(0, 62, 107, .7); }
.hero-topo { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.hero-logo { width: 2.9rem; height: 2.9rem; border-radius: .9rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); flex: none; }
.hero h1 { color: #fff; margin: 0; font-size: 1.5rem; }
.hero-peq { margin: 0; font-size: .8rem; opacity: .85; font-weight: 500; }
.hero-busca .entrada { border-radius: 999px; border-color: transparent; background: var(--cartao); }
.sec-tit { font-size: 1.15rem; margin: 1.6rem 0 .25rem; font-weight: 700; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.1rem, 1fr)); gap: .5rem; margin-bottom: .5rem; }
.tile { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; padding: .65rem .1rem; text-decoration: none; color: var(--texto); background: var(--cartao); border: 1px solid var(--borda); border-radius: 1rem; font-size: .62rem; overflow-wrap: break-word; min-width: 0; font-weight: 600; line-height: 1.2; transition: border-color .15s, transform .1s; }
.tile:hover { border-color: var(--primaria); transform: translateY(-2px); }
.tile:active { transform: scale(.97); }
.tile-ic { width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--primaria-fundo); color: var(--primaria); }

/* Cartão de pedido */
.item-topo { flex-wrap: nowrap; align-items: center; }
.avatar-q { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--primaria-fundo); color: var(--primaria); font-weight: 700; font-size: .85rem; }
.item-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.item-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-sub { font-size: .78rem; color: var(--texto-suave); }

/* Perfil */
.perfil { text-align: center; }
.avatar-g { width: 5.2rem; height: 5.2rem; border-radius: 50%; display: grid; place-items: center; margin: 0 auto .8rem; background: var(--primaria-fundo); color: var(--primaria); font-weight: 700; font-size: 1.6rem; }
.perfil h1 { margin-bottom: .15rem; }
.perfil-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; border-top: 1px solid var(--borda); padding-top: 1rem; }
.perfil-nums b { display: block; font-size: 1.6rem; line-height: 1.1; }
.perfil-nums span { font-size: .8rem; color: var(--texto-suave); }

/* Conversa do pedido */
.conversa { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .85rem; }
.msg { display: flex; gap: .65rem; align-items: flex-start; }
.msg-av { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--primaria-fundo); color: var(--primaria); font-weight: 700; font-size: .78rem; }
.msg-coord .msg-av { background: var(--primaria); color: var(--sobre-primaria); }
.msg-corpo { flex: 1; min-width: 0; background: var(--cartao-2); border-radius: .35rem 1rem 1rem 1rem; padding: .55rem .85rem .65rem; }
.msg-coord .msg-corpo { background: var(--primaria-fundo); }
.msg-topo { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.msg-topo .lt-meta { margin-left: auto; font-size: .75rem; }
.msg p { margin: .2rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.verificado { width: 1.1rem; height: 1.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--primaria); color: var(--sobre-primaria); }
.msg-sistema { display: flex; gap: .6rem; align-items: center; padding: .45rem .75rem; border: 1px dashed var(--borda-forte); border-radius: .85rem; color: var(--texto-suave); }
.msg-sistema p { margin: 0; font-weight: 600; font-size: .9rem; color: var(--texto); }
.msg-transf { border-style: solid; border-color: var(--primaria); background: var(--primaria-fundo); color: var(--primaria); }
.col-marca { width: 2.4rem; }
.col-marca input { width: 1.15rem; height: 1.15rem; accent-color: var(--primaria); }
.barra-selecao { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin: .75rem 0; padding: .6rem .9rem; border: 1px solid var(--primaria); background: var(--primaria-fundo); border-radius: .85rem; font-weight: 600; }
.barra-selecao[hidden] { display: none; }
.lado-a-lado { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.lt-form .msg-envio { display: flex; gap: .5rem; align-items: flex-end; margin-top: .4rem; }
.lt-form .msg-envio .entrada { min-height: 3.2rem; margin: 0; flex: 1; border-radius: 1.6rem; resize: none; padding: .75rem 1.1rem; }
.btn-enviar { width: 3.2rem; min-height: 3.2rem; padding: 0; border-radius: 50%; flex: none; }

/* ---------- Logomarca no topo, fotos de perfil e interruptor ---------- */
.topo { background: linear-gradient(110deg, #003e6b, #0a73bd); border-bottom: 0; color: #fff; }
.marca { flex-direction: column; align-items: flex-start; gap: .2rem; color: #fff; }
.marca-wordmark { height: 1.45rem; width: auto; display: block; }
.marca-sub { display: block !important; color: rgba(255, 255, 255, .82); font-size: .7rem; font-weight: 500; }
.topo .btn-icone, .topo .btn-contorno { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .32); color: #fff; }
.topo .btn-icone:hover, .topo .btn-contorno:hover { background: rgba(255, 255, 255, .26); border-color: #fff; color: #fff; }
.topo .usuario { color: #fff; }
.topo .avatar { background: rgba(255, 255, 255, .2); color: #fff; }

.tem-foto { padding: 0; overflow: hidden; }
.tem-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-av { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; flex: none; overflow: hidden; background: rgba(255, 255, 255, .2); color: #fff; font-weight: 700; box-shadow: 0 0 0 2px rgba(255, 255, 255, .4); }
.avatar-p { width: 1.9rem; height: 1.9rem; font-size: .7rem; }
.avatar-g.tem-foto { background: none; }

.login-marca { background: linear-gradient(110deg, #003e6b, #0a73bd); border-radius: 1.2rem; padding: 1.5rem 1.2rem; margin-bottom: 1.2rem; display: flex; justify-content: center; box-shadow: var(--sombra-forte); }
.login-marca img { max-width: 100%; height: auto; }
.perfil-foto-acoes { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin: 0 0 .9rem; }

.interruptor { display: flex; align-items: center; gap: .8rem; cursor: pointer; font-weight: 600; }
.interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.trilho { position: relative; flex: none; width: 3.2rem; height: 1.85rem; border-radius: 999px; background: var(--borda-forte); transition: background-color .2s; }
.trilho::after { content: ""; position: absolute; top: .22rem; left: .22rem; width: 1.41rem; height: 1.41rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .2s; }
.interruptor input:checked + .trilho { background: var(--primaria); }
.interruptor input:checked + .trilho::after { transform: translateX(1.35rem); }
.interruptor input:focus-visible + .trilho { outline: 3px solid var(--foco); outline-offset: 2px; }

/* ---------- Informativo ---------- */
.dialogo-largo { width: min(34rem, calc(100% - 1.5rem)); max-height: calc(100vh - 2rem); overflow-y: auto; }
.dialogo-largo .campo { margin-bottom: .9rem; }
.fotos-escolha { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; }
.foto-opcao { position: relative; display: block; aspect-ratio: 1; border-radius: .8rem; overflow: hidden; border: 2px solid var(--borda); cursor: pointer; }
.foto-opcao img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-opcao input { position: absolute; top: .35rem; left: .35rem; width: 1.3rem; height: 1.3rem; accent-color: var(--primaria); }
.foto-opcao:has(input:checked) { border-color: var(--primaria); }
.arquivos { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.arquivos li { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border: 1px solid var(--borda); border-radius: .9rem; background: var(--cartao-2); }
.arq-ic { width: 2.4rem; height: 2.4rem; border-radius: .7rem; display: grid; place-items: center; flex: none; background: var(--primaria-fundo); color: var(--primaria); }
.arq-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.arq-nome b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }

/* ---------- Manter conectado e tela de boas-vindas ---------- */
.login-manter { margin: .2rem 0 1.1rem; }

.boas-vindas {
  position: fixed; inset: 0; z-index: 100; color: #fff; text-align: center; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: max(2rem, env(safe-area-inset-top)) 1.5rem max(1.6rem, env(safe-area-inset-bottom));
  background: radial-gradient(60rem 30rem at 50% 105%, rgba(42, 168, 224, .55), transparent 70%), linear-gradient(165deg, #002f55, #0a64a4 70%, #0a73bd);
  animation: bv-entra .5s ease both; cursor: progress;
}
.boas-vindas.saindo { animation: bv-sai .55s ease forwards; pointer-events: none; }
.boas-vindas::before, .boas-vindas::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .07); pointer-events: none; }
.boas-vindas::before { width: 26rem; height: 26rem; top: -9rem; right: -9rem; animation: bv-flutua 9s ease-in-out infinite; }
.boas-vindas::after { width: 18rem; height: 18rem; bottom: -6rem; left: -7rem; animation: bv-flutua 11s ease-in-out infinite reverse; }

.bv-logo { position: relative; width: min(15rem, 62vw); height: auto; animation: bv-sobe .7s .15s cubic-bezier(.2, .8, .2, 1) both; }
.bv-centro { position: relative; display: flex; flex-direction: column; align-items: center; }
.bv-foto-caixa { position: relative; margin-bottom: 1.4rem; animation: bv-pop .8s .3s cubic-bezier(.2, 1.3, .4, 1) both; }
.bv-foto-caixa::before, .bv-foto-caixa::after { content: ""; position: absolute; inset: -.6rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); animation: bv-onda 2.4s ease-out infinite; }
.bv-foto-caixa::after { animation-delay: 1.2s; }
.bv-foto { width: 9.5rem; height: 9.5rem; border-radius: 50%; display: grid; place-items: center; overflow: hidden; position: relative; z-index: 1;
  background: rgba(255, 255, 255, .18); color: #fff; font-size: 3rem; font-weight: 700; border: 4px solid #fff; box-shadow: 0 22px 50px -10px rgba(0, 20, 45, .6); }
.bv-foto.tem-foto { background: #fff; }
.bv-saud { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.25rem; font-weight: 500; opacity: .92; animation: bv-sobe .7s .55s cubic-bezier(.2, .8, .2, 1) both; }
.bv-nome { margin: .1rem 0 .4rem; font-size: clamp(2.2rem, 9vw, 3.4rem); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: #fff; overflow-wrap: anywhere; animation: bv-sobe .7s .7s cubic-bezier(.2, .8, .2, 1) both; }
.bv-papel { margin: 0; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; animation: bv-sobe .7s .85s cubic-bezier(.2, .8, .2, 1) both; }
.bv-rodape { position: relative; display: grid; justify-items: center; gap: .8rem; animation: bv-sobe .7s 1s ease both; }
.bv-barra { width: 8rem; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.bv-barra i { display: block; height: 100%; background: #fff; transform-origin: left; animation: bv-barra 3.4s linear both; }
.bv-carregando { margin: 0; color: rgba(255, 255, 255, .85); font-size: .85rem; }

@keyframes bv-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes bv-sai { to { opacity: 0; transform: scale(1.04); } }
@keyframes bv-sobe { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes bv-pop { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes bv-onda { from { opacity: .8; transform: scale(.95); } to { opacity: 0; transform: scale(1.45); } }
@keyframes bv-flutua { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-1.5rem, 1.5rem); } }
@keyframes bv-barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .boas-vindas, .boas-vindas * { animation-duration: .01s !important; animation-delay: 0s !important; } }

/* ---------- Troca de telas e pílula do menu ---------- */
@keyframes troca-dir { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes troca-esq { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes troca-sobe { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes aba-pop { 0% { transform: scale(.6) translateY(4px); } 60% { transform: scale(1.18); } 100% { transform: none; } }
.miolo.troca-dir { animation: troca-dir .45s cubic-bezier(.2, .8, .2, 1); }
.miolo.troca-esq { animation: troca-esq .45s cubic-bezier(.2, .8, .2, 1); }
.miolo.troca-sobe { animation: troca-sobe .4s cubic-bezier(.2, .8, .2, 1); }

.abas::before {
  content: ""; position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  width: var(--pw, 0); height: var(--ph, 0); border-radius: 999px; background: var(--primaria-fundo);
  transform: translate(var(--pl, 0), var(--pt, 0)); opacity: var(--po, 0);
}
.abas.pronta::before { transition: transform .42s cubic-bezier(.3, 1.1, .4, 1), width .42s cubic-bezier(.3, 1.1, .4, 1), height .3s, opacity .25s; }
@media (min-width: 48rem) { .abas { position: relative; } }
.aba { position: relative; z-index: 1; }
.aba[aria-current="page"]:not(.aba-centro) { background: transparent; }
.aba[aria-current="page"] .ic { animation: aba-pop .5s cubic-bezier(.2, 1.2, .4, 1); }
.aba-centro:active { transform: scale(.92); }

/* Celular: sem pílula deslizante (media query de largura estreita); a aba ativa tem o próprio fundo. */
@media (max-width: 47.99rem) {
  .abas::before { display: none; }
  .aba[aria-current="page"]:not(.aba-centro) { background: var(--primaria-fundo); }
}

/* ---------- Acesso criado / senha nova ---------- */
.acesso-dados { display: grid; gap: .6rem; margin: 0 0 1.1rem; }
.acesso-dados > div { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .9rem; border: 1px solid var(--borda); border-radius: .9rem; background: var(--cartao-2); }
.acesso-dados span { font-size: .8rem; color: var(--texto-suave); font-weight: 600; }
.acesso-dados b { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.35rem; letter-spacing: .04em; overflow-wrap: anywhere; user-select: all; }
.acesso-acoes { display: grid; gap: .55rem; }

/* ---------- Lista de acessos criados em lote ---------- */
.lote-lista { display: grid; gap: .45rem; max-height: 26rem; overflow-y: auto; padding-right: .2rem; }
.lote-linha { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .75rem; border: 1px solid var(--borda); border-radius: .85rem; background: var(--cartao-2); }
.lote-quem { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lote-quem b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lote-quem span { font-size: .85rem; color: var(--texto-suave); }
.lote-quem code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--texto); font-weight: 700; user-select: all; }

/* ---------- Alerta de pedidos parados ---------- */
.faixa-alerta { display: flex; align-items: flex-start; gap: .75rem; width: 100%; margin: 0 0 1rem; padding: .85rem 1rem; text-align: left; font: inherit; color: var(--erro); background: var(--erro-fundo); border: 1px solid color-mix(in srgb, var(--erro) 35%, transparent); border-radius: 1rem; cursor: pointer; }
.faixa-alerta > span { display: grid; gap: .15rem; }
.faixa-alerta b { font-weight: 700; }
.faixa-alerta span span { font-size: .85rem; opacity: .85; }
.faixa-alerta.silenciada { opacity: .75; }
.alerta-resumo { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 0 0 1rem; }
.alerta-resumo > div { display: grid; gap: .1rem; padding: .8rem 1rem; background: var(--fundo); border: 1px solid var(--borda); border-radius: 1rem; }
.alerta-resumo b { font-size: 1.7rem; line-height: 1.1; }
.alerta-resumo span { font-size: .82rem; color: var(--texto-suave); }
.alerta-resumo .forte-erro b { color: var(--erro); }
.lista-alerta { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; max-height: 40vh; overflow-y: auto; }
.lista-alerta a { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .6rem .8rem; color: inherit; text-decoration: none; border: 1px solid var(--borda); border-radius: .85rem; }
.lista-alerta a:hover { background: var(--fundo); }
.lista-alerta a > span:first-child { display: grid; min-width: 0; }
.lista-alerta .suave { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Primeiro contato ---------- */
.contato-ok { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .8rem; padding: .35rem .75rem; font-weight: 700; font-size: .9rem; color: var(--concluido); background: color-mix(in srgb, var(--concluido) 14%, transparent); border-radius: .75rem; }
.contato-texto { margin-top: .9rem; }
.contato-texto summary { cursor: pointer; color: var(--texto-suave); font-size: .9rem; }
.contato-texto pre { white-space: pre-wrap; margin: .6rem 0 0; padding: .8rem 1rem; font: inherit; font-size: .9rem; background: var(--fundo); border: 1px solid var(--borda); border-radius: .85rem; }
.selo-contato { display: inline-flex; align-items: center; gap: .25rem; margin-left: .4rem; color: var(--concluido); font-size: .78rem; font-weight: 700; vertical-align: middle; }

/* ---------- Campos em maiúsculas ---------- */
.maiusculas { text-transform: uppercase; }