* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) var(--surface-2);
  font-family: 'Roboto', 'Arial', sans-serif;
  line-height: 100%;
}

/* Para asegurar en los elementos raíz también */
html, body {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) var(--surface-2);
  font-family: 'Roboto', 'Arial', sans-serif;
  line-height: 100%;
}

/* Para navegadores basados en Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 8px;
  background: var(--accent-subtle);
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-sm);
}

/*
  Roboto, que es --font-sans. Esta regla no cargaba nada: pedía los ficheros en
  /lib/font-awesome/fonts/ —sin la carpeta Roboto/—, sin extensión .ttf, con la itálica y la redonda
  en el mismo @font-face, y con format('ttf'), que no es un valor válido (es 'truetype'). O sea que
  toda la aplicación venía cayendo al Arial del sistema.

  Los ficheros llevaban además una coma en el nombre (Roboto-VariableFont_wdth,wght.ttf) y eso
  rompía `dotnet build` de la solución entera: MSBuild parte por comas los argumentos de
  [MSBuild]::MakeRelative al barrer wwwroot. De ahí el renombrado.

  Son fuentes variables, así que un solo fichero cubre todos los pesos: de ahí el rango en
  font-weight en vez de un `normal` que desperdiciaría el eje.
*/
@font-face {
  font-family: 'Roboto';
  src: url('/lib/font-awesome/fonts/Roboto/Roboto-VariableFont.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/lib/font-awesome/fonts/Roboto/Roboto-Italic-VariableFont.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }

/* Generic Angular anti-flicker and initial page loading overlay */
[ng-cloak], .ng-cloak {
    display: none !important;
}

.page-init-overlay {
    position: fixed;
    inset: 0;
    background: rgba(248, 249, 250, 0.92);
    backdrop-filter: blur(3px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-init-overlay .loader-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    color: var(--fg);
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-content-blurred {
    filter: blur(2px);
    pointer-events: none;
    user-select: none;
}
}

.modal{
    background-color: rgba(0,0,0,0.55) !important;
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--accent);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Una pantalla a sangre —el Login— no lleva barra inferior, así que esos 60 px sólo añadían scroll a
   una página que cabe entera. Se quita aquí y no en la vista para que valga para cualquier otra
   pantalla que se marque `ViewData["FullBleed"]`. */
body.full-bleed-page {
  margin-bottom: 0;
}

/* `mobile-menu.css` reserva por debajo de 768 px un hueco de 4rem para la barra inferior, pero esa
   barra sólo se renderiza con sesión abierta: en el login eran 64 px de scroll guardando sitio a algo
   que no está. */
body.full-bleed-page #app-container {
  padding-bottom: 0;
}

/* Kiosco: la pantalla es lo único que hay. Sin barras laterales de escritorio, sin relleno y sin el
   hueco de la barra inferior, que la pantalla se pinta hasta el borde. La barra del móvil se queda:
   por debajo de 768 px es la única forma de salir de aquí. Ver `ViewData["Kiosk"]` en _Layout. */
body.kiosk-page .primary-sidebar,
body.kiosk-page .secondary-sidebar {
  display: none !important;
}

body.kiosk-page #app-container {
  padding: 0;
  gap: 0;
}



.ml5 {
    margin-left: 15px;
}

.mr15 {
    margin-right: 15px;
}

.mb5 {
    margin-bottom: 5px;
}

.mb0 {
    margin-bottom: 0px;
}

.w1 {
    width: 10%;
}

.w9 {
    width: 90%;
}

.box, .boxrest, ul.orders {
    padding-left: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    list-style: outside none none;
}

    /* .box > li, .boxrest > li, .orders > li {
        padding: 1px;
        margin: 0px -1px -1px 0px;
        font-size: 16px;
        line-height: 1.4;
        border: 1px solid var(--border);
        word-break: break-all;
        white-space: normal;
        color: black;
        overflow: hidden;
    } */

    .boxrest > li, ul.orders > li {
        width: 24%;
        float: left;
        height: 100px;
        text-align: center;
        cursor: pointer;
    }

    .boxrest div, ul.orders div {
        display: table;
    }

    .boxrest > li p, ul.orders > li p {
        display: table-cell;
        vertical-align: middle;
    }

.box-small > li {
    height: 80px;
}

.btn-group {
    word-break: break-all;
}


.diff {
    font-size: 12px;
}

li.modifier {
    color: red;
}

li.itemsaved {
    background-color: gray;
}

li.open {
    color: red;
}

    li.open:hover {
        color: blue;
    }

/* li.updated, li.selected {
    background-color: transparent !important;
    background-image: none;
} */

/* .box li.updated:hover, .box li.selected:hover {
    color: white;
} */

.box, .boxrest, ul.orders {
    overflow-y: scroll;
}

.editItems {
    width: 100%;
    background-color: white;
}

.edititemsList {
    overflow: scroll;
    border: solid 1px lightblue;
    list-style: none;
    padding-left: 5px;
    background-color: white;
    margin-bottom: 0px;
}

    .edititemsList li {
        cursor: pointer;
        display: block;
        padding: 3px;
        text-align: left;
        font-size: 12px;
    }

#itemsList {
    clear: both;
    font-size: 10px;
    position: relative;
}

.control {
    display: block;
    width: 100%;
}

#waiting {
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1000;
    height: 2000px;
    overflow: hidden;
    background-color: blue;
    opacity: 0.2;
}

    #waiting img {
        margin-top: 25%;
    }

li .radio, li .checkbox {
    margin-top: 0px;
    margin-bottom: 0px;
}

label.error {
    font-size: 12px;
    color: red;
}

.spending {
    color: red !important;
}

.headerBoxName {
    height: 27px;
    max-height: 27px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    align-content: center;
}

#header {
    padding: 3px;
    margin-bottom: 1px;
}

#logo img {
    height: 40px;
    margin-right: 10px;
    display: inline;
}

#logo {
    margin-right: 10px;
    font-weight: bold;
    font-size: large;
}

    #logo:hover {
        text-decoration: none;
    }

#left-menu {
    box-shadow: none;
}

#side-menu {
    transition-property: left;
    transition-duration: 1s;
    position: fixed;
    left: -100%;
    top: 42px;
    z-index: 10000;
    width: 80%;
    overflow-y: scroll;
    background-color: white;
}

    #side-menu li.list-group-item:hover, #left-menu li.list-group-item:hover {
        background-color: var(--accent-subtle);
    }

/* @media (min-width:768px) {

    #side-menu {
        width: 50%;
    }

        #side-menu li.list-group-item {
            border: 0px;
        }

    li.list-group-item a {
        height: 100%;
        text-decoration: none;
    }
}

@media (min-width:1000px) {
    #side-menu {
        width: 40%;
    }
} */


.panel-body.list-group {
    box-shadow: none;
    margin-bottom: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
}

#side-menu .list-group-item {
    border: 0px;
}

.affix-container {
    top: 0px;
    right: 0px;
    padding: 8px; 
    background-color: var(--surface); 
    border-radius: var(--radius-sm);
    justify-content: right;
}

.affix-container2 {
    right: 0px;
    z-index: 1000;
}

.datetime, .date {
    cursor: pointer !important;
    padding: 3px 12px;
}



/**Select2**/
.select2-selection--multiple {
    border: 1px solid var(--border-strong) !important;
}

.select2-selection--single {
    height: 34px !important;
    border: 1px solid var(--border-strong) !important;
}

.select2-selection--single, .select2-selection--multiple {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.select2-selection__arrow {
    height: 34px !important;
}

.select2-search input:focus {
    border-color: var(--accent);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}

.select2-container {
    justify-items: center;
    align-items: center;
    border: 0px !important;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: inherit;
    color: inherit;
    background-color: inherit;
    border-radius: var(--radius-pill); 
    padding-top: 8px; 
    padding-bottom: 8px; 
    padding-left: 16px; 
    padding-right: 16px;
    line-height: 100%;
    scrollbar-width: thin;                
    scrollbar-color: var(--border-strong) var(--surface-2);          
}

.select2-container--default .select2-selection--single {
  border: 1.2px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  outline: none !important;
}

.selection, .select2-selection.select2-selection--single, #select2-selectClient-container, #select2-selectGroup-container {
    text-box: auto;
    align-items: center;
    border: 0px !important;
    color: inherit!important;
    background-color: inherit!important;
    height: auto!important;
    width: auto!important;
    gap: 8px;
}

#select2-select2Material-container, #select2-select2Material, #select2-select2Product-container, #select2-select2Product {
    text-box: auto;
    border-radius: var(--radius-sm);
    align-items: center;
    border: 1.2px solid var(--accent)!important;
    color: var(--accent)!important;
    background-color: inherit!important;
    height: auto!important;
    width: auto!important;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    gap: 8px;

}

