/* ================================
   VR — TIMELINE HORIZONTAL (MODAL)
   ================================ */

/* --- Base tipografía del modal: contenido Montserrat --- */
#modalPago .modal-contenido {
    font-family: Montserrat, sans-serif;
    color: #000;
}

/* --- Título modal (Gill Sans Nova) --- */
#modalPago .modal-contenido h2,
#vr_modal_title {
    font-family: "Gill Sans Nova", Montserrat, sans-serif;
    font-style: normal;
    font-weight: 600;
    color: rgb(0, 0, 0);
    font-size: 25px;
    line-height: 30px;
}

/* ✅ Nota del modal: mismo look que sub/meta */
#modalPago #vr_pay_note {
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #666;
    font-weight: 400;
    margin: 6px 0 12px;
}

/* Wrapper */
.vr-payments {
    margin-top: 10px;
}

.vr-payments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 14px;
}

/* ✅ Range: mismo estilo que el resumen */
#modalPago #vr_pay_range,
.vr-range {
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    line-height: 16px;
    color: #666;
    font-weight: 600;
}

/* ✅ Nav: gris como scroll (menos colores) */
.vr-nav {
    border: 0;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
    color: #777;
    /* gris scroll */
    line-height: 1;
    padding: 6px 10px;
    border-radius: 8px;
}

.vr-nav:hover {
    color: #555;
    /* un poco más oscuro */
    background: #f2f2f2;
}

/* -------------------------------------------------------
   TIMELINE: Variables de layout (equidistancia SR4)
   ------------------------------------------------------- */
#modalPago {
    --vr-col-gap: 26px;
    /* separación entre columnas */
    --vr-pad-y: 18px;
    /* padding vertical del timeline */
    --vr-pad-x: 10px;
    /* padding horizontal */

    /* ✅ Ajuste equidistancia date ↔ dot */
    --vr-date-h: 26px;
    /* antes 18px */
    --vr-dot-row-h: 26px;
    /* antes 22px */
    --vr-dot-size: 12px;
    /* tamaño del dot */

    --vr-stack-gap: 10px;
    /* gap uniforme entre amount/badge/sub/meta */
}

/* Contenedor horizontal con scroll */
.vr-timeline {
    position: relative;
    display: flex;
    gap: var(--vr-col-gap);
    overflow-x: auto;
    padding: var(--vr-pad-y) var(--vr-pad-x);
    scroll-behavior: smooth;
}

/* Línea horizontal alineada EXACTO al centro del dot */
.vr-timeline::before {
    content: "";
    position: absolute;
    left: var(--vr-pad-x);
    right: var(--vr-pad-x);

    /* padding-top + altura de date + mitad de dotRow */
    top: calc(var(--vr-pad-y) + var(--vr-date-h) + (var(--vr-dot-row-h) / 2));

    height: 2px;
    background: #000;
    opacity: 0.25;

    z-index: 1;
    /* detrás de dots */
}

/* Cada pago = 1 columna estilo Excel */
.vr-timeline-item {
    min-width: 190px;
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* ✅ todo alineado a la izquierda */
    text-align: left;

    z-index: 2;
    /* encima de la línea */
}

/* TOP: date arriba / dot abajo */
.vr-top {
    display: grid;
    grid-template-rows: var(--vr-date-h) var(--vr-dot-row-h);
    width: 100%;
    margin-bottom: var(--vr-stack-gap);
}

/* Fecha (Montserrat) */
.vr-date {
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #222;
    text-transform: uppercase;
    letter-spacing: 1px;

    align-self: end;
    justify-self: start;
}

/* Dot montado sobre la línea (izquierda) */
.vr-dot {
    width: var(--vr-dot-size);
    height: var(--vr-dot-size);
    border-radius: 50%;
    background: #000;

    position: relative;
    z-index: 3;

    align-self: center;
    justify-self: start;

    box-shadow: 0 0 0 6px #fcfcfc;
}

/* Amount (Gill Sans Nova) */
#modalPago .vr-amount {
    font-family: "Gill Sans Nova", Montserrat, sans-serif;
    font-style: normal;
    font-weight: 600;
    color: rgb(0, 0, 0);
    font-size: 30px;
    line-height: 45px;

    margin: 0;
}

/* Badge (Montserrat) */
.vr-badge {
    display: inline-block;
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;

    margin: 0;
}

/* Estados */
.vr-badge.sent {
    background: #dff0d8;
    color: #2f6f2f;
}

/* ✅ PROGRAMADO: outline (sin fondo azul) */
#modalPago .vr-badge.scheduled {
    background: transparent;
    border: 1px solid #2b6cb0;
    color: #2b6cb0;
}

/* Subtexto (Montserrat) */
.vr-sub {
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    color: #333;
    line-height: 18px;
    margin: 0;
}

/* Meta (Montserrat) */
.vr-meta {
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    color: #666;
    line-height: 16px;
    margin: 0;
}

/* ✅ Equidistancia vertical uniforme del stack inferior */
.vr-timeline-item> :not(.vr-top) {
    margin-top: var(--vr-stack-gap);
}

.vr-timeline-item>.vr-amount {
    margin-top: 0;
}

/* Activo (pago hoy) */
.vr-timeline-item.is-active .vr-dot {
    background: #333;
}

/* -------------------------------------------------------
   Footer: saldo izquierda / botones derecha (botones abajo)
   ------------------------------------------------------- */
#modalPago .vr-payments-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* ✅ botones abajo */
    gap: 16px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eee;

    min-height: 86px;
    /* resumen siempre multilinea => baseline estable */
}

#modalPago .vr-payments-footer-left {
    color: #666;
    font-size: 14px;
    font-family: Montserrat, sans-serif;
}

/* Botones a la derecha */
#modalPago .vr-modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    align-self: flex-end;
    /* ✅ asegurar bottom */
    padding-bottom: 2px;
    /* micro ajuste */
}

/* -------------------------------------------------------
   ✅ SR4: Iconos SVG inline (sin FontAwesome)
   ------------------------------------------------------- */
#modalPago .vr-modal-actions .vr-icon {
    width: 18px;
    height: 18px;
    display: block;

    fill: none;
    stroke: #000;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Botón estilo icon-only */
#modalPago .vr-modal-actions .btn-imprimir {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    border-radius: 8px;
    text-decoration: none;
}

#modalPago .vr-modal-actions .btn-imprimir:hover {
    background: #f2f2f2;
}