/* Fase 10.7 — CSS verbatim de los bloques de estilo de Pages/Common/Estilos/FormV2Estilos.razor. Igual que hoy, es global mientras el componente está en pantalla:
   se enlaza con <link> donde estaba el bloque. Cambios: @@ → @ y capas D-51. */
.gv-root {
    --de-ground: #f6f7f6;
    --de-surface: #fff;
    --de-surface-2: #fbfcfb;
    --de-surface-3: #eef1ef;
    --de-line: #e2e7e4;
    --de-line-strong: #cfd6d2;
    --de-ink: #17211f;
    --de-ink-2: #3d4a47;
    --de-muted: #6b7a76;
    --de-faint: #93a09c;
    --de-acc: #0f6b5c;
    --de-acc-deep: #0a4f44;
    --de-acc-soft: #e7f1ee;
    --de-acc-line: #bcd8d1;
    --ok: #157f47;
    --ok-bg: #e6f4ec;
    --ok-line: #b4dcc4;
    --warn: #a35a06;
    --warn-bg: #fdf1e1;
    --warn-line: #f0d3a8;
    --err: #b3253f;
    --err-bg: #fceaee;
    --err-line: #f2c2cd;
    --prog: #5b4bbd;
    --prog-bg: #eeecfb;
    --prog-line: #cfc8f0;
    --mono: "IBM Plex Mono",ui-monospace,Consolas,monospace;
    font: 13.5px/1.45 "Libre Franklin","Segoe UI",system-ui,sans-serif;
    color: var(--de-ink);
    background: var(--de-ground);
    min-height: 100vh
}

    /* [FIX] Antes esto era ".gv-root *", ".gv-root button" y ".gv-root input,select,textarea":
       al ser selectores universales/por etiqueta, se aplicaban también a componentes reutilizados
       dentro del módulo (VDateRangePicker, UcBuscarCliente, ClienteFormModal, SeriesCaptureModal…),
       pisando su propio font-size/color/cursor y desalineándolos. Ahora solo alcanzan a elementos
       con una clase "gv-…" propia de este módulo, así los componentes ajenos quedan intactos. */
    .gv-root [class*="gv-"] {
        box-sizing: border-box
    }

    .gv-root button[class*="gv-"] {
        font: inherit;
        cursor: pointer
    }

    .gv-root input[class*="gv-"], .gv-root select[class*="gv-"], .gv-root textarea[class*="gv-"] {
        font: inherit;
        color: var(--de-ink)
    }

.gv-mono {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums
}

.gv-r {
    text-align: right
}

.gv-sp {
    flex: 1
}

.gv-sub {
    font-size: 11.5px;
    color: var(--de-muted)
}

.gv-page {
    max-width: none;
    width: 100%;
    margin: 0 auto;
    padding: 18px 22px 40px
}

.gv-head {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap
}

.gv-eyebrow {
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--de-acc);
    font-weight: 700
}

.gv-head h1 {
    margin: 2px 0 0;
    font-size: 24px;
    font-weight: 600
}

.gv-lead {
    font-size: 12.5px;
    color: var(--de-muted)
}

.gv-chip-ruc {
    border: 1px solid var(--de-line);
    background: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--de-ink-2)
}

    .gv-chip-ruc small {
        display: block;
        font-size: 9.5px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--de-muted);
        font-weight: 700
    }

.gv-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px;
    border-radius: 7px;
    border: 1px solid var(--de-acc);
    background: var(--de-acc);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap
}

    .gv-btn:hover:not(:disabled) {
        background: var(--de-acc-deep)
    }

    .gv-btn:disabled {
        opacity: .45;
        cursor: not-allowed
    }

    .gv-btn.gv-ghost {
        background: #fff;
        color: var(--de-ink-2);
        border-color: var(--de-line-strong)
    }

        .gv-btn.gv-ghost:hover:not(:disabled) {
            background: var(--de-surface-3)
        }

    .gv-btn.gv-soft {
        background: var(--prog-bg);
        color: var(--prog);
        border-color: var(--prog-line)
    }

    .gv-btn.gv-sm {
        height: 28px;
        padding: 0 10px;
        font-size: 12px
    }

    .gv-btn.gv-danger {
        background: var(--err);
        border-color: var(--err)
    }

    .gv-btn.gv-wa {
        background: #1faa53;
        border-color: #1faa53
    }

.gv-ib {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--de-line);
    background: #fff;
    color: var(--de-ink-2);
    display: inline-grid;
    place-items: center;
    flex-shrink: 0
}

    .gv-ib:hover:not(:disabled) {
        border-color: var(--de-acc-line);
        background: var(--de-acc-soft);
        color: var(--de-acc)
    }

    .gv-ib:disabled {
        opacity: .3;
        cursor: not-allowed
    }

    .gv-ib.gv-ib-sm {
        width: 26px;
        height: 26px
    }

    .gv-ib.pulse {
        border-color: var(--prog);
        color: var(--prog);
        animation: gvP 1.6s infinite
    }

@keyframes gvP {
    0% {
        box-shadow: 0 0 0 0 rgba(91,75,189,.45)
    }

    100% {
        box-shadow: 0 0 0 8px rgba(91,75,189,0)
    }
}

.gv-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--de-acc);
    font-weight: 600;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 2px
}

.gv-seg {
    display: inline-flex;
    border: 1px solid var(--de-line-strong);
    border-radius: 7px;
    overflow: hidden;
    background: #fff
}

    .gv-seg button {
        border: 0;
        background: #fff;
        padding: 6px 12px;
        font-size: 12.5px;
        color: var(--de-ink-2);
        display: inline-flex;
        gap: 6px;
        align-items: center
    }

        .gv-seg button + button {
            border-left: 1px solid var(--de-line)
        }

        .gv-seg button.on {
            background: var(--de-acc);
            color: #fff
        }

.gv-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--de-line);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 10px
}

.gv-inp {
    height: 34px;
    border: 1px solid var(--de-line-strong);
    border-radius: 6px;
    padding: 4px 9px;
    background: #fff;
    outline: none;
    min-width: 0;
    width: 100%
}

    .gv-inp:focus {
        border-color: var(--de-acc);
        box-shadow: 0 0 0 3px rgba(15,107,92,.12)
    }

.gv-filters .gv-inp {
    width: auto
}

.gv-srch {
    position: relative;
    flex: 1;
    min-width: 220px
}

    .gv-srch i {
        position: absolute;
        left: 10px;
        top: 11px;
        color: var(--de-faint);
        font-size: 12px
    }

    .gv-srch .gv-inp {
        width: 100%;
        padding-left: 30px
    }

.gv-how {
    background: #eaf1fd;
    color: #1a56db;
    border: 1px solid #cddcfb;
    border-radius: 7px;
    height: 34px;
    padding: 0 12px;
    font-weight: 600;
    display: inline-flex;
    gap: 7px;
    align-items: center
}

