:root {
    /* configuracion global */

    --image-lite-width: 3rem;
    --image-lite-height: auto;
    --image-middle-width: 8rem;
    --image-middle-height: auto;
    --componentCardBox-min-height: 4rem;
    --sidebar-width: 270px;
    --formulario-background: var(--color-surface);
    --formulario-font-color: var(--color-text-base);
    --pantalla-ventas-background: var(--color-surface);
    --pantalla-ventas-font-color: var(--color-text-base);
    --global-transition: all .5s ease-in-out;
    --ui-radius-circle: 50%;
    --ui-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto/Roboto-Regular.ttf') format('ttf'), url('/fonts/roboto/Roboto-Regular.woff') format('ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto/Roboto-Bold.ttf') format('ttf'), url('/fonts/roboto/Roboto-Bold.ttf') format('ttf');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto/Roboto-Italic.ttf') format('ttf'), url('/fonts/roboto/Roboto-Italic.ttf') format('ttf');
    font-weight: 400;
    font-style: italic;
}

@view-transition {
    navigation: auto;
}

* {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

html {
    font-size: clamp(12px, 0.85rem + 0.2vw, 14px);
}

body {
    margin: 0px;
    padding: 0px;
    background: var(--color-app-bg);
    background-attachment: fixed;
    color: var(--color-text-base);
    min-height: 100vh;
    height: 100%;
    overflow-x: auto;
}

*:required {
}

input.form-check-input {
    font-size: 1.3rem;
    line-height: 1.3rem;
}

a.nav-link > span.bi {
    margin-left: 10px;
    margin-right: 10px;
}

nav.nav-item > a.nav-link > span.bi {
    margin-left: 10px;
}

.nav-item ::deep a {
    color: #d7d7d7;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
}

    .nav-item ::deep a.active {
        background-color: rgba(255,255,255,0.25);
        color: white;
    }

    .nav-item ::deep a:hover {
        background-color: rgba(255,255,255,0.1);
        color: white;
    }

.row {
    margin: 0px;
}


.texto-color-primary {
    color: var(--color-primary);
}

.texto-color-primary-soft {
    color: var(--color-primary-soft);
}

.texto-color-danger {
    color: var(--color-danger);
}

.texto-color-accent {
    color: var(--color-accent);
}

.texto-color-muted {
    color: var(--color-text-muted);
}

.columna {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


main {
    min-height: 98vh;
    max-height: 98vh;
}


.clock-component {
    background-color: var(--color-accent);
    color: var(--color-text-white);
    padding: 3px;
    font-size: 1rem;
    border-radius: var(--ui-radius);
}

.form-switch {
    padding-left: 4.5em;
}

.form-floating label {
    opacity: 1;
}

/* home */
.footer {
    position: fixed;
    bottom: 10px;
    left: 50%; /* Centrar a la mitad del ancho del contenedor padre */
    transform: translateX(-50%); /* Mover el DIV hacia la izquierda la mitad de su ancho */
    font-style: oblique;
    color: var(--color-text-white);
    background-color: var( --color-primary);
    padding: 5px;
    border-radius: var(--ui-radius);
}

/* personalizar */

.input[type=file],
.btn-primary {
    background: var(--color-primary);
    color: var(--color-text-white);
    border-color: var(--color-secondary);
}

    .btn-primary:hover {
        background: var(--color-primary-hover);
    }



.btn-secondary {
    background: var(--color-secondary);
    color: var(--color-text-white);
    border-color: var(--color-primary);
}

    .btn-secondary:hover {
        background: var(--color-primary);
    }

.btn-warning {
    background: var(--color-accent);
    color: var(--color-text-white);
}

.btn-danger {
    background: var(--color-danger);
    color: var(--color-text-white);
    border-color: var(--color-danger);
}

    .btn-danger:hover {
        background: var(--color-primary-soft);
        color: var(--color-text-base);
    }



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

.table {
    color: var(--color-text-white);
}

.background-panel {
    background: var(--color-primary-soft);
    border-radius: var(--ui-radius);
    color: var(--color-text-base);
    padding: 15px;
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow);
}

    .background-panel .form-floating label {
        color: var(--color-text-base);
    }

.background-panel-primary {
    background: var(--color-primary);
    border-radius: var(--ui-radius);
    color: var(--color-text-white);
    padding: 15px;
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow);
}

    .background-panel-primary .form-floating label {
        color: var(--color-text-white);
    }


