/* ════════════════════════════════════════════════════════════
   NUCLEO — Design System v2
   "Ferramenta de sábado": rápida como caderno de chamada,
   quente como o projeto que é.
   Camadas: fonts → tokens → base → componentes → páginas → mobile
   ════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=Bricolage+Grotesque:wght@600;700&display=swap');

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Cor — azul suave (steel blue) */
  --navy:      #24344D;   /* header/superfícies escuras (era #0D1B2E) */
  --blue:      #5C8BC5;   /* primário (era #2563EB) */
  --blue-h:    #43709F;   /* texto/link azul: 5.18:1 sobre branco */
  --blue-btn:  #4372A8;   /* fundo de botão: branco em cima = 4.99:1 */
  --blue-btn-h:#3A6493;   /* hover do botão */
  --blue-lt:   #7FA6D4;
  --blue-pale: #EDF3FA;
  --blue-100:  #DCE8F5;
  --blue-200:  #C3D7EC;
  --blue-on-dark: #A9C7E8; /* links ativos sobre navy */
  --accent-sky:   #79B8DF; /* ação "Impacto" sobre navy */

  /* Acentos quentes — momentos humanos */
  --warm:      #E8927C;   /* atenção com carinho (3+ faltas) */
  --warm-bg:   #FDF0EC;
  --gold:      #E9B44C;   /* aniversário */
  --gold-bg:   #FBF3E1;

  /* Neutros */
  --slate:     #52667A;
  --muted:     #5F7285;   /* texto secundário: 4.96:1 sobre branco (era #8CA0B3, 2.69) */
  --muted-lt:  #8CA0B3;   /* uso decorativo (ícones, setas), não para texto */
  --border:    #D5DFE9;
  --border-lt: #E7EDF4;
  --bg:        #F7F9FC;
  --surface:   #FFFFFF;
  --text:      #1C2B3A;
  --text-md:   #44586C;

  /* Semânticos (dessaturados) + pares bg/ink/line */
  --green:      #2E9E6B;
  --green-bg:   #E3F4EC;
  --green-ink:  #1F6B4A;
  --green-line: #A9DDC4;
  --amber:      #E19A3C;
  --amber-bg:   #FBF2DF;
  --amber-ink:  #8A5A1B;
  --amber-line: #F0D9A8;
  --red:        #D95757;
  --red-bg:     #FBE9E9;
  --red-ink:    #A33B3B;
  --red-line:   #F2C7C7;

  /* Tipografia */
  --font-ui: 'Sora', sans-serif;
  --font-display: 'Bricolage Grotesque', 'Sora', sans-serif;
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 15px;
  --fs-xl: 18px; --fs-2xl: 22px; --fs-display: 34px;

  /* Espaço / raio / sombra / camadas */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 999px;
  --sh-1: 0 1px 4px rgba(28,43,58,0.05);
  --sh-2: 0 4px 14px rgba(28,43,58,0.08);
  --sh-3: 0 16px 48px rgba(28,43,58,0.18);
  --z-nav: 50; --z-pill: 100; --z-drawer: 210; --z-modal: 200; --z-toast: 300;

  /* Anéis de foco/realce derivados do azul */
  --ring: rgba(92,139,197,0.18);
}

/* ── BASE ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  line-height: 1.6;
  min-height: 100vh;
}

:focus-visible {
  outline: 2px solid var(--blue-h);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── HEADER ── */
.n-header {
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  position: sticky; top: 0; z-index: var(--z-nav);
  box-shadow: 0 1px 0 rgba(0,0,0,0.18);
}
.n-header-inner {
  max-width: 1500px; margin: 0 auto;
  padding: 0 28px;
  height: 54px;
  display: flex; align-items: center; gap: 0;
}
.n-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  margin-right: 32px;
  flex-shrink: 0;
}
.n-brand-icon {
  width: 32px; height: 32px;
  background: var(--blue);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #fff;
  flex-shrink: 0;
}
.n-brand-text {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  color: #fff; letter-spacing: -0.02em;
}
.n-brand-sub {
  font-size: 10px; color: rgba(255,255,255,0.4);
  font-weight: 400;
}
/* Nav: links de página (sem borda, só texto) */
.n-nav {
  display: flex; align-items: center;
  gap: 2px; flex: 1;
}
.n-nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 6px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,0.6);
  text-decoration: none; cursor: pointer;
  border: none; background: transparent;
  transition: color .15s, background .15s; white-space: nowrap;
}
.n-nav-link:hover { color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.07); }
.n-nav-link.active { color: #fff; background: rgba(255,255,255,0.12); }
.n-nav-link i { font-size: 11px; opacity: 0.7; }
/* Divisor vertical */
.n-nav-sep {
  width: 1px; height: 20px;
  background: rgba(255,255,255,0.1);
  margin: 0 8px; flex-shrink: 0;
}
/* Ações à direita */
.n-nav-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.n-action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 6px;
  font-family: var(--font-ui); font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.55);
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent; background: transparent;
  transition: all .15s; white-space: nowrap;
}
.n-action-btn:hover { color: rgba(255,255,255,0.88); background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.1); }
.n-action-btn.impacto { color: var(--accent-sky); }
.n-action-btn.impacto:hover { background: rgba(121,184,223,0.12); border-color: rgba(121,184,223,0.25); }

/* Split button (Impacto c/ dropdown) */
.n-split { position: relative; display: inline-flex; align-items: center; }
.n-split .n-split-main { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 8px; }
.n-split .n-split-caret {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  padding: 5px 7px; margin-left: -1px;
  border-left: 1px solid rgba(121,184,223,0.18);
}
.n-split-menu {
  display: none;
  position: absolute; top: calc(100% + 4px); right: 0;
  min-width: 180px;
  background: #1B2A40;
  border: 1px solid rgba(121,184,223,0.28);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  z-index: 1000;
}
.n-split-menu.open { display: block; }
.n-split-menu button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 8px 12px; border: none; background: transparent;
  color: rgba(255,255,255,0.78);
  font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  border-radius: 6px; cursor: pointer;
}
.n-split-menu button:hover { background: rgba(121,184,223,0.14); color: var(--accent-sky); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 7px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  text-decoration: none; cursor: pointer; border: none;
  transition: all 0.15s; white-space: nowrap;
}
.btn-primary   { background: var(--blue-btn);  color: #fff; }
.btn-primary:hover { background: var(--blue-btn-h); }
.btn-ghost     { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.82); border: 1px solid rgba(255,255,255,0.12); }
.btn-ghost:hover { background: rgba(255,255,255,0.13); color: #fff; }
.btn-outline   { background: #fff; color: var(--text-md); border: 1px solid var(--border); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue-h); }
.btn-danger    { background: var(--red-bg); color: var(--red-ink); border: 1px solid var(--red-line); }
.btn-danger:hover { background: #F6DADA; }
.btn-green     { background: var(--green); color: #fff; }
.btn-green:hover { background: #268257; }
.btn-sm { padding: 5px 10px; font-size: 11px; border-radius: 6px; }
.btn-lg { padding: 10px 20px; font-size: 13px; }

/* ── MAIN ── */
.n-main { max-width: 1500px; margin: 0 auto; padding: 24px 28px; }

/* ── PAGE HEADER ── */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 24px;
}
.page-title {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 700;
  color: var(--text); letter-spacing: -0.02em;
}
.page-title span { color: var(--blue-h); }
.page-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ── CARDS ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: 10px;
  box-shadow: var(--sh-1);
}
.card-p { padding: 20px; }

/* ── FORM ELEMENTS (base global) ── */
.field { display: flex; flex-direction: column; gap: 5px; }
.field label {
  font-size: 11px; font-weight: 600; color: var(--slate);
  text-transform: uppercase; letter-spacing: 0.06em;
  display: flex; align-items: center; gap: 5px;
}
.field label i { font-size: 10px; color: var(--muted); }

input[type="text"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="search"],
input[type="password"],
select, textarea {
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--ring);
}
textarea { resize: vertical; }

/* ── TABLE ── */
.table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--border-lt);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
table { width: 100%; border-collapse: collapse; min-width: 640px; }

thead { background: var(--navy); }
thead th {
  padding: 10px 14px;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
  text-align: center; white-space: nowrap;
}
thead th:first-child { text-align: left; color: rgba(255,255,255,0.88); padding-left: 20px; }
thead th.col-date { color: var(--blue-on-dark); }

tbody tr {
  border-bottom: 1px solid var(--border-lt);
  transition: background 0.1s;
  animation: rowIn 0.3s ease both;
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--blue-pale); }

