:root{

    --color-principal:#0033A0;
    --color-secundario:#009CDE;

    --color-fondo:#f5f7fb;
    --color-superficie:#ffffff;

    --color-texto:#1d2939;
    --color-texto-sec:#667085;

    --color-borde:#d0d5dd;

    --color-ok:#16a34a;
    --color-error:#dc2626;

    --radio:12px;

    --sombra:0 8px 24px rgba(0,0,0,.08);

    --fuente:
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    font-size:16px;

}

body{

    background:var(--color-fondo);

    color:var(--color-texto);

    font-family:var(--fuente);

    line-height:1.5;

}

.app{

    max-width:1200px;

    margin:auto;

    padding:32px;

}

.topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:32px;

}

.topbar-left{

    display:flex;

    align-items:center;

    gap:20px;

}

.logo{

    width:72px;

    height:auto;

}

.titles h1{

    font-size:2rem;

    font-weight:700;

}

.titles p{

    color:var(--color-texto-sec);

    margin-top:6px;

}

.empresa{

    font-weight:600;

}

.card{

    background:var(--color-superficie);

    border-radius:var(--radio);

    box-shadow:var(--sombra);

    padding:28px;

    margin-bottom:28px;

}

.card-header{

    margin-bottom:24px;

}

.card-header h2{

    font-size:1.35rem;

    margin-bottom:6px;

}

.card-header p{

    color:var(--color-texto-sec);

}

.grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:20px;

}

.campo{

    display:flex;

    flex-direction:column;

}

.campo-completo{

    grid-column:1/-1;

}

label{

    font-weight:600;

    margin-bottom:8px;

}

input,
select{

    width:100%;

    padding:12px 14px;

    border:1px solid var(--color-borde);

    border-radius:10px;

    font-size:1rem;

    outline:none;

    transition:.20s;

    background:#fff;

}

input:focus,
select:focus{

    border-color:var(--color-principal);

}

.radio-group{

    display:flex;

    gap:24px;

    flex-wrap:wrap;

}

.radio-option{

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

    font-weight:500;

}

.radio-option input{

    width:auto;

}

.resultado-vacio{

    text-align:center;

    padding:60px 20px;

    color:var(--color-texto-sec);

    border:2px dashed var(--color-borde);

    border-radius:12px;

}

.footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

    margin-top:40px;

    padding-top:20px;

    border-top:1px solid var(--color-borde);

    font-size:.90rem;

    color:var(--color-texto-sec);

}

.footer a{

    color:var(--color-principal);

    text-decoration:none;

}

.separator{

    margin:0 10px;

}

.modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    z-index:999;

}

.hidden{

    display:none;

}

.modal-content{

    width:min(900px,95vw);

    max-height:90vh;

    overflow:auto;

    background:#fff;

    border-radius:12px;

    box-shadow:var(--sombra);

    padding:30px;

    position:relative;

}

.modal-close{

    position:absolute;

    top:16px;

    right:18px;

    border:none;

    background:none;

    font-size:2rem;

    cursor:pointer;

}

.legal-text{

    white-space:pre-wrap;

    font-family:inherit;

}

@media (max-width:768px){

    .app{

        padding:18px;

    }

    .topbar{

        flex-direction:column;

        align-items:flex-start;

    }

    .footer{

        flex-direction:column;

        align-items:flex-start;

    }

}

.tabla-resultado {
    width: 100%;
    border-collapse: collapse;
}

.tabla-resultado th,
.tabla-resultado td {
    padding: 10px 0;
    border-bottom: 1px solid #e5e5e5;
}

.tabla-resultado th {
    width: 45%;
    text-align: left;
    font-weight: 600;
}

.tabla-resultado td {
    text-align: right;
}

.tabla-resultado tr:last-child th,
.tabla-resultado tr:last-child td {
    border-bottom: 0;
}

.tabla-resultado .titulo-seccion th {
    padding: 14px 0 8px;
    border-bottom: 2px solid #dcdcdc;
    text-align: left;
    font-size: 1rem;
    font-weight: 700;
}

.tabla-resultado .separador td {
    padding: 8px 0;
    border: 0;
}

.tabla-resultado .cuota-principal th,
.tabla-resultado .cuota-principal td {
    font-size: 1.15rem;
    font-weight: 700;
}

.tabla-resultado .total th,
.tabla-resultado .total td {
    border-top: 2px solid #dcdcdc;
    font-weight: 700;
}

.resultado-bloque {

    background:#fff;

    border:1px solid var(--color-borde);

    border-radius:10px;

    padding:22px;

    margin-bottom:22px;

}

.resultado-bloque:last-child{

    margin-bottom:0;

}

.resultado-bloque h3{

    margin-bottom:18px;

    color:var(--color-principal);

}