/* ============================================================
   ClinicUp — Funcionalidades CSS
   css/funcionalidades.css
   ============================================================ */
@import url('pages.css');

/* ── Feature blocks ──────────────────────────────────────── */
.feature-block {
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--color-border-light);
}

.feature-block:last-child { border-bottom: none; }

.feature-block--alt {
  background-color: var(--color-bg-alt);
}

.feature-block__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}

.feature-block__grid--reverse .feature-block__visual { order: -1; }

.feature-block__tag {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.feature-block__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: var(--line-height-snug);
  margin-bottom: var(--space-4);
}

.feature-block__desc {
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-4);
}

.feature-block__benefit {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-light);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: 0;
}

.feature-block__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

/* ── Feature icon wrap ──────────────────────────────────── */
.feature-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-light);
  border-radius: var(--radius-xl);
  flex-shrink: 0;
}

.feature-icon-wrap--lg {
  width: 88px;
  height: 88px;
}

/* ── Mini mockups ────────────────────────────────────────── */
.mini-chat {
  background: #ECE5DD;
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 300px;
  box-shadow: var(--shadow-md);
}

.mini-chat__bubble {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  max-width: 80%;
}

.mini-chat__bubble--in {
  background: var(--color-white);
  align-self: flex-end;
  border-top-right-radius: var(--radius-sm);
}

.mini-chat__bubble--out {
  background: #E8F5F2;
  align-self: flex-start;
  border-top-left-radius: var(--radius-sm);
}

.mini-calendar {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 100%;
  max-width: 300px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

.mini-calendar__header {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--color-primary);
  padding: var(--space-2) var(--space-3);
  gap: var(--space-1);
}

.mini-calendar__header span {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.70);
  text-align: center;
}

.mini-calendar__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: var(--space-2) var(--space-3);
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border-light);
}

.mini-cal-slot {
  font-size: 9px;
  line-height: 1.3;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 3px 4px;
  min-height: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mini-cal-slot--busy { background: rgba(26,43,60,0.07); color: var(--color-primary); }
.mini-cal-slot--accent { background: var(--color-accent-light); color: var(--color-accent); font-weight: 600; }

.mini-dashboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  width: 100%;
  max-width: 260px;
}

.mini-dash-stat {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--shadow-xs);
}

.mini-dash-stat--accent .mini-dash-num { color: var(--color-accent); }

.mini-dash-num {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.mini-dash-label {
  font-size: 9px;
  color: var(--color-text-muted);
  margin-top: 2px;
  text-align: center;
}

.mini-crm {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 100%;
  max-width: 280px;
  box-shadow: var(--shadow-md);
}

.mini-crm__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--font-size-xs);
}

.mini-crm__row:last-child { border-bottom: none; }
.mini-crm__row--active { background: var(--color-accent-light); }

.mini-crm__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  flex-shrink: 0;
}

.mini-crm__dot--online { background: var(--color-accent); }

.mini-crm__name { flex: 1; color: var(--color-primary); font-weight: 500; }

.mini-crm__tag {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.mini-crm__tag--human {
  background: rgba(26,43,60,0.07);
  color: var(--color-primary);
}

.mini-roles {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: 280px;
}

.mini-role {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

.mini-role--admin { border-left: 3px solid var(--color-primary); color: var(--color-primary); font-weight: 600; }
.mini-role--recep { border-left: 3px solid var(--color-accent); color: var(--color-text); }
.mini-role--medic { border-left: 3px solid var(--color-text-light); color: var(--color-text-muted); }

.mini-ia-stats {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
}

.mini-ia-stat { text-align: center; }

.mini-ia-val {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
}

.mini-ia-label {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 3px;
  display: block;
}

.mini-reminder {
  width: 100%;
  max-width: 280px;
}

.mini-reminder__msg {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.mini-reminder__from {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.mini-reminder__text {
  font-size: var(--font-size-xs);
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: var(--space-2);
}

.mini-reminder__time {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.mini-knowledge {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  width: 100%;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
}

.mini-know-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text);
}

/* ── CTA intermedio ──────────────────────────────────────── */
.cta-mid { text-align: center; }

/* ── Responsive ──────────────────────────────────────────── */
@media (min-width: 768px) {
  .feature-block__title { font-size: var(--font-size-2xl); }
}

@media (min-width: 1024px) {
  .feature-block__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }

  .feature-block__grid--reverse .feature-block__visual { order: 1; }

  .feature-block__visual {
    align-items: center;
  }
}