.gv-kpis {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 10px;
    margin-bottom: 14px
}

@media(max-width:1100px) {
    .gv-kpis {
        grid-template-columns: repeat(3,1fr)
    }
}

@media(max-width:640px) {
    .gv-kpis {
        grid-template-columns: repeat(2,1fr)
    }
}

.gv-kpi {
    background: #fff;
    border: 1px solid var(--de-line);
    border-left: 3px solid var(--de-line-strong);
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 0;
    overflow: hidden
}

    .gv-kpi small {
        display: block;
        color: var(--de-muted);
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .gv-kpi b {
        display: block;
        font-size: 24px;
        font-weight: 600;
        margin-top: 2px
    }

    .gv-kpi span {
        font-size: 11.5px;
        color: var(--de-muted)
    }

    .gv-kpi.ok {
        border-left-color: var(--ok)
    }

    .gv-kpi.gv-prog {
        border-left-color: var(--prog)
    }

    .gv-kpi.warn {
        border-left-color: var(--warn)
    }

    .gv-kpi.err {
        border-left-color: var(--err)
    }

    .gv-kpi.acc {
        border-left-color: var(--de-acc)
    }

.gv-tbl {
    background: #fff;
    border: 1px solid var(--de-line);
    border-radius: 10px;
    overflow: auto
}

.gv-tbl-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid var(--de-line);
    font-size: 12px;
    color: var(--de-muted)
}

table.gv-lst {
    width: 100%;
    border-collapse: collapse;
    min-width: 1180px
}

.gv-lst th {
    background: var(--de-surface-2);
    color: var(--de-muted);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    text-align: left;
    padding: 9px 10px;
    border-bottom: 1px solid var(--de-line);
    white-space: nowrap
}

.gv-lst td {
    padding: 10px;
    border-bottom: 1px solid var(--de-line);
    vertical-align: middle
}

/* ── Blindaje anti-"tabla responsive apilada" ──────────────────────────────
   
   lugar de la app (layout, Bootstrap, otra página) existe un patrón del tipo       
   volver las tablas responsive en móvil, esa regla puede alcanzar esta tabla
   también, sin que nuestro prefijo "gv-" la frene (porque esa regla externa
   apunta a las etiquetas table/tr/td directamente, no a una clase). El
   WebView2 respeta el escalado de Windows, así que un monitor al 150-250%
   puede cruzar ese breakpoint aunque la ventana se vea ancha en pantalla.
   Este bloque fuerza el rol de tabla SIEMPRE, sin condicionarlo a ningún
   ancho, con !important para ganarle a esa regla externa. */
.gv-tbl table.gv-lst,
.gv-tbl table.gv-lst thead,
.gv-tbl table.gv-lst tbody,
.gv-tbl table.gv-lst tfoot { display: table !important; width: 100% !important }

.gv-tbl table.gv-lst thead { display: table-header-group !important }
.gv-tbl table.gv-lst tbody { display: table-row-group !important }
.gv-tbl table.gv-lst tfoot { display: table-footer-group !important }

.gv-tbl table.gv-lst tr,
.gv-tbl table.gv-lst tr.row,
.gv-tbl table.gv-lst tr.day,
.gv-tbl table.gv-lst tr.gv-det { display: table-row !important; width: auto !important }

.gv-tbl table.gv-lst th,
.gv-tbl table.gv-lst td { display: table-cell !important; width: auto !important; float: none !important }

.gv-lst tr.day td {
    background: #f1f6f4;
    padding: 8px 12px
}

.gv-dayh {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--de-ink-2);
    flex-wrap: wrap
}

.gv-dbar {
    width: 130px;
    height: 6px;
    border-radius: 4px;
    background: var(--de-line);
    display: flex;
    overflow: hidden
}

    .gv-dbar i {
        display: block;
        height: 100%
    }

.gv-dcnt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--de-muted);
    display: flex;
    gap: 10px
}

.gv-dtot {
    margin-left: auto;
    border: 1px solid var(--de-line-strong);
    border-radius: 20px;
    background: #fff;
    padding: 2px 10px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0
}

.gv-lst tr.row {
    cursor: pointer
}

    .gv-lst tr.row:hover td {
        background: #fafcfb
    }

    .gv-lst tr.row.open td {
        background: #f7fbfa
    }

    .gv-lst tr.row.nuevo td {
        animation: gvFlash 2.6s ease
    }

@keyframes gvFlash {
    0%, 35% {
        background: #fff7d6
    }

    100% {
        background: #fff
    }
}

.gv-chev {
    color: var(--de-faint);
    transition: transform .15s;
    width: 14px
}

.row.open .gv-chev {
    transform: rotate(90deg);
    color: var(--de-acc)
}

.gv-tbadge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--de-line-strong);
    border-radius: 5px;
    padding: 1px 6px;
    background: #fff
}

    .gv-tbadge.t31 {
        border-color: var(--prog-line);
        color: var(--prog);
        background: var(--prog-bg)
    }

.gv-sn {
    font-family: var(--mono);
    font-weight: 600;
    white-space: nowrap
}

    .gv-sn.anu {
        text-decoration: line-through;
        color: var(--de-faint)
    }

.gv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid;
    white-space: nowrap
}

    .gv-chip::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor
    }

    .gv-chip.ok {
        color: var(--ok);
        background: var(--ok-bg);
        border-color: var(--ok-line)
    }

    .gv-chip.warn {
        color: var(--warn);
        background: var(--warn-bg);
        border-color: var(--warn-line)
    }

    .gv-chip.err {
        color: var(--err);
        background: var(--err-bg);
        border-color: var(--err-line)
    }

    .gv-chip.prog {
        color: var(--prog);
        background: var(--prog-bg);
        border-color: var(--prog-line)
    }

    .gv-chip.neutral {
        color: var(--de-muted);
        background: var(--de-surface-3);
        border-color: var(--de-line)
    }

    .gv-chip.prog::before {
        animation: gvB 1.4s ease-in-out infinite
    }

    .gv-chip.confirm {
        animation: gvP 1.6s infinite
    }

@keyframes gvB {
    50% {
        opacity: .25
    }
}

.gv-tagm {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    border-radius: 5px;
    padding: 1px 7px;
    background: var(--de-acc-soft);
    color: var(--de-acc-deep);
    white-space: nowrap
}

.gv-ruta {
    font-size: 11.5px;
    color: var(--de-ink-2);
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

/* [V2.2] motivo 04 · transferencia de almacén vinculada (badge de fila + caja del detalle) */
span[class*="gv-tagm-tr"] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    background: var(--ok-bg, #e6f6ec);
    color: var(--ok, #1a7f43)
}

div[class*="gv-trbox"] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--de-line, #e2e2e2)
}

div[class*="gv-trtit"] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ok, #1a7f43);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px
}

