@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../vendor/fonts/inter-latin-wght-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../vendor/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../vendor/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
}

:root {
    --bela-pizarra: #1c1c1c;
    --bela-pizarra-oscuro: #111111;
    --bela-pizarra-hondo: #000000;
    --bela-acento: #3d3d3d;
    --bela-acento-claro: #bdbdbd;
    --bela-suave: #d6d6d6;
    --bela-marfil: #f5f5f4;
    --bela-tinta: #161616;
    --bela-gris: #666666;
    --bela-borde: #e2e2e2;
    --bela-exito: #1b8a3a;
    --bela-alerta: #e3261d;
    --bela-info: #14b8c4;

    /* Colores de las cifras del tablero. */
    --bela-paquete: #1b8a3a;
    --bela-vendido: #1c1c1c;
    --bela-pagado: #1d6f9a;
    --bela-abonos: #14b8c4;
    --bela-adeudo: #e3261d;

    --bela-radio: 10px;

    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-color: var(--bela-tinta);
    --bs-body-bg: var(--bela-marfil);
    --bs-border-color: var(--bela-borde);
    --bs-primary: var(--bela-pizarra);
    --bs-primary-rgb: 28, 28, 28;
    --bs-link-color: var(--bela-pizarra);
    --bs-link-color-rgb: 28, 28, 28;
    --bs-link-hover-color: var(--bela-acento);
    --bs-link-hover-color-rgb: 61, 61, 61;
    --bs-border-radius: 10px;
    --bs-border-radius-lg: var(--bela-radio);
    --bs-focus-ring-color: rgba(29, 111, 154, .25);
}

body {
    font-feature-settings: "tnum" 1, "cv11" 1;
    -webkit-font-smoothing: antialiased;
}

.font-marca {
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--bela-pizarra-oscuro);
}
.titulo-seccion {
    display: inline-block;
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--bela-pizarra-oscuro);
    padding-bottom: .3rem;
    border-bottom: 4px solid var(--bela-pizarra);
}

/* ---------- Botones ---------- */
.btn {
    font-weight: 500;
    border-radius: 10px;
    padding: .5rem 1rem;
}
.btn-primary {
    --bs-btn-bg: var(--bela-pizarra);
    --bs-btn-border-color: var(--bela-pizarra);
    --bs-btn-hover-bg: var(--bela-pizarra-oscuro);
    --bs-btn-hover-border-color: var(--bela-pizarra-oscuro);
    --bs-btn-active-bg: var(--bela-pizarra-hondo);
    --bs-btn-active-border-color: var(--bela-pizarra-hondo);
}
.form-control,
.form-select {
    border-radius: 10px;
    border-color: var(--bela-borde);
    background-color: #fff;
    padding: .55rem .85rem;
}
.form-select {
    padding-right: 2.25rem;
}
.input-group .btn-outline-secondary {
    --bs-btn-color: var(--bela-gris);
    --bs-btn-border-color: var(--bela-borde);
    --bs-btn-hover-bg: var(--bela-marfil);
    --bs-btn-hover-color: var(--bela-pizarra);
    --bs-btn-hover-border-color: var(--bela-borde);
    --bs-btn-active-bg: var(--bela-marfil);
    --bs-btn-active-color: var(--bela-pizarra);
    --bs-btn-active-border-color: var(--bela-borde);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--bela-acento-claro);
    box-shadow: 0 0 0 .2rem rgba(29, 111, 154, .18);
}
.form-label {
    font-weight: 500;
    font-size: .875rem;
    color: var(--bela-gris);
}

