/* ============================================================
   rm.css — Design System Rei do Mate (redesign responsivo)
   CSS limpo e autossuficiente. Substitui estilo.css legado nas
   páginas refeitas. Direção preta + azul de ação, mobile-first.
   Reproduz o Design System do Claude Design.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

:root{
  --primaria:#006dcc; --primaria-clara:#08c; --primaria-escura:#04c; --btn-borda:#002a80;
  --preto:#0a0a0a; --preto-2:#111; --preto-3:#1a1a1a;
  --fundo:#eef0f3; --superficie:#f2f2f2; --superficie-borda:#e2e2e2; --branco:#fff;
  --menu-bg:#eee9f0; --borda:#ddd;
  --texto:#555; --texto-forte:#333; --texto-suave:#888; --invert:#fff;
  --erro:#c00000; --sucesso:#1a7f37; --ativo:#d00000; --alerta:#b26a00;
  --fonte:'Open Sans',Helvetica,Arial,sans-serif;
  --fonte-input:'Trebuchet MS',Helvetica,Arial,sans-serif;
  --e1:4px; --e2:8px; --e3:16px; --e4:24px; --e5:32px; --e6:48px;
  --raio:6px; --raio-btn:4px; --raio-card:8px;
  --sombra:0 1px 3px rgba(0,0,0,.12); --sombra-2:0 6px 22px rgba(0,0,0,.08);
  --max:1000px; --toque:44px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ font-family:var(--fonte); color:var(--texto); background:var(--fundo); -webkit-font-smoothing:antialiased; line-height:1.5; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--primaria); text-decoration:none; }
a:hover{ color:var(--primaria-escura); }
::selection{ background:var(--primaria-clara); color:#fff; }
h1,h2,h3,h4{ margin:0; color:var(--texto-forte); }

.rm-container{ width:100%; max-width:var(--max); margin:0 auto; padding-left:var(--e3); padding-right:var(--e3); }
/* No painel admin o conteúdo usa a largura da tela (tabelas densas) */
.rm-admin .rm-container{ max-width:min(1600px, 94vw); }
.rm-admin .rm-header__bar,.rm-admin .rm-footer__bar{ max-width:min(1600px, 94vw); }
.rm-page{ min-height:100vh; display:flex; flex-direction:column; }
.rm-main{ flex:1; padding:var(--e4) 0 var(--e6); }

