:root {
  --azul-900: #0a2540;
  --azul-700: #0f4c81;
  --azul-600: #1565c0;
  --azul-500: #1e88e5;
  --azul-100: #e3f2fd;
  --branco: #ffffff;
  --cinza-100: #f5f7fa;
  --cinza-300: #dfe4ea;
  --cinza-600: #6b7785;
  --verde: #21c15a;
  --verde-escuro: #189947;
  --vermelho: #e53935;
  --amarelo: #f5a623;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(10, 37, 64, 0.08);
  font-size: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", "Inter", Arial, sans-serif;
  background: var(--cinza-100);
  color: var(--azul-900);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul-600); text-decoration: none; }

.container {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

/* ---------- Header ---------- */
.topbar {
  background: linear-gradient(135deg, var(--azul-900), var(--azul-600));
  color: var(--branco);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow);
}
.topbar img.logo { height: 28px; }
.topbar h1 { font-size: 1.05rem; margin: 0; font-weight: 600; }

/* ---------- Cards ---------- */
.card {
  background: var(--branco);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 18px;
}
.card h2 {
  font-size: 1rem;
  color: var(--azul-700);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.card .row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--cinza-300); font-size: 0.95rem; }
.card .row:last-child { border-bottom: none; }
.card .row b { color: var(--azul-900); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 18px;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .08s ease, opacity .15s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--azul-600); color: var(--branco); }
.btn-success { background: var(--verde); color: var(--branco); }
.btn-success:hover { background: var(--verde-escuro); }
.btn-outline { background: transparent; color: var(--azul-600); border: 1.5px solid var(--azul-600); }
.btn-danger { background: var(--vermelho); color: var(--branco); }
.btn-sm { padding: 8px 12px; font-size: 0.82rem; width: auto; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Forms ---------- */
label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--azul-700); margin: 14px 0 6px; }
input, select, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--cinza-300);
  border-radius: 10px;
  font-size: 0.95rem;
  background: var(--branco);
  color: var(--azul-900);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul-500); }
.hint { font-size: 0.78rem; color: var(--cinza-600); margin-top: 4px; }
.checkbox-line { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; }
.checkbox-line input { width: auto; margin-top: 3px; }
.checkbox-line label { margin: 0; font-weight: 400; color: var(--azul-900); font-size: 0.85rem; }