/* ---------- Estructura ---------- */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.bela-encabezado {
    position: sticky;
    top: 0;
    z-index: 1030;
}
.bela-barra {
    min-height: 60px;
    background: linear-gradient(90deg, var(--bela-pizarra-hondo) 0%, var(--bela-pizarra-oscuro) 35%, var(--bela-pizarra) 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    gap: 0 1rem;
    padding: .5rem 1.25rem;
}
.bela-marca {
    flex: none;
}
.bela-marca img {
    height: 36px;
    width: auto;
    display: block;
}
.bela-menu .navbar-nav {
    gap: .1rem;
}
.bela-menu .nav-link {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: .5rem .65rem;
    border-radius: 6px;
    white-space: nowrap;
}
.bela-menu .nav-link .bi {
    font-size: 1rem;
}
.usuario-datos {
    display: none;
}
@media (min-width: 1200px) {
    .bela-barra {
        flex-wrap: nowrap;
        padding-top: 0;
        padding-bottom: 0;
    }
    .bela-menu {
        order: 1;
    }
    .bela-acciones {
        order: 2;
    }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .bela-barra {
        gap: 0 .75rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .bela-menu .nav-link {
        gap: .35rem;
        padding: .5rem .45rem;
        letter-spacing: 0;
    }
}
@media (min-width: 1500px) {
    .usuario-datos {
        display: flex;
    }
}
.bela-menu .nav-link:hover,
.bela-menu .nav-link:focus-visible,
.bela-menu .nav-link.show {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}
.bela-menu .nav-link.active {
    color: #fff;
    background: rgba(8, 19, 31, .35);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
@media (min-width: 1200px) {
    .bela-menu .nav-item + .nav-item {
        border-left: 1px solid rgba(255, 255, 255, .14);
        padding-left: .15rem;
    }
}
.bela-menu .dropdown-item.active,
.bela-menu .dropdown-item:active {
    background: var(--bela-pizarra);
    color: #fff;
}

.bela-contenido {
    flex: 1;
    padding: 1.5rem 1.25rem 2.5rem;
}
.bela-pie {
    padding: 1rem 1.25rem;
    font-size: .8rem;
    color: var(--bela-gris);
    border-top: 1px solid var(--bela-borde);
    background: #fff;
}

.btn-icono {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35);
    background: transparent;
    color: #fff;
    position: relative;
}
.btn-icono:hover,
.btn-icono[aria-expanded="true"] {
    border-color: #fff;
    background: rgba(255, 255, 255, .1);
    color: #fff;
}
.btn-icono .contador {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: .7rem;
    font-weight: 600;
    line-height: 20px;
    color: #fff;
    background: var(--bela-alerta);
    border: 2px solid var(--bela-pizarra);
}
.usuario-menu {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .25rem .5rem .25rem .25rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: #fff;
}
.usuario-menu:hover,
.usuario-menu[aria-expanded="true"] {
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .08);
}
.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: var(--bela-pizarra-hondo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .9rem;
}
.usuario-menu .nombre {
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.1;
}
.usuario-menu .rol {
    font-size: .75rem;
    color: rgba(255, 255, 255, .65);
}
.dropdown-menu {
    border-color: var(--bela-borde);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(31, 39, 51, .12);
    padding: .5rem;
}
.dropdown-item {
    border-radius: 8px;
    padding: .5rem .75rem;
}
.dropdown-item:active {
    background: var(--bela-pizarra);
}
.notificaciones {
    width: 340px;
}
.notificacion {
    display: flex;
    gap: .75rem;
    padding: .75rem;
    border-radius: 10px;
}
.notificacion + .notificacion {
    border-top: 1px solid var(--bela-borde);
    border-radius: 0;
}
.notificacion .icono {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(29, 111, 154, .14);
    color: var(--bela-acento);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Tarjetas y tablas ---------- */
.card {
    --bs-card-bg: #fff;
    border: 1px solid var(--bela-borde);
    border-radius: var(--bela-radio);
    box-shadow: 0 1px 2px rgba(31, 39, 51, .04);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--bela-borde);
    padding: 1rem 1.25rem;
}
.card-header .card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}
.card-body {
    padding: 1.25rem;
}
.boton-filtros {
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    font-size: 1.15rem;
}
.boton-filtros[aria-expanded="true"] {
    background: var(--bela-pizarra);
    border-color: var(--bela-pizarra);
    color: #fff;
}

