/* Resolution Monitor: tela nova. Computador e celular com o mesmo código; abaixo de 760 px vira o modo celular. */
:root {
  --azul: #15243C; --azul-2: #22385C; --azul-3: #2C4670;
  --dourado: #BA8E49; --dourado-2: #A27A3B; --dourado-claro: #F6EEDF;
  --fundo: #F4F5F7; --cartao: #FFFFFF; --borda: #E1E4E9; --linha: #EDEFF2;
  --texto: #15243C; --cinza: #5E6773; --cinza-2: #8A929E; --cinza-claro: #E6E9EE;
  --verde: #2E7D5B; --verde-claro: #E8F3EE; --vermelho: #A33A3A; --vermelho-claro: #F6E3E3; --aviso: #7A5A26; --aviso-claro: #F5EEE2;
  --wa-fundo: #EFEAE2; --wa-barra: #F0F2F5; --wa-balao: #D9FDD3; --wa-verde: #00A884; --wa-verde-2: #008F72; --wa-texto: #111B21;
  --sombra-1: 0 1px 2px rgba(21,36,60,.06), 0 1px 1px rgba(21,36,60,.04);
  --sombra-2: 0 6px 20px rgba(21,36,60,.10), 0 2px 6px rgba(21,36,60,.06);
  --sombra-3: 0 18px 50px rgba(21,36,60,.22);
  --raio: 16px; --raio-p: 10px;
  --fonte: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --rapido: 160ms cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: 14px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; }
button { font-family: inherit; }
::selection { background: #E7D4B0; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C9CED6; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #AEB4BE; background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
#tela { flex: 1; min-height: 0; position: relative; }
.pagina { position: absolute; inset: 0; display: flex; flex-direction: column; animation: entra var(--rapido) both; }
.pagina.sai { animation: sai 120ms ease-in both; pointer-events: none; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sai { to { opacity: 0; transform: translateY(-4px); } }
.rolagem { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; overscroll-behavior: contain; }
.miolo { max-width: 1040px; margin: 0 auto; padding: 22px 28px 40px; }
.miolo.estreito { max-width: 660px; }

/* ---------- topo das telas internas ---------- */
.topo { background: var(--azul); color: #fff; display: flex; align-items: center; gap: 16px; padding: 0 28px; height: 78px; flex: none;
  border-bottom: 3px solid var(--dourado); }
.topo .sobre { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--dourado); }
.topo h1 { margin: 2px 0 0; font: 700 21px/1.2 var(--fonte-titulo); }
.topo .esp { flex: 1; }
.btn-voltar { background: var(--azul-2); color: #fff; border: 0; border-radius: 999px; height: 38px; padding: 0 20px; font-weight: 700;
  font-size: 13px; cursor: pointer; transition: background var(--rapido), transform var(--rapido); }
.btn-voltar:hover { background: var(--azul-3); }
.btn-voltar:active { transform: scale(.97); }

/* ---------- botões ---------- */
.btn { --c: var(--dourado); --c2: var(--dourado-2); --t: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--c); color: var(--t); font-weight: 700; font-size: 13px;
  letter-spacing: .02em; cursor: pointer; white-space: nowrap; transition: background var(--rapido), transform 90ms ease, box-shadow var(--rapido); }
