/* rev. 43 — wwwroot/css/vt-report-ajustes.css de Mono web (global en _Host), verbatim salvo capas D-51. */
/* =====================================================================
   vt-report-ajustes.css  ·  v2
   Reemplaza por completo la versión anterior.
   Linkear DESPUÉS de vt-report.css en index.html.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) ANCHO COMPLETO
   --------------------------------------------------------------------- */
.vt-page {
    max-width: none;
    margin: 0;
    padding-inline: 12px;
    padding-block: 12px 32px;
    width: 100%;
}

html, body {
    margin: 0;
    height: 100%;
}

#app, .page, main, article, .content, .container, .container-fluid {
    max-width: none !important;
    width: 100% !important;
    margin-inline: 0 !important;
}

.content, article {
    padding-inline: 0 !important;
}

/* ---------------------------------------------------------------------
   2) MODALES CENTRADOS
   El centrado va ahora como estilo inline en el markup, que gana siempre.
   Esto es el respaldo, por si algún modal se agrega después sin él.
   --------------------------------------------------------------------- */
.backdrop {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: var(--z-modal); /* D-51 (era 1000) */
    background: rgba(10, 18, 30, .5);
    backdrop-filter: blur(2px);
    overflow: auto;
}

    .backdrop.open {
        display: flex !important;
    }

        /* El modal se centra POR SÍ MISMO contra el viewport. Así da igual lo que
   haga el contenedor: aunque un ancestro tenga transform o el flex del
   backdrop no aplique, el modal queda siempre al centro de la pantalla. */
        .backdrop.open > .modal,
        .backdrop.open > .exp {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            margin: 0 !important;
            max-height: 90vh;
        }

/* IMPORTANTE: ningún ancestro del reporte puede tener transform/filter,
   porque eso rompe position:fixed y el modal se ancla al ancestro. */
.vt-page, .app, .panel {
    transform: none !important;
    filter: none !important;
}

/* ---------------------------------------------------------------------
   3) TOTALES DEL PIE SIEMPRE VISIBLES
   El problema: dos o tres filas de totales con bottom:0 se apilaban una
   encima de otra y solo se veía la última. Ahora se escalonan.
   --------------------------------------------------------------------- */
.vt-scroll tfoot {
    position: relative;
    z-index: 3;
}

    .vt-scroll tfoot tr td {
        position: sticky;
        z-index: 3;
        height: 28px;
        background: var(--cobalt-subtle);
    }

    .vt-scroll tfoot tr:last-child td {
        bottom: 0;
    }

    .vt-scroll tfoot tr:nth-last-child(2) td {
        bottom: 28px;
    }

    .vt-scroll tfoot tr:nth-last-child(3) td {
        bottom: 56px;
    }

    /* La última fila lleva el borde superior grueso; las de arriba, uno fino. */
    .vt-scroll tfoot tr:not(:last-child) td {
        border-top: 1px solid var(--line);
        border-bottom: none;
    }

    /* Sombra para que se despegue de las filas que pasan por debajo. */
    .vt-scroll tfoot tr:first-child td {
        box-shadow: 0 -4px 8px -4px rgba(20, 32, 52, .18);
    }

/* ---------------------------------------------------------------------
   4) GRÁFICOS EN TAMAÑO ESTÁNDAR, AMPLIABLES CON LA LUPA
   --------------------------------------------------------------------- */
.grid2 {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 14px;
}

.card {
    padding: 13px 14px;
}

    .card > h4 {
        font-size: 12.5px;
        margin-bottom: 10px;
    }

