/* =========================================================
   COMEXCHANGE SIMPLE – CSS CUSTOMIZÁVEL (Design System)
   Troque apenas as variáveis abaixo para mudar o tema.
   ========================================================= */

.cx-simple-wrap{
  /* ---------- Layout ---------- */
  --cx-max-width: 780px;
  --cx-radius-card: 16px;
  --cx-radius-control: 12px;
  --cx-radius-pill: 999px;

  --cx-pad-card-x: 18px;
  --cx-pad-card-y: 18px;

  --cx-gap-tabs: 8px;
  --cx-gap-grid: 12px;
  --cx-gap-actions: 10px;

  /* ---------- Tipografia ---------- */
  --cx-font-title: 20px;
  --cx-font-subtitle: 13px;
  --cx-font-label: 12px;
  --cx-font-input: 14px;
  --cx-font-meta: 11px;

  --cx-fw-title: 700;
  --cx-fw-label: 700;
  --cx-fw-btn: 700;

  /* ======================================================
     TEMA (ESCOLHA UMA PALETA)
     1) LIGHT (padrão atual)
     2) DARK COMEXCHANGE (fundo azul #0b1725)
     Para ativar o Dark: comente o bloco LIGHT e descomente DARK.
     ====================================================== */

  /* ---------- LIGHT (ATIVO AGORA) ---------- /
  --cx-bg: #ffffff;
  --cx-surface: #ffffff;
  --cx-surface-soft: rgba(0,0,0,.02);
  --cx-surface-softer: rgba(0,0,0,.03);
  --cx-surface-strong: rgba(0,0,0,.06);

  --cx-text: #0b1220;
  --cx-text-secondary: rgba(0,0,0,.78);
  --cx-text-muted: rgba(0,0,0,.75);

  --cx-border: rgba(0,0,0,.08);
  --cx-border-strong: rgba(0,0,0,.18);
  --cx-border-focus: rgba(0,0,0,.40);

  --cx-shadow: 0 8px 24px rgba(0,0,0,.06);

  --cx-input-bg: #ffffff;
  --cx-input-text: #0b1220;
  --cx-badge-bg: rgba(0,0,0,.03);
  --cx-badge-text: #0b1220;

  --cx-btn-bg: #ffffff;
  --cx-btn-text: #0b1220;
  --cx-btn-border: rgba(0,0,0,.18);

  --cx-btn-primary-bg: rgba(0,0,0,.06);
  --cx-btn-primary-border: rgba(0,0,0,.40);
  --cx-btn-primary-text: #0b1220;

  --cx-alert-bg: rgba(255,0,0,.06);
  --cx-alert-border: rgba(255,0,0,.25);
  --cx-alert-text: #7f1d1d;

  */ ---------- DARK COMEXCHANGE (descomente para usar) ----------
  --cx-bg: #0b1725;
  --cx-surface: rgba(255,255,255,.06);
  --cx-surface-soft: rgba(255,255,255,.04);
  --cx-surface-softer: rgba(255,255,255,.03);
  --cx-surface-strong: rgba(255,255,255,.08);

  --cx-text: #e5e7eb;
  --cx-text-secondary: rgba(229,231,235,.85);
  --cx-text-muted: rgba(229,231,235,.72);

  --cx-border: rgba(255,255,255,.12);
  --cx-border-strong: rgba(255,255,255,.18);
  --cx-border-focus: rgba(255,255,255,.35);

  --cx-shadow: 0 10px 28px rgba(0,0,0,.35);

  --cx-input-bg: #ffffff;
  --cx-input-text: #0b1220;
  --cx-badge-bg: rgba(255,255,255,.06);
  --cx-badge-text: #e5e7eb;

  --cx-btn-bg: rgba(255,255,255,.06);
  --cx-btn-text: #e5e7eb;
  --cx-btn-border: rgba(255,255,255,.18);

  --cx-btn-primary-bg: rgba(201,164,77,.22);    // dourado suave
  --cx-btn-primary-border: rgba(201,164,77,.55);
  --cx-btn-primary-text: #f8fafc;

  --cx-alert-bg: rgba(248,113,113,.12);
  --cx-alert-border: rgba(248,113,113,.35);
  --cx-alert-text: #fecaca;
  ------------------------------------------------------------ /
}

/* ===================== Base / Container ===================== */
.cx-simple-wrap{
  max-width: var(--cx-max-width);
  margin: 0 auto;
  color: var(--cx-text);
}

/* Card principal */
.cx-simple-card{
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-card);
  padding: var(--cx-pad-card-y) var(--cx-pad-card-x) 14px;
  background: var(--cx-bg);
  box-shadow: var(--cx-shadow);
}

