/* ==========================================================================
   CALCULADORA DE PRESTAMOS: controles deslizantes, pestanas y grafico
   (los colores salen de las variables de css/styles.css)
   ========================================================================== */
.rango{margin-top:16px}
.rango label{margin-top:0}
.rango-fila{display:grid;grid-template-columns:1fr 120px;gap:14px;align-items:center}
.rango-fila input[type=number]{padding:9px 10px;text-align:right;font-weight:600}
input[type=range]{padding:0;border:0;background:transparent;accent-color:var(--celeste);height:28px;cursor:pointer;box-shadow:none}
input[type=range]:focus{outline:2px solid var(--celeste);box-shadow:none}
.mini{font-size:.78rem;color:var(--mut);margin-top:4px}
#prestamos .fecha{margin-top:18px}

/* Pestanas Cuota | Calendario | Comparar */
.tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:2px solid var(--line);flex-wrap:wrap}
.tabs button{background:none;border:0;font:inherit;font-weight:600;font-size:.9rem;color:var(--mut);padding:10px 14px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px}
.tabs button:hover{color:var(--celeste)}
.tabs button.on{color:var(--azul-oscuro);border-bottom-color:var(--celeste)}

/* Cuota destacada */
.cuota-grande{background:var(--verde-fondo);border:1.5px solid var(--verde);border-radius:12px;padding:16px 18px;margin-bottom:12px}
.cuota-grande small{display:block;font-size:.78rem;color:var(--azul-oscuro);font-weight:600}
.cuota-grande b{display:block;font-family:Manrope,sans-serif;font-size:2rem;color:var(--verde);line-height:1.2}
.cuota-grande span{font-size:.8rem;color:var(--mut)}
.res .resumen{grid-template-columns:1fr 1fr}

/* Grafico de composicion */
.grafico{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:center;margin:4px 0 16px}
.grafico svg{width:130px;height:130px}
.grafico ul{list-style:none;display:grid;gap:6px;font-size:.84rem}
.grafico li{display:flex;align-items:center;gap:8px}
.grafico li b{margin-left:auto}
.grafico i{width:12px;height:12px;border-radius:3px;flex:none}
.grafico circle.c1{stroke:var(--celeste)} .grafico i.c1{background:var(--celeste)}
.grafico circle.c2{stroke:var(--azul-oscuro)} .grafico i.c2{background:var(--azul-oscuro)}
.grafico circle.c3{stroke:var(--acento)} .grafico i.c3{background:var(--acento)}
.grafico circle.c4{stroke:#9aa8b5} .grafico i.c4{background:#9aa8b5}

/* Tablas de calendario y comparacion */
.res .amort tr.actual td{background:#e3f2fc}
.res .amort .mejor{background:var(--verde-fondo);color:var(--verde);font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:20px;margin-left:6px}
.res .comp td:first-child,.res .comp th:first-child{text-align:left}
.res .amort-wrap{margin-top:10px;max-height:none}
#pPanelCal .amort-wrap{max-height:520px}

@media(max-width:520px){
  .rango-fila{grid-template-columns:1fr 100px}
  .grafico{grid-template-columns:1fr;justify-items:center}
}

/* Tabla comparativa compacta (sin barra horizontal en pantalla de escritorio) */
.res .comp th,.res .comp td{padding:7px 6px;font-size:.72rem;white-space:normal}
.res .comp th{white-space:normal;line-height:1.25}