/* ============================================================
   Optma DS · Card · v0.1
   Container genérico. Base + variantes + estados.
============================================================ */

.opt-card {
  position: relative;
  background: var(--opt-paper);
  border: 1px solid var(--opt-rule);
  border-radius: var(--opt-radius-2xl);
  padding: var(--opt-space-7);
  box-shadow: var(--opt-shadow-soft);

  font-family: var(--opt-font-body);
  color: var(--opt-ink);

  transition: transform var(--opt-duration-slow) var(--opt-ease-out),
              box-shadow var(--opt-duration-slow) var(--opt-ease-out),
              border-color var(--opt-duration-slow) var(--opt-ease-out);
}

/* -----------------------------------------
   Padding · scales
   ----------------------------------------- */
.opt-card--tight   { padding: var(--opt-space-5); }
.opt-card--roomy   { padding: var(--opt-space-10); }

/* -----------------------------------------
   Variantes · visual
   ----------------------------------------- */

/* Soft: cor de fundo levemente diferente */
.opt-card--soft {
  background: var(--opt-paper-soft);
  border-color: var(--opt-rule-soft);
  box-shadow: none;
}

/* Outlined: sem sombra, borda forte */
.opt-card--outlined {
  box-shadow: none;
  border-color: var(--opt-rule);
}

/* Dashed: rascunho, placeholder */
.opt-card--dashed {
  background: transparent;
  border: 1.5px dashed #C9C8BC;
  box-shadow: none;
}

/* Destaque: borda gradient verde */
.opt-card--feature {
  background: var(--opt-paper);
  border-color: transparent;
  box-shadow: var(--opt-shadow-green);
}

.opt-card--feature::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--opt-radius-2xl);
  padding: 1.5px;
  background: linear-gradient(135deg, var(--opt-green-deep) 0%, var(--opt-green) 50%, var(--opt-green-bright) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* -----------------------------------------
   Interactive: card que é botão
   ----------------------------------------- */
.opt-card--interactive {
  cursor: pointer;
}

.opt-card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--opt-shadow-hover);
}

.opt-card--interactive:focus-visible {
  outline: none;
  box-shadow: var(--opt-shadow-green), var(--opt-ring-green);
}

/* -----------------------------------------
   Estrutura interna
   ----------------------------------------- */
.opt-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--opt-space-4);
  margin-bottom: var(--opt-space-5);
}

.opt-card__meta {
  font-family: var(--opt-font-body);
  font-size: var(--opt-text-xs);
  font-weight: var(--opt-weight-medium);
  letter-spacing: var(--opt-tracking-wider);
  text-transform: uppercase;
  color: var(--opt-ink-muted);
  margin-bottom: var(--opt-space-2);
}

.opt-card__title {
  font-family: var(--opt-font-display);
  font-weight: var(--opt-weight-black);
  font-size: var(--opt-text-3xl);
  line-height: var(--opt-leading-snug);
  letter-spacing: var(--opt-tracking-tight);
  color: var(--opt-ink);
  margin: 0;
}

.opt-card__sub {
  font-family: var(--opt-font-body);
  font-size: var(--opt-text-md);
  color: var(--opt-ink-mid);
  margin: var(--opt-space-2) 0 0;
  line-height: var(--opt-leading-normal);
}

.opt-card__body {
  font-family: var(--opt-font-body);
  font-size: var(--opt-text-lg);
  color: var(--opt-ink-mid);
  line-height: var(--opt-leading-normal);
}

.opt-card__divider {
  height: 1px;
  background: var(--opt-rule-soft);
  margin: var(--opt-space-5) 0;
  border: none;
}

.opt-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--opt-space-3);
  margin-top: var(--opt-space-5);
}

/* -----------------------------------------
   KPI dentro do card
   ----------------------------------------- */
.opt-kpi {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--opt-space-3);
  padding: var(--opt-space-5);
  background: var(--opt-paper-soft);
  border-radius: var(--opt-radius-lg);
}

.opt-kpi__label {
  font-family: var(--opt-font-body);
  font-size: var(--opt-text-2xs);
  font-weight: var(--opt-weight-medium);
  letter-spacing: var(--opt-tracking-wider);
  text-transform: uppercase;
  color: var(--opt-ink-muted);
  display: block;
  margin-bottom: var(--opt-space-1);
}

.opt-kpi__value {
  font-family: var(--opt-font-display);
  font-weight: var(--opt-weight-black);
  font-size: var(--opt-text-4xl);
  letter-spacing: var(--opt-tracking-tighter);
  color: var(--opt-ink);
  line-height: 1;
  display: block;
}

.opt-kpi__suffix {
  font-family: var(--opt-font-body);
  font-size: var(--opt-text-md);
  font-weight: var(--opt-weight-medium);
  color: var(--opt-ink-muted);
  padding-bottom: 4px;
}

.opt-kpi__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--opt-space-1);
  font-family: var(--opt-font-body);
  font-size: var(--opt-text-sm);
  font-weight: var(--opt-weight-semibold);
}

.opt-kpi__trend--up   { color: var(--opt-green); }
.opt-kpi__trend--down { color: var(--opt-error); }
.opt-kpi__trend--flat { color: var(--opt-ink-muted); }