/* Tamaño estándar: contenido, con tope de altura. */
.vt-chart-std {
    max-height: 260px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .vt-chart-std .chart {
        max-height: 260px;
        width: auto;
        max-width: 100%;
        height: auto;
    }

    /* Las barras horizontales crecen con el número de filas: se limitan aquí
   y se ven completas al ampliar. */
    .vt-chart-std > .chart[viewBox] {
        width: 100%;
        height: auto;
    }

/* Botón lupa */
.card > h4 .vt-zoom {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 25px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface);
    color: var(--muted);
    font: 600 11px/1 'IBM Plex Sans', sans-serif;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

    .card > h4 .vt-zoom:hover {
        background: var(--cobalt-subtle);
        border-color: var(--cobalt-pale);
        color: var(--cobalt);
    }

    .card > h4 .vt-zoom svg {
        width: 12px;
        height: 12px;
    }

.card > h4 .sp {
    margin-left: 0;
}

/* Gráfico ampliado */
.modal.grafico {
    width: min(1280px, 94vw);
}

    .modal.grafico .body {
        padding: 18px 22px;
    }
/* Ampliado: se fija el ALTO y el ancho sigue la proporción del viewBox.
   Antes el SVG se estiraba a lo ancho del modal y salía desproporcionado. */
.vt-chart-big {
    max-height: 70vh;
    overflow: auto;
    display: flex;
    justify-content: center;
}

    .vt-chart-big .chart {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 68vh;
    }
        /* Las barras horizontales crecen hacia abajo: ahí sí conviene ancho completo. */
        .vt-chart-big .chart[viewBox$="0"] {
            width: 100%;
        }

/* Franja de lectura dentro del modal ampliado */
.vt-insight {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 13px;
    margin-bottom: 14px;
    border-radius: var(--r);
    background: var(--cobalt-subtle);
    border: 1px solid var(--cobalt-pale);
    font-size: 12.5px;
    color: var(--ink-2);
}

    .vt-insight svg {
        color: var(--cobalt);
        flex: none;
        margin-top: 1px;
    }

@media (max-width: 1100px) {
    .grid2 {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------
   5) DETALLES
   --------------------------------------------------------------------- */
.filters {
    gap: 14px 18px;
    padding: 14px 16px;
}

.ctl {
    min-width: 150px;
}

.tabrail {
    padding-inline: 12px;
}

.vt-scroll {
    max-height: 58vh;
}

.rangebar {
    padding-inline: 16px;
}


/* ---------------------------------------------------------------------
   6) PANEL DE CONCILIACIÓN
   --------------------------------------------------------------------- */
.vt-conc {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    overflow: hidden;
    margin-bottom: 16px;
}

.vt-conc-h {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}

    .vt-conc-h .t {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .6px;
        text-transform: uppercase;
        color: var(--ink-2);
    }

    .vt-conc-h .base {
        margin-left: auto;
        font-size: 11.5px;
        color: var(--muted);
        font-family: 'IBM Plex Mono', monospace;
    }

.vt-conc-b {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 0;
}

.vt-conc-col {
    padding: 12px 16px;
    border-right: 1px solid var(--line-soft);
}

    .vt-conc-col:last-child {
        border-right: none;
    }

    .vt-conc-col > h5 {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .6px;
        text-transform: uppercase;
        color: var(--muted);
        margin: 0 0 8px;
    }

.vt-fila {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
    font-size: 12.5px;
}

    .vt-fila .lbl {
        color: var(--ink-2);
    }

    .vt-fila .val {
        margin-left: auto;
        font-family: 'IBM Plex Mono', monospace;
        font-variant-numeric: tabular-nums;
    }

    .vt-fila.resta .lbl, .vt-fila.resta .val {
        color: var(--bad);
    }

    .vt-fila.sub {
        padding-left: 14px;
        font-size: 12px;
        color: var(--muted);
    }

        .vt-fila.sub .val {
            color: var(--ink-2);
        }

    .vt-fila.total {
        border-top: 2px solid var(--cobalt);
        margin-top: 5px;
        padding-top: 7px;
        font-weight: 700;
    }

        .vt-fila.total .lbl {
            color: var(--ink);
        }

        .vt-fila.total .val {
            color: var(--cobalt-deep);
            font-size: 13.5px;
        }

:root[data-theme="dark"] .vt-fila.total .val {
    color: var(--cobalt-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .vt-fila.total .val {
        color: var(--cobalt-light);
    }
}

.vt-fila .pc {
    font-size: 11px;
    color: var(--muted);
    font-family: 'IBM Plex Mono', monospace;
    min-width: 46px;
    text-align: right;
}

.vt-aviso {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 14px;
    background: var(--warn-bg);
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--warn);
}

    .vt-aviso svg {
        flex: none;
        margin-top: 1px;
    }

/* Ámbito: todo / fiscal / interno */
.vt-ambito {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--surface);
}

    .vt-ambito button {
        border: none;
        background: transparent;
        color: var(--ink-2);
        font: 600 12px/1 'IBM Plex Sans', sans-serif;
        height: 29px;
        padding: 0 12px;
        cursor: pointer;
        border-right: 1px solid var(--line-soft);
    }

        .vt-ambito button:last-child {
            border-right: none;
        }

        .vt-ambito button:hover {
            background: var(--cobalt-subtle);
        }

        .vt-ambito button[aria-pressed="true"] {
            background: var(--cobalt);
            color: #fff;
        }

/* ---------------------------------------------------------------------
   7) PANEL DE CONFIGURACIÓN DEL CÁLCULO
   Todo lo que modifica una cifra vive aquí y se lee en la cabecera
   aunque el panel esté cerrado.
   --------------------------------------------------------------------- */
.vt-cfg {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    margin-bottom: 12px;
    overflow: hidden;
}

    .vt-cfg.open {
        border-color: var(--cobalt-pale);
    }

.vt-cfg-h {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 14px;
    border: none;
    background: var(--surface-2);
    color: var(--ink-2);
    cursor: pointer;
    text-align: left;
    font: 600 12px/1 'IBM Plex Sans', sans-serif;
    transition: background .15s;
}

    .vt-cfg-h:hover {
        background: var(--cobalt-subtle);
    }

    .vt-cfg-h .t {
        letter-spacing: .5px;
        text-transform: uppercase;
    }

.vt-cfg-resumen {
    margin-left: 14px;
    font: 400 11.5px/1 'IBM Plex Mono', monospace;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-cfg-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--cobalt);
    color: #fff;
    font: 700 10.5px/18px 'IBM Plex Sans', sans-serif;
    text-align: center;
}