.kpi {
    position: relative;
    overflow: hidden;
    height: 100%;
}
.kpi .card-body {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.kpi .etiqueta {
    font-size: .8rem;
    font-weight: 500;
    color: var(--bela-gris);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.kpis > * {
    min-width: 0;
}
.kpi .encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.kpi .valor {
    font-size: clamp(1.05rem, 1.15vw + .25rem, 1.55rem);
    font-weight: 650;
    letter-spacing: -.015em;
    color: var(--bela-tinta);
    white-space: nowrap;
}
.kpi .detalle {
    font-size: .8rem;
    color: var(--bela-gris);
}
.kpi .icono {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.tono-paquete { --tono: var(--bela-paquete); }
.tono-vendido { --tono: var(--bela-vendido); }
.tono-pagado { --tono: var(--bela-pagado); }
.tono-abonos { --tono: var(--bela-abonos); }
.tono-adeudo { --tono: var(--bela-adeudo); }
.tono-neutro { --tono: var(--bela-gris); }

/* ---------- Tablero ---------- */
.barra-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 2rem;
    padding: .85rem 1.25rem;
    background: var(--bela-pizarra);
    border-radius: var(--bela-radio);
    color: #fff;
}
.barra-filtros .filtro {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .85rem;
}
.barra-filtros .filtro .form-select {
    min-width: 180px;
    border-radius: 6px;
    border: 0;
    font-weight: 600;
}
.barra-filtros .filtro-ancho .form-select {
    min-width: 240px;
}
.btn-filtrar {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bela-acento);
    --bs-btn-border-color: var(--bela-acento);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #575757;
    --bs-btn-hover-border-color: #575757;
    border-radius: 6px;
}
.btn-cancelar {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--bela-pizarra);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    border-radius: 6px;
}
.tarjeta-cifra {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 1.1rem 1.25rem;
    border-radius: var(--bela-radio);
    background: var(--tono);
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--tono) 30%, transparent);
}
.tarjeta-cifra .icono {
    flex: none;
    font-size: 2.1rem;
    line-height: 1;
    padding-right: 1rem;
    border-right: 1px solid rgba(255, 255, 255, .45);
}
.tarjeta-cifra .texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.tarjeta-cifra .etiqueta {
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.tarjeta-cifra .valor {
    font-size: clamp(1.2rem, 1.1vw + .6rem, 1.6rem);
    font-weight: 700;
    white-space: nowrap;
}
.tarjeta-cifra .pie {
    font-size: .75rem;
    opacity: .85;
}
.resumen-notas .tarjeta-cifra {
    padding: .9rem 1rem;
}
.resumen-notas .tarjeta-cifra .icono {
    font-size: 1.6rem;
    padding-right: .8rem;
}
.resumen-notas .tarjeta-cifra .valor {
    font-size: clamp(1.05rem, .8vw + .6rem, 1.35rem);
}

/* ---------- Selects con buscador ---------- */
.ts-dropdown {
    z-index: 1090;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20, 32, 46, .15);
}
.ts-dropdown .active {
    background: var(--bela-pizarra);
    color: #fff;
}
.ts-dropdown .dropdown-input {
    border-radius: 6px;
}
.barra-filtros .ts-wrapper .ts-control {
    border: 0;
    font-weight: 600;
}

