/* ============================================================
   Calculadora Soros Pro — CSS v1.2.0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

/* ── RESET ───────────────────────────────────────────────── */
.cmg-wrap, .cmg-wrap * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ══════════════════════════════════════════════════════════
   TEMA ESCURO — valores explícitos em cada elemento
══════════════════════════════════════════════════════════ */

/* Container raiz */
.cmg-wrap {
    font-family:  'Sora', sans-serif;
    font-size:    16px;
    line-height:  1.5;
    color:        #e8edf5;
    max-width:    760px;
    margin:       0 auto;
    padding:      0 0 2.5rem;
}

/* Card principal */
.cmg-wrap .cmg-card {
    background-color: #161b27;
    border:           1px solid #2a3347;
    border-radius:    14px;
    overflow:         hidden;
    box-shadow:       0 24px 64px rgba(0,0,0,.55), 0 0 40px rgba(0,212,255,.08);
    position:         relative;
}

.cmg-wrap .cmg-card::before {
    content:    '';
    position:   absolute;
    inset:      0 0 auto;
    height:     3px;
    background: linear-gradient(90deg, #7c3aed, #00d4ff, #10d98e);
}

/* Header */
.cmg-wrap .cmg-header {
    background-color: #161b27;
    border-bottom:    1px solid #2a3347;
    text-align:       center;
    padding:          2.5rem 2rem 1.75rem;
}

.cmg-wrap .cmg-header__icon {
    font-size:     2.25rem;
    margin-bottom: .625rem;
    display:       block;
}

.cmg-wrap .cmg-title {
    font-size:    clamp(1.25rem, 4vw, 1.7rem);
    font-weight:  800;
    letter-spacing: -.03em;
    line-height:  1.2;
    margin-bottom: .5rem;
    color:        #e8edf5;
}

.cmg-wrap .cmg-title .cmg-soros {
    background:              linear-gradient(135deg, #00d4ff, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

.cmg-wrap .cmg-subtitle {
    font-size:  .88rem;
    color:      #64748b;
    font-weight: 400;
    line-height: 1.6;
}

/* Body */
.cmg-wrap .cmg-body {
    background-color: #161b27;
    padding:          1.875rem 2rem 2rem;
}

/* Labels */
.cmg-wrap .cmg-label {
    display:        flex;
    align-items:    center;
    gap:            .45rem;
    font-size:      .72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color:          #64748b;
    margin-bottom:  .45rem;
}

.cmg-wrap .cmg-label__icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           20px;
    height:          20px;
    background:      rgba(0,212,255,.12);
    border:          1px solid rgba(0,212,255,.25);
    border-radius:   5px;
    font-size:       .68rem;
    font-weight:     700;
    color:           #00d4ff;
    font-family:     'DM Mono', monospace;
}

/* Inputs */
.cmg-wrap .cmg-input {
    width:           100%;
    background-color: #1e2535;
    border:          1.5px solid #2a3347;
    border-radius:   9px;
    padding:         .8rem 1rem;
    font-size:       1rem;
    font-family:     'DM Mono', monospace;
    color:           #e8edf5;
    outline:         none;
    -webkit-appearance: none;
    appearance:      none;
    transition:      border-color .2s, box-shadow .2s;
    display:         block;
}

.cmg-wrap .cmg-input:focus {
    border-color: #00d4ff;
    box-shadow:   0 0 0 3px rgba(0,212,255,.12);
}

.cmg-wrap .cmg-input::placeholder { color: #64748b; }
.cmg-wrap .cmg-input::-webkit-inner-spin-button,
.cmg-wrap .cmg-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Campos grid */
.cmg-wrap .cmg-fields {
    display:       grid;
    gap:           1.125rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 540px) {
    .cmg-wrap .cmg-fields                    { grid-template-columns: 1fr 1fr; }
    .cmg-wrap .cmg-fields .cmg-field:last-child { grid-column: span 2; }
}

/* Botões */
.cmg-wrap .cmg-actions {
    display:   flex;
    gap:       .75rem;
    flex-wrap: wrap;
}

.cmg-wrap .cmg-btn {
    flex:           1;
    min-width:      130px;
    padding:        .875rem 1.25rem;
    border-radius:  9px;
    font-family:    'Sora', sans-serif;
    font-size:      .88rem;
    font-weight:    700;
    letter-spacing: .02em;
    cursor:         pointer;
    border:         none;
    transition:     transform .2s, box-shadow .2s;
}

.cmg-wrap .cmg-btn--primary {
    background: linear-gradient(135deg, #7c3aed, #00d4ff);
    color:      #ffffff;
    box-shadow: 0 4px 18px rgba(0,212,255,.22);
}

.cmg-wrap .cmg-btn--primary:hover {
    transform:  translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,212,255,.32);
}
.cmg-wrap .cmg-btn--primary:active { transform: translateY(0); }

.cmg-wrap .cmg-btn--secondary {
    background-color: #1e2535;
    color:            #a0aec0;
    border:           1.5px solid #2a3347;
}

.cmg-wrap .cmg-btn--secondary:hover {
    border-color: #00d4ff;
    color:        #00d4ff;
}

/* Resultados */
.cmg-wrap .cmg-results {
    margin-top: 1.875rem;
    animation:  cmgFadeIn .35s ease;
}

@keyframes cmgFadeIn {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Cards de resumo */
.cmg-wrap .cmg-summary {
    display:               grid;
    grid-template-columns: repeat(3,1fr);
    gap:                   .875rem;
    margin-bottom:         1.5rem;
}

@media (max-width: 480px) {
    .cmg-wrap .cmg-summary { grid-template-columns: 1fr; }
}

.cmg-wrap .cmg-summary__card {
    background-color: #1e2535;
    border:           1px solid #2a3347;
    border-radius:    10px;
    padding:          1rem;
    text-align:       center;
}

.cmg-wrap .cmg-summary__card--highlight { border-color: rgba(0,212,255,.4); }
.cmg-wrap .cmg-summary__card--growth    { border-color: rgba(16,217,142,.4); }

.cmg-wrap .cmg-summary__label {
    display:        block;
    font-size:      .65rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:          #64748b;
    margin-bottom:  .45rem;
}

.cmg-wrap .cmg-summary__value {
    display:     block;
    font-family: 'DM Mono', monospace;
    font-size:   1.15rem;
    font-weight: 500;
    color:       #ffffff;
}

.cmg-wrap .cmg-summary__card--highlight .cmg-summary__value { color: #00d4ff; }
.cmg-wrap .cmg-summary__card--growth    .cmg-summary__value { color: #10d98e; }

/* Tabela */
.cmg-wrap .cmg-table-wrap {
    overflow-x:    auto;
    border-radius: 10px;
    border:        1px solid #2a3347;
    margin-bottom: 1.25rem;
}

.cmg-wrap .cmg-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .86rem;
}

.cmg-wrap .cmg-table thead tr {
    background-color: #1e2535;
    border-bottom:    2px solid #2a3347;
}

.cmg-wrap .cmg-table th {
    padding:        .8rem 1rem;
    text-align:     left;
    font-size:      .68rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color:          #64748b;
    white-space:    nowrap;
}

.cmg-wrap .cmg-table tbody tr { border-bottom: 1px solid #2a3347; }
.cmg-wrap .cmg-table tbody tr:last-child { border-bottom: none; }
.cmg-wrap .cmg-table tbody tr:hover { background-color: rgba(255,255,255,.03); }

.cmg-wrap .cmg-table td {
    padding:     .8rem 1rem;
    font-family: 'DM Mono', monospace;
    color:       #a0aec0;
    font-size:   .86rem;
}

.cmg-wrap .cmg-table__badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           1.875rem;
    height:          1.875rem;
    border-radius:   7px;
    font-size:       .72rem;
    font-weight:     700;
    font-family:     'DM Mono', monospace;
    background:      linear-gradient(135deg, #7c3aed, #00d4ff);
    color:           #ffffff;
}

.cmg-wrap .cmg-table .td-payout { color: #64748b; }
.cmg-wrap .cmg-table .td-lucro  { color: #10d98e; font-weight: 600; }
.cmg-wrap .cmg-table .td-total  { color: #ffffff; font-weight: 600; }

/* Disclaimer */
.cmg-wrap .cmg-disclaimer {
    display:          flex;
    gap:              .75rem;
    align-items:      flex-start;
    background-color: rgba(244,63,94,.06);
    border:           1px solid rgba(244,63,94,.2);
    border-radius:    9px;
    padding:          .875rem 1.125rem;
}

.cmg-wrap .cmg-disclaimer__icon { font-size:1rem; flex-shrink:0; margin-top:.1rem; }

.cmg-wrap .cmg-disclaimer p {
    font-size:   .78rem;
    line-height: 1.65;
    color:       #64748b;
}

/* Toggle de tema */
.cmg-wrap .cmg-theme-toggle {
    display:         flex;
    justify-content: flex-end;
    margin-bottom:   .875rem;
}

.cmg-wrap .cmg-theme-toggle__btn {
    display:       inline-flex;
    align-items:   center;
    gap:           .5rem;
    background-color: #161b27;
    border:        1.5px solid #2a3347;
    border-radius: 999px;
    padding:       .4rem .9rem .4rem .65rem;
    font-family:   'Sora', sans-serif;
    font-size:     .78rem;
    font-weight:   600;
    color:         #64748b;
    cursor:        pointer;
    transition:    border-color .2s, color .2s;
}

.cmg-wrap .cmg-theme-toggle__btn:hover {
    border-color: #00d4ff;
    color:        #00d4ff;
}

.cmg-wrap .cmg-theme-toggle__track {
    width:         32px;
    height:        18px;
    background:    #2a3347;
    border-radius: 999px;
    position:      relative;
    flex-shrink:   0;
    transition:    background .25s;
}

.cmg-wrap .cmg-theme-toggle__track::after {
    content:       '';
    position:      absolute;
    top:3px; left:3px;
    width:12px; height:12px;
    background:    #64748b;
    border-radius: 50%;
    transition:    transform .25s, background .25s;
}

.cmg-wrap .cmg-theme-toggle__icon { font-size:1rem; line-height:1; }

/* ══════════════════════════════════════════════════════════
   TEMA CLARO — sobrescreve tudo explicitamente
══════════════════════════════════════════════════════════ */

.cmg-wrap.cmg--light { color: #1a202c; }

.cmg-wrap.cmg--light .cmg-card {
    background-color: #ffffff;
    border-color:     #d1d9ee;
    box-shadow:       0 12px 40px rgba(0,0,0,.1);
}

.cmg-wrap.cmg--light .cmg-header {
    background-color: #ffffff;
    border-color:     #d1d9ee;
}

.cmg-wrap.cmg--light .cmg-title { color: #1a202c; }

.cmg-wrap.cmg--light .cmg-title .cmg-soros {
    background:              linear-gradient(135deg, #0369a1, #6d28d9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

.cmg-wrap.cmg--light .cmg-subtitle { color: #6b7280; }

.cmg-wrap.cmg--light .cmg-body { background-color: #ffffff; }

.cmg-wrap.cmg--light .cmg-label { color: #6b7280; }

.cmg-wrap.cmg--light .cmg-label__icon {
    background:  rgba(3,105,161,.1);
    border-color: rgba(3,105,161,.25);
    color:       #0369a1;
}

.cmg-wrap.cmg--light .cmg-input {
    background-color: #eef2fb;
    border-color:     #d1d9ee;
    color:            #1a202c;
}

.cmg-wrap.cmg--light .cmg-input:focus {
    border-color: #0369a1;
    box-shadow:   0 0 0 3px rgba(3,105,161,.12);
}

.cmg-wrap.cmg--light .cmg-input::placeholder { color: #9ca3af; }

.cmg-wrap.cmg--light .cmg-btn--secondary {
    background-color: #eef2fb;
    border-color:     #d1d9ee;
    color:            #374151;
}

.cmg-wrap.cmg--light .cmg-btn--secondary:hover {
    border-color: #0369a1;
    color:        #0369a1;
}

.cmg-wrap.cmg--light .cmg-summary__card {
    background-color: #eef2fb;
    border-color:     #d1d9ee;
}

.cmg-wrap.cmg--light .cmg-summary__card--highlight { border-color: rgba(3,105,161,.35); }
.cmg-wrap.cmg--light .cmg-summary__card--growth    { border-color: rgba(4,120,87,.35); }

.cmg-wrap.cmg--light .cmg-summary__label { color: #6b7280; }

.cmg-wrap.cmg--light .cmg-summary__value       { color: #111827; }
.cmg-wrap.cmg--light .cmg-summary__card--highlight .cmg-summary__value { color: #0369a1; }
.cmg-wrap.cmg--light .cmg-summary__card--growth    .cmg-summary__value { color: #047857; }

.cmg-wrap.cmg--light .cmg-table-wrap { border-color: #d1d9ee; }

.cmg-wrap.cmg--light .cmg-table thead tr {
    background-color: #eef2fb;
    border-color:     #d1d9ee;
}

.cmg-wrap.cmg--light .cmg-table th { color: #6b7280; }

.cmg-wrap.cmg--light .cmg-table tbody tr { border-color: #e5eaf5; }
.cmg-wrap.cmg--light .cmg-table tbody tr:hover { background-color: rgba(0,0,0,.025); }

.cmg-wrap.cmg--light .cmg-table td { color: #374151; }

.cmg-wrap.cmg--light .cmg-table .td-payout { color: #9ca3af; }
.cmg-wrap.cmg--light .cmg-table .td-lucro  { color: #047857; }
.cmg-wrap.cmg--light .cmg-table .td-total  { color: #111827; }

.cmg-wrap.cmg--light .cmg-disclaimer {
    background-color: rgba(190,18,60,.04);
    border-color:     rgba(190,18,60,.15);
}
.cmg-wrap.cmg--light .cmg-disclaimer p { color: #6b7280; }

/* Toggle claro */
.cmg-wrap.cmg--light .cmg-theme-toggle__btn {
    background-color: #ffffff;
    border-color:     #d1d9ee;
    color:            #6b7280;
}

.cmg-wrap.cmg--light .cmg-theme-toggle__btn:hover {
    border-color: #0369a1;
    color:        #0369a1;
}

.cmg-wrap.cmg--light .cmg-theme-toggle__track { background: #0369a1; }
.cmg-wrap.cmg--light .cmg-theme-toggle__track::after {
    transform:  translateX(14px);
    background: #ffffff;
}

/* ── RESPONSIVO ─────────────────────────────────────────── */
@media (max-width: 480px) {
    .cmg-wrap .cmg-header  { padding: 1.875rem 1rem 1.375rem; }
    .cmg-wrap .cmg-body    { padding: 1.375rem 1rem 1.5rem; }
    .cmg-wrap .cmg-table th,
    .cmg-wrap .cmg-table td { padding: .7rem .625rem; }
    .cmg-wrap .cmg-btn     { font-size: .82rem; padding: .8rem 1rem; }
}