div[class*="gv-trflow"] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px
}

    span[class*="gv-trend"] {
        font-family: var(--mono);
        font-weight: 600;
        background: var(--de-bg-2, #f4f4f6);
        border-radius: 5px;
        padding: 2px 8px
    }

        span[class*="gv-trend"] b {
            font-weight: 400;
            color: var(--de-ink-2);
            margin: 0 2px
        }

    i[class*="gv-trarrow"] {
        color: var(--de-ink-2);
        font-size: 13px
    }

.gv-resp {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--de-ink-2);
    max-width: 250px
}

    .gv-resp .t {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

.gv-code {
    font-family: var(--mono);
    font-size: 10.5px;
    border-radius: 4px;
    padding: 1px 5px;
    flex-shrink: 0
}

    .gv-code.o {
        background: var(--ok-bg);
        color: var(--ok)
    }

    .gv-code.e {
        background: var(--err-bg);
        color: var(--err)
    }

    .gv-code.w {
        background: var(--warn-bg);
        color: var(--warn)
    }

    .gv-code.p {
        background: var(--prog-bg);
        color: var(--prog)
    }

.gv-acts {
    display: flex;
    gap: 4px;
    justify-content: flex-end
}

.gv-luego {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--warn);
    background: var(--warn-bg);
    border-radius: 4px;
    padding: 1px 6px
}

tr.gv-det td {
    background: #fbfdfc;
    padding: 0 12px 14px 40px;
    border-bottom: 1px solid var(--de-line)
}

.gv-detw {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 12px;
    padding-top: 6px
}

@media(max-width:1000px) {
    .gv-detw {
        grid-template-columns: 1fr
    }
}

.gv-card {
    background: #fff;
    border: 1px solid var(--de-line);
    border-radius: 10px;
    overflow: hidden
}

.gv-card-h {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--de-line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--de-ink-2);
    background: var(--de-surface-2)
}

    .gv-card-h i {
        color: var(--de-acc)
    }

    .gv-card-h .r {
        margin-left: auto;
        text-transform: none;
        letter-spacing: 0;
        font-weight: 500
    }

.gv-card-b {
    padding: 10px 12px
}

.gv-kv {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 12px;
    font-size: 12.5px;
    margin: 0
}

    .gv-kv dt {
        color: var(--de-muted)
    }

    .gv-kv dd {
        margin: 0;
        font-weight: 500
    }

.gv-lschips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px
}

.gv-lsc {
    font-family: var(--mono);
    font-size: 10.5px;
    border-radius: 4px;
    padding: 1px 6px;
    background: var(--de-surface-3);
    color: var(--de-ink-2)
}

    .gv-lsc.l {
        background: #eef6ff;
        color: #1d4ed8
    }

    .gv-lsc.s {
        background: #f3efff;
        color: #5b21b6
    }

    .gv-lsc.t {
        background: #fff4e5;
        color: #92400e
    }
/* modales */
.gv-ovl {
    position: fixed;
    inset: 0;
    background: rgba(14,26,23,.45);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal); /* D-51 (era 1050) */
    padding: 14px
}

    .gv-ovl.gv-on {
        display: flex;
        animation: gvFi .15s
    }

@keyframes gvFi {
    from {
        opacity: 0
    }
}

.gv-mdl {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 28px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(14,26,23,.28)
}

.gv-mdl-h {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    background: var(--de-surface-2);
    border-bottom: 1px solid var(--de-line);
    flex-shrink: 0
}

    .gv-mdl-h h3 {
        margin: 0;
        font-size: 14.5px;
        font-weight: 700
    }

.gv-s {
    font-size: 11.5px;
    color: var(--de-muted)
}

.gv-x {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--de-line);
    background: #fff;
    color: var(--de-muted);
    flex-shrink: 0
}

.gv-mdl-b {
    padding: 16px 18px;
    overflow: auto
}

.gv-mdl-f {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 11px 18px;
    border-top: 1px solid var(--de-line);
    background: var(--de-surface-2);
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0
}

@media(max-width:640px) {
    .gv-ovl {
        padding: 0
    }

    .gv-mdl {
        max-height: 100vh;
        height: 100vh;
        border-radius: 0
    }
}

.gv-pick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

@media(max-width:560px) {
    .gv-pick {
        grid-template-columns: 1fr
    }
}

.gv-pk {
    border: 2px solid var(--de-line);
    border-radius: 12px;
    padding: 16px;
    background: #fff;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px
}

    .gv-pk:hover {
        border-color: var(--de-acc);
        background: var(--de-acc-soft)
    }

    .gv-pk i {
        font-size: 26px;
        color: var(--de-acc)
    }

    .gv-pk b {
        font-size: 15px
    }

    .gv-pk small {
        color: var(--de-muted);
        font-size: 12px
    }
/* editor */
.gv-mdl.gv-big {
    max-width: 1360px;
    height: calc(100vh - 28px)
}

.gv-cfgstrip {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    padding: 6px 18px;
    background: var(--warn-bg);
    border-bottom: 1px solid var(--warn-line);
    font-size: 12px;
    color: #6b3b04
}

.gv-ed {
    display: grid;
    grid-template-columns: minmax(0,1fr) 310px;
    min-height: 0;
    flex: 1
}

.gv-ed-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    border-right: 1px solid var(--de-line)
}

@media(max-width:980px) {
    .gv-ed {
        display: block;
        overflow: auto
    }

    .gv-ed-main {
        display: block;
        border-right: 0
    }

    .gv-tabs {
        position: sticky;
        top: 0;
        z-index: 5
    }

    .gv-side {
        border-top: 1px solid var(--de-line)
    }

    .gv-ed-body {
        overflow: visible
    }

    .gv-mdl-f .gv-btn {
        flex: 1;
        justify-content: center
    }
}

.gv-tabs {
    display: flex;
    gap: 4px;
    padding: 0 18px;
    border-bottom: 1px solid var(--de-line);
    background: #fff;
    overflow-x: auto;
    flex-shrink: 0
}

.gv-tab {
    border: 0;
    background: none;
    padding: 11px 12px;
    font-weight: 600;
    color: var(--de-muted);
    border-bottom: 3px solid transparent;
    display: flex;
    gap: 7px;
    align-items: center;
    white-space: nowrap
}

    .gv-tab.on {
        color: var(--de-acc);
        border-bottom-color: var(--de-acc)
    }

.gv-n {
    font-size: 10.5px;
    border-radius: 10px;
    padding: 0 6px;
    background: var(--err-bg);
    color: var(--err)
}

    .gv-n.ok {
        background: var(--ok-bg);
        color: var(--ok)
    }

.gv-ed-body {
    padding: 14px 18px;
    overflow: auto;
    flex: 1
}

.gv-sec {
    border: 1px solid var(--de-line);
    border-radius: 10px;
    margin-bottom: 12px;
    background: #fff
}

