:root {
  --bg: #0a0e1a;
  --bg-2: #0d1220;
  --panel: #131a2c;
  --panel-2: #171f34;
  --border: #26314d;
  --border-soft: #1e2740;
  --text: #eef1f8;
  --text-dim: #97a3c2;
  --text-faint: #5f6d90;
  --accent: #5b7fff;
  --accent-2: #8f6bff;
  --accent-grad: linear-gradient(135deg, #5b7fff 0%, #8f6bff 100%);
  --green: #34e2a3;
  --green-grad: linear-gradient(135deg, #22c98f 0%, #34e2a3 100%);
  --red: #ff6b8b;
  --red-grad: linear-gradient(135deg, #ff5677 0%, #ff8a65 100%);
  --purple: #b79bff;
  --blue-soft: #8fb8ff;
  --yellow: #ffd166;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-lift: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -12px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.35);
  --shadow-lift-lg: 0 1px 0 rgba(255,255,255,.05) inset, 0 22px 50px -18px rgba(0,0,0,.7), 0 6px 16px rgba(0,0,0,.4);
  --font-ui: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  --font-display: "Sora", "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-ui);
  background:
    radial-gradient(1100px 560px at 12% -8%, rgba(91,127,255,.16), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(143,107,255,.14), transparent 55%),
    radial-gradient(800px 500px at 50% 100%, rgba(52,226,163,.06), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

header {
  text-align: center;
  padding: 34px 16px 10px;
  position: relative;
}
header h1 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  letter-spacing: 1.5px;
  font-weight: 800;
  background: linear-gradient(135deg, #ffffff 0%, #b9c6ff 60%, #8f6bff 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 6px 30px rgba(91,127,255,.25);
}
header .sub { color: var(--text-dim); font-size: .85rem; margin-top: 6px; letter-spacing: .2px; }

#relogio {
  margin-top: 16px;
  display: inline-block;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
  color: var(--green);
  background: linear-gradient(180deg, rgba(52,226,163,.12), rgba(52,226,163,.04));
  border: 1px solid rgba(52,226,163,.28);
  padding: 6px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 18px -6px rgba(52,226,163,.35), 0 1px 0 rgba(255,255,255,.05) inset;
}
#relogio::after {
  content: " · BRASÍLIA";
  font-size: .62rem;
  letter-spacing: 1px;
  color: #5b6780;
  vertical-align: middle;
}

main { max-width: 100%; margin: 0 auto; padding: 22px 24px 60px; perspective: 1200px; }

/* ABAS */
.tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 18px 16px 0;
}
.tab {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border: 1px solid var(--border-soft);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  color: var(--text-dim);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 11px 24px;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.tab:hover { color: var(--text); transform: translateY(-1px); }
.tab.ativa {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 -6px 22px -10px rgba(91,127,255,.55), 0 1px 0 rgba(255,255,255,.05) inset;
}
.hidden { display: none !important; }

/* SALVAR PAIOL */
.paiol-acoes { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.status-chip { font-size: .72rem; font-weight: 700; letter-spacing: .5px; }
.status-chip.ok { color: var(--green); }
.status-chip.dirty { color: var(--yellow); }
.btn.salvar { background: var(--green-grad); box-shadow: 0 8px 20px -8px rgba(52,226,163,.55); }
.btn.salvar:disabled { background: #1c2438; color: var(--text-faint); cursor: default; box-shadow: none; }
.btn.whatsapp { background: linear-gradient(135deg, #1fbf5c 0%, #12a350 100%); box-shadow: 0 8px 20px -8px rgba(31,191,92,.55); }
.btn.whatsapp:hover { filter: brightness(1.08); }

.card {
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-lift);
  position: relative;
  min-width: 0;
}
.card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  border-radius: var(--radius) var(--radius) 0 0;
}
.card h2 { font-family: var(--font-display); font-size: .8rem; letter-spacing: 1.5px; color: #b6c2e2; margin-bottom: 14px; font-weight: 700; }

.hint { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-faint); }

input, select {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 10px 12px;
  font-size: .9rem;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91,127,255,.18);
}

.btn {
  background: var(--accent-grad);
  color: #fff;
  border: none;
  border-radius: 11px;
  padding: 11px 20px;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 10px 22px -9px rgba(91,127,255,.6), 0 1px 0 rgba(255,255,255,.18) inset;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn:active { transform: translateY(0px) scale(.98); box-shadow: 0 4px 12px -6px rgba(91,127,255,.5), 0 1px 0 rgba(255,255,255,.12) inset; }
.btn.mini { padding: 6px 12px; font-size: .75rem; border-radius: 8px; }
.btn.danger { background: linear-gradient(135deg, #3a2230, #472233); color: #ff9db4; box-shadow: 0 8px 18px -10px rgba(255,107,139,.35); }
.btn.danger:hover { filter: brightness(1.15); }
.lc-drop.tem{position:relative;overflow:hidden}.lc-scan{position:absolute;left:0;right:0;height:3px;top:0;background:linear-gradient(90deg,transparent,#79a0ff,#d4e2ff,#79a0ff,transparent);box-shadow:0 0 15px #79a0ff;animation:lc-scan 1.5s ease-in-out infinite;pointer-events:none}@keyframes lc-scan{0%{transform:translateY(0);opacity:.15}50%{opacity:1}100%{transform:translateY(190px);opacity:.15}}@media(prefers-reduced-motion:reduce){.lc-scan{animation:none;top:50%;opacity:.65}}

/* FILTROS GLOBAIS */
.filtros-globais {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  align-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.filtros-globais::before {
  content: "🎛 FILTROS";
  font-size: .68rem;
  letter-spacing: 1.5px;
  color: var(--text-faint);
  font-weight: 700;
}
.filtros-globais select { width: auto; min-width: 150px; flex: 0 1 auto; }

/* TOTAIS */
.totais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
  align-items: start;
}
.total-card {
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid transparent;
  box-shadow: var(--shadow-lift);
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}
.total-card::after {
  content: "";
  position: absolute; top: -40%; right: -20%;
  width: 60%; height: 140%;
  background: radial-gradient(closest-side, rgba(255,255,255,.08), transparent 70%);
  pointer-events: none;
}
.total-card .rotulo { font-size: .68rem; letter-spacing: 1.5px; opacity: .85; font-weight: 700; }
.total-card strong { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; }
.total-card .valor2 { font-size: .8rem; opacity: .8; }
.total-card .valor-total { font-size: 1.4rem; font-weight: 800; display: block; font-family: var(--font-display); }
.total-card .sep { border-top: 1px solid rgba(255,255,255,.15); margin: 8px 0; width: 100%; }
.azul     { background: linear-gradient(160deg, #16233f 0%, #101a30 100%); border-color: #2a4a86; color: var(--blue-soft); box-shadow: var(--shadow-lift), 0 0 40px -24px rgba(143,184,255,.6); }
.verde    { background: linear-gradient(160deg, #103a2b 0%, #0d2a20 100%); border-color: #1f6d4c; color: var(--green); box-shadow: var(--shadow-lift), 0 0 40px -24px rgba(52,226,163,.6); }
.vermelho { background: linear-gradient(160deg, #3d1c26 0%, #2a151d 100%); border-color: #7a3348; color: #ff9db4; box-shadow: var(--shadow-lift), 0 0 40px -24px rgba(255,107,139,.6); }
.roxo     { background: linear-gradient(160deg, #241b3d 0%, #1b1530 100%); border-color: #4a3690; color: var(--purple); box-shadow: var(--shadow-lift), 0 0 40px -24px rgba(183,155,255,.6); }

.paiol-item {
  font-size: .78rem;
  padding: 3px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  font-variant-numeric: tabular-nums;
}
.paiol-item:first-child { border-top: none; }

.solto-periodo {
  margin-top: 8px;
  font-size: .72rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 8px;
}
.solto-periodo div { display: flex; justify-content: space-between; gap: 8px; }
.solto-periodo b { font-weight: 700; }
.solto-periodo b.up { color: var(--green); }
.solto-periodo b.down { color: #ff9db4; }
.solto-periodo .comparacao { margin-top: 4px; }
.solto-periodo .comparacao span { font-size: .7rem; font-weight: 700; }
.solto-periodo .comparacao span.up { color: var(--green); }
.solto-periodo .comparacao span.down { color: #ff9db4; }
.solto-periodo .comparacao span.neutro { color: var(--text-dim); }

.total-card.clicavel { cursor: pointer; }
.total-card.clicavel:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift-lg); }

.extras {
  font-size: .68rem;
  color: var(--text-dim);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.1);
  line-height: 1.6;
}

/* DESEMPENHO DO CICLO */
.desempenho-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.desp-item {
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  min-width: 0;
  transition: transform .2s ease, border-color .2s ease;
}
.desp-item:hover { transform: translateY(-2px); border-color: var(--accent); }
.desp-item .desp-rotulo { font-size: .64rem; letter-spacing: 1.2px; color: var(--text-dim); }
.desp-item .desp-valor { font-family: var(--font-display); font-size: 1.18rem; font-weight: 800; margin: 6px 0 2px; }
.desp-item .desp-cmp { font-size: .72rem; font-weight: 700; }
.desp-item .desp-cmp.up { color: var(--green); }
.desp-item .desp-cmp.down { color: #ff9db4; }
.desp-item .desp-cmp.neutro { color: var(--text-dim); }
.desp-item .desp-sub { font-size: .66rem; color: var(--text-faint); margin-top: 2px; }
.neural-total{position:relative;overflow:hidden}.neural-total>*:not(.total-neural){position:relative;z-index:1}.total-neural{position:absolute;inset:0;pointer-events:none;opacity:.55}.total-neural svg{position:absolute;right:4px;top:13px;width:138px;height:70px}.total-neural path,.metric-neurons path{fill:none;stroke:#8e83ff;stroke-width:1.5;stroke-linecap:round}.total-neural i{position:absolute;width:7px;height:7px;border-radius:50%;background:#72e9bb;box-shadow:0 0 13px #72e9bb}.total-neural i:nth-child(1){right:12px;top:19px}.total-neural i:nth-child(2){right:80px;top:43px;background:#9a8dff;box-shadow:0 0 13px #9a8dff}.total-neural i:nth-child(3){right:129px;top:64px;background:#8eb5ff;box-shadow:0 0 13px #8eb5ff}.neural-metric{position:relative;overflow:hidden;width:100%;appearance:none;text-align:left;color:var(--text);font:inherit;cursor:pointer}.neural-metric:hover,.neural-metric:focus-visible{box-shadow:0 0 0 3px rgba(119,104,255,.16),var(--shadow-lift);outline:none}.metric-neurons{position:absolute;right:7px;top:7px;width:80px;height:31px;opacity:.7}.metric-neurons svg{position:absolute;inset:0;width:80px;height:31px}.metric-neurons i{position:absolute;width:5px;height:5px;border-radius:50%;background:#6ce1af;box-shadow:0 0 10px #6ce1af}.metric-neurons i:nth-child(1){right:2px;top:2px}.metric-neurons i:nth-child(2){right:19px;top:17px;background:#968bff;box-shadow:0 0 10px #968bff}.metric-neurons i:nth-child(3){right:47px;top:10px;background:#86b5ff;box-shadow:0 0 10px #86b5ff}.neural-total:hover .total-neural i,.neural-metric:hover .metric-neurons i{transform:scale(1.4)}.neural-total .total-neural i,.neural-metric .metric-neurons i{transition:transform .2s ease}html[data-cad-motion=on] .total-neural i,html[data-cad-motion=on] .metric-neurons i{animation:dashNeuron 2.7s ease-in-out infinite}html[data-cad-motion=on] .total-neural i:nth-child(2),html[data-cad-motion=on] .metric-neurons i:nth-child(2){animation-delay:.45s}html[data-cad-motion=on] .total-neural i:nth-child(3),html[data-cad-motion=on] .metric-neurons i:nth-child(3){animation-delay:.9s}@keyframes dashNeuron{50%{opacity:.42;transform:scale(1.28)}}html[data-cad-motion=off] .total-neural *,html[data-cad-motion=off] .metric-neurons *{animation:none!important;transition:none!important}@media(prefers-reduced-motion:reduce){.total-neural *,.metric-neurons *{animation:none!important;transition:none!important}}

.modal-box.largo { width: min(860px, 94vw); text-align: left; }
.modal-box.largo h3 { text-align: center; }
.modal-box.largo .btn { display: block; margin: 14px auto 0; }
#drill-tabela td, #drill-tabela th { white-space: nowrap; }

/* ============ PLANILHAS ============ */
.plan-grupo { margin-bottom: 18px; }
.plan-grupo-titulo {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.plan-mes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  padding: 8px 10px 8px 18px;
  color: #b6c2e2;
  font-size: .82rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background .15s ease, transform .15s ease;
}
.plan-mes:hover { background: rgba(91,127,255,.08); transform: translateX(2px); }
.plan-mes .tree { color: var(--text-faint); }

.plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.plan-card {
  background: linear-gradient(160deg, var(--panel-2), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.plan-card:hover { border-color: var(--accent); transform: translateY(-3px) scale(1.01); box-shadow: var(--shadow-lift-lg); }
.plan-card .pc-titulo { font-family: var(--font-display); font-size: 1rem; font-weight: 800; }
.plan-card .pc-mes { font-size: .72rem; color: var(--blue-soft); letter-spacing: 1px; margin: 4px 0; }
.plan-card .pc-info { font-size: .72rem; color: var(--text-dim); }

/* planilha aberta — visual mensagem WhatsApp, com profundidade de "cartão físico" */
.planilha {
  max-width: 560px;
  margin: 0 auto;
}
.planilha-head {
  text-align: center;
  margin-bottom: 12px;
}
.planilha-head .ph-titulo { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; letter-spacing: .3px; }
.planilha-head .ph-meta { font-size: .72rem; color: var(--text-dim); margin-top: 4px; }
.planilha-msg {
  background: linear-gradient(165deg, #0e4534 0%, #0a2e24 100%);
  border: 1px solid #1b5e46;
  border-radius: 18px;
  padding: 18px 20px;
  font-family: var(--font-ui);
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.65), 0 2px 0 rgba(255,255,255,.05) inset, 0 0 60px -30px rgba(52,226,163,.35);
  position: relative;
}
.planilha-msg::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%);
  pointer-events: none;
}
.pl-linha {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-size: .92rem;
  color: #e8f5ee;
  flex-wrap: wrap;
}
.pl-qtd { min-width: 46px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-emoji { width: 22px; }
.pl-loj { flex: 1; text-transform: uppercase; letter-spacing: .5px; min-width: 0; overflow-wrap: anywhere; }
.pl-data { color: #9fd3bb; font-variant-numeric: tabular-nums; }
.pl-valor { color: var(--yellow); font-variant-numeric: tabular-nums; font-weight: 600; }
.pl-obs { color: #9fd3bb; font-style: italic; }
.pl-status { margin-left: 2px; }
.pl-sep { border-top: 1px solid #1b5e46; margin: 12px 0 8px; }
.pl-resumo { font-size: .82rem; line-height: 1.7; color: #cfeee0; }
.pl-resumo b { color: #fff; }
.planilha-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.plan-voltar { margin-bottom: 12px; }

/* LOGIN */
#login-screen {
  position: fixed; inset: 0; z-index: 100;
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(91,127,255,.18), transparent 60%),
    radial-gradient(800px 480px at 85% 90%, rgba(143,107,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(7,10,18,.6), rgba(7,10,18,.9)),
    #070a12;
  display: flex; align-items: center; justify-content: center;
}
#login-screen.hidden { display: none; }
.login-box {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 34px 28px;
  width: min(340px, 90vw);
  display: flex; flex-direction: column; gap: 12px; text-align: center;
  box-shadow: var(--shadow-lift-lg), 0 0 80px -30px rgba(91,127,255,.35);
}
.login-box h2 { font-family: var(--font-display); font-size: 1rem; color: #dbe3fb; letter-spacing: 1px; font-weight: 700; margin-bottom: 4px; }
.login-box input { width: 100%; box-sizing: border-box; }
.login-erro { color: #ff9db4; font-size: .8rem; min-height: 1em; }
.user-badge {
  position: absolute; top: 16px; left: 18px;
  font-size: .78rem; color: #b6c2e2; display: flex; align-items: center; gap: 8px;
}
.user-badge.hidden { display: none; }
.user-badge .btn { padding: 3px 10px; }
.user-badge { cursor: pointer; }
.user-menu {
  position: absolute; top: 44px; left: 18px; z-index: 60;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px; min-width: 170px; box-shadow: var(--shadow-lift-lg);
}
.user-menu button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: #dce6f5; padding: 9px 11px; border-radius: 8px; cursor: pointer; font-size: .82rem;
  transition: background .15s ease;
}
.user-menu button:hover { background: rgba(91,127,255,.14); }
.campo-senha { position: relative; display: flex; align-items: center; }
.campo-senha input { width: 100%; padding-right: 42px; }
.campo-senha .olho {
  position: absolute; right: 6px; background: none; border: none;
  cursor: pointer; font-size: 1rem; padding: 4px 6px; opacity: .8;
}
.campo-senha .olho:hover { opacity: 1; }
.login-lb { font-size: .68rem; color: #8593b5; letter-spacing: 1px; text-align: left; }
.login-msg { color: var(--blue-soft); font-size: .82rem; min-height: 1em; }
.cred-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.login-recovery { margin-top: 4px; text-align: center; }
.login-recovery a { color: #8593b5; font-size: .74rem; text-decoration: none; }
.login-recovery a:hover { color: var(--blue-soft); text-decoration: underline; }

/* contador de sessão */
.sessao-timer {
  position: absolute; top: 16px; right: 18px;
  font-size: .78rem; color: #b6c2e2; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border); border-radius: 10px; padding: 5px 12px;
  box-shadow: var(--shadow-lift);
}
.sessao-timer.hidden { display: none; }
.sessao-timer.alerta { border-color: #ffb020; color: var(--yellow); }
.sessao-timer.critico { border-color: #ff5f7e; color: #ff9db4; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* popovers 📱 e 🔴 */
.pop { position: relative; display: inline-block; }
.pop > .pop-ico {
  background: none; border: none; cursor: pointer; font-size: .85rem;
  padding: 2px 4px; border-radius: 6px;
}
.pop > .pop-ico.off { opacity: .3; cursor: default; }
.pop-box {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, #24304c, #1c2743);
  border: 1px solid #3a4f7a; border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: .78rem; color: #dce6f5; white-space: nowrap;
  display: none; z-index: 45; box-shadow: var(--shadow-lift-lg);
  max-width: 88vw; white-space: normal; text-align: center;
}
.pop.aberto .pop-box { display: block; }
@media (hover: hover) { .pop:hover .pop-box { display: block; } }
.pop.abaixo .pop-box { bottom: auto; top: calc(100% + 8px); }
.pop.esq .pop-box { left: auto; right: -8px; transform: none; }
.pop-box .btn { margin-top: 8px; font-size: .75rem; padding: 5px 10px; }
.pop-box .pop-tel { color: #9fd3bb; }

/* select Pago? Sim/Não */
.sel-pago {
  background: var(--panel-2); color: #dce6f5; border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 6px; font-size: .78rem; cursor: pointer; transition: all .15s;
}
.sel-pago:hover { border-color: var(--accent); }
.sel-pago.sim { border-color: #2ea86f; color: #7dffc4; }
.sel-pago.nao { border-color: #a03050; color: #ff9db4; }

.neg-info {
  background: linear-gradient(160deg, #331a24, #2a151d); border: 1px solid #a03050; border-radius: var(--radius-sm);
  padding: 13px; font-size: .85rem; color: #ffccd8; margin-bottom: 12px; line-height: 1.6;
}
#neg-motivo { width: 100%; box-sizing: border-box; }

/* scroll 3D */
main { perspective: 1200px; }
.card, .total-card { transition: transform .35s ease, opacity .35s ease, box-shadow .35s ease; transform-style: preserve-3d; }
.fx-in { opacity: 0; transform: translateY(18px) rotateX(4deg) scale(.98); }
.fx-in.mostra { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .card, .total-card { transition: none; }
  .fx-in { opacity: 1; transform: none; }
}

.wa-presets { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.wa-presets .btn { margin: 0 !important; display: inline-block !important; }
.wa-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: .78rem;
  color: #b6c2e2;
  margin-bottom: 12px;
}
.wa-opcoes label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.wa-opcoes input { width: auto; }
.wa-preview {
  background: linear-gradient(165deg, #0e4534 0%, #0a2e24 100%);
  border: 1px solid #1b5e46;
  border-radius: var(--radius);
  padding: 16px;
  font-size: .82rem;
  line-height: 1.6;
  color: #e8f5ee;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--font-ui);
  max-height: 50vh;
  overflow-y: auto;
  box-shadow: 0 20px 44px -18px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.05) inset;
}
.wa-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }

@media print {
  body * { visibility: hidden; }
  #wa-print-area, #wa-print-area * { visibility: visible; }
  #wa-print-area { position: absolute; inset: 0; background: #fff; color: #000; padding: 20px; font-size: 12pt; }
}
.solto-mercs { margin-top: 6px; }
.solto-mercs .paiol-item { font-size: .74rem; }
.solto-mercs .paiol-item .mes-ref {
  color: var(--text-faint);
  font-size: .66rem;
  margin-left: 4px;
}

/* FORMS */
.forms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 18px; margin-bottom: 18px; min-width: 0; }
.forms > *, .linha { min-width: 0; }
.linha { display: flex; gap: 10px; flex-wrap: wrap; }
.linha select { flex: 1.2; min-width: 130px; }
.linha input[type="number"] { min-width: 90px; flex: 0.8; }
.linha input[type="date"] { width: auto; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chips li {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 13px;
  font-size: .8rem;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-lift);
}
.chips li button {
  background: none; border: none; color: #ff7b9c; cursor: pointer; font-size: .9rem;
}

/* sem barras de rolagem visíveis (o conteúdo continua rolável) */
html { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }

/* TABELA */
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th {
  text-align: left;
  font-size: .68rem;
  letter-spacing: 1px;
  color: var(--text-dim);
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
}
td { padding: 11px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
tr.quitado td { opacity: .55; }
tbody tr:hover { background: rgba(91,127,255,.05); }

.recolhe-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #123324, #0e2b1d);
  color: var(--green);
  border-radius: 7px;
  padding: 3px 9px;
  font-size: .78rem;
  margin: 2px 4px 2px 0;
  box-shadow: 0 4px 10px -6px rgba(52,226,163,.4);
}
.recolhe-item button { background: none; border: none; color: #ff9db4; cursor: pointer; }

.add-recolhe { display: flex; gap: 6px; margin-top: 6px; }
.add-recolhe input { width: 90px; padding: 5px 8px; font-size: .78rem; }

.badge {
  display: inline-block;
  border-radius: 7px;
  padding: 4px 11px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1px;
}
.badge.sim { background: linear-gradient(135deg, #123324, #0e2b1d); color: var(--green); }
.badge.nao { background: linear-gradient(135deg, #3a1b22, #2a151c); color: #ff9db4; cursor: pointer; border: none; }
.badge.nao:hover { filter: brightness(1.2); }

.vazio { text-align: center; color: var(--text-dim); padding: 26px !important; }

/* FILTROS */
.filtro { max-width: 280px; margin-bottom: 12px; }
.filtros-linha { display: flex; gap: 10px; flex-wrap: wrap; }
.filtros-linha .filtro { margin-bottom: 0; }
.card .filtros-linha { margin-bottom: 12px; }

/* AGRUPAMENTO POR MÊS */
.mes-row td {
  background: linear-gradient(90deg, rgba(91,127,255,.09), transparent);
  color: var(--blue-soft);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 9px 10px;
}
.mes-row td span { color: var(--text-faint); font-weight: 400; letter-spacing: 0; }

/* MERCADORIAS */
#add-merc { margin-top: 14px; }
.emoji-btn {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1.3rem;
  padding: 5px 11px;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.emoji-btn:hover { border-color: var(--accent); transform: translateY(-1px) scale(1.05); }
.in-merc { width: 110px; padding: 6px 8px; font-size: .85rem; }

/* seletor de mês/ano na tabela */
.mes-cell { white-space: nowrap; }
.sel-mm, .sel-aa {
  width: auto;
  padding: 6px 6px;
  font-size: .82rem;
}
.sel-mm { border-radius: 8px 0 0 8px; border-right: none; }
.sel-aa { border-radius: 0 8px 8px 0; }
select.filtro { width: auto; min-width: 160px; }
.in-nome { width: 130px; padding: 6px 8px; font-size: .85rem; }
.in-venc { width: 132px; padding: 3px 6px; font-size: .7rem; margin-top: 4px; display: block; }

/* MODAL — vidro com profundidade */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 15, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200; /* acima de #login-screen (100) — senão o modal de recovery/wa/etc. abre escondido atrás da tela de login */
}
.modal.hidden { display: none; }
.modal-box {
  background: linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  width: min(560px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: var(--shadow-lift-lg), 0 0 90px -40px rgba(91,127,255,.4);
}
.modal-box h3 { font-family: var(--font-display); font-size: .92rem; color: #dbe3fb; margin-bottom: 16px; letter-spacing: 1px; font-weight: 700; }
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.emoji-grid button {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 11px;
  font-size: 1.5rem;
  padding: 8px 0;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.emoji-grid button:hover { border-color: var(--accent); background: #16233f; transform: translateY(-2px); }

/* ---------- artes (emojis) em dimensão maior, pedido do usuário ---------- */
.emoji-btn { font-size: 1.95rem; padding: 6px 13px; }
.emoji-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 10px; }
.emoji-grid button { font-size: 2.1rem; padding: 10px 0; }
.emoji-picker-tabs button { font-size: 1.45rem; padding: 7px 12px; }
td[data-th="MERC."], td[data-th="EMOJI"] { font-size: 1.7rem; line-height: 1.1; }
.pl-emoji { width: 28px; font-size: 1.25rem; }
.mobile-meta { font-size: .84rem; }

/* Controles compactos da ficha de lojistas. */
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-width: 0; }
.section-title-row h2 { margin-bottom: 0; min-width: 0; flex: 1 1 180px; }
.section-title-row .btn { flex: 0 1 auto; max-width: 100%; }
.lojistas-resumo { color: var(--text-dim); font-size: .8rem; margin-top: 12px; }
.chips.is-collapsed { display: none; }
.chips .chip-nome { appearance: none; border: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; font-weight: 700; padding: 0; }
.chips .chip-nome:hover { color: var(--blue-soft); text-decoration: underline; }
.lista-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lista-acoes .ativo { background: var(--accent-grad); border-color: transparent; color: #fff; }
.mobile-meta { display: none; }

/* ---------- seletor de emojis por categorias (estilo WhatsApp/Telegram) ---------- */
.emoji-picker-busca { width: 100%; box-sizing: border-box; margin-bottom: 10px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border, #2a3552); background: var(--panel-2, #16203a); color: inherit; font: inherit; }
.emoji-picker-tabs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border, #2a3552); }
.emoji-picker-tabs button { flex: 0 0 auto; font-size: 1.15rem; padding: 6px 10px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; cursor: pointer; opacity: .55; }
.emoji-picker-tabs button.ativo { opacity: 1; background: #16233f; border-color: var(--accent, #4d7cfe); }
.emoji-picker-categoria-titulo { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin: 6px 2px; }
.emoji-picker-vazio { color: var(--text-dim); font-size: .85rem; padding: 16px 4px; text-align: center; }

@media (max-width: 800px) {
  .totais, .forms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .totais, .forms { grid-template-columns: minmax(0, 1fr); }
  .filtro, select.filtro { max-width: 100%; width: 100%; }
  header h1 { font-size: 1.15rem; letter-spacing: 1px; }
  .total-card strong { font-size: 1.25rem; }
  .btn { padding: 10px 14px; }
  .btn.mini { padding: 8px 12px; font-size: .8rem; }
  .solto-mercs .paiol-item .mes-ref { font-size: .72rem; }
}

/* TABELAS EM MODO CARTÃO — sem rolagem horizontal */
@media (max-width: 900px) {
  .tabela-wrap thead { display: none; }
  .tabela-wrap table, .tabela-wrap tbody, .tabela-wrap tr, .tabela-wrap td {
    display: block;
    width: 100%;
  }
  .tabela-wrap tbody tr {
    background: linear-gradient(160deg, var(--panel-2), var(--bg-2));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    padding: 11px 13px;
    box-shadow: var(--shadow-lift);
  }
  .tabela-wrap tbody tr.mes-row {
    background: #0d1526;
    text-align: left;
    padding: 8px 12px;
    box-shadow: none;
  }
  .tabela-wrap td {
    border: none;
    padding: 5px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 12px;
    text-align: right;
  }
  .tabela-wrap td::before {
    content: attr(data-th);
    color: var(--text-dim);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: left;
    flex-shrink: 0;
  }
  .tabela-wrap td[data-th=""]::before { display: none; }
  .tabela-wrap .mes-row td { display: block; text-align: left; }
  .tabela-wrap .mes-row td::before { display: none; }
  .tabela-wrap .vazio { display: block; text-align: center; }
  .tabela-wrap .vazio::before { display: none; }
  .in-nome, .in-merc { width: 120px; }
  .add-recolhe { flex: 1 1 100%; justify-content: flex-end; }

  /* trava de segurança: nenhum conteúdo de célula (texto longo, select, input,
     botão) pode ser mais largo que o cartão — evita "vazamento" em telas
     estreitas (iPhone SE, Android compacto). */
  .tabela-wrap td { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
  .tabela-wrap td > * { min-width: 0; max-width: 100%; }
  .tabela-wrap td select,
  .tabela-wrap td input,
  .tabela-wrap td button { max-width: 100%; box-sizing: border-box; }
  .tabela-wrap td select { flex: 1 1 auto; }
}

/* telas bem estreitas (iPhone SE, Android compacto, ~360px) */
@media (max-width: 400px) {
  main { padding: 16px 12px 48px; }
  .card { padding: 14px 14px; }
  header h1 { font-size: 1rem; }
  .filtros-linha, .linha { gap: 8px; }
  .filtros-linha input, .filtros-linha select,
  .linha input, .linha select { min-width: 0; flex: 1 1 100%; }
  .desempenho-grid { grid-template-columns: 1fr; }
  .modal-box { padding: 18px 16px; width: 94vw; }
  .cred-grid { gap: 10px; }
}

/* Em tablets estreitos a navegação inteira pode ser maior que a viewport.
   O excesso fica dentro do próprio trilho, sem alargar a página. */
@media (max-width: 900px) {
  .tabs {
    max-width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; }
}

/* barra de abas (PAINEL/PLANILHAS/USUÁRIOS/FORNECEDORES/AUDITORIA): em telas
   estreitas as 5 abas não cabem numa linha só e, sem overflow, as últimas
   ficavam inacessíveis (cortadas fora da viewport, sem como rolar até elas).
   Vira uma faixa deslizante horizontal, todas as abas continuam alcançáveis. */
@media (max-width: 640px) {
  /* A ficha abre resumida e só revela os campos operacionais ao tocar em Detalhes. */
  .tabela-wrap tbody tr.solto-card:not(.expandido) td:nth-child(1),
  .tabela-wrap tbody tr.solto-card:not(.expandido) td:nth-child(2),
  .tabela-wrap tbody tr.solto-card:not(.expandido) td:nth-child(4),
  .tabela-wrap tbody tr.solto-card:not(.expandido) td:nth-child(5),
  .tabela-wrap tbody tr.solto-card:not(.expandido) td:nth-child(6),
  .tabela-wrap tbody tr.solto-card:not(.expandido) td:nth-child(8) { display: none; }
  .tabela-wrap tbody tr.solto-card:not(.expandido) td:nth-child(3) { align-items: flex-start; }
  .tabela-wrap tbody tr.solto-card:not(.expandido) td:nth-child(3)::before { content: "LOJISTA"; }
  .tabela-wrap tbody tr.solto-card:not(.expandido) td:nth-child(7) { font-weight: 800; color: var(--green); }
  .tabela-wrap tbody tr.solto-card.quitado:not(.expandido) td:nth-child(7) { color: var(--text-dim); }
  .tabela-wrap tbody tr.solto-card td.solto-acoes { justify-content: flex-start; gap: 8px; padding-top: 9px; }
  .mobile-meta { display: block; width: 100%; color: var(--text-dim); font-size: .78rem; margin-top: 2px; }

  .tabs {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; }
}

/* ============ MODO MOBILE MODERNO (opt-in, ativado no menu do usuário) ============
   Só entra em ação em telas de celular (<=640px) e só quando a pessoa liga a opção —
   por padrão ninguém vê nada disto, o layout tradicional continua intacto. */
@media (max-width: 640px) {
  body.modo-mobile-moderno { padding-bottom: 74px; }

  body.modo-mobile-moderno nav.tabs {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    justify-content: space-around;
    gap: 2px;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(13,18,32,.88), rgba(10,14,26,.98));
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border-soft);
    box-shadow: 0 -8px 30px -10px rgba(0,0,0,.6);
    overflow-x: visible;
  }
  body.modo-mobile-moderno .tab {
    flex: 1 1 0;
    min-height: 52px;
    border-radius: 14px;
    border: 1px solid transparent;
    border-bottom: 1px solid transparent;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: .62rem;
    letter-spacing: .3px;
    white-space: normal;
  }
  body.modo-mobile-moderno .tab.ativa {
    background: var(--accent-grad);
    color: #fff;
    box-shadow: 0 6px 18px -6px rgba(91,127,255,.55);
  }

  /* botões e campos com alvo de toque maior — mais fácil de acertar com o dedo */
  body.modo-mobile-moderno .btn,
  body.modo-mobile-moderno button,
  body.modo-mobile-moderno input,
  body.modo-mobile-moderno select {
    min-height: 46px;
    font-size: 1rem;
  }
  body.modo-mobile-moderno .btn.mini { min-height: 38px; font-size: .85rem; }

  /* cartões com respiro maior e cantos mais arredondados — visual mais "app moderno" */
  body.modo-mobile-moderno .card,
  body.modo-mobile-moderno section.card {
    border-radius: 20px;
    padding: 18px 16px;
  }

  /* emojis/ícones de identificação ainda maiores neste modo */
  body.modo-mobile-moderno td[data-th="MERC."],
  body.modo-mobile-moderno td[data-th="EMOJI"] {
    font-size: 2.1rem;
  }

  body.modo-mobile-moderno header { padding-bottom: 4px; }
}

.user-menu button.mm-toggle-ativo { color: var(--green); }

/* ============ LEITOR DE COMPROVANTES (recolhe/repasse) — 21/09/2026 ============
   Cada recolhe mostra COMO foi pago: 🧾 (PIX/TED/depósito, abre o comprovante)
   ou 🤚 (dinheiro em mãos). Recolhe antigo, de antes do leitor, fica sem ícone. */
.recolhe-item button.rec-forma,
button.rec-forma {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: inherit;
  border-radius: 6px;
  padding: 0 5px;
  font-size: .9rem;
  line-height: 1.35;
  cursor: pointer;
}
button.rec-forma:hover { background: rgba(255,255,255,.18); }
.recolhe-item.f-maos { background: linear-gradient(135deg, #3a2f12, #2b230e); color: #ffd98a; box-shadow: 0 4px 10px -6px rgba(224,179,65,.45); }
.recolhe-item button.rec-x { background: none; border: none; color: #ff9db4; cursor: pointer; }
.add-recolhe .btn.mini { min-width: 34px; font-size: 1rem; font-weight: 800; }
.so-mobile { display: none; }
@media (max-width: 640px) {
  .so-mobile { display: inline-flex; }
  .tabela-wrap tbody tr.solto-card.expandido .so-mobile { display: none; }
  .add-recolhe input { flex: 1 1 auto; width: auto; min-width: 0; font-size: 16px; }
  .add-recolhe .btn.mini { min-height: 38px; min-width: 44px; }
}

/* ============ FORNECEDOR — aba única (Fornecedores + Operação ABSOL) ============
   Referências: Stripe (números que pedem ação no topo, situação em cada linha,
   filtros em chips), Xero (contas a pagar por situação), Nubank/Mercado Pago
   (mês com setas e barra do que já foi pago). Cores próprias com fallback —
   funciona igual nos três painéis. */
#view-fornecedores {
  --fx-bg2: var(--bg-2, #0d1220);
  --fx-panel2: var(--panel-2, #171f34);
  --fx-border: var(--border, #26314d);
  --fx-text: var(--text, #eef1f8);
  --fx-dim: var(--text-dim, #97a3c2);
  --fx-green: var(--green, #34e2a3);
  --fx-red: #ff8ea5;
  --fx-yellow: var(--yellow, #ffd166);
  --fx-blue: #9fb4ff;
  --fx-purple: #c4a8ff;
}
#view-fornecedores .card { margin-bottom: 16px; }
.inicio-operacao { border-color: rgba(91,127,255,.42); background: linear-gradient(145deg, rgba(91,127,255,.12), rgba(23,31,52,.96) 58%); }
.inicio-cabeca { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.inicio-sobrelinha { color:var(--green); font-size:.66rem; font-weight:800; letter-spacing:1.4px; margin:0 0 5px; }
.inicio-cabeca h2 { margin:0; }
.inicio-legenda { color:var(--text-dim); font-size:.74rem; border:1px solid var(--border); background:var(--bg-2); border-radius:999px; padding:5px 9px; white-space:nowrap; }
.inicio-rede { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; isolation:isolate; }
.inicio-linhas { position:absolute; z-index:-1; inset:20% 10%; opacity:.48; background:linear-gradient(29deg,transparent 49.6%,rgba(143,155,255,.46) 50%,transparent 50.4%),linear-gradient(151deg,transparent 49.6%,rgba(92,227,175,.33) 50%,transparent 50.4%); pointer-events:none; }
.inicio-no { appearance:none; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; min-height:94px; padding:13px 14px; border:1px solid var(--border); border-radius:14px; background:linear-gradient(145deg,rgba(17,27,49,.96),rgba(10,15,28,.92)); color:var(--text); font:inherit; text-align:left; cursor:pointer; box-shadow:0 12px 26px -24px rgba(0,0,0,.9); transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.inicio-no > span { font-size:1.02rem; line-height:1; }
.inicio-no b { font-size:.82rem; line-height:1.2; }
.inicio-no small { color:var(--text-dim); font-size:.68rem; line-height:1.25; }
.inicio-no:hover,.inicio-no:focus-visible { outline:none; transform:translateY(-2px); border-color:var(--accent); background:linear-gradient(145deg,rgba(39,54,98,.96),rgba(16,24,44,.96)); box-shadow:0 0 0 3px rgba(119,104,255,.16),0 15px 28px -23px rgba(91,127,255,.85); }
.inicio-no.prioridade { border-color:rgba(255,209,102,.53); }
.inicio-no.prioridade b { color:var(--yellow); }
.inicio-resumo { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:12px; }
.inicio-item { background:rgba(8,12,24,.34); border:1px solid var(--border); border-radius:12px; padding:10px 12px; min-width:0; }
.inicio-item span { display:block; color:var(--text-faint); text-transform:uppercase; letter-spacing:1px; font-size:.62rem; font-weight:800; }
.inicio-item strong { display:block; margin-top:3px; font-size:1.05rem; color:var(--text); overflow-wrap:anywhere; }
.inicio-item small { display:block; margin-top:3px; color:var(--text-dim); font-size:.72rem; line-height:1.35; }
.inicio-item.alerta strong { color:var(--yellow); }.inicio-item.urgente strong { color:#ff8ea5; }
.inicio-ajuda { margin:10px 0 0; line-height:1.45; }
.fx-hero { background: linear-gradient(160deg, rgba(91,127,255,.13), rgba(143,107,255,.05) 60%, transparent); border-color: rgba(143,107,255,.35) !important; }
.fx-hero-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fx-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fx-id h2 { margin: 0 0 2px; }
.fx-id .hint { margin: 0; max-width: 62ch; line-height: 1.45; }
.fx-avatar { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: linear-gradient(135deg, rgba(91,127,255,.35), rgba(143,107,255,.25)); border: 1px solid rgba(143,107,255,.45); box-shadow: 0 10px 24px -12px rgba(91,127,255,.8); }
.fx-pill { display: inline-flex; align-items: center; gap: 5px; border: 1px solid; border-radius: 999px; padding: 3px 11px; font-size: .74rem; font-weight: 700; white-space: nowrap; line-height: 1.5; }
.fx-pill.fx-verde { color: var(--fx-green); border-color: rgba(52,226,163,.5); background: rgba(52,226,163,.08); }
.fx-pill.fx-amarelo { color: var(--fx-yellow); border-color: rgba(255,209,102,.5); background: rgba(255,209,102,.07); }
.fx-pill.fx-vermelho { color: var(--fx-red); border-color: rgba(255,107,139,.5); background: rgba(255,107,139,.08); }
.fx-pill.fx-neutro { color: var(--fx-dim); border-color: var(--fx-border); background: transparent; }
.fx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.fx-kpi { background: var(--fx-bg2); border: 1px solid var(--fx-border); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fx-kpi > span { font-size: .66rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--fx-dim); font-weight: 700; }
.fx-kpi strong { font-size: 1.25rem; color: var(--fx-blue); font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
.fx-kpi small { font-size: .74rem; color: var(--fx-dim); }
.fx-kpi.fx-c-vermelho strong { color: var(--fx-red); }
.fx-kpi.fx-c-amarelo strong { color: var(--fx-yellow); }
.fx-kpi.fx-c-verde strong { color: var(--fx-green); }
.fx-kpi.fx-c-roxo strong { color: var(--fx-purple); }
.fx-fluxo { display:flex; align-items:stretch; gap:7px; margin-top:16px; overflow-x:auto; padding-bottom:2px; }
.fx-fluxo-etapa { flex:1 0 165px; display:flex; gap:8px; align-items:flex-start; padding:10px; border:1px solid var(--fx-border); border-radius:12px; background:rgba(8,12,24,.3); }
.fx-fluxo-etapa b { display:grid; place-items:center; flex:0 0 23px; height:23px; border-radius:50%; background:rgba(91,127,255,.25); color:var(--fx-blue); font-size:.72rem; }.fx-fluxo-etapa strong { display:block; font-size:.78rem; color:var(--fx-text); }.fx-fluxo-etapa small { display:block; margin-top:2px; color:var(--fx-dim); font-size:.69rem; line-height:1.35; }
.fx-proxima { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 12px; padding:12px 14px; border-radius:12px; border:1px solid rgba(91,127,255,.42); background:rgba(91,127,255,.10); color:#d9e1ff; }.fx-proxima b { color:#fff; }.fx-proxima small { display:block; margin-top:2px; color:var(--fx-dim); }.fx-proxima .btn { flex:0 0 auto; }
.fx-alertas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.fx-alertas:empty { display: none; }
.fx-alerta { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; border-radius: 12px; padding: 11px 14px; font-size: .86rem; line-height: 1.45; border: 1px solid; }
.fx-alerta.fx-vermelho { background: rgba(255,107,139,.08); border-color: rgba(255,107,139,.4); color: #ffb3c2; }
.fx-alerta.fx-amarelo { background: rgba(255,209,102,.07); border-color: rgba(255,209,102,.35); color: var(--fx-yellow); }
.fx-alerta.fx-azul { background: rgba(91,127,255,.09); border-color: rgba(91,127,255,.35); color: #c7d2ff; }
.fx-alerta-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-sem { background: var(--fx-bg2); border: 1px solid var(--fx-border); border-radius: 999px; padding: 2px 4px 2px 10px; display: inline-flex; gap: 6px; align-items: center; color: var(--fx-text); font-size: .8rem; }
.fx-lancar h2 { margin-bottom: 10px; }
#fx-lancar-dica { font-size: .84rem; line-height: 1.5; margin: 4px 0 8px; }
.ab-lancar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 10px; }
.btn.ab-grande { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 74px; font-size: .95rem; text-align: center; }
.btn.ab-grande small { font-weight: 500; font-size: .72rem; opacity: .85; }
button.linkish { background: none; border: 0; padding: 0; color: var(--fx-blue); font: inherit; font-size: .78rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.fx-mes-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fx-mes-nav { display: flex; align-items: center; gap: 6px; }
.fx-mes-nav select { min-width: 170px; text-transform: capitalize; }
.fx-seta { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--fx-border); background: var(--fx-bg2); color: var(--fx-text); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.fx-seta:hover:not(:disabled) { border-color: #5b7fff; }
.fx-seta:disabled { opacity: .35; cursor: default; }
.fx-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 12px; }
.fx-num { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-num > span { font-size: .66rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--fx-dim); font-weight: 700; }
.fx-num strong { font-size: 1.45rem; font-weight: 800; color: var(--fx-blue); letter-spacing: -.01em; overflow-wrap: anywhere; }
.fx-num.fx-c-verde strong { color: var(--fx-green); }
.fx-num.fx-c-vermelho strong { color: var(--fx-red); }
.fx-num small { font-size: .74rem; color: var(--fx-dim); line-height: 1.45; }
#fn-total-pago-det span { display: block; overflow-wrap: anywhere; }
.fx-barra { height: 10px; border-radius: 999px; background: var(--fx-bg2); border: 1px solid var(--fx-border); overflow: hidden; display: flex; }
.fx-barra i { display: block; height: 100%; width: 0; transition: width .5s ease; }
.fx-barra i.pago { background: linear-gradient(90deg, #22c98f, #34e2a3); }
.fx-barra i.conf { background: repeating-linear-gradient(45deg, rgba(255,209,102,.85) 0 6px, rgba(255,209,102,.55) 6px 12px); }
.fx-segmentos { display: flex; gap: 4px; padding: 4px; margin: 0 0 12px; background: var(--fx-bg2); border: 1px solid var(--fx-border); border-radius: 14px; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.fx-segmentos::-webkit-scrollbar { display: none; }
.fx-segmentos button { background: transparent; border: 0; color: var(--fx-dim); font: 600 .84rem/1 inherit; padding: 10px 16px; border-radius: 10px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.fx-segmentos button b { background: rgba(255,255,255,.08); color: var(--fx-text); border-radius: 999px; padding: 2px 8px; font-size: .72rem; }
.fx-segmentos button.ativo { background: linear-gradient(135deg, #5b7fff, #8f6bff); color: #fff; box-shadow: 0 6px 16px -8px rgba(91,127,255,.9); }
.fx-segmentos button.ativo b { background: rgba(255,255,255,.22); color: #fff; }
.fx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fx-chip { background: var(--fx-bg2); border: 1px solid var(--fx-border); color: var(--fx-dim); border-radius: 999px; padding: 6px 12px; font: 600 .78rem/1.2 inherit; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.fx-chip b { color: var(--fx-text); }
.fx-chip:hover { border-color: #5b7fff; }
.fx-chip.ativo { border-color: #8f6bff; background: rgba(143,107,255,.16); color: #fff; }
.fx-h3 { font-size: .9rem; letter-spacing: .04em; margin: 4px 0 10px; }
#fx-custodia-bloco { margin-top: 18px; }
.fx-resumo { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fx-resumo span { background: var(--fx-bg2); border: 1px solid var(--fx-border); border-radius: 999px; padding: 3px 10px; font-size: .75rem; color: var(--fx-dim); }
.fx-txt-vermelho { color: var(--fx-red) !important; }
.fn-tag { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: .7rem; font-weight: 600; margin-top: 3px; }
.fn-tag.chefe { background: rgba(52,226,163,.12); color: var(--fx-green); border: 1px solid rgba(52,226,163,.35); }
.fn-tag.seu { background: rgba(255,209,102,.08); color: var(--fx-yellow); border: 1px solid rgba(255,209,102,.3); }
tr.fn-nao-conta td { opacity: .55; }
tr.fn-nao-conta td[data-th="VALOR"] { text-decoration: line-through; }
#fn-tabela-repasses:not(.com-absol) .so-absol { display: none; }
@media (max-width: 900px) {
  .fx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .inicio-cabeca { align-items:flex-start; }.inicio-legenda { white-space:normal; text-align:right; }.inicio-rede { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.inicio-linhas { display:none; }.inicio-no { min-height:98px; padding:12px; }.inicio-resumo { grid-template-columns:1fr; }
  .ab-lancar { grid-template-columns: 1fr; }
  .fx-numeros { grid-template-columns: 1fr 1fr; }
  .fx-numeros .fx-num:first-child { grid-column: 1 / -1; }
  .fx-mes-topo { align-items: stretch; }
  .fx-mes-nav { flex: 1 1 100%; }
  .fx-mes-nav select { flex: 1; min-width: 0; font-size: 16px; }
  .fx-mes-topo > .btn { width: 100%; }
  .fx-segmentos { width: 100%; }
  .fx-segmentos button { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 4px; font-size: .8rem; }
  .fx-segmentos button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .fx-id .hint { font-size: .86rem; }
  .fx-alerta { align-items: flex-start; }
  .fx-avatar { width: 44px; height: 44px; flex-basis: 44px; font-size: 22px; }
  .fx-id { align-items: flex-start; }
  .fx-kpis { gap: 8px; }
  .fx-kpi { padding: 10px 11px; }
  .fx-kpi > span { font-size: .6rem; letter-spacing: .8px; }
  .fx-kpi strong { font-size: 1.02rem; }
  .fx-kpi small { font-size: .68rem; line-height: 1.35; }
  .fx-num strong { font-size: 1.2rem; }
  .fx-proxima .btn { width:100%; }.fx-fluxo { margin-left:-2px; margin-right:-2px; }
}
@media (max-width: 340px) {
  .fx-kpis { grid-template-columns: 1fr; }
}

/* ============ haver do lojista (sobra de pagamento) ============ */
.recolhe-item.f-haver { background: linear-gradient(135deg, #0f3527, #0b2a1f); color: #8ff0c6; box-shadow: 0 4px 10px -6px rgba(52,226,163,.45); }
.hv-mov { display: flex; align-items: center; gap: 6px; margin-top: 6px; white-space: nowrap; font-size: .8rem; }
.hv-mov small { color: var(--text-dim, #97a3c2); overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.hv-mov.uso { opacity: .75; }
.hv-mov .btn.mini { padding: 1px 6px; }

/* ============ lançar: só duas opções (comprovante / em mãos) ============ */
.btn.ab-grande.ab-maos { background: linear-gradient(135deg, #3a2f12, #5a4414); color: #ffe3a0; border: 1px solid rgba(224,179,65,.55); box-shadow: 0 8px 20px -10px rgba(224,179,65,.5); }
.btn.ab-grande.ab-maos:hover { filter: brightness(1.1); }

/* ============ aviso de versão nova publicada ============ */
.aviso-versao {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 10px); transform: translateX(-50%);
  z-index: 150; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px;
  width: max-content; max-width: calc(100vw - 24px); padding: 10px 14px; border-radius: 14px;
  background: rgba(14, 22, 42, .96); color: #e8eefc; border: 1px solid rgba(127, 179, 255, .55);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .7); font-size: 14px; font-weight: 600; line-height: 1.35;
}
.aviso-versao .btn { margin: 0; }
/* Lojinhas — taxas mensais independentes de recolhes e repasses */
#view-lojinhas{padding:18px 0}.lojinha-hero{display:flex;gap:22px;justify-content:space-between;align-items:center;margin:0 0 14px;padding:20px;border:1px solid #d9e6ff;border-radius:16px;background:linear-gradient(135deg,#eff6ff,#fff)}.lojinha-hero h2{margin:2px 0}.lojinha-hero p{margin:4px 0;color:#52657f}.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.09em;color:#1e5ec8}.lojinha-resumo{display:flex;gap:16px}.lojinha-resumo span{display:grid;font-size:.76rem;color:#64748b}.lojinha-resumo b{font-size:1.05rem;color:#14213d}.lojinha-filtros{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.lojinha-filtros label{display:grid;gap:5px;font-size:.8rem;font-weight:700}.lj-search{min-width:210px;flex:1}.lojinhas-table td small{display:block;color:#64748b;margin-top:3px}.lj-status{display:inline-block;padding:3px 8px;border-radius:999px;font-size:.75rem;font-weight:800;text-transform:uppercase}.lj-status.ok{background:#dcfce7;color:#166534}.lj-status.alerta{background:#fef3c7;color:#92400e}.lj-status.atraso{background:#fee2e2;color:#b91c1c}.lj-status.neutro{background:#e2e8f0;color:#475569}@media(max-width:720px){.lojinha-hero{display:block}.lojinha-resumo{margin-top:14px;justify-content:space-between}.lojinhas-table th:nth-child(2),.lojinhas-table td:nth-child(2){display:none}.lojinhas-table td{vertical-align:top}.lojinhas-table .btn{margin:2px 0}.lojinha-filtros>*{width:100%}}
.lj-identidade{display:flex;align-items:center;gap:10px;min-width:230px}.lj-photos{flex:0 0 112px;display:grid;grid-template-columns:1fr 1fr;gap:6px}.lj-photo-slot{position:relative;aspect-ratio:1;overflow:hidden;display:grid;place-items:center;padding:0;border:1px dashed var(--border);border-radius:9px;background:rgba(91,127,255,.10);color:#c7c2ff;cursor:pointer;font:inherit}.lj-photo-slot:hover,.lj-photo-slot:focus-visible{outline:2px solid rgba(104,220,184,.55);outline-offset:2px}.lj-photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.lj-photo-slot span{font-size:1.05rem}.lj-photo-slot small{position:absolute;z-index:1;inset:auto 3px 3px;padding:2px 3px;border-radius:4px;background:rgba(8,13,30,.82);color:#d7ddf3!important;font-size:.5rem!important;line-height:1.1;text-align:center;margin:0!important}.lj-info{min-width:0;display:grid;gap:3px}.lj-info b,.lj-info small{overflow-wrap:anywhere}.lj-ficha-link{width:max-content;max-width:100%;padding:0;border:0;background:transparent;color:#9fb4ff;font:700 .68rem/1.3 var(--font-ui);text-decoration:underline;text-underline-offset:2px;cursor:pointer}.lj-nao-importada{display:inline-flex;padding:5px 9px;border:1px solid rgba(255,209,102,.3);border-radius:999px;background:rgba(255,209,102,.07);color:#ffe2a0;font-size:.72rem;font-weight:700}
@media(max-width:720px){.lojinhas-table td:nth-child(2){display:flex}.lj-identidade{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;width:100%}.lj-photos{width:112px}.lj-info{margin-top:2px}.lj-nao-importada{white-space:normal}.lojinhas-table td[colspan]{align-items:flex-start}}
 .local-copy-banner{position:relative;z-index:20;margin:10px auto 0;max-width:1180px;padding:9px 14px;border:1px solid rgba(255,193,7,.45);border-radius:10px;background:rgba(69,50,3,.78);color:#ffe9a8;font-size:12px;line-height:1.45}.local-copy-note{margin:10px 0;padding:10px 12px;border-left:3px solid #f1bb34;background:rgba(241,187,52,.12);color:#ffe0a1}

/* composição por mercadoria ao lado dos totais — mercadorias têm preços diferentes (27/09/2026) */
.mix-merc{display:block;font-style:normal;font-size:.7rem;font-weight:600;color:var(--text-faint);letter-spacing:0;text-transform:none;margin-top:3px;white-space:normal;line-height:1.35}
.desp-item .desp-mix{font-size:.64rem;color:var(--text-faint);margin-top:3px;line-height:1.35}
.pop-box .mix-merc{margin-top:0}

/* ===== "Começar por aqui" no estilo do Cérebro ABSOL (27/09/2026): atalhos como neurônios com
   anel colorido e número vivo, linhas de fluxo ao fundo e resumo em cartões com a composição ===== */
.inicio-operacao{position:relative;overflow:hidden;isolation:isolate;border-radius:26px;border-color:rgba(143,107,255,.38);background:radial-gradient(ellipse at 92% -12%,rgba(143,107,255,.3),transparent 55%),radial-gradient(ellipse at -6% 112%,rgba(52,226,163,.12),transparent 52%),linear-gradient(160deg,rgba(20,27,48,.97),rgba(9,13,25,.97))}
.inicio-aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.inicio-aurora i{position:absolute;width:320px;height:320px;border-radius:50%;filter:blur(70px);opacity:.22;animation:inicioDeriva 22s ease-in-out infinite alternate}
.inicio-aurora i:first-child{background:#5b7fff;left:-90px;top:-120px}
.inicio-aurora i:last-child{background:#8f6bff;right:-110px;bottom:-140px;animation-duration:28s}
@keyframes inicioDeriva{to{transform:translate3d(40px,30px,0) scale(1.12)}}
.inicio-cabeca{margin-bottom:16px}
.inicio-sobrelinha{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:var(--green);letter-spacing:1.6px}
.inicio-pulso{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(52,226,163,.6);animation:inicioPing 2.2s infinite}
@keyframes inicioPing{70%{box-shadow:0 0 0 10px rgba(52,226,163,0)}100%{box-shadow:0 0 0 0 rgba(52,226,163,0)}}
.inicio-data{color:var(--text-faint);letter-spacing:.6px;font-weight:700;text-transform:none}
.card.inicio-operacao h2{font-size:1.5rem;letter-spacing:-.02em;line-height:1.15;color:var(--text);margin:4px 0 0}
.inicio-cabeca h2 em{font-style:normal;background:linear-gradient(135deg,#5b7fff,#8f6bff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 18px rgba(143,107,255,.35))}
.inicio-sub{margin:6px 0 0;color:var(--text-dim);font-size:.78rem}
button.inicio-legenda{appearance:none;font:inherit;font-size:.74rem;font-weight:700;color:var(--text);cursor:pointer;border-color:rgba(143,160,255,.28);background:rgba(10,14,26,.6);transition:border-color .2s,transform .2s,background .2s}
button.inicio-legenda:hover{transform:translateY(-1px);border-color:rgba(143,107,255,.6)}
button.inicio-legenda.urgente{color:#ffc2cf;border-color:rgba(255,107,139,.55);background:rgba(255,107,139,.12);box-shadow:0 0 0 0 rgba(255,107,139,.45);animation:inicioAlerta 2.6s infinite}
@keyframes inicioAlerta{70%{box-shadow:0 0 0 9px rgba(255,107,139,0)}100%{box-shadow:0 0 0 0 rgba(255,107,139,0)}}
.inicio-rede{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:12px}
svg.inicio-linhas{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);z-index:-1;opacity:.75;pointer-events:none;background:none}
.inicio-linhas path{fill:none;stroke:rgba(143,160,255,.3);stroke-width:1.5;stroke-dasharray:4 14;vector-effect:non-scaling-stroke;animation:inicioFluxo 8s linear infinite}
.inicio-linhas path:nth-child(2){stroke:rgba(52,226,163,.24);animation-duration:10s}
.inicio-linhas path:nth-child(3){stroke:rgba(143,107,255,.32);animation-duration:12s;animation-direction:reverse}
@keyframes inicioFluxo{to{stroke-dashoffset:-180}}
.inicio-no{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);grid-auto-rows:auto;column-gap:12px;row-gap:2px;align-content:center;align-items:center;min-height:0;padding:12px 14px 12px 12px;border-radius:22px;border:1px solid rgba(143,160,255,.16);background:linear-gradient(160deg,rgba(26,34,62,.84),rgba(11,16,30,.88));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--text);text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s,background .25s}
.inicio-no > span{grid-row:1 / span 3;position:relative;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;font-size:1.25rem;background:radial-gradient(circle at 30% 22%,#3a3f8f,#161b3d 60%,#0b0f22);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 8px 18px -8px #000}
.inicio-no > span::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(var(--ring,#8f6bff) 0 72%,rgba(143,160,255,.12) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.inicio-no b{font-size:.86rem;line-height:1.2}
.inicio-no small{color:var(--text-dim);font-size:.7rem;line-height:1.3}
.inicio-badge{justify-self:start;margin-top:4px;font-style:normal;font-size:.64rem;font-weight:800;padding:2px 9px;border-radius:999px;background:rgba(143,160,255,.12);border:1px solid rgba(143,160,255,.2);color:var(--text-dim);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.inicio-no:hover,.inicio-no:focus-visible{outline:none;transform:translateY(-3px);border-color:rgba(143,107,255,.55);background:linear-gradient(160deg,rgba(38,48,88,.92),rgba(14,20,38,.92));box-shadow:0 18px 34px -22px rgba(143,107,255,.95),0 0 0 3px rgba(143,107,255,.14)}
.inicio-no:hover > span::before,.inicio-no:focus-visible > span::before{transform:rotate(140deg)}
.inicio-no.prioridade{border-color:rgba(255,209,102,.45)}
.inicio-no.prioridade b{color:var(--yellow)}
.inicio-no.prioridade .inicio-badge{background:rgba(255,209,102,.14);border-color:rgba(255,209,102,.38);color:var(--yellow)}
.inicio-no.inicio-novo{border-color:rgba(143,107,255,.34)}
.inicio-no.inicio-novo .inicio-badge{background:rgba(143,107,255,.18);border-color:rgba(143,107,255,.4);color:#d9ccff}
.inicio-no.inicio-wa{border-color:rgba(37,211,102,.4)}
.inicio-no.inicio-wa .inicio-badge{background:rgba(37,211,102,.16);border-color:rgba(37,211,102,.42);color:#8dffbf}
.inicio-resumo{gap:12px;margin-top:16px}
.inicio-item{position:relative;overflow:hidden;border-radius:20px;padding:14px 16px;background:linear-gradient(160deg,rgba(24,32,56,.9),rgba(10,15,28,.9));border:1px solid rgba(143,160,255,.16)}
.inicio-item::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--c1,#5b7fff),transparent 85%)}
.inicio-item.urgente{--c1:#ff6b8b;border-color:rgba(255,107,139,.3)}.inicio-item.alerta{--c1:#ffd166}.inicio-item.ok{--c1:#34e2a3}
.inicio-item.ok strong{color:var(--green)}
.inicio-item strong{font-size:1.4rem;letter-spacing:-.02em}
.mix-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.mix-chips i{font-style:normal;font-size:.66rem;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(143,160,255,.1);border:1px solid rgba(143,160,255,.18);color:var(--text-dim);white-space:nowrap}
.inicio-ajuda{display:flex;gap:8px;align-items:flex-start;margin-top:14px;padding:10px 12px;border-radius:14px;background:rgba(143,184,255,.06);border:1px solid rgba(143,184,255,.14)}
@media (max-width:640px){
  .inicio-rede{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .inicio-no{grid-template-columns:1fr;padding:12px;row-gap:3px}
  .inicio-no > span{grid-row:auto;width:42px;height:42px;margin-bottom:6px;font-size:1.1rem}
  .card.inicio-operacao h2{font-size:1.25rem}
  .inicio-resumo{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.inicio-aurora i,.inicio-pulso,.inicio-linhas path,button.inicio-legenda.urgente{animation:none}}

/* corrigir lançamento / recolhe já feito — só administrador (27/09/2026) */
.edit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 6px}
.edit-grid label{display:flex;flex-direction:column;gap:5px;font-size:.72rem;color:var(--text-dim);font-weight:700;letter-spacing:.3px}
.edit-grid .ed-largo{grid-column:1/-1}
.edit-grid input,.edit-grid select{width:100%;min-height:40px}
.edit-aviso{min-height:1.2em;margin:6px 0 0;font-size:.78rem;font-weight:600;color:var(--green)}
.edit-aviso.erro{color:#ff8ea5}
.rec-ed{border:0;background:transparent;cursor:pointer;font-size:.78rem;padding:0 2px;opacity:.7;line-height:1}
.rec-ed:hover,.rec-ed:focus-visible{opacity:1}
@media (max-width:520px){.edit-grid{grid-template-columns:1fr}}
@media (pointer:coarse){.rec-ed{padding:6px 8px;font-size:.95rem;opacity:.9}}