.simple-select{
    background-image: url("data:image/svg+xml,%3Csvg%20width='20'%20height='8'%20viewBox='0%200%2014%208'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M14.0001%201.83264C13.999%202.09498%2013.8948%202.34638%2013.7101%202.53264L9.12006%207.12264C8.55756%207.68444%207.79506%208%207.00006%208C6.20506%208%205.44256%207.68444%204.88006%207.12264L0.29006%202.53264C0.103809%202.34528-0.00073268%202.09183-0.000732692%201.82764C-0.000732703%201.56345%200.103809%201.31%200.29006%201.12264C0.383023%201.02891%200.493624%200.954517%200.615483%200.903748C0.737342%200.852979%200.868048%200.826842%201.00006%200.826842C1.13207%200.826842%201.26278%200.852979%201.38464%200.903748C1.5065%200.954517%201.6171%201.02891%201.71006%201.12264L6.29006%205.71264C6.38302%205.80637%206.49362%205.88076%206.61548%205.93153C6.73734%205.9823%206.86805%206.00844%207.00006%206.00844C7.13207%206.00844%207.26278%205.9823%207.38464%205.93153C7.5065%205.88076%207.6171%205.80637%207.71006%205.71264L12.2901%201.12264C12.383%201.02891%2012.4936%200.954516%2012.6155%200.903747C12.7373%200.852979%2012.868%200.826841%2013.0001%200.826841C13.1321%200.826841%2013.2628%200.852979%2013.3846%200.903747C13.5065%200.954516%2013.6171%201.02891%2013.7101%201.12264C13.8027%201.21608%2013.8761%201.32689%2013.9258%201.44873C13.9756%201.57057%2014.0008%201.70103%2014.0001%201.83264Z'%20fill='%230050A5'/%3E%3C/svg%3E");
    background-repeat: no-repeat !important;
    background-position: calc(100% - 12px) center !important;
    background-size: 14px 8px !important; 
    padding-right: 28px !important;
    color: var(--accent)!important;
}

.select2-container[id*="select2-select2Material"] .select2-selection__arrow,
#select2-select2Material-container ~ .select2-selection__arrow {
    background: url("data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M15.8045 14.8619L11.8252 10.8825C12.9096 9.55625 13.4428 7.86392 13.3144 6.15556C13.1861 4.44721 12.406 2.85354 11.1356 1.7042C9.86516 0.554862 8.20158 -0.0622172 6.48895 -0.019396C4.77632 0.0234252 3.14566 0.72287 1.93426 1.93426C0.72287 3.14566 0.0234252 4.77632 -0.019396 6.48895C-0.0622172 8.20158 0.554862 9.86516 1.7042 11.1356C2.85354 12.406 4.44721 13.1861 6.15556 13.3144C7.86392 13.4428 9.55625 12.9096 10.8825 11.8252L14.8619 15.8045C14.9876 15.926 15.156 15.9932 15.3308 15.9916C15.5056 15.9901 15.6728 15.92 15.7964 15.7964C15.92 15.6728 15.9901 15.5056 15.9916 15.3308C15.9932 15.156 15.926 14.9876 15.8045 14.8619ZM6.66652 11.9999C5.61169 11.9999 4.58054 11.6871 3.70348 11.101C2.82642 10.515 2.14283 9.68204 1.73916 8.7075C1.3355 7.73296 1.22988 6.66061 1.43567 5.62604C1.64145 4.59147 2.14941 3.64117 2.89529 2.89529C3.64117 2.14941 4.59147 1.64145 5.62604 1.43567C6.66061 1.22988 7.73296 1.3355 8.7075 1.73916C9.68204 2.14283 10.515 2.82642 11.101 3.70348C11.6871 4.58054 11.9999 5.61169 11.9999 6.66652C11.9983 8.08052 11.4359 9.43615 10.436 10.436C9.43615 11.4359 8.08052 11.9983 6.66652 11.9999Z'%20fill='%230050A5'/%3E%3C/svg%3E") no-repeat center center;
    display: none !important;
}
.select2-container[id*="select2-select2Product"] .select2-selection__arrow,
#select2-select2Product-container ~ .select2-selection__arrow {
    display: none !important;
}

#select2-select2Material2-container, #select2-select2Material2, #select2-select2Product2-container, #select2-select2Product2 {
    text-box: auto;
    border-radius: var(--radius-sm);
    align-items: center;
    border: 1.2px solid var(--accent)!important;
    color: var(--accent)!important;
    background-color: inherit!important;
    height: auto!important;
    width: auto!important;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    gap: 8px;

}

.select2-container[id*="select2-select2Material2"] .select2-selection__arrow,
#select2-select2Material2-container ~ .select2-selection__arrow {
    background: url("data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M15.8045 14.8619L11.8252 10.8825C12.9096 9.55625 13.4428 7.86392 13.3144 6.15556C13.1861 4.44721 12.406 2.85354 11.1356 1.7042C9.86516 0.554862 8.20158 -0.0622172 6.48895 -0.019396C4.77632 0.0234252 3.14566 0.72287 1.93426 1.93426C0.72287 3.14566 0.0234252 4.77632 -0.019396 6.48895C-0.0622172 8.20158 0.554862 9.86516 1.7042 11.1356C2.85354 12.406 4.44721 13.1861 6.15556 13.3144C7.86392 13.4428 9.55625 12.9096 10.8825 11.8252L14.8619 15.8045C14.9876 15.926 15.156 15.9932 15.3308 15.9916C15.5056 15.9901 15.6728 15.92 15.7964 15.7964C15.92 15.6728 15.9901 15.5056 15.9916 15.3308C15.9932 15.156 15.926 14.9876 15.8045 14.8619ZM6.66652 11.9999C5.61169 11.9999 4.58054 11.6871 3.70348 11.101C2.82642 10.515 2.14283 9.68204 1.73916 8.7075C1.3355 7.73296 1.22988 6.66061 1.43567 5.62604C1.64145 4.59147 2.14941 3.64117 2.89529 2.89529C3.64117 2.14941 4.59147 1.64145 5.62604 1.43567C6.66061 1.22988 7.73296 1.3355 8.7075 1.73916C9.68204 2.14283 10.515 2.82642 11.101 3.70348C11.6871 4.58054 11.9999 5.61169 11.9999 6.66652C11.9983 8.08052 11.4359 9.43615 10.436 10.436C9.43615 11.4359 8.08052 11.9983 6.66652 11.9999Z'%20fill='%230050A5'/%3E%3C/svg%3E") no-repeat center center;
    display: none !important;
}
.select2-container[id*="select2-select2Product2"] .select2-selection__arrow,
#select2-select2Product2-container ~ .select2-selection__arrow {
    display: none !important;
}

#select2-barcodeType-container, #select2-barcodeType, 
#select2-munitItem-container, #select2-munitItem, 
#select2-munitItem2-container, #select2-munitItem2,
#select2-vatGroup-container, #select2-vatGroup,
#select2-groupItemSelect-container, #select2-groupItemSelect, 
#select2-vatGroupId-container, #select2-vatGroupId {
    text-box: auto;
    border-radius: var(--radius-sm);
    align-items: center;
    border: 1.2px solid var(--accent)!important;
    color: var(--accent)!important;
    background-color: inherit!important;
    height: auto!important;
    min-height: 42px!important;
    width: auto!important;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;

}

.select2-container[id*="select2-munitItem"] .select2-selection__arrow,
#select2-munitItem-container ~ .select2-selection__arrow {
    right: 10%;
    top: 20%;
}
.select2-container[id*="select2-munitItem2"] .select2-selection__arrow,
#select2-munitItem2-container ~ .select2-selection__arrow {
    right: 10%;
    top: 20%;
}
.select2-container[id*="select2-vatGroup"] .select2-selection__arrow,
#select2-vatGroup-container ~ .select2-selection__arrow {
    right: 10%;
    top: 20%;
}
.select2-container[id*="select2-groupItemSelect"] .select2-selection__arrow,
#select2-groupItemSelect-container ~ .select2-selection__arrow {
    right: 10%;
    top: 20%;
}
.select2-container[id*="select2-vatGroupId"] .select2-selection__arrow,
#select2-vatGroupId-container ~ .select2-selection__arrow {
    right: 10%;
    top: 20%;
}

#select2-groupSelected-container, #select2-groupSelected{
    text-box: auto;
    border-radius: var(--radius-sm);
    align-items: center;
    border: 1.2px solid var(--accent)!important;
    color: var(--accent)!important;
    background-color: inherit!important;
    height: 42px!important;
    width: auto!important;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;

}
.select2-container[id*="select2-groupSelected"] .select2-selection__arrow,
#select2-groupSelected-container ~ .select2-selection__arrow {
    right: 10%;
    top: 20%;
}

/* ===== SELECT2 CON SVG PERSONALIZADO ===== */

/* Ocultar la flecha por defecto */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder { 
    color: inherit; 
    font-weight: inherit; }

/* Aplicar tu SVG personalizado */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    background: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0001 1.83264C13.999 2.09498 13.8948 2.34638 13.7101 2.53264L9.12006 7.12264C8.55756 7.68444 7.79506 8 7.00006 8C6.20506 8 5.44256 7.68444 4.88006 7.12264L0.29006 2.53264C0.103809 2.34528 -0.00073268 2.09183 -0.000732692 1.82764C-0.000732703 1.56345 0.103809 1.31 0.29006 1.12264C0.383023 1.02891 0.493624 0.954517 0.615483 0.903748C0.737342 0.852979 0.868048 0.826842 1.00006 0.826842C1.13207 0.826842 1.26278 0.852979 1.38464 0.903748C1.5065 0.954517 1.6171 1.02891 1.71006 1.12264L6.29006 5.71264C6.38302 5.80637 6.49362 5.88076 6.61548 5.93153C6.73734 5.9823 6.86805 6.00844 7.00006 6.00844C7.13207 6.00844 7.26278 5.9823 7.38464 5.93153C7.5065 5.88076 7.6171 5.80637 7.71006 5.71264L12.2901 1.12264C12.383 1.02891 12.4936 0.954516 12.6155 0.903747C12.7373 0.852979 12.868 0.826841 13.0001 0.826841C13.1321 0.826841 13.2628 0.852979 13.3846 0.903747C13.5065 0.954516 13.6171 1.02891 13.7101 1.12264C13.8027 1.21608 13.8761 1.32689 13.9258 1.44873C13.9756 1.57057 14.0008 1.70103 14.0001 1.83264Z' fill='%230050A5'/%3E%3C/svg%3E") no-repeat center center;
    background-size: 16px 16px !important;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 8px;
    top: 10%;
}