.gv-sec-h {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--de-line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--de-ink-2);
    background: var(--de-surface-2);
    border-radius: 10px 10px 0 0;
    flex-wrap: wrap
}

    .gv-sec-h i {
        color: var(--de-acc)
    }

    .gv-sec-h .r {
        margin-left: auto;
        text-transform: none;
        letter-spacing: 0;
        font-weight: 500
    }

.gv-sec-b {
    padding: 10px 12px
}

.gv-g {
    display: grid;
    gap: 9px 12px
}

.gv-g2 {
    grid-template-columns: 1fr 1fr
}

.gv-g3 {
    grid-template-columns: repeat(3,1fr)
}

.gv-g4 {
    grid-template-columns: repeat(4,1fr)
}

@media(max-width:760px) {
    .gv-g3, .gv-g4 {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:480px) {
    .gv-g2, .gv-g3, .gv-g4 {
        grid-template-columns: 1fr
    }
}

.gv-f label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--de-muted);
    margin-bottom: 3px
}

.gv-f .req {
    color: var(--err)
}

.gv-f.bad .gv-inp {
    border-color: var(--err);
    background: #fffafa
}

.gv-em {
    font-size: 11px;
    color: var(--err);
    margin-top: 3px;
    display: flex;
    gap: 5px
}

.gv-hint {
    font-size: 11px;
    color: var(--de-muted);
    margin-top: 3px
}

.gv-ac {
    position: relative
}

    .gv-ac .gv-inp {
        padding-left: 30px
    }

    .gv-ac > i {
        position: absolute;
        left: 10px;
        top: 11px;
        color: var(--de-faint);
        font-size: 12px
    }

.gv-drop {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid var(--de-line);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
    z-index: 30;
    max-height: 300px;
    overflow: auto
}

    .gv-drop .it {
        padding: 8px 11px;
        border-bottom: 1px solid #f1f3f2;
        cursor: pointer
    }

        .gv-drop .it:hover, .gv-drop .it.act {
            background: var(--de-acc-soft)
        }

        .gv-drop .it .m {
            display: flex;
            gap: 10px;
            font-size: 11px;
            color: var(--de-muted);
            margin-top: 1px;
            flex-wrap: wrap
        }

.gv-dtype {
    display: inline-block;
    min-width: 34px;
    text-align: center;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 4px;
    padding: 1px 5px;
    margin-right: 6px
}

    .gv-dtype.t01 {
        background: #e8f0fe;
        color: #1d4ed8
    }

    .gv-dtype.t03 {
        background: #eef6ff;
        color: #0369a1
    }

    .gv-dtype.tPE {
        background: #fff4e5;
        color: #92400e
    }

    .gv-dtype.tCO {
        background: #f3efff;
        color: #5b21b6
    }

.gv-cli-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--de-acc-line);
    background: var(--de-acc-soft);
    border-radius: 9px;
    margin-top: 8px;
    flex-wrap: wrap
}

.gv-av {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid var(--de-acc-line);
    display: grid;
    place-items: center;
    font-weight: 800;
    color: var(--de-acc);
    flex-shrink: 0
}

.gv-pulled {
    display: flex;
    gap: 10px;
    align-items: center;
    border: 1px solid #cddcfb;
    background: #f3f7ff;
    border-radius: 9px;
    padding: 8px 12px;
    margin-top: 8px;
    font-size: 12.5px;
    color: #1e3a8a;
    flex-wrap: wrap
}

.gv-sug {
    border: 1px dashed var(--de-acc-line);
    border-radius: 9px;
    padding: 8px 10px;
    background: #fbfefd;
    margin-top: 8px
}

    .gv-sug.pulse {
        animation: gvPu 1.6s ease-out 3
    }

@keyframes gvPu {
    0% {
        box-shadow: 0 0 0 0 rgba(15,107,92,.45)
    }

    100% {
        box-shadow: 0 0 0 10px rgba(15,107,92,0)
    }
}

.gv-sug-h {
    font-size: 11px;
    font-weight: 700;
    color: var(--de-acc);
    text-transform: uppercase;
    letter-spacing: .05em;
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px
}

.gv-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--de-acc-line);
    background: #fff;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    margin: 0 6px 6px 0;
    cursor: pointer
}

    .gv-pill:hover {
        background: var(--de-acc);
        color: #fff;
        border-color: var(--de-acc)
    }

    .gv-pill small {
        color: var(--de-muted)
    }

    .gv-pill:hover small {
        color: #d7ece7
    }

.gv-opts {
    display: grid;
    gap: 6px
}

    .gv-opts.fixme {
        outline: 2px solid var(--err);
        outline-offset: 3px;
        border-radius: 8px
    }

.gv-opt {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    border: 1px solid var(--de-line);
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
    background: #fff
}

    .gv-opt:hover {
        border-color: var(--de-acc-line)
    }

    .gv-opt.on {
        border-color: var(--de-acc);
        background: var(--de-acc-soft)
    }

    .gv-opt .dot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 2px solid var(--de-line-strong);
        margin-top: 2px;
        flex-shrink: 0
    }

    .gv-opt.on .dot {
        border-color: var(--de-acc);
        background: radial-gradient(var(--de-acc) 45%,#fff 50%)
    }

    .gv-opt small {
        display: block;
        color: var(--de-muted);
        font-size: 11px
    }

.gv-mods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

@media(max-width:560px) {
    .gv-mods {
        grid-template-columns: 1fr
    }
}

.gv-mod {
    border: 2px solid var(--de-line);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: center;
    background: #fff
}

    .gv-mod i {
        font-size: 20px;
        color: var(--de-faint)
    }

    .gv-mod.on {
        border-color: var(--de-acc);
        background: var(--de-acc-soft)
    }

        .gv-mod.on i {
            color: var(--de-acc)
        }

    .gv-mod b {
        display: block
    }

    .gv-mod small {
        color: var(--de-muted)
    }

.gv-qadd {
    display: grid;
    grid-template-columns: 1fr 80px 90px 100px auto;
    gap: 6px;
    align-items: end;
    padding: 8px;
    background: var(--de-surface-2);
    border: 1px dashed var(--de-line-strong);
    border-radius: 8px;
    margin-top: 8px
}

@media(max-width:760px) {
    .gv-qadd {
        grid-template-columns: 1fr 1fr
    }
}

.gv-linw {
    overflow: auto;
    margin-top: 10px
}

table.gv-lin {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    min-width: 720px
}

.gv-lin th {
    background: var(--de-surface-2);
    color: var(--de-muted);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
    padding: 7px 8px;
    border-bottom: 1px solid var(--de-line);
    white-space: nowrap
}

.gv-lin td {
    padding: 6px 8px;
    border-bottom: 1px solid #f0f2f1;
    vertical-align: middle
}

.gv-lin .n {
    text-align: right
}

.gv-lin input.q, .gv-lin input.p {
    height: 28px;
    text-align: right;
    border: 1px solid var(--de-line-strong);
    border-radius: 5px;
    padding: 0 6px;
    font-family: var(--mono)
}

.gv-lin input.q {
    width: 74px
}

.gv-lin input.p {
    width: 86px
}

.gv-lin select.af {
    height: 28px;
    border: 1px solid var(--de-line-strong);
    border-radius: 5px;
    font-size: 11.5px
}

.gv-empty {
    text-align: center;
    padding: 22px !important;
    color: var(--de-muted)
}

    .gv-empty i {
        font-size: 20px;
        display: block;
        margin-bottom: 6px
    }

.gv-man {
    font-size: 10px;
    font-weight: 700;
    background: #fff4e5;
    color: #92400e;
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 5px
}

.gv-trg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    cursor: pointer;
    background: #fff;
    white-space: nowrap;
    margin: 1px 0
}

    .gv-trg.ok {
        color: var(--ok);
        border-color: var(--ok-line);
        background: var(--ok-bg)
    }

    .gv-trg.off {
        color: var(--de-muted);
        border-color: var(--de-line);
        background: var(--de-surface-3)
    }

    .gv-trg.info {
        color: var(--prog);
        border-color: var(--prog-line);
        background: var(--prog-bg);
        cursor: default
    }

    .gv-trg.warn {
        color: var(--warn);
        border-color: var(--warn-line);
        background: var(--warn-bg);
        animation: gvW 1.8s infinite
    }

