/* ============================================================================
   Onda 17 — Lembretes (Simplificacao #4)
   ----------------------------------------------------------------------------
   A) Campo "Lembrete" no lead drawer (.lembrete-grid / .lembrete-hint).
   B) Card "Precisa de atencao" no topo do CRM (.atencao-card + lista).
   Tokens AAA do tema claro: texto >=7:1, UI/bordas >=3:1. Badge "vencido" usa
   tom de alerta (warning) com texto escuro AAA; "parado" usa cinza neutro.
   Escopo em :root[data-theme="light"] pra seguir o padrao das ondas anteriores.
   ============================================================================ */

/* ---------- A) Campo Lembrete (drawer) ---------- */
:root[data-theme="light"] .lembrete-grid {
  /* Data estreita, nota larga: 1fr / 2fr no lugar do 3-col padrao. */
  grid-template-columns: minmax(140px, 1fr) 2fr;
}

@media (max-width: 760px) {
  :root[data-theme="light"] .lembrete-grid {
    grid-template-columns: 1fr;
  }
}

:root[data-theme="light"] .lembrete-hint {
  margin-top: var(--gap-2, 8px);
  color: var(--text-muted, #41505F);   /* ~8.2:1 sobre branco — AAA */
}

/* ---------- B) Card "Precisa de atencao" ---------- */
:root[data-theme="light"] .atencao-card {
  margin-bottom: var(--gap-5, 20px);
  background: var(--bg-surface, #FFFFFF);
  border: 1px solid var(--border-default, #CBD5E1);
  border-left: 3px solid var(--color-warning, #92400E);   /* faixa de alerta */
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
}

:root[data-theme="light"] .atencao-card__head {
  display: flex;
  align-items: center;
}

:root[data-theme="light"] .atencao-card__toggle {
  display: flex;
  align-items: center;
  gap: var(--gap-2, 8px);
  width: 100%;
  padding: var(--gap-3, 12px) var(--gap-4, 16px);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary, #0F172A);
}

:root[data-theme="light"] .atencao-card__toggle:focus-visible {
  outline: 2px solid var(--color-accent, #173C46);
  outline-offset: -2px;
}

/* .chevron / .chevron--open ja vêm de components.css (rotaciona 90deg quando
   aberto). So ajustamos cor/encaixe aqui. */
:root[data-theme="light"] .atencao-card__toggle .chevron {
  color: var(--text-secondary, #334155);
  flex: 0 0 auto;
}

:root[data-theme="light"] .atencao-card__title {
  margin: 0;
  font-size: var(--fs-sm, 14px);
  font-weight: 600;
  color: var(--text-primary, #0F172A);
  line-height: 1.3;
}

:root[data-theme="light"] .atencao-card__count {
  color: var(--color-warning, #92400E);   /* ~7.2:1 — AAA */
  font-weight: 700;
}

:root[data-theme="light"] .atencao-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-subtle, #E2E8F0);
}

:root[data-theme="light"] .atencao-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3, 12px);
  padding: var(--gap-3, 12px) var(--gap-4, 16px);
  border-bottom: 1px solid var(--border-subtle, #E2E8F0);
}
:root[data-theme="light"] .atencao-item:last-child {
  border-bottom: 0;
}

:root[data-theme="light"] .atencao-item__main {
  display: flex;
  align-items: center;
  gap: var(--gap-3, 12px);
  min-width: 0;
  flex-wrap: wrap;
}

:root[data-theme="light"] .atencao-item__nome {
  font-weight: 600;
  font-size: var(--fs-sm, 14px);
  color: var(--text-primary, #0F172A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

:root[data-theme="light"] .atencao-item__nota {
  font-style: italic;
  font-weight: 400;
  opacity: .92;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root[data-theme="light"] .atencao-item__actions {
  display: flex;
  align-items: center;
  gap: var(--gap-2, 8px);
  flex: 0 0 auto;
}

:root[data-theme="light"] .atencao-item__wa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
:root[data-theme="light"] .atencao-item__wa:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ---------- Badges de motivo ---------- */
/* "Lembrete venceu" — tom de alerta (warning). Texto escuro AAA sobre fundo
   amarelo bem claro; borda em warning >=3:1. */
:root[data-theme="light"] .badge--atencao-vencido {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(234, 179, 8, 0.14);            /* amarelo bem claro */
  color: var(--color-warning, #92400E);           /* ~7.2:1 — AAA */
  border: 1px solid rgba(146, 64, 14, 0.45);      /* warning translucido >=3:1 */
}

/* "Parado ha N dias" — neutro (cinza). */
:root[data-theme="light"] .badge--atencao-parado {
  background: var(--badge-cinza-bg, rgba(100, 116, 139, 0.12));
  color: var(--badge-cinza-text, #475569);        /* slate-600 ~7:1 */
  border: 1px solid var(--badge-cinza-border, rgba(100, 116, 139, 0.28));
}

@media (max-width: 600px) {
  :root[data-theme="light"] .atencao-item {
    flex-direction: column;
    align-items: stretch;
  }
  :root[data-theme="light"] .atencao-item__actions {
    justify-content: flex-end;
  }
}