@keyframes rowIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

td {
  padding: 10px 14px;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  font-size: 13px;
}
td:first-child { text-align: left; padding-left: 20px; }

.name-link {
  font-weight: 600; font-size: 13px;
  color: var(--text); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.name-link:hover { color: var(--blue-h); }

/* presence dot */
.dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  text-decoration: none; font-size: 10px; font-weight: 700;
  transition: transform 0.12s;
}
.dot:hover { transform: scale(1.2); }
.dot-on  { background: var(--blue);  color: #fff; }
.dot-off { background: var(--border-lt); color: transparent; }
.dot-off:hover { background: var(--blue-100); }

/* progress */
.prog { display: flex; align-items: center; gap: 6px; justify-content: center; }
.prog-bar { width: 52px; height: 4px; background: var(--border-lt); border-radius: var(--r-full); overflow: hidden; }
.prog-fill { height: 100%; border-radius: var(--r-full); }
.prog-fill.low  { background: var(--red); }
.prog-fill.mid  { background: var(--amber); }
.prog-fill.high { background: var(--green); }
.prog-pct { font-size: 11px; font-weight: 600; color: var(--muted); min-width: 30px; }

/* basket */
.bsk { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 5px; text-decoration: none; font-size: 10px; transition: transform 0.12s; }
.bsk:hover { transform: scale(1.12); }
.bsk-on  { background: var(--amber-bg); color: var(--amber-ink); }
.bsk-off { background: var(--border-lt); color: var(--muted); }
.deliver { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 5px; font-size: 11px; font-weight: 600; text-decoration: none; background: var(--green); color: #fff; transition: background 0.15s; }
.deliver:hover { background: #268257; }
.na-lbl { font-size: 11px; color: var(--muted); }

/* annotate */
.ann-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 5px; font-size: 11px; font-weight: 500;
  background: var(--surface); color: var(--slate);
  border: 1px solid var(--border); cursor: pointer;
  transition: all 0.12s; font-family: var(--font-ui);
}
.ann-btn:hover { background: var(--blue-btn); color: #fff; border-color: var(--blue-btn); }

/* ── BADGE ── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--r-full); font-size: 10px; font-weight: 600;
}
.badge-green { background: var(--green-bg); color: var(--green-ink); }

/* Badges quentes (novos) */
.badge-bday { background: var(--gold-bg); color: #8A6414; border: 1px solid #EFD9A3; }
.badge-warm { background: var(--warm-bg); color: #B05B42; border: 1px solid #F3CFC2; }

/* ── MODAL (sistema canônico) ── */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(28,43,58,0.55);
  display: none; align-items: center; justify-content: center;
  z-index: var(--z-modal); backdrop-filter: blur(4px);
}
.modal-bg.open { display: flex; }
.modal {
  background: var(--surface); border-radius: var(--r-md);
  padding: 24px 26px; width: 380px; max-width: 92vw;
  box-shadow: var(--sh-3);
  animation: mIn 0.2s ease;
}
@keyframes mIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--navy); color: #fff;
  padding: 10px 18px; border-radius: var(--r-sm); font-size: 12px; font-weight: 500;
  box-shadow: var(--sh-2);
  opacity: 0; transform: translateY(10px);
  transition: all 0.25s; pointer-events: none; z-index: var(--z-toast);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.ok   { border-left: 3px solid var(--green); }
.toast.err  { border-left: 3px solid var(--red); }

/* ── CHART CONTAINER ── */
.chart-box {
  background: var(--surface); border: 1px solid var(--border-lt);
  border-radius: 10px; padding: 20px;
  margin-bottom: 24px;
}
.chart-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 16px; letter-spacing: -0.01em;
}

/* Stagger */
tbody tr:nth-child(1)  { animation-delay: .02s; }
tbody tr:nth-child(2)  { animation-delay: .04s; }
tbody tr:nth-child(3)  { animation-delay: .06s; }
tbody tr:nth-child(4)  { animation-delay: .08s; }
tbody tr:nth-child(5)  { animation-delay: .10s; }
tbody tr:nth-child(6)  { animation-delay: .12s; }
tbody tr:nth-child(7)  { animation-delay: .14s; }
tbody tr:nth-child(8)  { animation-delay: .16s; }
tbody tr:nth-child(9)  { animation-delay: .18s; }
tbody tr:nth-child(10) { animation-delay: .20s; }

/* ── PAGE TRANSITIONS ── */
@keyframes pageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pageOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
body { animation: pageIn 0.22s ease both; }
body.exiting { animation: pageOut 0.18s ease forwards; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* dot click pulse */
@keyframes dotPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.dot.toggling { animation: dotPulse 0.25s ease; }

/* ── CURRENT-WEEK COLUMN ── */
th.col-current {
  background: var(--blue-pale);
  color: var(--blue-h);
  border-bottom: 2px solid var(--blue);
  position: relative;
}
.col-current-badge {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: var(--blue-h);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
  opacity: 0.9;
}
td.col-current {
  background: rgba(92,139,197,0.05);
}
td.col-current .dot-off {
  border: 1.5px solid var(--blue-200);
}

/* pill flutuante */
.cw-pill {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-pill);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px 9px 12px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: 0 6px 24px rgba(36,52,77,0.3);
  transition: transform 0.15s, box-shadow 0.15s;
  animation: pillIn 0.35s cubic-bezier(.22,1,.36,1) both;
  animation-delay: 0.4s;
}
@keyframes pillIn {
  from { opacity: 0; transform: translateY(16px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.cw-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(36,52,77,0.38);
}
.cw-pill:active { transform: translateY(0); }
.cw-pill-icon { font-size: 14px; }
.cw-pill-label { color: rgba(255,255,255,0.8); }
.cw-pill-label strong { color: #fff; }
.cw-pill-arrow {
  font-size: 14px;
  color: var(--blue-lt);
  transition: transform 0.15s;
}
.cw-pill:hover .cw-pill-arrow { transform: translateX(3px); }

/* ── OTHER-WEEK WARNING POPOVER ── */
.owp-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(28,43,58,0.15);
  backdrop-filter: blur(1px);
  animation: fadeIn 0.12s ease both;
}
@keyframes owpIn {
  from { opacity: 0; transform: scale(0.88) translateY(-6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.owp {
  position: fixed; z-index: 201;
  width: 272px;
  background: var(--surface);
  border: 1.5px solid var(--blue-200);
  border-radius: 13px;
  box-shadow: 0 12px 40px rgba(36,52,77,0.2), 0 0 0 1px rgba(92,139,197,0.06);
  padding: 15px 16px 13px;
  animation: owpIn 0.2s cubic-bezier(.22,1,.36,1) both;
}
.owp-head {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 11px;
}
.owp-icon {
  width: 30px; height: 30px; flex-shrink: 0;
  background: var(--amber-bg);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.owp-title {
  font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.45;
  padding-top: 1px;
}
.owp-badge {
  display: inline-block;
  background: var(--blue-100); color: var(--blue-h);
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  margin-top: 4px; letter-spacing: 0.02em;
}
.owp-check {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 11px 0 13px; cursor: pointer;
  padding: 8px 10px;
  background: var(--blue-pale);
  border-radius: 8px;
  border: 1px solid var(--blue-100);
  transition: border-color 0.15s;
}
.owp-check:hover { border-color: var(--blue-200); }
.owp-check input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px;
  border: 1.5px solid var(--border); border-radius: 4px;
  background: var(--surface); cursor: pointer;
  transition: all 0.15s; position: relative;
}
.owp-check input[type=checkbox]:checked {
  background: var(--blue); border-color: var(--blue);
}
.owp-check input[type=checkbox]:checked::after {
  content: '✓';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: #fff; font-weight: 700;
}
.owp-check-lbl {
  font-size: 11.5px; color: var(--text-md); line-height: 1.45;
}
.owp-check-sub {
  display: block; font-size: 10px; color: var(--muted); margin-top: 1px;
}
.owp-actions {
  display: flex; gap: 7px; justify-content: flex-end;
}
.owp-cancel {
  padding: 5px 13px; font-size: 12px;
  border: 1.5px solid var(--border); border-radius: 7px;
  background: none; cursor: pointer; color: var(--slate);
  font-family: var(--font-ui); font-weight: 500;
  transition: border-color 0.15s, color 0.15s;
}
.owp-cancel:hover { border-color: var(--slate); color: var(--text); }
.owp-confirm {
  padding: 5px 15px; font-size: 12px;
  background: var(--blue-btn); color: #fff; border: none;
  border-radius: 7px; cursor: pointer;
  font-family: var(--font-ui); font-weight: 600;
  transition: background 0.15s;
}
.owp-confirm:hover { background: var(--blue-btn-h); }

/* ── QUICK-MARK pill button (na célula do nome) ── */
.name-cell {
  display: flex; align-items: center; gap: 7px;
}
.qm-btn-mark {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px 3px 7px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--slate);
  font-family: var(--font-ui);
  font-size: 10px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: all 0.15s cubic-bezier(.22,1,.36,1);
  outline: none;
}
.qm-btn-mark .fa { font-size: 8.5px; opacity: 0.5; transition: opacity 0.15s; }
.qm-btn-mark:hover:not(.qm-btn-marked) {
  border-color: var(--blue); background: var(--blue-pale); color: var(--blue-h);
  transform: scale(1.04);
}
.qm-btn-mark:hover:not(.qm-btn-marked) .fa { opacity: 1; }
.qm-btn-mark:active:not(.qm-btn-marked) { transform: scale(0.97); }
.qm-btn-mark.qm-btn-marked {
  border-color: var(--green-line); background: var(--green-bg); color: var(--green-ink);
}
/* Marcado agora tambem desmarca: precisa parecer clicavel */
.qm-btn-mark.qm-btn-marked:hover { background: #D6EEE1; border-color: var(--green); }
.qm-btn-mark.qm-btn-marked .fa { opacity: 1; }
@keyframes markPop {
  0%   { transform: scale(0.88); }
  55%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.qm-btn-mark.qm-pop { animation: markPop 0.3s cubic-bezier(.22,1,.36,1); }

/* Badges de % (painel de cesta) */
.cc-badge {
  font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 20px;
  white-space: nowrap;
}
.pct-high { background: var(--green-bg); color: var(--green-ink); }
.pct-mid  { background: var(--amber-bg); color: var(--amber-ink); }
.pct-low  { background: var(--red-bg); color: var(--red-ink); }
.cc-badge-box { background: var(--blue-100); color: var(--blue-h); }

/* ── FOOTER ── */
.n-footer {
  text-align: center; padding: 16px;
  font-size: 11px; color: var(--muted);
  border-top: 1px solid var(--border-lt);
  margin-top: 40px;
}

/* ══════════════════════════════════════════════════
   HOME TOOLBAR — unified date nav + search
   ══════════════════════════════════════════════════ */
.home-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--surface);
  border: 1.5px solid var(--border-lt);
  border-radius: var(--r-md);
  padding: 8px 12px;
  margin-bottom: 14px;
  box-shadow: var(--sh-1);
}
.home-date-nav {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.hdn-arrow {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1.5px solid var(--border-lt);
  background: var(--bg); color: var(--slate);
  text-decoration: none; font-size: 11px;
  transition: all 0.15s;
}
.hdn-arrow:hover { border-color: var(--blue); color: var(--blue-h); background: var(--blue-pale); }
.hdn-form { display: flex; gap: 4px; align-items: center; }
.hdn-sel {
  width: auto !important;
  border: 1.5px solid var(--border-lt); border-radius: 8px;
  padding: 5px 26px 5px 10px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  color: var(--text); background: var(--bg); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M0 0l4.5 5 4.5-5z' fill='%238CA0B3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  transition: border-color 0.15s; min-width: 0;
}
.hdn-sel:focus { border-color: var(--blue); outline: none; }
.hdn-sel:hover { border-color: var(--blue-200); }

.home-toolbar-divider {
  width: 1px; background: var(--border-lt); align-self: stretch; flex-shrink: 0;
  margin: 0 4px;
}

.hdn-count {
  font-size: 11px; color: var(--muted); white-space: nowrap; flex-shrink: 0;
}
.hdn-count span { font-weight: 700; color: var(--text); }

/* ══════════════════════════════════════════════════
   COLLAPSIBLE PANELS (hp = home panel)
   ══════════════════════════════════════════════════ */
.panels-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 10px;
}
@media (max-width: 860px) { .panels-row { grid-template-columns: 1fr; } }

.hp-wrap {
  background: var(--surface);
  border: 1.5px solid var(--border-lt);
  border-radius: 11px; overflow: hidden;
  box-shadow: var(--sh-1);
}
.hp-wrap-full { grid-column: 1 / -1; }
.hp-wrap-anot { border-color: var(--amber-line); }
.hp-wrap-resolved { border-color: var(--green-line); }

.hp-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--bg);
  border: none; cursor: pointer; font-family: var(--font-ui);
  text-align: left; transition: background 0.12s;
}
.hp-toggle:hover { background: var(--blue-pale); }
.hp-wrap-anot .hp-toggle:hover { background: #FDF8EC; }
.hp-wrap-resolved .hp-toggle:hover { background: var(--green-bg); }

.hp-toggle-left { display: flex; align-items: center; gap: 7px; }
.hp-icon { font-size: 11px; }
.hp-title { font-size: 12px; font-weight: 700; color: var(--text-md); }
.hp-badge {
  background: var(--blue-100); color: var(--blue-h);
  font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 20px; border: 1px solid var(--blue-200);
}
.hp-badge-amber { background: var(--amber-bg); color: var(--amber-ink); border-color: var(--amber-line); }
.hp-badge-green { background: var(--green-bg); color: var(--green-ink); border-color: var(--green-line); }
.hp-chevron {
  font-size: 9px; color: var(--muted);
  transition: transform 0.2s cubic-bezier(.22,1,.36,1);
}

.hp-body { border-top: 1px solid var(--border-lt); }

/* ── Unified panel item (pi) ── */
.pi-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-lt);
  transition: background 0.1s;
}
.pi-item:last-child { border-bottom: none; }
.pi-item:hover { background: var(--bg); }
@keyframes anotDismiss {
  0%   { opacity: 1; transform: translateX(0); max-height: 80px; }
  100% { opacity: 0; transform: translateX(12px); max-height: 0; padding: 0; }
}
.pi-item.dismissing {
  animation: anotDismiss 0.28s ease forwards;
  overflow: hidden;
}

.pi-avatar {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  margin-top: 1px;
}
.pi-body { flex: 1; min-width: 0; }
.pi-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  margin-bottom: 3px;
}
.pi-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; flex: 1; min-width: 0; }
.pi-name {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  text-decoration: none; white-space: nowrap;
}
.pi-name:hover { color: var(--blue-h); }
.pi-date { font-size: 10px; color: var(--muted); white-space: nowrap; }
.pi-badges { display: flex; gap: 4px; flex-shrink: 0; }

.pi-actions { display: flex; gap: 3px; flex-shrink: 0; }
.pi-btn {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 10px;
  border: 1.5px solid var(--border-lt);
  background: var(--surface); color: var(--slate);
  cursor: pointer; text-decoration: none; transition: all 0.12s;
  font-family: var(--font-ui);
}
.pi-btn:hover { background: var(--blue-pale); color: var(--blue-h); border-color: var(--blue-200); }
.pi-btn-ok:hover { background: var(--green-bg); color: var(--green-ink); border-color: var(--green-line); }
.pi-btn-del:hover { background: var(--red-bg); color: var(--red-ink); border-color: var(--red-line); }

.pi-content { margin-bottom: 4px; }
.pi-addr { font-size: 11px; color: var(--slate); }
.pi-addr-empty { color: var(--muted); font-style: italic; }
.pi-anot-txt {
  font-size: 11.5px; color: var(--text-md); line-height: 1.5;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.pi-footer { margin-top: 2px; }
.pi-deliver-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 10.5px; font-weight: 600;
  font-family: var(--font-ui);
  background: var(--green-bg); color: var(--green-ink);
  border: 1.5px solid var(--green-line);
  cursor: pointer; transition: all 0.15s;
}
.pi-deliver-btn:hover { background: var(--green); color: #fff; border-color: var(--green); }
.pi-deliver-btn:active { transform: scale(0.97); }
.pi-deliver-btn.delivering { opacity: 0.5; pointer-events: none; }

/* ══════════════════════════════════════════════════
   TABLE SEARCH BAR (above table)
   ══════════════════════════════════════════════════ */
.table-search-bar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.tsb-wrap {
  position: relative; flex: 1;
}
.tsb-wrap input {
  width: 100% !important;
  padding-left: 34px !important; padding-right: 32px !important;
  background: var(--surface);
  border: 1.5px solid var(--border-lt);
  border-radius: 9px;
  font-size: 13px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tsb-wrap input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--ring);
}
.tsb-ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 12px; pointer-events: none;
}
.tsb-clear {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--border-lt); border: none; color: var(--slate);
  cursor: pointer; font-size: 9px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s;
}
.tsb-clear:hover { background: var(--border); color: var(--text); }
.tsb-count {
  font-size: 11px; color: var(--muted); white-space: nowrap; flex-shrink: 0; min-width: 60px;
}