@keyframes gvW {
    0% {
        box-shadow: 0 0 0 0 rgba(163,90,6,.4)
    }

    100% {
        box-shadow: 0 0 0 7px rgba(163,90,6,0)
    }
}

.gv-side {
    padding: 14px;
    overflow: auto;
    background: var(--de-surface-2)
}

    .gv-side h4 {
        margin: 0 0 8px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--de-muted)
    }

.gv-chk {
    list-style: none;
    margin: 0 0 14px;
    padding: 0
}

    .gv-chk li {
        display: flex;
        gap: 8px;
        align-items: flex-start;
        padding: 5px 0;
        font-size: 12.5px;
        border-bottom: 1px dashed var(--de-line);
        cursor: pointer
    }

        .gv-chk li i {
            margin-top: 3px;
            width: 14px
        }

        .gv-chk li.ok i {
            color: var(--ok)
        }

        .gv-chk li.bad i {
            color: var(--err)
        }

        .gv-chk li.bad:hover {
            color: var(--de-acc)
        }

.gv-tot {
    background: #fff;
    border: 1px solid var(--de-line);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px
}

    .gv-tot .r {
        display: flex;
        justify-content: space-between;
        padding: 2px 0;
        font-size: 12.5px
    }

        .gv-tot .r b {
            font-family: var(--mono)
        }

        .gv-tot .r.z {
            color: var(--de-faint)
        }

    .gv-tot .big {
        border-top: 1px solid var(--de-line);
        margin-top: 4px;
        padding-top: 6px;
        font-size: 15px
    }

    .gv-tot .more {
        background: none;
        border: 0;
        color: var(--de-acc);
        font-size: 11.5px;
        font-weight: 600;
        padding: 4px 0 0
    }

.gv-fac {
    border: 1px solid var(--de-line);
    border-radius: 10px;
    background: #fff;
    padding: 10px 12px;
    margin-bottom: 12px
}

.gv-sw {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    margin: 0;
    font-size: 12.5px
}

    .gv-sw input[type=checkbox] {
        display: none
    }

    .gv-sw .t {
        width: 36px;
        height: 20px;
        border-radius: 20px;
        background: var(--de-line-strong);
        position: relative;
        transition: .15s;
        flex-shrink: 0
    }

        .gv-sw .t::after {
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #fff;
            transition: .15s
        }

    .gv-sw input:checked + .t {
        background: var(--de-acc)
    }

        .gv-sw input:checked + .t::after {
            left: 18px
        }

.gv-f label.gv-sw {
    display: flex;
    color: var(--de-ink);
    font-weight: 500;
    font-size: 12.5px
}

.gv-fixbox {
    border: 1px solid var(--err-line);
    background: #fffafa;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: 12.5px;
    color: #7d1a2c;
    display: flex;
    gap: 8px
}
/* envío */
.gv-timer {
    text-align: center;
    font-family: var(--mono);
    font-size: 30px;
    font-weight: 600;
    color: var(--de-acc-deep)
}

    .gv-timer small {
        display: block;
        font-family: "Libre Franklin",sans-serif;
        font-size: 11px;
        color: var(--de-muted);
        font-weight: 600
    }

.gv-steps {
    list-style: none;
    margin: 12px 0 0;
    padding: 0
}

    .gv-steps li {
        display: flex;
        gap: 10px;
        align-items: center;
        padding: 7px 10px;
        border-radius: 8px;
        color: var(--de-faint);
        font-size: 13px
    }

        .gv-steps li .st {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 2px solid var(--de-line-strong);
            display: grid;
            place-items: center;
            font-size: 10px;
            flex-shrink: 0
        }

        .gv-steps li .t {
            margin-left: auto;
            font-family: var(--mono);
            font-size: 11px
        }

        .gv-steps li.run {
            color: var(--de-ink);
            background: var(--de-acc-soft)
        }

            .gv-steps li.run .st {
                border-color: var(--de-acc);
                border-top-color: transparent;
                animation: gvS .8s linear infinite
            }

        .gv-steps li.done {
            color: var(--de-ink)
        }

            .gv-steps li.done .st {
                background: var(--ok);
                border-color: var(--ok);
                color: #fff
            }

        .gv-steps li.fail {
            color: var(--err)
        }

            .gv-steps li.fail .st {
                background: var(--err);
                border-color: var(--err);
                color: #fff
            }

        .gv-steps li.wait {
            color: var(--prog);
            background: var(--prog-bg)
        }

            .gv-steps li.wait .st {
                border-color: var(--prog);
                color: var(--prog)
            }

@keyframes gvS {
    to {
        transform: rotate(360deg)
    }
}

.gv-cd {
    display: flex;
    gap: 14px;
    align-items: center;
    border: 1px solid var(--prog-line);
    background: var(--prog-bg);
    border-radius: 10px;
    padding: 12px;
    margin-top: 10px;
    color: #3b2f86;
    flex-wrap: wrap
}

.gv-ring {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    position: relative
}

    .gv-ring svg {
        transform: rotate(-90deg)
    }

    .gv-ring b {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        font-family: var(--mono);
        font-size: 18px
    }