/* ---------- Colores de montos del legacy ---------- */
.col-paquete { --c: #008000; --t: #fff; }
.col-vendido { --c: #ffd800; --t: #000; }
.col-pagado { --c: #2c870e; --t: #fff; }
.col-cobrado { --c: #0282d2; --t: #fff; }
.col-adeudo { --c: #e00000; --t: #fff; }
.col-bolsa { --c: #f77a00; --t: #fff; }
.col-contado { --c: #ff7c00; --t: #fff; }
.col-notas { --c: #bce7e9; --t: #000; }
.tabla-legacy thead th[class*="col-"] {
    background: var(--c);
    color: var(--t);
}
.tabla-legacy thead th[class*="col-"] .tabla-orden {
    color: inherit;
}
.tabla-legacy tbody td[class*="col-"] {
    background: color-mix(in srgb, var(--c) 10%, #fff);
    font-variant-numeric: tabular-nums;
}
.tabla-legacy tbody tr.con-adeudo td {
    background: #ffd9d9;
}
.monto-legacy {
    color: color-mix(in srgb, var(--c) 85%, #000);
    font-weight: 650;
}
.col-vendido.monto-legacy {
    color: #7a6400;
}
.monto-total {
    color: #0033cc;
    font-weight: 700;
}

/* ---------- Propuesta de comisiones ---------- */
.tarjeta-comision {
    background: linear-gradient(135deg, var(--bela-pizarra), var(--bela-pizarra-oscuro));
    color: #fff;
    border: 0;
}
.cifra-comision {
    font-size: clamp(2rem, 2.4vw + .8rem, 2.8rem);
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.1;
}
.escalera-comision {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .4rem;
}
.peldano {
    padding: .55rem .4rem;
    border-radius: 8px;
    border: 1px solid var(--bela-borde);
    background: var(--bela-marfil);
    text-align: center;
    color: var(--bela-gris);
}
.peldano .porcentaje {
    font-size: 1.15rem;
    font-weight: 750;
}
.peldano .rango {
    font-size: .75rem;
    font-weight: 600;
}
.peldano .base {
    font-size: .68rem;
}
.peldano.superado {
    background: color-mix(in srgb, #0033cc 10%, #fff);
    border-color: color-mix(in srgb, #0033cc 25%, #fff);
    color: #0033cc;
}
.peldano.actual {
    background: #0033cc;
    border-color: #0033cc;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 51, 204, .3);
}
.aviso-tramo {
    padding: .55rem .75rem;
    border-radius: 8px;
    background: #fff7e0;
    color: #6b4e00;
    font-size: .9rem;
}
.ficha-nota {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .15rem .5rem;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
}
.ficha-nota:hover {
    filter: brightness(1.1);
    color: #fff;
}
.ficha-nota.cuenta, .leyenda-notas .punto.cuenta { background: #0033cc; }
.ficha-nota.debe, .leyenda-notas .punto.debe { background: #e00000; }
.ficha-nota.bolsa, .leyenda-notas .punto.bolsa { background: #f77a00; }
.ficha-nota.contado, .leyenda-notas .punto.contado { background: #b35900; }
.ficha-nota.no-alcanza, .leyenda-notas .punto.no-alcanza { background: #8a96a3; }
.leyenda-notas .punto {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    margin-right: .3rem;
    border-radius: 3px;
    vertical-align: -1px;
}
.datos-panel .fila-suma,
.tabla-legacy tfoot .fila-suma th,
.tabla-legacy tfoot th {
    background: var(--bela-marfil);
    font-weight: 700;
}

/* ---------- Notas para descontar al gerente ---------- */
.nota-descontar {
    cursor: pointer;
    min-width: 170px;
    transition: border-color .15s, box-shadow .15s;
}
.nota-descontar .cliente {
    display: block;
    max-width: 170px;
    margin-top: .25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.nota-descontar:hover {
    border-color: var(--bela-acento-claro);
}
.btn-check:checked + .nota-descontar {
    border-color: var(--bela-pizarra);
    box-shadow: 0 0 0 2px var(--bela-pizarra);
    background: var(--bela-marfil);
}
.btn-check:focus-visible + .nota-descontar {
    outline: 2px solid var(--bela-acento);
    outline-offset: 2px;
}

/* ---------- Propuesta del listado de notas ---------- */
.boton-estado {
    --bs-btn-color: var(--bela-tinta);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--bela-borde);
    --bs-btn-hover-bg: var(--bela-marfil);
    --bs-btn-hover-border-color: var(--bela-suave);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bela-pizarra);
    --bs-btn-active-border-color: var(--bela-pizarra);
    border-radius: 999px;
    padding: .3rem .85rem;
}
.boton-estado .badge {
    background: var(--bela-marfil);
    color: var(--bela-tinta);
}
.boton-estado.active .badge {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}
.tabla-notas tbody tr {
    cursor: pointer;
}
.tabla-notas td {
    padding-top: .7rem;
    padding-bottom: .7rem;
}
.panel-nota {
    --bs-offcanvas-width: 420px;
}
.titulo-panel {
    margin: 1.1rem 0 .4rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bela-gris);
}
.datos-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    margin: 0;
    border: 1px solid var(--bela-borde);
    border-radius: var(--bela-radio);
    overflow: hidden;
}
.datos-panel dt,
.datos-panel dd {
    margin: 0;
    padding: .45rem .75rem;
    border-bottom: 1px solid var(--bela-borde);
}
.datos-panel dt {
    font-weight: 500;
    color: var(--bela-gris);
}
.datos-panel dd {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.datos-panel dt:nth-last-of-type(1),
.datos-panel dd:nth-last-of-type(1) {
    border-bottom: 0;
}
.titulo-tabla {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bela-pizarra-oscuro);
    padding-left: .65rem;
    border-left: 5px solid var(--bela-pizarra);
    line-height: 1.2;
}
.tabla-resumen,
.tabla-zonas {
    --bs-table-bg: #fff;
    font-size: .85rem;
}
.tabla-resumen > :not(caption) > * > *,
.tabla-zonas > :not(caption) > * > * {
    border: 1px solid var(--bela-borde);
    padding: .45rem .6rem;
}
.table.tabla-resumen > thead th {
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    font-size: .8rem;
    color: var(--bela-tinta);
    background: #eeeeee;
}
.tabla-zonas-mes .fila-zona > th {
    background: #10bdcf;
    color: #08131f;
    font-weight: 700;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.tabla-zonas-mes > tbody + tbody {
    border-top: 3px solid var(--bela-pizarra);
}
.tabla-resumen .concepto {
    background: var(--tono);
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}
.tabla-resumen > thead > tr > th:first-child,
.tabla-resumen > tbody > tr:not(.fila-zona) > th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 3px 0 6px -3px rgba(0, 0, 0, .35);
}
.tabla-resumen > thead > tr > th:first-child {
    z-index: 3;
}
.tabla-zonas-mes .fila-zona .nombre-zona {
    position: sticky;
    left: .6rem;
    display: inline-block;
}
.table.tabla-zonas > thead th {
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--bela-tinta);
    background: #eef1f5;
}
.table.tabla-zonas > thead th[class*="tono-"] {
    background: var(--tono);
    color: #fff;
}
.tabla-zonas > tbody th {
    font-weight: 700;
}
.tabla-zonas > tfoot > tr > * {
    background: var(--bela-pizarra);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}
.kpi .icono {
    color: var(--tono);
    background: color-mix(in srgb, var(--tono) 13%, transparent);
}
.kpi::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--tono);
    opacity: .85;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(0, 0, 0, .03);
    --bs-table-hover-bg: rgba(29, 111, 154, .06);
    margin-bottom: 0;
}
.table > thead th {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bela-gris);
    background: #faf9f6;
    border-bottom-color: var(--bela-borde);
    white-space: nowrap;
}
.table td,
.table th {
    padding: .7rem .85rem;
    vertical-align: middle;
}
.table .num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.table .fila-total td,
.table .fila-total th {
    font-weight: 650;
    background: #faf9f6;
}
.punto {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: .5rem;
    background: var(--tono);
}
.texto-adeudo {
    color: var(--bela-alerta);
}
.tabla-fija th:first-child,
.tabla-fija td:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
}
.tabla-fija thead th:first-child {
    background: #faf9f6;
}

.insignia {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--tono);
    background: color-mix(in srgb, var(--tono) 12%, transparent);
}
.tabla-compacta td {
    font-size: .875rem;
}
.tabla-compacta .celda-larga {
    min-width: 220px;
}
.acciones {
    display: flex;
    justify-content: flex-end;
    gap: .35rem;
}
.acciones .btn {
    --bs-btn-padding-x: .45rem;
    --bs-btn-padding-y: .2rem;
}

/* Tablas con búsqueda, orden y paginación (data-tabla). */
.tabla-barra,
.tabla-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1.25rem;
}
.tabla-barra {
    border-bottom: 1px solid var(--bela-borde);
}
.tabla-pie {
    border-top: 1px solid var(--bela-borde);
    font-size: .85rem;
    color: var(--bela-gris);
}
.tabla-buscar {
    position: relative;
    flex: 1 1 260px;
    max-width: 360px;
}
.tabla-buscar .bi {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bela-gris);
    pointer-events: none;
}
.tabla-buscar .form-control {
    padding-left: 2.1rem;
}
.tabla-cantidad {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--bela-gris);
    margin: 0;
}
.tabla-cantidad .form-select {
    width: auto;
}
.tabla-orden {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.tabla-orden::after {
    content: "\F283";
    font-family: "bootstrap-icons";
    font-size: .65rem;
    opacity: .3;
}
th[aria-sort="ascending"] .tabla-orden::after {
    content: "\F286";
    opacity: 1;
}
th[aria-sort="descending"] .tabla-orden::after {
    content: "\F282";
    opacity: 1;
}
/* Mismo aspecto en tablas paginadas en el servidor (PaginatorHelper). */
.tabla-orden.asc::after {
    content: "\F286";
    opacity: 1;
}
.tabla-orden.desc::after {
    content: "\F282";
    opacity: 1;
}
.tabla-pie .pagination {
    --bs-pagination-color: var(--bela-pizarra);
    --bs-pagination-hover-color: var(--bela-acento);
    --bs-pagination-active-bg: var(--bela-pizarra);
    --bs-pagination-active-border-color: var(--bela-pizarra);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}
.tabla-orden:focus-visible {
    outline: 2px solid var(--bela-acento);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Nueva nota ---------- */
.sugerencias {
    z-index: 20;
    max-height: 320px;
    overflow-y: auto;
    top: 100%;
}
.totales-nota {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .35rem 1.5rem;
    font-variant-numeric: tabular-nums;
}
.totales-nota dt {
    font-weight: 500;
    color: var(--bela-gris);
}
.totales-nota dd {
    margin: 0;
    text-align: right;
}
.totales-nota .total {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bela-tinta);
    padding-top: .4rem;
    border-top: 1px solid var(--bela-borde);
}
.pieza-reciente td {
    background: color-mix(in srgb, var(--bela-exito) 10%, transparent);
    font-weight: 600;
}
.pieza-obsequio td {
    background: color-mix(in srgb, var(--bela-info) 10%, transparent);
}
.pieza-devuelta td {
    color: var(--bela-alerta);
    text-decoration: line-through;
}
.pieza-devuelta td:last-child {
    text-decoration: none;
}

/* ---------- Formularios ---------- */
.formulario-angosto {
    max-width: 720px;
}
.seccion-formulario {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bela-gris);
    margin: 1.75rem 0 .75rem;
}
.seccion-formulario:first-of-type {
    margin-top: 0;
}
.required > .form-label::after {
    content: " *";
    color: var(--bela-alerta);
}
.enlace-volver {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .875rem;
    color: var(--bela-gris);
    text-decoration: none;
}
.enlace-volver:hover {
    color: var(--bela-acento);
}

.nav-pills-bela {
    gap: .35rem;
}
.nav-pills-bela .nav-link {
    border-radius: 999px;
    padding: .35rem .9rem;
    font-size: .85rem;
    font-weight: 500;
    color: var(--bela-gris);
    border: 1px solid var(--bela-borde);
    background: #fff;
}
.nav-pills-bela .nav-link.active {
    background: var(--bela-pizarra);
    border-color: var(--bela-pizarra);
    color: #fff;
}

.alert {
    border-radius: 12px;
    border: 1px solid transparent;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}
.alert .bi {
    font-size: 1.1rem;
    line-height: 1.3;
}

/* ---------- Login ---------- */
.login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
}
.login-marca {
    background:
        radial-gradient(1200px 600px at 20% 10%, rgba(29, 111, 154, .16), transparent 60%),
        linear-gradient(160deg, var(--bela-pizarra) 0%, var(--bela-pizarra-hondo) 100%);
    color: var(--bela-suave);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem 3rem 4rem;
    position: relative;
}
.login-marca .contenido {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.login-marca img {
    width: min(190px, 55%);
    height: auto;
}
.login-marca .lema {
    margin: 1.25rem 0 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.25rem;
    font-style: italic;
    color: rgba(198, 214, 230, .85);
    text-align: center;
}
.login-marca .caracteristicas {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 1.5rem 0 0;
    width: 100%;
    border-top: 1px solid rgba(198, 214, 230, .15);
    display: grid;
    gap: 1rem;
}
@media (max-height: 640px) {
    .login-marca .caracteristicas {
        display: none;
    }
}
.login-marca .caracteristicas li {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    font-size: .875rem;
    line-height: 1.4;
    color: rgba(198, 214, 230, .75);
}
.login-marca .caracteristicas strong {
    display: block;
    font-weight: 600;
    color: #fff;
}
.login-marca .caracteristicas .icono {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: var(--bela-radio);
    background: rgba(124, 196, 228, .12);
    border: 1px solid rgba(124, 196, 228, .22);
    color: var(--bela-acento-claro);
    font-size: 1.05rem;
}
.login-marca .pie {
    position: absolute;
    bottom: 1.5rem;
    font-size: .75rem;
    color: rgba(198, 214, 230, .5);
}
.login-formulario {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: #fff;
}
.login-formulario .caja {
    width: 100%;
    max-width: 380px;
}
.login-formulario h1 {
    font-size: 2.25rem;
    color: var(--bela-pizarra-oscuro);
}
.login-formulario .input-group-text {
    background: #fff;
    border-color: var(--bela-borde);
    color: var(--bela-gris);
    border-radius: 10px 0 0 10px;
}
.login-formulario .input-group .form-control {
    border-left: 0;
}
.login-formulario .input-group:focus-within .input-group-text,
.login-formulario .input-group:focus-within .btn {
    border-color: var(--bela-acento-claro);
}
.login-formulario .input-group:focus-within .input-group-text {
    color: var(--bela-acento);
}
.login-formulario .input-group .form-control:focus {
    box-shadow: none;
}
.login-formulario .input-group:focus-within {
    border-radius: var(--bela-radio);
    box-shadow: 0 0 0 .2rem rgba(29, 111, 154, .18);
}
.login-ayuda {
    margin: 1.25rem 0 0;
    font-size: .8125rem;
    color: var(--bela-gris);
    text-align: center;
}

/* ---------- Comisiones ---------- */
.tabla-comisiones .cliente-con-adeudo > td {
    background: color-mix(in srgb, var(--bela-adeudo) 8%, transparent);
}
.nota-comision {
    display: inline-block;
    vertical-align: top;
    margin: 0 .35rem .35rem 0;
    padding: .35rem .5rem;
    border: 1px solid var(--bela-borde);
    border-radius: 8px;
    background: #fff;
    font-size: .78rem;
}
.nota-comision.cuenta {
    border-color: var(--bela-vendido);
    box-shadow: inset 3px 0 0 var(--bela-vendido);
}
.nota-comision a.insignia {
    text-decoration: none;
}
.nota-comision dl {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0 .75rem;
    margin: .3rem 0 0;
}
.nota-comision dt {
    font-weight: 400;
    color: var(--bela-gris);
}
.nota-comision dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- Responsivo ---------- */
@media (max-width: 1199.98px) {
    .bela-menu {
        padding: .5rem 0;
    }
    .bela-menu .dropdown-menu {
        background: var(--bela-pizarra-oscuro);
        border: 0;
        box-shadow: none;
    }
    .bela-menu .dropdown-item {
        color: #fff;
    }
    .bela-menu .dropdown-item:hover {
        background: rgba(255, 255, 255, .1);
        color: #fff;
    }
}
@media (max-width: 991.98px) {
    .bela-contenido {
        padding: 1.25rem 1rem 2rem;
    }
    .login {
        grid-template-columns: 1fr;
    }
    .login-marca {
        padding: 2.5rem 1.5rem;
        min-height: 260px;
    }
    .login-marca img {
        width: 180px;
    }
    .login-marca .lema,
    .login-marca .caracteristicas,
    .login-marca .pie {
        display: none;
    }
}