.vt-cfg-h .chev {
    margin-left: auto;
    transition: transform .18s;
    flex: none;
}

.vt-cfg-badge + .chev {
    margin-left: 8px;
}

.vt-cfg.open .chev {
    transform: rotate(180deg);
}

.vt-cfg-b {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 0;
    border-top: 1px solid var(--line);
}

.vt-cfg-item {
    padding: 13px 16px;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

    .vt-cfg-item.destacado {
        background: var(--cobalt-subtle);
    }

    .vt-cfg-item.info {
        background: var(--surface-2);
    }

    .vt-cfg-item > h6 {
        margin: 0 0 8px;
        font: 700 10.5px/1 'IBM Plex Sans', sans-serif;
        letter-spacing: .6px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .vt-cfg-item .ayuda {
        margin: 8px 0 0;
        font-size: 11.5px;
        line-height: 1.5;
        color: var(--muted);
    }

    .vt-cfg-item .dato {
        margin: 0;
        font-size: 12.5px;
        color: var(--ink-2);
    }

    .vt-cfg-item .alerta {
        margin: 8px 0 0;
        padding: 7px 9px;
        border-radius: 5px;
        background: var(--warn-bg);
        color: var(--warn);
        font-size: 11.5px;
        line-height: 1.5;
    }

/* Selector segmentado reutilizable */
.vt-seg {
    display: inline-flex;
    flex-wrap: wrap;
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow: hidden;
    background: var(--surface);
}

    .vt-seg button {
        border: none;
        background: transparent;
        color: var(--ink-2);
        font: 600 12px/1 'IBM Plex Sans', sans-serif;
        height: 29px;
        padding: 0 11px;
        cursor: pointer;
        border-right: 1px solid var(--line-soft);
        white-space: nowrap;
    }

        .vt-seg button:last-child {
            border-right: none;
        }

        .vt-seg button:hover {
            background: var(--cobalt-subtle);
        }

        .vt-seg button[aria-pressed="true"] {
            background: var(--cobalt);
            color: #fff;
        }

.vt-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ink-2);
    cursor: pointer;
}

    .vt-check input {
        width: 15px;
        height: 15px;
        accent-color: var(--cobalt);
        cursor: pointer;
    }