.gv-stage {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap
}

    .gv-stage div {
        flex: 1;
        min-width: 150px;
        border: 1px solid var(--de-line);
        border-radius: 8px;
        padding: 6px 10px;
        font-size: 12px;
        color: var(--de-muted);
        display: flex;
        gap: 7px;
        align-items: center
    }

        .gv-stage div.on {
            border-color: var(--de-acc);
            color: var(--de-acc-deep);
            background: var(--de-acc-soft);
            font-weight: 600
        }

        .gv-stage div.ok {
            border-color: var(--ok-line);
            color: var(--ok);
            background: var(--ok-bg)
        }

        .gv-stage div.bad {
            border-color: var(--err-line);
            color: var(--err);
            background: var(--err-bg)
        }

        .gv-stage div.pend {
            border-color: var(--warn-line);
            color: var(--warn);
            background: var(--warn-bg)
        }

.gv-res {
    text-align: center;
    margin-top: 10px
}

    .gv-res .ic {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        margin: 2px auto 8px;
        font-size: 26px
    }

    .gv-res.ok .ic {
        background: var(--ok-bg);
        color: var(--ok)
    }

    .gv-res.err .ic {
        background: var(--err-bg);
        color: var(--err)
    }

    .gv-res.warn .ic {
        background: var(--warn-bg);
        color: var(--warn)
    }

    .gv-res.prog .ic {
        background: var(--prog-bg);
        color: var(--prog)
    }

    .gv-res h2 {
        margin: 0;
        font-size: 17px
    }

    .gv-res .doc {
        font-family: var(--mono);
        font-size: 20px;
        font-weight: 600;
        color: var(--de-acc-deep);
        margin: 4px 0
    }

.gv-box {
    text-align: left;
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 12.5px;
    margin-top: 10px;
    border: 1px solid
}

    .gv-box.ok {
        background: var(--ok-bg);
        border-color: var(--ok-line);
        color: #0e4f2d
    }

    .gv-box.err {
        background: var(--err-bg);
        border-color: var(--err-line);
        color: #7d1a2c
    }

    .gv-box.warn {
        background: var(--warn-bg);
        border-color: var(--warn-line);
        color: #6b3b04
    }

    .gv-box.prog {
        background: var(--prog-bg);
        border-color: var(--prog-line);
        color: #3b2f86
    }

    .gv-box.info {
        background: #f8faf9;
        border-color: var(--de-line);
        color: var(--de-ink-2)
    }

    .gv-box .sep {
        border-top: 1px dotted currentColor;
        opacity: .5;
        margin: 8px 0
    }

.gv-risk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700
}

    .gv-risk.bajo {
        background: var(--ok-bg);
        color: var(--ok)
    }

    .gv-risk.medio {
        background: var(--warn-bg);
        color: var(--warn)
    }

    .gv-risk.alto {
        background: var(--err-bg);
        color: var(--err)
    }

.gv-docs2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px
}

@media(max-width:560px) {
    .gv-docs2 {
        grid-template-columns: 1fr
    }
}

.gv-dcard {
    border: 1px solid var(--de-line);
    border-radius: 10px;
    padding: 10px 12px;
    text-align: left
}

    .gv-dcard .gv-sn {
        font-size: 15px
    }

.gv-acts3 {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin-top: 12px
}

    .gv-acts3 .gv-btn {
        justify-content: center;
        height: 38px
    }

@media(max-width:560px) {
    .gv-acts3 {
        grid-template-columns: 1fr
    }
}

.gv-pdfv {
    background: #525659;
    flex: 1;
    position: relative
}

    .gv-pdfv iframe {
        border: 0;
        width: 100%;
        height: 100%
    }

.gv-pdfmsg {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 14px
}

.gv-toast {
    position: fixed;
    right: 16px;
    bottom: 16px;
    background: #17211f;
    color: #fff;
    border-radius: 8px;
    padding: 10px 14px;
    z-index: var(--z-toast); /* D-51 (era 1200) */
    display: flex;
    gap: 8px;
    align-items: center;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    max-width: 440px
}

.gv-how-steps {
    counter-reset: s;
    list-style: none;
    padding: 0;
    margin: 0
}

    .gv-how-steps li {
        counter-increment: s;
        display: flex;
        gap: 10px;
        padding: 7px 0;
        border-bottom: 1px dashed var(--de-line);
        font-size: 13px
    }

        .gv-how-steps li::before {
            content: counter(s);
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--de-acc);
            color: #fff;
            display: grid;
            place-items: center;
            font-size: 11px;
            font-weight: 700;
            flex-shrink: 0
        }

.gv-loading {
    padding: 30px;
    text-align: center;
    color: var(--de-muted)
}
/* ── [V2.1] conductor 5 columnas, orden, paginación, columnas opcionales, hash ── */
.gv-g5 {
    grid-template-columns: 1.1fr 1fr 1.3fr 1.3fr 1fr
}

@media(max-width:900px) {
    .gv-g5 {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:480px) {
    .gv-g5 {
        grid-template-columns: 1fr
    }
}

.gv-lst th.srt {
    cursor: pointer;
    user-select: none
}

    .gv-lst th.srt:hover {
        color: var(--de-acc)
    }

    .gv-lst th.srt i {
        margin-left: 4px;
        font-size: 9px;
        opacity: .35
    }

    .gv-lst th.srt.on {
        color: var(--de-acc)
    }

        .gv-lst th.srt.on i {
            opacity: 1
        }

.gv-lst td.n, .gv-lst th.n {
    text-align: right;
    white-space: nowrap
}

.gv-pager {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 9px 12px;
    border-top: 1px solid var(--de-line);
    font-size: 12px;
    color: var(--de-muted)
}

    .gv-pager .gv-inp {
        width: auto;
        height: 30px
    }

    .gv-pager .gv-sp {
        flex: 1
    }

    .gv-pager button {
        min-width: 30px;
        height: 30px;
        border: 1px solid var(--de-line-strong);
        background: #fff;
        border-radius: 6px;
        color: var(--de-ink-2);
        cursor: pointer
    }

        .gv-pager button.on {
            background: var(--de-acc);
            border-color: var(--de-acc);
            color: #fff
        }

        .gv-pager button:disabled {
            opacity: .4;
            cursor: default
        }

.gv-hash {
    font-family: var(--mono);
    font-size: 11px;
    word-break: break-all;
    background: var(--de-surface-3);
    border-radius: 6px;
    padding: 6px 8px;
    margin-top: 8px
}

.gv-more {
    cursor: pointer;
    background: var(--de-acc-soft);
    color: var(--de-acc)
}

/* ══════════════ FormV2 · extensiones genéricas ══════════════ */
/* ══ FormV2 · extensiones genéricas (se agregarán al final de FormV2Estilos) ══ */

/* bloqueo de scroll del fondo mientras haya un modal gv abierto (sin JS) */
body:has(.gv-ovl.gv-on) { overflow: hidden }

/* foco visible por teclado */
.gv-btn:focus-visible, .gv-ib:focus-visible, .gv-x:focus-visible, .gv-tab:focus-visible,
.gv-seg button:focus-visible, .gv-pager button:focus-visible, .gv-menu-it:focus-visible, .gv-link:focus-visible {
outline: 2px solid var(--de-acc); outline-offset: 2px
}

/* capa alta: modal de registro que convive con overlays legados de z-index alto */
.gv-ovl.gv-top { z-index: var(--z-modal-2) } /* D-51 (era 10050) */

/* modal de formulario extra ancho (registro de documentos) */
.gv-mdl.gv-xl { max-width: 1440px; height: calc(100vh - 28px); height: calc(100dvh - 28px) }
@media(max-width:640px) { .gv-mdl.gv-xl { height: 100vh; height: 100dvh } }

/* encabezado de modal con herramientas */
.gv-mdl-h .gv-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
.gv-vsep { width: 1px; height: 22px; background: var(--de-line); flex-shrink: 0 }

/* botón-icono semántico + contador */
.gv-ib.gv-ib-danger:hover:not(:disabled) { border-color: var(--err-line); background: var(--err-bg); color: var(--err) }
.gv-ib.gv-ib-ok:hover:not(:disabled) { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok) }
.gv-ibw { position: relative; display: inline-flex }
.gv-ibw .gv-cnt { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--de-acc); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; line-height: 1 }

