:root {
    --marca: #017f7e;
    --marca-oscura: #015f5e;
    --marca-suave: #e3f1f0;
    --tinta: #1f2a2a;
    --gris: #5f6b6b;
    --linea: #d9e1e1;
    --fondo: #f2f5f5;
    --blanco: #ffffff;
    --vencido: #b4441f;
    --pronto: #a86b00;

    --bs-primary: var(--marca);
    --bs-primary-rgb: 1, 127, 126;
    --bs-link-color: var(--marca);
    --bs-link-hover-color: var(--marca-oscura);
    --bs-body-font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
    --bs-body-color: var(--tinta);
    --bs-body-bg: var(--fondo);
    --bs-border-color: var(--linea);
    --bs-focus-ring-color: rgba(1, 127, 126, .3);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    line-height: 1.5;
}

h1, h2, h3 {
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--tinta);
}

h1 { font-size: 1.75rem; margin: 0; }
h2 { font-size: 1.2rem; margin-bottom: .75rem; }

.monto, .tabla-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-num { text-align: right; }
.texto-gris { color: var(--gris); }

.btn-primary {
    --bs-btn-bg: var(--marca);
    --bs-btn-border-color: var(--marca);
    --bs-btn-hover-bg: var(--marca-oscura);
    --bs-btn-hover-border-color: var(--marca-oscura);
    --bs-btn-active-bg: var(--marca-oscura);
    --bs-btn-active-border-color: var(--marca-oscura);
    --bs-btn-disabled-bg: var(--marca);
    --bs-btn-disabled-border-color: var(--marca);
}

.btn-outline-primary {
    --bs-btn-color: var(--marca);
    --bs-btn-border-color: var(--marca);
    --bs-btn-hover-bg: var(--marca);
    --bs-btn-hover-border-color: var(--marca);
    --bs-btn-active-bg: var(--marca-oscura);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--marca);
    box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}

.form-check-input:checked { background-color: var(--marca); border-color: var(--marca); }

:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* Estructura de la aplicación */
.app-cuerpo { display: flex; flex: 1; }

.menu { width: 240px; }

.menu-interior {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    background: var(--blanco);
    border-right: 1px solid var(--linea);
}

.menu-marca {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.25rem 1.25rem 1rem;
    font-weight: 700;
}

.menu-marca img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; }

.menu-enlaces { list-style: none; margin: 0; padding: .5rem .75rem; }

.menu-enlaces a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    border-radius: 6px;
    color: var(--gris);
    text-decoration: none;
    font-weight: 600;
}

.menu-enlaces a:hover { background: var(--fondo); color: var(--tinta); }
.menu-enlaces a[aria-current="page"] { background: var(--marca-suave); color: var(--marca-oscura); }

.menu-pie {
    margin-top: auto;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--linea);
    font-size: .9rem;
}

.barra-movil {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1rem;
    background: var(--marca);
    color: var(--blanco);
}

.barra-movil .btn { color: var(--blanco); border-color: rgba(255, 255, 255, .5); }

.contenido { flex: 1; min-width: 0; padding: 2rem clamp(1rem, 3vw, 2.5rem); }