/* Efecto hover */
.select2-container--default .select2-selection--single:hover .select2-selection__arrow {
    opacity: 0.8;
}

/* Cuando el dropdown está abierto */
.select2-container--open .select2-selection--single .select2-selection__arrow {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

/* Para select deshabilitado */
.select2-container--disabled .select2-selection--single .select2-selection__arrow {
    opacity: 0.5;
}

/* Rotar flecha cuando está abierto */
.select2-container--open .select2-selection--single .select2-selection__arrow {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}


/***End Select2***/
.nav {
    font-size: 14px !important;
}

span.qtty {
    font-size: 16px;
}

.operator30 {
    width: 28%;
    display: inline;
}

.field70 {
    width: 70%;
    display: inline;
}

.field30 {
    width: 33%;
    display: inline;
}

.btn-default:hover, .btn-default:focus {
    background-position: 0;
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
    select,
    textarea,
    input {
        font-size: 16px;
    }
}

.col-xsm-1, .col-xsm-2, .col-xsm-3, .col-xsm-4, .col-xsm-5, .col-xsm-6, .col-xsm-7, .col-xsm-8, .col-xsm-9, .col-xsm-10, .col-xsm-11, .col-xsm-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 350px) and (max-width:768px) {
    .col-xsm-1, .col-xsm-2, .col-xsm-3, .col-xsm-4, .col-xsm-5, .col-xsm-6, .col-xsm-7, .col-xsm-8, .col-xsm-9, .col-xsm-10, .col-xsm-11, .col-xsm-12 {
        float: left;
    }

    .col-xsm-12 {
        width: 100%;
    }

    .col-xsm-11 {
        width: 91.66666667%;
    }

    .col-xsm-10 {
        width: 83.33333333%;
    }

    .col-xsm-9 {
        width: 75%;
    }

    .col-xsm-8 {
        width: 66.66666667%;
    }

    .col-xsm-7 {
        width: 58.33333333%;
    }

    .col-xsm-6 {
        width: 50%;
    }

    .col-xsm-5 {
        width: 41.66666667%;
    }

    .col-xsm-4 {
        width: 33.33333333%;
    }

    .col-xsm-3 {
        width: 25%;
    }

    .col-xsm-2 {
        width: 16.66666667%;
    }

    .col-xsm-1 {
        width: 8.33333333%;
    }
}

.scrolly{
    overflow-y: scroll;
    justify-content: center!important;
}

.modal-body{
    border-radius: var(--radius-sm); 
    /* padding: 0px;  */
    gap: 10px; 
    height: 100%; 
    width: 100%;
}

.moveditem {
    color: blue;
}

.changeditemlist {
    margin-bottom: 25px;
    padding: 3px;
    overflow-y: auto; 
    max-height: 35vh;
    gap: 4px;
    scrollbar-width: thin;                
    scrollbar-color: var(--border-strong) var(--surface-2);            
}

::-webkit-scrollbar-button {
  display: none!important;
  width: 0!important;
  height: 0!important;
}

.itemlist {
    padding: 3px;
}

.reports-itemslist{
    overflow-x: auto!important; 
    overflow-y: auto!important;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: min-content;
    width: 100%;
}

/* Lista de productos scrollable */
#itemlist {
  max-height: 480px;    
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

#itemlistEdit {   
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  min-height: 480px;
}

#itemlist-cashbook{
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: min-content;
  width: 100%;
}

#itemlistG, .itemlistG {
  max-height: 480px;    
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.munit {
    font-size: 10px;
    display: inline-block;
    margin-left: 3px;
}

.quick-search {
    width: 100px;
    display: inline;
    position: relative;
    top: 2px;
}

g[class$='-creditgroup'] {
    display: none;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 3px;
}

.unsaved {
    color: royalblue;
}


#loading {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 2000;
    text-align: center;
    top: 0px;
    opacity: 0.3;
    background-color: grey;
}

    #loading img {
        margin-top: 150px;
    }

.modal-dialog{
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
    min-width: 50%;
}

.modal-dialog.full {
    margin: 0px auto;
}

    /* .modal-dialog.full .modal-header, .modal-dialog.full .modal-footer {
        padding: 5px;
    } */

    /* .modal-dialog.full .alert {
        padding: 5px;
    } */

/*
 * Lo que se imprime de un informe es el informe.
 *
 * Esto vive aquí, en la hoja global, y no en el CSS de la pantalla del informe, porque el cromo a
 * esconder está repartido: los filtros y el menú de exportar son componentes Angular, la barra
 * inferior y las barras laterales son del layout Razor. Un estilo con ámbito de componente no
 * alcanza ni a un componente hijo ni al layout — por eso la regla que había dentro de
 * report-generic.css sólo lograba esconder los botones de su propia fila, y salían impresos los
 * campos de fecha, los formatos de exportación y la barra de Inicio/Tienda/Buscar.
 *
 * `.screen` y `.print` estaban aquí desde el cliente de escritorio y **no se usan en ninguna
 * plantilla**, ni Razor ni Angular, así que este bloque no hacía nada. Se conservan por si algo
 * fuera del repositorio los usa; lo que marca de verdad es `.no-print`.
 */
@media print {
    /* La marca explícita: cualquier control que sólo tenga sentido en pantalla. */
    .no-print,
    /* Navegación: nada de esto pertenece a una hoja impresa. */
    .mobile-bar,
    .mobile-sheet,
    .primary-sidebar,
    .secondary-sidebar,
    /*
     * El asistente se cierra apartándolo con `translateX(105%)`, no ocultándolo: sigue ahí, fijo, y
     * al imprimir el 105% se mide contra el ancho del papel, no contra el de la ventana, así que
     * asomaba una franja del panel en cada hoja del informe.
     */
    app-assistant-widget,
    /* Convención heredada, hoy sin uso. */
    .screen {
        display: none !important;
    }

    .print {
        display: block;
    }

    /* Los 60px de `body` reservan sitio a la barra inferior; escondida la barra, sobran. */
    body {
        margin-bottom: 0;
    }

    /*
     * Las tablas se desplazan dentro de una caja de altura fija para que la cabecera y los totales
     * queden siempre a la vista. Al imprimir eso recorta el informe a una pantalla de filas: un
     * informe de un mes son miles, y salía la primera página y nada más.
     */
    .acc-table-wrap,
    .table-responsive {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Pegados a la ventana no significan nada en papel, y el navegador los repite o los descoloca. */
    .report-totals td,
    thead th {
        position: static !important;
    }

    /*
     * En pantalla las celdas no parten el texto y la tabla se desplaza a lo ancho dentro de su caja.
     * En papel no hay a dónde desplazarse: la tabla mantenía su ancho real y el navegador cortaba por
     * el borde de la hoja, así que de «Ventas por mercancías» salían las dos primeras columnas y
     * Cantidad y Total —y con ellas la fila de totales— se quedaban fuera de la página.
     */
    .acc-table {
        width: 100% !important;
        font-size: 8pt;
    }

    .acc-table th,
    .acc-table td {
        white-space: normal !important;
        /*
         * `break-word` y no `anywhere`: `anywhere` deja que el ancho mínimo de una columna baje a una
         * letra, y el navegador aprovecha para estrujarlas —salían «Có/dig/o» y «1,470./00»—. Con
         * `break-word` el mínimo es la palabra entera y sólo se parte lo que de verdad no cabe.
         */
        overflow-wrap: break-word;
        padding: 3px 5px !important;
    }

    @page {
        size: auto;
        margin: 3mm auto;
    }

    a[href]:after {
        content: "" !important;
    }
}

.alert, .nav-tabs > li > a, .btn, .form-control, .select2-container--default .select2-selection--multiple, .dropdown-menu, .select2-container--default .select2-selection--single, .nav-pills > li > a {
    border-radius: 0px !important;
}

td.highlight {
    background-color: green;
}

.modal-content {
    border-radius: 0px;
}


.alert {
    padding: 5px;
    margin-bottom: 0px;
}


.form-control {
    padding: 3px;
    height: 28px;
}

.containertop {
    border-radius: var(--radius-sm);
    padding: 0px!important;
    max-width: 100%!important;
    gap: 16px;
    background-color: var(--accent-subtle);
    height: 100%;
    width: 100%;
}

.select2-container--default .select2-selection--single {
    border-radius: 0px !important;
}

.smallqttyinput {
    display: inline-block;
    width: 70px;
}

.smallqttycontainer {
    display: block;
    width: 120px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

.secondary-sidebar.selected {
    overflow-y: auto;
    scrollbar-width: none;
    gap: 32px!important;
    width: auto;
    margin-right: 0;
    display: flex!important;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 32px;
    padding-top: 32px;
}

.secondary-sidebar.selected .submenu-nav li a.nav-link span.link-text {
    display: flex;
    align-items: center;
    white-space: normal;
}

/* ---- El panel de sección, en bloques y columnas -----------------------------------------------
   Los grupos eran acordeones dentro de una columna de 240 px: con Informes —cuarenta entradas en
   ocho grupos— abrir uno empujaba a los demás fuera de la vista. Ahora cada grupo es un bloque con
   su encabezado y la sección se reparte en columnas.

   El panel ya era superposición (`position: fixed` en `_Layout.cshtml.css`), así que ensancharlo no
   mueve la pantalla de trabajo que hay detrás.

   Las columnas son de CSS y no de rejilla a propósito: los bloques miden distinto —tres entradas
   uno, dieciséis otro— y `column-count` los reparte equilibrando la altura, que es justo lo que
   una rejilla de columnas fijas no hace. `break-inside: avoid` impide que un grupo se parta por la
   mitad entre dos columnas. */
/* `.secondary-sidebar` delante para ganarle a `_Layout.cshtml.css`, que define
   `#submenuContent { display: inline; width: 104px }` con la misma especificidad y se carga
   después: a igualdad, manda el último. Y `display:inline` deja las columnas sin efecto. */
.secondary-sidebar #submenuContent[data-cols] {
    display: block;
    column-gap: 28px;
    width: auto;
}

.secondary-sidebar #submenuContent[data-cols="1"] { columns: 1; min-width: 230px; }
.secondary-sidebar #submenuContent[data-cols="2"] { columns: 2; min-width: 470px; }
.secondary-sidebar #submenuContent[data-cols="3"] { columns: 3; min-width: 700px; }

/* En una ventana estrecha no caben tres columnas al lado del raíl: bajan a dos, y luego a una. El
   panel no puede llegar a tapar la pantalla entera — y por debajo de 1024px el raíl ya se ha puesto
   horizontal arriba, así que el panel arranca en el borde izquierdo. */
/* Los cortes salen de la cuenta, no del ojo: una columna mide 230 px y la separación 28, así que
   tres columnas piden 3×230 + 2×28 ≈ 766 más el raíl, y dos piden ≈ 508 más el raíl. Estaban en
   1100 y 860 —de más— y a 1000 px de ancho Informes se quedaba en dos columnas y con desplazamiento
   teniendo sitio para tres. */
@media (max-width: 880px) {
    .secondary-sidebar #submenuContent[data-cols="3"] { columns: 2; min-width: 470px; }
}

@media (max-width: 620px) {
    .secondary-sidebar #submenuContent[data-cols="3"],
    .secondary-sidebar #submenuContent[data-cols="2"] { columns: 1; min-width: 230px; }
}

/* Y en cualquier caso, nunca más ancho que la ventana menos el raíl. */
.secondary-sidebar.selected {
    max-width: calc(100vw - 72px);
}

@media (max-width: 1024px) {
    .secondary-sidebar.selected {
        max-width: 100vw;
    }
}

/* El bloque **sin encabezado** —los destinos sueltos de la sección— sí se parte entre columnas, y
   hace falta que se parta. `break-inside: avoid` para todos parecía lo correcto —«que no se corte un
   grupo por la mitad»— y dejaba la segunda columna **vacía** en cuanto una sección era plana: Diario
   son trece entradas en un único bloque sin encabezado, y un bloque indivisible de 590 px no cabe
   dos veces en ninguna parte. */
.submenu-block {
    display: block;
    margin-bottom: 18px;
}

/* Un grupo que quepa en una columna, en cambio, no se parte: cortado, sus últimos hijos aparecen al
   principio de la columna siguiente sin ningún encabezado encima, y leídos así parecen de nadie o
   del grupo de al lado. Se vio al agrupar Contabilidad —«Estados financieros» perdía el 5921 y las
   notas al otro lado del salto— pero venía de antes, con los ocho grupos de Informes en tres
   columnas.

   Quién lleva esta clase lo decide `site.js` midiendo: sólo los bloques con encabezado, y sólo los
   que caben. Informes → Artículos son dieciséis hijos y no cabe en la columna de un portátil, así
   que se sigue partiendo — sujetarlo pondría a desplazarse el panel entero. */
.submenu-block--titled {
    break-inside: avoid;
}

/* Un encabezado nunca se queda solo al pie de una columna con su lista en la siguiente. */
.submenu-block-title {
    break-after: avoid;
}

/* Y una fila no se parte por la mitad entre dos columnas. */
.submenu-entry {
    break-inside: avoid;
}

/* El encabezado del grupo: una etiqueta, no un mando. No tiene pantalla detrás y hasta ahora era un
   control cuya única función era enseñar lo que ya cabe a la vista. */
.submenu-block-title {
    margin: 0 0 4px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg);
    opacity: 0.55;
}