/* franja de parámetros bajo el encabezado (sucursal, almacén, IGV, T.C.) */
.gv-metabar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 7px 18px; background: #fff; border-bottom: 1px solid var(--de-line); font-size: 12px; flex-shrink: 0 }
.gv-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 1px solid var(--de-line); border-radius: 6px; background: var(--de-surface-2); color: var(--de-muted); white-space: nowrap }
.gv-tag b { color: var(--de-ink); font-weight: 600 }
.gv-tag i { color: var(--de-acc) }
.gv-seg.gv-seg-sm button { padding: 3px 9px; font-size: 12px }
.gv-seg button .gv-mono { opacity: .8 }

/* editor sin lateral (lateral colapsado) */
.gv-ed.gv-noside { grid-template-columns: minmax(0,1fr) 0 }
.gv-ed.gv-noside .gv-side { display: none }
.gv-ed.gv-noside .gv-ed-main { border-right: 0 }

/* subgrupo dentro de una sección */
.gv-subh { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--de-muted); margin: 4px 0 7px; display: flex; gap: 6px; align-items: center }
.gv-subh i { color: var(--de-acc) }
.gv-sec-b .gv-subh ~ .gv-subh { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--de-line) }
.gv-span2 { grid-column: span 2 }
@media(max-width:480px) { .gv-span2 { grid-column: auto } }
.gv-inp:disabled { background: var(--de-surface-3); color: var(--de-muted); cursor: not-allowed }

/* KPIs de 4 columnas */
.gv-kpis.gv-k4 { grid-template-columns: repeat(4,1fr) }
@media(max-width:760px) { .gv-kpis.gv-k4 { grid-template-columns: repeat(2,1fr) } }

/* listado ancho (más columnas) */
table.gv-lst.gv-wide { min-width: 1560px }
.gv-lst td.gv-ell { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.gv-lst td.gv-c, .gv-lst th.gv-c { text-align: center }

/* menú flotante de acciones (fuera del contenedor con scroll) */
.gv-menu-bk { position: fixed; inset: 0; z-index: calc(var(--z-desplegable) - 1) } /* D-51 (era 1040) */
.gv-menu { position: fixed; z-index: var(--z-desplegable); /* D-51 (era 1045) */ min-width: 220px; background: #fff; border: 1px solid var(--de-line); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.14); padding: 6px; animation: gvFi .12s }
.gv-menu-h { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--de-faint); padding: 4px 8px }
.gv-menu-it { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; padding: 7px 8px; border-radius: 7px; font-size: 12.5px; color: var(--de-ink); text-align: left; cursor: pointer }
.gv-menu-it:hover { background: var(--de-acc-soft); color: var(--de-acc-deep) }
.gv-menu-it i { width: 14px; color: var(--de-acc) }
.gv-menu-it .gv-tbadge { margin-left: auto }
.gv-menu-it:disabled { opacity: .4; cursor: not-allowed }

/* overlay de carga bloqueante */
.gv-busy { position: fixed; inset: 0; z-index: var(--z-bloqueo); /* D-51 (era 10100) */ background: rgba(246,247,246,.6); display: grid; place-items: center }
.gv-busy i { font-size: 26px; color: var(--de-acc) }

/* poca altura disponible: compactar cromo del modal */
@media(max-height:720px) {
.gv-ovl { padding: 8px }
.gv-mdl { max-height: calc(100vh - 16px) }
.gv-mdl.gv-xl, .gv-mdl.gv-big { height: calc(100vh - 16px); height: calc(100dvh - 16px) }
.gv-mdl-h { padding: 8px 14px }
.gv-mdl-f { padding: 7px 14px }
.gv-metabar { padding: 5px 14px }
.gv-tab { padding: 8px 10px }
.gv-ed-body { padding: 10px 14px }
.gv-mdl-h .gv-s { display: none }
}

/* móvil: cabecera del modal en dos filas, pie con acciones en una fila */
@media(max-width:640px) {
.gv-mdl-h { flex-wrap: wrap; padding: 10px 12px }
.gv-mdl-h > div:not(.gv-tools) { flex: 1; min-width: 0 }
.gv-mdl-h .gv-tools { order: 3; width: 100%; padding-top: 4px; border-top: 1px dashed var(--de-line) }
.gv-mdl-h .gv-tools + .gv-x, .gv-mdl-h .gv-x { order: 2 }
.gv-mdl-h > .gv-sp { display: none }
.gv-mdl-f > .gv-sub { flex-basis: 100% }
.gv-metabar { padding: 6px 12px }
}

/* opción de menú atenuada (conserva el clic, solo cambia el aspecto) */
.gv-menu-it.gv-off { opacity: .45 }
.gv-menu-sep { height: 1px; background: var(--de-line); margin: 5px 4px }

/* textarea con el mismo control base */
.gv-root textarea.gv-inp { height: auto; min-height: 72px; padding: 7px 9px; resize: vertical; line-height: 1.45 }

/* KPIs de 2 columnas (paneles laterales) */
.gv-kpis.gv-k2 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-bottom: 12px }
.gv-kpis.gv-k2 .gv-kpi b { font-size: 18px }

/* fila de lista compacta: descripción · dato · importe (paneles laterales) */
.gv-irow { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--de-line); font-size: 12.5px }
.gv-irow > .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.gv-irow > .m { color: var(--de-muted); font-size: 11.5px; white-space: nowrap }
.gv-irow > .m i { color: var(--de-faint) }
.gv-irow > b { font-family: var(--mono); white-space: nowrap }
.gv-side h4 + .gv-irow, .gv-side .gv-irow + h4 { margin-top: 0 }
.gv-side h4:not(:first-child) { margin-top: 14px }