/* ════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE  (max-width: 768px)
   Desktop zero changes — all rules below are mobile-only
   ════════════════════════════════════════════════════════════ */

/* Hide desktop-only elements on mobile */
@media (max-width: 768px) {
  .n-nav { display: none !important; }
  .n-brand-sub { display: none; }
  .n-header-inner { padding: 0 16px; height: 52px; }
  .n-brand { margin-right: 0; }
  .n-brand-icon { width: 28px; height: 28px; font-size: 12px; }
  .n-brand-text { font-size: 13px; }

  /* Hamburger button */
  .n-mob-ham {
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px; background: none; border: none; cursor: pointer;
    padding: 8px; margin-left: auto; border-radius: 8px;
    transition: background .15s;
  }
  .n-mob-ham:active { background: rgba(255,255,255,.1); }
  .n-mob-ham span {
    display: block; width: 20px; height: 2px;
    background: rgba(255,255,255,.8); border-radius: 2px;
    transition: transform .2s, opacity .2s;
  }
}

/* Hide hamburger on desktop */
@media (min-width: 769px) {
  .n-mob-ham { display: none; }
  .mob-overlay, .mob-drawer, .mob-bottom-nav, .mob-nav-handle { display: none !important; }
}

/* ── Mobile Overlay ── */
@media (max-width: 768px) {
  .mob-overlay {
    display: none; position: fixed; inset: 0; z-index: 200;
    background: rgba(10, 18, 30, 0.65); backdrop-filter: blur(2px);
  }
  .mob-overlay.open { display: block; }

  /* ── Mobile Drawer ── */
  .mob-drawer {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: var(--z-drawer);
    width: 280px;
    background: var(--navy);
    border-right: 1px solid rgba(255,255,255,.08);
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow: 4px 0 32px rgba(0,0,0,.35);
  }
  .mob-drawer.open { transform: translateX(0); }

  .mob-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 18px 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .mob-drawer-brand { display: flex; align-items: center; gap: 10px; }
  .mob-drawer-icon {
    width: 34px; height: 34px; background: var(--blue); border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: #fff; flex-shrink: 0;
  }
  .mob-drawer-title {
    font-family: var(--font-display);
    font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -.02em;
  }
  .mob-drawer-sub { font-size: 10px; color: rgba(255,255,255,.4); }
  .mob-drawer-close {
    width: 32px; height: 32px; border: none; border-radius: 8px;
    background: rgba(255,255,255,.07); color: rgba(255,255,255,.5);
    cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center;
    transition: background .15s;
  }
  .mob-drawer-close:active { background: rgba(255,255,255,.15); }

  .mob-drawer-nav {
    flex: 1; display: flex; flex-direction: column; gap: 2px;
    padding: 14px 10px; overflow-y: auto;
  }
  .mob-drawer-link {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px; border-radius: 10px;
    text-decoration: none; color: rgba(255,255,255,.6);
    font-size: 13px; font-weight: 500;
    transition: background .15s, color .15s;
  }
  .mob-drawer-link i { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
  .mob-drawer-link:active { background: rgba(255,255,255,.1); }
  .mob-drawer-link.active { background: rgba(92,139,197,.25); color: var(--blue-on-dark); }
  .mob-drawer-link:not(.active):hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); }

  .mob-drawer-actions {
    padding: 12px 10px 20px;
    border-top: 1px solid rgba(255,255,255,.07);
    display: flex; flex-direction: column; gap: 8px;
  }
  .mob-drawer-action {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 12px 14px; border-radius: 10px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.65); font-size: 13px; font-weight: 500;
    font-family: var(--font-ui); cursor: pointer;
    transition: background .15s;
  }
  .mob-drawer-action:active { background: rgba(255,255,255,.1); }
  .mob-drawer-action-accent {
    background: rgba(121,184,223,.12);
    border-color: rgba(121,184,223,.28);
    color: var(--accent-sky);
  }

  /* ── Mobile Bottom Nav ── */
  .mob-bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-pill);
    background: var(--navy);
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex; align-items: stretch;
    height: 60px;
    box-shadow: 0 -4px 20px rgba(0,0,0,.25);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mob-bn-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    text-decoration: none; color: rgba(255,255,255,.45);
    font-size: 9.5px; font-weight: 600; letter-spacing: .03em;
    font-family: var(--font-ui); transition: color .15s;
  }
  .mob-bn-item i { font-size: 17px; }
  .mob-bn-item.active { color: var(--blue-on-dark); }
  .mob-bn-item:active { color: rgba(255,255,255,.7); }
  .mob-bn-fab {
    width: 56px; display: flex; align-items: center; justify-content: center;
    background: var(--blue-btn); border: none; border-radius: 16px 16px 0 0;
    color: #fff; font-size: 20px; cursor: pointer;
    flex-shrink: 0; margin: 0 12px;
    box-shadow: 0 -4px 16px rgba(92,139,197,.45);
    transition: background .15s;
  }
  .mob-bn-fab:active { background: var(--blue-h); }

  /* ── Main content adjustments ── */
  .n-main { padding: 16px 14px 80px; }

  /* Date toolbar: collapse */
  .home-toolbar {
    flex-wrap: wrap; gap: 8px; padding: 10px 12px;
  }
  .home-date-nav { flex: 1; min-width: 0; }
  .hdn-sel { font-size: 12px; padding: 4px 6px; }
  .home-toolbar-divider { display: none; }
  .hdn-count { font-size: 11px; }

  /* Page title */
  .page-title { font-size: 18px; }
  .page-sub { font-size: 11px; }

  /* Panels: full width */
  .panels-row { grid-template-columns: 1fr !important; }
  .hp-wrap-full { grid-column: 1 !important; }

  /* ── Table: hide scroll wrapper, go card layout ── */
  /* Override desktop table scroll setup */
  .table-wrap {
    overflow-x: visible !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .pres-table { display: block !important; font-size: 14px; min-width: 0 !important; }
  .pres-table thead { display: none !important; }
  .pres-table tbody { display: flex !important; flex-direction: column; gap: 10px; padding: 4px 0; }

  .pres-table tr {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border-lt);
    border-radius: 14px;
    padding: 14px 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    border-left: 3px solid var(--blue);
  }

  /* hide Saturday dot columns */
  .pres-table .sat-cell { display: none !important; }

  /* name col: full top row */
  .pres-table .mob-name-col {
    flex: 0 0 100%;
    display: flex !important;
    align-items: center;
    padding: 0 !important;
  }
  .pres-table .mob-name-col .name-cell {
    display: flex; flex-wrap: wrap; align-items: center; width: 100%; gap: 6px 8px;
  }
  /* name + faltando on same row, marcar full-width below */
  .pres-table .mob-name-col .name-link { order: 1; flex: 1; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pres-table .mob-name-col .info-warn { order: 1; flex-shrink: 0; font-size: 11px; padding: 4px 8px; }
  .pres-table .mob-name-col .qm-btn-mark {
    order: 2;
    width: 100% !important;
    justify-content: center !important;
    padding: 11px 16px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    height: auto !important;
    gap: 7px !important;
  }
  .pres-table .mob-name-col .qm-btn-mark span { display: inline !important; font-size: 14px; }
  .pres-table .mob-name-col .qm-btn-mark .fa { font-size: 13px !important; opacity: 1 !important; }

  /* freq col: full second row */
  .pres-table .mob-freq-col {
    flex: 0 0 100%;
    display: flex !important;
    align-items: center;
    padding: 0 !important;
  }
  .pres-table .mob-freq-col .prog {
    display: flex; align-items: center; gap: 10px; width: 100%;
  }
  .pres-table .mob-freq-col .prog-bar { flex: 1; height: 7px; border-radius: 4px; }
  .pres-table .mob-freq-col .prog-pct { font-size: 12px; font-weight: 700; white-space: nowrap; min-width: 36px; }

  /* bottom row: cesta + deliver + anotar */
  .pres-table .mob-cesta-col {
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    padding: 0 !important;
  }
  .pres-table .mob-cesta-col .bsk {
    width: 44px !important; height: 44px !important;
    font-size: 16px !important; border-radius: 10px !important;
  }

  .pres-table .deliver-cell {
    flex: 1;
    display: flex !important;
    align-items: center;
    padding: 0 !important;
  }
  .pres-table .deliver-cell .deliver {
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    min-height: 44px;
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
  }
  .pres-table .deliver-cell .na-lbl { display: none; }

  .pres-table .mob-anot-col {
    flex: 1;
    display: flex !important;
    align-items: center;
    padding: 0 !important;
  }
  .pres-table .mob-anot-col .ann-btn {
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    min-height: 44px;
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
  }

  /* ── Cesta panel: bigger touch targets ── */
  .pi-item { padding: 16px 12px !important; }
  .pi-avatar { width: 44px !important; height: 44px !important; font-size: 15px !important; border-radius: 12px !important; }
  .pi-name { font-size: 15px !important; }
  .pi-actions { gap: 8px !important; flex-wrap: wrap; margin-top: 6px; }
  .pi-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }
  .pi-btn-deliver { min-width: 90px !important; gap: 6px !important; }
  .pi-header { align-items: flex-start !important; }
  .pi-meta { flex: 1; }

  /* Hide the old export PDF link in toolbar on mobile (accessible via drawer) */
  .home-toolbar > a.btn { display: none; }
}

