#freams-simulador{

max-width:1400px;
margin:auto;
font-family:'Oswald', sans-serif;
color:white;

}

.freams-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-bottom:30px;

}

input,select{

padding:14px;
font-size:16px;

background: transparent;
border: none;
outline: none;

color: #ffffff;

border-radius:30px;

box-shadow: 0 0 5px #ff8128;

transition: all 0.3s ease;

}

/* HOVER */
input:hover, select:hover{
box-shadow: 0 0 10px #ff8128;
}

/* FOCUS */
input:focus, select:focus{
box-shadow: 0 0 15px #ff8128;
}

/* PLACEHOLDER */
input::placeholder{
color: rgba(255,255,255,0.6);
}

button{

background: linear-gradient(135deg, #ff8128, #ff5e00);
padding:16px;
border:none;

color:#ffffff;
font-weight:600;

border-radius:30px;

cursor:pointer;

box-shadow: 0 0 10px rgba(255,129,40,0.6);

transition: all 0.3s ease;

}

button:hover{
transform: translateY(-2px);
box-shadow: 0 0 20px rgba(255,129,40,0.9);
}

button:active{
transform: scale(0.97);
}

#dashboardResultado{

background: linear-gradient(180deg, #0a0a0a, #1a1a1a);

padding:30px;
margin-top:30px;

border-radius:30px;

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}

.freams-card{

background: rgba(0,0,0,0.6);
backdrop-filter: blur(10px);

padding:20px;

border-radius:30px;

box-shadow: 0 0 10px rgba(255,129,40,0.4);

transition: 0.3s;

}

.freams-card:hover{
transform: translateY(-3px);
box-shadow: 0 0 20px rgba(255,129,40,0.7);
}

#tablaAmortizacion{

margin-top:40px;

}

table{

width:100%;
border-collapse:collapse;

}

th,td{

padding:10px;
border-bottom:1px solid #333;

}

.fream-table{
width:100%;
border-collapse:collapse;
text-align:center;
}

.fream-table th,
.fream-table td{
text-align:center;
padding:10px;
}

.freams-subtitulo{
margin-top:30px;
margin-bottom:10px;

font-size:18px;
color:#ff8128;

font-weight:600;
text-transform:uppercase;

letter-spacing:1px;
}

/* ======================================
TITULO PRINCIPAL SIMULADOR
====================================== */

.freams-titulo{

text-align: center;

text-transform: uppercase;

margin-bottom: 40px;

margin-top: 20px;

font-size: 28px;

letter-spacing: 2px;

font-weight: 600;

color: #ffffff;

}

/* ======================================
RESPONSIVE MOBILE
====================================== */

/* Tablets */
@media (max-width: 1024px){

.freams-grid{
grid-template-columns: repeat(2, 1fr);
}

#dashboardResultado{
grid-template-columns: repeat(2, 1fr);
}

}

/* Celulares */
@media (max-width: 768px){

.freams-grid{
grid-template-columns: 1fr;
}

#dashboardResultado{
grid-template-columns: 1fr;
}

/* Inputs más cómodos */
input, select{
width: 100%;
font-size: 16px;
}

/* Botón full ancho */
button{
width: 100%;
}

/* Cards más aire */
.freams-card{
padding: 18px;
}

/* Título más ajustado */
.freams-titulo{
font-size: 22px;
margin-bottom: 25px;
}

}


/* Celulares pequeños */
@media (max-width: 480px){

.freams-subtitulo{
font-size: 14px;
}

th, td{
font-size: 12px;
padding: 6px;
}

}