.cabecera {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.bloque {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.pie {
    text-align: center;
    padding: 1rem;
    font-size: .875rem;
    color: var(--gris);
}

/* Tablas */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table thead th {
    font-weight: 600;
    color: var(--gris);
    border-bottom: 2px solid var(--marca);
    white-space: nowrap;
}
.table td { vertical-align: middle; }

.acciones { display: flex; gap: .35rem; justify-content: flex-end; }

.forma {
    display: inline-block;
    padding: .1rem .5rem;
    margin: 0 .25rem .25rem 0;
    border-radius: 4px;
    background: var(--fondo);
    border: 1px solid var(--linea);
    font-size: .85rem;
}

/* Vencimientos: el elemento distintivo */
.vencimientos { display: grid; gap: .5rem; }

.venc {
    display: grid;
    grid-template-columns: 76px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: .6rem .9rem .6rem .6rem;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.venc:hover { border-color: var(--marca); }

.venc-dias {
    text-align: center;
    border-radius: 6px;
    padding: .35rem 0;
    background: var(--marca-suave);
    color: var(--marca-oscura);
    line-height: 1.1;
}

.venc-dias strong { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.venc-dias span { font-size: .8rem; }
.venc--pronto .venc-dias { background: #fbf1dc; color: var(--pronto); }
.venc--vencido .venc-dias { background: #f8e4dc; color: var(--vencido); }

.venc-cliente strong { display: block; }
.venc-cliente span { color: var(--gris); font-size: .92rem; }
.venc-monto { text-align: right; }
.venc-monto strong { display: block; font-size: 1.1rem; }

.vacio { color: var(--gris); padding: 1rem 0; margin: 0; }

/* Accesos del panel */
.accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }

.acceso {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
    border: 1px solid var(--linea);
    border-radius: 8px;
    background: var(--blanco);
    color: var(--tinta);
    font-weight: 600;
    text-decoration: none;
}

.acceso i { font-size: 1.4rem; color: var(--marca); }
.acceso:hover { border-color: var(--marca); }

.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-top: 1rem; }
.resumen div { border-left: 3px solid var(--marca); padding: .25rem .75rem; }
.resumen span { display: block; color: var(--gris); font-size: .9rem; }
.resumen strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* Modales */
.modal-header { border-bottom: 2px solid var(--marca); }

.linea-pago { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; margin-bottom: .5rem; }
.linea-pago .referencia { grid-column: 1 / -1; }

.sinpe-resultado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .6rem .8rem;
    margin-bottom: .4rem;
    border: 1.5px solid var(--linea);
    border-radius: 6px;
    background: var(--blanco);
    text-align: left;
}

.sinpe-resultado:hover, .sinpe-resultado[aria-pressed="true"] { border-color: var(--marca); background: var(--marca-suave); }

/* Login y portal */
.acceso-pantalla {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--marca);
    background-image: linear-gradient(160deg, var(--marca) 0%, var(--marca-oscura) 100%);
}

.acceso-tarjeta {
    width: 100%;
    max-width: 380px;
    background: var(--blanco);
    border-radius: 12px;
    padding: 2rem;
}

.acceso-tarjeta img { display: block; max-width: 140px; max-height: 90px; margin: 0 auto 1.25rem; object-fit: contain; }
.acceso-tarjeta h1 { font-size: 1.35rem; text-align: center; margin-bottom: 1.5rem; }
.acceso-pie { color: rgba(255, 255, 255, .85); background: var(--marca-oscura); }

.portal { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 1.5rem 1rem; }
.portal-marca { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.portal-marca img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; }

.pasos { display: flex; gap: .5rem; margin-bottom: 1.25rem; list-style: none; padding: 0; }
.pasos li {
    flex: 1;
    padding-top: .4rem;
    border-top: 3px solid var(--linea);
    color: var(--gris);
    font-size: .9rem;
}
.pasos li.hecho { border-color: var(--marca); color: var(--marca-oscura); }
.pasos li[aria-current="step"] { border-color: var(--marca); color: var(--tinta); font-weight: 600; }

.total-pagar { font-size: 2rem; font-weight: 700; color: var(--marca-oscura); font-variant-numeric: tabular-nums; }

.instrucciones { background: var(--marca-suave); border-radius: 8px; padding: 1rem; }

[hidden] { display: none !important; }

@media (max-width: 991.98px) {
    .barra-movil { display: flex; }
    .menu { width: 260px; }
    .contenido { padding-top: 1.25rem; }
}

@media (min-width: 992px) {
    .menu { position: sticky; top: 0; height: 100vh; flex-shrink: 0; }
    .menu .offcanvas-body { height: 100%; }
}

@media (max-width: 991.98px) {
    .menu .offcanvas-body { padding: 0; }
}

@media (max-width: 575.98px) {
    .venc { grid-template-columns: 60px 1fr; }
    .venc-monto { grid-column: 2; text-align: left; }
    .linea-pago { grid-template-columns: 1fr auto; }
    .linea-pago .monto-linea { grid-column: 1; }
    h1 { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}