/* ============================================================
   Optma DS · Proposta Card · v0.1
   Card específico da Plataforma Comercial.
   Estende .opt-card com regras próprias do contexto de proposta.
============================================================ */

.opt-proposta {
  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);

  display: flex;
  flex-direction: column;
  gap: var(--opt-space-5);

  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);
}

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

/* Estado · rascunho */
.opt-proposta--rascunho {
  background: transparent;
  border: 1.5px dashed #C9C8BC;
  box-shadow: none;
}

.opt-proposta--rascunho:hover {
  border-color: var(--opt-ink-muted);
  box-shadow: var(--opt-shadow-soft);
  transform: translateY(-2px);
}

/* Estado · aceita (borda gradient verde) */
.opt-proposta--aceita {
  background: var(--opt-paper);
  border-color: transparent;
  box-shadow: var(--opt-shadow-green);
}

.opt-proposta--aceita::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;
}

/* Header */
.opt-proposta__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--opt-space-4);
}

.opt-proposta__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-1);
}

.opt-proposta__cliente {
  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;
}

/* Bloco de serviço */
.opt-proposta__servico {
  border-top: 1px solid var(--opt-rule-soft);
  padding-top: var(--opt-space-5);
}

.opt-proposta__servico-nome {
  font-family: var(--opt-font-display);
  font-weight: var(--opt-weight-bold);
  font-size: var(--opt-text-md);
  color: var(--opt-ink);
  margin: 0 0 var(--opt-space-1);
  letter-spacing: var(--opt-tracking-tight);
}

.opt-proposta__servico-desc {
  font-family: var(--opt-font-body);
  font-size: var(--opt-text-base);
  color: var(--opt-ink-mid);
  margin: 0;
  line-height: var(--opt-leading-normal);
}

/* Valor (reusa .opt-kpi do componente Card) */
.opt-proposta__valor {
  background: var(--opt-paper-soft);
  border-radius: var(--opt-radius-lg);
  padding: var(--opt-space-4) var(--opt-space-5);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--opt-space-3);
  transition: background var(--opt-duration-slow);
}

.opt-proposta--aceita .opt-proposta__valor {
  background: linear-gradient(135deg, rgba(52, 150, 59, 0.10) 0%, rgba(93, 226, 111, 0.06) 100%);
}

.opt-proposta__valor-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-proposta__valor-numero {
  font-family: var(--opt-font-display);
  font-weight: var(--opt-weight-black);
  font-size: var(--opt-text-5xl);
  letter-spacing: var(--opt-tracking-tighter);
  color: var(--opt-ink);
  line-height: 1;
  display: block;
}

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

/* Lista de entregáveis */
.opt-proposta__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--opt-space-3);
}

.opt-proposta__lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--opt-space-3);
  font-family: var(--opt-font-body);
  font-size: var(--opt-text-base);
  color: var(--opt-ink-mid);
  line-height: var(--opt-leading-normal);
}

.opt-proposta__lista li::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background-color: var(--opt-green);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 14px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 14px no-repeat;
}

/* Footer com infos finais + ações */
.opt-proposta__footer {
  border-top: 1px solid var(--opt-rule-soft);
  padding-top: var(--opt-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--opt-space-4);
}

.opt-proposta__infos {
  display: flex;
  flex-direction: column;
  gap: var(--opt-space-1);
  font-family: var(--opt-font-body);
  font-size: var(--opt-text-sm);
  color: var(--opt-ink-muted);
}

.opt-proposta__infos-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.opt-proposta__infos-row strong {
  color: var(--opt-ink);
  font-weight: var(--opt-weight-semibold);
}

.opt-proposta__actions {
  display: flex;
  gap: var(--opt-space-2);
}

.opt-proposta__actions .opt-btn {
  flex: 1;
}