@font-face {
    font-family: 'CustomFont';
    src: url('../fonts/Brownfox - Geometria.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.simulador-container {
    display: flex;
    background: #ffffff;
    font-family: 'CustomFont', Arial, sans-serif;
    color: #333333;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.1);
    padding: 32px;
    min-height: 500px;
    margin-top: 20px;
}

.simulador-left {
    flex: 2;
    padding-right: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.simulador-main-row {
    display: flex;
    gap: 48px; /* increase gap to reduce visual width of right panel */
    align-items: flex-start; /* align top edges so right panel starts at h3 */
    width: 100%; /* ensure it uses full width of parent container */
    box-sizing: border-box;
}

.simulador-controls {
    flex: 2;
    display: flex;
    flex-direction: column;
    max-width: 100%; /* reduce controls width by ~20% */
}

.simulador-right {
    flex: 1;
    background: #ffffff;
    color: #333333;
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: none; /* remove border/shadow */
}

.simulador-logo {
    width: 180px;
    margin-bottom: 24px;
}

.simulador-slider-label {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.simulador-slider-row {
    display: flex;
    align-items: flex-start; /* align top so value lines up with description */
    gap: 12px;
    margin-bottom: 24px;
    justify-content: space-between;
}

.simulador-slider {
    width: 100%;
    margin-bottom: 0;
}

.simulador-slider-value {
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 12px;
    white-space: nowrap;
    text-align: right;
    flex: 0 0 auto;
    /* Apply similar visual border treatment as container */
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 6px;
    padding: 2px 8px;
    background: #f5f5f5;
    color: #333333;
    /* Fixed width for all slider value inputs to ensure consistency */
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    box-sizing: border-box;
}

.simulador-slider-value-container {
    position: relative;
    display: flex;
    align-items: center;
}

.simulador-slider-value-unit {
    position: absolute;
    right: 8px;
    font-size: 0.75rem;
    color: #666;
    pointer-events: none;
}

.simulador-slider-value.with-unit {
    padding-right: 20px;
}

.simulador-slider-description {
    font-size: x-small; /* smaller description text */
    color: #666666;
    margin-bottom: 16px; /* reduced from 12px */
    margin-top: 0px; /* further reduced space above */
}

.simulador-card {
    background: #ffffff; /* light background color */
    color: #009FDF;
    border-radius: 12px;
    padding: 24px;
    line-height: 1.6; /* increase space between lines inside the card */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    width: 100%;
    text-align: center;
    border-top: 4px solid #009FDF; /* blue top border */
}

.simulador-cards-container {
    display: flex;
    gap: 16px;
    align-items: stretch; /* make cards same height */
}

.simulador-cards-container .simulador-card {
    flex: 1 1 0;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.simulador-card .card-body {
    flex: 1 1 auto; /* allow card body to grow so all cards match height */
}

/* Provide a minimum height for cards on desktop to create a consistent visual block */
.simulador-card {
    min-height: 140px;
}

/* New header row to align value with its label */
.simulador-slider-header {
    display: flex;
    align-items: baseline; /* align text baselines for clean vertical alignment */
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.simulador-slider-header .simulador-slider-label { margin-bottom: 0; }
.simulador-slider-header .simulador-slider-value { margin-left: 0; }

.simulador-result-label {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.simulador-result-subtitle {
    font-size: x-small;
    color: #666666; /* neutral dark for readability */
    margin-bottom: 6px;
}

.simulador-result-value {
    font-size: LARGER; /* reduced size */
    font-weight: 700;
    margin-bottom: 8px;
}

/* Intro and layout enhancements */
.simulador-intro {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.simulador-intro-bold-xxs {
    font-weight: 700;
    font-size: x-small;
}
.simulador-intro-note {
    font-size: x-small;
}
.simulador-intro-small {
    font-size: small;
}
.simulador-separator {
    border: 0;
    height: 2px;
    background-color: #009FDF;
    margin: 8px 0;
}
.simulador-title {
    color: #009FDF;
    margin-top: 4px;
    font-weight: 700; /* make title bold */
}

.simulador-intro-text {
    font-size: 0.875rem; /* h6 equivalent */
    color: #666666;
    margin: 16px 0;
    line-height: 1.5;
}

/* Global line-height increase by ~30% */
/* Stronger global line-height application */
html, body, * {
    line-height: 1;
}

/* Light mode background */
html, body {
    background-color: #f5f5f5;
    color: #333333;
}
.simulador-slider-header .simulador-slider-value {
    margin-left: 0;
    flex: 0 0 15%;
    max-width: 15%;
    text-align: right;
}

/* Responsive alignment */
@media (max-width: 992px) {
    .simulador-container {
        flex-direction: column;
    }
    .simulador-main-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .simulador-right {
        margin-top: 12px;
        width: 100%;
    }
    .simulador-cards-container {
        flex-direction: column;
    }
    .simulador-card {
        min-height: auto; /* let cards size naturally on small screens */
    }
}

/* Loading progress (index.html) - scoped to initial app host only */
#app > .loading-progress {
    display: block;
    width: 64px;
    height: 64px;
    margin: 16vh auto 8px;
}
#app > .loading-progress circle {
    fill: none;
}
#app > .loading-progress circle:first-child {
    stroke: rgba(0,0,0,0.12);
    stroke-width: 6;
}
#app > .loading-progress circle:last-child {
    stroke: #009FDF;
    stroke-width: 6;
    stroke-linecap: round;
    animation: lp-dash 1.4s ease-in-out infinite;
    stroke-dasharray: 150;
    stroke-dashoffset: 0;
}
@keyframes lp-dash {
    0%   { stroke-dasharray: 1, 150;  stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}
#app > .loading-progress-text {
    text-align: center;
    color: #333333;
    font-weight: 700;
    font-size: small;
    letter-spacing: 0.02em;
}

.simulador-disclaimer {
    margin-top: 12px;
    font-size: x-small;
    color: rgba(0,0,0,0.6);
    line-height: 1.4;
}

/* RadzenSlider theming (scoped) */
.simulador-controls .rz-slider {
    border: none;
    background-color: #e0e0e0;
}

.rz-slider .rz-slider-horizontal {
    height: 2px !important; /* thin line */
}
.rz-slider-horizontal{
    height:2px;
}
.simulador-controls .rz-slider .rz-slider-range {
    background-color: #009FDF !important; /* selected segment */
    border: none;
}
.simulador-controls .rz-slider .rz-slider-handle {
    width: 22.5px; /* +25% */
    height: 22.5px; /* +25% */
    border-radius: 50%; /* circular knob */
    background-color: #009FDF;
    border: 2px solid #009FDF;
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
.simulador-controls .rz-slider .rz-slider-handle:hover,
.simulador-controls .rz-slider .rz-slider-handle:focus {
    box-shadow: 0 0 0 4px rgba(0, 159, 223, 0.3);
    outline: none;
}
.simulador-controls .rz-slider .rz-slider-track,
.simulador-controls .rz-slider .rz-slider-base {
    background-color: #e0e0e0; /* unselected track */
    border-radius: 4px;
    height: 2px; /* thin line */
}
.simulador-controls .rz-slider .rz-slider-range {
    height: 2px; /* thin selected line */
}

/* Ensure thin line applies to horizontal sliders (override theme sizes) */
.simulador-controls .rz-slider.rz-slider-horizontal .rz-slider-base,
.simulador-controls .rz-slider.rz-slider-horizontal .rz-slider-track,
.simulador-controls .rz-slider.rz-slider-horizontal .rz-slider-range {
    height: 2px !important;
    top: 50% !important;
    transform: translateY(-50%);
    border-radius: 0 !important; /* remove rounding for horizontal slider */
}

/* Assign unselected track color, preserve selected range color */
.simulador-controls .rz-slider.rz-slider-horizontal .rz-slider-base,
.simulador-controls .rz-slider.rz-slider-horizontal .rz-slider-track {
    background-color: rgba(224, 224, 224, 0.8) !important; /* light brand tint */
}