/* ---------- Emergency page ---------- */
.emergency-banner {
  background: var(--vermelho);
  color: var(--branco);
  text-align: center;
  padding: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 0.85rem;
}
.avatar-circle {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--azul-100); color: var(--azul-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700; margin: 0 auto 12px;
}
.whatsapp-btn { background: #25D366; color: #fff; }
.footer-links { text-align: center; margin-top: 20px; font-size: 0.8rem; color: var(--cinza-600); }

/* ---------- Payment popup ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(10,37,64,.55);
  display: flex; align-items: flex-end; justify-content: center; z-index: 999;
}
.sheet {
  background: var(--branco); width: 100%; max-width: 480px;
  border-radius: 20px 20px 0 0; padding: 24px; box-shadow: 0 -8px 30px rgba(0,0,0,.2);
}

/* ---------- Admin layout ---------- */
.admin-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 220px; background: var(--azul-900); color: var(--branco);
  padding: 20px 0; flex-shrink: 0;
}
.sidebar .brand { padding: 0 20px 20px; font-weight: 700; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 10px; }
.sidebar nav a {
  display: block; padding: 12px 20px; color: rgba(255,255,255,.75);
  font-size: 0.9rem; font-weight: 500; border-left: 3px solid transparent;
}
.sidebar nav a.active, .sidebar nav a:hover { background: rgba(255,255,255,.08); color: #fff; border-left-color: var(--azul-500); }
.admin-main { flex: 1; padding: 28px 32px; max-width: 1200px; }
.admin-main h1 { margin-top: 0; color: var(--azul-900); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--branco); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.stat-card .num { font-size: 1.6rem; font-weight: 700; color: var(--azul-700); }
.stat-card .label { font-size: 0.8rem; color: var(--cinza-600); }

table.data-table { width: 100%; border-collapse: collapse; background: var(--branco); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.data-table th { background: var(--azul-100); color: var(--azul-900); text-align: left; padding: 10px 12px; font-size: 0.78rem; text-transform: uppercase; }
table.data-table td { padding: 10px 12px; border-top: 1px solid var(--cinza-300); font-size: 0.87rem; }
table.data-table tr:hover td { background: var(--cinza-100); }

.filters-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; background: var(--branco); padding: 14px; border-radius: var(--radius); box-shadow: var(--shadow); }
.filters-bar input, .filters-bar select { width: auto; min-width: 150px; }

.badge { padding: 3px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; }
.badge-ativa { background: #e3f7ea; color: var(--verde-escuro); }
.badge-inativa { background: #fdecea; color: var(--vermelho); }
.badge-pausada { background: #fff4e0; color: #b9791a; }
.badge-cancelada { background: #eceff1; color: #546e7a; }

@media (max-width: 860px) {
  .admin-shell { flex-direction: column; }
  .sidebar { width: 100%; display: flex; align-items: center; overflow-x: auto; padding: 10px 0; }
  .sidebar .brand { display: none; }
  .sidebar nav { display: flex; }
  .sidebar nav a { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
  .sidebar nav a.active { border-bottom-color: var(--azul-500); }
  .admin-main { padding: 18px; }
}

.spinner {
  width: 34px; height: 34px; border: 4px solid var(--cinza-300);
  border-top-color: var(--azul-600); border-radius: 50%;
  animation: spin 0.8s linear infinite; margin: 40px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--azul-900); color: #fff; padding: 12px 20px; border-radius: 10px;
  font-size: 0.85rem; z-index: 1200; box-shadow: var(--shadow);
}

/* =========================================================
   COBRANÇA — selos, avisos, área do cliente e faixa da tag
   ========================================================= */
.selo {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.selo-ok       { background: #e6f7ed; color: var(--verde-escuro); }
.selo-trial    { background: var(--azul-100); color: var(--azul-700); }
.selo-pendente { background: #fdf0e3; color: #a45a05; }
.selo-neutro   { background: var(--cinza-300); color: var(--cinza-600); }

.aviso {
  border-radius: 12px; padding: 12px 14px; margin: 14px 0;
  font-size: .9rem; line-height: 1.55;
}
.aviso-info   { background: var(--azul-100); color: var(--azul-700); }
.aviso-ok     { background: #e6f7ed; color: var(--verde-escuro); }
.aviso-alerta { background: #fdf0e3; color: #a45a05; }

.mc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.mc-tabela { width: 100%; border-collapse: collapse; font-size: .88rem; }
.mc-tabela th {
  text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--cinza-600); padding: 8px 6px; border-bottom: 1.5px solid var(--cinza-300);
}
.mc-tabela td { padding: 10px 6px; border-bottom: 1px solid var(--cinza-300); }
.mc-tabela .num, th.num { text-align: right; }
@media (max-width: 560px) {
  .mc-tabela th:nth-child(3), .mc-tabela td:nth-child(3) { display: none; }
}

/* Faixa discreta de cobrança na página da tag — só o responsável vê.
   Nunca cobre os dados de emergência: fica no rodapé do conteúdo. */
.faixa-cobranca {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fff8ee; border: 1.5px solid #f3ddbb; color: #8a5a08;
  border-radius: 12px; padding: 12px 14px; margin: 18px 0 4px; font-size: .88rem; line-height: 1.5;
}
.faixa-cobranca b { color: #7a4e06; }
.faixa-cobranca .fc-texto { flex: 1 1 210px; }
.faixa-cobranca .btn { margin: 0; padding: 9px 16px; font-size: .85rem; white-space: nowrap; }
.faixa-cobranca .fc-fechar {
  background: none; border: none; color: #a98a53; font-size: 1.1rem;
  cursor: pointer; line-height: 1; padding: 0 2px;
}

/* ---------- Modal centralizado (painel do admin) ---------- */
.overlay-centro { align-items: center; padding: 20px; overflow-y: auto; }
.sheet-centro {
  border-radius: 16px; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.32);
}

/* =========================================================
   Tabelas do painel — versão compacta com ações em ícone
   ========================================================= */
.tabela-rolagem {
  overflow-x: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--branco);
}
.tabela-rolagem table.data-table { box-shadow: none; border-radius: 0; min-width: 720px; }

table.data-table th {
  letter-spacing: .04em; font-weight: 700; white-space: nowrap;
  border-bottom: 1px solid var(--cinza-300);
}
table.data-table td { vertical-align: middle; }
table.data-table tr:hover td { background: #f8fafc; }
table.data-table th.col-acoes, table.data-table td:last-child { text-align: right; }

.cel-principal { font-weight: 600; color: var(--azul-900); }
.cel-sub { font-size: .75rem; color: var(--cinza-600); margin-top: 3px; line-height: 1.35; }
.cel-codigo {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-weight: 700; letter-spacing: .06em; color: var(--azul-900); margin-bottom: 4px;
}
.cel-valor { font-weight: 700; color: var(--azul-900); white-space: nowrap; }

.vazio {
  background: var(--branco); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 28px; text-align: center; color: var(--cinza-600); font-size: .9rem;
}

/* ---------- Ações ---------- */
.acoes { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.icon-btn {
  width: 34px; height: 34px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cinza-300); border-radius: 10px;
  background: var(--branco); color: var(--azul-700); cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.icon-btn:hover { background: var(--azul-100); border-color: var(--azul-500); color: var(--azul-600); }
.icon-btn:active { transform: scale(.95); }
.icon-btn svg { width: 17px; height: 17px; }

/* ---------- Menu "⋯" ---------- */
.menu-acoes { position: relative; }
.menu-acoes.aberto > .icon-btn { background: var(--azul-100); border-color: var(--azul-500); color: var(--azul-600); }
.menu-lista {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 212px; padding: 6px; text-align: left;
  background: var(--branco); border: 1px solid var(--cinza-300); border-radius: 12px;
  box-shadow: 0 14px 38px rgba(10, 37, 64, .18);
}
.menu-acoes.aberto .menu-lista { display: block; }
.menu-lista button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: .85rem; color: var(--azul-900);
  text-align: left; cursor: pointer;
}
.menu-lista button:hover { background: var(--cinza-100); }
.menu-lista button.perigo { color: var(--vermelho); }
.menu-lista button.perigo:hover { background: #fdecea; }
.menu-lista svg { width: 16px; height: 16px; flex: none; }
.menu-lista hr { border: 0; border-top: 1px solid var(--cinza-300); margin: 5px 2px; }

@media (max-width: 860px) {
  .menu-lista { right: auto; left: 0; }
}

/* =========================================================
   TELA DA TAG — criança, neurodivergente e pet
   ========================================================= */
:root{
  --ts-navy:#092b4c; --ts-blue:#0b5fa5; --ts-blue2:#1677c8;
  --ts-red:#e53935; --ts-red-dark:#c62828; --ts-green:#18b968;
  --ts-amber:#f59e0b; --ts-card:#fff; --ts-text:#17324a;
  --ts-muted:#6d8090; --ts-line:#e1e9ef;
  --ts-shadow:0 10px 28px rgba(12,47,76,.10);
}
body:has(.ts-alerta), body:has(.ts-topo){
  background:
    radial-gradient(circle at 10% 0%, rgba(22,119,200,.16), transparent 28%),
    radial-gradient(circle at 95% 30%, rgba(229,57,53,.10), transparent 24%),
    linear-gradient(180deg,#eaf3f9 0%,#f4f7f9 45%,#e8f0f5 100%);
}
.ts-alerta{
  height:48px; background:linear-gradient(90deg,var(--ts-red-dark),var(--ts-red));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.78rem; letter-spacing:.2px; text-align:center; padding:0 10px;
  box-shadow:0 3px 12px rgba(198,40,40,.22);
}
.ts-topo{
  background:linear-gradient(135deg,var(--ts-navy),var(--ts-blue));
  color:#fff; padding:18px 16px;
}
.ts-topo h1{ margin:0; font-size:1rem; font-weight:800; }

.ts-wrap{ width:min(100% - 28px, 440px); margin:18px auto 34px; }

.ts-perfil{ text-align:center; margin-bottom:14px; }
.ts-avatar{
  width:72px; height:72px; border-radius:50%; margin:0 auto 10px;
  display:grid; place-items:center; color:var(--ts-blue);
  font-size:26px; font-weight:900;
  background:linear-gradient(145deg,#e4f3ff,#cfe9fb);
  border:4px solid rgba(255,255,255,.9); box-shadow:0 7px 20px rgba(9,43,76,.12);
}
.ts-perfil-card{
  background:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.9);
  border-radius:15px; padding:14px 16px; box-shadow:var(--ts-shadow);
}
.ts-nome{ font-weight:900; color:var(--ts-blue); font-size:.95rem; text-transform:uppercase; letter-spacing:.02em; }
.ts-sub{ font-size:.74rem; color:var(--ts-muted); margin-top:4px; }
.ts-tag-tipo{
  margin-top:9px; display:inline-block; font-size:.7rem; font-weight:800;
  color:#5b3bb5; background:#efe9ff; border:1px solid #ddd2ff;
  padding:4px 10px; border-radius:20px;
}
.ts-tipo-pet{ color:#0b6b45; background:#e4f8ee; border-color:#c5efdb; }

.ts-card{
  background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.8);
  border-radius:16px; padding:16px; margin-top:13px; box-shadow:var(--ts-shadow);
}
.ts-card h2, .ts-titulo{
  margin:0 0 12px; color:var(--ts-blue); font-size:.76rem; font-weight:900;
  text-transform:uppercase; letter-spacing:.5px; display:flex; align-items:center; gap:8px;
}
.ts-titulo:before{ content:""; width:4px; height:17px; border-radius:8px; background:var(--ts-blue2); }
.ts-saude{ background:linear-gradient(135deg,#fff8f8,#fff); border-left:4px solid var(--ts-red); }
.ts-saude .ts-titulo{ color:var(--ts-red-dark); }
.ts-saude .ts-titulo:before{ background:var(--ts-red); }
.ts-vazio{ font-size:.8rem; color:var(--ts-muted); margin:0; }
.ts-nota{ font-size:.68rem; color:var(--ts-muted); text-align:center; margin:10px 4px 0; }

.ts-campo{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:44px; padding:9px 11px; margin-bottom:8px;
  background:#f7fafc; border:1px solid #e5edf2; border-radius:10px;
}
.ts-campo:last-child{ margin-bottom:0; }
.ts-campo-rot{ flex:0 0 auto; color:#61798b; font-size:.7rem; font-weight:700; }
.ts-campo-val{ text-align:right; color:#193b55; font-size:.78rem; font-weight:800; line-height:1.35; }
.ts-sangue{ color:var(--ts-red-dark); background:#fff0f0; border:1px solid #ffd4d4; padding:5px 9px; border-radius:7px; }

.ts-selo{ display:inline-block; padding:4px 10px; border-radius:20px; font-size:.68rem; font-weight:800; }
.ts-selo-verde{ background:#e4f8ee; color:#0b6b45; }
.ts-selo-vermelho{ background:#fdecea; color:var(--ts-red-dark); }
.ts-selo-amarelo{ background:#fff5e0; color:#a65f00; }

.ts-passos{ margin:0; padding-left:20px; }
.ts-passos li{ font-size:.8rem; line-height:1.5; color:#31506a; margin-bottom:7px; }
.ts-passos li:last-child{ margin-bottom:0; }
.ts-neuro-topo{ background:linear-gradient(135deg,#f6f2ff,#fff); border-left:4px solid #7c5cd6; }
.ts-neuro-topo .ts-titulo{ color:#5b3bb5; }
.ts-neuro-topo .ts-titulo:before{ background:#7c5cd6; }
.ts-pet-topo{ background:linear-gradient(135deg,#eefaf4,#fff); border-left:4px solid var(--ts-green); }
.ts-pet-topo .ts-titulo{ color:#0b6b45; }
.ts-pet-topo .ts-titulo:before{ background:var(--ts-green); }
.ts-tutor{ border-left:4px solid var(--ts-green); }

.ts-bloco{ border-radius:12px; padding:11px 13px; margin-bottom:9px; border-left:4px solid #ccc; }
.ts-bloco:last-child{ margin-bottom:0; }
.ts-bloco-tit{ display:block; font-size:.7rem; font-weight:900; margin-bottom:4px; }
.ts-bloco p{ margin:0; font-size:.8rem; line-height:1.5; color:#31506a; }
.ts-bl-azul{ background:#eef6fd; border-left-color:var(--ts-blue2); }
.ts-bl-azul .ts-bloco-tit{ color:var(--ts-blue); }
.ts-bl-verde{ background:#eefaf4; border-left-color:var(--ts-green); }
.ts-bl-verde .ts-bloco-tit{ color:#0b6b45; }
.ts-bl-amarelo{ background:#fff8e8; border-left-color:var(--ts-amber); }
.ts-bl-amarelo .ts-bloco-tit{ color:#a65f00; }
.ts-bl-vermelho{ background:#fdecea; border-left-color:var(--ts-red); }
.ts-bl-vermelho .ts-bloco-tit{ color:var(--ts-red-dark); }

.ts-btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; min-height:46px; border:0; border-radius:12px;
  text-decoration:none; color:#fff; font-weight:800; font-size:.82rem;
  margin-top:11px; cursor:pointer; font-family:inherit;
  transition:transform .16s ease, filter .16s ease;
}
.ts-btn:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.ts-btn-ico{ font-size:1rem; }
.ts-whats{ background:linear-gradient(135deg,#14b95e,#20cf70); box-shadow:0 7px 16px rgba(24,185,104,.22); }
.ts-ligar{ background:linear-gradient(135deg,#0d6db5,#084b80); box-shadow:0 7px 16px rgba(13,109,181,.18); }
.ts-azul{ background:linear-gradient(135deg,#0d6db5,#084b80); }
.ts-verde{ background:linear-gradient(135deg,#14b95e,#0f9a4d); }
.ts-neutro{ background:#eef2f6; color:#31506a; }

.ts-emg-titulo{
  margin:22px 2px 10px; color:var(--ts-navy); font-size:.78rem; font-weight:900;
  text-transform:uppercase; letter-spacing:.4px;
}
.ts-emg-grade{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.ts-emg{
  min-height:88px; border-radius:14px; padding:10px 5px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; color:#fff; box-shadow:var(--ts-shadow); transition:transform .16s ease;
}
.ts-emg:hover{ transform:translateY(-2px); }
.ts-emg-ico{ font-size:22px; margin-bottom:5px; }
.ts-emg strong{ font-size:.68rem; }
.ts-emg span{ font-size:.64rem; margin-top:2px; opacity:.92; }
.ts-emg-azul{ background:linear-gradient(145deg,#174f9c,#0a3475); }
.ts-emg-laranja{ background:linear-gradient(145deg,#ed4b27,#bc2415); }
.ts-emg-vermelho{ background:linear-gradient(145deg,#e43d45,#b31e2b); }
.ts-emg-verde{ background:linear-gradient(145deg,#12a05f,#0a7343); }

/* Editar dados: em evidência, não escondido no rodapé */
.ts-editar{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:48px; margin-top:20px;
  border:2px dashed #9db8cd; border-radius:13px; background:rgba(255,255,255,.8);
  color:var(--ts-blue); font-family:inherit; font-size:.82rem; font-weight:800;
  text-decoration:none; cursor:pointer; transition:.16s;
}
.ts-editar:hover{ background:#fff; border-color:var(--ts-blue2); border-style:solid; transform:translateY(-1px); }
.ts-editar-fraco{ border-color:#c7d6e2; color:#5b7a95; }
.ts-rodape{ text-align:center; margin-top:14px; font-size:.66rem; color:#648096; line-height:1.6; }
.ts-rodape a{ color:var(--ts-blue); font-weight:800; text-decoration:none; }

.ts-dica{ font-size:.74rem; color:var(--ts-muted); margin:0 0 6px; }
.ts-check{ display:flex; align-items:flex-start; gap:10px; }
.ts-check input{ width:auto; margin:3px 0 0; flex:none; }
.ts-check label{ margin:0; font-weight:400; font-size:.78rem; line-height:1.5; color:#31506a; }

@media (max-width:350px){
  .ts-wrap{ width:min(100% - 20px, 440px); }
  .ts-emg-grade{ gap:6px; }
  .ts-emg{ min-height:80px; }
}

/* =========================================================
   Painel — balões de categoria e cartões do dashboard
   ========================================================= */
.cat-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px; margin-bottom:20px;
}
.balao{
  position:relative; overflow:hidden; text-align:left; cursor:pointer;
  border:1px solid var(--cinza-300); border-radius:18px; padding:16px 18px;
  background:var(--branco); box-shadow:var(--shadow); font-family:inherit;
  display:flex; flex-direction:column; gap:2px;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.balao:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(10,37,64,.16); }
.balao:before{ content:""; position:absolute; inset:0 auto 0 0; width:5px; }
.balao-ico{ font-size:1.5rem; line-height:1; margin-bottom:6px; }
.balao-num{ font-size:2rem; font-weight:800; line-height:1; color:var(--azul-900); }
.balao-nome{ font-size:.82rem; font-weight:700; color:var(--azul-700); margin-top:4px; }
.balao-sub{ font-size:.72rem; color:var(--cinza-600); }
.balao-crianca:before{ background:linear-gradient(180deg,#1e88e5,#0f4c81); }
.balao-crianca:hover{ border-color:#1e88e5; }
.balao-neuro:before{ background:linear-gradient(180deg,#9b6bff,#5b3bb5); }
.balao-neuro:hover{ border-color:#9b6bff; }
.balao-neuro .balao-num{ color:#5b3bb5; }
.balao-neuro .balao-nome{ color:#5b3bb5; }
.balao-pet:before{ background:linear-gradient(180deg,#21c15a,#0b6b45); }
.balao-pet:hover{ border-color:#21c15a; }
.balao-pet .balao-num{ color:#0b6b45; }
.balao-pet .balao-nome{ color:#0b6b45; }

.stat-card{ position:relative; overflow:hidden; border:1px solid var(--cinza-300); border-radius:16px; }
.stat-card:before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--cinza-300); }
.stat-ico{ position:absolute; top:14px; right:14px; font-size:1.05rem; opacity:.5; }
.stat-card .num{ font-size:1.7rem; }
.stat-verde:before{ background:var(--verde); }
.stat-verde .num{ color:var(--verde-escuro); }
.stat-vermelho:before{ background:var(--vermelho); }
.stat-vermelho .num{ color:var(--vermelho); }
.stat-amarelo:before{ background:var(--amarelo); }
.stat-amarelo .num{ color:#b9791a; }
.stat-azul:before{ background:var(--azul-500); }
.stat-cinza:before{ background:var(--cinza-300); }
.stat-cinza .num{ color:var(--cinza-600); }

/* etiqueta de categoria dentro da tabela */
.pill{
  display:inline-block; margin-left:7px; padding:2px 8px; border-radius:20px;
  font-size:.64rem; font-weight:800; vertical-align:middle; white-space:nowrap;
}
.pill-crianca{ background:var(--azul-100); color:var(--azul-700); }
.pill-neuro{ background:#efe9ff; color:#5b3bb5; }
.pill-pet{ background:#e4f8ee; color:#0b6b45; }
/* canal por onde a tag foi vendida (Shopee, Mercado Livre...) */
.pill-canal{ background:#eef2f6; color:#44586a; margin-left:0; margin-right:6px; }

/* o menu "⋯" agora é fixed: não pode ficar preso ao container rolável */
.tabela-rolagem{ overflow:visible; }
.tabela-rolagem > table.data-table{ display:block; overflow-x:auto; white-space:normal; }

/* ===== Ranking de tags mais acessadas (painel) ===== */
.card-ranking{background:var(--ts-card,#fff);border:1px solid var(--ts-line,#e5e7eb);border-radius:var(--radius,12px);box-shadow:var(--ts-shadow,0 1px 3px rgba(0,0,0,.08));padding:18px 20px;margin-top:18px}
.card-ranking h2{margin:0 0 4px;font-size:1.05rem;color:var(--ts-navy,#0f2a4a)}
.rk-dica{margin:0 0 14px;font-size:.82rem;color:var(--ts-muted,#6b7280);line-height:1.4}
.rk-vazio{margin:6px 0 0;font-size:.88rem;color:var(--ts-muted,#6b7280)}
.rk-lista{list-style:none;margin:0;padding:0;counter-reset:rk}
.rk-item{counter-increment:rk;padding:10px 0 12px;border-top:1px solid var(--ts-line,#eef0f3)}
.rk-item:first-child{border-top:0}
.rk-topo{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rk-quem{display:flex;flex-direction:column;min-width:0}
.rk-quem:before{content:counter(rk) "\00BA ";font-size:.72rem;color:var(--ts-muted,#9aa3af);letter-spacing:.04em}
.rk-quem b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.98rem;letter-spacing:.06em;color:var(--ts-navy,#0f2a4a)}
.rk-dono{font-size:.8rem;color:var(--ts-muted,#6b7280);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-n{flex:0 0 auto;text-align:right;font-weight:700;font-size:1.15rem;color:var(--ts-blue,#1d4ed8);line-height:1}
.rk-n small{display:block;font-weight:500;font-size:.68rem;color:var(--ts-muted,#9aa3af);letter-spacing:.03em}
.rk-barra{height:6px;border-radius:999px;background:var(--cinza-100,#f1f3f6);margin:8px 0 7px;overflow:hidden}
.rk-barra i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--ts-blue2,#3b82f6),var(--ts-blue,#1d4ed8))}
.rk-pe{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--ts-muted,#6b7280)}
.rk-selo{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;background:var(--cinza-100,#f1f3f6);color:var(--ts-muted,#6b7280)}
.rk-ativa,.rk-ativo,.rk-active{background:#e7f6ed;color:var(--ts-green,#0f7a44)}
.rk-inativa,.rk-inativo,.rk-inactive{background:#fdecec;color:var(--ts-red,#b42318)}
.rk-pendente,.rk-pending{background:#fff6e5;color:#92610a}
@media (max-width:520px){.card-ranking{padding:14px}.rk-n{font-size:1rem}}

/* ===== tela trancada (janela de 10 minutos) ===== */
.ts-trancada{text-align:center;padding:28px 22px}
.ts-cadeado{font-size:2.6rem;line-height:1;margin-bottom:10px}
.ts-trancada h2{margin:0 0 10px;font-size:1.15rem;color:var(--ts-navy,#0f2a4a);text-align:center;justify-content:center}
.ts-trancada p{margin:0 0 16px;font-size:.92rem;line-height:1.5;color:var(--ts-muted,#6b7280)}
.ts-trancada .ts-btn{
  display:inline-block;width:100%;max-width:320px;margin:0 auto;
  background:var(--ts-blue,#1d4ed8);color:#fff;border:0;border-radius:12px;
  padding:14px 18px;font:600 .95rem Inter,system-ui,sans-serif;cursor:pointer
}
.ts-trancada .ts-btn:hover{filter:brightness(1.07)}
.ts-mini{margin-top:16px !important;font-size:.78rem !important;opacity:.75}

/* ===== tag pausada ===== */
.ts-pausada{text-align:center;padding:28px 22px}
.ts-pausada h2{margin:0 0 10px;font-size:1.15rem;color:var(--ts-navy,#0f2a4a);text-align:center;justify-content:center}
.ts-pausada p{margin:0 0 16px;font-size:.92rem;line-height:1.5;color:var(--ts-muted,#6b7280);text-align:center}
.ts-pausada .ts-btn{display:block;width:100%;max-width:340px;margin:0 auto 10px;
  padding:15px 18px;border:0;border-radius:12px;cursor:pointer;text-decoration:none;
  font:600 .98rem Inter,system-ui,sans-serif;text-align:center}
.ts-pausada .ts-btn-pagar{background:#12a150;color:#fff}
.ts-pausada .ts-btn-suporte{background:#fff;color:var(--ts-navy,#0f2a4a);
  border:1px solid var(--ts-line,#d7dde5)}
.ts-pausada .ts-btn:hover{filter:brightness(1.06)}
.ts-pausada .ts-mini{margin-top:14px !important;font-size:.76rem !important;opacity:.75;
  letter-spacing:.04em}

/* alerta de mensalidade em aberto */
.ts-vencida{border-top:4px solid #e0533d}
.ts-vencida h2{color:#b42318 !important}

/* ════════════════════════════════════════════════════════════
   PAINEL — acabamento da lista de clientes e dos quadros

   O que quebrava: .badge nao era inline-block nem tinha
   white-space, entao "nao ativada" partia no meio da coluna
   estreita da Tag. Aqui os seloes nunca mais partem, a tabela
   ganha respiro e o cabecalho acompanha a rolagem.
   ════════════════════════════════════════════════════════════ */

.badge {
  display: inline-block; white-space: nowrap; line-height: 1.5;
  padding: 4px 11px; letter-spacing: .01em;
}
.pill { display: inline-block; white-space: nowrap; vertical-align: middle; }

/* ---- tabela ---- */
.tabela-rolagem { border: 1px solid var(--cinza-300); }
table.data-table th {
  position: sticky; top: 0; z-index: 2;
  background: #f4f7fb; color: #44546a; font-size: .7rem;
  padding: 12px 14px; border-bottom: 1px solid #e2e8f0;
}
table.data-table td { padding: 14px; border-top: 1px solid #eef2f7; }
table.data-table tbody tr:first-child td { border-top: 0; }
table.data-table tbody tr:hover td { background: #f8fbff; }

/* coluna Cliente: nome e selos na mesma linha, sem empurrar nada */
.cel-principal {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: .9rem; line-height: 1.3;
}
.cel-sub { margin-top: 5px; }
.cel-sub .selo { margin-top: 2px; }

/* coluna Tag: codigo em cima, situacao embaixo, nenhum corte */
table.data-table td .cel-codigo { font-size: .82rem; margin-bottom: 6px; white-space: nowrap; }

/* larguras: a Tag precisa caber "nao ativada" inteiro */
table.data-table th:nth-child(1) { width: 26%; }
table.data-table th:nth-child(2) { width: 11%; }
table.data-table th:nth-child(3) { width: 12%; }
table.data-table th:nth-child(4) { width: 17%; }
table.data-table th:nth-child(5) { width: 18%; }
table.data-table td:nth-child(2) { color: var(--cinza-600); }
.tabela-rolagem table.data-table { min-width: 940px; }

/* ---- filtros ---- */
.filters-bar { padding: 12px; gap: 8px; border: 1px solid var(--cinza-300); box-shadow: none; }
.filters-bar input, .filters-bar select {
  margin: 0; height: 40px; border-radius: 10px; font-size: .88rem;
}
.filters-bar input { flex: 1 1 240px; }

/* ---- acoes ---- */
.acoes { justify-content: flex-end; gap: 4px; }
.icon-btn { border-radius: 9px; }

/* ════════════════════════════════════════════════════════════
   DASHBOARD — por onde a tag foi vendida
   ════════════════════════════════════════════════════════════ */
.bloco-titulo {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 26px 0 12px;
}
.bloco-titulo h2 { margin: 0; font-size: 1.05rem; color: var(--azul-900); }
.bloco-titulo span { font-size: .8rem; color: var(--cinza-600); }

.canal-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 8px;
}
.canal-card {
  all: unset; cursor: pointer; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: stretch;
  background: var(--branco); border: 1px solid var(--cinza-300);
  border-left: 4px solid var(--azul-500);
  border-radius: 14px; padding: 14px 16px; transition: transform .12s, box-shadow .12s;
}
.canal-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,42,67,.10); }
.canal-card .cc-topo { display: flex; align-items: center; gap: 8px; }
.canal-card .cc-ico { font-size: 1.05rem; }
.canal-card .cc-nome {
  display: block; font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--cinza-600);
}
.canal-card .cc-num { display: block; font-size: 1.7rem; font-weight: 800; color: var(--azul-900); line-height: 1.1; margin-top: 6px; }
.canal-card .cc-sub { display: block; font-size: .74rem; color: var(--cinza-600); margin-top: 2px; }
.canal-card .cc-barra { display: block; width: 100%; height: 5px; border-radius: 999px; background: var(--cinza-300); margin-top: 10px; overflow: hidden; }
.canal-card .cc-barra i { display: block; height: 100%; border-radius: 999px; background: var(--azul-500); }
.canal-card.cc-vazio { border-left-color: var(--cinza-300); opacity: .72; }

/* ════════════════════════════════════════════════════════════
   PAGAR A MENSALIDADE DENTRO DA TELA DE EDICAO DA TAG
   ════════════════════════════════════════════════════════════ */
.ts-card.ts-pagamento { border-left: 4px solid #1f9d55; }
.ts-card.ts-pagamento.ts-pagamento-urgente { border-left-color: #d64545; }
.ts-pg-valor {
  font-size: 2rem; font-weight: 800; line-height: 1.1;
  margin: 10px 0 14px; color: inherit;
}
.ts-pg-valor span { font-size: .9rem; font-weight: 600; opacity: .65; margin-left: 4px; }