.background-panel-accent {
    background: var(--color-accent);
    border-radius: var(--ui-radius);
    color: var(--color-text-base);
    padding: 15px;
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow);
}

    .background-panel-accent .btn-outline-primary {
        background: var(--color-secondary);
        color: var(--color-text-white);
    }

    .background-panel-accent .form-floating label {
        color: var(--color-text-base);
    }


.background-panel-danger {
    background: var(--color-danger);
    border-radius: var(--ui-radius);
    color: var(--color-text-white);
    padding: 15px;
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow);
}

    .background-panel-danger .form-floating label {
        color: var(--color-text-white);
    }




.index-accesos-directos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    align-items: stretch;
}

.paypal-contrataciones-planes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 5px;
    align-items: stretch;
}

.border-hover {
    display: block;
    box-sizing: border-box;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
}

    .border-hover:hover {
        box-shadow: var(--ui-shadow);
        transition: var(--global-transition);
    }


/* visor */
.visor-font-general {
    font-size: clamp(1.5rem, 6vmin, 8rem);
}

.visor-font-small {
    font-size: clamp(1rem, 4vmin, 4rem);
}



/* cierres de caja */
.cierre-caja-listado-monedas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 3px;
    align-content: start;
}


.main-content {
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    padding: 20px;
    transition: var(--global-transition);
}

.full-height {
    min-height: 95vh;
}

img.avatar {
    height: auto;
    width: 3rem;
    border-radius: 100%;
    background-color: white;
}

img.logotipo {
    max-width: 100%;
}

.offcanvas {
    height: 100%;
    overflow-y: auto;
}

.anulado {
    color: var(--color-danger);
}


/* notificaciones */
.panel-notificaciones-index {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3px;
    align-content: start;
    padding: 5px;
}


/* Templates */

.componentCardBox {
    min-height: var(--componentCardBox-min-height);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px;
    border-radius: var(--ui-radius);
}

.componentCardBox-imagen {
    padding: 10px;
    height: 100%;
}

    .componentCardBox-imagen img {
        width: 100%;
    }

.componentCardBox-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .componentCardBox-content span {
        width: 100%;
    }


/* grid template */
.grid-template {
    min-height: 25vh;
    border-radius: var(--ui-radius);
    background: var(--color-surface);
    margin: 5px 0px;
    color: var(--color-text-base);
    border: 1px solid var(--ui-border);
    border-collapse: collapse;
}

    .grid-template > table {
        color: var(--color-text-base);
        border-color: var(--ui-border);
    }

.grid-template-table > thead tr.options {
    background-color: var(--color-primary);
    color: var(--color-text-white);
}

.grid-template-table > thead tr.caption {
    background-color: var(--color-sidebar-bg);
    color: var(--color-text-white);
}

.grid-template-table > thead tr.filtros {
    background-color: var(--color-secondary);
    color: var(--color-text-white);
}

.grid-template-table > thead > tr {
    height: 2rem;
    vertical-align: middle;
}

    .grid-template-table > thead > tr > th {
        font-weight: normal;
    }

.grid-template-table input.filter {
    background-color: var(--color-surface-alt);
    color: var(--color-text-base);
    font-weight: bold;
}

.grid-template-table > tbody > tr {
    vertical-align: middle;
    font-size: 0.8rem;
}


.grid-template-grid {
}

.grid-template-card {
}






/* kiosco */

.kiosco {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-rows: 2fr minmax(0, 10fr) 1fr;
    grid-template-areas:
        "header"
        "main"
        "footer";
}

.kiosco-header {
    grid-area: header;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
}

.kiosco-cerrar-pedido {
    height: 80vh;
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding: 20px;
}


.kiosco-main-inicio {
    height: 80vh;
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding: 20px;
    justify-content: center;
    align-items: center;
}

    .kiosco-main-inicio a.btn {
        font-size: 4rem;
        line-height: 5rem;
        padding: 30px 0px;
        width: 100%;
        border-radius: 25px;
    }