/* ══════════════════════════════════════════════════
   MODAIS DE BENEFICIÁRIO (partials/benef_modals.php)
   Cadastro completo, cadastro expresso e edição total.
   Compartilhados por index, chamada, metricas, contatos
   e aniversariantes.
   ══════════════════════════════════════════════════ */
.bm-modal {
  display: none; position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(28,43,58,.55); backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.bm-modal.open { display: flex; }
.abm-dialog {
  background: var(--surface); border-radius: var(--r-lg); width: min(680px, 96vw);
  max-height: 92vh; overflow-y: auto; box-shadow: var(--sh-3);
  animation: abm-in .18s ease;
  -webkit-overflow-scrolling: touch;
}
@keyframes abm-in { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: none; } }
.abm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 0; margin-bottom: 20px;
}
.abm-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); }
.abm-title span { color: var(--blue-h); }
.abm-sub { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: var(--font-ui); font-weight: 400; }
.abm-close {
  width: 34px; height: 34px; border: none; background: var(--bg); border-radius: 7px;
  cursor: pointer; color: var(--muted); font-size: 14px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.abm-close:hover { background: var(--border-lt); color: var(--text); }
.abm-body { padding: 0 24px 24px; }
.abm-sep {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted); margin: 20px 0 12px;
}
.abm-sep::before, .abm-sep::after { content: ''; flex: 1; height: 1px; background: var(--border-lt); }
.abm-g2  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.abm-g31 { display: grid; grid-template-columns: 1fr 90px; gap: 12px; }
.abm-stepper-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.abm-stepper-group { display: flex; flex-direction: column; gap: 4px; }
.abm-stepper-label { font-size: 10.5px; font-weight: 600; color: var(--slate); white-space: nowrap; }
.abm-stepper { display: flex; align-items: center; }
.abm-stp-btn {
  width: 34px; height: 40px; flex-shrink: 0;
  border: 1.5px solid var(--border); background: var(--bg); color: var(--slate);
  cursor: pointer; font-size: 17px; display: flex; align-items: center; justify-content: center;
  transition: all .12s; line-height: 1; padding: 0; font-family: var(--font-ui);
}
.abm-stp-btn:first-child { border-radius: 7px 0 0 7px; border-right: none; }
.abm-stp-btn:last-child  { border-radius: 0 7px 7px 0; border-left: none; }
.abm-stp-btn:hover { background: var(--blue-pale); color: var(--blue-h); border-color: var(--blue-200); }
/* Total da casa recalculado pelos subgrupos: pisca pra confirmar */
@keyframes total-flash {
  0%   { background: var(--blue-100); border-color: var(--blue); }
  100% { background: #fff; border-color: var(--border); }
}
.abm-stepper input.total-flash { animation: total-flash .5s ease; }
.abm-stepper input {
  width: 52px !important; border-radius: 0 !important; text-align: center;
  font-weight: 700; font-size: 15px !important; padding: 9px 2px !important;
}
.abm-aut-label {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border: 1.5px solid var(--border-lt); border-radius: var(--r-sm);
  cursor: pointer; transition: all .15s; background: var(--surface);
  font-size: 13px; font-weight: 500; color: var(--text-md); user-select: none;
}
.abm-aut-label:hover { border-color: var(--blue-200); background: var(--blue-pale); }
.abm-aut-label input { width: auto !important; accent-color: var(--blue); cursor: pointer; }
.abm-aut-label.checked { border-color: var(--blue); background: var(--blue-pale); color: var(--blue-h); }
.abm-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; border-top: 1px solid var(--border-lt); margin-top: 4px; gap: 10px;
}
.abm-kbd { font-size: 10.5px; color: var(--muted); }
.abm-kbd kbd {
  background: var(--bg); border: 1px solid var(--border-lt); border-radius: 4px;
  padding: 1px 5px; font-family: var(--font-ui); font-size: 10px; font-weight: 600;
}