.submenu-block-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.submenu-entry {
    width: 100%;
}

/* Los hijos van con la misma altura que los destinos sueltos pero con el texto algo más liviano:
   el encabezado ya dice que están dentro de algo, así que no hace falta sangrarlos. */
.submenu-entry--child .link-text {
    font-weight: 500;
}

.submenu-entry .nav-link {
    height: 44px;
    padding: 8px 12px !important;
    gap: 10px;
}

.submenu-entry .nav-link svg,
.submenu-entry .nav-link img {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.submenu-entry .link-text {
    display: inline-flex;
    align-items: center;
    white-space: normal;
    font-size: 0.9rem;
}

/* ---- Buscador del menú (Ctrl+K) -------------------------------------------------------------
   Un velo a pantalla completa con el panel arriba y no centrado: la lista crece hacia abajo, y
   centrada saltaría de sitio con cada tecla. Los colores salen de las variables del tema, así que
   sirve igual en claro y en oscuro. */
.menu-search {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 12vh;
    background: rgba(0, 0, 0, 0.45);
}

/* `hidden` es cómo se cierra, y una clase con `display` le gana al `[hidden]` del navegador: sin
   esta regla el diálogo se quedaría abierto para siempre. */
.menu-search[hidden] {
    display: none;
}

.menu-search-panel {
    width: min(560px, calc(100vw - 2rem));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius, 12px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.menu-search-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--border);
    color: var(--fg);
}

.menu-search-head input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--fg);
    font-size: 1rem;
}

.menu-search-esc {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    color: var(--fg);
    opacity: 0.6;
}

.menu-search-results {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 50vh;
    overflow-y: auto;
}

/* Sin resultados no hay borde ni relleno que dibujen una caja vacía debajo del campo. */
.menu-search-results:empty {
    display: none;
}

.menu-search-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    color: var(--fg);
}

/* Una sola clase para el teclado y el ratón: lo que las flechas marcan es lo que Intro abre, y
   pasar el ratón por encima no debe contradecir a la flecha.

   `current` y no `active`: hay un `.active { color: var(--accent)!important }` global mil líneas
   más abajo, y con él la fila marcada salía con el texto del mismo color que su fondo —azul sobre
   azul, ilegible, y se vio en la primera prueba en el navegador—. Ganarle pedía otro `!important`;
   cambiar de nombre no pide nada. */
.menu-search-item.current {
    background: var(--accent);
    color: #fff;
}

.menu-search-item.current .menu-search-label,
.menu-search-item.current .menu-search-trail {
    color: #fff;
}

.menu-search-item.current .menu-search-trail {
    opacity: 0.85;
}

.menu-search-label {
    font-weight: 600;
}

.menu-search-trail {
    font-size: 0.78rem;
    opacity: 0.7;
}

.menu-search-empty {
    padding: 0.9rem;
    color: var(--fg);
    opacity: 0.7;
}

/* En un teléfono manda la hoja del lanzador, que ya trae su propio buscador. Dos buscadores
   distintos sobre la misma lista serían dos cosas que mantener y una que sobra. */
@media (max-width: 768px) {
    .menu-search {
        display: none !important;
    }
}

/* Las cabeceras del panel se pintan sin `href`: no llevan a ninguna pantalla, se despliegan. Un
   <a> sin href pierde la mano del cursor, y la entrada se sigue pulsando, así que tiene que
   seguir pareciéndolo. Va aquí y no en `_Layout.cshtml.css` porque estas entradas las crea
   `site.js`, y el CSS con ámbito sólo alcanza a lo que renderiza la propia vista. */
.secondary-sidebar .submenu-nav a.nav-link {
    cursor: pointer;
}

.nav-link {
    align-items: center!important;
    display: flex!important;
    color: var(--fg);
    gap: 12px;
    border-radius: var(--radius);
    padding: 16px;
    height: 56px;
    font-weight: 600;
    width: 100%!important;
}

/* .nav-link.home{
    justify-content: center!important;
    align-items: center!important;
} */

.nav-link:hover, .nav-link:focus, .nav-link.selected, .nav-item.selected{
    color: var(--accent)!important;
    background-color: var(--accent-subtle);
    cursor: pointer;
}

.ng-scope.selected, .group-node.selected{
    background-color: var(--border-strong)!important;
    border-radius: var(--radius-sm)!important;
}

.link-text {
    font-family: 'Roboto', 'Arial', sans-serif; 
    font-weight: 600; 
    font-size: 16px; 
    line-height: 100%;
}

.link-text-submenu {
    font-weight: 600; 
    font-size: 16px; 
}

#location-button:hover{
    background-color: var(--accent)!important;
    color: var(--fg-on-accent)!important;
}

#app{
    display: flex;
    flex-direction: column;
    flex: 1; 
    min-width: 0; 
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;                
    scrollbar-color: var(--border-strong) var(--surface-2);  
}

@media (max-width: 1600px){

    #home{
        width: 80%!important;
    }

    .direct-access{
        padding-top: 24px!important;
        padding-bottom: 24px!important;
        justify-content: center!important;
    }

    .span{
        font-size: 16px!important;
    }

}

@media (max-width: 1475px){

    #home{
        width: 80%!important;
    }

    .direct-access{
        padding-top: 24px!important;
        padding-bottom: 24px!important;
        justify-content: center!important;
    }

    #buttons-footer-transfer{
        justify-content: space-between!important;
    }
}