.kiosco-main {
    overflow-y: auto;
    grid-area: main;
    display: grid;
    grid-template-columns: 2fr 5fr;
    gap: 10px;
}

.kiosco-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 5px;
    overflow-y: auto;
    max-width: 250px;
    min-width: 130px;
}

.kiosco-familia-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    max-height: 150px;
    min-height: 150px;
    background-color: var(--color-surface);
    border-radius: var(--ui-radius);
}

    .kiosco-familia-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.kiosco-content {
    overflow-y: auto;
}

.kiosco-contet-articulos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
    gap: 30px;
    align-content: start;
}

.kiosco-content-articulo-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    background-color: var(--color-surface);
    border-radius: var(--ui-radius);
    max-height: 250px;
    min-height: 250px;
}

    .kiosco-content-articulo-view img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }



.kiosco-content-articulo-one {
    animation-name: formulario-animation;
    animation-duration: 1s;
    padding: 5px;
}


.kiosco-footer {
    grid-area: footer;
    padding: 10px;
}

    .kiosco-footer .btn {
        padding: 10px 20px;
    }



.kiosco-pedidos-pendientes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kiosco-pedidos-pendientes-item {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.kiosco-seleccion-cliente {
    margin: 50px auto;
    max-width: 500px;
}

/* formulario edicion */

.formulario-popup {
    max-height: 90vh;
    min-height: 20vh;
}

.formulario-width {
    max-width: 450px;
    width: 100%;
    margin: 0px auto;
    padding: 5px;
    margin-top: 20px;
    border-radius: var(--ui-radius);
}

.formulario {
    border-radius: var(--ui-radius);
    background: var(--formulario-background);
    padding: 15px;
    color: var(--formulario-font-color);
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow);
}

    .formulario .form-floating label {
        opacity: 1 !important;
    }

    .formulario .col-form-label,
    .formulario .form-floating label {
        font-weight: bold;
    }

.formulario-header {
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 5px 10px;
}

.formulario-titulo {
    font-size: 1.5em;
    font-weight: bold;
}

.formulario-bloque {
    margin: 2px 0px;
    padding: 2px;
}

    .formulario-bloque label {
        font-weight: bold;
    }

.formulario input[type='checkbox'] {
    cursor: pointer;
}

.formulario-footer {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 5px;
}


/* Pantalla de Ventas */

.pantalla-ventas {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    background-color: var(--pantalla-ventas-background);
    color: var(--pantalla-ventas-font-color);
    display: grid;
    grid-template-rows: 80px 1fr;
    gap: 5px;
    padding: 5px;
}

.pantalla-ventas-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    vertical-align: middle;
}

    .pantalla-ventas-menu button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0px;
        background-color: var( --color-primary);
    }

        .pantalla-ventas-menu button span:first-child {
            font-size: 26px;
        }

        .pantalla-ventas-menu button span:last-child {
            font-size: 12px;
        }

.pantalla-ventas-content {
    display: grid;
    grid-template-columns: minmax(350px, 1fr) 3fr;
    gap: 5px;
    min-height: 0;
}

.pantalla-ventas-left {
    display: grid;
    grid-template-rows: 190px 1fr 50px;
    gap: 5px;
    max-height: calc(100vh - 90px);
}

.pantalla-ventas-right {
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    gap: 10px;
    max-height: calc(100vh - 100px);
    align-items: start;
    min-height: 0;
}

.pantalla-ventas-articulos-vendidos {
    width: 100%;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: calc(100vh - 90px - 190px - 60px);
    min-height: 0;
    overflow-y: auto;
}

.pantalla-ventas-articulos-vendidos-one-view {
    border-bottom: 1px solid rgb(206 217 220);
    padding: 5px;
}

.pantalla-ventas-articulos-vendidos-one-view-row1 {
    display: grid;
    grid-template-columns: 1fr 5fr 2fr 1fr;
    gap: 5px;
    align-items: center;
}

.pantalla-ventas-articulos-vendidos-one-view-row2 {
    margin-top: 5px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    align-items: center;
}