.btn:hover { background: var(--c2); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.grande { height: 58px; font-size: 17px; letter-spacing: .03em; box-shadow: 0 8px 22px rgba(186,142,73,.30); }
.btn.medio { height: 46px; font-size: 14px; }
.btn.peq { height: 32px; padding: 0 14px; font-size: 12px; }
.btn.largo { width: 100%; }
.btn.escuro { --c: var(--azul); --c2: var(--azul-2); }
.btn.secundario { --c: var(--cinza-claro); --c2: #D6DBE2; --t: var(--azul); }
.btn.verde { --c: var(--verde); --c2: #256B4D; }
.btn.whatsapp { --c: var(--wa-verde); --c2: var(--wa-verde-2); }
.btn.perigo { --c: #fff; --c2: #F7E9E9; --t: var(--vermelho); box-shadow: inset 0 0 0 2px var(--vermelho); }
.btn.contorno { --c: #fff; --c2: var(--cinza-claro); --t: var(--azul); box-shadow: inset 0 0 0 2px var(--azul); }
.btn.discreto { --c: transparent; --c2: var(--cinza-claro); --t: var(--cinza); font-weight: 600; }
.btn.aovivo { --c: #fff; --c2: #FBEFEF; --t: #C0392B; box-shadow: inset 0 0 0 2px #C0392B; }
.btn.aovivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #C0392B; animation: pulsa 1.4s infinite; }
@keyframes pulsa { 50% { opacity: .25; } }

.selo { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--linha); color: #3D4654; white-space: nowrap; }
.selo.ok { background: var(--verde-claro); color: #1F5E43; }
.selo.aviso { background: var(--aviso-claro); color: var(--aviso); }
.selo.erro { background: var(--vermelho-claro); color: var(--vermelho); }
.selo.dourado { background: var(--dourado-claro); color: var(--dourado-2); }

.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-1); }
.rotulo { font-size: 11px; font-weight: 700; letter-spacing: .07em; color: var(--dourado); text-transform: uppercase; }
.nota { font-size: 12px; color: var(--cinza); line-height: 1.5; }
.linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vazio { text-align: center; color: var(--cinza); padding: 40px 10px; font-size: 14px; }

/* ---------- início ---------- */
.inicio { display: flex; flex-direction: column; align-items: center; padding: 26px 20px 40px; max-width: 640px; margin: 0 auto; }
.inicio .logo { width: 300px; max-width: 70%; height: auto; display: block; }
.inicio .data { color: var(--cinza); font-size: 14px; margin: 8px 0 18px; }
.inicio > .btn, .inicio > .faixa { width: 100%; }
.faixa { margin-top: 10px; }
.cartoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin-top: 16px; }
.cartao-menu { text-align: left; padding: 18px 20px; min-height: 86px; cursor: pointer; border: 1px solid var(--borda); background: #fff; border-radius: var(--raio);
  transition: transform var(--rapido), box-shadow var(--rapido), border-color var(--rapido), background var(--rapido); box-shadow: var(--sombra-1); }
.cartao-menu:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: var(--dourado); background: #FFFCF7; }
.cartao-menu:active { transform: translateY(0) scale(.99); }
.cartao-menu b { display: block; font-size: 15px; color: var(--azul); letter-spacing: .01em; }
.cartao-menu span { display: block; font-size: 12px; color: var(--cinza); margin-top: 6px; }
.busca { display: flex; align-items: center; width: 100%; margin-top: 14px; background: #fff; border: 1px solid var(--borda); border-radius: 999px;
  padding: 4px 4px 4px 18px; box-shadow: var(--sombra-1); transition: border-color var(--rapido), box-shadow var(--rapido); }
.busca:focus-within { border-color: var(--dourado); box-shadow: 0 0 0 4px rgba(186,142,73,.15); }
.busca input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 13px; background: transparent; color: var(--texto); min-width: 0; }
.agenda { width: 100%; margin-top: 18px; }
.selos { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.rodape-marca { margin-top: 18px; font-size: 11px; color: #9AA3AF; }

/* ---------- ao vivo ---------- */
.vivo-topo { background: var(--azul); color: #fff; display: flex; align-items: center; gap: 12px; padding: 0 24px; height: 70px; flex: none;
  border-bottom: 3px solid var(--dourado); }
.vivo-topo .tag { background: #C0392B; color: #fff; border-radius: 6px; font-weight: 800; font-size: 11px; padding: 5px 10px; letter-spacing: .06em; }
.vivo-topo h1 { font: 700 18px var(--fonte-titulo); margin: 0; }
.vivo-topo .tempo { color: var(--dourado); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.placar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.placar .num { font: 800 46px/1 var(--fonte-titulo); color: var(--dourado); font-variant-numeric: tabular-nums; }
.placar .de { color: var(--cinza); font-size: 16px; padding-bottom: 6px; }
.placar .esp { flex: 1; }
.barra { height: 10px; border-radius: 10px; background: var(--cinza-claro); overflow: hidden; margin: 12px 0 8px; }
.barra > i { display: block; height: 100%; background: linear-gradient(90deg, var(--dourado), #D3AE6E); border-radius: 10px; width: 0;
  transition: width 500ms cubic-bezier(.2,.7,.2,1); }
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; margin-top: 16px; }
.chip { height: 42px; border-radius: 12px; border: 0; background: var(--linha); color: #3D4654; font-weight: 700; font-size: 12px; cursor: default;
  transition: background 300ms, color 300ms, transform var(--rapido); }
.chip.ok { background: var(--verde-claro); color: #1F5E43; }
.chip.aviso { background: var(--aviso-claro); color: var(--aviso); }
.chip.erro { background: var(--vermelho-claro); color: var(--vermelho); }
.chip.pronta { cursor: pointer; box-shadow: inset 0 0 0 2px #9CCBB3; }
.chip.pronta:hover { transform: translateY(-2px); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 18px; }

/* ---------- final ---------- */
.numeros { display: flex; background: var(--azul); border-radius: var(--raio); padding: 18px 10px; justify-content: space-around; gap: 6px; width: 100%; }
.numeros div { text-align: center; }
.numeros b { display: block; font: 800 34px var(--fonte-titulo); color: var(--dourado); font-variant-numeric: tabular-nums; }
.numeros span { font-size: 11px; color: #C9D0DB; }

/* ---------- painel aplicado ---------- */
.aplicado { padding: 16px 18px; width: 100%; }
.aplicado .lin { display: flex; align-items: baseline; gap: 12px; padding: 3px 0; }
.aplicado .lin b { font: 800 19px var(--fonte-titulo); min-width: 40px; text-align: right; color: var(--azul); }
.aplicado .lin span { color: #3D4654; font-size: 13px; }
.aplicado .det { margin-top: 8px; font-size: 12px; color: var(--cinza); line-height: 1.6; max-height: 260px; overflow: auto; }

/* ---------- barra de ferramentas e pílulas ---------- */
.ferramentas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 24px 6px; flex: none; }
.ferramentas .esp { flex: 1; }
.seg { display: inline-flex; background: #DADFE6; border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; color: #5A6472; font-weight: 700; font-size: 12px; height: 30px; padding: 0 14px; border-radius: 999px;
  cursor: pointer; transition: background var(--rapido), color var(--rapido); white-space: nowrap; }
.seg button.on { background: var(--azul); color: #fff; box-shadow: var(--sombra-1); }
.seg button:not(.on):hover { color: var(--azul); }
.pilulas { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 24px 8px; flex: none; }
.pilula { border: 0; border-radius: 999px; height: 32px; padding: 0 14px; font-weight: 700; font-size: 12px; background: var(--cinza-claro); color: var(--azul);
  cursor: pointer; transition: background var(--rapido), color var(--rapido), transform 90ms; white-space: nowrap; }
.pilula:hover { background: #D6DBE2; }
.pilula.on { background: var(--dourado); color: #fff; }
.pilula.alerta { background: #fff; box-shadow: inset 0 0 0 2px var(--dourado); }
.pilula.alerta.on { background: var(--dourado); box-shadow: none; }
.pilula small { font-weight: 600; opacity: .8; margin-left: 4px; }

/* ---------- conversa no estilo WhatsApp ---------- */
.wa { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 4px 24px 6px; border-radius: 14px; overflow: hidden; background: var(--wa-fundo);
  box-shadow: var(--sombra-1); border: 1px solid #E2DCD2; }
.wa-cab { display: flex; align-items: center; gap: 12px; background: var(--wa-barra); height: 60px; padding: 0 16px; flex: none; border-bottom: 1px solid #E4E6E8; }
.wa-av { width: 40px; height: 40px; border-radius: 50%; background: var(--azul); color: var(--dourado); display: grid; place-items: center; font-weight: 800; font-size: 17px; flex: none; }
.wa-cab b { display: block; color: var(--wa-texto); font-size: 14px; }
.wa-cab small { color: #667781; font-size: 11px; }
.wa-conversa { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 22px;
  background-color: var(--wa-fundo);
  background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1.4px); background-size: 22px 22px; }
.wa-dia { display: table; margin: 0 auto 12px; background: #fff; color: #54656F; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 8px; box-shadow: var(--sombra-1); }
.wa-linha { display: flex; justify-content: flex-end; padding-left: 12%; }
.balao { position: relative; background: var(--wa-balao); color: var(--wa-texto); border-radius: 10px 0 10px 10px; padding: 8px 12px 6px; max-width: 760px;
  box-shadow: 0 1px .5px rgba(11,20,26,.13); font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.balao::after { content: ""; position: absolute; top: 0; right: -8px; border-left: 8px solid var(--wa-balao); border-bottom: 10px solid transparent; }
.balao .hora { display: block; text-align: right; font-size: 11px; color: #667781; margin-top: 4px; }
.balao .hora i { color: #53BDEB; font-style: normal; margin-left: 3px; }
.balao a { color: #027EB5; }
.balao.editando { box-shadow: 0 0 0 2px var(--dourado), 0 1px .5px rgba(11,20,26,.13); width: 100%; }
.balao textarea { width: 100%; min-width: 300px; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; resize: none; line-height: 1.45;
  padding: 0; overflow: hidden; display: block; }
.acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 24px; flex: none; }
.acoes .esp { flex: 1; }
.acoes .dica { color: var(--aviso); font-size: 12px; }
.links-rodape { display: flex; gap: 4px; padding: 0 18px 10px; flex: none; }

/* ---------- conferir ---------- */
.mesa { margin: 6px 24px 0; border-radius: var(--raio) var(--raio) 0 0; overflow: hidden; display: flex; flex-direction: column; flex: 1; min-height: 0;
  background: #F6F7F9; border: 1px solid var(--borda); border-bottom: 0; }
.mesa-cab { background: var(--azul); color: #fff; display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 20px; flex: none; }
.mesa-cab b { font-size: 15px; } .mesa-cab span { color: var(--dourado); font-weight: 700; font-size: 13px; }
.mesa .rolagem { padding: 10px 12px 16px; }
.item { background: #fff; border-radius: 12px; padding: 12px 14px; margin: 0 0 10px; box-shadow: var(--sombra-1); content-visibility: auto; contain-intrinsic-size: 140px; }
.item.conferir { box-shadow: inset 0 0 0 2px var(--dourado), var(--sombra-1); }
.item .cab { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 700; color: #6B7480; }
.item .cab .estado { color: var(--verde); } .item.conferir .cab .estado { color: #8F6A30; }
.item h3 { margin: 4px 0 2px; font-size: 15px; color: var(--azul); line-height: 1.35; }
.item .resumo { color: #4A5260; font-size: 13px; }
.texto-item { background: #F7F8FA; border-radius: 8px; padding: 10px 12px; margin-top: 8px; white-space: pre-wrap; font-size: 13.5px; line-height: 1.5;
  overflow-wrap: anywhere; color: var(--wa-texto); }
.texto-item a { color: #027EB5; }
.raciocinio { background: #FBF6EC; border-radius: 8px; padding: 10px 12px; margin-top: 8px; color: #5C4520; font-size: 13px; line-height: 1.5; }
.raciocinio .rotulo { color: #8F6A30; font-size: 10px; display: block; margin-bottom: 4px; }
.botoes3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.botoes3 .btn { border-radius: 8px; height: 40px; }
.rodape-mesa { margin: 0 24px 14px; background: #fff; border: 1px solid var(--borda); border-top: 0; border-radius: 0 0 var(--raio) var(--raio);
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; flex: none; }
.rodape-mesa .esp { flex: 1; }

/* ---------- abas e formulários ---------- */
.abas { display: flex; justify-content: center; padding: 14px 24px 4px; flex: none; }
.campo { display: grid; grid-template-columns: 240px 1fr; align-items: center; gap: 12px; padding: 5px 0; }
.campo label { color: var(--azul); font-size: 13px; }
.entrada, .area, select { width: 100%; height: 38px; border-radius: 999px; border: 1px solid #CDD3DB; padding: 0 16px; font: inherit; font-size: 13px; color: var(--texto);
  background: #fff; outline: 0; transition: border-color var(--rapido), box-shadow var(--rapido); }
.entrada:focus, .area:focus, select:focus { border-color: var(--dourado); box-shadow: 0 0 0 4px rgba(186,142,73,.15); }
.area { height: auto; min-height: 90px; border-radius: 12px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.area.alta { min-height: 380px; }
.secao-tit { margin: 22px 0 8px; }
.chave { display: flex; align-items: center; gap: 12px; padding: 7px 0; cursor: pointer; user-select: none; color: var(--azul); font-size: 13px; }
.chave input { display: none; }
.chave .trilho { width: 42px; height: 24px; border-radius: 999px; background: #B9C0CA; position: relative; flex: none; transition: background var(--rapido); }
.chave .trilho::after { content: ""; position: absolute; width: 18px; height: 18px; top: 3px; left: 3px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--rapido); }
.chave input:checked + .trilho { background: var(--verde); }
.chave input:checked + .trilho::after { transform: translateX(18px); }
.marcas { display: flex; gap: 6px; flex-wrap: wrap; }
.marca { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid #CDD3DB;
  font-size: 12px; font-weight: 700; color: var(--cinza); cursor: pointer; user-select: none; transition: all var(--rapido); }
.marca.on { background: var(--dourado); color: #fff; border-color: var(--dourado); }
.barra-fixa { flex: none; background: #fff; border-top: 1px solid var(--borda); padding: 12px 24px; display: flex; gap: 8px; flex-wrap: wrap; }

.lista-emp .grupo { margin: 14px 4px 4px; }
.emp { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 10px; padding: 8px 12px; margin: 4px 0; box-shadow: var(--sombra-1); flex-wrap: wrap; }
.emp .nome { flex: 1; min-width: 200px; font-size: 13px; color: var(--azul); }
.emp small { color: var(--cinza); font-size: 11px; }
.emp .seg button { height: 26px; font-size: 11px; padding: 0 10px; }

.licao { padding: 12px 14px; margin: 6px 0; }
.licao.confirmar { box-shadow: inset 0 0 0 2px var(--dourado), var(--sombra-1); }
.licao .info { font-size: 11px; color: var(--cinza); }
.licao textarea { min-height: 60px; margin-top: 6px; }
.licao p { margin: 6px 0; color: var(--azul); font-size: 13px; line-height: 1.5; }
.licao.desligada p { color: var(--cinza-2); }

.grafico { display: flex; align-items: flex-end; gap: 14px; height: 170px; padding: 14px 6px 0; border-bottom: 2px solid var(--borda); }
.grafico .col { flex: 1; max-width: 70px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.grafico .col b { font-size: 12px; color: var(--azul); margin-bottom: 4px; }
.grafico .col i { width: 100%; border-radius: 6px 6px 0 0; background: #D9C29C; transition: height 600ms cubic-bezier(.2,.7,.2,1); }
.grafico .col:last-child i { background: var(--dourado); }
.grafico-leg { display: flex; gap: 14px; padding: 4px 6px 0; }
.grafico-leg span { flex: 1; max-width: 70px; text-align: center; font-size: 11px; color: var(--cinza); }

.arquivo { display: grid; grid-template-columns: 360px 1fr; gap: 12px; flex: 1; min-height: 0; padding: 6px 24px 16px; }
.arquivo .lista { overflow-y: auto; padding-right: 4px; }
.res { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 10px 14px; margin-bottom: 6px;
  cursor: pointer; transition: border-color var(--rapido), background var(--rapido); }
.res:hover, .res.on { border-color: var(--dourado); background: #FFFCF7; }
.res b { display: block; font-size: 12px; color: var(--dourado-2); } .res span { font-size: 13px; color: var(--azul); }
.arquivo .ver { display: flex; flex-direction: column; min-height: 0; background: var(--wa-fundo); border-radius: 14px; padding: 14px; }
.arquivo .ver .balao { max-width: none; overflow-y: auto; flex: 1; border-radius: 10px; }
.arquivo .ver .balao::after { display: none; }

.situacao { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.situacao .cartao { padding: 10px 12px; }
.situacao b { color: var(--azul); }

/* ---------- avisos, janelas e carregamento ---------- */
#toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 50;
  pointer-events: none; width: min(760px, calc(100vw - 32px)); }
.toast { background: var(--verde); color: #fff; border-radius: 14px; padding: 10px 18px; font-weight: 700; font-size: 13px; box-shadow: var(--sombra-2);
  animation: toast 220ms cubic-bezier(.2,.7,.2,1) both; pointer-events: auto; text-align: center; }
.toast.azul { background: var(--azul); } .toast.vermelho { background: var(--vermelho); }
.toast.sai { animation: toastsai 200ms ease-in both; }
@keyframes toast { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastsai { to { opacity: 0; transform: translateY(8px); } }
.veu { position: fixed; inset: 0; background: rgba(15,24,40,.42); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 40;
  animation: fade 140ms both; padding: 16px; }
@keyframes fade { from { opacity: 0; } }
.modal { background: #fff; border-radius: 18px; box-shadow: var(--sombra-3); width: min(720px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column;
  animation: sobe 200ms cubic-bezier(.2,.7,.2,1) both; overflow: hidden; }
.modal.largo { width: min(1080px, 100%); }
@keyframes sobe { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.modal header { padding: 18px 22px 8px; } .modal header h2 { margin: 0; font-size: 16px; color: var(--azul); }
.modal header p { margin: 4px 0 0; color: var(--cinza); font-size: 12px; }
.modal .corpo { padding: 6px 22px 10px; overflow-y: auto; }
.modal footer { padding: 12px 22px 18px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.opcao { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borda); margin: 6px 0; cursor: pointer;
  transition: border-color var(--rapido), background var(--rapido); }
.opcao:hover { border-color: var(--dourado); }
.opcao input { accent-color: var(--dourado); margin-top: 3px; }
.opcao.on { border-color: var(--dourado); background: #FFFCF7; }
.duas { display: grid; grid-template-columns: 1fr 340px; gap: 12px; }
.carregando { display: grid; place-items: center; padding: 60px; color: var(--cinza); }
.girar { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--cinza-claro); border-top-color: var(--dourado); animation: gira .8s linear infinite; margin: 0 auto 10px; }
@keyframes gira { to { transform: rotate(360deg); } }
.esqueleto { background: linear-gradient(90deg, #E9ECF0 25%, #F3F5F7 37%, #E9ECF0 63%); background-size: 400% 100%; animation: brilho 1.2s ease infinite; border-radius: 12px; }
@keyframes brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- navegação do celular ---------- */
#nav { display: none; }

/* ======================================================================
   CELULAR (tela estreita): navegação embaixo, toques grandes, tudo em coluna
   ====================================================================== */
@media (max-width: 760px) {
  html, body { font-size: 15px; }
  #nav { display: grid; grid-template-columns: repeat(5, 1fr); flex: none; background: #fff; border-top: 1px solid var(--borda);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(21,36,60,.06); z-index: 5; }
  #nav button { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700;
    color: var(--cinza-2); padding: 4px 0; border-radius: 12px; cursor: pointer; position: relative; }
  #nav button svg { width: 23px; height: 23px; }
  #nav button.on { color: var(--azul); }
  #nav button.on svg { color: var(--dourado); }
  #nav .bolinha { position: absolute; top: 0; right: calc(50% - 20px); min-width: 17px; height: 17px; border-radius: 9px; background: #C0392B; color: #fff;
    font-size: 10px; display: grid; place-items: center; padding: 0 4px; }
  .topo { height: 62px; padding: 0 16px; }
  .topo h1 { font-size: 18px; }
  .topo .sobre { font-size: 10px; }
  .btn-voltar { height: 34px; padding: 0 14px; }
  .miolo { padding: 16px 14px 30px; }
  .inicio { padding: 18px 14px 30px; }
  .inicio .logo { width: 210px; }
  .cartoes { gap: 10px; }
  .cartao-menu { padding: 14px; min-height: 80px; }
  .ferramentas, .pilulas, .acoes { padding-left: 12px; padding-right: 12px; }
  .pilulas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .pilulas::-webkit-scrollbar { display: none; }
  .pilula { scroll-snap-align: start; height: 36px; }
  .wa { margin: 4px 0 0; border-radius: 0; border-left: 0; border-right: 0; }
  .wa-conversa { padding: 12px 10px 18px; }
  .wa-linha { padding-left: 6%; }
  .balao { font-size: 14.5px; }
  .acoes { position: sticky; bottom: 0; background: var(--fundo); padding-top: 8px; padding-bottom: 8px; }
  .acoes .btn { flex: 1; }
  .acoes .esp { display: none; }
  .mesa { margin: 6px 0 0; border-radius: 0; border-left: 0; border-right: 0; }
  .rodape-mesa { margin: 0; border-radius: 0; }
  .botoes3 .btn { height: 46px; }
  .campo { grid-template-columns: 1fr; gap: 4px; }
  .arquivo { grid-template-columns: 1fr; padding: 6px 12px 12px; }
  .arquivo .ver { min-height: 300px; }
  .duas { grid-template-columns: 1fr; }
  .chips { grid-template-columns: repeat(3, 1fr); }
  .placar .num { font-size: 40px; }
  .numeros b { font-size: 26px; }
  .barra-fixa { padding: 10px 12px; }
  .barra-fixa .btn { flex: 1; }
  .modal { border-radius: 18px 18px 0 0; align-self: end; width: 100%; max-height: 92vh; }
  .veu { padding: 0; align-items: end; }
  .so-pc { display: none !important; }
  .vivo-topo { padding: 0 14px; gap: 8px; }
  .vivo-topo h1 { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
  .vivo-topo .esp { display: none; }
  .abas { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-left: 12px; padding-right: 12px; }
  .abas::-webkit-scrollbar { display: none; }
  .rodape-mesa .btn.medio { flex: 1; }
  .emp .seg { width: 100%; }
}
@media (min-width: 761px) { .so-cel { display: none !important; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 1ms !important; transition-duration: 1ms !important; } }