@media (max-width: 1024px) {
    #app-container{
        flex-direction: column!important;
        height: auto!important;
    }
    #path-header{
        width: 100%!important;
        padding-left: 16px!important;
    }
    
    .primary-sidebar {
        height: 8%!important;
        width: 100%!important;
        flex-direction: row!important;
        border-bottom: 1.2px solid var(--border)!important;
    }
    .primary-sidebar.d-flex.flex-column.selected{
        align-items: center!important;
    }
    .sidebar-header{
        flex-direction: row!important;
        gap: 0px!important;
        padding: 0px!important;
        height: 100%!important;
        width: auto!important;
    } 
    #sidebar-nav{
        flex-direction: row!important;
        height: 100%!important;
    } 

    .secondary-sidebar {
        left: 0;
        top: 72px;
    } 
    /* .secondary-sidebar-header{
        height: auto!important;
        width: 100%!important;
        display: none!important;
    }
    #submenuContent{
        width: 100%!important;
        height: 100%!important;
        display: flex!important;
        flex-direction: row!important;
        margin: 0px!important;
        padding: 0px!important;
    }*/
    #headerForm{
        height: 56px!important;
        width: 100%!important;
        gap: 4px!important;
        padding: 4px!important;
    } 
    #entity-header{
        padding: 8px 4px!important;
        width: 40%!important;
        max-width: 40%!important;
        justify-content: center!important;
    }
    #entity-header-date{
        padding: 4px!important;
        width: 15%!important;
        max-width: 15%!important;
        justify-content: center!important;
        height: 80%!important;
    }

    .nav-link.selected {
        padding: 0px !important;
    }

    .nav-link {
        padding: 0px !important;
    } 

    .direct-access{
        padding-top: 24px!important;
        padding-bottom: 24px!important;
        justify-content: center!important;
    }

    #price-column, .price-column{
        display: none!important;
    }

    .row-column{
        flex-direction: column!important;
    }

    .column-row{
        flex-direction: row!important;
    }

    #itemlist-cashbook{
        max-height: 650px!important;
    }

    .submenu-production{
        padding: 0px!important;
    }

    .start{
        justify-content: start!important;
    }

    #actual-direction{
        font-size: 18px!important;
    }

    .nav-link.home{
        align-items: center!important;
        justify-content: center!important;
        display: flex!important;
        flex-direction: row!important;
        height: 100%!important;
    }

    .mw-100{
        width: 100%!important;
    }

    .noTable{
        display: none;
    }

    .containertop{
        padding: 0px!important;
    }

    #app{
        max-height: 95vh!important;
        display: flex;
    }

    .secondary-sidebar, .secondary-sidebar.selected {
        left: 0;
        top: 72px;
    }

}

/* Very small screens */
@media (max-width: 768px) {
    #app-container{
        flex-direction: column!important;
        height: auto!important;
    }
    #path-header{
        width: 100%!important;
        padding-left: 16px!important;
    }
    .primary-sidebar{
        height: 8%!important;
        width: 100%!important;
        flex-direction: row!important;
        border-bottom: 1.2px solid var(--border)!important;
    }
    
    .sidebar-header{
        flex-direction: row!important;
        gap: 0px!important;
        padding: 0px!important;
        height: 100%!important;
        width: auto!important;
    } 
    #sidebar-nav{
        flex-direction: row!important;
        height: 100%!important;
    }

    #sidebar-logo{
        width: 90%!important;
        height: 100%!important;
    }
    #sidebar-title{
        display: none!important;
    } 
    /* #mobile-logo{
        display: flex!important;
    }

     .secondary-sidebar {
        width: 15%!important;
        height: 100%!important;
    } 
    .secondary-sidebar-header{
        height: auto!important;
        width: 100%!important;
        display: none!important;
    }
    #submenuContent{
        width: 100%!important;
        height: 100%!important;
        display: flex!important;
        flex-direction: row!important;
        margin: 0px!important;
        padding: 0px!important;
    }
    #submenuTitle{
        display: none!important;
    } */

    .nav-link.selected {
        padding: 8px !important;
    }

    .nav-link {
        padding: 8px !important;
    }

    #location-button{
        width: max(21%, auto)!important;
    }
    #products-header{
        width: 100%!important;
        margin: 0px!important;
    }
    #filter{
        width: 100%!important;
        margin: 0px!important;
        padding: 0px!important;
        font-size: 16px!important;
    }
    .info-header{
        width: 100%!important;
    }
    #code-column{
        width: 15%!important;
        margin: 0px!important;
        text-align: center!important;
    }
    #product-column, .product-column{
        margin: 0px!important;
        text-align: left!important;
        width: 50%!important;
    }
    #quantity-column, .quantity-column{
        text-align: center!important;
        width: 50%!important;
        flex-grow: 1;
        padding-left: 4px!important;
    }
    #other-column{
        flex-grow: 1;
        margin: 0px!important;
    }

    #top{
        height: 10%!important;
    }
    #affix-container{
        height: 100%!important;
        flex-direction: column!important;
        gap: 8px!important;
    }
    #affix-container-edits{
        flex-direction: column-reverse!important;
        gap: 8px!important;
        justify-content: space-between!important;
    }

    .generic-chart-container {
        max-width: 100%;
    }

    #total-footer{
        width: 100%!important;
        flex-direction: row!important;
        justify-content: center!important;
        align-items: center!important;
        padding: 8px!important;
        line-height: 0px!important;
    }

    #qtty-button{
        display: none;
    }
    #product-column-modal, .product-column-modal{
        width: 40%!important;
    }
    #quantity-column-modal, .quantity-column-modal{
        width: 30%!important;
    }
    #price-column-modal, .price-column-modal{
        display: none!important;
        width: 0px!important;
    }
    #priceIn, #qttyIn{
        width: 90%!important;
        border: 1.2px solid var(--border-strong)!important;
        border-radius: var(--radius-sm) !important;
    }
    .modal-content, .modal-footer{
        min-width: 0px!important;
        width: 100%!important;
        padding: 8px!important;
    }
    .pull-right{
        padding: 2px!important;
        width: 100%!important;
    }
    #qtty-img{
        width: 20%!important;
    }

    .qtty.label{
        font-size: 16px!important;
    }

    .detailed-product{
        padding: 2px!important;
    }
    .button{
        width: 100%;
        padding: 6px!important;
        justify-content: center;
    }
    #buttons-footer{
        gap: inherit!important;
        margin: 0px!important;
    }
    #buttons-footer-transfer{
        gap: inherit!important;
        justify-items: center;
        margin: 0px!important;
        width: 100%!important;
    }
    .span{
        font-size: 14px!important;
    }
    #code{
        display: none;
        width: 0px;
    }
    #product-transfer{
        width: 33%;
    }
    #arrow-right{
        rotate: 90deg;
    }

    #modal-edit-content{
        height: auto!important;
    }

    #home{
        width: max-content!important;
        gap: 8px!important;
    }

    #mobile-column{
        width: 50%!important;
        display: flex!important;
        flex-direction: column!important;
        justify-content: center; 
        align-items:center;
        text-align: center!important;
        flex-grow: 1;
    }

    #edit-info-header, .ng-scope{
        padding-left: 4px!important;
        padding-right: 4px!important;
    }
    #backButton{
        width: 100%!important;
        margin-left: 0px!important;
    }

    #onlyAvailable{
        font-size: 12px!important;
        white-space: break-spaces!important;
    }

    .modal-dialog-items{
        width: 100%!important;
        margin: 0px;
    }

    .img-container{
        width: 40%!important;
    }

    .items-left{
        width: 25%!important;
    }

    .items-right{
        width: 75%!important;
    }

    .filter-container{
       width: 80%; 
       padding: 0px;
    }

    .recipe-header{
        margin: 0px!important;
        padding: 0px!important;
    }

    .recipe-edit-footer{
        flex-direction: column!important;
        width: 40%!important;
    }

    .recipe-edit-info{
        width: 60%!important;
        padding: 8px!important;
        font-size: 14px!important;
        font-weight: 400!important;
    }

    .recipe-info{
        font-weight: 500!important;
    }

    .start{
        justify-content: start!important;
    }

    #edit-body-summary{
        display: block!important;
        height: 920px!important;
        max-height: 920px!important;
    }

    #pie-chart-container{
        width: 100%!important;
        max-width: 100%!important;
        height: 50%!important;
        padding-top: 16px;
    }

    .select2-container{
        font-size: 16px!important;
    }

    .direct-access{
        padding-top: 16px!important;
        padding-bottom: 16px!important;
        font-size: 20px!important;
        font-weight: 400!important;
    }

    .mobileButton{
        width: 50px!important;
        padding: 8px 16px!important;
    }

    .f-400-20{
        font-size: 16px !important;
    }

    .noMobile{
        display: none!important;
    }

    #date.mobile-date-open{
        display: flex!important;
        width: 140px!important;
        min-width: 140px!important;
        height: 28px!important;
    }

    .modal-title{
        font-size: 18px!important;
    }

    .onlyMobile{
        display: flex!important;
    }

    .select2-selection__arrow {
        display: none!important;
    }

    #date.mobile-date-open {
        display: flex !important;
        width: 140px !important;
        min-width: 140px !important;
        height: 28px !important;
    }

    .signature-modal-content {
        padding: 16px;
        gap: 12px;
    }

    .signature-modal-header {
        font-size: 20px;
        padding-bottom: 12px;
    }

    .signature-document-name {
        font-size: 16px;
        white-space: normal;
    }

    .signature-canvas-shell {
        height: 280px;
    }

    .signature-modal-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .signature-modal-footer .button,
    .signature-modal-footer button {
        width: 100%;
        justify-content: center;
    }

}

@media (max-width: 420px) {
    .direct-access{
        font-size: 16px!important;
    }

    .icon-direct-access{
        width: 32px!important;
        height: 32px!important;
    }
}

#itemlistEdit li:nth-child(odd) { background: var(--surface); } 
#itemlistEdit li:nth-child(even) { background: var(--surface-2); border-radius: var(--radius-sm); }

#itemlist li:nth-child(odd) { background: var(--surface); } 
#itemlist li:nth-child(even) { background: var(--surface-2); border-radius: var(--radius-sm); }

#itemlistG li:nth-child(odd) { background: var(--surface-2); } 
#itemlistG li:nth-child(even) { background: var(--surface); border-radius: var(--radius-sm); }

