/* Anta · Simulador de inversión — estilos.
 * Todo está acotado bajo ".anta-sim" y las clases llevan prefijo "as-", para no tocar ni heredar
 * estilos del resto de la web. Fuente: Manrope (opcional; si no se carga, usa Segoe UI / Arial).
 * Colores y fuente se cambian en las variables de la primera regla. */

.anta-sim{
  --as-navy:#2B3840; --as-steel:#40738F; --as-teal:#87CCC9; --as-red:#C0504D;
  --as-steel-08:#EEF3F6; --as-bg:#FFFFFF; --as-panel:#F7F8F8; --as-line:#E6E7E6;
  --as-text:#2B3840; --as-muted:#6F7B82; --as-input:#D5D8D8;
  --as-font:'Manrope','Segoe UI',-apple-system,Arial,sans-serif;
  display:block; width:100%; max-width:100%; margin:0; padding:0;
  color:var(--as-text); font:400 14px/1.45 var(--as-font); letter-spacing:normal; text-align:left; text-transform:none;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
.anta-sim *,.anta-sim *::before,.anta-sim *::after{box-sizing:border-box}
.anta-sim .as-num{font-variant-numeric:tabular-nums}

/* Disposición: una columna por defecto; dos columnas cuando el contenedor es ancho (data-size="l"). */
.anta-sim .as-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start}
.anta-sim[data-size="l"] .as-grid{grid-template-columns:340px minmax(0,1fr)}

/* Panel de controles */
.anta-sim .as-controls{background:var(--as-panel); border:1px solid var(--as-line); border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:20px; margin:0}
.anta-sim .as-field{display:flex; flex-direction:column; gap:8px; margin:0; padding:0; border:0}
.anta-sim .as-field label{display:block; margin:0; padding:0; font:700 12.5px/1.3 var(--as-font); color:var(--as-text); text-transform:none; letter-spacing:normal}
.anta-sim .as-inp{position:relative; margin:0}
.anta-sim .as-inp input,
.anta-sim .as-field select{
  display:block; width:100%; max-width:none; height:auto; min-height:0; margin:0; box-shadow:none; text-transform:none; letter-spacing:normal;
  font:700 18px/1.3 var(--as-font); color:var(--as-text); padding:10px 38px 10px 12px;
  border:1px solid var(--as-input); border-radius:10px; background-color:#fff; font-variant-numeric:tabular-nums;
}
.anta-sim .as-field select{font-size:15px; padding-right:12px}
.anta-sim .as-inp input:focus,
.anta-sim .as-field select:focus{outline:2px solid var(--as-teal); outline-offset:1px; border-color:var(--as-steel)}
.anta-sim .as-unit{position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--as-muted); font:700 18px/1 var(--as-font); pointer-events:none}
.anta-sim .as-chips{display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0}
.anta-sim .as-chip{
  all:unset; box-sizing:border-box; cursor:pointer; font:600 12px/1.3 var(--as-font); padding:5px 10px; border-radius:999px;
  border:1px solid var(--as-input); background:#fff; color:var(--as-text); text-transform:none; letter-spacing:normal;
}
.anta-sim .as-chip:hover{border-color:var(--as-steel)}
.anta-sim .as-chip:focus-visible{outline:2px solid var(--as-steel); outline-offset:2px}
.anta-sim .as-chip.on{background:var(--as-steel); border-color:var(--as-steel); color:#fff}
.anta-sim .as-fine{margin:0; padding:0; font:400 11.5px/1.5 var(--as-font); color:var(--as-muted); text-transform:none; letter-spacing:normal}

/* Resultado */
.anta-sim .as-card{border:1px solid var(--as-line); border-radius:14px; padding:20px; background:var(--as-bg); margin:0; min-width:0}
.anta-sim .as-result{display:flex; flex-direction:column; gap:16px}
.anta-sim .as-headline{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px}
.anta-sim .as-eyebrow{font:700 11px/1.3 var(--as-font); letter-spacing:.09em; text-transform:uppercase; color:var(--as-muted)}
.anta-sim .as-big{font:800 36px/1 var(--as-font); letter-spacing:-.03em; margin:4px 0 0; font-variant-numeric:tabular-nums}
.anta-sim[data-size="m"] .as-big{font-size:44px}
.anta-sim[data-size="l"] .as-big{font-size:52px}
.anta-sim .as-gain{font:700 15px/1.4 var(--as-font); margin-top:6px; font-variant-numeric:tabular-nums}
.anta-sim .as-pos{color:var(--as-steel)}
.anta-sim .as-neg{color:var(--as-red)}
.anta-sim .as-legend{display:flex; flex-wrap:wrap; gap:6px 14px; font:400 12px/1.4 var(--as-font); color:var(--as-muted)}
.anta-sim .as-legend i{display:inline-block; width:14px; height:3px; border-radius:2px; vertical-align:middle; margin-right:6px}
.anta-sim .as-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.anta-sim[data-size="s"] .as-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.anta-sim .as-stat{background:var(--as-panel); border-radius:10px; padding:11px 12px; margin:0}
.anta-sim .as-stat .as-l{font:600 11px/1.3 var(--as-font); color:var(--as-muted)}
.anta-sim .as-stat .as-v{font:800 17px/1.3 var(--as-font); margin-top:2px; font-variant-numeric:tabular-nums}

/* Gráfico */
.anta-sim .as-chart{position:relative; margin:0}
.anta-sim .as-chart svg{width:100%; height:auto; display:block; overflow:visible}
.anta-sim .as-tick{font:400 10.5px var(--as-font); fill:var(--as-muted)}
.anta-sim .as-tip{
  position:absolute; left:0; top:0; pointer-events:none; background:var(--as-navy); color:#fff; border-radius:8px; padding:8px 10px;
  font:400 12px/1.5 var(--as-font); white-space:nowrap; transform:translate(-50%,-100%); opacity:0; transition:opacity .1s;
  box-shadow:0 4px 14px rgba(43,56,64,.18); z-index:2; text-align:left;
}
.anta-sim .as-tip b{font-weight:700}
.anta-sim .as-sw{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; box-shadow:0 0 0 1.5px #fff}

.anta-sim .as-error{border:1px solid var(--as-line); border-radius:12px; padding:16px; color:var(--as-red); font:600 13px/1.4 var(--as-font)}

@media (prefers-reduced-motion:reduce){ .anta-sim *{transition:none!important} }

/* Igualar el ancho de RV Global con RF 0-3 */

html,
body {
    margin: 0;
    padding: 0;
}

body {
    padding: 24px 16px 56px;
    box-sizing: border-box;
}

.wrap {
    width: 100%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}