/* Header */
.cx-simple-header{ margin-bottom: 14px; }

.cx-simple-title{
  font-size: var(--cx-font-title);
  line-height: 1.2;
  font-weight: var(--cx-fw-title);
  color: var(--cx-text);
}

.cx-simple-subtitle{
  margin-top: 6px;
  font-size: var(--cx-font-subtitle);
  opacity: 1; /* controlado via cor */
  line-height: 1.35;
  color: var(--cx-text-secondary);
}

/* Tabs */
.cx-simple-tabs{ display:flex; gap: var(--cx-gap-tabs); margin: 14px 0 10px; }

.cx-tab{
  border: 1px solid var(--cx-border-strong);
  background: transparent;
  border-radius: var(--cx-radius-pill);
  padding: 8px 12px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  color: var(--cx-text-secondary);
}

.cx-tab.is-active{
  background: var(--cx-surface-strong);
  color: var(--cx-text);
}

/* Form */
.cx-simple-form{ margin-top: 10px; }

.cx-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cx-gap-grid);
  margin-top: 12px;
}

.cx-field label{
  display:block;
  font-size: var(--cx-font-label);
  font-weight: var(--cx-fw-label);
  margin-bottom: 6px;
  color: var(--cx-text);
}

/* Inputs / Selects */
.cx-select,
.cx-input{
  width:100%;
  border: 1px solid var(--cx-border-strong);
  border-radius: var(--cx-radius-control);
  padding: 10px 12px;
  font-size: var(--cx-font-input);
  outline: none;
  background: var(--cx-input-bg);
  color: var(--cx-input-text);
}

.cx-select:focus,
.cx-input:focus{
  border-color: var(--cx-border-focus);
}

/* Campo calculado (readonly) – mantém leveza */
.cx-input[readonly]{
  background: #f1f5f9; /* neutro claro */
  color: #475569;
}

/* Inline + Badge */
.cx-inline{ display:flex; gap: 10px; align-items:center; }

.cx-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  padding: 10px 10px;
  border-radius: var(--cx-radius-control);
  border: 1px solid var(--cx-border-strong);
  font-weight: 800;
  background: var(--cx-badge-bg);
  color: var(--cx-badge-text);
}

/* Actions / Buttons */
.cx-actions{ display:flex; gap: var(--cx-gap-actions); flex-wrap:wrap; margin-top: 14px; }

.cx-btn{
  border-radius: var(--cx-radius-control);
  padding: 10px 14px;
  border: 1px solid var(--cx-btn-border);
  background: var(--cx-btn-bg);
  color: var(--cx-btn-text);
  font-weight: var(--cx-fw-btn);
  cursor: pointer;
}

.cx-btn[disabled]{ opacity:.45; cursor:not-allowed; }

.cx-btn-primary{
  border-color: var(--cx-btn-primary-border);
  background: var(--cx-btn-primary-bg);
  color: var(--cx-btn-primary-text);
}

/* Resultados */
.cx-result{
  margin-top: 14px;
  border-top: 1px solid var(--cx-border);
  padding-top: 14px;
}

.cx-result-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cx-result-grid div{
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-control);
  padding: 10px 12px;
  background: var(--cx-surface-soft);
}

.cx-result-grid span{
  display:block;
  font-size: 11px;
  opacity: 1;
  color: var(--cx-text-muted);
}

.cx-result-grid strong{
  display:block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--cx-text);
}

.cx-total{
  grid-column: 1 / -1;
  background: var(--cx-surface-strong) !important;
}

/* Footnote */
.cx-footnote{
  margin-top: 10px;
  font-size: var(--cx-font-meta);
  opacity: 1;
  line-height: 1.35;
  color: var(--cx-text-muted);
}

/* Alert */
.cx-alert{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--cx-radius-control);
  border: 1px solid var(--cx-alert-border);
  background: var(--cx-alert-bg);
  color: var(--cx-alert-text);
  font-size: 13px;
  line-height: 1.35;
}

/* Hint */
.cx-hint{
  margin-top: 6px;
  font-size: var(--cx-font-meta);
  opacity: 1;
  color: var(--cx-text-muted);
}

/* Responsivo */
@media (max-width: 640px){
  .cx-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   Currency flag (mantido; ajustado para compatibilidade)
   ========================================================= */

.cx-simple-wrap .cx-currency{
  position: relative;
}
.cx-simple-wrap .cx-currency .cx-select{
  padding-left: 44px !important;
}
.cx-simple-wrap .cx-currency .cx-flag{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
}