.itemlistG li:nth-child(odd) { background: var(--surface); } 
.itemlistG li:nth-child(even) { background: var(--surface-2); border-radius: var(--radius-sm); }

#itemlist-cashbook li:nth-child(odd) { background: var(--surface); } 
#itemlist-cashbook li:nth-child(even) { background: var(--surface-2); border-radius: var(--radius-sm); }

#qttyForm, #generalForm, #extraForm, #priceForm, #groupForm, #itemForm{
    display: flex;
    flex-direction: column;
    width: 100%;
}

ul#itemlist { 
    overflow-y: auto; 

    /* Firefox */
    -ms-overflow-style: none; 
}

ul#itemlist::-webkit-scrollbar { 
    /* Chrome / Safari */ 
    width: 0; 
    height: 0; 
    display: none; 
}

ul#itemlistG, ul.itemlistG { 
    overflow-y: auto; 

    /* Firefox */
    -ms-overflow-style: none; 
}

ul#itemlistG::-webkit-scrollbar, ul.itemlistG::-webkit-scrollbar { 
    /* Chrome / Safari */ 
    width: 0; 
    height: 0; 
    display: none; 
}

.button{
    height: 38px;
}

.accept-button {
    color: var(--accent);
    background-color: var(--surface);
    border: 1.2px solid var(--accent);
    border-radius: var(--radius-sm)!important;
    display: flex;
    gap: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 16px;
    padding-left: 16px;
    align-items: center;
    font-family: 'Roboto', 'Arial', sans-serif; 
    font-weight: 600; 
    font-size: 20px; 
    line-height: 100%;
}

.cancel-button{
    color: var(--danger);
    background-color: var(--surface);
    border: 1.2px solid var(--danger);
    border-radius: var(--radius-sm)!important;
    display: flex;
    gap: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 16px;
    padding-left: 16px;
    align-items: center;
    font-family: 'Roboto', 'Arial', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
}

.green-button{
    font-weight: 400; 
    color: var(--success); 
    background-color: var(--surface); 
    border: 1.2px solid var(--success); 
    border-radius: var(--radius-sm)!important; 
    display: flex; 
    gap: 10px; 
    padding-top: 8px; 
    padding-bottom: 8px; 
    padding-right: 16px; 
    padding-left: 16px; 
    align-items: center; 
    font-size: 20px; 
}

.yellow-button{
    color: var(--warning); 
    background-color: var(--surface); 
    border: 1.2px solid var(--warning); 
    border-radius: var(--radius-sm); 
    display: flex; 
    gap: 10px; 
    padding-top: 8px; 
    padding-bottom: 8px;
    padding-right: 16px; 
    padding-left: 16px; 
    align-items: center;
}

.product-item.d-flex.flex-row {
    height: 58px; 
    font-family: 'Roboto', 'Arial', sans-serif; 
    font-weight: 400; 
    font-size: 20px; 
    line-height: 100%; 
    color: var(--fg); 
    padding-left: 32px; 
    padding-right: 32px; 
    border: none; 

}

.product-item.d-flex.flex-row.selected {
    border-radius: var(--radius-sm);
    background-color: var(--accent-subtle)!important;
}

.product-item.d-flex.flex-row:hover {
    border-radius: var(--radius-sm);
    border: 2px solid var(--accent) !important;
    cursor: pointer;
}

.panel-production {
    display: flex;
    flex-direction: column;
    max-height: 378.5px;
    overflow-y: auto;
    border-radius: var(--radius-sm);
    padding: 16px;
    gap: 8px;
    background-color: var(--surface);
    width: 100%;
}

.panel-heading {
    display: flex;
    flex-direction: row;
    font-family: 'Roboto', 'Arial', sans-serif; 
    font-size: 20px; 
    line-height: 100%; 
    color: var(--fg);
    align-items: center;
}

.panel-body {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#recipeName {
    text-box: auto;
    border-radius: var(--radius-sm)!important;
    border: 2px solid var(--border-strong)!important;
    color: var(--fg-subtle);
    -webkit-text-fill-color: var(--accent) ;
    background-color: inherit!important;
    height: auto!important;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    font-family: 'Roboto', 'Arial', sans-serif; 
    font-size: 20px; 
    line-height: 100%; 
}

.qtty-positive {
    background-color: var(--success-subtle) !important;
    color: var(--success) !important;
}
.qtty-negative {
    background-color: var(--danger-subtle) !important;
    color: var(--danger) !important;
}

.isRecipe {
    color: var(--warning) !important;
}

.modal-fade{
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
}

#edit-input, .edit-input{
    padding-bottom: 8px; 
    padding-top: 8px; 
    padding-right: 16px; 
    padding-left: 16px; 
    border: 1px solid var(--border-strong); 
    border-radius: var(--radius-sm)!important; 
    font-family: 'Roboto', 'Arial', sans-serif; 
    font-weight: 400; 
    font-size: 16px; 
    line-height: 100%; 
    color:var(--fg); 
    text-align: left; 
    height: auto;
}

#qtty-btn{
    width: 24px;
    height: 24px;
}

.modal.show[data-modal-level="2"] {
  z-index: 1070 !important;
}

input[type=radio] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background-color: white;
    cursor: pointer;
    position: relative;
}

input[type=radio]:checked {
    background-color: white;
    border-color: var(--accent);
}

input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: var(--accent);
    border-radius: 50%;
}

input[type=checkbox]{
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--accent)!important; 
    border-radius: 3px!important;
    background-color: var(--surface);
    cursor: pointer;
    position: relative;
}
input[type=checkbox]:checked{
    background-color: var(--accent);
    border-color: var(--accent);
}
input[type="checkbox"]:checked::before {
    content: "✓";
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: bold;
}

input[type=number]{
    background-color: inherit;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield; /* Firefox */
}


.radio-custom {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  display: inline-block;
  font-size: 20px;
  user-select: none;
}

.radio-custom input[type="radio"] {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  margin: 0;
}

.radio-custom .checkmark {
  position: absolute;
  left: 0;
  top: 0;
  height: 16px;
  width: 16px;
  border: 1.2px solid var(--accent);
  border-radius: 50%;
  background: var(--surface);
}

.radio-custom input[type="radio"]:checked ~ .checkmark {
  background-color: var(--accent);
  border-color: var(--accent);
}

.radio-custom .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.radio-custom input[type="radio"]:checked ~ .checkmark:after {
  display: block;
}

.radio-custom .checkmark:after {
  left: 6px;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--surface);
  content: "";
  position: absolute;
}

#main-content{
    gap: 2px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 16px;
    padding-top: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) var(--surface-2);
}
/* Pantalla a sangre: sin relleno ni hueco, para que lo que renderice pueda ocupar la ventana exacta
   y la página no acabe con scroll por 32 px de relleno. Ver `ViewData["FullBleed"]` en _Layout. */
#main-content.is-full-bleed{
    gap: 0;
    padding: 0;
}
#groups-button, .groups-button{
    color: var(--accent); 
    background-color: var(--surface); 
    border: 1.2px solid var(--accent); 
    border-radius: var(--radius-sm); 
    display: flex; 
    gap: 10px; 
    padding-top: 8px; 
    padding-bottom: 8px; 
    padding-right: 16px; 
    padding-left: 16px; 
    align-items: center;
}
#groups-button.selected{
    background-color: var(--accent-subtle)!important;
}

#home{
    gap: 32px;
    width: 1000px;
    height: 600px;
    align-items: center;
    justify-content: center;
    color: var(--fg);
    font-family: 'Roboto', 'Arial', sans-serif; 
    font-weight: 500; 
    font-size: 24px; 
    line-height: 100%;
}

.home-column{
    height: 100%;
    width: 33%;
    gap: 32px;
    
}

.direct-access{
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    padding-top: 48px;
    padding-bottom: 48px;
    gap: 8px;
    background-color: var(--surface);
    height: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon-direct-access{
    width: 48px;
    height: 48px;
}

#mobile-column{
    display: none;
}

#edit-body-items, #edit-body-groups{
    max-height: 85%; 
    border-radius: var(--radius-sm); 
    border: 2px solid var(--border); 
    padding: 8px; 
    gap: 16px; 
    width: 100%; 
    background-color: var(--surface);
}

.cashbook-column{
    flex: 1 0 auto;
    width: 140px;
    justify-content: center;
    align-items:center;
}

.generic-report-column{
    display: flex;
    flex-direction: column;
    flex: 1 0 150px;
    justify-content: center;
    align-items:center;
}

#edit-body-items-cashbook{
    max-height: 60%; 
    border-radius: var(--radius-sm); 
    border: 2px solid var(--border); 
    padding: 16px; 
    gap: 16px; 
    background-color: var(--surface); 
    width: 100%;
}

#summary-body{
   
    border-radius: var(--radius-sm); 
    border: 2px solid var(--border); 
    padding: 16px; 
    gap: 16px; 
    background-color: var(--surface); 
    width: 100%;

}

#edit-body-items-summary{
    max-height: 40%; 
    border-radius: var(--radius-sm); 
    border: 2px solid var(--border); 
    padding: 16px; 
    gap: 16px; 
    width: 100%; 
    background-color: var(--surface);
    height: auto;
}

#edit-body-summary{
    padding: 8px!important; 
    height: 490px; 
    max-height: 490px; 
    justify-content: space-between;
    background-color: var(--surface);
    border-radius: var(--radius-sm); 
    border: 2px solid var(--border); 
}

.body-container{
    width: 100%; 
    border: 2px solid var(--border); 
    border-radius: var(--radius-sm); 
    height: 90%; 
    overflow-x: auto;
}

