* {
  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);
}

@font-face {
  font-family: 'Roboto';
  src: url('/lib/font-awesome/fonts/Roboto-Italic-VariableFont_wdth,wght') format('ttf'),
       url('/lib/font-awesome/fonts/Roboto-VariableFont_wdth,wght') format('ttf');
  font-weight: normal;
  font-style: normal;
}

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;
}

.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;
    }
}