/* ── Modo expresso: só o essencial, pra não travar a fila ── */
.abm-express-hint {
  display: none;
  align-items: center; gap: 8px;
  background: var(--blue-pale); border: 1px solid var(--blue-100);
  border-radius: var(--r-sm); padding: 9px 12px; margin-bottom: 4px;
  font-size: 11.5px; color: var(--blue-h);
}
#addBenefModal.express .abm-express-hint { display: flex; }
#addBenefModal.express .abm-only-full { display: none; }
#addBenefModal.express .abm-title span::after { content: ' expresso'; }

/* ── Modal de edição completa ── */
#editBenefModal .abm-title span { color: var(--blue-h); }

/* Mobile: modal ocupa a tela, alvos maiores, sem zoom no iOS */
@media (max-width: 768px) {
  .bm-modal { align-items: flex-start; }
  /* Altura travada na tela e rolagem dentro do modal: com max-height:none o
     conteúdo passava da tela e não rolava (o fundo fica com scroll travado). */
  .abm-dialog {
    width: 100vw; max-width: 100vw;
    height: 100vh; height: 100dvh; max-height: none;
    overflow-y: auto; overscroll-behavior: contain;
    border-radius: 0;
  }
  .abm-header { padding: 16px 16px 0; margin-bottom: 14px; }
  .abm-body   { padding: 0 16px 0; }
  .abm-g2, .abm-g31 { grid-template-columns: 1fr; }
  .abm-stepper-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .abm-dialog input, .abm-dialog select { font-size: 17px !important; }  /* iOS não dá zoom */
  .abm-stp-btn { width: 44px; height: 48px; font-size: 20px; }
  .abm-stepper input { width: 100% !important; font-size: 17px !important; }
  .abm-footer {
    position: sticky; bottom: 0; background: var(--surface);
    padding: 12px 0; margin: 0 -16px; padding-left: 16px; padding-right: 16px;
    box-shadow: 0 -4px 16px rgba(28,43,58,.08);
  }
  .abm-kbd { display: none; }
  .abm-footer > div { flex: 1; }
  .abm-footer .btn { flex: 1; justify-content: center; min-height: 48px; font-size: 14px; }
}