.vt-cfg-nums {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

    .vt-cfg-nums label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--ink-2);
    }

    .vt-cfg-nums input {
        width: 64px;
        height: 29px;
        padding: 0 8px;
        border: 1px solid var(--line);
        border-radius: 5px;
        background: var(--surface);
        color: var(--ink);
        font: 600 12.5px/1 'IBM Plex Mono', monospace;
        text-align: right;
    }

        .vt-cfg-nums input:focus {
            outline: none;
            border-color: var(--cobalt);
            box-shadow: 0 0 0 3px var(--cobalt-subtle);
        }

    .vt-cfg-nums .u {
        color: var(--muted);
    }

.vt-cfg-f {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--surface-2);
    border-top: 1px solid var(--line);
}

    .vt-cfg-f .sp {
        flex: 1;
    }

    .vt-cfg-f .pend {
        font-size: 11.5px;
        font-weight: 600;
        color: var(--warn);
    }

    .vt-cfg-f .btn[disabled] {
        opacity: .45;
        cursor: not-allowed;
    }

.btn-ghost {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
}

    .btn-ghost:hover {
        background: var(--cobalt-subtle);
        color: var(--cobalt);
        border-color: var(--cobalt-pale);
    }

@media (max-width: 900px) {
    .vt-cfg-resumen {
        display: none;
    }
}

/* ---------------------------------------------------------------------
   8) CERTIFICACIÓN DE IMPORTES
   El número y su prueba viven en la misma celda: si el botón estuviera en
   una columna aparte, se podría ordenar o filtrar una cosa sin la otra.
   --------------------------------------------------------------------- */
.vt-cert-celda {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    width: 100%;
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
}

.vt-cert-btn {
    flex: none;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--line);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
}

    .vt-cert-btn svg {
        width: 14px;
        height: 14px;
    }

    .vt-cert-btn:hover {
        color: var(--cobalt);
        background: var(--cobalt-subtle);
    }

    .vt-cert-btn.alert {
        color: var(--warn);
    }

        .vt-cert-btn.alert:hover {
            color: var(--warn);
            background: var(--warn-bg);
        }

/* ---- modal del certificado ---- */
.modal.cert {
    width: min(720px, 94vw);
}

    .modal.cert .body {
        padding: 16px 20px 20px;
    }