.info-header-cashbook{
    text-align: center; 
    background-color: var(--accent-subtle) !important; 
    font-weight: 500; 
    font-size: 16px; 
    color: var(--fg); 
    padding-top: 8px; 
    padding-bottom: 8px; 
    width: auto;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    height: auto;
}

#entity-header{
    display: flex;
    align-items: center;
    padding-bottom: 8px; 
    padding-top: 8px; 
    padding-left: 16px; 
    padding-right: 16px; 
    border-radius: var(--radius-pill); 
    background-color: var(--accent-subtle);
    gap: 10px; 
    flex: 0 0 auto; 
    /* width: 28%; */
    overflow: hidden;
}

#entity-header-date{
    display: flex;
    align-items: center;
    padding-bottom: 8px; 
    padding-top: 8px; 
    padding-left: 16px; 
    padding-right: 16px; 
    border-radius: var(--radius-pill); 
    background-color: var(--accent-subtle);
    gap: 10px; 
    flex: 0 0 auto; 
    overflow: hidden;
    /* width: 28%; */
}

.header-date{
    padding-right: 10px; 
    font-weight: 600; 
    font-size: 20px; 
    line-height: 100%; 
    color: var(--fg);
}

.header-date-input{
    padding-right: 10px; 
    font-weight: 500; 
    font-size: 18px!important; 
    line-height: 100%; 
    color: var(--accent); 
    background-color: var(--accent-subtle)!important; 
    border: none;
    cursor: pointer;
    width: 170px;
    text-align: center;
}

.no-items{
    font-weight: 300; 
    font-size: 18px; 
    color: var(--danger);
}

.item{
    cursor: pointer; 
    height: 58px; 
    font-weight: 400; 
    font-size: 16px; 
    color: var(--fg); 
    border: none; 
    width: 100%; 
    text-align: center;
}

.info-header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; 
    width: 100%;
    text-align: center; 
    background-color: var(--accent-subtle); 
    font-weight: 400; 
    font-size: 20px; 
    color: var(--fg); 
    padding-top: 8px; 
    padding-bottom: 8px; 
}

#product-column-center{
    justify-content: center;
    align-items:center;
    color: var(--fg);
}

.span{
    font-weight: 400;
    font-size: 20px;
}

.rounded-button{
    display: flex;
    border-radius: var(--radius-pill);
    gap: 10px;
    background-color: var(--accent-subtle);
    padding: 8px 16px;
    color: var(--fg);
    font-weight: 400;
    font-size: 20px;
    border: none;
}

.header-cashbook{
    width: 100%;
    font-weight: 600;
    font-size: 20px;
    color: var(--fg);
    gap: 16px;
    padding-right: 16px;
    padding-left: 16px;
}

.header-left{
    width: 100%;
    justify-content: left;
    align-items: center;
    font-weight: 600;
    font-size: 24px;
    color: var(--fg);
    gap: 16px;
    padding: 8px 16px;
}

#buttons-footer{
    gap: 16px;
}

.details-button{
    color: var(--accent); 
    background-color: var(--surface); 
    border: 1.2px solid var(--accent); 
    border-radius: var(--radius-sm); 
    display: flex; 
    gap: 10px; 
    padding-top: 8px; 
    padding-bottom: 8px; 
    padding-right: 16px; 
    padding-left: 16px; 
    align-items: center;
}

#entryForm, #filterForm, #entryFormTransfer{
    font-weight: 400;
    font-size: 18px; 
    color: var(--accent); 
    padding-top: 8px; 
    padding-bottom: 8px; 
    width: 100%; 
    gap: 16px;
}

#modal-edit-content {
    width: 100%; 
    padding: 16px; 
    border-radius: var(--radius); 
    min-height: 55vh;
    height: auto;
}

.myLine{
    opacity: 1; 
    height: 1px; 
    background-color: var(--accent-subtle);
    margin: 0px;
}

.search{
    background: url("data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M15.8045%2014.8619L11.8252%2010.8825C12.9096%209.55625%2013.4428%207.86392%2013.3144%206.15556C13.1861%204.44721%2012.406%202.85354%2011.1356%201.7042C9.86516%200.554862%208.20158%20-0.0622172%206.48895%20-0.019396C4.77632%200.0234252%203.14566%200.72287%201.93426%201.93426C0.72287%203.14566%200.0234252%204.77632%20-0.019396%206.48895C-0.0622172%208.20158%200.554862%209.86516%201.7042%2011.1356C2.85354%2012.406%204.44721%2013.1861%206.15556%2013.3144C7.86392%2013.4428%209.55625%2012.9096%2010.8825%2011.8252L14.8619%2015.8045C14.9876%2015.926%2015.156%2015.9932%2015.3308%2015.9916C15.5056%2015.9901%2015.6728%2015.92%2015.7964%2015.7964C15.92%2015.6728%2015.9901%2015.5056%2015.9916%2015.3308C15.9932%2015.156%2015.926%2014.9876%2015.8045%2014.8619ZM6.66652%2011.9999C5.61169%2011.9999%204.58054%2011.6871%203.70348%2011.101C2.82642%2010.515%202.14283%209.68204%201.73916%208.7075C1.3355%207.73296%201.22988%206.66061%201.43567%205.62604C1.64145%204.59147%202.14941%203.64117%202.89529%202.89529C3.64117%202.14941%204.59147%201.64145%205.62604%201.43567C6.66061%201.22988%207.73296%201.3355%208.7075%201.73916C9.68204%202.14283%2010.515%202.82642%2011.101%203.70348C11.6871%204.58054%2011.9999%205.61169%2011.9999%206.66652C11.9983%208.08052%2011.4359%209.43615%2010.436%2010.436C9.43615%2011.4359%208.08052%2011.9983%206.66652%2011.9999Z'%20fill='%230050A5'/%3E%3C/svg%3E") no-repeat left center !important;
    background-size: 16px 16px !important;
    padding-left: 20px !important;
    padding-right: 12px !important;
}

.sliding-menu{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sliding-menu-header{
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--fg-subtle);
    width: 100%;
}

.sliding-menu-header-column{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    gap: 8px;
    margin-top: auto;
}

.sliding-menu-header-column span {
    display: block;
    text-align: center;
    width: 100%;
    font-weight: 500;
}

.sliding-line{
    background-color: var(--border-strong);
    opacity: 1; 
    height: 4px!important; 
    margin: 0px;
    width: 100%;
}

.sliding-line.active{
    background-color: var(--accent);
}

.active{
    color: var(--accent)!important;
}

.sliding-menu-content{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.content-row{
    display: flex;
    flex-direction: row;
    align-items: center; 
    gap: 8px;
}

.content-column{
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.sliding-menu-footer{
    display: flex;
    flex-direction: row;
    width: auto; 
    gap: 16px; 
    border-top: 1px solid var(--border); 
    align-items: center;
}

.form-label{
    display: flex;
    align-items: center;
    margin: 0px!important;
}

#modal-edit-content-items{
    display: flex;
    flex-direction: column;
    width: 100%; 
    padding: 16px; 
    border-radius: var(--radius); 
    height: auto;
}

.modal-dialog-items{
    display: flex;
    width: 60%;
    justify-content: center;
    align-items: center;
    min-height: calc(100% - 1rem);
}

.group-node{
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 32px;
    gap: 16px;
    color: var(--accent);
    cursor: pointer;
}

.group-node .perm-checkbox{
    margin-left: auto;
    flex: 0 0 auto;
}

.group-node img.icon-closed,
.group-node img.icon-open {
    width: 16px;
    height: 16px;
    display: inline-block;
}

.group-node img.icon-open {
    display: none;
}

.group-node.open img.icon-open {
    display: inline-block;
}
.group-node.open img.icon-closed {
    display: none;
}

.group-children{
    display: none;
    padding: 8px 0px 8px 32px;
}

.square {          
  aspect-ratio: 1 / 1;    
  object-fit: cover;   
}

#img-footer{
    gap: 8px;
    padding: 8px;
    justify-content: center;
}

#actual-direction{
    font-size: 24px;
    font-weight: 500;
}

#onlyAvailable{
    color: var(--accent); 
    background-color: var(--surface);
    width: auto; 
    gap: 8px; 
    align-items: center; 
    justify-content: center; 
    font-size: 20px;
    font-weight: 400;
    white-space:nowrap; 
    text-align: center;
}

.img-container{
    display: flex;
    flex-direction: column;
    gap: 8px; 
    width: 30%; 
    border-right: 1px solid var(--border); 
    justify-content: center; 
    align-items: center;
}

.items-left{
    display: flex;
    flex-direction: column;
    width: 30%; 
    justify-content: space-around; 
    gap: 8px;
}

.items-right{
    display: flex;
    flex-direction: column;
    width: 70%;
    gap: 8px;
}

#filter{
    padding-left: 20px!important;
    border: none; 
    font-weight: 400; 
    font-size: 20px; 
    -webkit-text-fill-color: var(--accent);
}

.recipe-header{
    display: flex;;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: auto; 
    text-align: center; 
    font-weight: 500; 
    font-size: 20px; 
    color: var(--accent); 
    margin-bottom: 8px;
}

.recipe-edit-footer{
    display: flex;
    flex-direction: row;
    justify-content: flex-end; 
    align-items: flex-end; 
    width: 50%; 
    gap: 16px;
    justify-content: center;
    align-items: center;
}

.recipe-edit-info{
    display: flex;
    flex-direction: column;
    border-radius: var(--radius); 
    background-color: var(--surface-2); 
    width: 50%; 
    padding: 16px; 
    font-weight: 500; 
    font-size: 20px; 
    color: var(--accent);
}

.recipe-info{
    margin-left: auto; 
    font-weight: 600; 
    color: var(--fg);
    align-content: center;
}

.row-column{
    display: flex;
    flex-direction: row;
}

.column-row{
    display: flex;
    flex-direction: column;
}