/* ══════════════════════════════════════════════════
   PLACAR DO SÁBADO — assinatura visual
   Sticky: o operador olha isso o sábado inteiro.
   ══════════════════════════════════════════════════ */
.placar {
  position: sticky; top: 54px; z-index: 40;
  background: var(--navy);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 2px 12px rgba(28,43,58,.14);
}
.placar-inner {
  max-width: 1500px; margin: 0 auto;
  padding: 12px 28px;
  display: flex; align-items: center; gap: 18px;
}

/* Anel: progresso contra a MÉDIA do sábado, não contra o total de cadastrados */
.placar-ring { position: relative; width: 62px; height: 62px; flex-shrink: 0; }
.placar-ring svg { width: 62px; height: 62px; transform: rotate(-90deg); }
.placar-ring-bg { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 6; }
.placar-ring-fg {
  fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round;
  transition: stroke-dashoffset .45s cubic-bezier(.22,1,.36,1);
}
.placar-ring-txt {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  letter-spacing: -.02em;
}
.placar-ring-txt small { font-size: 9px; font-weight: 600; opacity: .7; margin-left: 1px; }

.placar-num { display: flex; align-items: baseline; gap: 7px; flex-shrink: 0; }
.placar-num strong {
  font-family: var(--font-display);
  font-size: 38px; font-weight: 700; line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.placar-num-lbl { font-size: 12px; color: rgba(255,255,255,.6); font-weight: 500; }

.placar-meta { flex: 1; min-width: 0; }
.placar-dia { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.9); }
.placar-comparativo { font-size: 11.5px; color: rgba(255,255,255,.55); margin-top: 1px; }
.placar-comparativo strong { color: rgba(255,255,255,.8); font-weight: 600; }
.placar-delta {
  display: inline-block; margin-left: 6px;
  font-size: 10.5px; font-weight: 700;
  padding: 1px 7px; border-radius: var(--r-full);
}
.placar-delta.acima  { background: rgba(46,158,107,.22);  color: #86D9B2; }
.placar-delta.abaixo { background: rgba(232,146,124,.18); color: #F0B6A6; }
.placar-delta.igual  { background: rgba(255,255,255,.1);  color: rgba(255,255,255,.65); }

.placar-total {
  font-size: 11.5px; color: rgba(255,255,255,.5); flex-shrink: 0;
  text-align: right;
}
.placar-total span { font-weight: 700; color: rgba(255,255,255,.75); }

@media (max-width: 768px) {
  .placar { top: 52px; }
  .placar-inner { padding: 10px 14px; gap: 12px; }
  .placar-ring, .placar-ring svg { width: 52px; height: 52px; }
  .placar-num strong { font-size: 30px; }
  .placar-num-lbl { font-size: 11px; }
  .placar-total { display: none; }   /* espaço é escasso: fica o essencial */
}

/* ══════════════════════════════════════════════════
   MODO SÁBADO (chamada.php) — check-in rápido
   ══════════════════════════════════════════════════ */
/* Busca gigante sticky: o gesto mais repetido do sábado */
.sb-searchbar {
  position: sticky; z-index: 35;
  top: calc(54px + 87px);              /* header + placar */
  background: var(--bg);
  padding: 12px 28px;
  border-bottom: 1px solid var(--border-lt);
}
.sb-searchbar-inner { max-width: 1500px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.sb-search-wrap { position: relative; }
.sb-search {
  width: 100%;
  padding: 15px 46px 15px 46px !important;
  font-size: 18px !important;          /* >=16px: iOS nao da zoom ao focar */
  font-weight: 500;
  border: 2px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.sb-search:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 4px var(--ring) !important; }
.sb-search-ico {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 16px; pointer-events: none;
}
.sb-search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--border-lt); border: none; color: var(--slate);
  cursor: pointer; font-size: 13px;
  display: none; align-items: center; justify-content: center;
}
.sb-search-clear.show { display: flex; }
.sb-search-clear:hover { background: var(--border); color: var(--text); }

/* Chips de filtro */
.sb-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sb-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: var(--r-full);
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text-md); font-family: var(--font-ui);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all .14s; white-space: nowrap;
}
.sb-chip:hover { border-color: var(--blue-200); background: var(--blue-pale); }
.sb-chip.active { background: var(--blue-btn); border-color: var(--blue-btn); color: #fff; }
.sb-chip-bday.active { background: var(--gold); border-color: var(--gold); color: #4A3608; }
.sb-chip-falta.active { background: var(--warm); border-color: var(--warm); color: #5A2417; }
.sb-chip-count { font-size: 10.5px; opacity: .75; font-weight: 700; }
.sb-vis-count { font-size: 11.5px; color: var(--muted); margin-left: auto; white-space: nowrap; }

/* Faixa de aniversariantes do dia */
.sb-bday-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--gold-bg); border: 1px solid #EFD9A3;
  border-radius: var(--r-md); padding: 10px 14px;
  margin: 14px 28px 0;
  font-size: 12.5px; color: #7A5610;
}
.sb-bday-strip strong { font-weight: 700; }
.sb-bday-strip i { font-size: 15px; }

/* Grid de cards */
.sb-grid {
  max-width: 1500px; margin: 0 auto;
  padding: 14px 28px 90px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px;
}
.sb-card {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--border-lt);
  border-radius: var(--r-md);
  padding: 13px 13px 11px;
  cursor: pointer;
  min-height: 64px;                     /* alvo de toque generoso */
  transition: border-color .14s, background .14s, transform .1s, box-shadow .14s;
  box-shadow: var(--sh-1);
  -webkit-tap-highlight-color: transparent;
}
.sb-card:hover { border-color: var(--blue-200); box-shadow: var(--sh-2); }
.sb-card:active { transform: scale(.985); }
.sb-card.presente { background: var(--green-bg); border-color: var(--green-line); }
.sb-card.loading { opacity: .55; pointer-events: none; }