/* título dentro de una caja de mensaje */
.gv-box .gv-bt { display: block; font-weight: 700; margin-bottom: 2px }
.gv-box .gv-badge { float: right; font-size: 10.5px; font-weight: 700; border: 1px solid currentColor; border-radius: 10px; padding: 0 6px; opacity: .8 }

/* host de página para un formulario gv-mdl abierto como página (no modal) */
.gv-pagehost { display: flex; justify-content: center; padding: 14px }
.gv-pagehost > .gv-mdl { max-width: none; height: 94vh; height: 94dvh; box-shadow: 0 1px 3px rgba(14,26,23,.08); border: 1px solid var(--de-line) }
@media(max-width:640px) { .gv-pagehost { padding: 0 } .gv-pagehost > .gv-mdl { height: 100vh; height: 100dvh; border: 0 } }

/* contenedor transparente (el hijo gv-mdl queda como hijo directo del overlay) */
.gv-contents { display: contents }


/* ═══════════════════════════════════════════════════════════════════════════
   [FormV2] DENSIDAD ADAPTATIVA · pantallas chicas (05/10/2026) · CloudERP 08/10/2026
   Se activa sola según el área útil del navegador / WebView2 (no la pantalla
   física): 1366×768 al 100 % o 1920×1080 al 125 % dejan ~1230–1366 px útiles.
     Nivel 1 · ≤1440 px de ancho o ≤800 px de alto → compacto
     Nivel 2 · ≤1280 px de ancho                   → muy compacto
   Utilidades para el marcado (opcionales, no cambian nada en pantallas grandes):
     .gv-p3   columna secundaria de un listado: se oculta en el nivel 2
     .gv-lbl  texto de un botón que pasa a solo icono en el nivel 2
              (poner title="…" en el botón para no perder el texto)
   CloudERP: OPT-IN. Solo aplica dentro de <div class="gv-root gv-adapt">;
   las pantallas que no lleven gv-adapt no cambian.
   Solo reduce espaciados / tamaños y evita que los textos bajen a dos líneas;
   no cambia colores, estructura ni comportamiento.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1440px), (max-height: 800px) {
    .gv-root.gv-adapt { font-size: 12.5px }
    .gv-adapt .gv-page { padding: 12px 14px 26px }
    .gv-adapt .gv-head { margin-bottom: 10px; gap: 10px }
    .gv-adapt .gv-head h1 { font-size: 20px }
    .gv-adapt .gv-lead { font-size: 12px }
    .gv-adapt .gv-chip-ruc { padding: 4px 8px; font-size: 11.5px; white-space: nowrap }
    .gv-adapt .gv-filters { padding: 6px 8px; gap: 6px; margin-bottom: 8px }

    .gv-adapt .gv-inp { height: 30px; padding: 3px 8px; font-size: 12.5px }
    .gv-adapt .gv-btn { height: 30px; padding: 0 11px; font-size: 12.5px; gap: 6px }
    .gv-adapt .gv-btn.gv-sm { height: 26px; padding: 0 9px; font-size: 11.5px }
    .gv-adapt .gv-ib, .gv-adapt .gv-x { width: 28px; height: 28px }
    .gv-adapt .gv-ib.gv-ib-sm { width: 24px; height: 24px }
    .gv-adapt .gv-seg button { padding: 5px 10px; font-size: 12px }

    .gv-adapt table.gv-lst { min-width: 1080px }
    .gv-adapt table.gv-lst.gv-wide { min-width: 1380px }
    .gv-adapt .gv-lst th { padding: 7px 8px; font-size: 10px; letter-spacing: .04em }
    .gv-adapt .gv-lst td { padding: 7px 8px; font-size: 12.5px }
    .gv-adapt .gv-lst td.gv-ell { max-width: 200px }
    .gv-adapt .gv-tbl-top, .gv-adapt .gv-pager { padding: 7px 10px }
    .gv-adapt .gv-pager .gv-inp, .gv-adapt .gv-pager button { height: 28px; min-width: 28px }
    .gv-adapt tr.gv-det td { padding: 0 10px 12px 28px }

    .gv-adapt .gv-kpis { gap: 8px; margin-bottom: 10px }
    .gv-adapt .gv-kpi { padding: 8px 10px }
    .gv-adapt .gv-kpi b { font-size: 20px }

    .gv-adapt .gv-mdl.gv-xl { max-width: none }
    .gv-adapt .gv-mdl-h { padding: 9px 14px; gap: 8px }
    .gv-adapt .gv-mdl-h h3 { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
    .gv-adapt .gv-mdl-f { padding: 8px 14px }
    .gv-adapt .gv-mdl-b { padding: 12px 14px }
    .gv-adapt .gv-metabar { padding: 5px 14px; gap: 6px }
    .gv-adapt .gv-tag { height: 24px; padding: 0 7px; gap: 5px }
    .gv-adapt .gv-tabs { padding: 0 12px }
    .gv-adapt .gv-tab { padding: 8px 10px }
    .gv-adapt .gv-ed { grid-template-columns: minmax(0,1fr) 270px }
    .gv-adapt .gv-ed-body { padding: 10px 14px }
    .gv-adapt .gv-sec-h { padding: 7px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
    .gv-adapt .gv-sec-b { padding: 8px 10px }
    .gv-adapt .gv-g { gap: 7px 10px }
    .gv-adapt .gv-f label { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
    .gv-adapt .gv-lin th { padding: 6px 7px }
    .gv-adapt .gv-lin td { padding: 5px 7px }
}

@media (max-width: 1280px) {
    .gv-root.gv-adapt { font-size: 12px }
    .gv-adapt .gv-head h1 { font-size: 18px }
    .gv-adapt .gv-lead, .gv-adapt .gv-eyebrow { display: none }
    .gv-adapt .gv-inp { height: 28px; padding: 2px 7px; font-size: 12px }
    .gv-adapt .gv-btn { height: 28px; padding: 0 9px; font-size: 12px }
    .gv-adapt .gv-btn .gv-lbl { display: none }
    .gv-adapt table.gv-lst { min-width: 960px }
    .gv-adapt table.gv-lst.gv-wide { min-width: 1180px }
    .gv-adapt .gv-lst td { padding: 6px 7px; font-size: 12px }
    .gv-adapt .gv-lst th { padding: 6px 7px }
    .gv-adapt .gv-lst th.gv-p3, .gv-adapt .gv-lst td.gv-p3,
    .gv-adapt .gv-tbl table.gv-lst th.gv-p3, .gv-adapt .gv-tbl table.gv-lst td.gv-p3 { display: none !important }
    .gv-adapt .gv-lst td.gv-ell { max-width: 170px }
    .gv-adapt .gv-ed { grid-template-columns: minmax(0,1fr) 240px }
    .gv-adapt .gv-mdl-h { padding: 8px 12px }
    .gv-adapt .gv-metabar { padding: 4px 12px }
    .gv-adapt .gv-tab { padding: 7px 8px; gap: 5px }
}