.pantalla-ventas-formulario-dinamico {
    overflow-x: auto;
    overflow-y: auto;
    height: 100%;
}

.pantalla-ventas-familias {
    display: grid;
    gap: 5px;
    align-content: start;
    width: 100%;
    justify-content: start;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 150px;
}

.pantalla-ventas-familia-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    border: 1px solid var(--ui-border);
}

    .pantalla-ventas-familia-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


.pantalla-ventas-familias > * {
    hyphens: auto;
}

.pantalla-ventas-articulos-contenedor-padre {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden; /* evita que crezca según hijo */
}

.pantalla-ventas-articulos {
    display: grid;
    gap: 5px;
    align-content: start;
    width: 100%;
    justify-content: start;
    overflow-x: hidden;
    overflow-y: auto;
}

.pantalla-ventas-articulos-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    border: 1px solid var(--ui-border);
}

.pantalla-ventas-articulos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.pantalla-ventas-articulos.scrollbar-custom.background-panel-accent {
    min-height: 0;
    height: 100%;
    overflow-y: auto;
}

.pantalla-ventas-articulos > * {
    hyphens: auto;
}


.pantalla-ventas-clientes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
    gap: 3px;
    align-items: stretch;
}

.pantalla-ventas-linea-venta-edicion {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


/* components */
.error-message-body {
    color: var(--color-danger);
}

.listado-mesas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 3px;
    align-content: start;
}

    .listado-mesas > * {
        hyphens: auto;
    }

    .listado-mesas img {
        border-radius: var(--ui-radius);
        max-height: 90px;
    }

.listado-mesas-item {
    min-height: 100px;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    border: 1px solid var(--ui-border);
}


/* login */

section.login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
}


.login-component {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 400px;
    padding: 5px;
    border-radius: var(--ui-radius);
    background-color: var(--color-surface);
    animation-name: formulario-animation;
    animation-duration: 1s;
}


    .login-component img.logotipo {
        width: 150px;
    }




.image-grid {
    background: var(--color-surface);
    width: var(--image-lite-width);
    height: var(--image-lite-height);
    border-radius: var(--ui-radius);
    aspect-ratio: 1/1;
    object-fit: cover;
}

.image-upload-image-one {
    background-color: var(--color-app-bg);
    border-radius: var(--ui-radius);
    padding: 5px;
    margin: 20px 10px;
    display: flex;
    flex-direction: column;
}

    .image-upload-image-one > img {
        background: var(--formulario-background);
        padding: 5px;
        width: var(--image-middle-width);
        height: var(--image-middle-height);
        aspect-ratio: 1/1;
        object-fit: contain;
        border-radius: 0px var(--ui-radius) var(--ui-radius) var(--ui-radius);
        margin-bottom: 10px;
    }

.image-upload-image-one-check-principal {
    display: flex;
    justify-content: center;
    width: 50%;
    min-height: 25px;
    padding: 5px;
    background: var(--formulario-background);
    color: var(--formulario-font-color);
    border-radius: var(--ui-radius) var(--ui-radius) 0px 0px;
}

input.inputNumberGrid {
    color: var(--color-text-base);
    margin-right: 5px;
    margin-left: 5px;
    min-width: 150px;
    text-align: right;
}


/* monitor de comandas */
.monitor-comandas-content {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(300px, 1fr);
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
}

.monitor-comandas-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 5px;
    align-items: stretch;
}

.monitor-colmanda-venta {
}

.btn-en-elaboracion {
    background: #1db6fb;
    font-weight: bold;
    color: white;
}

.btn-para-servir {
    background: #8bc34a;
    font-weight: bold;
}

.btn-servido {
    background: #9a7bd1;
    font-weight: bold;
    color: white;
}

.btn-en-espera {
    background: #fb8200;
    font-weight: bold;
}



/* printer */

.printer {
    background: var(--color-secondary);
    margin: 0px;
    border-radius: var(--ui-radius);
}

.printer-label-bold {
    font-weight: bold;
}

.printer td, .printer th {
    padding: 0px;
}

.printer th {
    padding-bottom: 3px;
}