/* ---------------- HEADER + NAV (público) ---------------- */
.rm-header{ background:var(--preto); }
.rm-header__bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; }
.rm-logo{ height:42px; width:auto; filter:brightness(0) invert(1); } /* logo preta legada → branca */
.rm-logo.rm-logo--original{ filter:none; }
.rm-nav{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; justify-content:flex-end; }
.rm-nav a{ padding:12px 15px; font-size:14px; font-weight:700; color:#eee; border-bottom:3px solid transparent; }
.rm-nav a:hover{ color:#fff; }
.rm-nav a.ativo{ color:#4db3ff; border-bottom-color:var(--primaria-clara); }
.rm-nav a.ativo--local{ color:#ff6b6b; }
.rm-burger{ display:none; width:var(--toque); height:var(--toque); border:none; background:transparent; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.rm-burger span{ width:24px; height:3px; background:#fff; border-radius:2px; transition:.2s; display:block; }
.rm-burger.aberto span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.rm-burger.aberto span:nth-child(2){ opacity:0; }
.rm-burger.aberto span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ---------------- HERO ---------------- */
.rm-hero{ background:linear-gradient(135deg,#000,#232323); color:#fff; }
.rm-hero__in{ padding:52px var(--e3) 56px; }
.rm-hero__eyebrow{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; opacity:.85; }
/* o `color` é explícito porque a regra global de h1–h4 vence a herança do hero */
.rm-hero__title{ font-size:44px; font-weight:800; line-height:1.03; letter-spacing:-.02em; margin:14px 0 12px; color:#fff; }
.rm-hero__sub{ font-size:17px; opacity:.92; line-height:1.55; max-width:520px; }
.rm-hero__tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.rm-tile{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); border-radius:12px; padding:16px 10px; text-align:center; }
.rm-tile b{ font-size:30px; font-weight:800; line-height:1; display:block; }
.rm-tile span{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; opacity:.85; margin-top:8px; display:block; }

/* ---------------- BOTÕES ---------------- */
.rm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(var(--primaria-clara),var(--primaria-escura)); color:#fff; border:none; border-bottom:2px solid var(--btn-borda); border-radius:var(--raio-btn); font-family:var(--fonte); font-weight:600; font-size:15px; padding:11px 22px; min-height:var(--toque); cursor:pointer; text-decoration:none; line-height:1.2; }
.rm-btn:hover{ background:linear-gradient(#0af,#06d); color:#fff; }
.rm-btn--sec{ background:#fff; color:var(--primaria); border:1px solid var(--primaria); }
.rm-btn--sec:hover{ background:#f2f7fc; color:var(--primaria); }
.rm-btn--ghost{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.5); }
.rm-btn--block{ width:100%; height:48px; font-size:16px; font-weight:700; }

/* ---------------- CARDS ---------------- */
.rm-card{ background:var(--branco); border:1px solid var(--superficie-borda); border-radius:var(--raio-card); padding:var(--e4); }
.rm-card--surface{ background:var(--superficie); }
.rm-card--shadow{ box-shadow:var(--sombra); }
.rm-card__title{ font-weight:800; color:var(--texto-forte); font-size:18px; margin-bottom:var(--e2); }
.rm-h2{ font-size:26px; font-weight:800; letter-spacing:-.01em; }
.rm-eyebrow{ display:inline-block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--primaria); font-weight:700; margin-bottom:10px; }

/* ---------------- FORMULÁRIOS ---------------- */
.rm-field{ display:block; margin-bottom:var(--e3); }
.rm-field > span,.rm-label{ display:block; font-size:13px; color:var(--texto-forte); font-weight:600; margin-bottom:6px; }
.rm-input,.rm-select,.rm-textarea{ width:100%; font-family:var(--fonte-input); font-size:16px; color:var(--texto-forte); padding:12px 12px; border:1px solid var(--borda); border-radius:var(--raio); background:#fefefe; min-height:46px; }
.rm-input:focus,.rm-select:focus,.rm-textarea:focus{ outline:none; border:2px solid var(--primaria); box-shadow:0 0 0 3px rgba(0,109,204,.12); }
.rm-input--erro{ border-color:var(--erro); }
.rm-input--ok{ border-color:var(--sucesso); }
.rm-input[readonly],.rm-select[disabled],.rm-textarea[readonly]{ background:#f1f2f4; color:#6b7280; cursor:default; }
.rm-check input[disabled]+*,.rm-check:has(input[disabled]){ color:var(--texto-suave); }
.rm-hint{ display:block; font-size:12.5px; color:var(--texto-suave); margin-top:6px; }
.rm-hint--erro{ color:var(--erro); }
.rm-hint--ok{ color:var(--sucesso); }
.rm-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.rm-check{ display:flex; align-items:center; gap:10px; min-height:var(--toque); font-size:15px; color:var(--texto-forte); }
.rm-check input{ width:20px; height:20px; }

/* ---------------- BADGE / BANNERS ---------------- */
.rm-badge{ display:inline-block; background:var(--preto); color:#fff; font-weight:800; font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:7px 14px; border-radius:999px; }
.rm-banner{ border:1px solid var(--borda); border-radius:10px; padding:14px 16px; display:flex; gap:12px; align-items:flex-start; }
.rm-banner--ok{ background:#eaf5ed; border-color:#bfe3c9; color:var(--sucesso); }
.rm-banner--erro{ background:#fbeaea; border-color:#f0c9c9; color:var(--erro); }
.rm-banner__ico{ width:26px; height:26px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex:0 0 26px; }

/* ---------------- TABELAS ---------------- */
.rm-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--superficie-borda); border-radius:var(--raio-card); background:#fff; box-shadow:var(--sombra); }
.rm-table{ border-collapse:collapse; width:100%; min-width:600px; font-size:14px; }
.rm-table th{ background:var(--superficie); text-align:left; padding:12px 16px; color:var(--texto-forte); font-weight:700; border-bottom:1px solid var(--borda); white-space:nowrap; }
.rm-table td{ padding:12px 16px; border-bottom:1px solid #eee; color:var(--texto); }
.rm-pill{ font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.rm-pill--ok{ color:var(--sucesso); background:#e6f4ea; }
.rm-pill--pend{ color:var(--alerta); background:#fdf1dd; }
.rm-pill--erro{ color:var(--erro); background:#fbe7e7; }

/* ---------------- EDITOR DE CONTEÚDO (admin) ---------------- */
.rm-ed{ border:1px solid var(--borda); border-radius:var(--raio); background:#fff; overflow:hidden; }
.rm-ed__barra{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:7px 8px; background:var(--superficie); border-bottom:1px solid var(--borda); }
.rm-ed__btn{ padding:6px 10px; min-height:32px; background:#fff; border:1px solid var(--borda); border-radius:5px; font-family:var(--fonte); font-size:12.5px; color:var(--texto-forte); cursor:pointer; line-height:1; }
.rm-ed__btn:hover{ background:#f2f7fc; border-color:var(--primaria); color:var(--primaria); }
.rm-ed__btn.ativo{ background:var(--primaria); border-color:var(--primaria-escura); color:#fff; }
.rm-ed__sep{ width:1px; height:20px; background:var(--borda); margin:0 4px; }
.rm-ed__link{ display:flex; gap:6px; align-items:center; padding:8px; background:#eef4fb; border-bottom:1px solid var(--borda); }
.rm-ed__link input{ flex:1; min-width:0; padding:7px 10px; border:1px solid var(--borda); border-radius:5px; font-family:var(--fonte-input); font-size:13px; }
.rm-ed__area{ padding:14px 16px; min-height:220px; max-height:520px; overflow:auto; font-size:15px; line-height:1.65; color:var(--texto); }
.rm-ed__area:focus{ outline:none; }
.rm-ed__area h4{ font-size:15px; font-weight:800; color:var(--texto-forte); margin:16px 0 6px; }
.rm-ed__area p{ margin:0 0 12px; }
.rm-ed__area ul{ margin:0 0 12px; padding-left:22px; }
.rm-ed__area li{ margin-bottom:4px; }
.rm-ed__area a{ color:var(--primaria); text-decoration:underline; }
.rm-ed__codigo{ display:none; width:100%; min-height:320px; padding:14px 16px; border:none; border-top:1px solid var(--borda); font-family:Consolas,'Courier New',monospace; font-size:12.5px; line-height:1.6; color:#334; resize:vertical; }
.rm-ed--html .rm-ed__area{ display:none; }
.rm-ed--html .rm-ed__codigo{ display:block; }

/* ---------------- LISTAGEM EM PAINEL (consulta de inscrições) ---------------- */
.rm-listhead{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--e4); flex-wrap:wrap; margin-bottom:var(--e4); }
.rm-chips{ display:flex; gap:10px; flex-wrap:wrap; }
.rm-chip{ display:flex; align-items:center; gap:8px; padding:8px 14px; background:#fff; border:1px solid var(--superficie-borda); border-radius:8px; font-size:12.5px; color:var(--texto-suave); white-space:nowrap; }
.rm-chip b{ font-size:16px; font-weight:700; color:var(--texto-forte); font-variant-numeric:tabular-nums; }
.rm-chip--ok{ background:#e6f4ea; border-color:#bfe3c9; color:var(--sucesso); }
.rm-chip--ok b{ color:var(--sucesso); }
.rm-chip--franquia{ background:#eaf2fb; border-color:#b8d6f0; color:var(--primaria); }
.rm-chip--franquia b{ color:var(--primaria); }
.rm-chip i{ width:7px; height:7px; border-radius:50%; background:var(--sucesso); display:block; }
a.rm-chip{ text-decoration:none; transition:box-shadow .12s ease, border-color .12s ease; }   /* chip que leva à lista por trás do número */
a.rm-chip:hover{ box-shadow:var(--sombra); border-color:#9dc2e6; }
.rm-chip--franquia i{ background:var(--primaria); }   /* depois de .rm-chip i: mesma especificidade, ganha o último */

.rm-panel{ background:#fff; border:1px solid var(--superficie-borda); border-radius:var(--raio-card); box-shadow:var(--sombra); overflow:hidden; }
.rm-panel__bar{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid #eceef1; flex-wrap:wrap; }
.rm-panel .rm-table-wrap{ border:none; border-radius:0; box-shadow:none; }
.rm-search{ position:relative; flex:1 1 320px; display:flex; align-items:center; gap:10px; margin:0; }
.rm-search__ico{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#9aa1ac; font-size:15px; pointer-events:none; }
.rm-search input{ flex:1 1 auto; min-width:0; padding:10px 12px 10px 32px; border:1px solid var(--borda); border-radius:7px; font-family:var(--fonte-input); font-size:14px; background:#fbfbfc; min-height:44px; color:var(--texto-forte); }
.rm-search input:focus{ outline:none; border-color:var(--primaria); box-shadow:0 0 0 3px rgba(0,109,204,.12); background:#fff; }

/* alternador segmentado (Todos / RJ / SP…) */
.rm-seg{ display:inline-flex; gap:3px; padding:3px; background:var(--superficie); border-radius:8px; }
.rm-seg__btn{ padding:7px 13px; border-radius:6px; font-size:12.5px; font-weight:600; color:var(--texto); white-space:nowrap; }
.rm-seg__btn:hover{ color:var(--primaria); }
.rm-seg__btn.ativo{ background:#fff; color:var(--texto-forte); box-shadow:0 1px 2px rgba(20,24,31,.10); }

.rm-table--list thead th{ font-size:11px !important; letter-spacing:.08em; text-transform:uppercase; color:#7b8290 !important; font-weight:700 !important; }
.rm-table--list tbody td{ vertical-align:top; font-size:13.5px; }
.rm-table--list td.rm-card-action{ text-align:right; }
.rm-cel{ display:flex; flex-direction:column; gap:3px; }
.rm-cel__nome{ font-weight:600; color:var(--texto-forte); line-height:1.35; }
/* quando o nome leva para a edição — só o hover marca, para não virar sopa de azul */
a.rm-cel__nome{ display:inline-block; text-decoration:none; }
a.rm-cel__nome:hover{ color:var(--primaria); text-decoration:underline; }
.rm-cel__uf{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-suave); }
.rm-incompleto{ font-size:12.5px; color:var(--alerta); font-style:italic; }
.rm-pessoa{ display:flex; align-items:center; gap:10px; }
.rm-avatar{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:#e8f1fb; color:var(--primaria); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.rm-vinc{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.rm-vinc span{ font-size:12.5px; color:var(--texto); line-height:1.45; }
.rm-more{ margin-top:2px; padding:3px 10px; background:var(--superficie); border:1px solid var(--superficie-borda); border-radius:20px; font-family:var(--fonte); font-size:11.5px; color:var(--texto); cursor:pointer; }
.rm-more:hover{ background:#eaf2fb; border-color:#cfe0f2; color:var(--primaria); }
.rm-tag{ display:inline-block; min-width:32px; text-align:center; padding:3px 8px; border:1px solid var(--borda); border-radius:5px; font-size:12px; font-weight:700; color:var(--texto-forte); }
.rm-vazio{ color:#c2c7cf; }
.rm-status{ display:inline-flex; align-items:center; gap:7px; padding:4px 11px 4px 9px; border-radius:20px; font-size:12px; font-weight:600; white-space:nowrap; }
.rm-status i{ width:6px; height:6px; border-radius:50%; box-sizing:border-box; display:block; }
.rm-status--ok{ background:#e6f4ea; color:var(--sucesso); }
.rm-status--ok i{ background:var(--sucesso); }
.rm-status--pend{ background:#f5f6f7; color:var(--texto-suave); }
.rm-status--pend i{ border:1.5px solid #b8bec7; }
/* baixa dada pela franquia — não é inscrição, por isso não é verde */
.rm-status--franquia{ background:#eaf2fb; color:var(--primaria); }
.rm-status--franquia i{ background:var(--primaria); }
/* botão que abre o WhatsApp com o convite pronto.
   Verde cheio = convite já enviado; apagado = ainda não saiu. A cor é o
   controle: quem varre a lista vê de longe quem falta chamar. */
.rm-zap{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:#25d366; color:#fff; flex:none; border:1px solid transparent; }
.rm-zap:hover{ background:#1da851; color:#fff; }
.rm-zap svg{ width:17px; height:17px; display:block; }
.rm-zap--novo{ background:transparent; border-color:#c8cdd3; color:#aab1b9; }
.rm-zap--novo:hover{ background:#eafaf0; border-color:#25d366; color:#25d366; }
.rm-data{ font-size:12.5px; color:var(--texto); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rm-data--alerta{ color:var(--alerta); }
@media (max-width:768px){
  .rm-listhead{ align-items:flex-start; }
  .rm-panel{ background:transparent; border:none; box-shadow:none; overflow:visible; }
  .rm-panel__bar{ background:#fff; border:1px solid var(--superficie-borda); border-radius:var(--raio-card); margin-bottom:var(--e3); }
  .rm-search{ flex:1 1 100%; }
  .rm-table--list tbody td{ vertical-align:middle; }
}

/* ---------------- DASHBOARD (cards de estatística) ---------------- */
.rm-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-bottom:14px; }
.rm-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; margin-bottom:14px; align-items:start; }
.rm-stat{ background:#fff; border:1px solid var(--superficie-borda); border-radius:12px; padding:20px; box-shadow:var(--sombra); display:flex; flex-direction:column; gap:14px; }
.rm-stat--alerta{ border-color:#f0d9b8; }
.rm-stat__lbl{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-suave); }
.rm-stat--alerta .rm-stat__lbl{ color:var(--alerta); }
.rm-stat__num{ font-size:44px; font-weight:800; line-height:1; letter-spacing:-.03em; color:var(--texto-forte); font-variant-numeric:tabular-nums; }
.rm-stat__num--ok{ color:var(--sucesso); }
.rm-stat__num--alerta{ color:var(--alerta); }
.rm-stat__linha{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.rm-stat__sub{ font-size:13px; color:var(--texto-suave); }
.rm-stat__foot{ display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--texto); }
.rm-stat__foot b{ color:var(--texto-forte); font-weight:700; font-variant-numeric:tabular-nums; }
.rm-stat__link{ font-size:12.5px; font-weight:600; }

/* --------- ritmo: uma coluna por dia de calendário ---------
   Colunas, e não linha: cada dia é uma contagem fechada, e linha entre eles
   sugere uma interpolação que não existe. Dia sem inscrição fica sem barra —
   é o vazio que conta a história do ritmo. */
.rm-ritmo{ margin-top:var(--e2); }
.rm-ritmo__plot{ position:relative; display:flex; align-items:flex-end; gap:2px; height:150px; padding-top:18px; }
.rm-ritmo__col{ flex:1 1 0; min-width:0; height:100%; display:flex; align-items:flex-end; cursor:default; }
.rm-ritmo__col i{ position:relative; display:block; width:100%; min-height:2px; background:#7fb2df; border-radius:3px 3px 0 0; transition:background .12s ease; }
.rm-ritmo__col:hover i{ background:var(--primaria-escura); }
.rm-ritmo__col--zero i{ min-height:0; background:none; }
.rm-ritmo__col--zero{ position:relative; }
.rm-ritmo__col--zero::after{ content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:#e6e8eb; border-radius:1px; }
.rm-ritmo__col--pico i{ background:var(--primaria); }
.rm-ritmo__col i b{ position:absolute; top:-17px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:700;
  color:var(--texto-forte); font-variant-numeric:tabular-nums; }
/* z-index: a régua é desenhada antes das colunas no HTML e ficaria por baixo
   delas — o rótulo sumia atrás de qualquer barra alta o bastante */
.rm-ritmo__media{ position:absolute; left:0; right:0; height:1px; background:#d4d7dc; pointer-events:none; z-index:2; }
.rm-ritmo__media span{ position:absolute; right:0; top:-15px; font-size:10.5px; color:var(--texto-suave); background:#fff; padding:0 4px; border-radius:3px; }
.rm-ritmo__eixo{ display:flex; gap:2px; margin-top:6px; }
.rm-ritmo__eixo span{ flex:1 1 0; min-width:0; font-size:10.5px; color:var(--texto-suave); white-space:nowrap; }
/* a marca fica sob a coluna que ela nomeia; a última se alinha à direita para não vazar do cartão */
.rm-ritmo__eixo span:last-child{ text-align:right; }

.rm-prog{ height:6px; background:#eef0f2; border-radius:3px; overflow:hidden; display:flex; }
.rm-prog__in{ height:100%; border-radius:3px; background:var(--primaria); }
.rm-prog__in--ok{ background:var(--sucesso); }
.rm-prog__in--dark{ background:var(--preto-3); }
.rm-prog__in--alerta{ background:#e8b34a; border-radius:0; }

.rm-bars{ display:flex; flex-direction:column; gap:13px; }
.rm-bar__top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:5px; }
.rm-bar__lbl{ font-size:13px; color:var(--texto-forte); }
.rm-bar__val{ font-size:13px; font-weight:700; color:var(--texto-forte); font-variant-numeric:tabular-nums; }
.rm-bar__trk{ height:5px; background:var(--superficie); border-radius:3px; overflow:hidden; }
.rm-bar__in{ height:100%; border-radius:3px; }

.rm-linha3{ display:grid; grid-template-columns:1fr 44px 44px; align-items:center; padding:6px 0; border-bottom:1px solid #f4f5f6; }
.rm-linha3 b{ font-size:12.5px; font-weight:700; color:var(--texto-forte); }
.rm-linha3 span{ font-size:13px; text-align:right; color:var(--texto); font-variant-numeric:tabular-nums; }
.rm-linha3--suave b{ color:var(--texto-suave); font-weight:600; }

.rm-bloco{ background:#fff; border:1px solid var(--superficie-borda); border-radius:12px; box-shadow:var(--sombra); margin-bottom:14px; overflow:hidden; }
.rm-bloco__cab{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px 14px; flex-wrap:wrap; }
.rm-bloco__tit{ font-size:15px; font-weight:800; color:var(--texto-forte); }
.rm-bloco__sub{ font-size:12.5px; color:var(--texto-suave); margin-top:3px; }
.rm-bloco__rod{ padding:12px 20px; border-top:1px solid #eceef1; background:#fafbfc; font-size:12px; color:var(--texto-suave); }
.rm-legenda{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--texto); }
.rm-legenda span{ display:inline-flex; align-items:center; gap:6px; }
.rm-legenda i{ width:9px; height:9px; border-radius:2px; display:block; }

.rm-ufgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:0 32px; padding:0 20px 8px; }
.rm-uf{ display:grid; grid-template-columns:34px 1fr 106px; align-items:center; gap:12px; padding:9px 0; border-top:1px solid #f4f5f6; }
.rm-uf__sigla{ font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--texto-forte); }
.rm-uf__num{ display:flex; justify-content:flex-end; align-items:baseline; gap:3px; font-size:12.5px; font-variant-numeric:tabular-nums; }
.rm-uf__num b{ font-weight:700; color:var(--texto-forte); }
.rm-uf__num s{ color:#b8bec7; text-decoration:none; }
.rm-uf__num u{ color:var(--texto-suave); text-decoration:none; }
.rm-uf__pend{ margin-left:5px; padding:1px 6px; background:#fdf1dd; border-radius:4px; font-size:11.5px; font-weight:700; color:var(--alerta); }

/* card de franqueado (lista agrupada) */
.rm-franq{ padding:14px 0; border-top:1px solid #f4f5f6; }
.rm-franq__cab{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.rm-franq__lojas{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.rm-loja{ display:inline-block; padding:4px 10px; background:#f7f8f9; border:1px solid #e6e8eb; border-radius:20px; font-family:var(--fonte); font-size:12px; line-height:1.5; color:var(--texto-suave); }
.rm-loja--ok{ background:#e6f4ea; border-color:#bfe3c9; color:var(--sucesso); font-weight:600; }
/* chip clicável: sem representante ainda — clicar dá a baixa pela franquia */
button.rm-loja{ cursor:pointer; }
.rm-loja--vazia:hover{ background:#eef5fc; border-color:#b8d6f0; color:var(--primaria); }
/* baixa dada pela franquia (não é inscrição de verdade) */
.rm-loja--franquia{ background:#eaf2fb; border-color:#b8d6f0; color:var(--primaria); font-weight:600; }
.rm-loja--franquia:hover{ background:#fdf1dd; border-color:#e8cfa0; color:var(--alerta); }
.rm-loja--acao{ background:transparent; border-style:dashed; font-size:11.5px; color:var(--alerta); }
.rm-loja--acao:hover{ background:#fdf1dd; border-style:solid; border-color:#e8cfa0; }

/* Tela de espera para ação que demora no servidor (importar planilha, reconciliar).
   Sem ela o navegador só fica branco e parece que travou. Só CSS — nada de
   biblioteca, que num ambiente sem internet deixaria a espera pior ainda. */
.rm-espera{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; background:rgba(20,22,25,.72); }
.rm-espera.aberta{ display:flex; }
.rm-espera__caixa{ background:#fff; border-radius:14px; padding:28px 34px; text-align:center; max-width:340px; box-shadow:0 18px 50px rgba(0,0,0,.3); }
.rm-espera__roda{ width:38px; height:38px; margin:0 auto 16px; border:3px solid #e6e8eb; border-top-color:var(--primaria); border-radius:50%; animation:rm-gira .8s linear infinite; }
.rm-espera__tit{ font-size:15px; font-weight:700; color:var(--texto-forte); }
.rm-espera__sub{ font-size:12.5px; color:var(--texto-suave); margin-top:6px; line-height:1.5; }
/* botão que já foi acionado: bloqueia só o clique.
   Nunca use `disabled` aqui — botão desabilitado não envia o próprio
   name/value no POST, e há botões que carregam a ação nesses atributos. */
.rm-btn--enviando{ pointer-events:none; opacity:.6; }
@keyframes rm-gira{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .rm-espera__roda{ animation-duration:2.4s; } }

/* linha da lista de eventos: dados à esquerda, ações à direita numa fila só.
   Classe própria (e não estilo inline) para poder empilhar no celular — o
   .rm-uf não tem media query e a grid fixa estouraria a tela. */
.rm-evento{ display:grid; grid-template-columns:1fr 120px 150px 336px; align-items:center; gap:12px; padding:11px 0; border-top:1px solid #f4f5f6; }
.rm-evento__acoes{ display:flex; gap:6px; justify-content:flex-end; flex-wrap:nowrap; align-items:center; }
@media (max-width:920px){
  .rm-evento{ grid-template-columns:1fr; gap:8px; padding:14px 0; }
  .rm-evento__acoes{ justify-content:flex-start; flex-wrap:wrap; }
}

.rm-pendlinha{ display:grid; grid-template-columns:80px 1fr; gap:16px; padding:14px 20px; border-top:1px solid #f1f2f4; align-items:start; }
.rm-pendlinha__uf{ display:flex; align-items:center; gap:8px; }
.rm-pendlinha__uf b{ font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--texto-forte); }
.rm-pendlinha__uf span{ font-size:11.5px; color:var(--texto-suave); }
.rm-chipslojas{ display:flex; flex-wrap:wrap; gap:7px; }
.rm-chipslojas span{ padding:5px 11px; background:#f7f8f9; border:1px solid #e6e8eb; border-radius:20px; font-size:12.5px; color:var(--texto); }
.rm-contagem{ padding:2px 9px; background:#fdf1dd; border-radius:20px; font-size:12px; font-weight:700; color:var(--alerta); }
@media (max-width:768px){
  .rm-stat__num{ font-size:36px; }
  .rm-ufgrid{ padding:0 16px 8px; }
  .rm-pendlinha{ grid-template-columns:1fr; gap:8px; padding:14px 16px; }
}

/* ---------------- KPIs ---------------- */
.rm-kpis{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:var(--e3); }
.rm-kpi{ background:#fff; border:1px solid var(--superficie-borda); border-radius:var(--raio-card); box-shadow:var(--sombra); padding:20px; border-top:3px solid var(--primaria); }
.rm-kpi--erro{ border-top-color:var(--erro); }
.rm-kpi--ok{ border-top-color:var(--sucesso); }
.rm-kpi__num{ font-size:34px; font-weight:800; color:var(--texto-forte); line-height:1; }
.rm-kpi__lbl{ font-size:12.5px; color:var(--texto-suave); margin-top:8px; line-height:1.35; }

/* ---------------- CHECK-IN ---------------- */
.rm-scan{ aspect-ratio:1/1; background:#111; border-radius:12px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#888; }
.rm-scan video,.rm-scan canvas,.rm-scan img{ width:100%; height:100%; object-fit:cover; }
.rm-scan__frame{ position:absolute; inset:26px; border:3px solid rgba(255,255,255,.85); border-radius:12px; pointer-events:none; }

/* ---------------- RODAPÉ ---------------- */
.rm-footer{ background:var(--preto-2); color:#bbb; padding:28px 0; }
.rm-footer a[href^="tel:"],.rm-footer a[href^="https://wa.me"]{ color:#4db3ff; font-weight:700; }
.rm-footer__bar{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }

/* ---------------- ADMIN NAV (multinível) ---------------- */
.rm-adminbar{ background:var(--preto-3); border-top:1px solid #2a2a2a; }
.rm-adminbar__in{ display:flex; align-items:stretch; }
.rm-adminbar .rm-mitem{ position:relative; }
.rm-adminbar .rm-mlink,.rm-adminbar .rm-mbtn{ display:flex; align-items:center; gap:7px; height:100%; background:transparent; border:none; cursor:pointer; padding:15px 16px; font-family:var(--fonte); font-size:14px; font-weight:600; color:#eee; }
.rm-adminbar .rm-mlink.ativo{ color:#4db3ff; border-bottom:3px solid var(--primaria-clara); }
.rm-adminbar .rm-drop{ display:none; position:absolute; top:100%; left:0; min-width:250px; background:#fff; border:1px solid var(--borda); border-radius:0 0 8px 8px; box-shadow:0 12px 30px rgba(0,0,0,.2); padding:6px 0; z-index:30; }
.rm-adminbar .rm-mitem.aberto .rm-drop,.rm-adminbar .rm-mitem:hover .rm-drop{ display:block; }
.rm-adminbar .rm-drop a{ display:block; padding:10px 18px; font-size:14px; color:#444; border-left:3px solid transparent; }
.rm-adminbar .rm-drop a:hover{ background:#f2f6fb; color:var(--primaria); border-left-color:var(--primaria); }
/* rótulo de seção dentro do dropdown (não clicável) */
.rm-adminbar .rm-drop__grupo{ padding:12px 18px 5px; font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#9aa1ac; border-top:1px solid #f0f0f0; margin-top:5px; }
.rm-adminbar .rm-drop > a:first-child + .rm-drop__grupo{ margin-top:0; }
/* módulo a que a página atual pertence */
.rm-adminbar .rm-mitem.ativo .rm-mbtn{ color:#4db3ff; box-shadow:inset 0 -3px 0 var(--primaria-clara); }
/* Acordeão admin (mobile) */
.rm-acc{ background:var(--preto-3); }
.rm-acc-toggle{ width:100%; text-align:left; background:transparent; border:none; cursor:pointer; padding:15px 18px; min-height:var(--toque); font-family:var(--fonte); font-size:16px; font-weight:600; color:#eee; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #2a2a2a; }
.rm-acc-toggle .rm-seta{ color:var(--primaria-clara); transition:.2s; }
.rm-acc-toggle.aberto .rm-seta{ transform:rotate(90deg); }
.rm-acc-panel{ display:none; background:#111; }
.rm-acc-panel.aberto{ display:block; }
.rm-acc-panel a{ display:block; padding:11px 30px; min-height:var(--toque); font-size:14.5px; color:#b9c2cc; border-left:3px solid var(--primaria-clara); }
.rm-acc-grupo{ padding:14px 18px 6px; font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#6c7580; }

/* ---------------- LOGIN ---------------- */
.rm-login-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--e4); align-items:start; }

/* ---------------- DATATABLES (tema integrado ao design; !important p/ vencer o CSS do CDN) ---------------- */
.dataTables_wrapper{ font-family:var(--fonte) !important; color:var(--texto) !important; }
.dataTables_wrapper .top{ padding:0 0 var(--e3); display:flex; align-items:center; justify-content:space-between; gap:var(--e3); flex-wrap:wrap; }
.dataTables_wrapper .dataTables_filter{ text-align:right; margin-left:auto; }
.dataTables_wrapper .dataTables_filter label{ font-size:13px; color:var(--texto-forte); font-weight:600; display:inline-flex; align-items:center; gap:8px; }
.dataTables_wrapper .dataTables_filter input{ border:1px solid var(--borda) !important; border-radius:var(--raio) !important; padding:10px 12px !important; font-size:15px !important; min-height:42px; min-width:220px; background:#fefefe !important; margin:0 !important; }
.dataTables_wrapper .dataTables_filter input:focus{ outline:none; border:2px solid var(--primaria) !important; box-shadow:0 0 0 3px rgba(0,109,204,.12) !important; }
.dataTables_wrapper .dataTables_info{ font-size:13px !important; color:var(--texto-suave) !important; padding-top:var(--e3) !important; }
/* rodapé (info + paginação) do dom 'rt<"bottom"ip>': respiro igual ao da barra de busca */
.dataTables_wrapper .bottom{ display:flex; align-items:center; justify-content:space-between; gap:var(--e3); flex-wrap:wrap; padding:16px 18px 18px; }
.dataTables_wrapper .bottom .dataTables_info{ padding:0 !important; margin:0 !important; float:none !important; }
.dataTables_wrapper .bottom .dataTables_paginate{ padding:0 !important; margin:0 !important; float:none !important; }
.dataTables_wrapper .dataTables_length{ font-size:13px; color:var(--texto); }
.dataTables_wrapper .dataTables_length select{ border:1px solid var(--borda); border-radius:var(--raio); padding:6px 8px; margin:0 6px; }
.dataTables_wrapper .dataTables_paginate{ padding-top:var(--e3) !important; }
/* o `a.` eleva a especificidade acima do `color:inherit !important` do CSS do CDN */
.dataTables_wrapper .dataTables_paginate a.paginate_button{ display:inline-block; min-width:38px; box-sizing:border-box; text-align:center; padding:8px 12px !important; margin:0 3px !important; border-radius:var(--raio) !important; border:1px solid var(--borda) !important; background:#fff !important; color:var(--texto-forte) !important; font-size:13px; line-height:1.2; cursor:pointer; }
.dataTables_wrapper .dataTables_paginate a.paginate_button:hover{ background:#f2f7fc !important; border-color:var(--primaria) !important; color:var(--primaria) !important; }
.dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover{ background:linear-gradient(var(--primaria-clara),var(--primaria-escura)) !important; color:#fff !important; border-color:var(--primaria-escura) !important; font-weight:700; }
.dataTables_wrapper .dataTables_paginate .ellipsis{ padding:0 4px; color:var(--texto-suave); }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{ opacity:.4 !important; cursor:default; }
table.dataTable{ border-collapse:collapse !important; width:100% !important; margin:0 !important; border:none !important; }
.rm-table-wrap table.dataTable{ min-width:0 !important; } /* deixa o Responsive controlar a largura */
table.dataTable thead th{ background:var(--superficie) !important; color:var(--texto-forte) !important; font-weight:700 !important; border-bottom:2px solid var(--borda) !important; border-top:none !important; padding:14px 16px !important; }
table.dataTable tbody td{ border-bottom:1px solid #eee !important; border-top:none !important; padding:14px 16px !important; color:var(--texto); vertical-align:middle; }
table.dataTable tbody tr{ background:#fff !important; }
table.dataTable tbody tr:hover{ background:#f2f7fc !important; }
/* Esconde as setas de ordenação do DataTables (cabeçalho limpo, como o design) */
table.dataTable thead th.sorting,table.dataTable thead th.sorting_asc,table.dataTable thead th.sorting_desc{ background-image:none !important; }
table.dataTable thead .sorting:before,table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc:after{ display:none !important; }
/* Responsive: botão (+) de expandir e detalhe */
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before{ background:var(--primaria) !important; border:none !important; box-shadow:none !important; color:#fff; }
table.dataTable>tbody>tr.child ul.dtr-details{ width:100%; }
table.dataTable>tbody>tr.child ul.dtr-details>li{ border-bottom:1px solid #eee; padding:8px 0; }
table.dataTable>tbody>tr.child span.dtr-title{ color:var(--texto-forte); font-weight:600; min-width:120px; }
/* Botão pequeno de ação em tabela (ex.: "Etiqueta") */
.rm-btn--mini{ padding:7px 14px !important; min-height:0 !important; height:auto !important; font-size:13px !important; }
.btn-print{ color:var(--primaria); font-size:18px; }

/* ================= BREAKPOINTS ================= */
@media (max-width:768px){
  .rm-burger{ display:flex; }
  .rm-nav{ display:none; position:absolute; left:0; right:0; z-index:40; flex-direction:column; align-items:stretch; background:var(--preto-3); }
  .rm-header{ position:relative; }
  .rm-nav.aberto{ display:flex; }
  .rm-nav a{ padding:15px 18px; min-height:var(--toque); font-size:16px; border-bottom:1px solid #2a2a2a; }
  .rm-nav a.ativo{ border-bottom-color:#2a2a2a; }
  .rm-hero__in{ padding:28px var(--e3) 30px; text-align:center; }
  .rm-hero__title{ font-size:26px; }
  .rm-hero__sub{ margin-left:auto; margin-right:auto; }
  .rm-hero__tiles{ grid-template-columns:repeat(2,1fr); }
  .rm-tile b{ font-size:22px; }
  .rm-grid2{ grid-template-columns:1fr; }
  .rm-login-grid{ grid-template-columns:1fr; }
  .rm-btn{ width:100%; }
  .rm-adminbar__in{ display:none; }   /* menu horizontal some no mobile (usa acordeão) */
}
@media (min-width:769px){
  .rm-burger{ display:none; }
  .rm-acc{ display:none; }             /* acordeão só no mobile */
}

/* ---------------- TABELA → CARDS no mobile (.rm-cards-mobile) ---------------- */
@media (max-width:768px){
  .rm-table-wrap:has(table.rm-cards-mobile){ border:none; box-shadow:none; background:transparent; overflow:visible; }
  .rm-table-wrap table.rm-cards-mobile,
  .rm-table-wrap table.rm-cards-mobile tbody{ display:block; width:100%; min-width:0 !important; }
  .rm-table-wrap table.rm-cards-mobile thead{ display:none; }
  .rm-table-wrap table.rm-cards-mobile tbody tr{
    display:block; background:#fff !important; border:1px solid var(--superficie-borda) !important;
    border-radius:var(--raio-card); box-shadow:var(--sombra); padding:14px 16px; margin-bottom:14px;
  }
  .rm-table-wrap table.rm-cards-mobile tbody td{
    display:flex !important; justify-content:space-between; align-items:center; gap:12px;
    padding:9px 0 !important; border:none !important; border-top:1px solid #f0f0f0 !important;
    text-align:right; font-size:14px; white-space:normal;
  }
  .rm-table-wrap table.rm-cards-mobile tbody td:before{
    content:attr(data-label); font-weight:600; color:var(--texto-suave); font-size:13px;
    text-align:left; flex:0 0 auto;
  }
  .rm-table-wrap table.rm-cards-mobile tbody td:empty{ display:none !important; }
  /* Título do card (ex.: Loja) */
  .rm-table-wrap table.rm-cards-mobile tbody td.rm-card-title{
    display:block !important; border-top:none !important; padding:0 0 6px !important;
    font-weight:800; color:var(--texto-forte); font-size:17px; text-align:left;
  }
  .rm-table-wrap table.rm-cards-mobile tbody td.rm-card-title:before{ display:none; }
  /* Ação (botão) largura total no rodapé do card */
  .rm-table-wrap table.rm-cards-mobile tbody td.rm-card-action{
    display:block !important; padding:12px 0 0 !important; border-top:1px solid #f0f0f0 !important;
  }
  .rm-table-wrap table.rm-cards-mobile tbody td.rm-card-action:before{ display:none; }
  .rm-table-wrap table.rm-cards-mobile tbody td.rm-card-action .rm-btn{ width:100% !important; }
}