.submenu-submenu{
    display: flex; 
    flex-direction: row; 
    border-radius: var(--radius); 
    height: 51px; 
    gap: 12px; 
    align-items: center;
}

.filter-card{
    background-color: var(--surface);
    border-radius: var(--radius-sm);
    border: none;
    display: flex;
    flex-direction: row;
    padding: 8px 16px;
}

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

.products-container{
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-sm); 
    gap: 16px; 
    height: 100%; 
    width: 100%; 
    background-color: var(--accent-subtle);
}

/* Responsive fixes for Offer and Invoice pages */
@media (max-width: 768px) {
    .containertop {
        padding: 0px !important;
        box-sizing: border-box;
    }

    .products-container {
        height: auto !important;
        max-height: calc(100vh - 170px);
        overflow-y: auto;
        padding: 6px !important;
        box-sizing: border-box;
    }

    .body-shell {
        padding-bottom: 92px; /* leave space for fixed bottom buttons */
    }

    .modal-body {
        padding: 8px !important;
        box-sizing: border-box;
        max-height: 60vh !important;
        overflow-y: auto !important;
    }

    .futter-buttons {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2100;
        padding: 8px 12px;
        background: linear-gradient(180deg, rgba(255,255,255,0.9), var(--surface));
        box-shadow: 0 -6px 18px rgba(0,0,0,0.06);
        display: flex;
        justify-content: center;
    }

    /* Ensure buttons inside footer stretch nicely on small screens */
    .futter-buttons app-bottom-button-bar, .futter-buttons .btn, .futter-buttons .button {
        width: 100% !important;
    }
}

.f-400-20{
    font-weight: 400;
    font-size: 20px;
}

.thin-item{
    cursor: pointer; 
    height: 36px; 
    font-weight: 400; 
    font-size: 16px;  
    color: var(--fg); 
    border: none; 
    width: 100%;
}

.simple-item{
    cursor: pointer; 
    border-radius: var(--radius-sm);
    height: 40px; 
    font-weight: 500; 
    font-size: 20px;  
    color: var(--accent); 
    border: solid 1px var(--accent); 
    padding: 8px 16px;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.columns-group{
    display: flex;
    flex-direction: column;
    margin-bottom:8px;
    gap: 16px;
    color: var(--accent); 
    width: 50%;
}

#total-footer{
    color:var(--accent); 
    background-color: var(--surface-2); 
    border-radius: var(--radius-sm); 
    padding-top: 8px; 
    padding-bottom: 8px; 
    padding-right: 32px; 
    padding-left: 32px; 
    gap: 64px;  
    font-weight: 700; 
    font-size: 20px; 
    line-height: 40px; 
    margin-left: auto; 
    align-items: center;
}

.header-span{
    font-weight: 500; 
    font-size: 20px; 
    color: var(--fg);
}

.config-row{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 50px;
    justify-content: space-around; 
    gap: 12px;
}

.small-span{
    font-size: 12px!important;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.onlyMobile{
    display: none;
}

#products-header{
    gap: 4px;
}



/* ------------------------------------------------------------------------------------------------
   Las burbujas flotantes de la esquina.

   La del asistente la pinta su propio componente de Angular; ésta es la de notificaciones, que es un
   enlace de Razor porque lleva a una pantalla de siempre. Las medidas están copiadas de
   `assistant-widget.component.css` a propósito: son dos piezas distintas que tienen que verse como
   una sola columna, y si una cambia de tamaño la otra queda desalineada.

   `--stacked` es la de arriba, la que se aparta para dejar sitio al asistente. Sin asistente no se
   pone y la burbuja baja al sitio de siempre: un hueco vacío haría pensar que falta algo.
   ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------
   Dónde viven las burbujas: una esquina de las cuatro, elegida arrastrándolas.

   La esquina se guarda en `data-bubble-corner` del `<html>` —no del `<body>`— para que un guion en
   línea del `<head>` pueda ponerla antes de la primera pintada: en el `body` habría que esperar a
   que exista y la burbuja daría un salto visible al recolocarse. Ver `wwwroot/js/bubbles.js`.

   Las posiciones salen de variables y no de una regla por esquina para cada burbuja: son dos
   burbujas en dos hojas distintas —ésta y la del componente del asistente— y con reglas duplicadas
   la de avisos y la del asistente acabarían en esquinas distintas al tocar una sola.

   `--bb-stack-*` es la de arriba, la de avisos cuando el asistente está: se aparta **hacia dentro
   de la pantalla**, así que en las esquinas de abajo sube y en las de arriba baja.
   ------------------------------------------------------------------------------------------------ */
:root {
    --bb-top: auto;
    --bb-right: 20px;
    --bb-bottom: 20px;
    --bb-left: auto;
    --bb-stack-top: auto;
    --bb-stack-bottom: 88px;   /* 56 de la burbuja de abajo más 12 de aire */
}

:root[data-bubble-corner="bottom-left"] {
    --bb-right: auto;
    --bb-left: 20px;
}

:root[data-bubble-corner="top-right"] {
    --bb-top: 20px;
    --bb-bottom: auto;
    --bb-stack-top: 88px;
    --bb-stack-bottom: auto;
}

:root[data-bubble-corner="top-left"] {
    --bb-top: 20px;
    --bb-bottom: auto;
    --bb-right: auto;
    --bb-left: 20px;
    --bb-stack-top: 88px;
    --bb-stack-bottom: auto;
}

/* Mientras se arrastra, el guion pone `left`/`top` en línea y esto deja de mandar. */
.axis-bubble {
    position: fixed;
    top: var(--bb-top);
    right: var(--bb-right);
    bottom: var(--bb-bottom);
    left: var(--bb-left);
    /* Que arrastrarla con el dedo la mueva en vez de desplazar la página: es un botón de 56 px,
       nadie empieza un desplazamiento aquí. */
    touch-action: none;
    z-index: 1900;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background: var(--bs-primary, #2563eb);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    transition: transform 0.15s ease;
}

.axis-bubble:hover,
.axis-bubble:focus {
    color: #fff;
    transform: scale(1.06);
}

.axis-bubble--stacked {
    top: var(--bb-stack-top);
    bottom: var(--bb-stack-bottom);
}

/* Arrastrando: sin transición, o la burbuja va por detrás del dedo. */
.axis-bubble.is-dragging,
.assistant-bubble-launcher.is-dragging {
    transition: none;
    cursor: grabbing;
}

/* El contador. Se sale del círculo por arriba a la derecha, que es donde se mira. */
.axis-bubble-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #d92d20;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--surface, #fff);
}

/*
 * El «+» del catálogo de módulos, en el raíl.
 *
 * Misma forma y mismo aro que el contador de avisos de arriba, pero **violeta** (`--novedad`) y no
 * rojo: el rojo de esa burbuja significa «tienes algo sin leer» y el de todas partes «error». Un
 * rojo permanente sobre una oferta comercial gasta el único color que no puede permitirse que se
 * ignore. Violeta es un color que esta paleta no usaba, así que sólo dice «esto es nuevo».
 *
 * Se ancla al icono —no al enlace— porque el raíl se pliega a 72 px y se despliega, y una posición
 * absoluta contra el enlace dejaría el «+» flotando lejos del icono en el estado ancho.
 */
.axis-modules-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.axis-modules-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    border-radius: 9px;
    background: var(--novedad, #6D28D9);
    color: var(--novedad-fg, #fff);
    font-size: 13px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--surface, #fff);
    animation: axis-modules-pulse 1.4s ease-in-out infinite;
}

@keyframes axis-modules-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .3; transform: scale(.8); }
}

/*
 * Quien pide en su sistema que no se mueva nada se queda con el distintivo quieto, no sin él: lo
 * que hace falta es que se vea, y el rojo ya se ve. Un parpadeo permanente es además de lo que peor
 * sienta a quien tiene sensibilidad al movimiento, y esto parpadea en todas las pantallas.
 */
@media (prefers-reduced-motion: reduce) {
    .axis-modules-badge { animation: none; }
}

/* Sin número: hay algo pendiente pero todavía no está guardado, así que se avisa sin contarlo. */
.axis-bubble-badge--dot {
    min-width: 12px;
    width: 12px;
    height: 12px;
    padding: 0;
    top: 2px;
    right: 2px;
}

@media (max-width: 767.98px) {
    /* Se ajustan las cifras, no las reglas. Sólo lo anclado abajo se aparta de la barra inferior
       del móvil; arriba no hay nada que esquivar, así que ahí se queda el margen normal. */
    :root {
        --bb-right: 14px;
        --bb-bottom: 84px;
        --bb-stack-bottom: 152px;
    }

    :root[data-bubble-corner="bottom-left"] {
        --bb-left: 14px;
    }

    :root[data-bubble-corner="top-right"] {
        --bb-stack-top: 88px;
    }

    :root[data-bubble-corner="top-left"] {
        --bb-left: 14px;
        --bb-stack-top: 88px;
    }
}

/*
 * La franja del asistente de puesta en marcha (ver _Layout).
 *
 * Va dentro del contenido y no fija arriba: es un recordatorio, no una alarma, y una barra que
 * persigue al usuario por toda la aplicación acaba tapada con un clic y nunca más leída.
 */
.setup-notice {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin: 8px 16px 0;
    padding: 10px 14px;
    border: 1px solid var(--warning-border);
    border-radius: var(--radius, 8px);
    background: var(--warning-subtle);
    color: var(--fg);
    font-size: 14px;
}

.setup-notice-link {
    margin-left: auto;
    font-weight: 600;
    color: var(--fg);
    text-decoration: underline;
    white-space: nowrap;
}

.setup-notice-link:hover,
.setup-notice-link:focus {
    color: var(--fg);
}