.printer-ticket {
    max-width: 5.8cm;
    font-size: 8px;
}




/* keyframes y animaciones */

.formulario-animation {
    animation: formulario-animation 1s ease-out forwards;
}

.page-transition {
    animation: fadein 0.5s ease-in;
}



@keyframes formulario-animation {
    from {
        opacity: 0%;
    }

    to {
        opacity: 100%;
    }
}

@keyframes show {
    from {
        opacity: 0;
        scale: 10%;
    }

    to {
        opacity: 1;
        scale: 100%;
    }
}


.animacion-start-izquierda {
    opacity: 0;
    transform: translateX(-100%);
    animation: animacion-start-izquierda 0.5s ease-out forwards;
}

@keyframes animacion-start-izquierda {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animacion-start-abajo {
    opacity: 0;
    transform: translateY(100%);
    animation: animacion-start-abajo 1.5s ease-out forwards;
}

@keyframes animacion-start-abajo {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* reporting */

.reporting-chart-box {
    max-height: 300px;
    min-width: 350px;
    background: var(--color-surface);
    border-radius: var(--ui-radius);
    padding: 5px;
    margin: 10px 0px;
    display: flex;
    justify-content: center;
}

    .reporting-chart-box canvas {
        width: 100%;
    }



.scrollbar-custom {
}




/*
    pantallas mayores a 400
*/
@media (min-width: 400px) {
    .scrollbar-custom::-webkit-scrollbar {
        width: 30px;
        height: 8px;
    }

    .scrollbar-custom::-webkit-scrollbar-track {
        background: var(--color-primary-soft);
        /* border-radius: 10px; */ /* Corrige el guion, si lo deseas usar */
    }

    .scrollbar-custom::-webkit-scrollbar-thumb {
        background-color: var(--color-secondary);
        /* border-radius: 10px; */ /* Corrige el guion */
        border: 3px solid var(--color-sidebar-bg);
    }

        .scrollbar-custom::-webkit-scrollbar-thumb:hover {
            background-color: var( --color-primary);
        }
}


/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {

    /* CSS */

}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (max-width: 767px) {


    /* login */

    section.login {
        background-color: var(--color-surface);
    }


    .grid-template {
        border: unset;
        box-shadow: unset;
    }

    .grid-template-card {
    }

    .formulario, .grid-template {
        background-color: white;
    }

    .pantalla-ventas-content {
        display: flex;
        flex-direction: column;
    }

    .pantalla-ventas-menu {
        overflow-x: auto;
    }

        .pantalla-ventas-menu button {
            padding: 5px;
        }

    .pantalla-ventas-formulario-dinamico {
        height: calc(100vh - 240px);
        overflow-y: auto;
    }

    .pantalla-ventas-articulos-vendidos {
        height: calc(100vh - 280px);
    }

    .pantalla-ventas-linea-venta-edicion {
        height: 100%;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .pantalla-ventas-left {
        display: flex;
        flex-direction: column;
    }

    .pantalla-ventas-right {
        overflow-y: auto;
    }

    .pantalla-ventas-articulos {
        /*height: calc(100vh - 100px - 180px - 40px);*/
    }

    .pantalla-ventas-familias {
        max-height: calc(100vh - 200px);
    }

    .pantalla-ventas-clientes {
        max-height: 95vh;
        overflow-x: auto;
        margin-bottom: 10px;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }


    .pantalla-ventas-articulos-vendidos-one-view-row1 .btn-primary {
        padding: 10px 20px;
    }

    .pantalla-ventas-articulos-vendidos-one-view-row2 .btn-primary {
        padding: 10px 20px;
    }

    .listado-mesas {
        height: calc(100vh - 100px - 190px - 110px);
    }


    .componentCardBox {
        min-height: 3rem;
        border: 1px solid var(--color-app-bg);
        margin: 2px 0px;
        border-radius: var(--ui-radius);
    }

        .componentCardBox img {
            display: none;
        }

    .main-content {
        margin-left: 0px;
        padding: 10px;
    }

    .sidebar nav:not(:has(.show)) {
        bottom: unset;
    }

    .sidebar nav:has(.show) {
        bottom: 0;
    }

    .footer {
    }
}