.vt-cert-cifra {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border-radius: var(--r);
    background: var(--cobalt-subtle);
    border-left: 3px solid var(--cobalt);
}

    .vt-cert-cifra .k {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .6px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .vt-cert-cifra .v {
        margin-left: auto;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 19px;
        font-weight: 600;
        color: var(--cobalt-deep);
        font-variant-numeric: tabular-nums;
    }

:root[data-theme="dark"] .vt-cert-cifra .v {
    color: var(--cobalt-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .vt-cert-cifra .v {
        color: var(--cobalt-light);
    }
}

.modal.cert h5 {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--muted);
    margin: 16px 0 7px;
}

    .modal.cert h5:first-child {
        margin-top: 0;
    }

.vt-cert-tabla {
    display: grid;
    gap: 0;
}

    .vt-cert-tabla > div {
        display: flex;
        align-items: baseline;
        gap: 12px;
        padding: 6px 0;
        font-size: 12.5px;
        border-bottom: 1px solid var(--line-soft);
    }

        .vt-cert-tabla > div:last-child {
            border-bottom: none;
        }

        .vt-cert-tabla > div > span {
            color: var(--muted);
            flex: none;
            min-width: 150px;
        }

        .vt-cert-tabla > div > b {
            margin-left: auto;
            text-align: right;
            color: var(--ink);
            font-weight: 600;
        }

            .vt-cert-tabla > div > b.mono {
                font-family: 'IBM Plex Mono', monospace;
                font-size: 12px;
                font-weight: 500;
            }

            .vt-cert-tabla > div > b.dudoso {
                color: var(--warn);
                font-weight: 500;
                font-size: 12px;
            }

.vt-cert-formula {
    padding: 11px 14px;
    border-radius: var(--r);
    background: var(--surface-2);
    border: 1px solid var(--line);
}

    .vt-cert-formula > div {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 14px;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }

        .vt-cert-formula > div b {
            color: var(--cobalt-deep);
        }

:root[data-theme="dark"] .vt-cert-formula > div b {
    color: var(--cobalt-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .vt-cert-formula > div b {
        color: var(--cobalt-light);
    }
}

.vt-cert-formula > span {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--muted);
}

.vt-cert-nota {
    margin: 11px 0 0;
    padding: 9px 12px;
    border-radius: var(--r);
    font-size: 12px;
    line-height: 1.55;
    background: var(--surface-2);
    border-left: 3px solid var(--line);
    color: var(--ink-2);
}

    .vt-cert-nota.ok {
        background: var(--ok-bg, #eefaf1);
        border-left-color: var(--ok, #15803d);
    }

    .vt-cert-nota.warn {
        background: var(--warn-bg);
        border-left-color: var(--warn);
    }

    .vt-cert-nota.stop {
        background: var(--bad-bg, #fdefef);
        border-left-color: var(--bad, #b91c1c);
    }

.vt-cert-sep {
    height: 1px;
    background: var(--line);
    margin: 20px 0 16px;
}

/* ---- tabla de tramos ---- */
.vt-cert-tramos {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r);
}

    .vt-cert-tramos table {
        width: 100%;
        border-collapse: collapse;
        min-width: 480px;
    }

    .vt-cert-tramos th {
        background: var(--surface-2);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: var(--muted);
        text-align: left;
        padding: 7px 10px;
        white-space: nowrap;
        border-bottom: 1px solid var(--line);
    }

        .vt-cert-tramos th.n, .vt-cert-tramos td.n {
            text-align: right;
        }

    .vt-cert-tramos td {
        padding: 7px 10px;
        font-size: 12.5px;
        border-bottom: 1px solid var(--line-soft);
    }

        .vt-cert-tramos td.n {
            font-family: 'IBM Plex Mono', monospace;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

    .vt-cert-tramos tr.bajo td {
        background: var(--bad-bg, #fdefef);
    }

    .vt-cert-tramos .cmp {
        display: block;
        font-size: 10.5px;
        color: var(--muted);
        margin-top: 1px;
    }

    .vt-cert-tramos .mg {
        padding: 1px 6px;
        border-radius: 4px;
        font-weight: 600;
    }

    .vt-cert-tramos tfoot td {
        background: var(--cobalt-subtle);
        border-top: 2px solid var(--cobalt);
        border-bottom: none;
        font-weight: 700;
    }

/* El selector segmentado vertical, para opciones de nombre largo */
.vt-seg.vertical {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

    .vt-seg.vertical button {
        border-right: none;
        border-bottom: 1px solid var(--line-soft);
        text-align: left;
        height: 30px;
    }

        .vt-seg.vertical button:last-child {
            border-bottom: none;
        }

/* ---------------------------------------------------------------------
   8b) EL TEXTO DEL CERTIFICADO TIENE QUE ENVOLVER
   Las notas heredaban white-space y fuente monoespaciada del modal, así que
   salían en una sola línea con scroll horizontal. Se corrige por
   especificidad, sin tocar vt-report.css.
   --------------------------------------------------------------------- */
.modal.cert .body {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(90vh - 130px);
}

    .modal.cert .body p,
    .modal.cert .body span,
    .modal.cert .body b,
    .vt-cert-nota,
    .vt-cert-cifra,
    .vt-cert-tabla > div,
    .vt-cert-tabla > div > span,
    .vt-cert-tabla > div > b {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
        max-width: 100%;
    }

.vt-cert-nota {
    display: block;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

    .vt-cert-nota b {
        font-family: inherit;
    }

/* Las etiquetas dejan de tener ancho fijo: con textos largos la fila envuelve
   en vez de empujar el ancho del modal. */
.vt-cert-tabla > div {
    flex-wrap: wrap;
    row-gap: 2px;
}

    .vt-cert-tabla > div > span {
        min-width: 0;
        flex: 1 1 150px;
    }

    .vt-cert-tabla > div > b {
        min-width: 0;
        flex: 0 1 auto;
    }

/* Lo único que puede scrollear de lado es la tabla de tramos, y lo hace
   dentro de su propio contenedor, no arrastrando al modal entero. */
.vt-cert-tramos {
    max-width: 100%;
    overflow-x: auto;
}

/* El valor monoespaciado de una fila puede ser largo (un nombre de campo):
   que corte por caracteres antes que romper el ancho. */
.vt-cert-tabla > div > b.mono {
    overflow-wrap: anywhere;
}