:root {
    --color-primario: #FFAB4D;
    --color-texto-principal: #062323;
    --color-texto-secundario: #00264080;
    --color-fondo-azul: #E2EBF8;
    --color-fondo-input: #F1F4F8;
    --color-verde-exito: #00875A;
}

@font-face {
    font-family: 'Nan Nerf Sans';
    src: url('./fonts/NaNSerfSans/NaNSerfSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nan Nerf Sans';
    src: url('./fonts/NaNSerfSans/NaNSerfSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

body { color: var(--color-texto-principal); font-family: "Nan Nerf Sans", sans-serif !important; font-size: 14px; background-color: #F2F1F0; }

.card {
    border: none;   
    border-radius: 0.5rem; 
}

.card-body{
    padding: 1rem;
    color: #062323;
}
#titleForm{
  font-size: 16px;
  font-weight: 400;
}

.sim-title{
  font-size: 54px;
  font-family: 'Nan Nerf Sans', sans-serif;
  font-weight: 300;
  color: #062323;
}
.sim-subtitle{
  font-size: 18px;  
  font-family: 'Nan Nerf Sans', sans-serif;
  font-weight: 400;
  color: #575E5E;
}

.form-control.is-invalid, .was-validated .form-control:invalid{
  background-image: none !important;
  padding-right: 0 !important;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, p{
  color: var(--color-texto-principal);
}

.invalid-feedback{
  font-size: 10px;
  color: #C93532;
  min-height: 15px;
}






/* ===== Simulator (Bootstrap + custom) ===== */

#graphGainLabel{
    font-size: 20px;
    color: #062323;
}

#total-estimado{
  font-size: 24px;
  line-height: 32px;
}

#btnInvest{
  background: #FFBA1F;
  color: #062323;
  width: 100%;
  padding: .4rem 1rem .2rem 1rem;
  font-weight:400;
  font-size: 14px;
  border-radius: 16px;
  height: 40px;
  border: none;  
}

#amountInput{
  font-size: 32px;
  border: none;
  color: #062323;
}

#amountInput::placeholder, #amountInput:focus::placeholder, #amountInput::-webkit-input-placeholder  {
  color: #c1c8c8;
  opacity: 1;
}


#amountInput:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent;
}

.sim-section{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.sim-card{
  border-radius:.5rem;
  border:0;
  background: var(--mn-background-secondary-dark, #0b2230);
  color:#fff;
}

.card-body.info{  
  border: 2px solid #FFFFFF;  
  border-radius: 0.5rem;
}

.card-body.estimed{
  background: #fff7e8;
  border: 2px solid #FFAB4D;
  border-radius: 0.5rem;
}

.sim-controls .card-body{
  padding: 1rem;
}

.sim-line{
  width:100%;
  height:2px;
  background: var(--mn-neutral, rgba(255,255,255,.2));
  margin: 1rem 0;
}

.sim-btns{
  width:100%;
  background: #F3F2F2;
  border-radius:1rem;
  padding: 0.5rem;
  gap:0.5rem;
}

.sim-tab{
  width:100%;  
  height: 40px;
  text-decoration:none;
  color: #062323;
  border-bottom:4px solid transparent;
  padding: .3rem 0rem .125rem 0rem;
  font-weight:400;
  font-size: 14px;
  border-radius: 16px;
}

.sim-tab:not(.sim-tab--selected):hover{
  text-decoration:none;
  background: rgba(150,150,150,0.1);
  color: #062323;
}

.sim-tab--selected{
  background: #FFBA1F;  
}

.sim-tab--selected:hover{
  background: #FFBA1F;  
  color: #062323;
}

.sim-graph .card-body{
  padding: 1.5rem;
}

.sim-gcontent{
  display:flex;
  align-items:flex-end;
  justify-content: start;
  gap:2rem;
  width:100%;
  background-color: rgba(255,255,255,0.08);
  border-radius:.5rem;
  margin: 1rem 0;
  padding: 1rem;
  overflow-x:auto;
}

/* eje Y */
.sim-y{  
  flex-direction:column;
  text-align:right;
  margin-right:1rem;
  font-weight:500;
  white-space:nowrap;
  display: none;
}

.sim-y .label{
  opacity:.9;
  font-weight:500;
  font-size: 12px;
  margin-top: .5rem;
}

.sim-y .totalLabel{
  padding:2px 8px;
  border-radius:11px;
  margin-right:-8px;
  background: rgba(255,255,255,.08);
}

/* barras */
.sim-contentBar{
  height: 445px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  width:80px;
  flex: 0 0 auto;
}

.sim-contentBar .total{
  font-weight:500;
  margin-bottom:0.3rem;
  border:1px solid #fff;
  padding:2px 4px;
  min-width:100%;
  text-align:left;
  font-size:12px;
  border-radius:11px;
}

.sim-bar{
  width:80px;
  background-color: #e6e9e9;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:.5rem 0 0;
  transition: height .5s;
  position:relative;
  border-radius: 8px;
  border: 1px solid #e6e9e9;
}

.sim-bar::after{
  content:'';
  display:block;
  width:130%;
  height:0px;
  position:absolute;
  bottom:0;
  background-color:#fff;
  margin-left:20px;
  
}

.sim-bar--no-data{
  padding: 0 !important;
  height: 35px !important;
  border-radius: 0 0 8px 8px !important;
}

.sim-term{
  background-color:#FFFFFF;
  padding:.5rem .25rem;
  width:100%;
  font-weight:500;
  font-size:11px;
  text-align:left;
  border-radius: 0 0 8px 8px;
  
}

.sim-bar.sim-last{
  background-color: #FFBA1F;
  color: var(--mn-text-primary, #062323);
  border: 1px solid #FFBA1F;
}
.sim-bar.sim-last .sim-term{
  background-color: #FFFFFF;  
}
.sim-bar.sim-last::after{
  width:100%;
  margin-left:0;
}

.tax-label {
  text-align: left;
  width: 100%;
  font-size:12px;
  line-height: 1rem;
  padding: 4px 0;
}

.tax-label.sep {
  border-bottom: 1px solid #FFBA1F;  
}

.legal-sim{
    font-size: 11px;
    text-align: center;
}

.btn-invest-disabled{
  pointer-events: none;
  color: #b7c0c0 !important;
  background: #f2f4f4 !important;
}

/* responsive similar a tus breakpoints */
@media (min-width: 768px){
  .sim-section{
    background-color: var(--mn-background-secondary, transparent);
    padding: 1rem;
  }  
}
@media ((min-width: 1243px)){
  .card-body{
    padding: 2rem;
  }
}
@media ((min-width: 1200px)){
  .sim-gcontent{
    justify-content: center;
  }  
}
@media (min-width: 1280px){
  .sim-controls .card-body{ padding: 1.5rem; }
  .sim-graph .card-body{ padding: 1.5rem; }
}