/* Marca de presença */
.sb-check {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--border-lt); color: transparent;
  font-size: 12px; transition: all .18s cubic-bezier(.22,1,.36,1);
}
.sb-card.presente .sb-check { background: var(--green); color: #fff; transform: scale(1.06); }
.sb-card-top { display: flex; align-items: center; gap: 10px; padding-right: 30px; }
.sb-avatar {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.sb-nome {
  font-size: 14px; font-weight: 600; color: var(--text);
  line-height: 1.3; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sb-sub {
  font-size: 10.5px; color: var(--muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Bairro comprido encolhe para não quebrar linha (ajustarSubs) */
.sb-sub.encolhe-1 { font-size: 9.5px; }
.sb-sub.encolhe-2 { font-size: 8.8px; letter-spacing: -.01em; }
.sb-sub-vazio { font-style: italic; opacity: .7; }
/* Nome comprido encolhe em vez de ser cortado: o nome inteiro é o que
   confirma a pessoa na fila. Degraus aplicados por ajustarNomes(). */
.sb-nome.encolhe-1 { font-size: 12.5px; line-height: 1.25; }
.sb-nome.encolhe-2 { font-size: 11.5px; line-height: 1.2; letter-spacing: -.01em; }
.sb-nome.encolhe-3 { font-size: 10.5px; line-height: 1.18; letter-spacing: -.015em; }
.sb-nome.encolhe-4 { font-size: 9.5px;  line-height: 1.15; letter-spacing: -.02em; }
/* Nem no menor tamanho coube: melhor uma 4a linha do que cortar o nome */
.sb-nome.solto { -webkit-line-clamp: 4; }

.sb-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.sb-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: var(--r-full);
  white-space: nowrap;
}
.sb-badge-bday  { background: var(--gold-bg); color: #7A5610; border: 1px solid #EFD9A3; }
.sb-badge-falta { background: var(--warm-bg); color: #A85238; border: 1px solid #F3CFC2; }
.sb-badge-crianca { background: var(--blue-100); color: var(--blue-h); }
/* Adulto em tom neutro: informa sem competir com os badges que pedem ação */
.sb-badge-adulto { background: var(--bg); color: var(--slate); border: 1px solid var(--border-lt); }

/* Ações do card — não disparam o toggle (stopPropagation no JS).
   Só ícones: são 4 (WhatsApp, cesta, anotar, editar) e o card é estreito. */
.sb-actions { display: flex; gap: 5px; margin-top: 10px; }
.sb-act {
  flex: 1; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border-radius: var(--r-sm); border: 1.5px solid var(--border-lt);
  background: var(--surface); color: var(--slate);
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: all .12s;
}
.sb-act:hover { background: var(--blue-pale); color: var(--blue-h); border-color: var(--blue-200); }

/* WhatsApp em linha própria: é a ação que se lê, não só um ícone */
.sb-wa {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 5px; min-height: 38px;
  border-radius: var(--r-sm); border: 1.5px solid var(--green-line);
  background: var(--green-bg); color: var(--green-ink);
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  text-decoration: none; transition: all .12s;
}
.sb-wa:hover { background: var(--green); color: #fff; border-color: var(--green); }
/* Sem número: o lugar continua ali, dizendo o que falta */
.sb-wa-off {
  background: var(--bg); border-color: var(--border-lt); color: var(--muted);
  cursor: default; font-weight: 500;
}
.sb-wa-off:hover { background: var(--bg); color: var(--muted); border-color: var(--border-lt); }
.sb-wa-off i { opacity: .55; }
/* Cesta pendente fica âmbar, igual ao dashboard */
.sb-act-cesta.ativo { background: var(--amber-bg); color: var(--amber-ink); border-color: var(--amber-line); }
.sb-act-cesta.ativo:hover { background: #F7E7C4; color: var(--amber-ink); border-color: var(--amber); }

/* Quem ganhou anotação hoje leva um cantinho marcado */
.sb-card.tem-anotacao::before {
  content: '';
  position: absolute; top: 0; left: 0;
  border-width: 14px 14px 0 0;
  border-style: solid;
  border-color: var(--blue) transparent transparent transparent;
  border-radius: var(--r-md) 0 0 0;
}

/* Modal de anotação */
.anot-quem {
  font-size: 12.5px; font-weight: 600; color: var(--blue-h);
  background: var(--blue-pale); border: 1px solid var(--blue-100);
  border-radius: var(--r-sm); padding: 7px 11px; margin-bottom: 10px;
}

/* Pessoa cadastrada na hora entra com brilho quente */
@keyframes sbNovo {
  0%   { background: var(--gold-bg); border-color: var(--gold); transform: scale(.96); }
  100% { background: var(--green-bg); border-color: var(--green-line); transform: scale(1); }
}
.sb-card.novo { animation: sbNovo 1.6s ease both; }

.sb-empty { grid-column: 1/-1; text-align: center; padding: 48px 20px; color: var(--muted); }
.sb-empty i { font-size: 34px; opacity: .35; display: block; margin-bottom: 12px; }
.sb-empty-acao { margin-top: 14px; }

/* Barra de data */
.sb-datebar {
  max-width: 1500px; margin: 0 auto;
  padding: 12px 28px 0;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sb-date-input {
  width: auto !important; font-weight: 600; font-size: 13px;
  border: 1.5px solid var(--border-lt) !important; background: var(--surface);
}
.sb-hoje-lbl {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--green-ink); background: var(--green-bg);
  border: 1px solid var(--green-line); border-radius: var(--r-full); padding: 3px 10px;
}
/* Fica ao lado do "Hoje": mesma altura de badge, para lerem como um par */
.sb-btn-cadastro { letter-spacing: .06em; font-weight: 700; }

@media (max-width: 768px) {
  .sb-searchbar { top: calc(52px + 73px); padding: 10px 14px; }
  .sb-search { font-size: 17px !important; padding: 14px 44px !important; }
  .sb-grid { padding: 12px 14px 90px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
  .sb-card { padding: 12px 11px 10px; }
  /* O nome e o dado que confirma a pessoa: no mobile ele nao pode truncar */
  /* O nome disputava largura com avatar e marca de presença e sobravam ~87px,
     o que empurrava nomes longos para 3 linhas. Encolhendo os vizinhos, a
     coluna do nome ganha ~15px — o suficiente para caber em 2 linhas. */
  .sb-avatar { width: 30px; height: 30px; font-size: 11px; border-radius: 8px; }
  .sb-nome { -webkit-line-clamp: 2; font-size: 13.5px; overflow-wrap: anywhere; }
  .sb-card-top { padding-right: 20px; gap: 6px; }
  .sb-check { width: 18px; height: 18px; top: 8px; right: 8px; font-size: 9px; }
  .sb-bday-strip { margin: 12px 14px 0; }
  .sb-datebar { padding: 10px 14px 0; }
  .sb-act { min-height: 46px; font-size: 15px; }
  .sb-actions { gap: 4px; }
  /* "28d sem vir" + "Criança" precisam caber lado a lado no card estreito */
  .sb-badges { gap: 4px; margin-top: 7px; }
  .sb-badge { font-size: 9.5px; padding: 2px 6px; gap: 3px; }
  .sb-badge i { font-size: 8px; }
  .sb-wa { min-height: 44px; font-size: 13px; }
  .sb-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none; }
  .sb-chips::-webkit-scrollbar { display: none; }
  .sb-vis-count { display: none; }
}

/* ══════════════════════════════════════════════════
   BARRA INFERIOR RECOLHÍVEL + PLACAR RECOLHÍVEL
   No celular a tela é curta: os dois saem da frente
   quando o que importa é ver mais gente na lista.
   ══════════════════════════════════════════════════ */

/* Botão de recolher do placar (só no celular; no desktop sobra espaço) */
.placar-toggle { display: none; }
.placar-resumo { display: none; }

@media (max-width: 768px) {
  .placar { position: sticky; }
  .placar-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex-shrink: 0;
    border: none; border-radius: 50%;
    background: rgba(255,255,255,.1); color: rgba(255,255,255,.65);
    font-size: 11px; cursor: pointer; transition: background .15s;
  }
  .placar-toggle:active { background: rgba(255,255,255,.2); }

  /* Recolhido: o miolo some e sobra uma faixa fina com o número */
  .placar.recolhido .placar-inner { display: none; }
  .placar.recolhido .placar-resumo {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; padding: 7px 14px;
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,.85);
    font-family: var(--font-ui); font-size: 12.5px; font-weight: 500;
  }
  .placar.recolhido .placar-resumo strong {
    font-family: var(--font-display); font-size: 17px; font-weight: 700;
    color: #fff; letter-spacing: -.02em;
  }
  .placar.recolhido .placar-resumo i { font-size: 10px; opacity: .6; }

  /* A busca fica logo abaixo: acompanha a altura que o placar assume */
  .placar.recolhido ~ .sb-searchbar { top: calc(52px + 34px); }

  /* ── Barra inferior: escondida por padrão ── */
  .mob-bottom-nav {
    transform: translateY(110%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    /* Escondida, a sombra ainda vazava pra dentro da tela: só some junto */
    box-shadow: none;
    border-top-color: transparent;
  }
  .mob-bottom-nav.aberta {
    transform: translateY(0);
    box-shadow: 0 -4px 20px rgba(28,43,58,.22);
    border-top-color: rgba(255,255,255,.08);
  }

  /* Puxador discreto: pequeno, translúcido, fora do caminho do polegar */
  .mob-nav-handle {
    position: fixed; z-index: 101;
    right: 14px; bottom: calc(6px + env(safe-area-inset-bottom));
    width: 46px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--r-full);
    background: rgba(36,52,77,.82);
    backdrop-filter: blur(6px);
    color: rgba(255,255,255,.7);
    font-size: 11px; cursor: pointer;
    box-shadow: 0 2px 10px rgba(28,43,58,.25);
    transition: transform .25s cubic-bezier(.4,0,.2,1), background .15s, opacity .2s;
    opacity: .75;
  }
  .mob-nav-handle:active { opacity: 1; background: rgba(36,52,77,.95); }
  /* Com a barra aberta, o puxador sobe e vira "fechar" */
  .mob-nav-handle.aberta {
    transform: translateY(calc(-60px - env(safe-area-inset-bottom)));
    opacity: 1;
  }
  .mob-nav-handle.aberta i { transform: rotate(180deg); }
  .mob-nav-handle i { transition: transform .25s; }

  /* Sem a barra ocupando o rodapé, o conteúdo respira mais */
  .n-main { padding-bottom: 42px; }
  .sb-grid { padding-bottom: 46px; }
  body.com-barra .n-main { padding-bottom: 86px; }
  body.com-barra .sb-grid { padding-bottom: 90px; }
}


/* ══════════════════════════════════════════════════
   iOS: sem zoom automático ao focar um campo
   O Safari aproxima a tela sozinho quando o campo tem fonte < 16px,
   e a página fica torta depois. Como abrimos com initial-scale .95,
   o limiar sobe (16 / .95 = 16.9) — daí 17px, com folga.
   Regra por último no arquivo para vencer os tamanhos das páginas.
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  input:not([type="hidden"]),
  select,
  textarea {
    font-size: 17px !important;
  }
  /* Campos que viram controle nativo no iOS também contam */
  input[type="date"], input[type="search"], input[type="tel"], input[type="number"] {
    font-size: 17px !important;
  }
}

/* Links com cara de botão (Sair) */
a.n-action-btn, a.mob-drawer-action { text-decoration: none; }