/* ── CHECK-INS TAB ────────────────────────────────────────── */
.checkin-toolbar { display: flex; align-items: center; gap: 8px; }
.select { min-width: 200px; }
.select-sm { padding: 7px 10px; font-size: .85rem; }
.search-input {
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-strong);
  outline: none;
  min-width: 180px;
}
.search-input:focus { border-color: var(--accent); }

/* Campo de busca com botão X pra limpar */
.search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.search-wrap .search-input { width: 100%; padding-right: 32px; }
.search-wrap .search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--surface-3, rgba(255,255,255,.08));
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.search-wrap .search-clear:hover { background: var(--accent); color: #fff; }
.search-wrap.has-text .search-clear { display: inline-flex; }

.event-focus {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.event-focus-main { flex: 1; min-width: 0; }
.event-focus-title { font-weight: 800; color: var(--text-strong); font-size: 1.05rem; margin-bottom: 4px; }
.event-focus-sub { font-size: .82rem; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.event-focus-stats { display: flex; gap: 10px; }
.stat-box {
  background: var(--accent-dim);
  border: 1px solid rgba(224,69,53,.3);
  border-radius: var(--r-md);
  padding: 8px 16px;
  text-align: center;
  min-width: 84px;
}
.stat-num { font-size: 1.6rem; font-weight: 800; color: var(--accent); line-height: 1; }
.stat-label { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }

.event-focus-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.ef-filters {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Check-in rows */
/* Grid columnar — foto | nome | equipe | disp | horário | atributos | ação */
:root {
  --ck-cols: 44px minmax(140px, 1fr) 80px 90px 70px minmax(140px, 1.2fr) 36px;
}
.checkin-list { display: flex; flex-direction: column; gap: 6px; }
.checkin-list-header {
  display: grid;
  grid-template-columns: var(--ck-cols);
  gap: 10px;
  align-items: center;
  padding: 6px 14px 4px;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.checkin-list-header > * {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 4px;
}
.checkin-list-header > *:nth-child(1),
.checkin-list-header > *:nth-child(2) {
  justify-content: flex-start;
  text-align: left;
}
.ck-sort-btn {
  appearance: none;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-transform: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
}
.ck-sort-btn:hover { color: var(--text); }
.ck-sort-btn.is-active { color: var(--accent); }

.checkin-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 14px;
  display: grid;
  grid-template-columns: var(--ck-cols);
  gap: 10px;
  align-items: center;
}
.checkin-row > .ck-col { min-width: 0; text-align: center; font-size: .82rem; }
.checkin-row > .ck-col.col-time { font-variant-numeric: tabular-nums; color: var(--muted); }
.checkin-row > .ck-col.col-attrs { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.checkin-row > .ck-col.col-action { display: flex; justify-content: center; }
.checkin-row > .checkin-main { text-align: left; }
.ck-manual-tag {
  display: inline-flex;
  align-items: center;
  font-size: .65rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-left: 6px;
  vertical-align: middle;
}

@media (max-width: 720px) {
  .checkin-list-header { display: none; }
  .checkin-row {
    grid-template-columns: 44px auto auto 1fr auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "foto main   main   main   act"
      "foto equipe disp   time   time"
      "foto attrs  attrs  attrs  attrs";
    column-gap: 6px;
    row-gap: 4px;
  }
  .checkin-row > .checkin-avatar { grid-area: foto; align-self: start; margin-top: 2px; }
  .checkin-row > .checkin-main   { grid-area: main;   text-align: left; }
  .checkin-row > .col-action     { grid-area: act;    justify-self: end; }
  .checkin-row > .col-equipe     { grid-area: equipe; justify-self: start; text-align: left; }
  .checkin-row > .col-disp       { grid-area: disp;   justify-self: start; text-align: left; }
  .checkin-row > .col-time       { grid-area: time;   justify-self: start; text-align: left; font-size: .72rem; }
  .checkin-row > .col-attrs      { grid-area: attrs;  justify-self: end;   justify-content: flex-end; }
}
.checkin-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-weight: 800;
  font-size: .82rem;
  flex-shrink: 0;
}
.checkin-avatar.avatar-amarelo  { background: var(--team-amarelo-bg);  color: var(--team-amarelo-text); }
.checkin-avatar.avatar-azul     { background: var(--team-azul-bg);     color: var(--team-azul-text); }
.checkin-avatar.avatar-verde    { background: var(--team-verde-bg);    color: var(--team-verde-text); }
.checkin-avatar.avatar-vermelho { background: var(--team-vermelho-bg); color: var(--team-vermelho-text); }

.checkin-main { min-width: 0; }
.checkin-name { font-weight: 700; color: var(--text-strong); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .9rem; }
.obs-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid rgba(224,69,53,.3);
  cursor: pointer;
}
.obs-badge svg { stroke-width: 2.2; }

.ck-min-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 8px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--surface-2, #f0f0f0);
  color: var(--text-muted, #555);
  border: 1px solid var(--border, #ddd);
  white-space: nowrap;
}

/* ── CANCELAMENTOS (aba Check-ins) ────────────────────────── */
.cancelamentos-section {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.cancelamentos-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(239,68,68,.12);
  color: var(--warn, #ef4444);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 12px;
}
.cancelamentos-list-header {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 14px 4px;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.cancelamentos-list-header > *:nth-child(2) { justify-content: flex-start; }
.cancelamentos-list { display: flex; flex-direction: column; gap: 8px; }
.cancelamento-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn, #ef4444);
  border-radius: var(--r-md);
  opacity: .95;
}
.cancelamento-motivo {
  margin-top: 6px;
  font-style: italic;
  color: var(--text);
  border-left: 0;
  padding-left: 0;
}

.checkin-row.faltou { opacity: .75; background: linear-gradient(90deg, rgba(239,68,68,.06), transparent 60%); }

/* ── PENDENTES / Aguardando Confirmação (aba Check-ins) ───── */
.pendentes-section {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.pendentes-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(245,158,11,.14);
  color: #b45309;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 12px;
}
.pendentes-list { display: flex; flex-direction: column; gap: 8px; }
.pendente-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid rgba(245,158,11,.45);
  border-left: 4px solid #f59e0b;
  border-radius: var(--r-md);
}
.pendente-row .checkin-name { font-weight: 600; }
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-md, 6px);
  background: #25D366;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
}
.btn-wa:hover { background: #1ebe5a; }
.btn-wa-disabled {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  color: var(--text-muted, #888);
  opacity: .5;
}

/* ── Modal de edição de presença (UI-004) ─────────────────── */
.presenca-edit-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.presenca-edit-header strong {
  font-size: .95rem;
  color: var(--text-strong);
}
.obs-vol-quote {
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-style: italic;
  color: var(--text);
  font-size: .88rem;
  white-space: pre-wrap;
  margin: 0;
}
.pe-actions {
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
/* Salvar ocupa a linha inteira: com a entrada do "Não virá" são 4 ações, e as
   3 secundárias (Cancelar / Excluir / Não virá) já fecham a primeira linha.
   Sobrar o botão primário solto num terço lia como quebra acidental. No fluxo
   "não virá" o Salvar some e as 3 restantes fecham a linha sozinhas. */
#pe-salvar { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .pe-actions { grid-template-columns: 1fr; }
}

/* Marca de sobrescrita do líder na coluna DISP. da Lista de Presença */
.disp-overridden-mark {
  display: inline-block;
  margin-left: 3px;
  color: var(--accent);
  font-weight: 800;
}

/* ── Modal de configuração de alertas ─────────────────────── */
.cfg-help-box {
  background: var(--accent-dim);
  border: 1px solid rgba(224,69,53,.25);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 6px;
}
.cfg-help-box strong { color: var(--text-strong); display: block; margin-bottom: 6px; font-size: .95rem; }
.cfg-help-box p { margin: 4px 0; }
.cfg-help-box b { color: var(--text-strong); font-weight: 700; }