:root {
    --padding-compact:  10px; /* Usar en caso de elementos contraidos*/
    --padding-normal:   15px;

    --color-completo:   160, 123, 82;
    --color-remonte:    84, 34, 45;
    --color-remonte-text: 233, 148, 163; 
    --color-completo-text: 227, 171, 109;
    --color-completo-dark: 74, 52, 28;
}

* {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    min-height: 100%;
}

body {
    min-height: 100%;
    /*background: #1a1d24;*/
    /*background: #2a2b2f;*/
    background: #18191d;
}
.collapse-sidenav {

}
    
.layout-container {
    min-height: 100vh;
    transition: all .3s ease-in-out;
    padding-left: 300px;
    padding-top: 64px;
}
.collapse-sidenav .layout-container {
    transition: all .3s ease-in-out;
    padding-left: 56px;
}
.transition {
    transition: none;
}
    .transition .layout-container {
        transition: none;
    }
.row {
    margin-bottom: 0;
}

.offsets {
    padding: 15px 3.25px;
    padding-bottom: 0;
}
    .offsets .wrapper-select, .offsets .wrapper-input {
        margin-bottom: 0;
    }
img[src=""], img:not([src]) {
    display: none;
}
.sidenav {
    box-shadow: none;
    /*background: #171a21;*/
    background: #222327;
    transition: all .3s ease-in-out;
    padding-bottom: 0;
    height: 100%;
    overflow-x: hidden;
}
.transition .sidenav{
    transition: none;
}
.transition .sidenav li .account {
    transition: none;
}
body.collapse-sidenav .sidenav{
    width: 56px;
    padding-bottom: 0;
    height: 100%;
    /*overflow-x: hidden;*/
    overflow-y: auto;
}
.sidenav li {
    white-space: nowrap;
}
.collapse-sidenav .sidenav li > a {
   /* height: 56px;
    line-height: 56px;*/
}
.collapse-sidenav .sidenav li > a > i {
    /*height: 56px;
    line-height: 56px;*/
}
.sidenav li > a {
    padding: 0 16px;
    color: rgba(255, 255, 255, 0.37);
}

    .sidenav > li.active {
        background-color: rgba(255, 255, 255, 0.05);        
        position: relative;
    }
    .sidenav .collapsible-header {
        background-color: transparent !important;
    }
        .sidenav .collapsible-header.active {
            background-color: rgba(255, 255, 255, 0.05) !important;
            color: white;
        }
    .sidenav .keyboard-focused .collapsible-header:focus {
        background-color: rgba(255, 255, 255, 0.05) !important;
    }
    .sidenav .collapsible-body > ul:not(.collapsible) > li.active, .sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active {
        background-color: rgba(255, 255, 255, 0.05);
    }
    .sidenav li.active > .collapsible-header {
        color: #fff;
    }

    .sidenav li > a:hover {
        background-color: rgba(255, 255, 255, 0.05);
        color: #fff;
    }

    .sidenav .collapsible-header:hover,
    .sidenav.fixed .collapsible-header:hover {
        background-color: rgba(255, 255, 255, 0.05) !important;
    }

    .sidenav .collapsible-body,
    .sidenav.fixed .collapsible-body {
        background-color: transparent;
    }

    .sidenav li > a > i, .sidenav li > a > [class^="mdi-"], .sidenav li > a li > a > [class*="mdi-"], .sidenav li > a > i.material-icons {
        margin: 0 16px 0 0;
    }

.sidenav li .account {
    height: 64px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 72px;
    padding-right: 62px;
    transition: all .3s ease-in-out;
}
    .collapse-sidenav .sidenav li .account {
        padding: 0;
        width: 56px;
    }
        .collapse-sidenav .sidenav li .account .circle {
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .sidenav li .account .circle {
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            /*background: #1e77e5;*/
            background: rgba(255, 255, 255, .1);
            color: #fff;
            text-align: center;
            font-weight: bold;
            margin-right: 16px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 16px;
            cursor: pointer;
            user-select: none;
        }

            .sidenav li .account .circle img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 50%;
            }

        .sidenav li .account .groupment {
        }
.collapse-sidenav .sidenav li .account .groupment {
    display: none;
}
            .sidenav li .account .groupment .name {
                color: #fff;
                line-height: 1;
                font-size: 14px;
                font-weight: 500;
            }

            .sidenav li .account .groupment .lastname {
                color: rgba(255, 255, 255, 0.37);
                line-height: 1;
                font-size: 14px;
                font-weight: 500;
                letter-spacing: .5px;
                padding-top: 2px;
                /*white-space: nowrap;
            text-overflow: ellipsis;
            width: calc(100% - 10px);
            overflow: hidden;
            box-sizing: border-box;*/
            }

        .sidenav li .account .options {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: rgba(255,255,255,.1);
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #c7c7c7;
            cursor: pointer;
            user-select: none;
            padding: 4px;
        }

            .sidenav li .account .options i {
                font-size: 20px;
            }

            .sidenav li .account .options .indicator {
                display: none;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: red;
                position: absolute;
                top: 0;
                left: 27px;
            }

        .account-control-pop-up {
            width: max-content;
            background: #38393c;
            position: fixed;
            border-radius: 5px;
            top: 64px;
            left: 16px;
            z-index: 9999;
            display: none;
            overflow: hidden;
        }
            .account-control-pop-up .element {
                display: block;
                position: relative;
                height: 40px;
                line-height: 40px;
                color: #afafb2;
                padding: 0 10px;
                font-size: 13px;
                font-weight: 500;
                transition: all .3s ease-in-out;
                cursor: pointer;
            }
                .account-control-pop-up .element:hover {
                    color: white;
                    background-color: rgba(255, 255, 255, 0.05);
                    transition: all .3s ease-in-out;
                }

                .account-control-pop-up .element i {
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    text-align: center;
                    width: 40px;
                }

                .account-control-pop-up .element svg {
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 40px;
                    display: flex;
                    justify-content: center;
                }


        /* .sidenav li .account .list {
            width: max-content;
            background: #38393c;
            position: fixed;
            border-radius: 5px;
            top: 64px;
            left: 16px;
            z-index: 999;
            display: none;
            overflow: hidden;
        }

            .sidenav li .account .list .element {
                display: block;
                position: relative;
                height: 40px;
                line-height: 40px;
                color: #afafb2;
                padding: 0 10px;
                font-size: 13px;
                font-weight: 500;
                transition: all .3s ease-in-out;
                cursor: pointer;
            }

                .sidenav li .account .list .element:hover {
                    color: white;
                    background-color: rgba(255, 255, 255, 0.05);
                    transition: all .3s ease-in-out;
                }

                .sidenav li .account .list .element i {
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    text-align: center;
                    width: 40px;
                }

                .sidenav li .account .list .element svg {
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 40px;
                    display: flex;
                    justify-content: center;
                } */
.collapse-sidenav .sidenav .collapsible-body li a, .collapse-sidenav .sidenav.fixed .collapsible-body li a {
    padding: 0 16px;
}

.sidebar-footer {
    position: absolute;
    bottom: 15px;
    right: 15px;
    transition: all .3s ease-in-out;
}
    .sidebar-footer .sidebar-button {
        width: 40px;
        height: 40px;
        line-height: 40px;
        background: rgba(255, 255, 255, .037);
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
        user-select: none;
        transition: all .3s ease-in-out;
    }
        .sidebar-footer .sidebar-button i {
            line-height: inherit;
            color: rgba(255, 255, 255, 0.37);
            transform: rotate(180deg);
            transition: all .3s ease-in-out;
        }

.collapse-sidenav .sidebar-footer {
    position: fixed;
    bottom: 8px;
    right: 8px;
    transition: all .3s ease-in-out;
}
    .collapse-sidenav .sidebar-footer .sidebar-button {
        width: 40px;
        height: 40px;
        line-height: 40px;
        transition: all .3s ease-in-out;
    }
        .collapse-sidenav .sidebar-footer .sidebar-button i {
            /*color: #1e77e5;*/
            transition: all .3s ease-in-out;
        }
nav {
    /*background-color: #171a21;*/
    background-color: #1c1d22;
    box-shadow: none;
    padding: 0 15px;
    position: fixed;
    top: 0;
    left: 300px;
    right: 0;
    width: auto;
    z-index: 100;
}

.collapse-sidenav nav {
    left: 56px;
}

    nav .navigation {
        background-color: #171a21;
        color: #fff;
        box-shadow: none;
        padding: 0 15px;
        width: 100%;
        height: 64px;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        transition: all .3s ease-in-out;
        z-index: 3;
        transform: translateX(-100%);
    }

        nav .navigation .button {
            width: 40px;
            height: 40px;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            user-select: none;
            background: rgba(255, 255, 255, 0.05);
            color: #8d8b8b;
            margin-right: 15px;
        }

        nav .navigation span {
            font-size: 14px;
            font-weight: 500;
        }

    nav > span {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.5px;
    }

    nav .sidenav-trigger {
        /*position: absolute;*/
        z-index: 1;
        width: 35px !important;
        height: 35px !important;
        line-height: 35px !important;
        margin: 0;
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
        border-radius: 5px;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
        margin-right: 15px;
    }

        nav .sidenav-trigger i {
            height: 35px !important;
            line-height: 35px !important;
            font-size: 21px !important;
            white-space: nowrap;
            overflow: hidden;
            color: #e548ee;
        }

    nav .wrapper-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 15px;
        margin: 0;
    }
        nav .wrapper-button .button {
            background: rgba(255, 255, 255, .1);
        }
        nav .wrapper-button .button img {
            width: 100%;
            height: 100%;
            padding: 4px;
            padding-left: 2px;
            display: block;
            z-index: 2;
        }
    nav .wrapper-download {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 65px;
        margin: 0;
        display: none;
    }

        nav .wrapper-download .download {
            background: rgba(255, 255, 255, .1);
            display: flex;
            width: 40px;
            height: 40px;
            line-height: 40px;
            justify-content: center;
            align-items: center;
            color: #fff;
            border-radius: 50%;
            font-weight: bold;
            font-size: 13px;
            cursor: pointer;
            user-select: none;
        }

            nav .wrapper-download .download img {
                width: 100%;
                height: 100%;
                padding: 5px;
                padding-left: 3px;
                display: block;
                z-index: 2;
            }

/* EL BOTON DE PDF

   La misma pastilla que el de Excel. Arranca oculto por el mismo motivo que aquel -- la
   pantalla entra sin nada que imprimir -- y lo enciende el JS de cada pantalla.

   DONDE SE PARA. Los botones de la barra estan posicionados uno por uno contra el borde
   derecho -- 15px el filtro, 65px el Excel -- y no en una fila que se acomode sola, asi que
   este tiene que saber si tiene un vecino. Su lugar natural es el segundo, a 65px; se corre
   al tercero solo cuando el de Excel esta a la vista. En el Overview, por ejemplo, el icono
   de Excel esta en el HTML pero nunca se muestra, y clavarlo a 115px dejaba un hueco de un
   boton entre el filtro y este. Lo decide PrintButtonPlace en print.js, que es quien puede
   ver si el vecino esta o no. */
    nav .wrapper-print {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 65px;
        margin: 0;
        display: none;
    }

    nav .wrapper-print.con-excel {
        right: 115px;
    }

        nav .wrapper-print .print {
            background: rgba(255, 255, 255, .1);
            display: flex;
            width: 40px;
            height: 40px;
            line-height: 40px;
            justify-content: center;
            align-items: center;
            color: #fff;
            border-radius: 50%;
            cursor: pointer;
            user-select: none;
        }

            nav .wrapper-print .print img {
                width: 100%;
                height: 100%;
                padding: 6px;
                display: block;
                z-index: 2;
            }

/* El encabezado del documento impreso: existe solo en papel. Lo enciende print.css, que se
   enlaza despues que este archivo. */
.print-header {
    display: none;
}

    nav .wrapper-button-layer {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 15px;
        margin: 0;
    }

        nav .wrapper-button-layer .loading {
            display: none;
            background: transparent;
            position: absolute;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            border: 4px solid rgba(255, 255, 255, 0.2);
            border-top: 4px #2cff76 solid;
            animation: rotate 1.3s infinite linear;
            top: 0;
        }

        nav .wrapper-button-layer .button-layer {
            width: 40px;
            height: 40px;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            user-select: none;
            background: rgba(255, 255, 255, 0.05);
            color: white;
            transition: all .3s ease-in-out;
            padding: 5px;
        }
        nav .wrapper-button-layer .button-layer i {
            height: 40px;
            line-height: 40px;
            font-size: 20px;

        }
            nav .wrapper-button-layer .button-layer svg {
                fill: #3690f1;
            }
        nav .wrapper-button-layer .radius {
            border-radius: 5px;
            transition: all .3s ease-in-out;
        }

    nav .wrapper-menu-layer {
        display: none;
        position: absolute;
        top: 100%;
        right: 15px;
        z-index: 21;
        padding: 10px;
        background: #21232b;
        border-radius: 5px;
        width: 300px;
    }
        nav .wrapper-menu-layer .header {
            height: 40px;
            line-height: 40px;
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #a1a1a1;
            font-weight: 600;
            padding: 0 10px;
        }
        nav .wrapper-menu-layer .header svg{
            padding: 2px;
            width: 40px;
        }
            nav .wrapper-menu-layer .header i {
                width: 40px;
                height: 40px;
                line-height: 40px;
                font-size: 19px;
                display: flex;
                justify-content: center;
            }
        nav .wrapper-menu-layer .menu-layer {
            border-radius: 5px;
            position: relative;
        }
            nav .wrapper-menu-layer .menu-layer .input {
                height: 40px;
                line-height: 40px;
                display: flex;
                align-items: center;
                font-weight: 500;
                font-size: 13px;
                cursor: pointer;
                user-select: none;
                background: rgba(255, 255, 255, .05);
                border-radius: 5px;
                position: relative;
            }
                nav .wrapper-menu-layer .menu-layer .input span {
                    font-size: 13px;
                }
                nav .wrapper-menu-layer .menu-layer .input .circle {
                    width: 40px;
                    height: 40px;
                    line-height: 40px;
                    font-size: 19px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #83ff86;
                    border-radius: 5px;
                }
                nav .wrapper-menu-layer .menu-layer .input .circle i {
                    height: inherit;
                    line-height: inherit;
                    font-size: 19px;
                }
                nav .wrapper-menu-layer .menu-layer .input i.appearance {
                    height: inherit;
                    line-height: inherit;
                    font-size: 22px;
                    position: absolute;
                    top: 50%;
                    right: 0;
                    width: 40px;
                    height: 40px;
                    transform: translateY(-50%);
                    text-align: center;
                    color: #a1a1a1;
                }
            nav .wrapper-menu-layer .menu-layer .list {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                overflow: auto;
                display: none;
                background: #282a31;
                border-radius: 5px;
                z-index: 2;
            }
            nav .wrapper-menu-layer .menu-layer .element {
                position: relative;
                height: 40px;
                line-height: 40px;
                padding: 0 10px;
                padding-left: 40px;
                font-weight: bold;
                cursor: pointer;
                user-select: none;
                display: flex;
                align-items: center;
                transition: all .3s ease-in-out;
                color: #c1c1c1;
                font-size: 13px;
            }
                nav .wrapper-menu-layer .menu-layer .element.active {
                    background: rgba(255, 255, 255, .05);
                    color: white;
                    transition: all .3s ease-in-out;
                }
                    nav .wrapper-menu-layer .menu-layer .element.active i {
                        color: #83ff86;
                        transition: all .3s ease-in-out;
                    }
                nav .wrapper-menu-layer .menu-layer .element:hover {
                    background: rgba(255, 255, 255, .05);
                    color: white;
                    transition: all .3s ease-in-out;
                }
                    nav .wrapper-menu-layer .menu-layer .element:hover i {
                        color: #83ff86;
                        transition: all .3s ease-in-out;
                    }
                    nav .wrapper-menu-layer .menu-layer .element:hover .circle svg {
                        fill: #3690f1;
                        transition: all .3s ease-in-out;
                    }
                nav .wrapper-menu-layer .menu-layer .element .circle {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 0;
                    width: 40px;
                    height: 40px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: rgba(0,0,0,0);
                    border-radius: 50%;
                    font-size: 12px;
                    padding: 9px;
                }
                    nav .wrapper-menu-layer .menu-layer .element .circle svg {
                        fill: #79787f;
                        transition: all .3s ease-in-out;
                    }
                nav .wrapper-menu-layer .menu-layer .element i {
                    color: #c7c7c7;
                    font-size: 19px;
                    height: 40px;
                    line-height: 40px;
                    transition: all .3s ease-in-out;
                }
                nav .wrapper-menu-layer .menu-layer .element img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    
                }
        nav .wrapper-menu-layer .subheader {
            color: #a1a1a1;
            height: 40px;
            line-height: 40px;
            font-size: 13px;
            font-weight: 500;
            display: flex;
            padding: 0 10px;
        }
            nav .wrapper-menu-layer .subheader i {
                width: 40px;
                height: 40px;
                line-height: 40px;
                font-size: 19px;
                display: flex;
                justify-content: center;
            }
        nav .wrapper-menu-layer .type-layer {
            border-radius: 5px;
            position: relative;
        }

            nav .wrapper-menu-layer .type-layer .input {
                height: 40px;
                line-height: 40px;
                display: flex;
                align-items: center;
                font-weight: 500;
                font-size: 13px;
                cursor: pointer;
                user-select: none;
                background: rgba(255, 255, 255, .05);
                border-radius: 5px;
            }

                nav .wrapper-menu-layer .type-layer .input span {
                    font-size: 13px;
                }

                nav .wrapper-menu-layer .type-layer .input .circle {
                    width: 40px;
                    height: 40px;
                    line-height: 40px;
                    font-size: 19px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #83ff86;
                    border-radius: 5px;
                }

                    nav .wrapper-menu-layer .type-layer .input .circle i {
                        height: inherit;
                        line-height: inherit;
                        font-size: 19px;
                    }

            nav .wrapper-menu-layer .type-layer .list {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                overflow: auto;
                display: none;
                background: #282a31;
                border-radius: 5px;
                z-index: 2;
            }

            nav .wrapper-menu-layer .type-layer .element {
                position: relative;
                height: 40px;
                line-height: 40px;
                padding: 0 10px;
                padding-left: 40px;
                font-weight: bold;
                cursor: pointer;
                user-select: none;
                display: flex;
                align-items: center;
                transition: all .3s ease-in-out;
                color: #c1c1c1;
                font-size: 13px;
            }

                nav .wrapper-menu-layer .type-layer .element.active {
                    background: rgba(255, 255, 255, .05);
                    color: white;
                    transition: all .3s ease-in-out;
                }

                    nav .wrapper-menu-layer .type-layer .element.active i {
                        color: #83ff86;
                        transition: all .3s ease-in-out;
                    }

                nav .wrapper-menu-layer .type-layer .element:hover {
                    background: rgba(255, 255, 255, .05);
                    color: white;
                    transition: all .3s ease-in-out;
                }

                    nav .wrapper-menu-layer .type-layer .element:hover i {
                        color: #83ff86;
                        transition: all .3s ease-in-out;
                    }

                    nav .wrapper-menu-layer .type-layer .element:hover .circle svg {
                        fill: #3690f1;
                        transition: all .3s ease-in-out;
                    }

                nav .wrapper-menu-layer .type-layer .element .circle {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 0;
                    width: 40px;
                    height: 40px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: rgba(0,0,0,0);
                    border-radius: 50%;
                    font-size: 12px;
                    padding: 9px;
                }

                    nav .wrapper-menu-layer .type-layer .element .circle svg {
                        fill: #79787f;
                        transition: all .3s ease-in-out;
                    }

                nav .wrapper-menu-layer .type-layer .element i {
                    color: #c7c7c7;
                    font-size: 19px;
                    height: 40px;
                    line-height: 40px;
                    transition: all .3s ease-in-out;
                }

                nav .wrapper-menu-layer .type-layer .element img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
.datepicker-date-display {
    background-color: #2e60c4;
}
.datepicker-table td.is-selected {
    background-color: #2e60c4;
    color: white !important;
}
.datepicker-cancel, .datepicker-clear, .datepicker-today, .datepicker-done {
    color: #2e60c4;
}
.datepicker-table td.is-today {
    color: #2e60c4;
}
.lf-padding {
    padding-left: 0 !important;
}

.rg-padding {
    padding-right: 0 !important;
}

.absolute {
    position: absolute;
    top: 0;
    left: 0;
}
.material-icons-outlined.fontSize16 {
    font-size: 16px !important;
}
.material-icons.fontSize16 {
    font-size: 16px !important;
}
.material-icons-outlined.fontSize19 {
    font-size: 19px !important;
}
.floating {
    background: #222327;
    border-radius: 7px;
    padding: 15px;
    position: fixed;
    bottom: 15px;
    right: 15px;
    transition: all .3s ease-in-out;
    transform: translateY(0);
    z-index: 3;
    /*display: none;*/
}

    .floating .button {
        width: 40px;
        height: 40px;
        color: white;
        border-radius: 7px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
        cursor: pointer;
        user-select: none;
    }

        .floating .button:last-child {
            margin: 0;
        }

.button-position {
    background: linear-gradient(360deg, #199124, #21d84e);
}

.button-settings {
    background: linear-gradient(156deg, #ffd532, #b53610);
}

.button-image {
    background: linear-gradient(168deg, #e228e0, #211799);
}

.mode {
    background: #1c1c23;
    border-radius: 7px;
    padding: 15px;
    position: fixed;
    bottom: 15px;
    right: 15px;
    color: #e6e3e3;
    padding-left: 50px;
    transition: all .3s ease-in-out;
    transform: translateX(110%);
    z-index: 3;
}

    .mode > i {
        color: #08db1b;
        position: absolute;
        top: 15px;
        left: 13.5px;
    }

    .mode .content {
        font-size: 14px;
    }

        .mode .content .title {
            font-weight: 500;
            line-height: 1;
            margin-bottom: 4px;
        }

        .mode .content .subtitle {
            line-height: 1;
        }

            .mode .content .subtitle span {
                color: white;
                font-weight: bold;
            }

    .mode .wrapper-action {
        float: right;
        display: flex;
        margin-top: 15px;
    }

        .mode .wrapper-action .action {
            width: 120px;
            height: 35px;
            line-height: 35px;
            background: linear-gradient(270deg, #199124, #21d84e);
            border-radius: 20px;
            padding: 0 15px;
            font-weight: bold;
            font-size: 13px;
            position: relative;
            cursor: pointer;
            user-select: none;
        }

            .mode .wrapper-action .action span {
                display: block;
                line-height: 33px;
                color: white;
            }

            .mode .wrapper-action .action i {
                position: absolute;
                top: 50%;
                right: 15px;
                transform: translateY(-50%);
                font-size: 18px;
            }

        .mode .wrapper-action .cancel {
            width: 35px;
            height: 35px;
            background: rgba(255, 255, 255, .2);
            border-radius: 50%;
            cursor: pointer;
            user-select: none;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 15px;
        }

.settings {
    background: #222327;
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 320px;
    height: auto;
    transition: all .3s ease-in-out;
    transform: translateX(110%);
    z-index: 999;
    border-radius: 5px;
    z-index: 3;
}

.setting .layer {
    /*display: none;*/
}

.settings .tabbar {
    height: 56px;
    line-height: 56px;
    padding: 0 15px;
    position: relative;
    color: #eee;
    background: rgba(0,0,0,.3);
    border-radius: 0 0 5px 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

    .settings .tabbar .element {
        width: 35px;
        height: 35px;
        line-height: 33px;
        display: inline-block;
        margin-right: 10px;
        cursor: pointer;
        padding-right: 15px;
        padding-left: 5px;
        background: rgba(255,255,255,.05);
        border-radius: 29px;
        white-space: nowrap;
        overflow: hidden;
    }

        .settings .tabbar .element i {
            width: 35px;
            height: 35px;
            line-height: 36px;
            text-align: center;
            font-size: 20px;
            float: left;
        }

        .settings .tabbar .element span {
            font-size: 13px;
            font-weight: bold;
        }

    .settings .tabbar .active {
        width: auto;
    }

    .settings .tabbar .button {
        width: 35px;
        height: 35px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        user-select: none;
        color: white;
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
    }

.settings .content {
    padding: 15px;
}

.settings .layer .attachment {
    position: relative;
    font-size: 12px;
    padding-right: 0;
    margin: 0;
}

    .settings .layer .attachment .title {
        height: 30px;
        line-height: 30px;
        color: white;
        font-weight: 800;
    }

    .settings .layer .attachment .subtitle {
        margin-top: 10px;
        color: #79787f;
        font-weight: bold;
        line-height: 1.2;
    }

    .settings .layer .attachment .upload {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background: #6a00b4;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        user-select: none;
    }

        .settings .layer .attachment .upload i {
            transform: rotate(0);
        }

    .settings .layer .attachment .title img {
        height: 30px;
        object-fit: contain;
        display: block;
        margin-right: 10px;
        float: left;
    }

.contenedor {
    width: 100%;
    height: calc(100dvh - 64px);
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    overflow: auto;
}
.contenedor.fullscreen {
    align-items: start;
}
.contenedor.hybrid{
    align-items: start;
    justify-content: start;
}
    .contenedor .telemetry {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        align-content: flex-start;
        position: absolute;
        top: 0;
        left: 0;
        padding: 15px;
    }

        .contenedor .telemetry .element {
            position: relative;
            padding: 15px;
            border-radius: 7px;
            background: rgba(0, 0, 0, .15);
            cursor: pointer;
            margin-bottom: 15px;
            font-size: 13px;
        }

            .contenedor .telemetry .element .status {
                display: inline-flex;
                height: 30px;
                padding: 0 10px;
                background: rgba(255, 255, 255, 0.05);
                color: #9b9b9b;
                border-radius: 5px;
                margin-right: 10px;
                align-items: center;
                font-size: 13px;
                font-weight: bold;
                cursor: pointer;
                user-select: none;
                transition: all .3s ease-in-out;
                margin-bottom: 10px;
            }

            .contenedor .telemetry .element .title {
                font-weight: bold;
                color: white;
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-bottom: 10px;
            }

            .contenedor .telemetry .element .subtitle {
                color: #717171;
                font-weight: bold;
                font-size: 12px;
                padding-bottom: 3px;
            }

            .contenedor .telemetry .element .title .circle {
                width: 30px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgba(0, 0, 0, .15);
                border-radius: 50%;
                font-size: 12px;
                margin-right: 10px;
            }

                .contenedor .telemetry .element .title .circle i {
                    color: #a1a1a1;
                    font-size: 19px;
                }

            .contenedor .telemetry .element .title strong {
                line-height: 1;
            }

            .contenedor .telemetry .element .value {
                line-height: 1;
            }

                .contenedor .telemetry .element .value strong {
                    padding-right: 5px;
                    color: #fff;
                    font-weight: bold;
                    line-height: 1;
                    font-size: 20px;
                }

                .contenedor .telemetry .element .value span {
                    font-weight: bold;
                    color: #9b9b9b;
                }

        .contenedor .telemetry .sources {
            position: relative;
            border-radius: 7px;
            background: rgba(0, 0, 0, .15);
            cursor: pointer;
            margin-bottom: 15px;
            font-size: 13px;
        }

            .contenedor .telemetry .sources .header {
                display: flex;
                flex-direction: row;
                align-items: center;
                padding: 15px;
            }

                .contenedor .telemetry .sources .header .circle {
                    width: 40px;
                    height: 40px;
                    background: rgba(255, 255, 255, .05);
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: white;
                    margin-right: 15px;
                }

                .contenedor .telemetry .sources .header .data {
                }

                    .contenedor .telemetry .sources .header .data .title {
                        font-weight: bold;
                        color: white;
                        line-height: 1;
                    }

                    .contenedor .telemetry .sources .header .data .subtitle {
                        color: #717171;
                        font-weight: bold;
                        line-height: 1;
                        padding-top: 2px;
                    }

            .contenedor .telemetry .sources .content {
                padding: 0px 3.75px;
                margin: 0;
            }

                .contenedor .telemetry .sources .content .component {
                    position: relative;
                    background: rgba(0, 0, 0, .15);
                    border-radius: 5px;
                    margin-bottom: 15px;
                    padding: 15px;
                }

                    .contenedor .telemetry .sources .content .component .data {
                    }

                        .contenedor .telemetry .sources .content .component .data .title {
                            color: white;
                            font-weight: bold;
                            line-height: 1;
                        }

                        .contenedor .telemetry .sources .content .component .data .subtitle {
                            color: #717171;
                            font-weight: bold;
                            line-height: 1;
                            padding-top: 2px;
                        }

                    .contenedor .telemetry .sources .content .component .value {
                        display: inline-flex;
                        background: rgba(255, 255, 255, 0.05);
                        padding: 5px 10px;
                        border-radius: 5px;
                        position: absolute;
                        top: 50%;
                        right: 15px;
                        transform: translateY(-50%);
                        justify-content: center;
                        align-items: center;
                    }

                        .contenedor .telemetry .sources .content .component .value strong {
                            color: #fff;
                            font-weight: bold;
                            line-height: 1;
                            margin-right: 5px;
                            font-size: 15px;
                        }

                        .contenedor .telemetry .sources .content .component .value span {
                            font-weight: bold;
                            color: #9b9b9b;
                            font-size: 15px;
                        }
.contenedor.fullscreen .layout {
    width: 100%;
    height: 100%;
}
    .contenedor.fullscreen .layout > img,
    .contenedor.fullscreen .layout .grid {
        display: none;
    }
    .contenedor .layout {
        width: 1450px;
        height: 800px;
        position: relative;
    }
    .contenedor:not(.fullscreen):not(.hybrid) .layout {
        margin-block: auto;
    }

        .contenedor .layout img {
           /* display: none;*/
            width: 1450px;
            height: 800px;
            object-fit: cover;
        }

/* Nueva vista híbrida */
.contenedor.hybrid .layout {
    width: 100%;
    height: auto;
}
.contenedor.hybrid .layout .grid {
    display: grid;
    grid-template-columns: 600px 1fr;
    gap: 15px;
    padding: 15px;
    padding-bottom: 0;
}
    .contenedor.hybrid .layout .grid .miniature {
        width: 600px;
        height: 600px;
        position: relative;
    }
        .contenedor.hybrid .layout .grid .miniature img {
            display: block;
            width: 600px;
            height: 600px;
            object-fit: contain;
            border-radius: 5px;
        }
        .contenedor.hybrid .layout .grid .miniature .object {

        }

            .contenedor.hybrid .layout .grid .miniature .object .device {
                width: 35px;
                height: 35px;
                border-radius: 5px;
                background: #2d2e32;
                color: #e3e3e3;
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                font-weight: 500;
                font-size: 13px;
                cursor: pointer;
                user-select: none;
                transition: background .3s ease-in-out;
            }
                .contenedor.hybrid .layout .grid .miniature .object .device .title {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 5px;
                }
                .contenedor.hybrid .layout .grid .miniature .object .device i {
                    font-size: 18px;
                    height: 100%;
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #c1c1c1;
                }
                .contenedor.hybrid .layout .grid .miniature .object .device p {
                    display: flex;
                    justify-content: center;
                    line-height: 1;
                    font-weight: 700;
                }
                .contenedor.hybrid .layout .grid .miniature .object .device span {
                    display: flex;
                    justify-content: center;
                    line-height: 1;
                    font-weight: 600;
                }

                .contenedor.hybrid .layout .grid .miniature .object .device strong {
                    display: flex;
                    line-height: 1;
                    font-weight: 600;
                    justify-content: center;
                    color: #c1c1c1;
                }
    .contenedor.hybrid .layout .grid .collections {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /*align-content: start;*/
        gap: 15px;
    }
        .contenedor.hybrid .layout .grid .collections .elements {
            background: rgba(255, 255, 255, .05);
            border-radius: 7px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            cursor: pointer;
        }
            .contenedor.hybrid .layout .grid .collections .elements .title {
                color: #fefefe;
                display: flex;
                justify-content: space-between;
            }
            .contenedor.hybrid .layout .grid .collections .elements .subtitle {
                color: #c1c1c1;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            .contenedor.hybrid .layout .grid .collections .elements.group .subtitle {
                color: #c1c1c1;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
            }
            .contenedor.hybrid .layout .grid .collections .elements .title strong {
                font-weight: bold;
            }
            .contenedor.hybrid .layout .grid .collections .elements .title .content {
                display: flex;
                align-items: end;
                gap: 5px;
                line-height: 1;
            }
                .contenedor.hybrid .layout .grid .collections .elements .title .content strong{
                    font-weight: 700;
                    color: white;
                    font-size: 25px;
                }
                .contenedor.hybrid .layout .grid .collections .elements .title .content span {
                    color: #c1c1c1;
                    font-weight: bold;
                }
            .contenedor.hybrid .layout .grid .collections .elements .subtitle .content {
                display: flex;
                align-items: end;
                gap: 5px;
            }
            .contenedor.hybrid .layout .grid .collections .elements.group .subtitle .content {
                flex-direction: column;
                align-items: start;
            }
            .contenedor.hybrid .layout .grid .collections .elements .subtitle .content strong {
                line-height: 1;
                font-size: 25px;
                font-weight: 700;
                color: white;
                display: flex;
            }
            .contenedor.hybrid .layout .grid .collections .elements .subtitle .content span {
                line-height: 1;
                font-weight: bold;
            }
            .contenedor.hybrid .layout .grid .collections .elements.group .subtitle .content strong,
            .contenedor.hybrid .layout .grid .collections .elements.group .subtitle .content span {
                font-size: 14px;
                color: #c1c1c1;
                font-weight: normal;
            }
            .contenedor.hybrid .layout .grid .collections .elements .subtitle .items {
                background: rgba(255, 255, 255, .05);
                display: flex;
                flex-direction: row;
                gap: 7px;
                padding-top: 10px;
                width: max-content;
                padding: 10px;
                border-radius: 5px;
            }
                .contenedor.hybrid .layout .grid .collections .elements .subtitle .items .sub-items {
                    width: 8px;
                    height: 20px;
                    background: rgba(255, 255, 255, .1);
                    border-radius: 3px;
                }
                .contenedor.hybrid .layout .grid .collections .elements .bar {
                    width: 100%;
                    height: 10px;
                    background: rgba(255, 255, 255, .1);
                    border-radius: 20px;
                    margin: 0;
                    position: relative;
                }
                    .contenedor.hybrid .layout .grid .collections .elements .bar .level {
                        width: 0;
                        height: 100%;
                        background: #5b8cff;
                        position: absolute;
                        top: 0;
                        left: 0;
                        border-radius: 20px;
                    }
            .contenedor.hybrid .layout .grid .collections .elements .title .content strong.minimum-text {
                font-size: 18px;
            }

    .contenedor.hybrid .summary {
        width: 100%;
        display: grid;
        grid-template-columns: 600px 1fr;
        gap: 15px;
        padding: 15px;
    }

        .contenedor.hybrid .summary .wrapper-chart {
            height: 400px;
            background: rgba(255, 255, 255, .05);
            border-radius: 5px;
        }
        .contenedor.hybrid .summary .wrapper-table {
            height: 400px;
            overflow: auto;
            background: rgba(255, 255, 255, .05);
            border-radius: 5px;
        }
            .contenedor.hybrid .summary .wrapper-table table thead {
                background: #24252a;
                color: #a4a4a4;
                font-weight: 600;
                position: sticky;
                top: 0;
                left: 0;
            }
            .contenedor.hybrid .summary .wrapper-table table tr th, .contenedor.hybrid .summary .wrapper-table table tr td {
                padding: 10px 5px;
                font-size: 12px;
            }
.layout .sensor {
    width: 35px;
    height: 35px;
    position: absolute;
    top: 0;
    left: 0;
    background: #333;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    line-height: 1;
    text-align: center;
    box-shadow: 0 0 5px 0 #474646;
}

    .layout .sensor .caption {
        position: absolute;
        line-height: 15px;
        background: #333;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.legend .button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    position: fixed;
    bottom: 15px;
    right: 15px;
    background: #1e77e5;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #1c1d22;
    border-radius: 0;
    opacity: 1;
    transform-origin: center;
    transform: scale(0);
    z-index: 9999;
    color: white;
    top: 0;
    left: 0;
    overflow: auto;
}
.overlay.fullscreen {

}
    .overlay .header {
        /*position: absolute;
        top: 0;
        left: 0;*/
        background: rgba(255, 255, 255, .05);
        width: 100%;
        height: 64px;
        display: flex;
        align-items: center;
        padding: 0 15px;
        gap: 15px;
    }
        .overlay .header .button {
            width: 35px;
            height: 35px;
            border-radius: 5px;
            background: rgba(255, 255, 255, .05);
            color: #e548ee;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            user-select: none;
        }
        .overlay .header span {
           line-height: 1;
           font-weight: 500;
           font-size: 13px;
        }
    .overlay .grid {
        display: grid;
        grid-template-columns: 550px 1fr;
        gap: 15px;
        padding: 15px;
    }
        .overlay.fullscreen .grid .module {
            /* Atado al alto de la ventana, no al del contenido. Ver el bloque de mas abajo. */
            height: calc(100dvh - 94px);
            align-items: stretch;
        }
        .overlay .grid .module {
            width: 550px;
            height: calc(100dvh - 94px);
            background: rgba(255, 255, 255, .05);
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    .overlay.fullscreen .grid .module .layout {
        width: 100%;
        height: 100%;
        /* El recuadro de tarjetas scrollea solo; la pagina no. Ver el bloque de abajo. */
        overflow: auto;
    }

/* -------------------------------------------------------------------------------------
   EL QUE SCROLLEA ES EL RECUADRO, NO LA PAGINA.

   El modulo mide 550 x calc(100dvh - 94px) porque esa es la caja del plano del ambiente: en
   Vista 2 los chips van posicionados en absoluto sobre una imagen y no puede cambiar de tamano.
   En modo tarjetas no hay imagen que respetar, pero la caja seguia siendo la misma, y una lista
   larga -- un medidor son 57 sensores, 15 filas -- se salia por abajo.

   La regla .overlay.fullscreen .grid .module traia height 100%, que es 100% de un grid que mide
   lo que mida su contenido: o sea que el modulo crecia con las tarjetas y el que terminaba
   scrolleando era el overlay entero, arrastrando el encabezado y el grafico fuera de la vista.

   Volviendo a atarlo al alto de la ventana, el modulo deja de crecer y el scroll queda adentro
   del recuadro, que es donde tiene que estar: el encabezado, el grafico y la tabla se quedan
   siempre en su lugar y la pagina no se mueve.
   ------------------------------------------------------------------------------------- */
            .overlay.fullscreen .layout .environments {
                /* Las filas se apilan desde arriba: con pocos sensores no quedan estiradas. */
                align-content: start;
            }
        .overlay .grid .module .layout{
            width: 500px;
            height: 800px;
            position: relative;
        }
        .overlay .grid .items {
            display: flex;
            flex-direction: column;
            width: 100%;
            overflow: auto;
            gap: 15px;
        }
        .overlay .grid .wrapper-chart {
            width: 100%;
            overflow: auto;
        }
            .overlay .grid .wrapper-chart .chart {
                width: 100%;
                background: rgba(255, 255, 255, .05);
                height: 500px !important;
                border-radius: 5px;
            }
        .overlay .grid .table {
            background: rgba(255, 255, 255, .02);
            border-radius: 5px;
            width: 100%;
            height: calc(100dvh - 609px);
            overflow: auto;
        }
            .overlay .grid .table table thead {
                background: #24252a;
                color: #a4a4a4;
                font-weight: 600;
                position: sticky;
                top: 0;
                left: 0;
            }
                /*.overlay .grid .table table thead th:nth-child(1) {
                    background: #24252a;
                    position: sticky;
                    top: 0;
                    left: 0;
                    z-index: 1;
                }
                .overlay .grid .table table tbody td:nth-child(1) {
                    background: #24252a;
                    position: sticky;
                    top: 0;
                    left: 0;
                }*/
            .overlay .grid .table table tbody td .color-date {
                color: #a4a4a4;
            }
/* ROTULOS DEL PLANO

   Misma tarjeta que un chip de sensor -- mismo fondo, mismo color de texto, mismo radio --
   para que el plano se lea como una sola cosa y no como dos sistemas graficos distintos.
   Lo unico que cambia es el contenido: un rotulo es texto fijo y no un valor que se
   actualiza.

   pointer-events: none para que el rotulo no le robe el click a un chip que quede debajo.
   En el editor no aplica: ahi se dibuja como .device y hay que poder agarrarlo. */
.contenedor .layout .rotulos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

    .contenedor .layout .rotulos .rotulo {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 8px;
        box-sizing: border-box;
        background: #2d2e32;
        color: #e3e3e3;
        border-radius: 5px;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        user-select: none;
        pointer-events: none;
    }

/* ROTULO SIN FONDO

   El fondo transparente lo escribe layout.js en el style; lo que hace falta acá es el
   text-shadow, porque sin la caja oscura atrás el texto queda sobre el dibujo y un plano claro
   se lo come. El halo negro difuso funciona contra fondo claro y contra fondo oscuro, que es lo
   que se necesita cuando no se sabe qué hay debajo.

   Sin padding: los 8 px existían para que el texto no tocara el borde de la caja, y sin caja no
   separan de nada. El texto sigue centrado igual — la caja mantiene su ancho y su
   justify-content: center — pero recupera esos 16 px antes de recortarse con puntos
   suspensivos, que en un rótulo largo es la diferencia entre leerlo y adivinarlo. */
.contenedor .layout .rotulos .rotulo.transparente,
.wrapper-designer .designer .sensors .device[data-kind="rotulo"].transparente {
    padding: 0;
    background: transparent;
    text-shadow: 0 0 4px rgba(0, 0, 0, .9), 0 1px 2px rgba(0, 0, 0, .8);
}

/* En el editor el rotulo se dibuja como .device, y dentro del mismo .sensors que los chips,
   para heredar el arrastre, la seleccion, la alineacion y los sliders sin tocar ningun
   selector. Al verse igual que un chip casi no hace falta sobreescribir nada: solo el
   padding y el recorte del texto, que un chip no necesita porque muestra un numero corto. */
.wrapper-designer .designer .sensors .device[data-kind="rotulo"] {
    padding: 0 8px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contenedor .layout .sensors .device {
    width: 35px;
    height: 35px;
    border-radius: 5px;
    background: #2d2e32;
    color: #e3e3e3;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    transition: background .3s ease-in-out;
}
    .contenedor .layout .sensors .device > .title,
    .contenedor.hybrid .layout .grid .miniature .object .device > .title {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 2px;
        justify-content: center;
        max-width: 100%;
    }
    .contenedor .layout .sensors .device .heading,
    .contenedor.hybrid .layout .grid .miniature .object .device .heading {
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        max-width: 100%;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .contenedor .layout .sensors .device i {
        font-size: 18px;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #c1c1c1;
    }
    .contenedor .layout .sensors .device span {
        display: flex;
        justify-content: center;
        line-height: 1;
        font-weight: 600;
    }

    /* La unidad dentro del chip del plano: en la misma linea que el valor y alineada a su
       base, no centrada, para que "°C" no quede flotando a media altura del numero. Como
       tercera linea no entraba en los 35 px de alto del chip y se salia por el borde. */
    .contenedor .layout .sensors .device span .unidad,
    .contenedor.hybrid .layout .grid .miniature .object .device span .unidad {
        align-self: flex-end;
        color: #b6b6b6;
        font-size: 8px;
        font-style: normal;
        font-weight: 500;
        line-height: 1.6;
        margin-left: 2px;
    }
    .contenedor .layout .sensors .device strong{
        display: flex;
        line-height: 1;
        font-weight: 600;
        justify-content: center;
        color: #c1c1c1;
    }

    /* Un sensor de estado no muestra un numero sino la etiqueta de
       General.InstrumentoEtiquetas -- ON, OFF -- con el color que trae esa misma fila,
       aplicado inline. Va un punto mas chico y espaciado porque es una palabra corta en
       mayusculas: con el tamano de un numero se ve desproporcionada dentro del chip. */
    .contenedor .layout .sensors .device span.estado {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.05em;
    }
.contenedor .layout .environments {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
    gap: 15px;
    padding: 15px;
}
    .contenedor .layout .environments:empty {
        padding: 0;
    }
    .contenedor .layout .environments .empty-state {
        grid-column: 1 / -1;
        color: #9b9b9b;
        font-size: 14px;
        text-align: center;
        padding: 40px 15px;
    }
    .contenedor .layout .environments .device {
        background: rgba(255, 255, 255, .05);
        border-radius: 5px;
        padding: 15px;
        position: relative;
    }
        .contenedor .layout .environments .device > .title {
            color: #e1e1e1;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 15px;
            background: rgba(255, 255, 255, .05);
            width: max-content;
            height: 35px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            border-radius: 5px;
        }
        .contenedor .layout .environments .device > .status {
            color: #e1e1e1;
            font-size: 12px;
            font-weight: 500;
            margin-bottom: 15px;
            background: rgba(255, 255, 255, .05);
            width: max-content;
            height: 35px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            border-radius: 5px;
            position: absolute;
            top: 15px;
            right: 15px;
            font-weight: bold;
        }
        .contenedor .layout .environments .device .content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 12px;
        }
            .contenedor .layout .environments .device .content .element {
                background: rgba(255, 255, 255, .05);
                border-radius: 5px;
                padding: 12px;
                cursor: pointer;
                user-select: none;
                min-width: 0;
                min-height: 82px;
            }
                .contenedor .layout .environments .device .content .element .title {
                    color: #b8b8b8;
                    font-size: 13px;
                    font-weight: bold;
                    line-height: 1.3;
                    min-height: 34px;
                    overflow-wrap: anywhere;
                    white-space: normal;
                }
                .contenedor .layout .environments .device .content .element .value {
                    color: white;
                    font-size: 18px;
                    font-weight: 500;
                    display: flex;
                    align-items: end;
                    gap: 5px;
                    margin-top: 8px;
                    /* Mismo caso que en el overlay: el elemento ya tiene min-width 0, pero el
                       valor y la unidad no envolvian y se salian de la tarjeta. */
                    flex-wrap: wrap;
                }
                    .contenedor .layout .environments .device .content .element .value strong {
                        color: #6d6d6d;
                        font-size: 14px;
                    }
        .contenedor .layout .environments .device .status.init {
            background: rgba(20, 234, 138, 0.15);
            color: #69ff8e;
        }
        .contenedor .layout .environments .device .status.pause {
            background: rgba(107, 87, 31, 0.75);
            color: #f3c47e;
        }
        .contenedor .layout .environments .device .status.reinit {
            background: rgba(58, 31, 107, .85);
            color: #b07ef3;
        }
        .contenedor .layout .environments .device .status.finish {
            background: rgba(31, 63, 107, 0.7);
            color: #68b1ff;
        }
.overlay .layout .sensors .device {
    width: 35px;
    height: 35px;
    border-radius: 5px;
    background: #2d2e32;
    color: #e3e3e3;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    transition: background .3s ease-in-out;
    font-family: Roboto;
}

    .overlay .layout .sensors .device i {
        font-size: 19px;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #9f9f9f;
    }
    .overlay .layout .sensors .device .title {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .overlay .layout .sensors .device .heading {
        display: flex;
        justify-content: center;
        line-height: 1;
    }
    .overlay .layout .sensors .device .content {
        display: flex;
        gap: 3px;
    }
        .overlay .layout .sensors .device .content span {
            display: flex;
            justify-content: center;
            line-height: 1;
            font-weight: 600;
        }

        .overlay .layout .sensors .device .content strong {
            display: flex;
            line-height: 1;
            font-weight: 600;
            justify-content: center;
            color: #c1c1c1;
        }
.overlay .layout .environments {
    padding: 15px;
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
    .overlay .layout .environments:empty {
        padding: 0;
    }
    .overlay .layout .environments .device {
        background: rgba(255, 255, 255, .05);
        border-radius: 5px;
        padding: 15px;
        cursor: pointer;
        user-select: none;
        /* Una celda de grid no baja de su ancho minimo de contenido salvo que se le diga.
           Sin esto, el contador de energia -- "3067692.88 kWh", 122 px en una pista de 106 --
           no podia encoger y empujaba la tarjeta fuera de la caja del layout. */
        min-width: 0;
    }
        .overlay .layout .environments .device .title {
            color: #919191;
        }

        .overlay .layout .environments .device .heading {
            font-weight: bold;

        }

        .overlay .layout .environments .device .content {
            display: flex;
            gap: 3px;
            align-items: end;
            /* Con min-width 0 la tarjeta ya encoge; sin envolver, el valor y la unidad se
               salian de ella. Que la unidad baje de linea es preferible a que se corte. */
            flex-wrap: wrap;
        }

            .overlay .layout .environments .device .content span {
                display: flex;
                justify-content: center;
                line-height: 1;
                font-weight: 600;
                font-size: 18px;
                color: white;
            }

            .overlay .layout .environments .device .content strong {
                display: flex;
                line-height: 1;
                font-weight: 600;
                justify-content: center;
                color: #c1c1c1;
            }
.contenedor .layout .sensors .device .status {
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: #bebebe;
    flex-wrap: wrap;
}
    .contenedor .layout .sensors .device .status .circle {
        width: 7px;
        height: 7px;
        background: #ddd;
        border-radius: 50%;
        margin-right: 3px;
    }

.contenedor .layout .sensors .device.created {
    background: #8c8c8c;
    color: white;
}

.contenedor .layout .sensors .device.initiated {
    background: #2170f3;
    color: white;
}

.contenedor .layout .sensors .device.paused {
    background: #ffe821;
    color: black;
}

.contenedor .layout .sensors .device.reinit {
    background: #8421ff;
    color: white;
}

.contenedor .layout .sensors .device.invested {
    background: #55e091;
    color: black;
}

.accessibility {
    align-items: start;
}

    .accessibility .layout {
        width: 100%;
        height: 100%;
    }

        .accessibility .layout .telemetry {
            display: block;
            position: static;
            padding: 15px 3.75px;
        }

        .accessibility .layout img {
            display: none;
        }

.reveal {
    width: calc(100% - 300px);
    height: calc(100dvh - 64px);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
    background: #2a2b2f;
    position: fixed;
    top: 64px;
    left: 300px;
    transition: all .3s ease-in-out;
    z-index: 2;
    transform: translateX(-100%);
}

.environment {
    width: 1450px;
    height: 800px;
    position: relative;
}

    .environment img {
        display: block;
        width: 1450px;
        height: 800px;
        object-fit: cover;
    }

    .environment .movement {
        width: 948px;
        height: 386px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #f5f5f5;
        z-index: -1;
        transform: translate(199px, 208px);
    }

    .environment .thermometers {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        align-content: flex-start;
        position: absolute;
        top: 0;
        left: 0;
        padding: 15px;
    }

    .environment .sensors {
        width: 35px;
        height: 35px;
        /*position: absolute;
        top: 0;
        left: 0;*/
        background-color: #333;
        color: #fff;
        font-weight: bold;
        font-size: 12px;
        cursor: pointer;
        user-select: none;
        padding: 7px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .environment .sensors .name {
            line-height: 1;
            /*color: #a7a6a6;*/
            color: #bfbfbf;
            font-size: 12px;
        }

        .environment .sensors .value {
            line-height: 1;
            margin-top: 4px;
        }

            .environment .sensors .value strong {
                line-height: inherit;
                padding-right: 3px;
                font-weight: bold;
            }

            .environment .sensors .value span {
                line-height: inherit;
                font-size: 10px;
            }

.underline {
    text-decoration: line-through;
}

.product {
    position: relative;
    padding-left: 40px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .product .circle {
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .product .circle span {
            /*font-size: 10px;*/
        }
    .product .transparent {
        background: transparent;
    }

    .product .circle img {
        display: block;
        width: 100%;
        height: 100%;
    }
        .product .circle img[src=""] {
            display: none;
        }
.dispose {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(77, 77, 77, 0.7);
    color: #9b9b9b;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    cursor: pointer;
}

    .dispose i {
        font-size: 20px;
    }

.wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.7);
    z-index: 9999;
    display: none;
}

    .wrapper .message {
        width: 500px;
        height: 90%;
        background: #1a1d24;
        color: #fff;
        border-radius: 8px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

        .wrapper .message .button {
            width: 40px;
            height: 40px;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            user-select: none;
            background: rgba(255, 255, 255, 0.05);
            color: #8d8b8b;
        }

        .wrapper .message .category {
            color: #908f96;
            font-weight: bold;
            font-size: 14px;
            padding-top: 15px;
            line-height: 1;
        }

        .wrapper .message .value {
            padding-top: 20px;
            padding-bottom: 10px;
        }

            .wrapper .message .value strong {
                color: #fff;
                font-size: 36px;
                font-weight: 700;
                line-height: 1;
                margin-right: 3px;
                letter-spacing: -0.5px;
            }

            .wrapper .message .value span {
                color: #908f96;
                font-size: 16px;
                font-weight: 700;
            }

        .wrapper .message .thermometer {
            font-weight: bold;
            color: #87cc2f;
            line-height: 1;
        }

        .wrapper .message .lasted {
            font-weight: bold;
            line-height: 1;
            color: #6f6e73;
            font-size: 12px;
            padding-top: 5px;
        }

.wrapper-control {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.7);
    z-index: 9999;
    overflow: auto;
}
    .wrapper-control.expand .control {
        width: 450px;
    }
    .wrapper-control .control {
        width: 310px;
        background: #1a1d24;
        color: #fff;
        border-radius: 8px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /*.wrapper-control .expand {
        width: 400px;
    }*/

    .wrapper-control .control .header {
        padding: 15px;
        position: relative;
    }

        .wrapper-control .control .header .container-switch {
            position: absolute;
            width: calc(100% - 80px);
            height: 35px;
            top: 15px;
            right: 15px;
            box-sizing: border-box;
        }

    .wrapper-control .control .more {
        width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
        position: absolute;
        right: 15px;
        top: 15px;
        border-radius: 5px;
        cursor: pointer;
        user-select: none;
        padding: 4px;
    }

    .wrapper-control .control .list {
        width: auto;
        background: #414349;
        position: fixed;
        border-radius: 5px;
        top: 15px;
        right: 60px;
        z-index: 999;
        display: none;
    }

        .wrapper-control .control .list .element {
            width: auto;
            position: relative;
            height: 35px;
            line-height: 35px;
            color: #afafb2;
            padding: 0 10px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all .3s ease-in-out;
            user-select: none;
        }

            .wrapper-control .control .list .element:hover {
                color: white;
                background-color: rgba(0, 0, 0, 0.15);
            }

    .wrapper-control .control .wrapper-switch .switch label {
        font-weight: bold;
        color: #9e9e9e;
    }

        .wrapper-control .control .wrapper-switch .switch label .lever {
            margin: 0;
            margin-left: 10px;
            background: rgba(255,255,255,0.05);
        }

        .wrapper-control .control .wrapper-switch .switch label input[type=checkbox]:checked + .lever:after {
            /*background-color: #17c82e;*/
        }

        .wrapper-control .control .wrapper-switch .switch label input[type=checkbox]:checked + .lever {
            /*background-color: #96fb86;*/
        }

    .wrapper-control .control .button {
        width: 35px;
        height: 35px;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        user-select: none;
        background: rgba(255, 255, 255, 0.05);
        color: #8d8b8b;
    }

    .wrapper-control .control .wrapper-button {
        width: 100%;
        margin: 0;
        /*margin-top: 10px;*/
    }

        .wrapper-control .control .wrapper-button .button {
            border-radius: 5px;
            cursor: pointer;
            position: relative;
            background: radial-gradient(circle at 130% center, rgb(40, 123, 255) 0%, rgba(255, 255, 255, .05) 60%);
            width: auto;
            height: 35px;
            color: white;
            padding: 0 10px;
            padding-left: 35px;
            display: inline-block;
            line-height: 35px;
        }
            .wrapper-control .control .wrapper-button .button.flat {
                background: rgba(31, 63, 107, 0.7);
                color: #3690f1;
            }
        .wrapper-control .control .wrapper-button .no-icon {
            padding-right: 10px;
        }

        .wrapper-control .control .wrapper-button .button i {
            position: absolute;
            top: 0;
            left: 0;
            width: 35px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            font-size: 20px;
            color: #478eff;
        }

        .wrapper-control .control .wrapper-button .loading {
            display: none;
            background: #333;
            position: absolute;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            border: 4px solid rgba(255, 255, 255, 0.2);
            border-top: 4px #2cff76 solid;
            animation: rotate 1.3s infinite linear;
        }

        .wrapper-control .control .wrapper-button .caption {
            display: inline-block;
            background: #313030;
            font-weight: bold;
            font-size: 13px;
            height: 25px;
            line-height: 25px;
            padding: 0 7px;
            border-radius: 5px;
            text-align: center;
            margin-top: 10px;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            cursor: pointer;
            user-select: none;
        }

    .wrapper-control .wrapper-delete {
        display: none;
        flex-direction: row;
    }

        .wrapper-control .wrapper-delete .button {
            width: auto;
            height: 35px;
            line-height: 35px;
            border-radius: 5px;
            padding: 0 12px;
            padding-right: 40px;
            position: relative;
            background-color: #b71212;
            background: radial-gradient(circle at 130% center, rgb(223 43 43) 0%, rgba(255, 255, 255, .05) 60%);
            font-weight: bold;
            font-size: 13px;
            margin-right: 10px;
            display: inline-block;
            color: white;
        }

            .wrapper-control .wrapper-delete .button i {
                position: absolute;
                top: 0;
                left: 0;
                width: 35px;
                height: 35px;
                line-height: 35px;
                text-align: center;
                font-size: 20px;
                color: #f87273;
            }

        .wrapper-control .wrapper-delete .cancel {
            width: auto;
            height: 35px;
            line-height: 35px;
            font-size: 13px;
            font-weight: bold;
            border-radius: 5px;
            user-select: none;
            cursor: pointer;
            padding: 0 10px;
            background: rgba(255,255,255,.05);
        }

.wrapper-navigate {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.7);
    z-index: 9999;
    overflow: auto;
}

    .wrapper-navigate .navigate {
        width: 310px;
        background: #1a1d24;
        color: #fff;
        border-radius: 8px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .wrapper-navigate .expand {
        width: 400px;
    }

    .wrapper-navigate .navigate .header {
        padding: 15px;
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

        .wrapper-navigate .navigate .header .groupment {
            display: flex;
            flex-direction: column;
        }

        .wrapper-navigate .navigate .header span {
            font-size: 13px;
            font-weight: bold;
            color: #9e9e9e;
            line-height: 1;
        }

        .wrapper-navigate .navigate .header strong {
            font-size: 13px;
            font-weight: bold;
            color: #dbdbdb;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1;
            padding-top: 3px;
        }

    .wrapper-navigate .navigate .more {
        width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
        position: absolute;
        right: 15px;
        top: 15px;
        border-radius: 5px;
        cursor: pointer;
        user-select: none;
        padding: 4px;
    }

    .wrapper-navigate .navigate .list {
        width: auto;
        background: #414349;
        position: fixed;
        border-radius: 5px;
        top: 15px;
        right: 60px;
        z-index: 999;
        display: none;
    }

        .wrapper-navigate .navigate .list .element {
            width: auto;
            position: relative;
            height: 35px;
            line-height: 35px;
            color: #afafb2;
            padding: 0 10px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all .3s ease-in-out;
            user-select: none;
        }

            .wrapper-navigate .navigate .list .element:hover {
                color: white;
                background-color: rgba(0, 0, 0, 0.15);
            }

    .wrapper-navigate .navigate .button {
        width: 35px;
        height: 35px;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        user-select: none;
        background: rgba(255, 255, 255, 0.05);
        color: #8d8b8b;
        margin-right: 15px;
    }

    .wrapper-navigate .navigate .wrapper-button {
        width: 100%;
        margin: 0;
        margin-top: 10px;
    }

        .wrapper-navigate .navigate .wrapper-button .button {
            border-radius: 5px;
            cursor: pointer;
            position: relative;
            background: linear-gradient(126deg, #0f5e16, #a0d821);
            width: auto;
            color: white;
            padding: 0 10px;
            padding-right: 40px;
            display: inline-block;
            line-height: 35px;
        }

        .wrapper-navigate .navigate .wrapper-button .no-icon {
            padding-right: 10px;
        }

        .wrapper-navigate .navigate .wrapper-button .button i {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            font-size: 18px;
        }

.wrapper-information {
    display: none;
    position: relative;
}

    .wrapper-information .information {
        width: calc(100% - 45px);
        height: 35px;
        line-height: 35px;
        background: linear-gradient(45deg, #d93333 10%, #25282f 70%);
        color: white;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
        overflow: hidden;
        font-size: 13px;
        font-weight: bold;
        padding: 0 10px;
        border-radius: 5px;
        margin: 5px 0;
    }

    .wrapper-information .button {
        position: absolute;
        top: 0;
        right: 0;
    }

.wrapper-counter {
    width: 100%;
    margin-bottom: 10px;
    position: relative;
    /*display: none;*/
}

    .wrapper-counter > label {
        display: block;
        padding-left: 10px;
        font-weight: bold;
        margin-bottom: 5px;
        font-size: 12px !important;
    }

    .wrapper-counter input {
        background: rgba(255, 255, 255, .05) !important;
        border-radius: 5px !important;
        height: 35px !important;
        box-sizing: border-box !important;
        border: 0 !important;
        box-shadow: none !important;
        font-size: 13px !important;
        font-weight: bold;
        color: #fff;
        padding: 0 10px !important;
        margin-bottom: 0 !important;
        width: calc(100% - 140px) !important;
    }

    .wrapper-counter .wrapper-deploy {
        position: absolute;
        bottom: 0;
        right: 0;
        display: inline-flex;
    }

        .wrapper-counter .wrapper-deploy .deploy {
            width: 35px;
            height: 35px;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(31, 47, 107, 0.7);
            color: #3690f1;
            cursor: pointer;
            user-select: none;
            margin-right: 10px;
        }

        .wrapper-counter .wrapper-deploy .reset {
            background: rgba(31, 85, 107, 0.7);
            color: #36f1d0;
        }

        .wrapper-counter .wrapper-deploy .deploy i {
            font-size: 21px;
        }

        .wrapper-counter .wrapper-deploy .deploy:last-child {
            margin-right: 0;
        }

.wrapper-input {
    width: 100%;
    margin-bottom: 10px;
    position: relative;
}
    .wrapper-input.lasted {
        margin-bottom: 15px;
    }

    .wrapper-input > label {
        display: block;
        padding-left: 10px;
        font-weight: bold;
        margin-bottom: 5px;
        font-size: 12px !important;
    }

    .wrapper-input input {
        background: rgba(255, 255, 255, .05) !important;
        border-radius: 5px !important;
        height: 35px !important;
        box-sizing: border-box !important;
        border: 0 !important;
        box-shadow: none !important;
        font-size: 12px !important;
        font-weight: bold;
        color: #fff;
        padding: 0 10px !important;
        margin-bottom: 0 !important;
    }

        .wrapper-input input::placeholder {
            color: #9e9e9e;
            font-size: 12px;
        }

        /*  LA FLECHITA DE LOS CAMPOS NUMERICOS

            Un <input type="number"> trae el spinner del navegador, y el navegador lo dibuja
            con el esquema de color CLARO salvo que se le diga otra cosa: sobre el fondo
            oscuro de la aplicacion queda un recuadro negro pegado al borde derecho.

            color-scheme: dark le dice que pinte sus controles nativos en oscuro. Y ademas se
            esconde el spinner: en un minimo, un maximo o un orden el valor se escribe -- no
            se sube de a uno --, asi que la flechita solo ocupa lugar y tapa el final del
            numero. El campo sigue siendo numerico, con su teclado y su validacion.

            Vale para todo .wrapper-input y no para una pantalla sola: el mismo defecto esta
            en el campo Orden de Areas. */
        .wrapper-input input[type="number"] {
            color-scheme: dark;
            -moz-appearance: textfield;
            appearance: textfield;
        }

            .wrapper-input input[type="number"]::-webkit-outer-spin-button,
            .wrapper-input input[type="number"]::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

    .wrapper-input .validate, .wrapper-select .validate {
        display: none;
        font-size: 12px;
        padding: 4px 10px;
        padding-bottom: 0;
        font-weight: bold;
        color: #b12121;
        line-height: 1;
    }

.wrapper-password {
    position: relative;
}

    .wrapper-password input {
        width: calc(100% - 45px) !important;
    }

    .wrapper-password .button {
        width: 35px;
        height: 35px;
        background: rgba(255, 255, 255, .05);
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 23px;
        right: 0;
        cursor: pointer;
        user-select: none;
        padding: 3px;
    }

        .wrapper-password .button i {
            font-size: 22px;
            color: #afafaf;
        }

        .wrapper-password .button img {
        }

.wrapper-image {
    margin-bottom: 10px;
}

    .wrapper-image .label {
        display: block;
        padding-left: 10px;
        font-weight: bold;
        margin-bottom: 5px;
        font-size: 12px !important;
        color: #9e9e9e;
    }

    .wrapper-image .image {
        width: 100%;
        height: 70px;
        position: relative;
        padding: 10px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 70px;
        padding-right: 55px;
    }

        .wrapper-image .image .container {
            width: 50px;
            height: 50px;
            max-width: 100%;
            margin: 0;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            position: absolute;
            top: 10px;
            left: 10px;
        }

        .wrapper-image .image .title {
            color: white;
            font-weight: 800;
            font-size: 12px;
        }

        .wrapper-image .image .subtitle {
            color: #79787f;
            font-weight: bold;
            line-height: 1.15;
            font-size: 12px;
        }

        .wrapper-image .image label {
            width: 35px;
            height: 35px;
            background: linear-gradient(109deg, #28a6e2, #211799);
            border-radius: 5px;
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            cursor: pointer;
        }

        .wrapper-image .image .container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 5px;
            border-style: none;
        }

    .wrapper-image input[type="file"] {
        display: none;
    }

.wrapper-sidebar {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.7);
    z-index: 9999;
}

    .wrapper-sidebar .sidebar {
        width: 400px;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        background: #171a21;
        color: #fff;
        transition: all .3s ease-in-out;
        overflow-y: auto;
        transform: translateX(100%);
    }

        .wrapper-sidebar .sidebar .header .button {
            width: 40px;
            height: 40px;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            user-select: none;
            background: rgba(255, 255, 255, 0.05);
            color: #8d8b8b;
        }

.wrapper-context {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.7);
    z-index: 1000;
}

    .wrapper-context .context {
        width: 450px;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        /*background: #171a21;*/
        background: #222327;
        color: #fff;
        transition: all .3s ease-in-out;
        overflow-y: auto;
        transform: translateX(100%);
        z-index: 1;
    }

    .wrapper-context.expand .context, .wrapper-context.expand .wrapper-menu, .wrapper-context.expand .wrapper-menu .menu {
        width: 650px;
        transition: all .3s ease-in-out;
    }

    .wrapper-context .context .header {
        margin-bottom: 15px;
        height: 35px;
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

        .wrapper-context .context .header > span {
            font-size: 13px;
            font-weight: bold;
            color: #dbdbdb;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-right: 125px;
        }

        .wrapper-context .context .header .button {
            width: 35px;
            height: 35px;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            user-select: none;
            background: rgba(255, 255, 255, 0.05);
            color: #8d8b8b;
            margin-right: 15px;
        }

        .wrapper-context .context .header .more {
            width: 35px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
            position: absolute;
            top: 0;
            right: 0;
            border-radius: 5px;
            cursor: pointer;
            user-select: none;
            padding: 4px;
        }

        .wrapper-context .context .header .threads, .wrapper-context .context .header .list {
            display: none;
            width: max-content;
            position: fixed;
            top: 15px;
            right: 60px;
            border-radius: 5px;
            background: #383a45;
            overflow: hidden;
            z-index: 2;
        }

            .wrapper-context .context .header .threads .element, .wrapper-context .context .header .list .element {
                height: 35px;
                padding: 0 10px;
                cursor: pointer;
                transition: all .3s ease-in-out;
                font-weight: bold;
                color: #ddd;
                display: flex;
                align-items: center;
                font-size: 13px;
            }

                .wrapper-context .context .header .threads .element:hover, .wrapper-context .context .header .list .element:hover {
                    background: rgba(0, 0, 0, 0.15);
                    transition: all .3s ease-in-out;
                    color: #fff;
                }

        .wrapper-context .context .header .action {
            width: auto;
            height: 35px;
            line-height: 34px;
            display: inline-flex;
            background: linear-gradient(126deg, #0f5e16, #a0d821);
            padding: 0 15px;
            border-radius: 5px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            cursor: pointer;
            user-select: none;
        }

            .wrapper-context .context .header .action span {
                display: block;
                font-weight: bold;
                font-size: 13px;
                line-height: inherit;
            }
        .wrapper-context .context .header .wrapper-stack {
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
        }

        .wrapper-context .context .header .wrapper-stack .stack {
            background: rgba(31, 63, 107, 0.7);
            color: #3690f1;
            transition: all .3s ease-in-out;
            width: max-content;
            height: 35px;
            line-height: 35px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            cursor: pointer;
            user-select: none;
            font-size: 13px;
            font-weight: bold;
            margin-right: 10px;
        }
        .wrapper-context .context .header .wrapper-stack .stack:first-child {
            border-radius: 5px 0 0 5px;
            margin: 0;
        }
        .wrapper-context .context .header .wrapper-stack .stack:not(:first-child) {
            border-radius: 0 5px 5px 0;
        }
        .wrapper-context .context .header .wrapper-stack .stack:not(:first-child):hover {
            filter: brightness(1.3);
        }
            .wrapper-context .context .header .wrapper-stack .stack i {
                width: 35px;
                height: 35px;
                line-height: 35px;
                text-align: center;
                font-size: 21px;
            }
            .wrapper-context .context .header .wrapper-stack .stack span {
                padding-right: 10px;
            }
            .wrapper-context .context .header .wrapper-stack .stack.default {
                background: rgba(255, 255, 255, 0.05);
                color: #8d8b8b;
                margin-right: 0;
            }
                .wrapper-context .context .header .wrapper-stack .stack.default:first-child {
                    border-right: 2px #8d8b8b solid;
                }
            .wrapper-context .context .header .wrapper-stack .stack.init {
                background: rgba(20, 234, 138, 0.15);
                color: #69ff8e;
            }
                .wrapper-context .context .header .wrapper-stack .stack.init:first-child {
                    border-right: 2px #69ff8e solid;
                }
            .wrapper-context .context .header .wrapper-stack .stack.reinit {
                background: rgba(58, 31, 107, .85);
                color: #a768fc;
            }
                .wrapper-context .context .header .wrapper-stack .stack.reinit:first-child {
                    border-right: 2px #a768fc solid;
                }
            .wrapper-context .context .header .wrapper-stack .stack.finish {
                background: rgba(31, 63, 107, 0.7);
                color: #3690f1;
            }
                .wrapper-context .context .header .wrapper-stack .stack.finish:first-child {
                    border-right: 2px #3690f1 solid;
                }
                .wrapper-context .context .header .wrapper-stack .stack.default i {
                    padding-top: 2px;
                }
            .wrapper-context .context .header .wrapper-stack .list {
                width: max-content;
                position: absolute;
                top: 45px;
                right: 0;
                border-radius: 5px;
                background: #383a45;
                overflow: hidden;
                z-index: 2;
                flex-direction: column;
            }
                .wrapper-context .context .header .wrapper-stack .list .element {
                    height: 35px;
                    padding: 0 10px;
                    cursor: pointer;
                    transition: all .3s ease-in-out;
                    font-weight: 500;
                    color: #ddd;
                    display: flex;
                    align-items: center;
                    font-size: 13px;
                    position: relative;
                }


    .wrapper-context .wrapper-button .no-icon {
        padding-left: 10px !important;
    }
    .wrapper-context .wrapper-button .button.flat {
        background: rgba(31, 63, 107, 0.7);
        color: #3690f1;
    }

    .wrapper-context .wrapper-button .button {
        width: auto;
        height: 35px;
        border-radius: 5px;
        padding: 0 12px;
        padding-left: 35px;
        position: relative;
        background-color: rgba(255, 255, 255, .05);
        /*background: linear-gradient(126deg, #0f5e16, #a0d821); rgb(40, 123, 255)*/
        background: radial-gradient(circle at 130% center, rgb(40, 123, 255) 0%, rgba(255, 255, 255, .05) 60%);
        /*margin-top: 5px;*/
    }

        .wrapper-context .wrapper-button .button i {
            position: absolute;
            top: 0;
            left: 0;
            width: 35px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            font-size: 20px;
            color: #478eff;
            padding-top: 1px;
        }

    .wrapper-context .wrapper-delete {
        display: none;
        flex-direction: row;
    }
        .wrapper-context .wrapper-delete .button.flat {
            background: rgba(107, 31, 31, 0.7);
            color: #d78383;
        }
        .wrapper-context .wrapper-delete .button {
            width: auto;
            height: 35px;
            line-height: 35px;
            border-radius: 5px;
            padding: 0 12px;
            padding-left: 35px;
            position: relative;
            background-color: #b71212;
            background: radial-gradient(circle at 130% center, rgb(223 43 43) 0%, rgba(255, 255, 255, .05) 60%);
            font-weight: bold;
            font-size: 13px;
            margin-right: 10px;
        }

            .wrapper-context .wrapper-delete .button i {
                position: absolute;
                top: 0;
                left: 0;
                width: 35px;
                height: 35px;
                line-height: 35px;
                text-align: center;
                font-size: 20px;
                color: #f15859;
            }

        .wrapper-context .wrapper-delete .cancel {
            width: auto;
            height: 35px;
            line-height: 35px;
            font-size: 13px;
            font-weight: bold;
            border-radius: 5px;
            user-select: none;
            cursor: pointer;
            padding: 0 10px;
            background: rgba(255,255,255,.05);
        }
    .wrapper-context .wrapper-reset {
        display: none;
        flex-direction: row;
    }

        .wrapper-context .wrapper-reset .button.flat {
            background: rgb(132 118 39 / 44%);
            color: #d5be70;
        }

        .wrapper-context .wrapper-reset .button {
            width: auto;
            height: 35px;
            line-height: 35px;
            border-radius: 5px;
            padding: 0 12px;
            padding-left: 35px;
            position: relative;
            background-color: #b71212;
            background: radial-gradient(circle at 130% center, rgb(223 43 43) 0%, rgba(255, 255, 255, .05) 60%);
            font-weight: bold;
            font-size: 13px;
            margin-right: 10px;
        }

            .wrapper-context .wrapper-reset .button i {
                position: absolute;
                top: 0;
                left: 0;
                width: 35px;
                height: 35px;
                line-height: 35px;
                text-align: center;
                font-size: 20px;
                color: #f1c658;
            }

        .wrapper-context .wrapper-reset .cancel {
            width: auto;
            height: 35px;
            line-height: 35px;
            font-size: 13px;
            font-weight: bold;
            border-radius: 5px;
            user-select: none;
            cursor: pointer;
            padding: 0 10px;
            background: rgba(255,255,255,.05);
        }
    .wrapper-context .context.complete {
        width: calc(100% - 300px);
    }
    .wrapper-context .context.hybrid {
        width: 630px;
    }
    .wrapper-context .context .account {
        margin-bottom: 15px;
    }
        .wrapper-context .context .account .wrapper-layer {
            display: flex;
        }
            .wrapper-context .context .account .wrapper-layer .image {
                width: 60px;
                height: 60px;
                background: rgba(255, 255, 255, .05);
                border-radius: 5px;
                margin-right: 10px;
            }
                .wrapper-context .context .account .wrapper-layer .image img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 5px;
                }
            .wrapper-context .context .account .wrapper-layer .button {
                width: 35px;
                height: 35px;
                line-height: 35px;
                background: rgba(255, 255, 255, .05);
                color: #00a5ff;
                border-radius: 5px;
                text-align: center;
                cursor: pointer;
                user-select: none;
                margin-right: 10px;
            }
                .wrapper-context .context .account .wrapper-layer .button i {
                    font-size: 19px;
                    line-height: inherit;
                }
            .wrapper-context .context .account .wrapper-layer .delete {
                width: 35px;
                height: 35px;
                line-height: 35px;
                background: rgba(255, 255, 255, .05);
                color: #9e9e9e;
                border-radius: 5px;
                text-align: center;
                cursor: pointer;
                user-select: none;
                margin-right: 10px;
            }

                .wrapper-context .context .account .wrapper-layer .delete i {
                    font-size: 21px;
                    line-height: inherit;
                }
            .wrapper-context .context .account .wrapper-layer .reset {
                width: max-content;
                height: 35px;
                line-height: 35px;
                background: rgba(255, 255, 255, .05);
                color: #9e9e9e;
                border-radius: 5px;
                text-align: center;
                cursor: pointer;
                user-select: none;
                margin-right: 10px;
                display: flex;
                align-items: center;
                font-weight: 700;
                padding-right: 10px;
            }

                .wrapper-context .context .account .wrapper-layer .reset i {
                    width: 35px;
                    font-size: 19px;
                    line-height: inherit;
                }
                .wrapper-context .context .account .wrapper-layer .reset span {
                    font-size: 13px;
                    line-height: inherit;
                }
.wrapper-designer {
    display: flex;
    justify-content: start;
    align-items: start;
    overflow: auto;
}
    .wrapper-designer .designer.hybrid {
        width: 600px;
        height: 600px;
    }
    .wrapper-designer .designer {
        width: 1450px;
        height: 800px;
        position: relative;
    }
        .wrapper-designer .designer.hybrid img {
            width: 600px;
            height: 600px;
            border-radius: 5px;
        }
        .wrapper-designer .designer img {
            width: 1450px;
            height: 800px;
            object-fit: contain;
            display: block;
        }
        .wrapper-designer .designer .sensors {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            align-content: flex-start;
            position: absolute;
            top: 0;
            left: 0;
            padding: 15px;
        }
            .wrapper-designer .designer .sensors .device {
                width: 35px;
                height: 35px;
                border-radius: 5px;
                background: #2d2e32;
                color: #e3e3e3;
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-weight: 500;
                font-size: 12px;
                cursor: pointer;
                user-select: none;
                line-height: 1;
                text-align: center;
                /*box-shadow: 0 0 5px 0 #474646;*/
                transition: background .3s ease-in-out;
            }
                .wrapper-designer .designer .sensors .device.active {
                    transition: background .3s ease-in-out;
                    background: #3f51b5;
                    color: white;
                }
.wrapper-enhance {
    display: flex;
    position: relative;
}
    .wrapper-enhance .enhance {
        display: flex;
        align-items: center;
        width: max-content;
        height: 35px;
        line-height: 35px;
        font-weight: 500;
        background: rgba(255, 255, 255, .05);
        color: #d7d7d7;
        margin-right: 10px;
        font-size: 13px;
        border-radius: 7px;
        cursor: pointer;
        user-select: none;
        transition: all .3s ease-in-out;
        margin-bottom: 10px;
        position: relative;
        padding-right: 10px;
    }
        .wrapper-enhance .enhance i {
            width: 35px;
            height: 35px;
            line-height: 35px;
            font-size: 19px;
            text-align: center;
        }
        .wrapper-enhance .enhance svg {
            width: 35px;
            height: 24px;
            fill: transparent;
        }
        .wrapper-enhance .enhance:nth-child(1) i {
            color: #3690f1;
        }
        .wrapper-enhance .enhance:nth-child(2) i {
            color: #6ce287;
        }
.wrapper-builder {
    display: flex;
    position: relative;
}

    .wrapper-builder .builder {
        display: flex;
        align-items: center;
        width: max-content;
        height: 35px;
        line-height: 35px;
        font-weight: 500;
        background: rgba(255, 255, 255, .05);
        color: #d7d7d7;
        margin-right: 10px;
        font-size: 13px;
        border-radius: 7px;
        cursor: pointer;
        user-select: none;
        transition: all .3s ease-in-out;
        margin-bottom: 10px;
        position: relative;
        padding-right: 10px;
    }

        .wrapper-builder .builder i {
            width: 35px;
            height: 35px;
            line-height: 35px;
            font-size: 19px;
            text-align: center;
        }

        .wrapper-builder .builder svg {
            width: 35px;
            height: 24px;
            fill: transparent;
        }

        .wrapper-builder .builder:nth-child(1) i {
            color: #3690f1;
        }

        .wrapper-builder .builder:nth-child(2) i {
            color: #6ce287;
        }
.wrapper-designer-builder {
    display: flex;
    justify-content: start;
    align-items: start;
    overflow: auto;
}

    .wrapper-designer-builder .designer-builder {
        width: 500px;
        height: 800px;
        position: relative;
    }

        .wrapper-designer-builder .designer-builder img {
            width: 500px;
            height: 800px;
            object-fit: contain;
            display: block;
        }

        .wrapper-designer-builder .designer-builder .sensors {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            align-content: flex-start;
            position: absolute;
            top: 0;
            left: 0;
            padding: 15px;
        }

            .wrapper-designer-builder .designer-builder .sensors .device-builder {
                width: 35px;
                height: 35px;
                border-radius: 5px;
                background: #2d2e32;
                color: #e3e3e3;
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-weight: 500;
                font-size: 12px;
                cursor: pointer;
                user-select: none;
                line-height: 1;
                text-align: center;
                /*box-shadow: 0 0 5px 0 #474646;*/
                transition: background .3s ease-in-out;
            }

                .wrapper-designer-builder .designer-builder .sensors .device-builder.active {
                    transition: background .3s ease-in-out;
                    background: #3f51b5;
                    color: white;
                }
.drag-indicator {
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, .05);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
    .drag-indicator i {
        font-size: 19px;
        color: #6ce287;
    }
.disabled .drag-indicator i {
    color: #79787f
}

.table table tr th, .table table tr td {
    padding: 10px 5px;
    font-size: 12px;
}

.inherit {
    color: #79787f;
    font-weight: bold;
}

.focused {
    color: #d9d8da;
    font-weight: bold;
}

.table table tr {
    border-bottom: 1px solid #2a292e;
}

.padding {
    padding: 15px;
}

.padding-landscape {
    padding: 0 15px;
    padding-bottom: 15px;
}
.wrapper-select.lasted{
    margin-bottom: 15px;
}
.wrapper-select {
    position: relative;
    margin-bottom: 10px;
}

    .wrapper-select > label {
        display: block;
        padding-left: 10px;
        font-weight: bold;
        margin-bottom: 5px;
        font-size: 12px !important;
    }

    .wrapper-select .select-wrapper {
    }

    .wrapper-select select {
        height: 35px;
        background: rgba(255, 255, 255, 0.05);
        color: white;
        border-radius: 5px;
        font-size: 13px;
        line-height: 35px;
        padding: 0 10px;
        font-weight: bold;
        appearance: none;
        box-sizing: border-box;
        box-shadow: none;
        border: 0;
        outline: none;
    }

    .wrapper-select option {
        color: black;
    }

    .wrapper-select .select-wrapper input.select-dropdown {
        height: 35px;
        background: rgba(255, 255, 255, 0.05);
        color: #9e9e9e;
        border-radius: 5px;
        font-size: 12px;
        line-height: 35px;
        padding: 0 10px;
        position: relative;
        cursor: pointer;
        box-sizing: border-box;
        box-shadow: none;
        border: 0;
        font-weight: bold;
        appearance: none;
        margin-bottom: 0;
    }

        .wrapper-select .select-wrapper input.select-dropdown.active {
            color: white;
        }

    .wrapper-select .select-dropdown li img {
        width: 30px;
        height: 30px;
        margin: 0;
        float: left;
        margin-right: 7px;
    }

    .wrapper-select .caret {
        display: none;
    }

    /*  EL MISMO TEMA PARA EL DESPLEGABLE QUE SE FUE DEL .wrapper-select

        Los <select> de las hojas de Procesos cuelgan su <ul> del BODY -- ver
        SubmenuSelectOptions() en process/core.js -- para que la hoja, que ahora escrolea, no
        lo recorte. Ahi afuera ni uno solo de estos selectores lo alcanza, y lo que queda es lo
        que trae materialize.css: fondo blanco. Con el color de letra blanco que pone la regla
        global de .dropdown-content li > span, eso es una lista en blanco sobre blanco.

        El gemelo .submenu-dropdown lo escribe TagSubmenuDropdown() sobre ese <ul>, que es el
        mismo recurso que .tunnel-sensor-dropdown usa para los selects de sensor del mapa. Va
        como segundo selector de cada regla y no como bloque aparte a proposito: el tema es
        uno, cambiarlo en un lado y no en el otro es la forma de que se separen. */
    .wrapper-select .dropdown-content,
    .submenu-dropdown.dropdown-content {
        background-color: #2b2e35;
        border-radius: 5px;
        box-shadow: none;
        max-height: 210px;
    }

        .wrapper-select .dropdown-content li,
        .submenu-dropdown.dropdown-content li {
            min-height: 35px;
            line-height: 35px;
            padding: 0 10px;
            font-weight: bold;
            color: #ddd;
            display: flex;
            align-items: center;
        }

            .wrapper-select .dropdown-content li > span,
            .submenu-dropdown.dropdown-content li > span {
                padding: 0;
                line-height: 35px;
                font-size: 13px;
                color: white;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                
            }
                .wrapper-select .dropdown-content li > span .wrapper-circle,
                .submenu-dropdown.dropdown-content li > span .wrapper-circle {
                    display: flex;
                    align-items: center;
                }
                    .wrapper-select .dropdown-content li > span .wrapper-circle.disabled,
                    .submenu-dropdown.dropdown-content li > span .wrapper-circle.disabled {
                        color: #79787f;
                    }
                    .wrapper-select .dropdown-content li > span .wrapper-circle .circle,
                    .submenu-dropdown.dropdown-content li > span .wrapper-circle .circle {
                        width: 8px;
                        height: 8px;
                        margin-right: 5px;
                    }
.wrapper-multiple {
    margin-bottom: 10px;
}
    .wrapper-multiple > label {
        display: block;
        padding-left: 10px;
        font-weight: bold;
        margin-bottom: 5px;
        font-size: 12px;
        color: #9e9e9e;
    }
    .wrapper-multiple .multiple {
        height: 35px;
        background: rgba(255, 255, 255, 0.05);
        color: #9e9e9e;
        border-radius: 5px;
        font-size: 12px;
        line-height: 35px;
        padding: 0 10px;
        position: relative;
        cursor: pointer;
        box-sizing: border-box;
        box-shadow: none;
        border: 0;
        font-weight: bold;
        margin-bottom: 0;
        position: relative;
    }
        .wrapper-multiple .multiple .list {
            display: none;
            position: absolute;
            background: #2b2e35;
            border-radius: 5px;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 2;
        }
            .wrapper-multiple .multiple .list .element, .wrapper-multiple .multiple .list .disabled {
                height: 35px;
                line-height: 35px;
                padding: 0 10px;
            }
            .wrapper-multiple .multiple .list .disabled {
                color: #9e9e9e;
            }
            .wrapper-multiple .multiple .list .element {
                color: white;
                transition: all .3s ease-in-out;
                position: relative;
            }
            .wrapper-multiple .multiple .list .element:hover {
                background: rgba(0, 0, 0, .1);
                transition: all .3s ease-in-out;
            }
                .wrapper-multiple .multiple .list .element.active {
                    padding-left: 25px;
                    transition: all .3s ease-in-out;
                }
                    .wrapper-multiple .multiple .list .element.active .circle {
                        transition: all .3s ease-in-out;
                        width: 7px;
                        height: 7px;
                        background: #8ae136;
                        position: absolute;
                        top: 50%;
                        left: 10px;
                        transform: translateY(-50%);
                    }
.wrapper-normal {
    height: 35px;
}

.wrapper-compact {
    position: relative;
}

.normal > .select {
    width: 100% !important;
}

.wrapper-select > .select {
    position: absolute;
    width: calc(100% - 45px);
}

.wrapper-compact > .select {
    width: calc(100% - 135px);
}

.wrapper-compact .wrapper-select .select-wrapper input.select-dropdown {
    width: calc(100% - 135px) !important;
}

.wrapper-compact > .input {
    position: absolute;
    top: 0;
    right: 45px;
    display: flex;
    flex-direction: column;
}

.normal label, .normal .label {
    display: block;
    height: 18px;
    padding-left: 10px;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 0.8rem;
    color: #9e9e9e;
}

.wrapper-compact label, .wrapper-compact .label {
    display: block;
    height: 18px;
    padding-left: 10px;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 0.8rem;
    color: #9e9e9e;
}

.wrapper-compact > .input input {
    background: rgba(255, 255, 255, .05) !important;
    border-radius: 5px !important;
    width: 80px !important;
    height: 35px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: bold;
    color: #fff;
    padding: 0 10px !important;
    margin: 0 !important;
}

.wrapper-compact > .input > .button {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #17c82e;
    color: #fff;
    position: absolute;
    right: 0;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    position: absolute;
    bottom: 0;
    right: -45px;
}

.wrapper-dropdown {
    position: relative;
}

    .wrapper-dropdown .wrapper-select {
        width: calc(100% - 45px);
    }

    .wrapper-dropdown .dropdown > .button {
        width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
        position: absolute;
        right: 0;
        bottom: 0;
        border-radius: 5px;
        cursor: pointer;
        user-select: none;
        padding: 4px;
    }

        .wrapper-dropdown .dropdown > .button i {
        }

    .wrapper-dropdown .dropdown .threads {
        display: none;
        width: 150px;
        position: absolute;
        right: 0;
        border-radius: 5px;
        background: #3a3b3d;
        overflow: hidden;
        z-index: 2;
    }

        .wrapper-dropdown .dropdown .threads .element {
            height: 35px;
            padding: 0 10px;
            cursor: pointer;
            transition: all .3s ease-in-out;
            font-weight: bold;
            color: #ddd;
            display: flex;
            align-items: center;
            font-size: 13px;
        }

            .wrapper-dropdown .dropdown .threads .element:hover {
                background: rgba(255, 255, 255, 0.05);
                transition: all .3s ease-in-out;
                color: #fff;
            }

.select {
    width: 100%;
    height: 35px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-radius: 5px;
    font-size: 13px;
    line-height: 35px;
    padding: 0 10px;
    position: relative;
    cursor: pointer;
}

    .select .input-select {
        font-weight: bold;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .select .options {
        display: none;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 5px;
        background: #26292f;
        overflow: hidden;
        z-index: 2;
    }

        .select .options .disabled {
            font-weight: bold;
            padding: 0 10px;
            color: rgba(255, 255, 255, 0.37);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .select .options .element {
            padding: 0 10px;
            cursor: pointer;
            transition: all .3s ease-in-out;
            font-weight: bold;
            color: #ddd;
            display: flex;
            align-items: center;
        }

            .select .options .element .circle {
                width: 8px;
                height: 8px;
                background: #ddd;
                border-radius: 50%;
                margin-right: 10px;
            }

            .select .options .element:hover {
                background: rgba(255, 255, 255, 0.05);
                transition: all .3s ease-in-out;
                color: #fff;
            }

        .select .options .filter {
            position: relative;
            width: auto;
            height: 35px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 5px;
            margin: 10px;
        }

            .select .options .filter i {
                width: 35px;
                position: absolute;
                top: 0;
                left: 0;
                line-height: 35px;
                font-size: 18px;
                display: flex;
                justify-content: center;
            }

            .select .options .filter input {
                height: 33px !important;
                box-sizing: border-box !important;
                border: 0 !important;
                box-shadow: none !important;
                font-size: 13px !important;
                font-weight: bold;
                color: #fff;
                padding-left: 35px !important;
                padding-right: 15px !important;
            }

.wrapper-table .table thead {
    color: #9d9d9d;
}

.wrapper-table .table tbody {
    /*color: #79787f;*/
    color: #e3e3e3;
    font-weight: bold;
}

    .wrapper-table .table tbody tr.active {
        cursor: pointer;
        transition: all .3s ease-in-out;
    }

        .wrapper-table .table tbody tr.active:hover {
            background: #33353c;
            color: #fff;
            transition: all .3s ease-in-out;
        }
        .wrapper-table .table tbody tr.no-hover:hover{
            background: transparent;
        }
    .wrapper-table .table tbody tr {
        background: transparent;
    }
/* proceso ya iniciado (no editable): sus filas no son clickeables → sin manita ni highlight */
.wrapper-table .paletas-table.read-only tbody tr.active {
    cursor: default;
}
    .wrapper-table .paletas-table.read-only tbody tr.active:hover {
        background: transparent;
        color: #e3e3e3;
    }

.wrapper-table .paletas-table tbody tr.active.editing {
    background: rgba(74, 158, 255, .12);
    box-shadow: inset 3px 0 0 #4a9eff;
}
    .wrapper-table .table tbody tr svg {
        fill: white;
        transition: all .3s ease-in-out;
    }

    .wrapper-table .table tbody tr:hover svg {
        fill: white;
        transition: all .3s ease-in-out;
    }

.wrapper-search label {
    display: block;
    padding-left: 10px;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 12px !important;
}

.search {
    width: 100%;
    height: 35px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-radius: 5px;
    position: relative;
}

    .search input {
        height: 33px !important;
        box-sizing: border-box !important;
        border: 0 !important;
        box-shadow: none !important;
        font-size: 13px !important;
        font-weight: bold;
        color: #fff;
        padding-left: 35px !important;
        padding-right: 15px !important;
        margin-bottom: 0 !important;
    }

    .search i {
        width: 35px;
        position: absolute;
        top: 0;
        left: 0;
        line-height: 35px;
        font-size: 18px;
        display: flex;
        justify-content: center;
    }

.wrapper-table .table table tr th, .wrapper-table .table table tr td {
    padding: 10px 10px;
}
    .wrapper-table .table table tr th .header{
        display: flex;
        align-items: center;
    }
        .wrapper-table .table table tr th .header.disabled {
            color: #79787f;
        }
        .wrapper-table .table table tr th .header .circle {
            display: none;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 5px;
        }
        .wrapper-table .table table tr th .header .circle.active {
            display: block;
        }
.controlling table tbody tr:last-child {
    border: 0;
}

.subtable table tbody tr:last-child {
    border: 0;
}

.status {
    display: flex;
    align-items: center;
}

    .status .circle {
        width: 8px;
        height: 8px;
        background: #79787f;
        border-radius: 50%;
        margin-right: 5px;
    }
.role {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .05);
    border-radius: 5px;
    padding: 0 10px;
    height: 30px;
}
    .role i{
        font-size: 19px;
        margin-right: 10px;
    }
.operator {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .operator .circle {
        width: 30px;
        height: 30px;
        background: rgba(255, 255, 255, .1);
        color: #c5c3c3;
        border-radius: 50%;
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
    }

        .operator .circle img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }
.pageview {
    display: flex;
    align-items: center;
    width: max-content;
    height: 35px;
    line-height: 35px;
    font-weight: 500;
    background: #287bff;
    /*color: #e1e1e1;*/
    color: white;
    font-size: 13px;
    border-radius: 7px;
    cursor: pointer;
    user-select: none;
    transition: all .3s ease-in-out;
    padding-right: 10px;
    margin-bottom: 10px;
}
    .pageview i {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 20px;
        text-align: center;
        transition: all .3s ease-in-out;
    }
.check {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .check .circle {
        width: 8px;
        height: 8px;
        background: #79787f;
        border-radius: 50%;
        margin-right: 5px;
    }

    .check .data {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .check svg {
        width: 20px;
        height: 20px;
        fill: #79787f;
        margin-right: 5px;
    }

    .check i {
        font-size: 19px;
        margin-right: 5px;
    }

.pallets {
    display: flex;
    align-items: center;
    text-decoration: none;
    position: relative;
}
    .pallets .notification {
        position: absolute;
        top: -1px;
        left: 21px;
        width: 8px;
        height: 8px;
        background: #3985ff;
        border-radius: 50%;
    }
    .pallets .squart {
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .pallets .circle {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
    }

    .pallets .squart svg {
        width: 15px;
        height: 15px;
        fill: #79787f;
    }

    .pallets .squart i {
        /*color: #79787f;*/
        color: white;
        font-size: 20px;
    }
.disabled .pallets .squart i {
    color: #79787f
}
    .pallets .data {
        line-height: 1;
        font-weight: bold;
    }

.offset {
    display: flex;
    align-items: center;
}

    .offset .squart {
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #4e9522;
        border-radius: 7px;
        margin-right: 8px;
    }

        .offset .squart svg {
            width: 17px;
            height: 17px;
            fill: #fff;
        }
.revoked {

}
    .revoked .flex {
        color: #79787f;
    }
        .revoked .flex i {
            color: #79787f;
        }
        .revoked .flex img {
            filter: grayscale(1);
        }
tr.dragging {
    background-color: rgba(255, 255, 255, .05) !important;
    opacity: 1 !important;
}
.no-hover tbody tr:hover {
    background-color: inherit !important;
}
td {
    border-radius: 0;
}
.flex {
    display: flex;
    align-items: center;
    white-space: nowrap;
}
    .flex.disabled {
        color: #79787f;
    }
    .flex.disabled svg{
        fill: #79787f !important;
    }
        .flex.disabled img {
            filter: grayscale(100%);
        }
.center {
    justify-content: center;
}
.empty {
    display: flex;
    /*width: 100px;
    height: 10px;*/
    background: rgba(255, 255, 255, .05);
    border-radius: 3px;
}
.empty-top {
    margin-top: 5px;
}
.empty-bottom {
    margin-bottom: 5px;
}
.empty-small {
    width: 30px;
}
.empty-small {
    width: 30px;
}

.empty-table-small {
    width: 40px;
    height: 10px;
}

.empty-table-medium {
    width: 80px;
    height: 10px;
}

.empty-table-large {
    width: 150px;
    height: 10px;
}
/*  LA TABLA MIDE LO MISMO CON LA HOJA ABIERTA QUE CERRADA

    Habia un SetPaletasHeight() que le escribia el max-height EN LINEA cada vez que se abria o
    cerraba una hoja -- 100dvh menos 540, 570 o 524 segun cual --, para que ninguna fila quedara
    tapada. Eran alturas de hoja escritas a mano, y las hojas ya no miden eso: crecen con los
    componentes de la fruta y arriba tienen tope de 100dvh. En una pantalla baja la resta se iba
    en negativo y la tabla desaparecia.

    Ahora la hoja se apoya encima y la tabla escrolea por debajo, que es lo que hace el resto de
    la pantalla. */
.controlling {
    overflow-x: auto;
    max-height: calc(100dvh - 144px);
}

.component-measurements {
    overflow-x: auto;
    max-height: 814.4px;
}
    .component-measurements thead {
        position: sticky;
        top: 0;
        background: #1c1d22;
    }
.max-height {
    max-height: 100% !important;
}

.reduce {
    max-height: 273px;
}

.subtable {
    overflow-x: auto;
}

.wrapper-button {
    display: inline-block;
    /*margin-bottom: 10px;*/
}

    .wrapper-button .button {
        display: flex;
        width: 40px;
        height: 40px;
        line-height: 40px;
        justify-content: center;
        align-items: center;
        background: #287bff;
        color: #fff;
        border-radius: 50%;
        font-weight: bold;
        font-size: 13px;
        cursor: pointer;
        user-select: none;
    }

        .wrapper-button .button.disabled,
        .wrapper-button .button.submitting {
            opacity: .4;
            cursor: not-allowed;
            pointer-events: none;
        }

        .wrapper-button .button i {
            /*font-size: 21px;*/
            height: 40px;
            line-height: 40px;
            color: white;
        }

        .wrapper-button .button .text {
            line-height: inherit;
            margin-top: -1px;
        }

/* Spinner de "enviando" generico y reusable. DispatchLock() en site.js le
   pone .is-loading al elemento que disparo la accion (.button, .stack,
   .element, etc.) y le inyecta adentro el <div class="dispatch-loading">.
   Mientras dura la peticion se tapa TODO el contenido del elemento: iconos,
   .title, .text, svg y texto suelto (botones como
   <div class="button">Confirmar</div> no tienen ningun hijo que ocultar,
   por eso ademas el color transparente).
   Se usa una clase propia y no .loading porque ese nombre ya esta tomado por
   los spinners de los filtros y de Sedes, con reglas mas especificas que le
   ganaban a esta y dejaban el spinner invisible. */
.is-loading {
    position: relative;
    cursor: wait;
    pointer-events: none;
    color: transparent !important;
}

    .is-loading > *:not(.dispatch-loading) {
        visibility: hidden;
    }

    .is-loading > .dispatch-loading {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, .25);
        border-top: 2px solid #ffffff;
        animation: rotate-centered .8s infinite linear;
        background: transparent;
        box-sizing: border-box;
    }

.attachment {
    margin-top: 15px;
    margin-bottom: 15px;
}

.attachment-horizontal {
    position: relative;
    padding-right: 96px;
    margin-bottom: 0;
}

.attachment .action {
    background: rgba(255,255,255,.05);
    border-radius: 5px;
    position: relative;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 12px;
    padding-right: 55px;
    min-height: 55px;
}

    .attachment .action .title {
        height: 35px;
        line-height: 1;
        position: relative;
        padding-left: 28px;
        white-space: nowrap;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
    }
    .attachment-horizontal .action {
        min-height: 86px;
    }

        .attachment-horizontal .action .title {
            height: 30px;
            min-height: 100%;
        }
    .attachment .action .subtitle {
        color: #79787f;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-weight: 500;
        text-overflow: ellipsis;
        padding-top: 3px;
        line-height: 1;
    }
    .attachment-horizontal .action .subtitle {
        padding-top: 5px;
        line-height: 1.2;
    }
    .attachment .action .upload {
        width: 35px;
        height: 35px;
        border-radius: 5px;
        background: #214fa3;
        color: #8fc1f7;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        user-select: none;
    }
        .attachment .action .upload i {
            font-size: 22px;
        }
    .attachment .action .title img {
        height: 30px;
        object-fit: contain;
        display: block;
        margin-right: 10px;
        float: left;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }

.attachment-horizontal .preview {
    width: 86px !important;
    height: 86px !important;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
}

    .attachment-horizontal .preview img {
        width: 100%;
        height: 100%;
    }

.attachment .preview {
    width: 100%;
    background: rgba(255,255,255,.05);
    border-radius: 5px;
}

    .attachment .preview img {
        width: 100%;
        object-fit: contain;
        border-radius: 5px;
    }

.attachment-vertical .preview {
    margin-bottom: 15px;
    background: white;
}

    .attachment-vertical .preview img {
        display: block;
        object-fit: contain;
        height: 70px;
    }

.attachment-horizontal .preview .empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 10px;
    color: #79787f;
}

.attachment-horizontal .remove-image {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #a32121;
    color: #f7c1c1;
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -6px;
    right: -6px;
    cursor: pointer;
    user-select: none;
}

    .attachment-horizontal .remove-image.show {
        display: flex;
    }

    .attachment-horizontal .remove-image i {
        font-size: 14px;
    }

.col-left {
    padding-left: 0 !important;
}

.col-right {
    padding-right: 0 !important;
}

.validation {
    display: none;
    font-size: 12px;
    padding: 3px 10px;
    padding-bottom: 0;
    font-weight: bold;
    color: #c32828;
    line-height: 1.1;
}

.text-overflow {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top {
    margin-top: 10px;
}

#materialbox-overlay {
    background-color: #23262c;
}
/* Log In */
.wallpaper {
    background: #1a1d24;
    /*background: linear-gradient(180deg, #1a1d24 30%, #1153a8) fixed;*/
}

.login {
    width: 100%;
    min-height: 100svh;
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    z-index: 1;
    overflow-x: hidden;
}

    .login:before {
        content: '';
        background-color: transparent;
        background-image: radial-gradient(37.88% 68.62% at 50% 0, rgb(10 66 233 / 40%) 0, rgb(0 124 71 / 0%) 80%), radial-gradient(10% 10% at 50% 0, rgb(10 17 233 / 0%) 0, rgb(0 124 108 / 34%) 90%, rgba(0, 124, 71, 0) 0), radial-gradient(100% 28.09% at 100% 10%, rgb(10 87 233 / 24%) 0, rgb(0 55 124 / 9%) 80%, rgba(0, 124, 71, 0) 100%), linear-gradient(180deg, rgb(0 89 124 / 22%) 35.79%, rgb(0 124 71 / 0%) 80%, transparent), radial-gradient(74.84% 135.56% at 100% 10%, rgb(0 124 71 / 0%) 0, transparent 80%);
        background-repeat: no-repeat;
        background-size: 100%;
        height: 100svh;
        z-index: -2;
        filter: blur(20px);
        position: absolute;
        top: -70px;
        left: -50px;
        right: -50px;
        width: calc(100% + 100px);
        overflow-x: hidden;
    }

    .login .active {
        width: auto;
        border-radius: 50%;
        transition: all .3s ease-in-out;
    }

        .login .active .wrapper-logo {
            margin-bottom: 0;
            justify-content: center;
        }

            .login .active .wrapper-logo .logo {
                margin-right: 0;
                padding: 9px;
            }

                .login .active .wrapper-logo .logo img {
                    /*display: none;*/
                }

            .login .active .wrapper-logo .loading {
                background: transparent;
                position: absolute;
                height: 49px;
                width: 49px;
                border-radius: 50%;
                border: 4px solid rgba(255, 255, 255, 0.2);
                border-top: 4px #265af6 solid;
                animation: rotate 1.3s infinite linear;
            }

            .login .active .wrapper-logo .title {
                display: none;
            }

        .login .active form {
            display: none;
        }

    .login section {
        width: 350px;
        background: rgba(0,0,0,.15);
        padding: 15px;
        border-radius: 8px;
        transition: all .3s ease-in-out;
    }

    .login .wrapper-logo {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 10px;
        position: relative;
    }

        .login .wrapper-logo .logo {
            width: 45px;
            height: 45px;
            background: rgba(255, 255, 255, .05);
            border-radius: 50%;
            padding: 8px;
            position: relative;
            margin-right: 10px;
            user-select: none;
        }

            .login .wrapper-logo .logo img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        .login .wrapper-logo .title {
            font-weight: 600;
            color: white;
            font-size: 1.2rem;
            line-height: 1;
        }

            .login .wrapper-logo .title strong {
                font-weight: 600;
            }

            .login .wrapper-logo .title span {
                font-weight: 600;
                color: #3770ff;
                padding-left: 2px;
            }

    .login .subtitle {
        color: #9e9e9e;
        font-size: 0.8rem;
        font-weight: bold;
        line-height: 1.2;
        padding: 0 10px;
        margin-bottom: 15px;
    }

    .login section label {
        padding-left: 10px;
        font-weight: bold;
    }

    .login .input {
        margin-bottom: 10px;
        position: relative;
    }

        .login .input i {
            position: absolute;
            top: 10px;
            left: 7.5px;
            user-select: none;
            font-size: 21px;
            color: #9e9e9e;
            transition: all .3s ease-in-out;
        }

        .login .input input {
            background: rgba(255,255,255,.05);
            border-bottom: 0 !important;
            box-shadow: none !important;
            height: 40px;
            margin: 0;
            padding: 0 10px;
            padding-left: 35px;
            box-sizing: border-box;
            color: white;
            font-size: 13px;
            border-radius: 5px;
            -webkit-tap-highlight-color: transparent;
            transition: all .3s ease-in-out;
        }

            .login .input input::placeholder {
                color: #9e9e9e;
            }

        .login .input:focus-within input {
            background: rgba(255,255,255,.08);
            transition: all .3s ease-in-out;
        }

        .login .input:focus-within i {
            transition: all .3s ease-in-out;
            color: #5fa2dd;
        }

        .login .input .validate {
            display: block;
            font-weight: bold;
            padding: 0 10px;
            font-size: 12px;
            color: #c7a540;
            line-height: 1;
            margin-top: 7px;
        }

    .login .match-up {
        position: relative;
        padding-right: 50px;
    }

    .login .button {
        width: max-content;
        display: block;
        position: relative;
        background: linear-gradient(118deg, #0f357b, #2155d8);
        border-radius: 5px;
        margin: auto;
        margin-top: 15px;
    }

        .login .button img {
            width: 30px;
            height: 30px;
            transform: rotate(23deg);
            position: absolute;
            top: 4px;
            right: 8px;
        }

        .login .button i {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 10px;
            color: white;
        }

        .login .button input {
            position: relative;
            width: 100%;
            height: 40px;
            background: transparent;
            color: white;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            border: 0;
            padding: 0 15px;
            padding-right: 45px;
            font-weight: bold;
            font-size: 13px;
            cursor: pointer;
            user-select: none;
            margin: auto;
            z-index: 1;
        }

        .login .button .loading {
            display: none;
            background: #333;
            position: absolute;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            border: 4px solid rgba(255, 255, 255, 0.2);
            border-top: 4px #2cff76 solid;
            animation: rotate 1.3s infinite linear;
        }

    .login .switch label input[type=checkbox]:checked + .lever:after {
        background-color: white;
    }

    .login .switch label input[type=checkbox]:checked + .lever {
        background-color: #0096f1;
        /*box-shadow: 0px 0px 20px 1px #0096f1;*/
    }

    .login .switch .lever {
        margin: 0;
        border-radius: 5px;
    }

    .login .check {
        position: relative;
    }

        .login .check .avatar {
            width: 35px;
            height: 35px;
            background: rgba(0,0,0,.1);
            border-radius: 5px;
            margin-right: 10px;
        }

        .login .check .content {
            line-height: 1;
            font-size: 13px;
        }

            .login .check .content .title {
                color: #0096f1;
                font-weight: 800;
                letter-spacing: -0.3px;
                padding-bottom: 3px;
            }

            .login .check .content .subtitle {
                color: #9e9e9e;
                font-size: 12px;
                font-weight: bold;
            }

        .login .check .switch {
            position: absolute;
            right: 0;
        }

        .login .check svg {
            width: 100%;
            height: 100%;
            padding: 5px;
        }
/*.login .button{
        display: block;
        outline: none;
        border: 0;
        width: 150px;
        height: 35px;
        border-radius: 5px;
        margin: 15px auto;
        font-weight: bold;
        cursor: pointer;
        background: #1e77e5;
        color: #fff;
        font-size: 12px;
        text-transform: uppercase;
    }*/

.validation-summary ul {
}

    .validation-summary ul li {
        display: flex;
        width: max-content;
        height: 40px;
        background: rgba(255,255,255,.05);
        color: white;
        font-weight: bold;
        border-radius: 5px;
        align-items: center;
        padding: 0 10px;
        font-size: 12px;
        margin: auto;
        margin-top: 15px;
    }

.automation {
}

/* Boton de la columna Accion. Antes solo llevaba waves-red / waves-green, que en
   Materialize colorea unicamente el ripple del click: el boton se veia igual
   estando prendido o apagado. Se colorea SOLO EL ICONO, sin tocar el fondo del
   boton. Los colores salen de General.Estados para que la pantalla hable el
   mismo idioma que el resto (verde Iniciado, rojo Anulado, ambar Pausado). */
.automation .automation-toggle i {
    transition: color .2s ease-in-out;
}

/* Apagado y listo para iniciar: los cuatro parametros estan definidos. */
.automation .automation-toggle.start i {
    color: #4CAF50;
}

/* Prendido: la accion disponible es detener. */
.automation .automation-toggle.stop i {
    color: #F44336;
}

/* Apagado pero sin configurar. No se deshabilita a proposito: el click muestra
   que parametro falta, y el title lo adelanta al pasar por encima. Si estuviera
   deshabilitado el usuario no tendria forma de saber por que no arranca. */
.automation .automation-toggle.blocked {
    cursor: help;
}

    .automation .automation-toggle.blocked i {
        color: #5f636d;
    }

    .automation .automation-toggle.blocked:hover i {
        color: #f9ea34;
    }

.wrapper-switch {
    width: 100%;
}

    .wrapper-switch .target {
        width: 100%;
        height: 35px;
        line-height: 35px;
        background: #dfdfdf;
        border-radius: 5px;
        padding: 0 10px;
        font-weight: bold;
        font-size: 13px;
        color: #686868;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        padding-right: 50px;
        text-overflow: ellipsis;
        position: relative;
    }

    .wrapper-switch strong {
        font-weight: bold;
    }

    .wrapper-switch .switch {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 15px;
    }

        .wrapper-switch .switch label .lever {
            margin: 0;
            height: 4px;
        }

            .wrapper-switch .switch label .lever:before, .wrapper-switch .switch label .lever:after {
                width: 16px;
                height: 16px;
                top: -6.5px;
                outline: 4px solid #1a1d24;
                box-shadow: none;
                background-color: #898989;
            }

.automation .wrapper-switch {
    position: relative;
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    background: rgba(255, 255, 255, .05);
    border-radius: 5px;
}

.automation > .label {
    display: block;
    height: 18px;
    padding-left: 10px;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 0.8rem;
    color: #9e9e9e;
}

.automation .wrapper-switch .switch {
    left: 10px;
    right: 10px;
}

    .automation .wrapper-switch .switch label {
        font-weight: bold;
        margin-right: 40px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;
    }

        .automation .wrapper-switch .switch label .lever {
            margin-left: 5px;
        }

        .automation .wrapper-switch .switch label .lever {
            background: rgba(255,255,255,0.05);
            position: absolute;
            top: 50%;
            right: 0;
        }

.automation .switch label input[type=checkbox]:checked + .lever {
    background-color: #96fb86;
}

.automation .wrapper-switch .switch label .lever:before, .automation .wrapper-switch .switch label .lever:after {
    outline: 4px solid #23262c;
}

.automation .wrapper-switch .switch label input[type=checkbox]:checked + .lever:after {
    background-color: #17c82e;
}

.wrapper-message {
}
    .wrapper-message.success .message {
        background: linear-gradient(89deg, #21d84e -15%, #1c1d22 40%);
    }
        .wrapper-message.success .message .icon i {
            color: #35ff4c;
        }
    .wrapper-message.error .message {
        background: linear-gradient(89deg, #d82121 -15%, #1c1d22 40%);
    }

        .wrapper-message.error .message .icon i {
            color: #ff7272;
        }
    .wrapper-message .message {
        position: fixed;
        right: 15px;
        bottom: 15px;
        background-color: #1c1d22;
        border-radius: 7px;
        height: 75px;
        padding-left: 65px;
        padding-right: 60px;
        transform: translateX(calc(100% + 15px));
        transition: all .3s ease-in-out;
        z-index: 10000;
    }

        .wrapper-message .message .icon {
            position: absolute;
            top: 50%;
            left: 15px;
            background: rgba(0, 0, 0, .25);
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 35px;
            height: 35px;
            transform: translateY(-50%);
        }

            .wrapper-message .message .icon i {
                font-size: 19px;
            }

        .wrapper-message .message .content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 75px;
            font-size: 14px;
        }

            .wrapper-message .message .content .title {
                color: white;
                font-weight: bold;
                line-height: 1;
            }

            .wrapper-message .message .content .subtitle {
                color: #989898;
                line-height: 1;
                margin-top: 3px;
                font-weight: 500;
            }

        .wrapper-message .message .button {
            position: absolute;
            top: 50%;
            right: 15px;
            background: rgba(255, 255, 255, .1);
            color: white;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 30px;
            height: 30px;
            transform: translateY(-50%);
            cursor: pointer;
            user-select: none;
        }
.wrapper-confirmation {
}

/*    .wrapper-message.success .message {
        background: linear-gradient(89deg, #21d84e -15%, #1c1d22 40%);
    }

        .wrapper-message.success .message .icon i {
            color: #35ff4c;
        }

    .wrapper-message.error .message {
        background: linear-gradient(89deg, #d82121 -15%, #1c1d22 40%);
    }

        .wrapper-message.error .message .icon i {
            color: #ff7272;
        }*/

    .wrapper-confirmation .confirmation {
        position: fixed;
        right: 15px;
        bottom: 15px;
        background-color: #1c1d22;
        border-radius: 7px;
        min-height: 75px;
        padding-left: 65px;
        padding-right: 15px;
        transform: translateX(calc(100% + 15px));
        transition: all .3s ease-in-out;
        z-index: 10000;
    }

        .wrapper-confirmation .confirmation .icon {
            position: absolute;
            top: 15px;
            left: 15px;
            background: rgba(0, 0, 0, .25);
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 35px;
            height: 35px;
            /*transform: translateY(-50%);*/
        }

            .wrapper-confirmation .confirmation .icon i {
                font-size: 19px;
                color: #f9ea34;
            }
        .wrapper-confirmation .confirmation.closing .icon i {
            color: #3690f1;
        }
        .wrapper-confirmation .confirmation .content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 65px;
            font-size: 14px;
        }
        .wrapper-confirmation .confirmation.large .content {
            height: auto;
            padding-top: 15px;
        }
            .wrapper-confirmation .confirmation .content .title {
                color: white;
                font-weight: bold;
                line-height: 1;
                padding-left: 6px;
            }
        .wrapper-confirmation .confirmation.large .content .title {
            padding-left: 10px;
            font-size: 12px;
        }
        .wrapper-confirmation .confirmation.closing .content .title {
            color: #3690f1;
        }
            .wrapper-confirmation .confirmation .content .subtitle {
                color: #989898;
                line-height: 1;
                margin-top: 3px;
                font-weight: 500;
            }
        .wrapper-confirmation .confirmation.large .content .subtitle {
            padding-left: 5px;
            padding-bottom: 10px;
            font-size: 12px;
        }
        .wrapper-confirmation .confirmation .wrapper-button {
            display: flex;
            justify-content: end;
            margin-bottom: 15px;
            gap: 15px;
        }
            .wrapper-confirmation .confirmation .wrapper-button .button {
                width: max-content;
                border-radius: 5px;
                padding: 0 10px;
                height: 35px;
                line-height: 35px;
                background: rgba(255, 255, 255, .07);
                color: #c1c1c1;
            }
                .wrapper-confirmation .confirmation .wrapper-button .button.success {
                    color: #f9ea34;
                }
        .wrapper-confirmation .confirmation.closing .wrapper-button .button.success {
            color: #3690f1;
        }
.wrapper-notification {
}

    .wrapper-notification .notification {
        position: fixed;
        right: 15px;
        bottom: 15px;
        background-color: #1c1d22;
        border-radius: 7px;
        min-height: 75px;
        padding-left: 65px;
        padding-right: 15px;
        transform: translateX(calc(100% + 15px));
        transition: all .3s ease-in-out;
        z-index: 10000;
    }

        .wrapper-notification .notification .icon {
            position: absolute;
            top: 15px;
            left: 15px;
            background: rgba(0, 0, 0, .25);
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 35px;
            height: 35px;
        }

            .wrapper-notification .notification .icon i {
                font-size: 19px;
                color: #f9ea34;
            }

        .wrapper-notification .notification .content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 65px;
            font-size: 13px;
        }

            .wrapper-notification .notification .content .title {
                color: #f9ea34;
                font-weight: 500;
                line-height: 1;
            }

            .wrapper-notification .notification .content .subtitle {
                color: #989898;
                line-height: 1;
                margin-top: 3px;
                font-weight: 500;
            }

        .wrapper-notification .notification .wrapper-button {
            display: flex;
            justify-content: end;
            margin-bottom: 15px;
            gap: 15px;
        }

            .wrapper-notification .notification .wrapper-button .button {
                width: max-content;
                border-radius: 5px;
                padding: 0 10px;
                height: 35px;
                line-height: 35px;
                background: rgba(255, 255, 255, .07);
                color: #c1c1c1;
            }

                .wrapper-notification .notification .wrapper-button .button.success {
                    color: #f9ea34;
                }
.wrapper-popup {
    position: fixed;
    bottom: 15px;
    right: 15px;
    display: flex;
    z-index: 9999;
    transition: all .3s ease-in-out;
    transform: translateX(calc(100% + 15px));
}
    .wrapper-popup .popup {
        width: max-content;
        min-height: 35px;
        background: #2d2e32;
        color: #e3e3e3;
        border-radius: 5px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        font-size: 13px;
    }
    .wrapper-popup.vertical {
        flex-direction: column;
    }
    .wrapper-popup.vertical .popup{
        flex-direction: column;
        align-items: start;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
        .wrapper-popup .popup .content {
            display: flex;
        }
            .wrapper-popup .popup .content > span {
                height: 35px;
                line-height: 35px;
                margin-right: 10px;
                font-weight: 500;
                color: #989595;
            }
            .wrapper-popup .popup .content .indicator {
                display: flex;
                height: 35px;
                line-height: 35px;
            }
    .wrapper-popup .popup .control {
        display: none;
    }
    .wrapper-popup .popup .control .header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
    }
        .wrapper-popup .popup .control .header .input {
            display: flex;
            height: 35px;
            align-items: center;
            font-weight: 500;
            color: #989595;
        }
        .wrapper-popup .popup .control .header .wrapper-action {
            display: flex;
        }
            .wrapper-popup .popup .control .header .wrapper-action .action {
                display: flex;
                width: max-content;
                background: rgba(255, 255, 255, .1);
                border-radius: 5px;
                margin-right: 10px;
                height: 35px;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                user-select: none;
                font-weight: 500;
            }
                .wrapper-popup .popup .control .header .wrapper-action .action:last-child {
                    margin: 0;
                }
                .wrapper-popup .popup .control .header .wrapper-action .action span {
                    padding: 0 10px;
                }
                .wrapper-popup .popup .control .header .wrapper-action .action i {
                    width: 35px;
                    height: 35px;
                    line-height: 35px;
                    text-align: center;
                    font-size: 20px;
                }
        .wrapper-popup .popup .control .wrapper-align {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 15px;
        }
            .wrapper-popup .popup .control .wrapper-align .action {
                width: 35px;
                height: 35px;
                background: rgba(255, 255, 255, .1);
                border-radius: 5px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                user-select: none;
            }
                .wrapper-popup .popup .control .wrapper-align .action:hover {
                    background: rgba(255, 255, 255, .18);
                }
                .wrapper-popup .popup .control .wrapper-align .action i {
                    font-size: 19px;
                    color: #d7d7d7;
                }
    .wrapper-popup .popup .upload {
        display: none;
        width: 280px;
    }

        .wrapper-popup .popup .upload .header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }

            .wrapper-popup .popup .upload .header .input {
                display: flex;
                height: 35px;
                align-items: center;
                font-weight: 500;
                color: #989595;
            }

            .wrapper-popup .popup .upload .header .wrapper-action {
                display: flex;
            }

                .wrapper-popup .popup .upload .header .wrapper-action .action {
                    display: flex;
                    width: max-content;
                    background: rgba(255, 255, 255, .1);
                    border-radius: 5px;
                    margin-right: 10px;
                    height: 35px;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    user-select: none;
                    font-weight: 500;
                }
                    .wrapper-popup .popup .upload .header .wrapper-action .action.for {
                        background: #287bff;
                        color: white;
                        font-weight: 500;
                        font-size: 13px;
                    }
                    .wrapper-popup .popup .upload .header .wrapper-action .action:last-child {
                        margin: 0;
                    }

                    .wrapper-popup .popup .upload .header .wrapper-action .action span {
                        padding: 0 10px;
                    }

                    .wrapper-popup .popup .upload .header .wrapper-action .action i {
                        width: 35px;
                        height: 35px;
                        line-height: 35px;
                        text-align: center;
                        font-size: 20px;
                    }
        .wrapper-popup .popup .upload .preview {
            width: 280px;
            height: 165px;
            margin-bottom: 15px;
        }
        .wrapper-popup .popup .upload .preview img{
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: rgba(255, 255, 255, .05);
            border-radius: 5px;
        }
        .wrapper-popup .popup .control .range {
            margin-bottom: 10px;
            width: 280px;
        }

        /* ROTULOS: el panel propio del diseñador.
           Mismo ancho que los sliders para que la columna del panel no se descuadre. Cada
           rotulo es una fila con su input y su boton de borrar: no depende de que haya algo
           seleccionado en el plano. */
        .wrapper-popup .popup .rotulos {
            width: 280px;
            display: none;
        }

            .wrapper-popup .popup .rotulos .header {
                display: flex;
                align-items: center;
                margin-bottom: 15px;
            }

                .wrapper-popup .popup .rotulos .header .input {
                    font-weight: 500;
                }

            .wrapper-popup .popup .rotulos .nuevo,
            .wrapper-popup .popup .rotulos .listado .fila .linea {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .wrapper-popup .popup .rotulos .nuevo {
                margin-bottom: 10px;
            }

            /* La fila del listado pasó a tener dos renglones -- el texto arriba, los dos colores
               abajo -- así que es una columna y el flex horizontal bajó a .linea. Con los dos
               renglones sueltos no se veía dónde termina un rótulo y empieza el siguiente: de ahí
               la línea divisoria. */
            .wrapper-popup .popup .rotulos .listado .fila {
                display: flex;
                flex-direction: column;
                gap: 8px;
                padding-bottom: 10px;
                margin-bottom: 10px;
                border-bottom: 1px solid rgba(255, 255, 255, .06);
            }

                .wrapper-popup .popup .rotulos .listado .fila:last-child {
                    padding-bottom: 0;
                    margin-bottom: 0;
                    border-bottom: none;
                }

            .wrapper-popup .popup .rotulos input[type="text"] {
                flex: 1 1 auto;
                min-width: 0;
                height: 40px;
                box-sizing: border-box;
                margin: 0;
                padding: 0 10px;
                background: rgba(255, 255, 255, .05);
                border: 1px solid rgba(255, 255, 255, .1);
                border-radius: 5px;
                color: #e3e3e3;
                font-size: 13px;
            }

                .wrapper-popup .popup .rotulos input[type="text"]:focus {
                    border-color: #287bff;
                    outline: none;
                }

            .wrapper-popup .popup .rotulos .action {
                flex: 0 0 auto;
                width: 40px;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgba(255, 255, 255, .1);
                border-radius: 5px;
                cursor: pointer;
                user-select: none;
            }

                .wrapper-popup .popup .rotulos .action i {
                    font-size: 20px;
                }

                .wrapper-popup .popup .rotulos .nuevo .agregar {
                    background: #287bff;
                    color: #ffffff;
                }

                .wrapper-popup .popup .rotulos .listado .fila .borrar:hover {
                    background: rgba(244, 67, 54, .25);
                    color: #ff8a80;
                }

            /* Marca el rotulo que todavia no tiene coordenadas: existe pero el plano no lo
               dibuja hasta que se lo arrastre y se guarde la posicion. */
            .wrapper-popup .popup .rotulos .listado .fila .aviso {
                flex: 0 0 auto;
                width: 24px;
                color: #ffb74d;
                display: flex;
                justify-content: center;
                align-items: center;
            }

                .wrapper-popup .popup .rotulos .listado .fila .aviso i {
                    font-size: 18px;
                }

            /* EL COLOR DEL ROTULO

               Dos <input type="color"> nativos. Se eligió el nativo y no una paleta propia
               porque el selector del sistema ya trae el gotero, y con el gotero se saca el
               color exacto de un chip de estado que ya está en el plano -- que es justamente
               para qué se pidió esto.

               El input nativo viene con marco y padding propios en cada motor. Los tres
               pseudoelementos de abajo son los que lo dejan como un cuadradito de color y no
               como un color chico centrado en una caja gris. */
            .wrapper-popup .popup .rotulos .listado .fila .colores {
                display: flex;
                align-items: center;
                gap: 8px;
            }

                .wrapper-popup .popup .rotulos .listado .fila .colores .swatch {
                    flex: 1 1 0;
                    min-width: 0;
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    color: #a4a4a4;
                    font-size: 12px;
                    cursor: pointer;
                    user-select: none;
                }

                    .wrapper-popup .popup .rotulos .listado .fila .colores .swatch input[type="color"] {
                        flex: 0 0 auto;
                        width: 28px;
                        height: 28px;
                        padding: 0;
                        margin: 0;
                        box-sizing: border-box;
                        background: transparent;
                        border: 1px solid rgba(255, 255, 255, .15);
                        border-radius: 5px;
                        cursor: pointer;
                    }

                    .wrapper-popup .popup .rotulos .listado .fila .colores .swatch input[type="color"]::-webkit-color-swatch-wrapper {
                        padding: 0;
                    }

                    .wrapper-popup .popup .rotulos .listado .fila .colores .swatch input[type="color"]::-webkit-color-swatch {
                        border: none;
                        border-radius: 4px;
                    }

                    .wrapper-popup .popup .rotulos .listado .fila .colores .swatch input[type="color"]::-moz-color-swatch {
                        border: none;
                        border-radius: 4px;
                    }

                /* Fondo transparente. Es un tercer estado del mismo dato, no un color, así que
                   es un botón que se prende y no una opción del selector. Cuando está prendido
                   el selector de fondo no manda nada, y se atenúa para que se vea: sigue
                   clickeable a propósito, porque elegir un color es la forma de apagarlo. */
                .wrapper-popup .popup .rotulos .listado .fila .colores .transparencia {
                    width: 28px;
                    height: 28px;
                }

                    .wrapper-popup .popup .rotulos .listado .fila .colores .transparencia i {
                        font-size: 16px;
                    }

                    .wrapper-popup .popup .rotulos .listado .fila .colores .transparencia.activo {
                        background: #287bff;
                        color: #ffffff;
                    }

                .wrapper-popup .popup .rotulos .listado .fila .colores.sin-fondo .fondo-swatch {
                    opacity: .35;
                }

                /* Limpiar aparece solo si el rótulo tiene color propio: sin color no hay nada
                   que volver atrás, y un botón que no hace nada ocupa lugar y confunde. La clase
                   .propio la pone y la saca containers.js. */
                .wrapper-popup .popup .rotulos .listado .fila .colores .limpiar {
                    display: none;
                    width: 28px;
                    height: 28px;
                }

                .wrapper-popup .popup .rotulos .listado .fila .colores.propio .limpiar {
                    display: flex;
                }

                    .wrapper-popup .popup .rotulos .listado .fila .colores .limpiar i {
                        font-size: 16px;
                    }

                    .wrapper-popup .popup .rotulos .listado .fila .colores .limpiar:hover {
                        background: rgba(255, 255, 255, .18);
                        color: #ffffff;
                    }

            .wrapper-popup .popup .rotulos .listado .vacio {
                color: #a4a4a4;
                font-size: 13px;
                padding: 10px 0;
            }

    .wrapper-popup .popup .images {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-bottom: 15px;
    }
        .wrapper-popup .popup .images .grid {
            /* width: 33.33%;*/
        }
            .wrapper-popup .popup .images .grid .wrapper-contain {
            }
                .wrapper-popup .popup .images .grid .wrapper-contain .contain {
                    margin: 0;
                }
            .wrapper-popup .popup .images .grid.active {
            }
                .wrapper-popup .popup .images .grid.active .caption {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    transition: all .3s ease-in-out;
                }
                    .wrapper-popup .popup .images .grid.active .caption::before {
                        background: rgba(47, 44, 159, .7);
                        border-radius: 5px;
                        cursor: pointer;
                    }
            .wrapper-popup .popup .images .grid .caption {
                transition: all .3s ease-in-out;
            }
    .wrapper-popup .wrapper-button {
        display: flex;
    }
    .wrapper-popup.vertical .wrapper-button {
        padding: 0 10px;
        padding-bottom: 10px;
        background: #2d2e32;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
   
        .wrapper-popup.vertical .wrapper-button .button {
            margin-left: 0;
        }
    .wrapper-popup .wrapper-button .button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: max-content;
        height: 35px;
        background: rgba(255, 255, 255, 0.05);
        text-align: center;
        border-radius: 5px;
        margin: 0 10px;
        cursor: pointer;
        user-select: none;
    }
        .wrapper-popup .wrapper-button .button.image {
            background: rgba(31, 63, 107, 0.7)
        }
            .wrapper-popup .wrapper-button .button.image i {
                color: #228cff;
            }
        .wrapper-popup .wrapper-button .button.position {
            background: linear-gradient(89deg, #61900f, #21d84e);
            color: white;
        }
            .wrapper-popup .wrapper-button .button.position span {
                color: white;
            }
        .wrapper-popup .wrapper-button .button.custom {
            background: rgba(113, 85, 249, 0.35);
        }
            
        .wrapper-popup .wrapper-button .button i {
            font-size: 19px;
            line-height: 35px;
            text-align: center;
            width: 35px;
            height: 35px;
        }
            .wrapper-popup .wrapper-button .button span {
                padding-right: 10px;
                font-weight: 500;
                color: #e1e1e1;
            }
        .wrapper-popup .wrapper-button .button svg{
            width: 35px;
        }
    .wrapper-popup.vertical .wrapper-button .close {
        background: rgba(255, 255, 255, .1);
    }
        .wrapper-popup .wrapper-button .close {
            display: flex;
            justify-content: center;
            align-items: center;
            width: max-content;
            height: 35px;
            background: #2d2e32;
            text-align: center;
            border-radius: 5px;
            cursor: pointer;
            user-select: none;
        }

            .wrapper-popup .wrapper-button .close img {
                width: 40px;
                height: 40px;
                object-fit: cover;
                padding: 5px;
            }

            .wrapper-popup .wrapper-button .close i {
                width: 40px;
                height: 40px;
                font-size: 21px;
                color: #989595;
            }

            .wrapper-popup .wrapper-button .close span {
                color: #e1e1e1;
                font-size: 13px;
                font-weight: 500;
                padding: 0 10px;
            }

.wrapper-submenu .wrapper-button .button span {
    padding-right: 10px;
    font-weight: 500;
    color: #e1e1e1;
}

.wrapper-select .dropdown-content li .wrapper-product {
    display: flex;
    align-items: center;
}
.wrapper-select .dropdown-content li .wrapper-product .product {
    margin-right: 5px;
    padding-left: 35px;
}
.bottom {
    margin-bottom: 10px;
}

.unity {
    display: inline-block;
    color: #acacac;
    padding-left: 5px;
}

.color {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 1);
    /*border: 3px solid rgba(255, 255, 255, .15);*/
}

.container-color {
    margin-bottom: 17px;
}

    .container-color .label {
        display: block;
        padding-left: 10px;
        font-weight: bold;
        margin-bottom: 5px;
        font-size: 0.8rem;
        color: #9e9e9e;
    }

    .container-color .wrapper-color {
        position: relative;
    }

        .container-color .wrapper-color .content {
            background: rgba(255, 255, 255, .05);
            border-radius: 5px;
            width: calc(100% - 45px);
            height: 35px;
            line-height: 35px;
            font-size: 13px;
            font-weight: bold;
            color: #fff;
            padding: 0 10px;
            display: block;
        }

        .container-color .wrapper-color .outer-color {
            border-radius: 5px;
            overflow: hidden;
            position: absolute;
            top: 0;
            right: 0;
            width: 35px;
            height: 35px;
        }

        .container-color .wrapper-color input[type="color"] {
            width: 35px;
            height: 35px;
        }
.container-switch.lasted{
    margin-bottom: 15px;
}
.container-switch .wrapper-switch {
    position: relative;
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    background: rgba(255, 255, 255, .05);
    border-radius: 5px;
    transform: translateY(0);
    margin-bottom: 10px;
}

.container-switch > .label {
    display: block;
    height: 18px;
    padding-left: 10px;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 0.8rem;
    color: #9e9e9e;
}

.container-switch .wrapper-switch .switch {
    width: 100%;
    height: 35px;
    right: 0;
}

    .container-switch .wrapper-switch .switch label {
        display: block;
        font-weight: bold;
        margin-right: 5px;
        font-size: 12px;
        padding-right: 45px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .container-switch .wrapper-switch .switch strong {
        padding-left: 10px;
    }

    .container-switch .wrapper-switch .switch label input[type=checkbox]:checked + .lever {
        background-color: #8491c7;
    }

    .container-switch .wrapper-switch .switch label .lever {
        background: rgba(255,255,255,0.05);
        position: absolute;
        top: calc(50% + 1px);
        right: 10px;
        margin: 0;
        transform: translateY(-50%);
    }

        .container-switch .wrapper-switch .switch label .lever:before, .container-switch .wrapper-switch .switch label .lever:after {
            outline: 4px solid #2d2e32;
        }

    .container-switch .wrapper-switch .switch label input[type=checkbox]:checked + .lever:after {
        background-color: #3395ff;
    }

.images {
}

    .images .wrapper-contain {
        position: relative;
    }

        .images .wrapper-contain .contain {
            width: 100%;
            height: 200px;
            background: #222327;
            border-radius: 7px;
            cursor: pointer;
            z-index: 0;
            overflow: hidden;
            margin-bottom: 15px;
        }
            .images .wrapper-contain .contain .material-placeholder {
                height: 100% !important;
            }

            .images .wrapper-contain .contain .button {
                width: 40px;
                height: 40px;
                /*background: #47175a;
                color: #cd02ed;*/
                background: rgba(0, 0, 0, .5);
                color: #00a5ff;
                border-radius: 7px;
                position: absolute;
                top: 10px;
                right: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                user-select: none;
                cursor: pointer;
                z-index: 2;
            }

                .images .wrapper-contain .contain .button i {
                    font-size: 21px;
                }
        .images .wrapper-contain.disabled .contain .button {
            top: initial;
            bottom: 15px;
            right: 50%;
            transform: translateX(50%);
            background: rgba(255, 255, 255, .1);
        }
            .images .wrapper-contain.disabled .caption {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
            }
                .images .wrapper-contain.disabled .caption::before {
                    background: rgba(0, 0, 0, .9);
                    border-radius: 5px;
                }
                .images .wrapper-contain.disabled .caption .subtitle {
                    margin-top: 5px;
                }
            .images .wrapper-contain .contain img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
            .images .wrapper-contain .caption {
                width: 100%;
                position: absolute;
                left: 0;
                bottom: 0;
                padding: 10px;
                
            }
                .images .wrapper-contain .caption::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    background: rgba(0, 0, 0, .7);
                    z-index: 0;
                    width: 100%;
                    height: 100%;
                    border-bottom-left-radius: 5px;
                    border-bottom-right-radius: 5px;
                }
            .images .wrapper-contain .caption .title {
                font-weight: bold;
                font-size: 12px;
                color: white;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1;
                position: relative;
                z-index: 1;
            }

                .images .wrapper-contain .caption .subtitle {
                    font-weight: bold;
                    font-size: 12px;
                    color: #6f6f6f;
                    line-height: 1;
                    position: relative;
                    z-index: 1;
                }

            .images .wrapper-contain .caption .circle {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.15);
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 10px;
                right: 5px;
            }

                .images .wrapper-contain .caption .circle img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }

.bar {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
}

    .bar .element {
        display: inline-flex;
        height: 35px;
        padding: 0 10px;
        background: rgba(255, 255, 255, 0.05);
        color: #9b9b9b;
        border-radius: 5px;
        margin-right: 10px;
        align-items: center;
        font-size: 13px;
        font-weight: bold;
        cursor: pointer;
        user-select: none;
        transition: all .3s ease-in-out;
    }

    .bar .active {
        background: rgba(31, 47, 107, 0.7);
        color: #3690f1;
        transition: all .3s ease-in-out;
    }

    .bar .element:hover {
        background: rgba(31, 47, 107, 0.7);
        color: #3690f1;
        transition: all .3s ease-in-out;
    }

.layer-bar {
    display: none;
}

.wrapper-floating {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

    .wrapper-floating .button {
        width: 45px;
        height: 45px;
        background-color: #301ca1;
        background: linear-gradient(45deg, #23278b, #186eab);
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        user-select: none;
        cursor: pointer;
        border-radius: 50%;
    }

        .wrapper-floating .button i {
        }

.wrapper-chart canvas {
    position: relative;
}

.tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    border-radius: 5px;
    padding: 10px;
    display: none;
    pointer-events: none;
    z-index: 1000;
    transition: all .1s ease;
    font-size: 13px;
}

    .tooltip .title {
        color: #e3e3e3;
        font-weight: bold;
        padding-bottom: 0;
    }
    .tooltip .wrapper-data {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 500;
        font-size: 13px;
    }
        .tooltip .wrapper-data .data {
            white-space: nowrap;
            display: flex;
            align-items: center;
        }

            .tooltip .wrapper-data .data .circle {
                width: 9px;
                height: 9px;
                background: #ddd;
                margin-right: 5px;
                border-radius: 3px;
            }

            .tooltip .wrapper-data .data strong {
                color: #e3e3e3;
                padding-right: 10px;
            }
        .tooltip .wrapper-data .value {
            display: flex;
            white-space: nowrap;
        }
            .tooltip .wrapper-data .value span {
                color: white;
            }
            .tooltip .wrapper-data .value strong {
                color: #7c7c7c;
                padding-left: 3px;
                font-weight: bold;
            }

.contenedor .telemetry .create .status {
    background: rgb(107, 195, 106, 0.1);
    color: #00db75;
}

.contenedor .telemetry .create .title .circle i {
    color: #00db75;
}

.contenedor .telemetry .init .status {
    background: rgba(31, 47, 107, 0.7);
    color: #3690f1;
}

.contenedor .telemetry .init .title .circle i {
    color: #3690f1;
}

.contenedor .telemetry .pause .status {
    background: rgba(107, 105, 31, 0.28);
    color: #f5f13e;
}

.contenedor .telemetry .pause .title .circle i {
    color: #f5f13e;
}

.contenedor .telemetry .resume .status {
    background: rgba(57, 31, 107, 0.46);
    color: #b93ef5;
}

.contenedor .telemetry .resume .title .circle i {
    color: #b93ef5;
}

.report {
    display: block;
    width: 100%;
    height: calc(100dvh - 64px);
    border: 0;
    background: white;
}

.logotipo {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .logotipo img {
        width: 100%;
        height: 35px;
        object-fit: contain;
        display: block;
        border-radius: 5px;
        background-color: white;
        padding: 0 5px;
    }

.prototype {
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, .1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .prototype i {
        font-size: 21px;
    }

.wrapper-tabs {
    display: flex;
    position: relative;
}

    .wrapper-tabs .element {
        display: flex;
        align-items: center;
        width: max-content;
        height: 35px;
        line-height: 35px;
        font-weight: 500;
        background: rgba(255, 255, 255, .05);
        color: #6a6a6a;
        margin-right: 10px;
        font-size: 13px;
        border-radius: 7px;
        cursor: pointer;
        user-select: none;
        transition: all .3s ease-in-out;
        margin-bottom: 10px;
        position: relative;
    }
        .wrapper-tabs .element.notification::after {
            content: '';
            position: absolute;
            top: -3px;
            right: -3px;
            width: 7px;
            height: 7px;
            background: #3495fe;
            border-radius: 50%;
        }
        .wrapper-tabs .element.active.notification::after {
            display: none;
        }
    .wrapper-tabs .active {
        transition: all .3s ease-in-out;
        background: rgba(255, 255, 255, .05);
        padding-right: 10px;
    }

    .wrapper-tabs .element:last-child {
        margin-right: 0;
    }

    .wrapper-tabs .element i {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 21px;
        text-align: center;
    }

    .wrapper-tabs .element svg {
        width: 35px;
        height: 16px;
        fill: #6a6a6a;
    }

    .wrapper-tabs .element .material-icons-text {
        display: block;
        font-size: 12px;
        text-transform: uppercase;
        font-style: normal;
        font-weight: 700;
    }

    .wrapper-tabs strong {
        display: none;
    }

    .wrapper-tabs .active i {
        color: #3690f1;
    }

    .wrapper-tabs .active svg {
        fill: #3690f1;
    }
        .wrapper-tabs .active svg path:nth-child(2) {
            stroke: white;
        }
        .wrapper-tabs .active svg path:nth-child(4) {
            stroke: #de58ff;
        }
    .wrapper-tabs .active strong {
        display: block;
        color: #d7d7d7;
    }
    .wrapper-tabs .wrapper-command {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        gap: 10px;
    }

        .wrapper-tabs .wrapper-command .command {
            background: rgba(31, 63, 107, 0.7);
            color: #3690f1;
            transition: all .3s ease-in-out;
            width: max-content;
            height: 35px;
            line-height: 35px;
            padding: 0 10px;
            border-radius: 5px;
            align-items: center;
            font-size: 13px;
            font-weight: bold;
            cursor: pointer;
            user-select: none;
        }
.wrapper-duplicate {
    display: flex;
    position: relative;
    gap: 10px;
    margin-bottom: 10px;
}
    .wrapper-duplicate .duplicate {
        display: flex;
        align-items: center;
        width: max-content;
        height: 35px;
        line-height: 35px;
        font-weight: 500;
        background: rgba(255, 255, 255, .05);
        color: #d7d7d7;
        margin-right: 10px;
        font-size: 13px;
        border-radius: 7px;
        cursor: pointer;
        user-select: none;
        transition: all .3s ease-in-out;
        position: relative;
        padding-right: 10px;
    }
        .wrapper-duplicate .duplicate i {
            width: 35px;
            height: 35px;
            line-height: 35px;
            font-size: 19px;
            text-align: center;
            color: #3690f1;
        }
.wrapper-screens {
    position: relative;
    margin-top: 15px;
}
    .wrapper-screens .screens {
        display: flex;
        flex-wrap: wrap;
        padding: 0 15px;
        overflow: auto;
        gap: 10px;
    }
    .wrapper-screens .screens .element {
        display: flex;
        align-items: center;
        width: max-content;
        height: 35px;
        line-height: 35px;
        font-weight: 500;
        background: rgba(255, 255, 255, .05);
        color: #6a6a6a;
        /*margin-right: 10px;*/
        font-size: 13px;
        border-radius: 7px;
        cursor: pointer;
        user-select: none;
        transition: all .3s ease-in-out;
        position: relative;
    }

        .wrapper-screens .screens .active {
            transition: all .3s ease-in-out;
            background-color: #287bff;
            /*background: linear-gradient( 90deg, #2e1f6b, #287bff);*/
            padding-right: 10px;
        }

        .wrapper-screens .screens .element:last-child {
            margin-right: 0;
        }

        .wrapper-screens .screens .element i {
            width: 35px;
            height: 35px;
            line-height: 35px;
            font-size: 21px;
            text-align: center;
            transition: all .3s ease-in-out;
        }
        .wrapper-screens .screens .element:hover i {
            transition: all .3s ease-in-out;
            color: white;
        }
        .wrapper-screens .screens .element svg {
            width: 35px;
            height: 16px;
            fill: #6a6a6a;
        }
        .wrapper-screens .screens .element img {
            width: 35px;
            height: 35px;
            padding: 3px;
        }
        .wrapper-screens .screens .element .material-icons-text {
            display: block;
            font-size: 12px;
            text-transform: uppercase;
            font-style: normal;
            font-weight: 700;
        }

        .wrapper-screens .screens span {
            display: none;
        }

        .wrapper-screens .screens .active i {
            color: #e8e8e8;
        }

        .wrapper-screens .screens .active svg {
            fill: #e8e8e8;
        }

        .wrapper-screens .screens .active span {
            display: block;
            color: white;
        }
.overview {
}

    .overview .padding {
        padding: 15px 7.5px;
    }

    .overview .overview-mode-switch {
        width: max-content;
        max-width: 100%;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px;
        margin-bottom: 15px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.05);
    }

        .overview .overview-mode-switch .mode-option {
            border: 0;
            min-width: 180px;
            height: 35px;
            padding: 0 18px;
            border-radius: 5px;
            background: transparent;
            color: #8f949c;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all .25s ease-in-out;
        }

            .overview .overview-mode-switch .mode-option:hover {
                color: #fff;
                background: rgba(255, 255, 255, 0.03);
            }

            .overview .overview-mode-switch .mode-option.active {
                background: rgba(255, 255, 255, 0.05);
                color: #fff;
                font-weight: 600;
            }

    .overview .component {
        padding: 15px;
        border-radius: 10px;
        background: #1c1d22;
        color: white;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
    }

    .overview .row {
    }

    .overview .col {
        padding: 0 7.5px;
    }

/* Una sola pantalla, sin scroll, con la disposicion de siempre: las tarjetas a la
   izquierda, el promedio de horas arriba y los dos graficos abajo. Lo unico que
   cambia respecto de antes es de donde sale el alto.
   Antes cada grafico traia el suyo en pixeles y por duplicado -- min-height: 320px
   aca y height: 320/340 otra vez en ApexCharts -- asi que la pagina pedia ~890px
   fijos: en 1920x1080 entraba raspando y en cualquier portatil escroleaba. Y como
   las dos columnas median cada una lo que media su contenido, la izquierda
   terminaba ~230px antes que la derecha: ese era el hueco negro de abajo.
   Ahora el alto se clava a la ventana (64px de topbar + los 30px de padding de la
   pagina, la misma cuenta que ya usan .contenedor y .graphics-chart-grid) y cada
   columna reparte ese alto entre sus cajas. Los minmax(0, ...) son los que dejan
   que una fila se achique por debajo de su contenido en pantallas bajas; sin eso
   la grilla crece y vuelve el scroll. */
    .overview .overview-main-layout {
        display: grid;
        grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
        gap: 15px;
        height: calc(100dvh - 64px - 30px);
    }

    .overview[data-mode="camaras"] .overview-main-layout {
        display: none;
    }

    .overview .overview-data-column,
    .overview .overview-charts-column {
        display: grid;
        gap: 15px;
        min-width: 0;
        min-height: 0;
    }

/* Las tarjetas miden lo que mide su contenido, como siempre. Estirarlas a un
   tercio de la pantalla cada una las dejaba de 319px con dos renglones adentro:
   la caja se llenaba de aire, que es peor que el espacio libre abajo. Si las
   sedes son muchas y la columna se pasa del alto, escrolea la columna y no la
   pagina. */
    .overview .overview-data-column {
        align-content: start;
        grid-auto-rows: min-content;
        overflow-y: auto;
    }

/* Los graficos si reparten el alto: son ellos los que se ven mal chicos. */
    .overview .overview-charts-column {
        grid-auto-rows: minmax(0, 1fr);
    }

/* El promedio de horas es una banda ancha y no gana nada con mas alto; darle un
   poco menos que la fila de abajo deja a los otros dos mas cerca del cuadrado. */
    .overview .overview-main-layout .overview-charts-column {
        grid-template-rows: minmax(0, 0.85fr) minmax(0, 1fr);
    }

    .overview .overview-chart-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
        min-width: 0;
        min-height: 0;
    }

    .overview .overview-cameras-dashboard {
        display: none;
    }

    .overview[data-mode="camaras"] .overview-cameras-dashboard {
        display: grid;
        grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
        gap: 15px;
        height: calc(100dvh - 64px - 30px);
    }

    .overview .overview-camera-card-grid {
        display: grid;
        gap: 8px;
        grid-template-columns: 1fr;
    }

    .overview:not([data-mode="camaras"]) .overview-cameras-dashboard {
        display: none;
    }


    .overview .component .title {
        color: #a1a1a1;
        flex: 0 0 auto;
    }

    .overview .overview-card-title {
        margin-bottom: 12px;
    }

/* El cuerpo del grafico se come lo que sobra de la caja y ApexCharts lo mide con
   height: "100%". min-height: 0 es obligatorio: sin eso un item flex no baja de
   su contenido y el grafico desborda la celda.
   Van tambien los seis id, no solo la clase. La clase es nueva y vive en la
   .cshtml, que se compila dentro del assembly: hasta que no se rebuildea, el
   navegador sigue recibiendo los <div id="chart-..."> pelados, no matchean, la
   caja mide 0 y mountChart les aplica su piso de 120px -- los graficos quedan
   aplastados arriba de una caja vacia. Con los id la pantalla queda bien con
   cualquiera de las dos versiones de la vista. */
    .overview .overview-chart-body,
    .overview #chart-enfriamiento,
    .overview #chart-actividad,
    .overview #chart-sensores,
    .overview #chart-paradas,
    .overview #chart-camaras,
    .overview #chart-camaras-sensores {
        flex: 1 1 auto;
        min-height: 0;
        margin-top: 8px;
        overflow: hidden;
    }

/* El unico con alto propio: crece con la cantidad de sensores (34px por grupo),
   asi que su caja escrolea en lugar de aplastarlo. */
    .overview #chart-camaras-sensores {
        overflow-y: auto;
    }

    .overview .blank-chart {
        height: 100%;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.03);
        color: #7c7c7c;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 500;
    }

/* Velo de carga, mismo lenguaje que .graphics-plot-loading en Graficos: el spinner
   de Materialize y, debajo, cuantas de las consultas ya volvieron.
   Uno solo para toda la pantalla, sobre .overview-dashboards. Antes iba uno por
   caja y las seis consultas son una sola espera: se veian seis spinners girando
   sincronizados repitiendo el mismo "Cargando 4 de 6", que es ruido, no
   informacion. El selector de modo queda afuera del velo y sigue clickeable.
   El overlay lo inyecta overview.js en cada carga en lugar de vivir en la .cshtml
   porque mountChart hace container.innerHTML = "" para montar ApexCharts. */
    .overview .overview-dashboards {
        position: relative;
    }

    .overview .overview-loading {
        align-items: center;
        background: rgba(28, 29, 34, .95);
        border-radius: 8px;
        color: rgba(255, 255, 255, .72);
        display: flex;
        flex-direction: column;
        font-size: 12px;
        font-weight: 700;
        gap: 10px;
        inset: 0;
        justify-content: center;
        position: absolute;
        text-align: center;
        z-index: 5;
    }

    .overview .overview-summary-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 92px;
        gap: 12px;
        align-items: stretch;
        flex: 1 1 auto;
        min-height: 0;
    }

/* La lista escrolea adentro de la tarjeta: con varias sedes crecia y, con el
   alto atado a la pantalla, empujaba la caja fuera de la grilla. */
    .overview .overview-summary-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
        min-height: 0;
        overflow-y: auto;
    }

        .overview .overview-summary-list > * {
            flex: 1 0 auto;
        }

        .overview .overview-summary-list::-webkit-scrollbar {
            width: 6px;
            height: 6px;
            background-color: transparent;
        }

        .overview .overview-summary-list::-webkit-scrollbar-thumb {
            border-radius: 999px;
            background-color: rgba(255, 255, 255, 0.12);
        }

    .overview .overview-summary-total {
        min-height: 100%;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.05);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 10px;
    }

        .overview .overview-summary-total strong {
            color: #fff;
            font-size: 24px;
            line-height: 1;
            font-weight: 700;
        }

        .overview .overview-summary-total span {
            color: #8f949c;
            font-size: 12px;
            margin-top: 4px;
        }

    .overview .overview-empty {
        min-height: 84px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.03);
        color: #7c7c7c;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 500;
        padding: 12px;
    }

    .overview .overview-metric-card {
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.03);
        padding: 10px 12px;
        cursor: pointer;
        user-select: none;
        transition: all .25s ease-in-out;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .overview .overview-metric-card:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .overview .overview-metric-card.active {
            background: rgba(255, 255, 255, 0.05);
        }

        .overview .overview-metric-card .overview-metric-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 8px;
        }

            .overview .overview-metric-card .overview-metric-header strong {
                color: #fff;
                font-size: 13px;
                font-weight: 600;
                line-height: 1;
            }

            .overview .overview-metric-card .overview-metric-header span {
                color: #8f949c;
                font-size: 12px;
                line-height: 1;
            }

        .overview .overview-metric-card .overview-metric-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            min-width: 0;
        }

            .overview .overview-metric-card .overview-metric-row + .overview-metric-row {
                margin-top: 6px;
                padding-top: 6px;
                border-top: 1px solid rgba(255, 255, 255, 0.03);
            }

    .overview .overview-metric-row span {
        color: #8f949c;
        font-size: 12px;
        min-width: 0;
    }

    .overview .overview-metric-row strong {
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }

/* Guion de "sin dato" (formatNullableNumber en overview.js): una barrita gris
   en el lugar del numero, para que un dato que no llego no se confunda con un
   cero medido. */
    .overview .overview-null-value {
        width: 50px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.22);
        display: inline-flex;
        flex: 0 0 auto;
        vertical-align: middle;
    }

        .overview .overview-summary-total strong .overview-null-value {
            width: 34px;
            height: 4px;
        }


    .overview .component .value {
        margin-bottom: 15px;
    }

        .overview .component .value strong {
            font-size: 20px;
        }

        .overview .component .value span {
            color: #a1a1a1;
        }

    .overview .component .subtext {
        color: #a1a1a1;
        line-height: 1.2;
    }

    .overview .graphic {
        padding: 15px;
        border-radius: 10px;
        background: #1c1d22;
        color: white;
        font-size: 14px;
        margin-bottom: 15px;
    }

        .overview .graphic .title {
            color: white;
        }

        .overview .graphic .subtitle {
            color: #a1a1a1;
        }
.reports {

}

    .reports .padding {
        padding: 15px 7.5px;
    }
    .reports .two-rows{
        margin: 0;
        margin-bottom: 10px;
    }
    .reports .component {
        padding: 15px;
        border-radius: 10px;
        background: #1c1d22;
        color: white;
        font-size: 14px;
        margin-bottom: 15px;
    }
       
        .reports .component .title{
            font-weight: 500;
            position: relative;
        }
            .reports .component .title.height {
                height: 31px;
            }
            .reports .component .title .year {
                font-weight: 500;
                background: rgba(255, 255, 255, .05);
                padding: 5px 10px;
                width: max-content;
                border-radius: 7px;
                position: absolute;
                right: 0;
                top: 0;
            }
            .reports .component .title .button {
                background: rgba(255, 255, 255, .05);
                display: flex;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                position: absolute;
                top: 0;
                right: 0;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                user-select: none;
            }
            .reports .component .title .button i {
                /*font-size: 20px;*/
            }
        .reports .component .subtitle {
            font-weight: 500;
            color: #7c7c7c;
            margin-bottom: 10px;
        }
        .reports .component .hour {
            font-weight: bold;
            display: flex;
            flex-direction: column;
        }
            
            .reports .component .hour strong {
                font-weight: 500;
                color: #7c7c7c;
                font-size: 13px;
            }
            .reports .component .hour span {
                font-weight: 500;
                color: white;
                font-size: 20px;
                line-height: 1;
            }
    .reports .content{
        margin-bottom: 5px;
    }
        .reports .content .subtext {
            font-weight: 500;
            color: #7c7c7c;
            font-size: 13px;
        }
        .reports .content:last-child {
            margin: 0;
        }
    .reports .product {
        justify-content: start;
        font-size: 13px;
        font-weight: 500;
        color: #e3e3e3;
    }
    .reports .responsible {
        margin-top: 5px;
        position: relative;
        padding-left: 40px;
        height: 30px;
        display: flex;
        justify-content: start;
        align-items: center;
        font-size: 13px;
        font-weight: 500;
        color: #e3e3e3;
    }

        .reports .responsible .circle {
            position: absolute;
            top: 0;
            left: 0;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 13px;
        }

            .reports .responsible .circle strong {
                font-weight: 500;
            }

        .reports .responsible .transparent {
            background: transparent;
        }

        .reports .responsible .circle img {
            display: block;
            width: 100%;
            height: 100%;
        }
    .reports .enterprise{
        width: 120px;
    }
        .reports .enterprise img{
            width: 100%;
        }
    .reports .date {
        display: flex;
        margin-top: 5px;
    }
        .reports .date .day {
            width: 45px;
            height: 55px;
            background: #287bff;
            border-radius: 7px;
            margin-right: 10px;
            display: flex;
            flex-direction: column;
            line-height: 1;
            justify-content: center;
            align-items: center;
            font-weight: 500;
        }
        .reports .date .day strong {
            padding-bottom: 2px;
        }
    .reports .indicator {
        font-size: 13px;
        font-weight: 500;
        color: #e3e3e3;
        position: relative;
        padding-left: 12px;
        height: 18px;
        display: flex;
        align-items: center;
    }
        .reports .indicator.no-pad-left{
            padding: 0;
        }
        .reports .indicator .circle {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            margin-right: 5px;
            position: absolute;
            left: 0;
            top: calc(50% - 2px);
            /*transform: translateY(-50%);*/
        }
            .reports .indicator strong {
                font-weight: 500;
            }
    .reports .row {
    }

    .reports .col {
        padding: 0 7.5px;
    }
    .reports .wrapper-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
        margin-top: 10px;
        margin-bottom: 10px;
    }
        .reports .wrapper-grid .grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            
        }
            .reports .wrapper-grid .grid:nth-child(1) {
                width: calc(30px * 6 + 10px * 5);
            }
            .reports .wrapper-grid .grid:nth-child(2) {
                width: calc(30px);
            }
            .reports .wrapper-grid .grid .element {
                width: 30px;
                height: 30px;
                background: rgba(255, 255, 255, .1);
                border-radius: 5px;
                display: flex;
                font-weight: 500;
                justify-content: center;
                align-items: center;
                font-size: 12px;
            }
    .reports .legend {
        color: #e3e3e3;
        font-size: 13px;
        font-weight: 500;
    }
        .reports .legend .subtext {
            font-weight: 500;
            color: #7c7c7c;
            font-size: 13px;
        }
        .reports .legend .element {
            position: relative;
            padding-left: 15px;
        }
            .reports .legend .element .circle{
                width: 8px;
                height: 8px;
                border-radius: 3px;
                background: rgba(255, 255, 255, .1);
                position: absolute;
                top: calc(50% - 4px);
                left: 0;
            }
    .reports .workflow {

    }
        .reports .workflow .element {
            margin-bottom: 10px;
        }
            .reports .workflow .element:last-child {
                margin-bottom: 0;
            }
            .reports .workflow .element .date {
                color: #bebebe;
                font-weight: 500;
                margin-bottom: 10px;
            }
            .reports .workflow .element .context {
                display: flex;
                margin-bottom: 15px;
            }
                .reports .workflow .element .context:last-child {
                    margin-bottom: 0;
                }
                .reports .workflow .element .context .time {
                    flex: 0 0 35px;
                    font-weight: 500;
                    color: #7c7c7c;
                    margin-right: 15px;
                    height: 30px;
                    line-height: 30px;
                    font-size: 13px;
                }
    .reports .operator {
        line-height: 1.1;
        font-weight: 400;
        padding-left: 40px;
        position: relative;
        
        font-size: 13px;
        min-height: 30px;
        flex-wrap: wrap;
    }
        .reports .operator .circle{
            position: absolute;
            top: 0;
            left: 0;
            font-weight: 500;
        }
        .reports .operator .content {
        }

            .reports .operator .content .title {
            }
            .reports .operator .content .subtitle {
                font-weight: 500;
            }

                .reports .operator .content .subtitle strong {
                    color: white;
                }
        .reports .operator .comments {
            width: 100%;
            background: rgba(255, 255, 255, .05);
            border-radius: 5px;
            padding: 10px;
            margin-top: 10px;
        }
            .reports .operator .comments .title {
                font-weight: 500;
                margin-bottom: 2px;
                color: #bebebe;
            }
            .reports .operator .comments .content {
                line-height: 1.1;
            }
    .reports .concurrency {
        max-height: 482px;
        overflow: auto;
    }
.images .padding {
    padding: 15px 7.5px;
}
.images .row {
}

.images .col {
    padding: 0 7.5px;
}
/*.expand .wrapper-menu, .expand .wrapper-menu{
    width: 650px;
}*/


.wrapper-menu.complete {
    width: calc(100% - 300px);
    transition: all .3s ease-in-out;
}

    .wrapper-menu.complete .menu {
        width: 100%;
        transition: all .3s ease-in-out;
    }
.wrapper-menu.overflow {
    width: 550px;
    transition: all .3s ease-in-out;
}
    .wrapper-menu.overflow .menu {
        width: 100%;
        transition: all .3s ease-in-out;
    }
.wrapper-menu {
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .5);
    width: 450px;
    height: 100%;
    transition: all .3s ease-in-out;
    z-index: 1000;
    /*backdrop-filter: blur(1px);*/
}

    .wrapper-menu .menu {
        position: absolute;
        bottom: 0;
        right: 0;
        background: #222327;
        color: white;
        width: 450px;
        height: 100%;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
        transition: all .3s ease-in-out;
        transform: translateY(100%);
        overflow: auto;
    }
    
        .wrapper-menu .menu .header {
            position: relative;
            height: 56px;
            line-height: 56px;
            padding: 0 15px;
            padding-right: 35px;
            font-size: 13px;
            font-weight: 500;
            background: rgba(0, 0, 0, .15);
        }

            .wrapper-menu .menu .header .button {
                position: absolute;
                top: 50%;
                right: 15px;
                transform: translateY(-50%);
                background: rgba(255, 255, 255, .1);
                color: white;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 35px;
                height: 35px;
                border-radius: 50%;
                cursor: pointer;
                user-select: none;
            }

                .wrapper-menu .menu .header .button i {
                    padding-top: 2px;
                }

        .wrapper-menu .menu .content {
            padding: 15px;
        }

.wrapper-submenu {
}
    .wrapper-submenu .submenu {
        position: absolute;
        bottom: 0;
        right: 0;
        background: #191a1e;
        color: white;
        width: 450px;
        height: auto;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
        transition: all .3s ease-in-out;
        transform: translateY(100%);
        overflow: auto;
        z-index: 2;
    }
        .wrapper-submenu .submenu .header {
            position: relative;
            height: 56px;
            line-height: 1;
            padding: 0 15px;
            padding-left: 49px;
            padding-right: 35px;
            font-size: 13px;
            font-weight: 500;
            border-bottom: 1px solid rgba(255, 255, 255, .1);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
            .wrapper-submenu .submenu .header strong {
                font-weight: 500;
            }
            .wrapper-submenu .submenu .header span {
                font-weight: 500;
                color: #8d8d8d;
            }
            .wrapper-submenu .submenu .header .icon {
                position: absolute;
                top: 0;
                left: 15px;
                color: #3690f1;
                display: flex;
                justify-content: center;
                align-items: center;
                width: max-content;
                height: 56px;
                border-radius: 50%;
                cursor: pointer;
                user-select: none;
                font-size: 19px;
            }
            .wrapper-submenu .submenu .header .button {
                position: absolute;
                top: 50%;
                right: 15px;
                transform: translateY(-50%);
                background: rgba(255, 255, 255, 0.05);
                color: #8d8b8b;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 35px;
                height: 35px;
                border-radius: 50%;
                cursor: pointer;
                user-select: none;
            }

                .wrapper-submenu .submenu .header .button i {
                    padding-top: 2px;
                }
        .wrapper-submenu .submenu .content {

        }

.create-pallet-submenu .submenu {
    overflow: initial;
}

.create-pallet-submenu .submenu .header {
    flex-direction: row;
    align-items: center;
    gap: 15px;
    padding-left: 15px;
    margin-bottom: 10px;
}

.create-pallet-submenu .mode-tabs {
    display: flex;
    gap: 6px;
}

    .create-pallet-submenu .mode-tabs .element {
        height: 32px;
        line-height: 32px;
        padding: 0 14px;
        border-radius: 7px;
        background: none;
        font-size: 12px;
        font-weight: 500;
        color: #6a6a6a;
        cursor: pointer;
        user-select: none;
        transition: all .2s ease-in-out;
    }
        .create-pallet-submenu .mode-tabs .element:hover, 
        .create-pallet-submenu .mode-tabs .element.active:hover {
            background: #33353c;
        }

        .create-pallet-submenu .mode-tabs .element.active {
            background: #242529;
        }

        #tabs-pallet-tipo .element[data-tipo="completo"].active {
            background: rgba(var(--color-completo), .22);
            color: rgba(var(--color-completo-text));
        }

        #tabs-pallet-tipo .element[data-tipo="remonte"].active {
            background: rgba(var(--color-remonte), .22);
            color: rgb(var(--color-remonte-text));
        }

.tipo-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
}
    .tipo-tag.completo {
        background: rgba(var(--color-completo), .18);
        color: rgba(var(--color-completo-text));
    }
    .tipo-tag.remonte {
        background: rgba(var(--color-remonte), .18);
        color: rgb(var(--color-remonte-text));
    }

.wrapper-tipo-pallet {
    margin-bottom: 15px;
}

    .wrapper-tipo-pallet > label {
        display: block;
        padding-left: 10px;
        font-weight: bold;
        margin-bottom: 5px;
        font-size: 12px;
    }

.create-pallet-submenu .quick-config {
    display: none;
}

/*  CODIGO Y POSICION EN UNA FILA, 80 / 20 -- EN LAS DOS HOJAS

    flex: 8 y flex: 2 sobre base 0 -- no width: 80% y 20% -- por lo que pasa en Configuracion
    rapida: ahi el Codigo se esconde (display: none, lo hace el handler de #tabs-create-pallet
    en process/screen.js) y con anchos fijos la Posicion se quedaria en su 20%, sola y flaca al
    costado de un hueco. Con flex-grow el que queda se lleva todo el ancho.

    min-width: 0 por lo de siempre: un <input> y el input de solo lectura del desplegable traen
    ancho intrinseco y sin esto la columna no baja de ahi.

    El gap es el mismo 10px del resto de la hoja; el aire de abajo lo siguen poniendo los dos
    campos con su margin-bottom, asi que la fila no agrega ninguno. */
.wrapper-submenu .code-position {
    display: flex;
    gap: 10px;
}

    .wrapper-submenu .code-position > .wrapper-input {
        flex: 8 1 0;
        min-width: 0;
    }

    .wrapper-submenu .code-position > .wrapper-select {
        flex: 2 1 0;
        min-width: 0;
    }

/*  EL BOTON DE MODO DEL CODIGO

    Mismo cajon de 35px, mismo azul y misma esquina que los botones de "Registros" -- ver
    .wrapper-counter .wrapper-deploy .deploy, que es de donde estan copiados los valores. Se
    apoya en el position: relative que .wrapper-input ya tenia.

    .scan en el wrapper y no en el input: es el ancho lo que hay que recortar, y asi un
    .wrapper-input sin boton no se entera de nada. El !important acompana al de la regla de
    .wrapper-input input, que ya venia asi. */
.wrapper-input.scan input {
    width: calc(100% - 45px) !important;
}

.wrapper-input .scan-toggle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 35px;
    height: 35px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(31, 47, 107, 0.7);
    color: #3690f1;
    cursor: pointer;
    user-select: none;
}

    /* El estado se lee del color, igual que el boton de reiniciar de "Registros" se distingue
       del de sumar: azul es teclado, verde agua es pistola. */
    .wrapper-input .scan-toggle.pda {
        background: rgba(31, 85, 107, 0.7);
        color: #36f1d0;
    }

    .wrapper-input .scan-toggle i {
        font-size: 21px;
    }

/*  LOS CAMPOS DE LA FRUTA VAN DE A TRES POR FILA

    Variedades, Envases y Calibre son el catalogo ENTERO de la ficha en todas las bases menos
    GREENFOOD, y los tres son desplegables de una linea. Apilados se llevaban 165px de alto de
    una hoja que en un telefono acostado ya no entra; de a tres, 55.

    LA GRILLA NO REORDENA NADA. El orden lo sigue mandando General.Componentes.Orden -- que es
    lo que lee read_manage_entradas y lo que se edita en Tipologia --, la grilla solo los
    acomoda de a tres. En GREENFOOD, que ademas tiene Etiqueta, Kilos y Cajas, eso da dos filas
    de tres y el Calibre cae en la segunda: si ahi tiene que ir pegado al Envase se le cambia
    el Orden al componente, no esta regla.

    Sin row-gap a proposito: la separacion vertical la siguen poniendo los 10px de
    margin-bottom que ya traen .wrapper-input y .wrapper-select, y el column-gap es ese mismo
    10 para que el aire se lea igual en los dos sentidos.

    min-width: 0 en los hijos porque un <input> trae un ancho intrinseco de ~170px y la columna
    de una grilla no baja de ahi sola: las tres juntas desbordarian la hoja. */
.wrapper-components .components {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 10px;
}

    .wrapper-components .components > * {
        min-width: 0;
    }

    /*  Y EL TEXTO TIENE QUE ENTRAR EN LA COLUMNA

        Con la hoja en 450px cada columna queda en ~130px y ahi no entra "Selecciona
        variedades". Un <input> recorta sin avisar -- no pone puntos suspensivos por si solo --
        y el desplegable de Materialize es justamente un input de solo lectura. */
    .wrapper-components .components .wrapper-select .select-wrapper input.select-dropdown,
    .wrapper-components .components .wrapper-input input {
        text-overflow: ellipsis;
    }

#input-codigo-pallet {
    color: #9e9e9e;
}

#input-codigo-pallet::placeholder {
    color: #606060;
}
            .wrapper-submenu .submenu .content .element {
                height: 40px;
                line-height: 40px;
                font-size: 13px;
                font-weight: 500;
                color: #e1e1e1;
                padding: 0 15px;
                cursor: pointer;
                user-select: none;
                transition: all .3s ease-in-out;
                border-bottom: 1px solid rgba(255, 255, 255, .1);
            }
                .wrapper-submenu .submenu .content .element:last-child{
                    border: 0;
                }
                .wrapper-submenu .submenu .content .element:hover {
                    transition: all .3s ease-in-out;
                    background: rgba(255, 255, 255, 0.03);
                    color: white;
                }

.process-pallet-submenu .submenu .content {
    padding: 15px;
    overflow: visible;
}

#paletas .column-start {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
}

#paletas .pallet-code {
    line-height: 18px;
}

#paletas .pallet-placement-summary {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

    #paletas .pallet-placement-summary .pallet-placement {
        display: flex;
        flex-direction: row;
        color: #e3e3e3;
        font-size: 12px;
        font-weight: bold;
        line-height: 1.5;
        white-space: nowrap;
        border-radius: 3px;
        background: #3690f173;
        gap: 5px;
        padding: 2px 5px;
    }

        #paletas .pallet-placement-summary .pallet-sensor-code {
            font-weight: inherit;
            
        }

        #paletas .pallet-placement-summary .pallet-orientation-code {
            color: #9d9d9d;
            font-size: inherit;
            font-weight: inherit;
            
        }

    #paletas .pallet-placement-summary.empty {
        padding: 0;
        color: rgba(255, 255, 255, .35);
        background-color: transparent;
    }

.process-pallet-submenu .submenu {
    overflow: visible;
}

    .process-pallet-submenu .submenu .content .wrapper-input,
    .process-pallet-submenu .submenu .content .wrapper-select {
        margin-bottom: 12px;
    }

    .process-pallet-submenu .submenu .content .wrapper-select .dropdown-content {
        z-index: 20;
    }

    .process-pallet-submenu .submenu .content .placement-editor {
        margin-top: 4px;
    }

        .process-pallet-submenu .submenu .content .placement-editor .placement-title {
            color: rgba(255, 255, 255, .8);
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 9px;
        }

        .process-pallet-submenu .submenu .content .placement-editor .placement-form {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px;
            gap: 8px;
            align-items: end;
            margin-bottom: 10px;
        }

            .process-pallet-submenu .submenu .content .placement-editor .placement-form .wrapper-select {
                margin-bottom: 0;
            }

            .orientation-toggle {
                display: flex;
                height: 35px;
                border-radius: 5px;
                overflow: hidden;
                background: rgba(255, 255, 255, 0.05);
            }

                .orientation-toggle .segment {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                    font-weight: bold;
                    color: #9e9e9e;
                    cursor: pointer;
                    transition: all .2s ease-in-out;
                }

                    .orientation-toggle .segment:not(:last-child) {
                        border-right: 1px solid rgba(255, 255, 255, 0.08);
                    }

                    .orientation-toggle .segment:hover {
                        color: white;
                    }

                    .orientation-toggle .segment.active {
                        background: #3690f1;
                        color: white;
                    }

                    .orientation-toggle .segment.disabled {
                        cursor: not-allowed;
                        opacity: .35;
                        pointer-events: none;
                    }

            .process-pallet-submenu .submenu .content .placement-editor .placement-form .add-placement {
                width: 42px;
                height: 38px;
                border-radius: 5px;
                background: #303090;
                color: #7d7dff;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all .3s ease-in-out;
            }

                .process-pallet-submenu .submenu .content .placement-editor .placement-form .add-placement:hover {
                    filter: brightness(1.12);
                }

        .process-pallet-submenu .submenu .content .pallet-placements {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

            .process-pallet-submenu .submenu .content .pallet-placements .empty {
                color: rgba(255, 255, 255, .45);
                font-size: 12px;
                padding: 7px;
            }

            .process-pallet-submenu .submenu .content .pallet-placements .placement {
                min-height: 36px;
                padding: 6px 8px 6px 10px;
                border-radius: 5px;
                background: rgba(255, 255, 255, .05);
                display: grid;
                grid-template-columns: minmax(0, 1fr) 30px;
                align-items: center;
                gap: 8px;
            }

                .process-pallet-submenu .submenu .content .pallet-placements .placement .info {
                    min-width: 0;
                    display: grid;
                    grid-template-columns: minmax(0, 1fr) auto;
                    gap: 8px;
                    align-items: baseline;
                }

                    .process-pallet-submenu .submenu .content .pallet-placements .placement .info strong,
                    .process-pallet-submenu .submenu .content .pallet-placements .placement .info span {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .process-pallet-submenu .submenu .content .pallet-placements .placement .info strong {
                        font-size: 13px;
                    }

                    .process-pallet-submenu .submenu .content .pallet-placements .placement .info span {
                        color: rgba(255, 255, 255, .58);
                        font-size: 12px;
                    }

                .process-pallet-submenu .submenu .content .pallet-placements .placement .button.remove {
                    width: 30px;
                    height: 30px;
                    flex: 0 0 30px;
                    color: #ff7474;
                    border-radius: 5px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

    .process-pallet-submenu .submenu .content .pallet-actions {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-top: 20px;
    }

        .process-pallet-submenu .submenu .content .pallet-actions .button {
            height: 40px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            user-select: none;
            transition: all .3s ease-in-out;
        }

            .process-pallet-submenu .submenu .content .pallet-actions .button.delete {
                width: 44px;
                flex: 0 0 44px;
                background: rgba(255, 255, 255, .05);
                color: #ff7474;
            }

            .process-pallet-submenu .submenu .content .pallet-actions .wrapper-button {
                /*flex: 1;*/
                margin: 0;
            }

            .process-pallet-submenu .submenu .content .pallet-actions .wrapper-button .button {
                width: 100%;
                gap: 8px;
            }

            .process-pallet-submenu .submenu .content .pallet-actions .button:hover {
                filter: brightness(1.08);
            }
.wrapper-parameters{
}

    .wrapper-parameters .parameters{
        position: absolute;
        bottom: 0;
        right: 0;
        /* Sin este z-index la hoja se abria DEBAJO del panel del proceso y no se veia nunca.
           Las dos viven dentro de .wrapper-context, las dos estan ancladas a right: 0 y las
           dos miden 450px, o sea que ocupan exactamente la misma franja de la pantalla. Y
           .wrapper-context .context declara z-index: 1 mientras que esta no declaraba
           ninguno: un positioned con z-index auto siempre pierde contra uno con z-index 1,
           sin importar el orden en el DOM. El click abria la hoja y la animacion corria; lo
           que fallaba era que quedaba tapada. */
        z-index: 2;
        background: #191a1e;
        color: white;
        width: 450px;
        height: auto;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
        transition: all .3s ease-in-out;
        transform: translateY(100%);
        overflow: auto;
    }

        .wrapper-parameters .parameters .header{
            position: relative;
            height: 56px;
            line-height: 1;
            padding: 0 15px;
            padding-left: 49px;
            padding-right: 35px;
            font-size: 13px;
            font-weight: 500;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #d7d7d7;
        }

            .wrapper-parameters .parameters .header strong{
                font-weight: 500;
            }

            .wrapper-parameters .parameters .header span{
                font-weight: 500;
                color: #8d8d8d;
            }

            .wrapper-parameters .parameters .header svg{
                position: absolute;
                top: 50%;
                left: 13px;
                display: flex;
                justify-content: center;
                align-items: center;
                width: max-content;
                height: 56px;
                border-radius: 50%;
                cursor: pointer;
                user-select: none;
                transform: translateY(-50%);
            }
                .wrapper-parameters .parameters .header svg path:nth-child(2){
                    stroke: white;
                }

                .wrapper-parameters .parameters .header svg path:nth-child(4){
                    stroke: #de58ff;
                }
            .wrapper-parameters .parameters .header .button{
                position: absolute;
                top: 50%;
                right: 15px;
                transform: translateY(-50%);
                background: rgba(255, 255, 255, 0.05);
                color: #8d8b8b;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 35px;
                height: 35px;
                border-radius: 50%;
                cursor: pointer;
                user-select: none;
            }

                .wrapper-parameters .parameters .header .button i{
                    padding-top: 2px;
                }

        .wrapper-parameters .parameters .content{
            padding: 15px;
        }

.wrapper-submenu .submenu .content {
            padding: 15px;
        }

.contenedor::-webkit-scrollbar-track, .reveal::-webkit-scrollbar-track {
    background-color: #4e5464;
}

.contenedor::-webkit-scrollbar, .reveal::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

.contenedor::-webkit-scrollbar-corner, .reveal::-webkit-scrollbar-corner {
    background: #4e5464;
}

.contenedor::-webkit-scrollbar-thumb, .reveal::-webkit-scrollbar-thumb {
    background-color: #1e77e5;
}

.controlling::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .4);
    border-radius: 5px;
}

.controlling::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

.controlling::-webkit-scrollbar-corner {
    background-color: transparent;
}

.controlling::-webkit-scrollbar-thumb {
    background-color: #1e77e5;
    border-radius: 5px;
}
.component-measurements::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .4);
    border-radius: 5px;
}

.component-measurements::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

.component-measurements::-webkit-scrollbar-corner {
    background-color: transparent;
}

.component-measurements::-webkit-scrollbar-thumb {
    background-color: #1e77e5;
    border-radius: 5px;
}
.wrapper-select .dropdown-content::-webkit-scrollbar-track,
.submenu-dropdown.dropdown-content::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .4);
    border-radius: 5px;
}

.wrapper-select .dropdown-content::-webkit-scrollbar,
.submenu-dropdown.dropdown-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

.wrapper-select .dropdown-content::-webkit-scrollbar-corner,
.submenu-dropdown.dropdown-content::-webkit-scrollbar-corner {
    background-color: transparent;
}

.wrapper-select .dropdown-content::-webkit-scrollbar-thumb,
.submenu-dropdown.dropdown-content::-webkit-scrollbar-thumb {
    background-color: #1e77e5;
    border-radius: 5px;
}

.subtable::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .4);
    border-radius: 5px;
}

.subtable::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

.subtable::-webkit-scrollbar-corner {
    background-color: transparent;
}

.subtable::-webkit-scrollbar-thumb {
    background-color: #1e77e5;
    border-radius: 5px;
}

.wrapper-context .context::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .4);
}

.wrapper-context .context::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

.wrapper-context .context::-webkit-scrollbar-corner {
    background-color: transparent;
}

.wrapper-context .context::-webkit-scrollbar-thumb {
    background-color: #1e77e5;
}
.wrapper-menu .menu::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .4);
}

.wrapper-menu .menu::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

.wrapper-menu .menu::-webkit-scrollbar-corner {
    background-color: transparent;
}

.wrapper-menu .menu::-webkit-scrollbar-thumb {
    background-color: #1e77e5;
}
.concurrency::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .4);
    border-radius: 5px;
}

.concurrency::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

.concurrency::-webkit-scrollbar-corner {
    background-color: transparent;
}

.concurrency::-webkit-scrollbar-thumb {
    background-color: #1e77e5;
    border-radius: 5px;
}

.wrapper-designer::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .4);
    border-radius: 5px;
}

.wrapper-designer::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

.wrapper-designer::-webkit-scrollbar-corner {
    background-color: transparent;
}

.wrapper-designer::-webkit-scrollbar-thumb {
    background-color: #1e77e5;
    border-radius: 5px;
}
.wrapper-designer-builder::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .4);
    border-radius: 5px;
}

.wrapper-designer-builder::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

.wrapper-designer-builder::-webkit-scrollbar-corner {
    background-color: transparent;
}

.wrapper-designer-builder::-webkit-scrollbar-thumb {
    background-color: #1e77e5;
    border-radius: 5px;
}
.overlay .grid .table::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .4);
    border-radius: 5px;
}

.overlay .grid .table::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

.overlay .grid .table::-webkit-scrollbar-corner {
    background-color: transparent;
}

.overlay .grid .table::-webkit-scrollbar-thumb {
    background-color: #1e77e5;
    border-radius: 5px;
}

/* El recuadro de tarjetas del overlay scrollea solo, asi que le toca la misma barra que a la
   tabla que tiene al lado: mismo azul, mismo ancho, mismo radio. */
.overlay.fullscreen .grid .module .layout::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .4);
    border-radius: 5px;
}

.overlay.fullscreen .grid .module .layout::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

.overlay.fullscreen .grid .module .layout::-webkit-scrollbar-corner {
    background-color: transparent;
}

.overlay.fullscreen .grid .module .layout::-webkit-scrollbar-thumb {
    background-color: #1e77e5;
    border-radius: 5px;
}
.contenedor.hybrid .summary .wrapper-table::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .4);
    border-radius: 5px;
}

.contenedor.hybrid .summary .wrapper-table::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

.contenedor.hybrid .summary .wrapper-table::-webkit-scrollbar-corner {
    background-color: transparent;
}

.contenedor.hybrid .summary .wrapper-table::-webkit-scrollbar-thumb {
    background-color: #1e77e5;
    border-radius: 5px;
}
.background {
    --bg-size: 200%;
    --color-one: #1c82d9;
    --color-two: #12327d;
    background: linear-gradient( 90deg, var(--color-one), var(--color-two), var(--color-one) ) 0 0 / var(--bg-size) 50%;
    animation: move-bg 5s linear infinite;
}

.wrapper-thermometer .thermometer {
    width: 35px;
    height: 35px;
    background: #333;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    line-height: 1;
    text-align: center;
    box-shadow: 0 0 5px 0 #474646;
}

.range {
    margin-bottom: 10px;
}

    .range:last-child {
        margin: 0;
    }

    .range .thumb {
        display: none;
    }

    .range label {
        font-size: 13px;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .range label span {
            color: #e1e1e1;
            font-weight: bold;
        }
        .range label strong{
            line-height: 1;
        }
        .range label strong i {
            font-size: 17px;
            line-height: inherit;
        }
input[type="color"] {
    -webkit-appearance: none;
    border: none;
}

    input[type="color"]::-webkit-color-swatch-wrapper {
        padding: 0;
    }

    input[type="color"]::-webkit-color-swatch {
        border: none;
    }

.gradient {
    height: 600px;
    background: linear-gradient(62deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    animation: gradient 15s ease infinite;
    background-size: 400% 400%;
}
.no-pad-top{
    padding-top: 0;
}

.wrapper-validate {

}
    .wrapper-validate .verify {
        width: 100%;
        height: 35px;
        background: radial-gradient(circle at 180% center, rgb(255, 24, 54) 0%, rgba(255, 255, 255, 0) 60%);
        position: absolute;
        top: 23px;
        right: 0;
        border-radius: 5px;
        z-index: -1;
    }
        .wrapper-validate .verify::before {
            content: '';
            width: 4px;
            height: 12px;
            border-radius: 2px;
            background: #ff3838;
            position: absolute;
            top: 9px;
            right: 10px;
            box-shadow: 0 0 5px 0 rgb(255, 24, 54);
            z-index: -1;
        }
        .wrapper-validate .verify::after {
            content: '';
            width: 4px;
            height: 4px;
            border-radius: 4px;
            background: #ff3838;
            position: absolute;
            top: 23.5px;
            right: 10px;
            box-shadow: 0 0 5px 0 rgb(255, 24, 54);
        }
    .wrapper-validate input::placeholder {
        color: #fa6464;
    }
    .wrapper-validate input.select-dropdown {
        color: #fa6464 !important;
    }
    .wrapper-validate select {
        color: #fa6464 !important;
    }
.wrapper-menu .menu .content {
    padding: 15px;
}
.wrapper-coating {
    display: none;
    position: fixed;
    z-index: 999;
    width: 300px;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.5);
    transition: all .3s ease-in-out;
}
.collapse-sidenav .wrapper-coating {
    background: transparent;
}
    .wrapper-coating .coating {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 300px;
        background: #1d1e21;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
        transition: all .3s ease-in-out;
        transform: translateY(100%);
    }
        .wrapper-coating .coating .header {
            position: relative;
            height: 65px;
            line-height: 65px;
            padding: 0 15px;
            padding-right: 35px;
            font-size: 13px;
            font-weight: 500;
            color: #e3e3e3;
            display: flex;
            border-top-left-radius: 7px;
            border-top-right-radius: 7px;
        }
            .wrapper-coating .coating .header > i {
                line-height: inherit;
                margin-right: 10px;
            }
            .wrapper-coating .coating .header .button {
                position: absolute;
                top: 50%;
                right: 15px;
                transform: translateY(-50%);
                background: rgba(255, 255, 255, .1);
                color: white;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 35px;
                height: 35px;
                border-radius: 50%;
                cursor: pointer;
                user-select: none;
            }

                .wrapper-coating .coating .header .button i {
                    padding-top: 2px;
                }
        .wrapper-coating .coating .content {
            padding: 15px;
            padding-top: 0;
        }

.wrapper-coating .coating .configuration {
    padding: 15px;
    background: rgba(255, 255, 255, .04);
    border-radius: 5px;
    margin-bottom: 15px;
}
    .wrapper-coating .coating .configuration:last-child {
        margin: 0;
    }
    .wrapper-coating .coating .configuration .account {
        display: flex;
        position: relative;
        align-items: center;
        margin-bottom: 15px;
    }

        .wrapper-coating .coating .configuration .account .circle {
            width: 45px;
            height: 45px;
            line-height: 45px;
            font-size: 14px;
            background: rgba(255, 255, 255, .1);
            color: #fff;
            text-align: center;
            font-weight: 500;
            margin-right: 15px;
        }
            .wrapper-coating .coating .configuration .account .circle img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: contain;
                border-radius: 50%;
            }
        .wrapper-coating .coating .configuration .account .button {
            width: 35px;
            height: 35px;
            line-height: 35px;
            background: rgba(255, 255, 255, .05);
            color: #00a5ff;
            border-radius: 5px;
            text-align: center;
            cursor: pointer;
            user-select: none;
            margin-right: 10px;
        }
        .wrapper-coating .coating .configuration .account .publish {
            width: max-content;
            height: 35px;
            line-height: 35px;
            background-color: #287bff;
            color: white;
            border-radius: 5px;
            text-align: center;
            cursor: pointer;
            user-select: none;
            padding: 0 10px;
            font-size: 13px;
            font-weight: 500;
            display: none;
        }
        .wrapper-coating .coating .configuration .account .button i {
            line-height: inherit;
            font-size: 19px;
        }
        .wrapper-coating .coating .configuration .account .button img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 5px;
        }
        .wrapper-coating .coating .configuration .account .list {
            display: none;
            position: absolute;
            width: max-content;
            top: 50px;
            left: 60px;
            border-radius: 5px;
            background: #38393c;
            overflow: hidden;
            z-index: 2;
        }
            .wrapper-coating .coating .configuration .account .list .element {
                height: 35px;
                padding: 0 10px;
                cursor: pointer;
                transition: all .3s ease-in-out;
                font-weight: 500;
                color: #ddd;
                display: flex;
                align-items: center;
                font-size: 13px;
            }
                .wrapper-coating .coating .configuration .account .list .element label {
                    color: #ddd;
                }
                .wrapper-coating .coating .configuration .account .list .element:hover {
                    background: rgba(255, 255, 255, 0.1);
                    transition: all .3s ease-in-out;
                    color: #fff;
                }
    .wrapper-coating .coating .configuration .name {
        color: #e3e3e3;
        font-weight: 500;
        line-height: 1;
        font-size: 13px;
    }
    .wrapper-coating .coating .configuration .email {
        color: #79787f;
        font-weight: 500;
        line-height: 1;
        font-size: 13px;
        padding-top: 3px;
    }
        .wrapper-coating .coating .manage {
            
        }
            .wrapper-coating .coating .manage .element {
                padding: 0 10px;
                padding-left: 0;
                height: 35px;
                line-height: 35px;
                background: rgba(255, 255, 255, .04);
                border-radius: 5px;
                margin-bottom: 15px;
                cursor: pointer;
                font-size: 13px;
                color: #e3e3e3;
                display: flex;
                transition: all .3s ease-in-out;
            }
                .wrapper-coating .coating .manage .element:hover {
                    background: rgba(255, 255, 255, .07);
                    transition: all .3s ease-in-out;
                }
                .wrapper-coating .coating .manage .element:last-child{
                    margin: 0;
                }
                .wrapper-coating .coating .manage .element i {
                    color: #00a5ff;
                    font-size: 18px;
                    line-height: inherit;
                    width: 35px;
                    text-align: center;
                }
                .wrapper-coating .coating .manage .element span {
                    display: block;
                }
        .wrapper-coating .coating .handle{
            display: none;
        }
        .wrapper-coating .coating .wrapper-button {
            display: flex;
        }
        .wrapper-coating .coating .wrapper-button .no-icon {
            padding-left: 10px !important;
        }

        .wrapper-coating .coating .wrapper-button .button.flat {
            background: rgba(31, 63, 107, 0.7);
            color: #3690f1;
        }

        .wrapper-coating .coating .wrapper-button .button {
            width: auto;
            height: 35px;
            border-radius: 5px;
            padding: 0 12px;
            padding-left: 35px;
            position: relative;
            background-color: rgba(255, 255, 255, .05);
            background: radial-gradient(circle at 130% center, rgb(40, 123, 255) 0%, rgba(255, 255, 255, .05) 60%);
            margin-right: 10px;
        }
            .wrapper-coating .coating .wrapper-button .cancel {
                width: max-content;
                height: 35px;
                line-height: 35px;
                color: #8a8a8a;
                border-radius: 5px;
                padding: 0 12px;
                position: relative;
                background-color: rgba(255, 255, 255, .05);
                font-weight: bold;
                font-size: 13px;
                cursor: pointer;
                user-select: none;
            }
            .wrapper-coating .coating .wrapper-button .button i {
                position: absolute;
                top: 0;
                left: 0;
                width: 35px;
                height: 35px;
                line-height: 35px;
                text-align: center;
                font-size: 20px;
                color: #478eff;
                padding-top: 1px;
            }
.parameters {
}

    .parameters .padding {
        padding: 15px 3.75px;
    }

    .parameters .two-rows {
        margin: 0;
        margin-bottom: 10px;
    }

    .parameters .component {
        padding: 15px;
        border-radius: 10px;
        background: #1c1d22;
        color: white;
        font-size: 14px;
        margin-bottom: 15px;
    }

        .parameters .component .title {
            font-size: 13px;
            font-weight: 500;
            position: relative;
        }
        .parameters .component .subtitle {
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 15px;
            color: #9e9e9e;
            line-height: 1;
        }
        .parameters .component .title.action {
            display: flex;
            flex-direction: column;
            min-height: 35px;
            margin-bottom: 10px;
            padding-right: 125px;
        }
            .parameters .component .title.action span{
                line-height: 1;
                padding-bottom: 2px;
            }
            .parameters .component .title.action strong {
                display: block;
                font-weight: 500;
                color: #9e9e9e;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .parameters .component .title .button {
                width: max-content;
                height: 35px;
                line-height: 35px;
                position: absolute;
                top: 0;
                right: 0;
                background: rgba(31, 63, 107, 0.7);
                color: #3690f1;
                border-radius: 5px;
                padding: 0 12px;
                cursor: pointer;
                user-select: none;
            }
        .parameters .component .enterprise {
            margin: 10px 0;
        }
            .parameters .component .enterprise .context {
                display: flex;

            }
            .parameters .component .enterprise .context .image {
                width: 70px;
                height: 70px;
                border-radius: 5px;
                background: rgba(255, 255, 255, .05);
                margin-right: 15px;
            }
                .parameters .component .enterprise .context .image img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                .parameters .component .enterprise .context .button {
                    width: 35px;
                    height: 35px;
                    line-height: 35px;
                    background: rgba(255, 255, 255, .05);
                    color: #00a5ff;
                    border-radius: 5px;
                    text-align: center;
                    cursor: pointer;
                    user-select: none;
                    margin-right: 10px;
                }
                .parameters .component .enterprise .context .button i {
                    line-height: inherit;
                    font-size: 19px;
                }
    .parameters .wrapper-button {
        display: flex;
    }
        .parameters .wrapper-button .button.flat {
            background: rgba(31, 63, 107, 0.7);
            color: #3690f1;
        }

        .parameters .wrapper-button .button {
            width: auto;
            height: 35px;
            border-radius: 5px;
            padding: 0 12px;
            padding-left: 35px;
            position: relative;
            background-color: rgba(255, 255, 255, .05);
            background: radial-gradient(circle at 130% center, rgb(40, 123, 255) 0%, rgba(255, 255, 255, .05) 60%);
            margin-right: 10px;
        }
            .parameters .wrapper-button .button i {
                position: absolute;
                top: 0;
                left: 0;
                width: 35px;
                height: 35px;
                line-height: 35px;
                text-align: center;
                font-size: 20px;
                color: #478eff;
                padding-top: 1px;
            }
    .parameters .wrapper-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
        margin-top: 10px;
        margin-bottom: 10px;
    }

        .parameters .wrapper-grid .grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

            .parameters .wrapper-grid .grid:nth-child(1) {
                width: calc(30px * 6 + 10px * 5);
            }

            .parameters .wrapper-grid .grid:nth-child(2) {
                width: calc(30px);
            }

            .parameters .wrapper-grid .grid .element {
                
            }
                .parameters .wrapper-grid .grid .element .squart {
                    width: 30px;
                    height: 30px;
                    background: rgba(255, 255, 255, .1);
                    border-radius: 5px;
                    display: flex;
                    font-weight: 500;
                    justify-content: center;
                    align-items: center;
                    font-size: 12px;
                    cursor: pointer;
                    user-select: none;
                }
                .parameters .wrapper-grid .grid .element .caption {
                    font-size: 12px;
                    font-weight: 500;
                    width: 30px;
                    text-align: center;
                    color: #c0c0c0;
                }
                .parameters .wrapper-grid .grid .element .squart i {
                    font-size: 19px;
                    color: #9e9e9e;
                }
                .parameters .wrapper-grid .grid .element .squart.red{
                }
    .parameters .legend {
        color: #e3e3e3;
        font-size: 13px;
        font-weight: 500;
    }

        .parameters .legend .subtext {
            font-weight: 500;
            color: #7c7c7c;
            font-size: 13px;
        }

        .parameters .legend .element {
            position: relative;
            padding-left: 15px;
        }

            .parameters .legend .element .circle {
                width: 8px;
                height: 8px;
                border-radius: 3px;
                background: rgba(255, 255, 255, .1);
                position: absolute;
                top: calc(50% - 4px);
                left: 0;
            }
    .parameters .wrapper-label {
    }
        .parameters .wrapper-label .label {
            display: flex;
            width: max-content;
            background: rgba(255, 255, 255, .05);
            height: 35px;
            font-size: 13px;
            border-radius: 5px;
            cursor: pointer;
            user-select: none;
            margin-bottom: 10px;
        }
            .parameters .wrapper-label .label:last-child{
                margin: 0;
            }
            .parameters .wrapper-label .label > i {
                width: 35px;
                height: 35px;
                line-height: 35px;
                text-align: center;
                font-size: 18px;
            }
            .parameters .wrapper-label .label .context {
                display: flex;
                height: 35px;
                align-items: center;
                line-height: 1;
                font-weight: 500;
                padding-right: 10px;
            }
                .parameters .wrapper-label .label .context .type {
                    color: #9e9e9e;
                    margin-right: 10px;
                }
                .parameters .wrapper-label .label .context .content {
                    color: #e3e3e3;
                }
            .parameters .wrapper-label .label .button {
                width: 35px;
                height: 35px;
                line-height: 35px;
                text-align: center;
            }
                .parameters .wrapper-label .label .button i {
                    font-size: 18px;
                    line-height: inherit;
                    color: white;
                }
            .parameters .wrapper-label .label.text-blue, .parameters .wrapper-label .label.text-blue .type {
                color: #3690f1;
            }
            .parameters .wrapper-label .label.text-teal, .parameters .wrapper-label .label.text-teal .type {
                color: #6cffe0;
            }
            .parameters .wrapper-label .label.text-purple, .parameters .wrapper-label .label.text-purple .type {
                color: #a35eff;
            }
            .parameters .wrapper-label .label.text-orange, .parameters .wrapper-label .label.text-orange .type {
                color: #fe8b6d;
            }
            .parameters .wrapper-label .label.text-yellow, .parameters .wrapper-label .label.text-yellow .type {
                color: #fef06d;
            }
.visibility {
    /*width: 30px;
    height: 30px;*/
    background: rgba(255, 255, 255, 0);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
    .visibility .circle {
        /*font-size: 19px;
        color: #e3e3e3;*/
        width: 8px;
        height: 8px;
        background: #e3e3e3;
        border-radius: 50%;
    }
.no-margin {
    margin: 0 !important;
}
.wrapper-filter {

}
    .wrapper-filter .filter {
        background: linear-gradient(90deg, #2e60c4 5%, rgba(255, 255, 255, 0.05) 60%);
        color: #e1e1e1;
        width: max-content;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        padding-left: 35px;
        border-radius: 7px;
        cursor: pointer;
        user-select: none;
        font-size: 13px;
        font-weight: 500;
        position: relative;
    }
        .wrapper-filter .filter i {
            position: absolute;
            top: 50%;
            left: 7px;
            transform: translateY(-50%);
            padding: 1px;
            fill: white;
            font-size: 19px;
        }
        .wrapper-filter .filter.loading {
            cursor: default;
            opacity: .78;
            pointer-events: none;
        }

            .wrapper-filter .filter.loading i {
                opacity: 0;
            }

            .wrapper-filter .filter .filter-loader {
                display: none;
                height: 20px;
                left: 7px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 20px;
            }

            .wrapper-filter .filter.loading .filter-loader {
                display: block;
            }

            .wrapper-filter .filter .filter-loader .preloader-wrapper {
                height: 20px;
                width: 20px;
            }

            .wrapper-filter .filter .filter-loader .spinner-layer {
                border-color: #2cff76;
            }

    .wrapper-filter .loading {
        background: #2d2e32;
        width: max-content;
        height: 35px;
        border-radius: 7px;
        display: none;
        align-items: center;
        padding: 0 10px;
        padding-left: 35px;
        font-size: 13px;
        font-weight: 500;
        position: relative;
        gap: 8px;
        z-index: 2;
    }
        .wrapper-filter .loading .circle {
            background: transparent;
            height: 20px;
            width: 20px;
            border-radius: 50%;
            border: 3.5px solid rgba(255, 255, 255, 0.2);
            border-top: 3.5px #3a7cff solid;
            animation: rotate 1.3s infinite linear;
            position: absolute;
            top: calc(50% - 10px);
            left: 8px;
        }

.sticky {
    position: sticky;
    top: 0;
    left: 0;
    background-color: #18191d;
}
.dropdown-content li {
    min-height: 35px;
}
    .dropdown-content li > a, .dropdown-content li > span {
        padding: 0 10px;
        line-height: 35px;
        font-size: 13px;
        font-weight: 500;
        color: #fff;
    }
.select-dropdown.dropdown-content li.selected {
    background-color: rgba(0, 0, 0, 0.1);
}
/* Los filtros secundarios del panel de Procesos, plegados detras del boton de tune que
   vive arriba a la derecha del encabezado. El contador se apoya sobre ese boton y queda a
   la vista con el bloque cerrado: un filtro que sigue filtrando sin mostrarse necesita
   avisar que esta puesto. */
.wrapper-context .context .header .more.advanced {
    color: #9e9e9e;
    overflow: visible;
}

    .wrapper-context .context .header .more.advanced i {
        font-size: 19px;
    }

    .wrapper-context .context .header .more.advanced.open {
        background: linear-gradient(90deg, #2e60c4 5%, rgba(255, 255, 255, 0.05) 60%);
        color: #fff;
    }

    .wrapper-context .context .header .more.advanced .counter {
        display: none;
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 17px;
        height: 17px;
        line-height: 17px;
        padding: 0 5px;
        border-radius: 9px;
        background: #2e60c4;
        color: #fff;
        font-size: 11px;
        font-weight: bold;
        text-align: center;
        box-sizing: border-box;
    }

.wrapper-advanced .fields {
    display: none;
}

.wrapper-handpick {
    margin: 15px 0;
}

    .wrapper-handpick .handpick {
        background: rgba(255, 255, 255, .05);
        border-radius: 5px;
        padding: 0 10px;
        padding-bottom: 10px;
        max-height: 245px;
        overflow: auto;
    }
        .wrapper-handpick .handpick:has(.blank) {
            padding-bottom: 0;
        }
        .wrapper-handpick .handpick .group {
        }

            .wrapper-handpick .handpick .group .header {
                color: #bebebe;
                font-weight: 500;
                font-size: 13px;
                margin: 0;
            }
       
            .wrapper-handpick .handpick .group .content {
            }

                .wrapper-handpick .handpick .group .content .element {
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    transition: all .3s ease-in-out;
                }
                .wrapper-handpick .handpick .group .content .blank {
                    font-weight: 600;
                    color: #7c7c7c;
                    height: 35px;
                    line-height: 35px;
                    font-size: 13px;
                }
                    .wrapper-handpick .handpick .group .content .element.active {
                        background: rgba(255, 255, 255, .05);
                        border-radius: 5px;
                        padding: 0 10px;
                        transition: all .3s ease-in-out;
                        font-weight: 600;
                    }
                        .wrapper-handpick .handpick .group .content .element.active .circle {
                            display: flex;
                            transition: all .3s ease-in-out;
                        }
                    .wrapper-handpick .handpick .group .content .element .circle {
                        display: none;
                        width: 7px;
                        height: 7px;
                        border-radius: 50%;
                        margin-right: 10px;
                        transition: all .3s ease-in-out;
                        background: #2196F3;
                    }

                    .wrapper-handpick .handpick .group .content .element .hour {
                        flex: 0 0 35px;
                        font-weight: 500;
                        color: #7c7c7c;
                        margin-right: 5px;
                        height: 35px;
                        line-height: 35px;
                        font-size: 13px;
                    }

                    .wrapper-handpick .handpick .group .content .element span {
                        color: white;
                        font-size: 13px;
                        line-height: 35px;
                    }
.customizable{
    display: none;
}

.graphics-environment-fields,
.graphics-process-fields {
    display: none;
}

.graphics-chart {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px);
    padding: 15px;
}

.graphics-workspace {
    height: 100%;
    min-height: 0;
}

.graphics-chart-toolbar {
    align-items: center;
    background: #222327;
    border-radius: 7px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: stretch;
    padding: 12px;
    position: relative;
}

/* height y no min-height + height:auto. Con el alto libre, el grid crecia con el
   contenido: con 42 senales el panel de Distribucion media 6247px y el del grafico 6316px
   en una pantalla de 950px, y el overflow:auto que los dos declaran no se usaba nunca --
   lo que escroleaba era la pagina, 6,7 pantallas, arrastrando la barra y el panel
   izquierdo fuera de vista. Con el alto clavado a la pantalla cada panel escrolea lo suyo:
   la lista de subgraficos a la izquierda, la figura alta a la derecha. Ademas es lo que
   hace que #graphics-progress sticky tenga un scrollport de verdad contra el cual pegarse.
   El apilado de <=600px lo devuelve a height:auto: ahi el scroll de pagina es el correcto. */
.graphics-chart-grid {
    display: grid;
    flex: 1 0 auto;
    gap: 10px;
    grid-template-columns: 360px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: calc(100dvh - 64px - 30px);
    min-height: 420px;
}

.graphics-subplot-panel,
.graphics-plot-panel {
    background: #222327;
    border-radius: 7px;
    min-height: 0;
}

.graphics-subplot-panel {
    display: flex;
    flex-direction: column;
    grid-column: 1;
    grid-row: 2;
    overflow: hidden;
    padding: 10px;
}

.graphics-plot-panel {
    display: flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 1 / 3;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}

.graphics-plot-panel::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 5px;
}

.graphics-plot-panel::-webkit-scrollbar {
    background-color: transparent;
    height: 8px;
    width: 8px;
}

.graphics-plot-panel::-webkit-scrollbar-corner {
    background-color: transparent;
}

.graphics-plot-panel::-webkit-scrollbar-thumb {
    background-color: #1e77e5;
    border-radius: 5px;
}

.graphics-plot {
    flex: 0 0 auto;
    min-height: 0;
    width: 100%;
}

.graphics-chart-title strong {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.graphics-chart-title span {
    color: rgba(255, 255, 255, .45);
    font-size: 12px;
    font-weight: 500;
}

.graphics-tool-action {
    align-items: center;
    background: rgba(255, 255, 255, .05);
    border: 0;
    border-radius: 5px;
    color: rgba(255, 255, 255, .72);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    gap: 5px;
    height: 35px;
    padding: 0 10px;
    transition: .2s ease;
}

.graphics-chart-toolbar .graphics-tool-action {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}

/* La barra entra en UNA fila. Antes eran seis controles a 92px minimo cada uno: al
   ancho real del panel se apilaban en cinco filas y la barra ocupaba 297px, mas alto
   que el panel de Distribucion que controla (228px). Ahora son cuatro: dos con texto y
   dos cuadrados de solo icono. La resolucion se fue al panel de traer, que es donde
   vive el resto de la consulta.
   #graphics-arrange-menu y #graphics-more-menu se anclan a la barra a proposito
   (left/right: 12px en <=600px solo tienen sentido contra la barra), asi que
   .graphics-tool-menu NO lleva position. */
.graphics-chart-toolbar .graphics-tool-menu {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
}

/* El wrapper del menu de mas acciones no crece: solo envuelve un boton cuadrado. Sin
   esto heredaba el flex del de Ordenar y ocupaba 104px para mostrar 35. */
.graphics-chart-toolbar .graphics-tool-menu.is-icon {
    flex: 0 0 auto;
}

.graphics-chart-toolbar .graphics-tool-action.is-icon {
    flex: 0 0 auto;
    min-width: 0;
    padding: 0;
    width: 35px;
}

.graphics-tool-action:focus {
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .72);
}

.graphics-tool-action:hover {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

.graphics-tool-action i {
    font-size: 18px;
}

#graphics-clear-all:hover {
    background: rgba(233, 88, 88, .18);
    color: #ff8f8f;
}

#graphics-undo[disabled] {
    cursor: default;
    opacity: .35;
    pointer-events: none;
}

#graphics-resolution {
    background: rgba(255, 255, 255, .05);
    border: 0;
    border-radius: 5px;
    box-shadow: none;
    box-sizing: border-box;
    color: rgba(255, 255, 255, .72);
    cursor: pointer;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    height: 35px;
    line-height: 35px;
    outline: none;
    padding: 0 8px;
    transition: .2s ease;
    width: auto;
}

#graphics-resolution:focus,
#graphics-resolution:hover {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

#graphics-resolution option {
    background: #222327;
    color: #ffffff;
}

/* La nota va SOBRE la linea de la etiqueta, a la derecha de "Resolucion".
   Debajo del input sumaba 39px de alto -- 35 de line-height heredados de cuando la nota
   vivia en la barra de herramientas, mas 4 de padding -- y le daba a este campo un ritmo
   que ningun otro del panel tiene: 97px de alto contra 58, el salto de arriba en 0 y el de
   abajo en 12, contra los 10 de Origen, Estado y Proceso.
   Sigue siendo un selector de ID a proposito: como regla de clase perdia por
   especificidad contra esta misma y el font-size no se aplicaba. */
#graphics-resolution-note {
    color: rgba(255, 255, 255, .45);
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
    white-space: nowrap;
}

#graphics-arrange-menu,
#graphics-more-menu {
    background: #282a31;
    border-radius: 7px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .38);
    display: none;
    flex-direction: column;
    gap: 2px;
    left: 12px;
    min-width: 210px;
    padding: 5px;
    position: absolute;
    top: calc(100% + 6px);
    z-index: 12;
}

#graphics-arrange-menu.open,
#graphics-more-menu.open {
    display: flex;
}

#graphics-arrange-menu [data-arrange],
#graphics-more-menu .graphics-more-option {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: rgba(255, 255, 255, .72);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    min-height: 32px;
    padding: 0 8px;
    text-align: left;
    transition: .2s ease;
    width: 100%;
}

#graphics-arrange-menu [data-arrange]:hover,
#graphics-more-menu .graphics-more-option:hover {
    background: rgba(255, 255, 255, .06);
    color: #ffffff;
}

#graphics-arrange-menu [data-arrange] i,
#graphics-more-menu .graphics-more-option i {
    font-size: 17px;
}

/* El de mas acciones es el ultimo boton de la barra: se abre hacia la izquierda para no
   salirse del panel. min-width menor que el de Ordenar porque son dos filas cortas. */
#graphics-more-menu {
    left: auto;
    min-width: 178px;
    right: 12px;
}

/* Quitar todo es el unico destructivo que queda a mano: se pinta como tal para que no se
   confunda con Limpiar grafico, que esta justo arriba y no pierde nada. */
#graphics-more-menu .graphics-more-option.is-danger {
    color: rgba(233, 88, 88, .92);
}

#graphics-more-menu .graphics-more-option.is-danger:hover {
    background: rgba(233, 88, 88, .18);
    color: #ffffff;
}

/* La resolucion en el panel de traer: es un parametro de la consulta y va con el rango.
   El campo no lleva margen propio y el .wrapper-select conserva los 10px que usan todos
   los demas, asi que mide y separa exactamente igual que Origen, Estado o Proceso.
   position: relative es el ancla de la nota. */
.graphics-resolution-field {
    position: relative;
}

.graphics-resolution-field .wrapper-select {
    margin-bottom: 10px;
}

/* Wrapper del icono + #graphics-progress-text que agrego el cshtml. Como bloque no se
   centraba contra el boton de cancelar ni empujaba el boton al borde. */
.graphics-progress-info {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    gap: 6px;
    min-width: 0;
}

.graphics-progress-info i {
    font-size: 17px;
}

/* sticky y no estatico: .graphics-plot-panel escrolea desde la fase 4 y el JS le fija a
   #graphics-plot el alto de todos los subgraficos sumados. En flujo normal, el contador
   quedaba a 1700px de altura dentro de un scrollport de 800 y el usuario no volvia a ver
   ni "2 de 5" ni el boton Cancelar. Anclado abajo acompana el scroll. */
#graphics-progress {
    align-items: center;
    background: rgba(255, 255, 255, .05);
    border-radius: 5px;
    bottom: 8px;
    box-sizing: border-box;
    display: none;
    flex: 0 0 auto;
    gap: 8px;
    height: 35px;
    margin-top: auto;
    padding: 0 8px;
    position: sticky;
    z-index: 3;
}

#graphics-progress.active {
    display: flex;
}

#graphics-progress-text {
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#graphics-cancel {
    align-items: center;
    background: rgba(255, 255, 255, .06);
    border: 0;
    border-radius: 4px;
    color: rgba(255, 255, 255, .6);
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    gap: 4px;
    height: 24px;
    justify-content: center;
    min-width: 24px;
    padding: 0 6px;
    transition: .2s ease;
}

#graphics-cancel:hover {
    background: rgba(233, 88, 88, .18);
    color: #ff8f8f;
}

#graphics-cancel i {
    font-size: 16px;
}

.graphics-panel-label {
    color: rgba(255, 255, 255, .5);
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 700;
    gap: 3px;
    height: 28px;
    line-height: 28px;
    min-width: 0;
    text-transform: uppercase;
}

.graphics-subplots-container {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
}

.graphics-subplots-container::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 5px;
}

.graphics-subplots-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

.graphics-subplots-container::-webkit-scrollbar-corner {
    background-color: transparent;
}

.graphics-subplots-container::-webkit-scrollbar-thumb {
    background-color: #1e77e5;
    border-radius: 5px;
}

/* margin-bottom: la zona terminaba exactamente donde empezaba la lista de subgraficos
   (separacion medida: 0px) y las dos cajas punteadas se leian como una sola. */
.graphics-unassigned-zone {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 7px;
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    margin-top: 8px;
    padding: 8px;
    transition: .2s ease;
}

/* Vacia ocupaba 143px, el 55% del panel, para no mostrar nada: rotulo + lista con
   min-height 52 + un hint que se partia en dos lineas. Colapsada es una sola fila y el
   rotulo y el hint van uno al lado del otro. */
.graphics-unassigned-zone.is-empty {
    align-items: center;
    flex-direction: row;
    gap: 8px;
    min-height: 36px;
    padding: 0 10px;
}

.graphics-unassigned-zone.is-empty .graphics-unassigned-label {
    flex: 0 0 auto;
}

.graphics-unassigned-zone.is-empty .graphics-unassigned-hint {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.graphics-unassigned-zone.is-empty #graphics-unassigned {
    height: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

/* Mientras hay un arrastre en curso vuelve a abrirse: Sortable resuelve el destino por el
   rect del elemento, y una lista de alto 0 no se puede soltar. */
.graphics-unassigned-zone.is-empty.is-dragging {
    flex-direction: column;
    min-height: 0;
    padding: 8px;
}

.graphics-unassigned-zone.is-empty.is-dragging .graphics-unassigned-hint {
    text-align: left;
}

.graphics-unassigned-zone.is-empty.is-dragging #graphics-unassigned {
    height: auto;
    min-height: 52px;
}

.graphics-subplot-panel.is-dragging .graphics-unassigned-zone {
    border-color: rgba(54, 144, 241, .30);
    border-style: dashed;
}

.graphics-unassigned-zone.is-dragover {
    background: rgba(30, 119, 229, .10);
    border-color: rgba(54, 144, 241, .55);
    border-style: dashed;
}

.graphics-unassigned-zone:has(.graphics-sortable-ghost) {
    background: rgba(30, 119, 229, .10);
    border-color: rgba(54, 144, 241, .55);
}

.graphics-unassigned-zone .graphics-axis-title {
    margin-bottom: 0;
}

/* El rotulo y la pista de la zona los agrego el cshtml y no tenian regla: sin esto
   heredaban el cuerpo (blanco, 14px) y gritaban por encima del panel. El JS usa la pista
   como contador ("3 serie(s) fuera del grafico") y la esconde cuando la zona esta vacia,
   que es cuando habla #graphics-unassigned:empty::after. */
.graphics-unassigned-label {
    color: rgba(255, 255, 255, .5);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-transform: uppercase;
}

.graphics-unassigned-hint {
    color: rgba(255, 255, 255, .38);
    font-size: 11px;
    font-weight: 600;
    line-height: 15px;
}

#graphics-unassigned {
    max-height: 164px;
    min-height: 52px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 2px;
}

#graphics-unassigned::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 5px;
}

#graphics-unassigned::-webkit-scrollbar {
    background-color: transparent;
    height: 8px;
    width: 8px;
}

#graphics-unassigned::-webkit-scrollbar-corner {
    background-color: transparent;
}

#graphics-unassigned::-webkit-scrollbar-thumb {
    background-color: #1e77e5;
    border-radius: 5px;
}

.graphics-subplot-box {
    background: rgba(255, 255, 255, .04);
    border-radius: 7px;
    padding: 8px;
}

/* .is-carril NO cambia colores. El chip ya dice "ESTADO DE EQUIPO" con todas las letras:
   el color no agregaba informacion, competia con ella. Se fueron el tinte de fondo, la
   barra lateral y el titulo celeste. El azul queda reservado para una sola cosa, que es
   senalar donde se puede soltar mientras se arrastra.
   De la clase sobrevive solo lo funcional: un carril no necesita 92px de zona de eje. */
.graphics-subplot-box.is-carril .graphics-axis-zone {
    min-height: 64px;
}

.graphics-subplot-header {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 8px;
}

/* Titulo y chip juntos a la izquierda; la X se queda pegada a la derecha por el
   space-between del header. min-width: 0 para que el titulo pueda recortarse con
   ellipsis en vez de empujar el chip fuera de la caja. */
.graphics-subplot-heading {
    align-items: center;
    display: flex;
    gap: 6px;
    min-width: 0;
}

.graphics-subplot-header strong {
    color: #f2f2f2;
    font-size: 13px;
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La categoria en palabras. El azul del carril se queda como refuerzo, pero lo que
   explica de que tipo es el subgrafico es este chip. */
/* max-width en px y no en %: el % se resolvia contra .graphics-subplot-heading, cuyo
   ancho lo define su propio contenido, asi que un titulo corto daba un encabezado angosto
   y el chip se recortaba aunque hubiera lugar de sobra. El que cede es el titulo. */
.graphics-subplot-tag {
    background: rgba(255, 255, 255, .07);
    border-radius: 4px;
    color: rgba(255, 255, 255, .58);
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 16px;
    max-width: 190px;
    overflow: hidden;
    padding: 0 6px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.graphics-subplot-remove {
    align-items: center;
    background: transparent;
    border: 0;
    flex: 0 0 auto;
    border-radius: 5px;
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
    display: flex;
    height: 28px;
    justify-content: center;
    padding: 0;
    transition: .2s ease;
    width: 28px;
}

.graphics-subplot-remove:hover {
    background: rgba(255, 255, 255, .06);
    color: #ffffff;
}

.graphics-subplot-remove i {
    font-size: 18px;
}

.graphics-axis-zones {
    display: grid;
    gap: 7px;
    grid-template-columns: 1fr 1fr;
}

/* Dos cambios.
   1. Borde solido y no punteado. Cada subgrafico traia DOS cajas punteadas, y arriba la de
      "Sin asignar": el panel entero se leia como una hoja cuadriculada. El punteado ahora
      aparece solo mientras hay un arrastre, que es cuando "solta aca" significa algo.
   2. flex, y la lista de adentro con flex:1. El destino visual media 92px pero Sortable
      escucha sobre .graphics-serie-list, que media 46: se apuntaba a la caja y se le
      erraba a la lista. Por eso costaba meter el PRIMER elemento. Ahora la caja punteada
      y el destino real son la misma superficie. */
.graphics-axis-zone {
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    min-height: 92px;
    padding: 7px;
}

/* Mientras se arrastra: punteado y resaltado, en las zonas de eje y en la de Sin asignar. */
.graphics-subplot-panel.is-dragging .graphics-axis-zone {
    border-color: rgba(54, 144, 241, .30);
    border-style: dashed;
}

.graphics-subplot-panel.is-dragging .graphics-axis-zone:has(.graphics-sortable-ghost) {
    background: rgba(30, 119, 229, .10);
    border-color: rgba(54, 144, 241, .60);
}

/*
.graphics-axis-zone[data-side="left"] {
    border-color: rgba(54, 144, 241, .42);
}

.graphics-axis-zone[data-side="right"] {
    border-color: rgba(108, 255, 224, .34);
}
*/

/* En reposo una lista vacia solo dice "Vacio": repetir "arrastra series aca" en las dos
   zonas de cada subgrafico era mucho texto para poca informacion. La instruccion aparece
   cuando hay algo en la mano. */
/* Mientras se arrastra el destino se agranda. En reposo la lista se queda con lo que
   sobra despues del rotulo del eje (54px de una caja de 92); 72px es un blanco comodo y
   solo cuesta alto en el momento en que hace falta. */
.graphics-subplot-panel.is-dragging .graphics-serie-list {
    min-height: 72px;
}

.graphics-subplot-panel.is-dragging .graphics-serie-list:empty::after,
.graphics-subplot-panel.is-dragging .graphics-serie-list.is-empty::after {
    color: rgba(158, 203, 255, .78);
    content: "Soltá acá";
}

.graphics-axis-title {
    color: rgba(255, 255, 255, .45);
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 6px;
}

.graphics-serie-list {
    flex: 1 1 auto;
    min-height: 46px;
}

.graphics-serie-list:empty::after,
/* Solo las listas de subgrafico. #graphics-unassigned NO va aca: su zona ya tiene
   .graphics-unassigned-hint, que ademas hace de contador ("3 serie(s) fuera del
   grafico"). Con las dos reglas la caja mostraba dos veces el mismo mensaje. */
.graphics-serie-list.is-empty::after {
    align-items: center;
    color: rgba(255, 255, 255, .30);
    content: "Vacio";
    display: flex;
    font-size: 11px;
    font-weight: 600;
    justify-content: center;
    min-height: 44px;
    text-align: center;
}

.graphics-serie-card {
    align-items: center;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 5px;
    color: rgba(255, 255, 255, .82);
    cursor: grab;
    gap: 7px;
    margin-bottom: 6px;
    padding: 7px;
    user-select: none;
    display: flex;
}

.graphics-serie-card.is-hidden {
    opacity: .48;
}

.graphics-serie-card:active {
    cursor: grabbing;
}

.graphics-serie-visibility {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: rgba(255, 255, 255, .55);
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    height: 24px;
    justify-content: center;
    padding: 0;
    transition: .2s ease;
    width: 24px;
}

.graphics-serie-visibility:hover {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

.graphics-serie-visibility i {
    font-size: 17px;
}

.graphics-serie-remove {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: rgba(255, 255, 255, .38);
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    height: 24px;
    justify-content: center;
    padding: 0;
    transition: .2s ease;
    width: 24px;
}

.graphics-serie-remove:hover {
    background: rgba(233, 88, 88, .18);
    color: #ff8f8f;
}

.graphics-serie-remove i {
    font-size: 17px;
}

.graphics-serie-info {
    display: flex;
    flex: 1 1 auto;
    gap: 5px;
    min-width: 0;
}

.graphics-serie-card strong,
.graphics-serie-card span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.graphics-serie-card strong {
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.graphics-serie-card span {
    color: rgba(255, 255, 255, .45);
    font-size: 12px;
    font-weight: 500;
    /*margin-top: 2px;*/
}

.graphics-sortable-ghost {
    opacity: .35;
}

.graphics-sortable-chosen {
    border-color: #3690f1;
}

.graphics-plot-empty {
    align-items: center;
    color: rgba(255, 255, 255, .42);
    display: flex;
    flex-direction: column;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    inset: 0;
    justify-content: center;
    position: absolute;
    text-align: center;
}

.graphics-plot-loading {
    align-items: center;
    background: rgba(34, 35, 39, .82);
    color: rgba(255, 255, 255, .72);
    display: none;
    flex-direction: column;
    font-size: 12px;
    font-weight: 700;
    gap: 10px;
    inset: 0;
    justify-content: center;
    position: absolute;
    text-align: center;
    z-index: 5;
}

.graphics-plot-loading.active {
    display: flex;
}

.graphics-plot-empty i {
    color: rgba(54, 144, 241, .9);
    font-size: 32px;
}

.graphics-find-header {
    margin-left: auto;
}

.graphics-find-header .filter {
    height: 35px;
}

.graphics-date-time-group {
    display: block;
}

.graphics-date-time-group .wrapper-input {
    margin-bottom: 0;
}

.graphics-date-time-group .wrapper-input input {
    color: #ffffff !important;
}

.graphics-datetime-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.graphics-datetime-picker {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scaleX(0.8) scaleY(0.8);
    background: #202126;
    border: none;
    border-radius: 7px;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .45);
    box-sizing: border-box;
    color: #f2f2f2;
    font-family: inherit;
    font-size: 13px;
    width: 520px;
    max-width: calc(100vw - 30px);
    max-height: calc(100vh - 30px);
    display: flex;
    flex-direction: column;
    z-index: 10050;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.graphics-datetime-picker.open {
    opacity: 1;
    transform: translate(-50%, -50%) scaleX(1) scaleY(1);
    pointer-events: auto;
}

.graphics-picker-header {
    align-items: center;
    display: grid;
    gap: 6px;
    grid-area: header;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
}

.graphics-picker-header button,
.graphics-picker-footer button {
    background: rgba(255, 255, 255, .06);
    border: none;
    border-radius: 5px;
    color: rgba(255, 255, 255, .82);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    height: 32px;
    min-width: 32px;
    padding: 0 9px;
    position: relative;
    z-index: 1;
    transition: .2s ease;
    line-height: 32px;
}

.graphics-picker-header button:hover,
.graphics-picker-footer button:hover {
    background: rgba(54, 144, 241, .22);
    border-color: rgba(54, 144, 241, .35);
    color: #ffffff;
}

.graphics-picker-header button {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 0;
}

.graphics-picker-header button i {
    font-size: 18px;
}

.graphics-picker-month,
.graphics-picker-time-title {
    align-items: center;
    background: rgba(255, 255, 255, .05);
    border: none;
    border-radius: 5px;
    box-sizing: border-box;
    display: flex;
    height: 32px;
    justify-content: center;
    font-size: 13px;
}

.graphics-picker-month {
    border: 0;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

.graphics-picker-time-title {
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    font-weight: 700;
    grid-area: time-title;
}

.graphics-picker-calendar {
    display: grid;
    gap: 3px;
    grid-area: calendar;
    grid-template-columns: repeat(7, 1fr);
    min-width: 0;
}

.graphics-picker-calendar span,
.graphics-picker-calendar button {
    align-items: center;
    background: transparent;
    border: 0;
    box-sizing: border-box;
    color: rgba(255, 255, 255, .82);
    display: flex;
    font-family: inherit;
    font-size: 13px;
    justify-content: center;
    padding: 0;
}

.graphics-picker-calendar span {
    color: rgba(255, 255, 255, .5);
    font-weight: 600;
    height: 24px;
}

.graphics-picker-calendar button {
    aspect-ratio: 1 / 1;
    border-radius: 5px;
    cursor: pointer;
    height: auto;
    min-height: 0;
    width: 100%;
}

.graphics-picker-calendar button:hover {
    background: rgba(255, 255, 255, .07);
    color: #ffffff;
}

.graphics-picker-calendar button.muted {
    color: rgba(54, 144, 241, .62);
}

.graphics-picker-calendar button.selected {
    background: #3690f1;
    color: #ffffff;
    font-weight: 700;
}

.graphics-picker-time,
.graphics-picker-time-single {
    align-content: start;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.graphics-picker-time-column,
.graphics-picker-time-single {
    min-width: 0;
}

.graphics-picker-time-single {
    grid-area: time;
    min-height: 0;
}

.graphics-picker-time-column label,
.graphics-picker-time-single label {
    color: rgba(255, 255, 255, .5);
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 5px;
    padding-left: 2px;
}

.graphics-picker-time-list {
    background: rgba(255, 255, 255, .04);
    border: none;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px;
}

.graphics-picker-time-list::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 5px;
}

.graphics-picker-time-list::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

.graphics-picker-time-list::-webkit-scrollbar-corner {
    background-color: transparent;
}

.graphics-picker-time-list::-webkit-scrollbar-thumb {
    background-color: #1e77e5;
    border-radius: 5px;
}

.graphics-picker-time-list button {
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: rgba(255, 255, 255, .68);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    height: 30px;
    padding: 4px 8px;
}

.graphics-picker-time-list button:hover {
    background: rgba(255, 255, 255, .07);
    color: #ffffff;
}

.graphics-picker-time-list button.active {
    background: #3690f1;
    color: #ffffff;
}

.graphics-picker-footer {
    display: flex;
    gap: 6px;
    grid-area: footer;
    justify-content: flex-end;
}

.graphics-picker-footer .graphics-picker-ok,
.graphics-picker-footer .graphics-picker-now,
.graphics-picker-footer .graphics-picker-cancel {
    margin: 0;
    min-width: 74px;
}

@media only screen and (max-width : 560px) {
    .graphics-picker-time-list {
        max-height: 160px;
    }
}

.graphics-environment-toolbar,
.graphics-process-toolbar {
    align-items: end;
    display: flex;
    gap: 8px;
}

.graphics-process-filters {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
}

.graphics-process-toolbar {
    margin-top: 4px;
}

.graphics-environment-toolbar .wrapper-select,
.graphics-process-toolbar .wrapper-select,
.graphics-process-toolbar .wrapper-process-picker,
.graphics-environment-toolbar .wrapper-environment-picker {
    flex: 1;
    min-width: 0;
}

.graphics-environment-fields .graphics-environment-toolbar .wrapper-select .select-wrapper {
    width: 100%;
}

.graphics-process-toolbar .wrapper-process-picker > label,
.graphics-environment-toolbar .wrapper-environment-picker > label {
    color: #777;
    display: block;
    font-size: 12px !important;
    font-weight: bold;
    margin-bottom: 5px;
    padding-left: 10px;
}

.graphics-process-picker .options,
.graphics-environment-picker .options {
    max-height: 430px;
    overflow: hidden;
    top: calc(100% + 4px);
    z-index: 20;
}

.graphics-process-picker .options .filter,
.graphics-environment-picker .options .filter {
    margin: 8px;
}

.graphics-process-options,
.graphics-environment-options {
    max-height: 372px;
    overflow-y: auto;
    padding-bottom: 4px;
}

/* El scroll del proyecto, que a estas listas les faltaba: tenian overflow-y sin una sola
   regla de ::-webkit-scrollbar, asi que salia la barra gris del navegador en medio de un
   panel oscuro. Son los mismos cuatro valores de .wrapper-select .dropdown-content, que es
   el desplegable de referencia -- pista negra translucida, pulgar #1e77e5, 8 px. Va aca y
   no en un selector comun porque el resto del CSS repite el bloque por componente. */
.graphics-process-options::-webkit-scrollbar-track,
.graphics-environment-options::-webkit-scrollbar-track,
.company-options::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .4);
    border-radius: 5px;
}

.graphics-process-options::-webkit-scrollbar,
.graphics-environment-options::-webkit-scrollbar,
.company-options::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

.graphics-process-options::-webkit-scrollbar-corner,
.graphics-environment-options::-webkit-scrollbar-corner,
.company-options::-webkit-scrollbar-corner {
    background-color: transparent;
}

.graphics-process-options::-webkit-scrollbar-thumb,
.graphics-environment-options::-webkit-scrollbar-thumb,
.company-options::-webkit-scrollbar-thumb {
    background-color: #1e77e5;
    border-radius: 5px;
}

.graphics-process-picker .options .group,
.graphics-environment-picker .options .group {
    padding-bottom: 6px;
}

.graphics-process-picker .options .header,
.graphics-environment-picker .options .header {
    color: rgba(255, 255, 255, .45);
    font-size: 11px;
    font-weight: 700;
    line-height: 28px;
    padding: 0 10px;
    text-transform: uppercase;
}

.graphics-process-picker .options .element,
.graphics-environment-picker .options .element {
    min-height: 36px;
}

.graphics-process-picker .options .element.active,
.graphics-environment-picker .options .element.active {
    background: rgba(54, 144, 241, .2);
    color: #fff;
}

.graphics-process-picker .options .element .process-info,
.graphics-environment-picker .options .element .process-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.graphics-process-picker .options .element .process-info strong,
.graphics-process-picker .options .element .process-info span,
.graphics-environment-picker .options .element .process-info strong,
.graphics-environment-picker .options .element .process-info span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.graphics-process-picker .options .element .process-info strong,
.graphics-environment-picker .options .element .process-info strong {
    color: #fff;
    font-size: 12px;
    line-height: 16px;
}

.graphics-process-picker .options .element .process-info span,
.graphics-environment-picker .options .element .process-info span {
    color: rgba(255, 255, 255, .48);
    font-size: 11px;
    line-height: 14px;
}

.graphics-environment-toolbar .wrapper-select .dropdown-content,
.graphics-process-toolbar .wrapper-select .dropdown-content,
.graphics-process-filters .wrapper-select .dropdown-content {
    max-height: 400px;
}

.graphics-environment-toolbar .wrapper-filter,
.graphics-process-toolbar .wrapper-filter {
    flex: 0 0 auto;
    /*margin-bottom: 10px;*/
}

.graphics-environment-toolbar .wrapper-filter .filter,
.graphics-process-toolbar .wrapper-filter .filter {
    height: 35px;
    line-height: 35px;
    padding-bottom: 0;
    padding-top: 0;
    white-space: nowrap;
}

#add-process-block {
    background: rgba(31, 63, 107, 0.7);
    color: #3690f1;
}

.graphics-selection-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.graphics-available-environments {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.graphics-available-environments > label {
    color: #777;
    font-size: 12px;
}

.graphics-environment-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.graphics-environment-option {
    align-items: center;
    background: #f7f7f7;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    color: #444;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    text-align: left;
    width: 100%;
}

.graphics-environment-option i {
    color: #2196F3;
    font-size: 18px;
}

.graphics-empty {
    background: rgba(255, 255, 255, .04);
    border-radius: 5px;
    color: rgba(255, 255, 255, .45);
    font-size: 13px;
    font-weight: 500;
    padding: 12px;
    text-align: center;
}

.graphics-selection-item {
    background: rgba(255, 255, 255, .04);
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}

.graphics-selection-header {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    gap: 8px;
    justify-content: space-between;
    padding-bottom: 10px;
}

.graphics-selection-title {
    align-items: center;
    display: flex;
    flex: 1;
    gap: 8px;
    min-width: 0;
}

.graphics-selection-title i {
    color: rgba(54, 144, 241, .9);
    flex: 0 0 auto;
    font-size: 18px;
}

.graphics-selection-title-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.graphics-selection-item strong {
    color: #f2f2f2;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.graphics-selection-title-text span {
    color: rgba(255, 255, 255, .48);
    font-size: 11px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.graphics-selection-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

.graphics-selection-remove,
.graphics-select-all-action {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: rgba(255, 255, 255, .55);
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    height: 30px;
    justify-content: center;
    padding: 0;
    transition: .2s ease;
    width: 30px;
}

.graphics-select-all-action {
    color: rgba(255, 255, 255, .5);
}

.graphics-select-all-action span {
    background: rgba(255, 255, 255, .32);
    border-radius: 50%;
    height: 7px;
    transition: .2s ease;
    width: 7px;
}

.graphics-select-all-action:hover,
.graphics-select-all-action.active {
    background: rgba(255, 255, 255, .06);
    color: #ffffff;
}

.graphics-select-all-action.active span {
    background: #ffffff;
    height: 8px;
    width: 8px;
}

.graphics-selection-remove:hover {
    background: rgba(255, 255, 255, .06);
    color: #ffffff;
}

.graphics-selection-remove i {
    font-size: 18px;
    line-height: 1;
}

.graphics-block-select {
    margin-bottom: 0;
}

.graphics-sensor-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.graphics-sensor-multiselect {
    position: relative;
}

.graphics-sensor-dropdown-trigger {
    align-items: center;
    background: rgba(255, 255, 255, .05);
    border: 0;
    border-radius: 5px;
    color: rgba(255, 255, 255, .78);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    height: 35px;
    justify-content: space-between;
    padding: 0 8px 0 10px;
    text-align: left;
    transition: .2s ease;
    width: 100%;
}

.graphics-sensor-dropdown-trigger:hover,
.graphics-sensor-multiselect.open .graphics-sensor-dropdown-trigger {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

.graphics-sensor-dropdown-trigger span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.graphics-sensor-dropdown-trigger i {
    color: rgba(255, 255, 255, .5);
    flex: 0 0 auto;
    font-size: 19px;
    transition: .2s ease;
}

.graphics-sensor-multiselect.open .graphics-sensor-dropdown-trigger i {
    color: #ffffff;
    transform: rotate(180deg);
}

.graphics-sensor-dropdown {
    background: #282a31;
    border-radius: 5px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .28);
    display: none;
    left: 0;
    max-height: 240px;
    overflow-y: auto;
    padding: 5px;
    position: absolute;
    top: calc(100% + 5px);
    width: 100%;
    z-index: 8;
}

.graphics-sensor-multiselect.open .graphics-sensor-dropdown {
    display: block;
}

.graphics-sensor-dropdown::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 5px;
}

.graphics-sensor-dropdown::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

.graphics-sensor-dropdown::-webkit-scrollbar-corner {
    background-color: transparent;
}

.graphics-sensor-dropdown::-webkit-scrollbar-thumb {
    background-color: #1e77e5;
    border-radius: 5px;
}

.graphics-sensor-option {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: rgba(255, 255, 255, .38);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    min-height: 32px;
    padding: 0 8px;
    text-align: left;
    transition: .2s ease;
    width: 100%;
}

.graphics-sensor-option:hover {
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .72);
}

.graphics-sensor-option.active {
    /*background: rgba(255, 255, 255, .06);*/
    color: #ffffff;
}

.graphics-sensor-mark {
    display: none;
}

.graphics-sensor-option span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.graphics-sensor-checks {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.graphics-check {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
    display: flex;
    font-size: 12px;
    font-family: inherit;
    min-height: 34px;
    padding: 0 10px;
    text-align: left;
    transition: .2s ease;
    width: 100%;
}

.graphics-check:not(.active) {
    opacity: .48;
}

.graphics-check:hover {
    background: rgba(255, 255, 255, .04);
    opacity: 1;
    color: #ffffff;
}

.graphics-check.active {
    background: transparent;
    color: #ffffff;
}

.graphics-check span {
    color: inherit;
    font-size: 12px;
    font-weight: 500;
    height: 34px !important;
    line-height: 34px !important;
    padding-left: 0 !important;
}

.attenuate {
    color: #9d9d9d;
}
@media only screen and (max-width : 1660px) {
    .reveal {
        justify-content: start;
        overflow: auto;
    }
}
@media only screen and (max-width : 1340px) {
    .contenedor.hybrid .layout .grid .collections {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media only screen and (max-width : 1150px) {
    .contenedor.hybrid .layout .grid {
        grid-template-columns: 1fr;
    }
    .contenedor.hybrid .layout .grid .collections {
        grid-template-columns: repeat(3, 1fr);
    }
    .contenedor.hybrid .summary {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width : 992px) {
    .layout-container {
        padding-left: 0;
    }
    .collapse-sidenav .layout-container {
        padding-left: 0;
    }
    nav,
    .collapse-sidenav nav {
        left: 0;
    }
    .reveal {
        width: 100%;
        left: 0;
    }

    nav .navbar {
        margin-left: 50px;
    }
}

@media only screen and (max-height : 864px) {
    .contenedor, .reveal {
        align-items: start;
    }
    .overlay .grid .module {
        justify-content: start;
        align-items: start;
        overflow: auto;
    }
}

@media only screen and (max-width : 650px){
    .wrapper-menu, .wrapper-menu .menu {
        width: 100%;
    }
}
@media only screen and (max-width : 600px) {
    .layout-container {
        padding-top: 56px;
    }
    nav .wrapper-menu-layer {
        top: 100%;
        right: 8px;
        width: min(300px, calc(100vw - 16px));
    }
    .contenedor, .reveal {
        width: 100%;
        height: calc(100dvh - 56px);
    }

    .overview .overview-mode-switch {
        width: 100%;
        display: flex;
    }

/* Unica excepcion a la pantalla sin scroll: en un telefono seis cajas apiladas
   no entran de ninguna forma, asi que aca se suelta el alto y escrolea la
   pagina (es lo mismo que hace .graphics-chart-grid). */
    .overview .overview-main-layout,
    .overview[data-mode="camaras"] .overview-cameras-dashboard,
    .overview .overview-chart-grid {
        grid-template-columns: 1fr;
        height: auto;
    }

    .overview .overview-data-column,
    .overview .overview-charts-column,
    .overview .overview-main-layout .overview-charts-column {
        grid-template-rows: none;
        grid-auto-rows: minmax(260px, auto);
    }

        .overview .overview-mode-switch .mode-option {
            min-width: 0;
            flex: 1;
            padding: 0 12px;
        }

    .overview .overview-summary-card {
        grid-template-columns: 1fr;
    }

    .overview .overview-summary-total {
        min-height: 72px;
    }

    .graphics-chart {
        padding: 10px;
    }

    .graphics-chart-toolbar,
    .graphics-chart-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .graphics-tool-action {
        justify-content: center;
        width: 100%;
    }

    .graphics-chart-grid {
        grid-template-columns: 1fr;
        height: auto;
        min-height: calc(100dvh - 64px - 30px);
    }

    .graphics-subplot-panel {
        grid-column: 1;
        grid-row: auto;
        max-height: 420px;
    }

    .graphics-plot-panel {
        grid-column: 1;
        grid-row: auto;
        overflow: visible;
    }

    .graphics-axis-zones {
        grid-template-columns: 1fr;
    }

    .graphics-plot {
        min-height: 520px;
    }

    #graphics-progress,
    #graphics-resolution {
        width: 100%;
    }

    #graphics-arrange-menu,
    #graphics-more-menu {
        left: 12px;
        min-width: 0;
        right: 12px;
    }

    #graphics-unassigned {
        max-height: 220px;
    }

    .wrapper .message {
        width: 100%;
        height: 100%;
    }
    .wrapper-coating, .wrapper-coating .coating{
        width: 100%;
    }
    .select {
        margin-bottom: 15px;
    }

    .wrapper-context .context {
        width: 100%;
    }
    .wrapper-context .context.complete {
        width: 100%;
    }
        .wrapper-context .context.hybrid {
            width: 100%;
        }
    .wrapper-context.expand .context, .wrapper-context.expand .wrapper-menu, .wrapper-context.expand .wrapper-menu .menu, .wrapper-parameters .parameters{
        width: 100%;
    }

/*  LAS HOJAS QUE SUBEN DESDE ABAJO TAMBIEN SON TELEFONO

    Arriba el panel ya pasa a 100% y la hoja de parametros tambien (esta en la lista de
    recien). Las otras dos -- la de editar la paleta y la de "Nueva paleta" -- se habian
    quedado con los 450px del escritorio, y como estan ancladas a right: 0 lo que sobra se
    va por el borde IZQUIERDO: en un telefono de 360 se iban 90px, y con ellos el boton de
    eliminar entero -- fuera de la pantalla, sin forma de tocarlo -- mas la mitad de
    "Guardar cambios". Eso es lo que se veia cortado al crear un proceso. */
    .wrapper-submenu .submenu {
        width: 100%;
    }

/*  El mapa del tunel es el otro pedazo que se habia quedado en escritorio, pero su bloque NO
    va aca por dos razones: sus reglas base se definen mas abajo en este archivo (una media
    query escrita antes pierde con la misma especificidad), y su corte no es 600px sino
    ~900px de ancho con 600 de alto -- el ancho en que el mapa deja de entrar al costado del
    panel. Buscar "PROCESOS APILADO". Ese bloque tambien repite el 100% del panel y de las
    hojas, para la franja de 600 a 900 que esta media query no alcanza. */

    .main-aspect {
        padding: 0 !important;
    }
    .wrapper-control .control {
        width: calc(100% - 30px);
    }
        .wrapper-control.expand .control {
            width: calc(100% - 30px);
        }
    .offsets .wrapper-select, .offsets .wrapper-input {
        margin-bottom: 10px;
    }
    .reports .concurrency {
        max-height: 100%;
    }
    .overlay .grid {
        grid-template-columns: 1fr;
    }
        .overlay .grid .module {
            width: 100%;
            align-items: start;
            justify-content: start;
            overflow: auto;
        }
        .overlay .grid .table {
            height: 320px;
        }
    /* Politica responsive de tablas: en <=600px solo quedan las columnas esenciales
       (estado/visibilidad + el identificador principal); el resto se recupera abriendo
       la fila (los paneles de edicion ya muestran todos los campos). Nada de recorte
       silencioso de texto/encabezados: la columna se oculta entera o no se oculta. */
    .containers th:nth-child(3), .containers td:nth-child(3),
    .containers th:nth-child(4), .containers td:nth-child(4),
    .containers th:nth-child(5), .containers td:nth-child(5) {
        display: none;
    }

    .environments th:nth-child(3), .environments td:nth-child(3),
    .environments th:nth-child(4), .environments td:nth-child(4),
    .environments th:nth-child(5), .environments td:nth-child(5) {
        display: none;
    }

    .sensors th:nth-child(2), .sensors td:nth-child(2),
    .sensors th:nth-child(3), .sensors td:nth-child(3),
    .sensors th:nth-child(5), .sensors td:nth-child(5),
    .sensors th:nth-child(6), .sensors td:nth-child(6),
    .sensors th:nth-child(7), .sensors td:nth-child(7) {
        display: none;
    }

    .areas th:nth-child(3), .areas td:nth-child(3),
    .areas th:nth-child(4), .areas td:nth-child(4),
    .areas th:nth-child(5), .areas td:nth-child(5),
    .areas th:nth-child(6), .areas td:nth-child(6) {
        display: none;
    }

    /*  ESTA LISTA SE CUENTA A MANO: AL AGREGAR UNA COLUMNA HAY QUE RENUMERARLA

        Estaba escrita para las nueve columnas de antes, y el 2026-09-07 se metio "Creacion" en
        el sexto lugar (migracion 20260907_12). Todo lo que venia despues se corrio uno: el 6
        dejo de ser Paletas y paso a ser Creacion -- que quedo escondida justo en el aparato
        donde mas sirve saber de cuando es el proceso --, y el Intervalo, que era el 8, se
        destapo solo.

        Las diez de hoy, en orden:
        1 Estado  2 Campania  3 Producto  4 Ambiente  5 Proceso
        6 Creacion  7 Paletas  8 Temp. objetivo  9 Intervalo  10 Tiempo de enfriamiento

        Quedan a la vista Estado, Ambiente, Proceso, Creacion y Tiempo de enfriamiento: que
        proceso es, de cuando, donde esta y como viene. El resto se ve abriendo la fila. */
    #process th:nth-child(2), #process td:nth-child(2),
    #process th:nth-child(3), #process td:nth-child(3),
    #process th:nth-child(7), #process td:nth-child(7),
    #process th:nth-child(8), #process td:nth-child(8),
    #process th:nth-child(9), #process td:nth-child(9) {
        display: none;
    }

    .contenedor.hybrid .layout .grid .collections {
        grid-template-columns: repeat(2, 1fr);
    }
    .contenedor.hybrid .layout .grid .miniature {
        width: 100%;
        height: auto;
        overflow: auto;
    }
}

@media only screen and (max-width : 450px) {
    .message {
        width: calc(100% - 30px);
    }
    .contenedor .layout .environments {
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    }
}

@keyframes move-bg {
    to {
        background-position: var(--bg-size) 0;
    }
}

@-webkit-keyframes gradient {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes gradient {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

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

/* Para spinners centrados con transform: translate(-50%, -50%): hay que
   mantener ese translate en cada frame, si no la animacion interpola desde
   el translate estatico hacia un rotate puro y el circulo se desplaza en
   vez de solo girar. */
@keyframes rotate-centered {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.legend .element {
  display: flex;
  align-items: center;
  gap: 10px;
}

.descripcion {
  flex: 1;
}

.info-right {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.areas-manage .area-tree {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 560px;
    overflow: auto;
}

    .areas-manage .area-tree .empty {
        color: #9e9e9e;
        font-size: 13px;
        padding: 18px 0;
        text-align: center;
    }

    .areas-manage .area-tree .node {
        align-items: center;
        border: 1px solid #f1f1f1;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        gap: 10px;
        min-height: 48px;
        padding-bottom: 8px;
        padding-right: 10px;
        padding-top: 8px;
        transition: .2s ease;
    }

        .areas-manage .area-tree .node:hover {
            background: #f8fbff;
            border-color: #dce8ff;
        }

        .areas-manage .area-tree .node.disabled {
            opacity: .55;
        }

        .areas-manage .area-tree .node i {
            color: #1a73e8;
            font-size: 20px;
        }

        .areas-manage .area-tree .node .data {
            display: flex;
            flex: 1;
            flex-direction: column;
            min-width: 0;
        }

            .areas-manage .area-tree .node .data strong {
                color: #3c4043;
                font-size: 13px;
                font-weight: 600;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .areas-manage .area-tree .node .data span {
                color: #8a8a8a;
                font-size: 11px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

        .areas-manage .area-tree .node .order {
            align-items: center;
            background: #f2f6ff;
            border-radius: 6px;
            color: #1a73e8;
            display: flex;
            font-size: 12px;
            font-weight: 700;
            height: 28px;
            justify-content: center;
            min-width: 28px;
        }

.areas-manage .area-name {
    gap: 8px;
}

    .areas-manage .area-name i {
        color: #9e9e9e;
        font-size: 18px;
    }

.maps-manage .positions-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

    .maps-manage .positions-header .title {
        color: #3c4043;
        font-size: 14px;
        font-weight: 700;
    }

    .maps-manage .positions-header .subtitle {
        color: #8a8a8a;
        font-size: 12px;
    }

.wrapper-context .context .content.maps-manage .positions-layer {
    height: calc(100vh - 145px);
}

.maps-manage .positions-grid {
    /*background: #191a1e;
    border: 1px solid rgba(255, 255, 255, .08);*/
    border-radius: 7px;
    display: grid;
    gap: 8px;
    /*height: calc(100% - 31px);*/
    max-height: none;
    min-height: 280px;
    overflow: auto;
    /*padding: 5px;*/
}

    .maps-manage .positions-grid .empty {
        color: rgba(255, 255, 255, .45);
        font-size: 13px;
        grid-column: 1 / -1;
        padding: 18px 0;
        text-align: center;
    }

    .maps-manage .positions-grid .position-cell {
        align-items: center;
        background: #2d2e32;
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 5px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        height: 58px;
        justify-content: center;
        min-width: 44px;
        padding: 6px;
        transition: .2s ease;
    }

        .maps-manage .positions-grid .position-cell:hover,
        .maps-manage .positions-grid .position-cell.active {
            background: #303090;
            border-color: #3690f1;
            box-shadow: 0 0 0 1px rgba(54, 144, 241, .25);
        }

        .maps-manage .positions-grid .position-cell.disabled {
            background: rgba(255, 255, 255, .04);
            opacity: .55;
        }

        .maps-manage .positions-grid .position-cell strong {
            color: #ffffff;
            font-size: 12px;
            font-weight: 700;
        }

        .maps-manage .positions-grid .position-cell span {
            color: rgba(255, 255, 255, .58);
            font-size: 10px;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .maps-manage .positions-grid .position-cell.active strong,
        .maps-manage .positions-grid .position-cell:hover strong {
            color: #ffffff;
        }

        .maps-manage .positions-grid .position-cell.active span,
        .maps-manage .positions-grid .position-cell:hover span {
            color: rgba(255, 255, 255, .72);
        }

.maps-position-submenu .submenu {
    overflow: visible;
}

    .maps-position-submenu .submenu .content .wrapper-input {
        margin-bottom: 12px;
    }

.grid-layer {
    overflow-y: auto;
}

.grid-editor {
    margin-bottom: 22px;
}

    .grid-editor-header .title {
        color: #3c4043;
        font-size: 14px;
        font-weight: 700;
    }

    .grid-editor-header .subtitle {
        color: #8a8a8a;
        font-size: 12px;
        margin-bottom: 12px;
    }

.track-list {
    align-items: center;
    display: flex;
}

.track-list-horizontal {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
}

.track-list-vertical {
    flex-direction: column;
    align-items: stretch;
}

.track-card {
    align-items: center;
    background: #2d2e32;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 6px;
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    padding: 8px 10px;
    position: relative;
}

    .track-list-horizontal .track-card {
        flex-direction: column;
        min-width: 76px;
    }

    .track-list-vertical .track-card {
        flex-direction: row;
        justify-content: space-between;
    }

    .track-card.track-pallet {
        background: #303090;
        border-color: #3690f1;
    }

    .track-card .track-label {
        color: rgba(255, 255, 255, .72);
        font-size: 11px;
        white-space: nowrap;
    }

    .track-card.track-pallet .track-label {
        color: #ffffff;
        font-weight: 700;
    }

    .track-card .track-fr {
        background: rgba(255, 255, 255, .06);
        border: none;
        border-radius: 4px;
        color: #ffffff;
        font-size: 12px;
        padding: 3px 5px;
        width: 56px;
    }

    .track-card .track-remove {
        align-items: center;
        background: #a32121;
        border-radius: 50%;
        color: #f7c1c1;
        cursor: pointer;
        display: flex;
        height: 16px;
        justify-content: center;
        position: absolute;
        right: -6px;
        top: -6px;
        user-select: none;
        width: 16px;
    }

        .track-card .track-remove i {
            font-size: 12px;
        }

.track-insert {
    align-items: center;
    background: rgba(255, 255, 255, .04);
    border-radius: 50%;
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    height: 22px;
    justify-content: center;
    transition: .15s ease;
    width: 22px;
}

    .track-list-vertical .track-insert {
        margin: 4px 0;
    }

    .track-list-horizontal .track-insert {
        margin: 0 4px;
    }

    .track-insert:hover {
        background: #3690f1;
        color: #ffffff;
    }

    .track-insert i {
        font-size: 16px;
    }

/* Los cuatro parametros de proporcion de la pestana Grid. Dos por fila en pantallas
   anchas y uno por fila cuando no entran: son campos cortos con una ayuda debajo, y
   apretarlos mas hace que la ayuda deje de leerse. */
.grid-params {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 4px 18px;
    margin-top: 14px;
}

    .grid-params .wrapper-input {
        margin-bottom: 10px;
    }

    .grid-params .hint {
        color: rgba(255, 255, 255, .38);
        font-size: 11.5px;
        line-height: 1.35;
        margin-top: 4px;
    }

/* El resumen que la pestana Grid pone debajo de los parametros: "3 columnas x 9 filas = 27
   posiciones". Es la cifra que hace falta confirmar antes de guardar. */
.grid-preview-summary {
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
    margin-top: 10px;
}

    .grid-preview-summary strong {
        color: #ffffff;
        font-weight: 600;
    }

.grid-reset {
    color: #8fc1f7;
    cursor: pointer;
    font-size: 12px;
    margin-top: 10px;
    text-align: center;
    user-select: none;
}

    .grid-reset:hover {
        text-decoration: underline;
    }

.visualizer-drawer {
    display: none;
    position: fixed;

    /* EL CAJON MIDE LO QUE MIDE LA IMAGEN, Y LA IMAGEN TIENE TOPE POR LOS DOS LADOS

       Antes era top: 0 con height: 100dvh y la imagen a height: 100%: mandaba el alto y el
       ancho salia de la proporcion. Eso anda mientras el hueco que deja el panel -- los
       450px de .context -- sea mas ancho que la imagen asi calculada. Abajo de eso la
       imagen seguia sacando su ancho del alto, sin mirar cuanto lugar quedaba, y se salia
       por la izquierda de la pantalla: en una ventana de 601px sobraban 206px de dibujo
       cortado, y en un telefono acostado (720x360) 87px. Esa es la franja en la que la
       pantalla ya no es telefono -- el panel sigue siendo una hoja de 450px -- pero
       tampoco hay lugar al lado: no decidia ni una cosa ni la otra.

       Ahora la imagen tiene tope de alto Y de ancho, el navegador la encoge por el lado que
       apriete primero, y el cajon toma su alto de ella. Por eso el centrado vertical pasa a
       ser a mano con top: 50%, y el translateY va pegado al translateX que hace la entrada
       -- de ahi que .show repita los dos. */
    top: 50%;
    right: 450px;
    height: auto;
    transition: all .3s ease-in-out;
    transform: translateY(-50%) translateX(100%);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0.8px;

    /* EL CAJON SE APOYA EN EL FONDO DE LA PAGINA, NO EN NEGRO

       La imagen lleva margin: 0 30px, asi que a cada lado queda una banda del ancho del
       cajon que no es imagen. Con background-color: black esa banda era mas oscura que el
       #18191d del body y se leia como un marco negro alrededor del dibujo.

       Los 30 px no sobran: son el lugar por donde asoman los iconos de sensor, que se salen
       de la primera y la ultima pista de la grilla (ver .left-sensor / .right-sensor, que
       tiran -18 px hacia el pallet). Por eso se iguala el color en vez de sacar el margen.

       Si se cambia el fondo del body, este valor lo sigue. */
    background-color: #18191d;
}
    .visualizer-drawer.show {
        transform: translateY(-50%) translateX(0);
    }
    .visualizer-drawer img {
        /* Los dos topes. 510 = los 450 del panel + los 60 de este mismo margin.

           width y height en auto -- no 100% -- para que el navegador la encoja sin
           deformarla: el <img> tiene que medir exactamente lo que se ve, porque
           .tunnel-visualizer se apoya en sus bordes para dibujar la grilla encima. Con
           object-fit no serviria: ahi la caja queda mas grande que el dibujo.

           display: block por lo mismo: como inline arrastra el hueco de la linea base y el
           cajon terminaba 6px mas alto que la imagen. Antes no se notaba porque el alto del
           cajon estaba fijado en 100dvh; ahora lo da la imagen, y esos 6px se los comia la
           grilla (height: 100% del cajon) y quedaba corrida hacia abajo. */
        display: block;
        width: auto;
        height: auto;
        max-height: 100dvh;
        max-width: calc(100vw - 510px);
        margin: 0 30px;
    }

.tunnel-visualizer {
    display: grid;
    position: absolute;
    /* LA GRILLA TIENE QUE CUBRIR LA IMAGEN, NO EL CAJON.

       .visualizer-drawer img lleva margin: 0 30px, asi que el cajon mide 60 px mas que la
       imagen. Con width: 100% la grilla cubria el cajon entero y quedaba 30 px corrida a la
       izquierda y 30 mas ancha: la celda de la primera columna, que por proporcion va de
       10.31% a 36.08%, caia sobre la imagen de -2.36% a 31.64% -- empezaba afuera.

       El error es de 60 px fijos, no proporcional, asi que se nota mas cuanto mas angosta se
       ve la imagen. Con left y right en 30 px la grilla queda exactamente encima. */
    left: 30px;
    right: 30px;
    height: 100%;
    /* Respaldo para dos columnas. Las pistas reales las escribe CreateDynamicGrid() en
       wwwroot/js/process/core.js con la forma del mapa que devolvio el procedimiento: tres
       pistas por columna del tunel, ancha en la cara exterior y angosta en la interior.
       Este valor es lo que se ve mientras no hay ambiente elegido. */
    grid-template-columns: 0.8fr minmax(0, 1fr) 0.25fr 0.25fr minmax(0, 1fr) 0.8fr;
}
    .tunnel-visualizer.show {
        transform: translateX(0);
    }

    .tunnel-visualizer .etiqueta-de-ambiente {
        /* De la primera pista de paletas hasta la ultima, sea cual sea la cantidad de
           columnas. Antes decia 2 / 6, que es el ancho de un mapa de DOS columnas: con tres
           la etiqueta quedaba corrida a la izquierda en lugar de centrada sobre el tunel.
           La linea -2 es la anterior a la ultima, o sea justo despues de la ultima columna
           de paletas -- para dos columnas da 6, igual que antes. */
        grid-column: 2 / -2;
        display: none;
        margin: auto;
        padding: 6px 14px;
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 4px 14px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1);
        font-weight: bold;
    }
        .tunnel-visualizer .etiqueta-de-ambiente.show {
            display: flex;
        }

    .tunnel-visualizer .tunnel-legend {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        /* El 15 de siempre entre etiquetas; el 4 es el de las filas, que recien aparece
           cuando la leyenda se parte -- o sea, nunca en una pantalla ancha. */
        gap: 4px 15px;
        margin: 0 auto;

        /* fit-content centrado con margin auto: el auto no puede centrar algo que mide mas
           que su caja, y las tres etiquetas juntas miden 274px. Mientras el mapa se veia
           siempre casi a pantalla completa eso no pasaba; ahora que se encoge para entrar en
           el hueco que queda -- 91px en una ventana de 601, 208 en un telefono -- la leyenda
           se salia del dibujo y se apoyaba sobre el panel. Con wrap se parte en dos filas y
           queda adentro. Con lugar de sobra sigue siendo una sola fila, igual que antes. */
        flex-wrap: wrap;
        width: fit-content;
        max-width: 100%;
        padding: 6px 14px;
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 4px 14px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1);
        font-size: 11px;
        color: #fff;
    }

        .tunnel-visualizer .tunnel-legend .legend-item {
            display: flex;
            align-items: center;
            gap: 5px;
            color: #18191d;
        }

        .tunnel-visualizer .tunnel-legend .swatch {
            width: 12px;
            height: 12px;
            border-radius: 3px;
            display: inline-block;
        }

        .tunnel-visualizer .tunnel-legend .swatch.ghost {
            background-color: #a8a8a8;
            border: 2px dashed #7f7f7f;
        }

        .tunnel-visualizer .tunnel-legend .swatch.completo {
            background-color: rgba(var(--color-completo), 1);
        }

        .tunnel-visualizer .tunnel-legend .swatch.remonte {
            background-color: rgba(var(--color-remonte), 1);
        }

/*  ======================================================================================
    PROCESOS EN PANTALLA CHICA: EL MAPA NO VA
    ======================================================================================

    DONDE ESTA EL CORTE

    No es 600px. El panel mide 450px fijos y el mapa saca su ancho de su alto, asi que el
    mapa entra al lado mientras se cumpla:

        ancho de ventana  >=  450 (panel) + 60 (margin) + proporcion * alto de ventana

    Con la proporcion real de los mapas -- son vistas de planta verticales, ~0.5 -- eso da
    ~870px en una ventana de 720 de alto y ~960px en una de 900. O sea que entre 600 y ~900
    el mapa entraba pero encogido: a 601px quedaba de 91px de ancho, un hilo en el que no se
    puede tocar una celda.

    Y APILARLO TAMPOCO SIRVE

    Se probo poner el mapa encima del panel, a lo ancho, reservandole el alto de abajo para
    la hoja. No alcanza: la hoja de "Nueva paleta" con los componentes de la fruta --
    Variedades, Envases, Etiqueta, Kilos, Cajas, Calibre -- mide unos 700px, o sea casi la
    pantalla entera de un telefono. No queda alto para el mapa.

    ASI QUE ABAJO DE 900px EL MAPA NO SE MUESTRA, y la posicion se elige con el desplegable
    "Posicion" de la hoja, que por eso mismo se saco de .quick-config y ahora aparece
    tambien en modo Manual (ver Views/Process/Manage.cshtml y el bloque de la posicion en
    process/screen.js).

    !important porque screen.js pone display: block EN LINEA al abrir el panel; una regla de
    hoja sin !important no le gana a un estilo en linea. */
@media only screen and (max-width : 900px) {
    .visualizer-drawer {
        display: none !important;
    }
}

/*  LAS HOJAS TIENEN QUE ENTRAR EN LA PANTALLA

    Las dos hojas son height: auto ancladas a bottom: 0, y sin tope de alto. Con los
    componentes de la fruta la de "Nueva paleta" llega a ~700px: en un telefono ACOSTADO
    (720x360) eso significa que 340px de hoja quedan ARRIBA del borde de la pantalla, sin
    forma de llegar a ellos -- ni las pestanas Manual/Configuracion rapida ni Tipo ni Codigo.
    Y en vertical entra raspando.

    El tope es 100dvh y el sobrante escrolea. El overflow-y: auto es justamente lo que las
    dos hojas evitaban a proposito (una dice overflow: initial, la otra overflow: visible)
    para que el <ul> del select de Materialize no quedara recortado; eso se resuelve en el
    JS colgando esos <ul> del body -- ver SubmenuSelectOptions() en process/core.js -- que
    es el mismo recurso que ya usaban los selects de sensor del mapa.

    Van nombradas las dos hojas de Procesos y no .wrapper-submenu .submenu, que tambien
    agarraria la hoja de Mapas: esa no tiene el JS de los <ul> al body. */
.process-pallet-submenu .submenu,
.create-pallet-submenu .submenu {
    max-height: 100dvh;
    overflow-y: auto;
}

.pallet {
    box-sizing: border-box;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.pallet.active {
    background: rgba(var(--color-completo), 1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    height: 100%;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1);
    color: white;
    overflow: hidden;
}

/* destaca el pallet que se esta editando en el modal de sensores/paleta */
.pallet.active.editing {
    outline: 2px solid #4a9eff;
    outline-offset: -2px;
}

@keyframes pallet-flash {
    0%   { filter: brightness(2.4); }
    100% { filter: brightness(1); }
}
.pallet.active.just-added {
    animation: pallet-flash .5s ease-out;
}

.pallet.active.remonte {
    background: rgba(var(--color-remonte), 1);
}

    .pallet.active.remonte.hover-active {
        background-color: #a8a8a8;
        outline: 2px dashed #7f7f7f;
        outline-offset: -2px;
        color: gray;
        cursor: pointer;
    }

        .pallet.active.remonte.hover-active > *:not(.pallet-add-hint) {
            visibility: hidden;
        }

.pallet-add-hint {
    display: none;
    position: absolute;
    inset: 0;
    flex-flow: column;
    justify-content: space-between;
    padding-bottom: 6px;
    color: #fff;
    pointer-events: none;
}

    .pallet-add-hint .pallet-code {
        padding: 6px 8px;
        text-align: center;
        font-weight: bold;
    }

    .pallet-add-hint p {
        margin: 0;
        text-align: center;
        font-size: 10px;
    }

    .pallet.active.remonte.hover-active .pallet-add-hint {
        display: flex;
    }

    .pallet.active.remonte.hover-active .pallet-sensors,
    .pallet.active.remonte.hover-active .pallet-sensors * {
        visibility: visible;
    }

.pallet.ghost {
    /* LA POSICION VACIA ES UN HUECO, NO UN BLOQUE

       Era #595a5c al 82% con brightness(.75) encima: sobre el piso claro del tunel daba una
       plancha gris casi opaca, y como las filas de la grilla se tocan, dos posiciones vacias
       seguidas se leian como una sola masa.

       Ahora el fondo es un velo oscuro al 50%: deja pasar la textura del piso, asi que se ve
       que hay tunel debajo y cada hueco se distingue del de al lado. El velo sigue siendo
       suficiente para que el numero en blanco quede en 4.9:1.

       El brightness baja de .75 a .85 -- lo justo para que se note apagado sin ensuciar el
       color. Se mantiene el mecanismo: cuando se abre el submenu de agregar paleta, la regla
       de mas abajo lo pone en none y los huecos se encienden. */
    background-color: rgba(24, 26, 30, .5);
    border: 2px dashed rgba(255, 255, 255, .38);
    cursor: default;
    pointer-events: none;
    filter: brightness(.85);
    transition: all .2s ease-in-out;

    /* EL NUMERO DE LA POSICION VACIA TIENE QUE LEERSE

       Aca habia dos declaraciones de color en la misma regla: rgba(255,255,255,.4) primero y
       "gray" al final. Ganaba la ultima, asi que el numero quedaba gris #808080 sobre el
       fondo gris #595a5c: 1.75:1 de contraste, cuando el minimo para texto chico es 4.5:1.
       En una posicion disponible no se veia que numero era.

       Ademas el filter: brightness(.75) oscurece texto y fondo juntos, asi que el contraste
       real en pantalla es todavia un poco menor que el que calcula el navegador. Por eso va
       blanco pleno y no un blanco atenuado: queda en 5.4:1 ya contando el filtro. */
    color: #fff;
}

body:has(.create-pallet-submenu.open) .tunnel-visualizer:not(.disabled):not(.quick-mode) .pallet.ghost {
    cursor: pointer;
    pointer-events: auto;
    filter: none;
}
    body:has(.create-pallet-submenu.open) .tunnel-visualizer:not(.disabled):not(.quick-mode) .pallet.ghost:hover {
        background-color: rgba(255, 255, 255, .1);
        border-color: rgba(255, 255, 255, .5);
    }

.config-pallet-and-sensors {
    position: relative;
    container-type: size;
}

    .config-sensor-cell {
        display: flex;
        container-type: size;
        position: relative;
        min-width: 0;
        overflow: visible;
        z-index: 99999;
    }
    .config-pallet-and-sensors .pallet {
        height: 100%;
        margin: 0;
        display: flex;
        justify-content: space-between;
    }
        .config-pallet-and-sensors .pallet-body > .pallet-code {
            display: block;
            max-width: 100%;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0 10px;
            font-size: clamp(11px, 18cqh, 18px);
        }
        .config-pallet-and-sensors .pallet-info .pallet-code-count,
        .config-pallet-and-sensors .pallet-info .code-count-empty {
            width: clamp(16px, 26cqh, 26px);
            height: clamp(16px, 26cqh, 26px);
        }
        .config-pallet-and-sensors .pallet-info .pallet-code-count {
            flex: 0 0 auto;
            align-self: center;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: clamp(10px, 15cqh, 15px);
            background: rgba(var(--color-remonte-text), 1);
            color: rgba(var(--color-remonte), 1);
            font-weight: bold;
        }
        .pallet.active:not(.remonte) .pallet-info .pallet-code-count {
            background: rgba(var(--color-completo-text), 1);
            color: rgba(var(--color-completo-dark), 1);
        }
    .config-pallet-and-sensors .wrapper-select {
        margin: 0;
    }

    .code-count-empty {
        background: transparent;
    }

    .config-pallet-and-sensors .wrapper-select .select-wrapper {
        display: flex;
        align-items: end;
        height: 100%;
    }

    .sensor-icon {
        display: none;
        width: clamp(19px, 60cqh, 80px);
        aspect-ratio: 912 / 162;
        background: url(/img/sensor_icon_short.svg) center / contain no-repeat;
        position: absolute;
        top: 49%;
    }
    .config-sensor-cell.has-sensor .sensor-icon {
        display: block;
    }
    .config-sensor-cell:has(.left-sensor) {
        justify-content: end;
    }
    .sensor-icon.flip {
        transform: rotate(180deg);
    }

    .left-sensor {
        margin-right: -18px;
        rotate: 15deg;
    }
    .right-sensor {
        margin-left: -18px;
        rotate: -15deg;
    }

    .tunnel-sensor-select select,
    .tunnel-sensor-select .select-wrapper input.select-dropdown,
    .tunnel-sensor-select .tunnel-sensor-static {
        height: fit-content;
        line-height: 1.9;
        font-size: clamp(10px, 16cqh, 16px);
        font-weight: bold;
        background: rgba(255, 255, 255, 0.16);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        color: #fff;
        /* ANTES: width: 2.4rem, o sea 35 px fijos.

           El chip muestra tres caracteres -- INT / EXT cuando no hay sensor, y el nick del
           sensor (S02) cuando lo hay, ver SensorDisplay en process/positions.js. "INT" mide
           26 px y "S02" 29, y descontando el padding de 5 px por lado quedaban 25 px utiles:
           se cortaban los dos, por 1 y por 4 px. De ahi el "I..." y el "S..." en pantalla.

           Ahora el ancho lo pone la card: .tunnel-sensor-select reparte en partes iguales el
           ancho de .pallet-sensors, asi que el chip mide 43 px con la grilla de hoy y crece
           solo si la card se agranda. */
        width: 100%;
        padding: 0 5px;
        border-radius: 8px;
        text-align: center;
    }

    /* Los dos chips se reparten el ancho del cuerpo de la paleta en vez de medir fijo.
       min-width: 0 para que flex los pueda achicar por debajo de su contenido, que es lo que
       permite que el text-overflow siga funcionando si algun dia el texto es mas largo. */
    .tunnel-sensor-select {
        flex: 1 1 0;
        min-width: 0;
    }

    .tunnel-sensor-select .tunnel-sensor-static {
        box-sizing: border-box;
        display: block;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tunnel-sensor-select.unselected select,
    .tunnel-sensor-select.unselected .select-wrapper input.select-dropdown,
    .tunnel-sensor-select.unselected .tunnel-sensor-static {
        /* EL CHIP SIN SENSOR ES UN HUECO, NO UN BOTON GRIS

           Era #a8a8a8, un gris plano. Dos problemas: heredaba el color: #fff de la regla de
           arriba -- la que comparten los tres estados -- y blanco sobre ese gris da 2.38:1,
           por debajo del 4.5:1 minimo, asi que el INT/EXT no se leia; y ademas era un color
           ajeno a la tarjeta, que esta hecha con el marron de --color-completo y velos
           translucidos encima.

           Ahora es un velo negro al 22% sobre el color de la paleta que tenga debajo: toma
           el tono de la tarjeta en vez de imponer uno propio, y al ser mas oscuro que el
           chip con sensor -- que va en claro, ver las dos reglas de aca abajo -- se lee de
           un vistazo cual falta completar.

           Contraste del texto: 5.8:1 sobre una paleta normal, 12.7:1 sobre una de remonte. */
        background-color: rgba(0, 0, 0, .22);
        border-color: rgba(255, 255, 255, .25);
        color: rgba(255, 255, 255, .92);
    }

    .pallet.active.remonte .tunnel-sensor-select:not(.unselected) select,
    .pallet.active.remonte .tunnel-sensor-select:not(.unselected) .select-wrapper input.select-dropdown,
    .pallet.active.remonte .tunnel-sensor-select:not(.unselected) .tunnel-sensor-static {
        background: rgba(var(--color-remonte-text), 1);
        color: rgba(var(--color-remonte), 1);
    }

    .pallet.active:not(.remonte) .tunnel-sensor-select:not(.unselected) select,
    .pallet.active:not(.remonte) .tunnel-sensor-select:not(.unselected) .select-wrapper input.select-dropdown,
    .pallet.active:not(.remonte) .tunnel-sensor-select:not(.unselected) .tunnel-sensor-static {
        background: rgba(var(--color-completo-text), 1);
        color: rgba(var(--color-completo-dark), 1);
    }

    .pallet.active.remonte.hover-active .tunnel-sensor-select select,
    .pallet.active.remonte.hover-active .tunnel-sensor-select .select-wrapper input.select-dropdown,
    .pallet.active.remonte.hover-active .tunnel-sensor-select .tunnel-sensor-static {
        background: linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .16)), rgba(var(--color-remonte), 1);
    }

    .tunnel-sensor-dropdown.dropdown-content {
        background: rgba(40, 42, 48, 0.55);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 7px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1);
    }

    .tunnel-sensor-dropdown li {
        font-size: 10px;
        color: #fff;
    }

.tunnel-visualizer.disabled .tunnel-sensor-select select,
.tunnel-visualizer.disabled .tunnel-sensor-select .select-wrapper input.select-dropdown {
    pointer-events: none;
    opacity: .5;
}

.tunnel-visualizer.disabled .pallet.active.remonte,
.tunnel-visualizer.quick-mode .pallet.active.remonte {
    cursor: default;
}

.pallet-sensors {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    box-sizing: border-box;
    /* Los dos chips iban pegados entre si y pegados a los bordes de la paleta. El gap los
       separa y el padding los despega del borde.

       El costo es ancho: cada pixel de aire sale del chip, y el chip tiene justo lo que
       necesita para las tres letras. Por eso .pallet-info baja su padding de 10 a 5 px --
       eran 47 px de card para un numero de dos digitos --, que es de donde salen los 10 px
       que se reparten aca. */
    gap: 6px;
    padding: 4px;
}

.pallet-info {
    height: 100%;
    flex-flow: column;
    padding: 0 5px;
    flex: 0 0 auto;
    background: rgba(0, 0, 0, 0.15);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    display: grid;
    justify-content: center;
    align-content: space-evenly;
}

.pallet-info p {
    min-width: 18px;
    text-align: center;
    font-size: clamp(11px, 22cqh, 20px);
    line-height: 1.2;
}


.pallet-body {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-evenly;
}

/* Modulo de importacion de configuracion desde Excel, Views/Import/Module.cshtml */
/* La tarjeta/boton base se hereda tal cual de .parameters (Views/Settings/Parameters.cshtml) */
/* agregando la clase "parameters" al wrapper; aqui solo se cubre lo que esa pagina no define. */
.import-wizard.parameters {
    padding: 10px;
}

.import-wizard .panel {
    display: none;
}
    .import-wizard .panel.active {
        display: block;
    }

#import-file-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media only screen and (max-width: 600px) {
    /* el selector de 6 pasos desborda el viewport en movil: se vuelve una fila
       con scroll horizontal propio en vez de empujar el ancho de toda la pagina. */
    .import-wizard .wrapper-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
        .import-wizard .wrapper-tabs .element {
            flex: 0 0 auto;
        }
}

.import-wizard .component-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
    .import-wizard .component-column {
        flex: 1 1 320px;
        min-width: 280px;
    }
        .import-wizard .component-column .component:last-child {
            margin-bottom: 0;
        }

.import-wizard.parameters .wrapper-button {
    flex-wrap: wrap;
}
    .import-wizard.parameters .wrapper-button .button.flat.waves-grey {
        background: rgba(255, 255, 255, .05);
        color: #9e9e9e;
    }
        .import-wizard.parameters .wrapper-button .button.flat.waves-grey i {
            color: #9e9e9e;
        }
    .import-wizard.parameters .wrapper-button .button.flat.waves-red {
        background: rgba(107, 31, 31, 0.7);
        color: #d78383;
    }
        .import-wizard.parameters .wrapper-button .button.flat.waves-red i {
            color: #f15859;
        }
    .import-wizard.parameters .wrapper-button .button.disabled {
        opacity: .4;
        pointer-events: none;
    }

.import-wizard.parameters .wrapper-tabs strong {
    display: block;
}
.import-wizard.parameters .wrapper-tabs .element {
    color: #9e9e9e;
    padding: 0 14px;
}
.import-wizard.parameters .wrapper-tabs .active {
    background: rgba(31, 63, 107, 0.7);
    color: #3690f1;
}
    .import-wizard.parameters .wrapper-tabs .active strong {
        color: #3690f1;
    }

.import-wizard .legend {
    margin-top: 10px;
    margin-bottom: 10px;
}
    .import-wizard .legend .element {
        margin-bottom: 6px;
    }
    .import-wizard .legend.resultado .subtext {
        margin-top: 10px;
    }
        .import-wizard .legend.resultado .subtext:first-child {
            margin-top: 0;
        }

.import-wizard .component .wrapper-button + .wrapper-table {
    margin-top: 15px;
}

.import-wizard tr.status-Válido td.status, .import-wizard tr.status-Creando td.status {
    color: #3690f1;
}
.import-wizard tr.status-Existente td.status {
    color: #fef06d;
}
.import-wizard tr.status-Bloqueado td.status {
    color: #9e9e9e;
}
.import-wizard tr.status-Creado td.status {
    color: #35ff4c;
}
.import-wizard tr.status-Fallido td.status {
    color: #ff7272;
    font-weight: bold;
}

/* Modal "Copiar posicionamiento" del disenador de Ambientes, Views/Containers/Module.cshtml */
.wrapper-copy-position .copy-position {
    position: fixed;
    right: 15px;
    bottom: 15px;
    width: 340px;
    max-width: calc(100vw - 30px);
    background-color: #1c1d22;
    border-radius: 7px;
    padding: 15px;
    transform: translateX(calc(100% + 15px));
    transition: all .3s ease-in-out;
    z-index: 10000;
}
    .wrapper-copy-position .copy-position .header .title {
        color: white;
        font-weight: bold;
        font-size: 14px;
    }
    .wrapper-copy-position .copy-position .header .subtitle {
        color: #989898;
        font-size: 12px;
        font-weight: 500;
        margin-top: 5px;
        line-height: 1.4;
    }
    .wrapper-copy-position .copy-position .wrapper-search {
        margin-top: 12px;
    }
    .wrapper-copy-position .copy-position .wrapper-action {
        display: flex;
        gap: 15px;
        margin-top: 10px;
    }
        .wrapper-copy-position .copy-position .wrapper-action .action {
            font-size: 12px;
            font-weight: bold;
            color: #3690f1;
            cursor: pointer;
            user-select: none;
        }
    .wrapper-copy-position .copy-position .list {
        max-height: 220px;
        overflow-y: auto;
        margin-top: 8px;
    }
        .wrapper-copy-position .copy-position .list .element {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 5px;
            cursor: pointer;
            user-select: none;
            font-size: 13px;
            font-weight: 500;
            color: #e3e3e3;
            margin-bottom: 4px;
        }
            .wrapper-copy-position .copy-position .list .element:hover {
                background: rgba(255, 255, 255, .05);
            }
            .wrapper-copy-position .copy-position .list .element .check {
                width: 16px;
                height: 16px;
                border-radius: 4px;
                border: 2px solid #55565c;
                flex: 0 0 auto;
                display: flex;
                align-items: center;
                justify-content: center;
            }
                .wrapper-copy-position .copy-position .list .element .check i {
                    display: none;
                    font-size: 13px;
                    color: white;
                }
            .wrapper-copy-position .copy-position .list .element.active {
                background: rgba(31, 63, 107, 0.5);
            }
                .wrapper-copy-position .copy-position .list .element.active .check {
                    background: #3690f1;
                    border-color: #3690f1;
                }
                    .wrapper-copy-position .copy-position .list .element.active .check i {
                        display: block;
                    }
        .wrapper-copy-position .copy-position .list .empty {
            color: #79787f;
            font-size: 13px;
            text-align: center;
            padding: 15px 0;
        }
    .wrapper-copy-position .copy-position .wrapper-button {
        margin-top: 10px;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }
        .wrapper-copy-position .copy-position .wrapper-button .button {
            width: max-content;
            border-radius: 5px;
            padding: 0 10px;
            height: 35px;
            line-height: 35px;
            cursor: pointer;
            user-select: none;
            background: rgba(255, 255, 255, .07);
            color: #c1c1c1;
        }
            .wrapper-copy-position .copy-position .wrapper-button .button.waves-blue {
                background: rgba(31, 63, 107, 0.7);
                color: #3690f1;
            }

/* Un umbral que nadie configuro todavia. Antes decia "NaN", porque Minimo y Maximo llegan
   NULL de la base y se formateaban con parseFloat(...).toFixed(1). */
.empty-threshold {
    color: rgba(255, 255, 255, .35);
    font-size: 12px;
    font-style: italic;
}

/* LOS GRUPOS DE SENSORES.

   Un renglon para crear y los grupos como etiquetas debajo. Nada de encabezado ni de caja
   grande: el panel vive en una columna de 420 px, al lado de una tabla que ya ocupa el ancho
   justo, asi que cada pixel que gasta se lo saca a la tabla. */
.grupos-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}
    .grupos-panel .nuevo {
        display: flex;
        gap: 8px;
        align-items: center;
    }
        .grupos-panel .nuevo input[type="text"] {
            flex: 1;
            min-width: 0;
            height: 36px;
            background: rgba(255, 255, 255, .05);
            border: none;
            border-radius: 5px;
            color: white;
            padding: 0 12px;
            font-size: 13px;
            margin: 0;
            box-sizing: border-box;
        }
        .grupos-panel .nuevo input[type="text"]::placeholder { color: #6d6d6d; }
        .grupos-panel .nuevo .action {
            width: 36px;
            height: 36px;
            border-radius: 5px;
            background: rgba(255, 255, 255, .05);
            color: #1e77e5;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
        }
        .grupos-panel .nuevo .action:hover { background: rgba(30, 119, 229, .15); }

    .grupos-panel .listado {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
        .grupos-panel .listado .vacio {
            color: #6d6d6d;
            font-size: 12px;
        }
        .grupos-panel .listado .grupo-fila {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, .05);
            border-radius: 4px;
            overflow: hidden;
            height: 26px;
        }
            .grupos-panel .listado .grupo-fila .nombre {
                color: #b8b8b8;
                font-size: 12px;
                padding: 0 8px;
            }
            .grupos-panel .listado .grupo-fila .cuenta {
                color: #6d6d6d;
                font-size: 11px;
                padding-right: 6px;
                font-variant-numeric: tabular-nums;
            }
            .grupos-panel .listado .grupo-fila .borrar {
                width: 24px;
                height: 26px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #6d6d6d;
                cursor: pointer;
            }
            .grupos-panel .listado .grupo-fila .borrar:hover { color: #ff6b6b; }
            .grupos-panel .listado .grupo-fila .borrar i { font-size: 15px; }

/* El grupo del sensor tiene columna propia: la septima, la que ocupaba Lado. Lado dejo de
   usarse cuando entraron Areas y Mapas, asi que el intercambio no agrega ancho a la tabla.

   El sensor sin grupo se marca en gris apagado y no con la celda vacia: una columna con
   huecos se lee como dato que falta, y aca "sin agrupar" es un estado valido. */
.sensors .sin-grupo {
    color: #6d6d6d;
    font-style: italic;
}

/* EL DICCIONARIO DE UNA VARIABLE CATEGORICA (ficha de Tipologia).

   Una fila por valor: numero, etiqueta y color. Mismos fondos y alturas que los inputs de
   la ficha, para que el editor se lea como un campo mas y no como otra pantalla. */
.labels-block {
    display: none;
    margin-bottom: 15px;
}

    .labels-block .label {
        color: #a4a4a4;
        font-size: 13px;
        margin-bottom: 5px;
    }

    .labels-block .hint {
        color: #6d6d6d;
        font-size: 11px;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .labels-block .listado {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .labels-block .label-row {
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .labels-block .label-row input[type="number"],
        .labels-block .label-row input[type="text"] {
            height: 36px;
            background: rgba(255, 255, 255, .05);
            border: none;
            border-radius: 5px;
            color: white;
            padding: 0 12px;
            font-size: 13px;
            margin: 0;
            box-sizing: border-box;
        }

        .labels-block .label-row input[type="number"] {
            width: 70px;
            flex-shrink: 0;
        }

        .labels-block .label-row input[type="text"] {
            flex: 1;
            min-width: 0;
        }

        .labels-block .label-row input::placeholder {
            color: #6d6d6d;
        }

        /* El selector nativo de color, recortado a un cuadrado del alto de la fila. */
        .labels-block .label-row input[type="color"] {
            width: 36px;
            height: 36px;
            padding: 4px;
            background: rgba(255, 255, 255, .05);
            border: none;
            border-radius: 5px;
            cursor: pointer;
            flex-shrink: 0;
        }

        .labels-block .label-row .label-remove {
            width: 28px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6d6d6d;
            cursor: pointer;
            flex-shrink: 0;
        }

            .labels-block .label-row .label-remove:hover {
                color: #ff6b6b;
            }

            .labels-block .label-row .label-remove i {
                font-size: 16px;
            }

    .labels-block .agregar {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 10px;
        padding: 6px 12px;
        background: rgba(255, 255, 255, .05);
        border-radius: 5px;
        color: #1e77e5;
        font-size: 13px;
        cursor: pointer;
    }

        .labels-block .agregar:hover {
            background: rgba(30, 119, 229, .15);
        }

        .labels-block .agregar i {
            font-size: 16px;
        }

/* EL SELECTOR DE EMPRESA DEL ALTA DE PROCESO

   Reusa el .select generico -- caja, opciones, filtro -- y solo agrega lo que ese bloque no
   trae: que la lista se abra DEBAJO del campo en vez de encima, y que tenga un techo con
   scroll. Sin esto, .select .options se dibuja con top: 0 sobre el propio campo y una lista
   larga se sale de la ficha.

   Es el mismo par de reglas que .graphics-environment-picker, sin lo de los grupos: aca cada
   opcion es un nombre y nada mas. */
/* PRIMERO, DEVOLVERLO AL FLUJO.

   Hay una regla vieja, .wrapper-select > .select, que pone position: absolute y
   width: calc(100% - 45px). Quedo de una composicion que ya no existe en ninguna vista: este
   picker es hoy el unico .select que cuelga directo de un .wrapper-select. El efecto era que
   la caja de Empresa se salia del flujo -- el wrapper media 18 px, solo la etiqueta -- y se
   dibujaba encima del campo de abajo, ademas de quedar 45 px mas angosta que el resto.

   No se toca la regla vieja: no la usa nadie mas, pero borrarla es cambiar algo que no se
   puede probar. Se la pisa solo para este componente, con la especificidad justa. */
.wrapper-select > .select.company-picker {
    position: relative;
    width: 100%;
}

.company-picker .options {
    max-height: 320px;
    overflow: hidden;
    top: calc(100% + 4px);
    z-index: 20;
}

.company-picker .options .filter {
    margin: 8px;
}

.company-options {
    max-height: 262px;
    overflow-y: auto;
    padding-bottom: 4px;
}

    .company-options .element {
        line-height: 32px;
    }

/* LA IMAGEN DEL VISUALIZADOR DE TUNEL, SIN DOBLE PINTADO

   #tunnel-image conserva su src en el HTML porque es lo que le da el ANCHO al
   .visualizer-drawer: el cajon es fixed y solo tiene fijado el alto (100dvh), la imagen va a
   height 100% y su ancho sale de la proporcion. Sin src el cajon quedaria sin ancho.

   Pero mostrarla de entrada hacia que se viera el tunel vacio y, al volver /Process/Map,
   saltara a la imagen del mapa: dos imagenes distintas en menos de un segundo.

   Nace transparente y LoadTunnelImage le agrega .ready recien cuando la imagen que
   corresponde ya esta descargada. Opacity y no visibility ni display: la imagen sigue
   ocupando su lugar, asi que el cajon conserva el ancho y la grilla no se recalcula. */
#tunnel-image {
    opacity: 0;
    transition: opacity .25s ease-in-out;
}

    #tunnel-image.ready {
        opacity: 1;
    }

/* LA TARJETA DE USABILIDAD, CON LA FORMA DEL TUNEL

   .reports .wrapper-grid .grid es un flex con el ancho clavado en seis columnas. Sirve para
   las otras grillas de la pantalla, pero para la usabilidad hace que un tunel de 5x2 se vea
   como dos filas de seis.

   Con .con-forma pasa a ser una grilla CSS de verdad; las pistas y la celda de cada
   cuadradito las escribe reports-process.js con las medidas del mapa, que vienen en la misma
   respuesta que las posiciones. width: auto anula el calc de seis columnas. */
.reports .wrapper-grid .grid.con-forma {
    display: grid;
    width: auto;
    justify-content: start;
}

/* FILAS DE TARJETAS A LA MISMA ALTURA

   .row de Materialize es un bloque con columnas flotadas: cada tarjeta mide lo que mide su
   contenido, y en la primera fila del reporte eso se nota -- la del proceso crecio al sumarle
   el cliente y la de conectividad depende de cuantos sensores tenga el ambiente.

   Con equal-height la fila pasa a flex y las columnas se estiran; .component ocupa todo el
   alto de su columna. Es opt-in por fila a proposito: las filas con grafico adentro no
   quieren esto, porque el canvas se estira con ellas.

   El margen negativo y el padding de las columnas los sigue poniendo Materialize: flex no los
   toca, asi que la grilla no se corre. */
.reports .row.equal-height {
    display: flex;
    flex-wrap: wrap;
}

    .reports .row.equal-height > [class*="col"] {
        display: flex;
    }

        .reports .row.equal-height > [class*="col"] > .component {
            flex: 1 1 auto;
        }

/* LA FICHA DEL PROCESO, EN DOS COLUMNAS

   Titulo, codigo, Producto, Cliente y Responsable venian uno abajo del otro: cinco bloques
   apilados hacian la tarjeta mucho mas alta que las otras dos de la fila, y desde que se
   sumo el Cliente peor todavia.

   La tarjeta pasa a ser una grilla de dos columnas. El titulo y el codigo cruzan las dos
   -- son la identificacion del proceso, no un dato mas --, y los tres bloques de contenido
   caen de a dos por fila: Producto y Cliente arriba, Responsable abajo. De tres filas a dos.

   Si el proceso no tiene cliente, ese bloque esta en display:none y no ocupa celda: quedan
   Producto y Responsable uno al lado del otro, en una sola fila.

   align-content: start para que las filas no se estiren cuando la tarjeta crece por el
   equal-height de la fila: los bloques se quedan arriba en vez de separarse. */
.reports .component.data-process {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    column-gap: 15px;
}

    .reports .component.data-process > .title,
    .reports .component.data-process > .subtitle {
        grid-column: 1 / -1;
    }

/* MODULOS (Ajustes)

   Cada modulo es una fila mas de la pantalla, no un componente aparte: reusa
   .container-switch tal cual -- nombre adentro de la pastilla, lever a la derecha --,
   igual que Estilo en la tarjeta de Identidad.

   Lo unico propio es el detalle, que explica que se apaga y que no. Antes salia completo
   debajo de cada pastilla; con cuatro filas la tarjeta era mas texto que interruptores,
   asi que ahora va plegado detras de una (i) a la izquierda del lever y se abre con un
   clic (.module.open). Un clic y no un title: el title no existe en tablet, y ademas es
   un texto para leer con calma, no en un globo que se va solo. Abierto sale completo,
   sin ellipsis, por lo de siempre: es lo que hay que leer ANTES de mover el interruptor. */
.parameters .modules .empty {
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .05);
    color: #9e9e9e;
    font-size: 0.8rem;
    margin-bottom: 15px;
}

/* La (i). Absoluta dentro de .wrapper-switch, a la izquierda del lever -- que mide 36px y
   esta a 10px del borde -- y AFUERA del label, porque todo lo que esta adentro del label
   mueve el interruptor. Mismo gris que el detalle; blanca al pasar y mientras esta abierto. */
.parameters .modules .module .wrapper-switch .info {
    position: absolute;
    top: 50%;
    right: 54px;
    transform: translateY(-50%);
    font-size: 18px;
    line-height: 1;
    color: #9e9e9e;
    cursor: pointer;
    user-select: none;
}

    .parameters .modules .module .wrapper-switch .info:hover,
    .parameters .modules .module.open .wrapper-switch .info {
        color: #fff;
    }

/* El nombre no se mete debajo de la (i): el padding del label pasa de 45px a 80px solo
   aca, para los 18px del icono y su aire. */
.parameters .modules .module .wrapper-switch .switch label {
    padding-right: 80px;
}

.parameters .modules .module > .detail {
    display: none;
    padding: 0 10px;
    margin: -5px 0 10px;
    font-size: 0.75rem;
    line-height: 15px;
    color: #9e9e9e;
}

    .parameters .modules .module.open > .detail:not(:empty) {
        display: block;
    }

/* Los 5px que le faltan al ultimo modulo para cerrar la tarjeta con los mismos 15px
   que deja .lasted en el resto de la pantalla. Van sobre el modulo y no sobre el
   detalle porque el detalle puede no estar: asi el cierre es el mismo con o sin el. */
.parameters .modules .module:last-child {
    margin-bottom: 5px;
}

/* RANGOS DE SENSORES (/Ranges/Module)

   La barra de aplicar va ARRIBA de la tabla y no en un cajon lateral: lo que se esta
   editando son las filas que se ven, y esconderla obligaria a perder de vista la seleccion
   justo cuando se escribe el valor. */
.ranges-apply {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 15px;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, .05);
    border-radius: 5px;
}

    .ranges-apply > .context {
        min-width: 0;
    }

        /*  El color va declarado y no heredado. `body` fija el fondo (#18191d) pero NO el
            color del texto, asi que cualquier texto que no lo declare cae en el negro por
            defecto del navegador: negro sobre casi negro. El resto de la aplicacion no lo
            nota porque su texto vive dentro de elementos que si lo fijan -- las celdas de
            la tabla, los input, los items del desplegable. */
        .ranges-apply .count {
            font-weight: bold;
            font-size: 0.9rem;
            line-height: 20px;
            color: #fff;
        }

        .ranges-apply .hint {
            font-size: 0.75rem;
            line-height: 16px;
            color: #9e9e9e;
            margin-top: 2px;
        }

    .ranges-apply .fields {
        display: flex;
        align-items: flex-end;
        gap: 10px;
    }

        .ranges-apply .fields .wrapper-input {
            width: 130px;
            margin: 0;
        }

/* EL CASILLERO LO DIBUJA MATERIALIZE, NO ESTA HOJA.

   [type="checkbox"] + span:not(.lever) ya pone una caja de 18px con :before y esconde el
   input. Aca antes se le agregaba ADEMAS un borde propio al mismo span, y se veian dos
   cajas, una dentro de otra.

   Lo unico que hace falta ajustar es lo que ese componente asume y aca no se cumple: el
   span esta pensado para llevar el texto de la etiqueta al lado, con padding-left: 35px.
   En una columna de tabla no hay texto, asi que se recorta al ancho de la caja. */
.ranges-check {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

    .ranges-check [type="checkbox"] + span:not(.lever) {
        padding-left: 18px;
        width: 18px;
        height: 22px;
        line-height: 22px;
    }

    /* El tilde de Materialize viene en su verde de fabrica. El acento del proyecto es azul. */
    .ranges-check [type="checkbox"]:checked + span:not(.lever):before {
        border-right: 2px solid #1e77e5;
        border-bottom: 2px solid #1e77e5;
    }

/* EL BOTON, ESCRITO ACA Y NO HEREDADO.

   .button.flat no es una regla global: esta scopeada a .wrapper-control .control
   .wrapper-button y a .parameters .component. Esta barra no cuelga de ninguno de los dos,
   asi que el boton salia sin fondo ni tamano. Se repite el aspecto en lugar de meter la
   barra dentro de un contenedor al que no pertenece. */
.ranges-apply .fields .button {
    position: relative;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    padding: 0 12px 0 35px;
    border-radius: 5px;
    background: rgba(31, 63, 107, .7);
    color: #3690f1;
    cursor: pointer;
    white-space: nowrap;
}

    .ranges-apply .fields .button i {
        position: absolute;
        top: 0;
        left: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        font-size: 20px;
        color: #478eff;
    }

    .ranges-apply .fields .button .title {
        display: inline;
        font-size: 0.85rem;
    }

    /* Deshabilitado sigue visible pero no invita a apretarlo: sin seleccion no hay nada
       que guardar, y esconderlo dejaria la barra sin accion a la vista. */
    .ranges-apply .fields .button.disabled {
        opacity: .4;
        pointer-events: none;
    }

/* El guion de "sin rango cargado": se lee como ausencia y no como un cero. */
.ranges .sin-rango {
    color: #9e9e9e;
}

/* LA PANTALLA ENTERA ES UNA COLUMNA DEL ALTO DE LA VENTANA.

   .table.controlling trae max-height: calc(100dvh - 144px) con scroll propio, pensado para
   tablas que arrancan justo debajo del encabezado. Aca arriba van ademas los filtros y la
   barra, asi que la tabla se pasaba del alto de la ventana y quedaban dos scrolls: el de la
   pagina y el de la tabla. Con la columna flexible la tabla toma lo que sobra, y el unico
   scroll es el suyo. Los 64px son el padding-top de .layout-container (el topbar). */
.ranges-page {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 64px);
}

/*  El 64px de arriba es solo el respaldo para navegadores sin :has(). Con ViewBag.Screens el
    layout dibuja ademas la barra de pestanias de Ajustes (.wrapper-screens: 15px de margen mas
    35px de elementos, y mas si se parte en dos lineas) en el flujo, ANTES de la vista, asi que
    restar un numero fijo siempre deja un scroll de pagina de ese tamanio. En vez de adivinar el
    numero, el contenedor del layout se vuelve columna flexible solo cuando adentro esta esta
    pantalla: la barra de pestanias mide lo que mida y la pantalla toma el resto. */
.layout-container:has(> .ranges-page) {
    display: flex;
    flex-direction: column;
    height: 100dvh;
}

    .layout-container:has(> .ranges-page) > .ranges-page {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }

    .ranges-page > .padding {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

        .ranges-page .wrapper-table {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
        }

            /*  position: relative NO es decorativo. Materialize pone position: absolute a todo
                [type="checkbox"] (el casillero de cada fila y el input de cada interruptor), y
                un absoluto solo queda recortado por el overflow de un ancestro si ese ancestro
                es, o esta dentro de, su bloque contenedor. Con el scroller en static, los 98
                inputs colgaban del bloque inicial, escapaban del recorte y estiraban el scroll
                de la PAGINA hasta la ultima fila -- 2400px de vacio con 49 sensores, cinco mil
                con los 122 de FRUSAN -- aunque la tabla ya scrolleaba por su cuenta. */
            .ranges-page .wrapper-table .table.controlling {
                position: relative;
                flex: 1 1 auto;
                min-height: 0;
                max-height: none;
            }

/* LA ALARMA EN LA MISMA BARRA (20260914_01): los cuatro campos y un solo boton en una fila.
   El contexto (contador y ayuda) cede ancho antes que los campos, para que estos no se
   partan mientras la ventana lo permita. */
.ranges-apply > .context {
    flex: 1 1 200px;
}

    .ranges-apply .fields {
        flex: 0 0 auto;
    }

        .ranges-apply .fields .wrapper-input {
            width: 115px;
        }

        .ranges-apply .fields .wrapper-select {
            width: 140px;
            margin: 0;
        }

/* EL INTERRUPTOR POR FILA. El mismo dibujo que .wrapper-switch en los formularios -- palanca
   fina, perilla con el borde del fondo -- sin el posicionamiento absoluto de ahi, que en una
   celda no aplica. El encendido va en el azul de esta pantalla (el mismo del tilde de
   .ranges-check) y no en el verde de fabrica de Materialize: la aplicacion no usa ese verde.
   Los selectores repiten la cadena de Materialize para ganarle en especificidad. */
.ranges .ranges-switch {
    display: inline-flex;
    align-items: center;
    height: 22px;
}

    .ranges .ranges-switch label {
        display: inline-flex;
        align-items: center;
        height: 22px;
    }

        .ranges .ranges-switch label .lever {
            margin: 0;
            height: 4px;
        }

            .ranges .ranges-switch label .lever:before, .ranges .ranges-switch label .lever:after {
                width: 16px;
                height: 16px;
                top: -6.5px;
                outline: 4px solid #1a1d24;
                box-shadow: none;
                background-color: #898989;
            }

        .ranges .ranges-switch label input[type=checkbox]:checked + .lever {
            background-color: rgba(30, 119, 229, .45);
        }

            .ranges .ranges-switch label input[type=checkbox]:checked + .lever:before {
                background-color: rgba(30, 119, 229, .15);
            }

            .ranges .ranges-switch label input[type=checkbox]:checked + .lever:after {
                background-color: #1e77e5;
            }

    /* Mientras el servidor confirma, esa fila no se puede volver a tocar. */
    .ranges .ranges-switch.pending {
        opacity: .4;
        pointer-events: none;
    }

/* =======================================================================================
   EL MONITOREO POR PERIODO  --  /Reports/Monitoring

   Una fila por sensor y una columna por ranura de tiempo: 24 horas, 7 dias o los dias del
   mes. Todo lo de aca cuelga de .monitoring -- las clases del desvio (.dev-*) son nombres
   cortos y genericos, y sueltas en una hoja de trece mil lineas chocarian con cualquier cosa.

   El resto de la pantalla no trae estilos propios: la tabla, el cajon de filtros y el boton
   Encontrar son los mismos de Reportes > Historico. Lo unico nuevo es el paso de periodo y la
   escala de color, que es lo unico que Historico no tiene.

   No hay paleta nueva. El calido sale de #ffb74d y #f44336, el frio de #4a9eff, que son los
   acentos que la aplicacion ya usa; lo unico que cambia entre un escalon y el siguiente es
   cuanto pesan sobre el fondo. Una segunda paleta seria un tema paralelo para mantener.
   ======================================================================================= */

/* ---------------------------------------------------------------------------------------
   El paso de periodo

   Vive en la fila de .offsets, y no adentro del cajon de filtros: pasar de un dia al siguiente
   es LA interaccion de esta pantalla y no puede costar abrir un cajon. La vista, el agregado y
   el salto a una fecha lejana si van en el cajon, que es donde los pone Historico.

   Las tres cajas usan la misma medida y el mismo fondo que .search y .wrapper-select: 35px de
   alto, rgba(255,255,255,.05) y 5px de radio. Es la fila que en Historico ocupa el buscador,
   con la misma altura, no una barra nueva.
   --------------------------------------------------------------------------------------- */
/* Las dos tarjetas de la pantalla -- el paso de período y la grilla -- tienen que arrancar en
   la misma vertical. .offsets trae 3.25px de costado y .reports .padding trae 7.5px: acá se
   igualan al segundo, que es el de la tarjeta grande.

   Y el espacio entre las dos lo pone el margin-bottom de .component, no la suma de los dos
   paddings: sin bajar el padding-top de .padding quedaban 30px de aire en el medio. */
.monitoring .offsets {
    padding: 15px 7.5px 0;
}

.monitoring .padding {
    padding-top: 0;
}

.monitoring .wrapper-period {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .monitoring .wrapper-period .step {
        width: 35px;
        height: 35px;
        flex: 0 0 35px;
        border-radius: 5px;
        background: rgba(255, 255, 255, .05);
        color: #e3e3e3;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        user-select: none;
    }

        .monitoring .wrapper-period .step i {
            font-size: 18px;
        }

    /* El periodo se lee, no se edita: la fecha se cambia con las flechas o desde el cajon. Por
       eso es una caja de texto y no un input -- un campo que parece editable y no lo es miente
       mas de lo que ayuda. */
    .monitoring .wrapper-period .period {
        height: 35px;
        line-height: 35px;
        padding: 0 15px;
        border-radius: 5px;
        background: rgba(255, 255, 255, .05);
        color: #fff;
        font-size: 12px;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 210px;
        text-align: center;
    }

/* color-scheme le dice al navegador que dibuje SU calendario -- el icono, el desplegable
   nativo -- en oscuro. Sin esto el iconito sale negro sobre fondo negro y no se ve. */
#monitoring-date {
    color-scheme: dark;
}

/* ---------------------------------------------------------------------------------------
   La grilla

   En la vista de mes son treinta y seis columnas: no entran en un monitor, asi que la tabla
   escrolea de costado dentro de .controlling. Ambiente y Sensor viajan pegados a la
   izquierda: sin eso, en el dia 24 ya no se sabe de que sensor es la fila que se esta
   mirando.

   El fondo solido de las columnas fijas es obligatorio, no decorativo: una celda sticky sin
   fondo deja pasar por debajo las celdas que se le cruzan.
   --------------------------------------------------------------------------------------- */
.monitoring .monitoring-table {
    border-collapse: separate;
    border-spacing: 0;
}

    /* El fondo de las columnas fijas es el de la TARJETA, no el de la aplicacion: la grilla
       vive adentro de una .component y una celda sticky con el fondo de afuera se recorta
       contra la tarjeta en cuanto la tabla escrolea de costado. */
    .monitoring .monitoring-table th.fixed,
    .monitoring .monitoring-table td.fixed {
        position: sticky;
        background: #1c1d22;
        z-index: 2;
    }

    .monitoring .monitoring-table thead th.fixed {
        z-index: 3;
    }

    .monitoring .monitoring-table .fixed-1 {
        left: 0;
        min-width: 170px;
        max-width: 170px;
    }

    .monitoring .monitoring-table .fixed-2 {
        left: 170px;
        min-width: 150px;
        max-width: 150px;
        box-shadow: 1px 0 0 #2a292e;
    }

        .monitoring .monitoring-table .fixed-1 .flex,
        .monitoring .monitoring-table .fixed-2 .flex {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }

    /* 48px es lo que necesita el encabezado mas ancho, el "Lu 01" de la vista de semana. Se
       usa la misma medida en las tres vistas para que cambiar de vista no cambie el ancho de
       la columna y la grilla no salte. */
    .monitoring .monitoring-table th.slot,
    .monitoring .monitoring-table td.slot {
        min-width: 48px;
        padding: 10px 3px;
    }

    /* La linea que separa las consignas de las ranuras. La sexta columna es SIEMPRE la primera
       ranura -- ambiente, sensor, ultima, minimo, maximo y despues el tiempo --, asi que el
       nth-child no depende de la vista. Sin esta linea, "-19.4 -22.0 -16.0 -19.4" se lee como
       cuatro temperaturas seguidas cuando en realidad las tres primeras son otra cosa. */
    .monitoring .monitoring-table th:nth-child(6),
    .monitoring .monitoring-table td:nth-child(6) {
        border-left: 1px solid #3a3940;
    }

    /* Cada ambiente arranca con una linea: son doce sensores seguidos y sin el corte la grilla
       es un bloque. La linea va arriba de la fila que abre el grupo y no abajo de la que lo
       cierra, que es donde se lee como separacion entre un ambiente y el siguiente. */
    .monitoring .monitoring-table tbody tr.group td {
        border-top: 1px solid #3a3940;
    }

    .monitoring .monitoring-table tbody tr:first-child td {
        border-top: 0;
    }

    /* Minimo y maximo son la referencia contra la que se lee todo lo demas, no un dato mas:
       van en gris para que la fila la dominen las temperaturas. */
    .monitoring .monitoring-table td.limit {
        color: #9d9d9d;
    }

    .monitoring .monitoring-table td.last {
        font-weight: bold;
    }

    .monitoring .sin-dato {
        color: #55555c;
    }

/* ---------------------------------------------------------------------------------------
   El desvio

   Cinco escalones para cada lado -- 1, 2, 3, 5 grados y mas de 5 -- y nada en el medio. Que
   la celda en rango no se pinte es el punto: una planta sana tiene que verse vacia de color,
   y asi el ojo encuentra la excursion sin leer un solo numero.
   --------------------------------------------------------------------------------------- */
.monitoring .dev-none,
.monitoring .dev-empty {
    background: transparent;
}

/* Sin rango cargado no es lo mismo que en rango: no se pudo medir el desvio. Se raya en
   diagonal para que se lea como "falta un dato de configuracion" y no como "todo bien". */
.monitoring .dev-norange {
    background: repeating-linear-gradient( 135deg, transparent, transparent 4px, rgba(255, 255, 255, .05) 4px, rgba(255, 255, 255, .05) 8px );
}

.monitoring .dev-over-1 { background: rgba(255, 183, 77, .18); }
.monitoring .dev-over-2 { background: rgba(255, 152, 0, .32); }
.monitoring .dev-over-3 { background: rgba(255, 112, 67, .48); }
.monitoring .dev-over-4 { background: rgba(244, 67, 54, .66); }
.monitoring .dev-over-5 { background: rgba(211, 47, 47, .92); }

.monitoring .dev-under-1 { background: rgba(129, 212, 250, .18); }
.monitoring .dev-under-2 { background: rgba(79, 195, 247, .32); }
.monitoring .dev-under-3 { background: rgba(41, 152, 255, .48); }
.monitoring .dev-under-4 { background: rgba(25, 118, 210, .70); }
.monitoring .dev-under-5 { background: rgba(13, 71, 161, .95); }

/* En los dos escalones mas fuertes el fondo ya es opaco y el gris de la tabla se pierde
   adentro. */
.monitoring .monitoring-table td.dev-over-4,
.monitoring .monitoring-table td.dev-over-5,
.monitoring .monitoring-table td.dev-under-4,
.monitoring .monitoring-table td.dev-under-5 {
    color: #fff;
    font-weight: bold;
}

/* ---------------------------------------------------------------------------------------
   La leyenda
   --------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------
   LA BARRA DEL HANDPICK

   Va sobre .handpick a secas y no sobre la variante de ambientes: la caja escrolea igual en
   Procesos y en Graficos, y ahi salia la barra gris del navegador en medio de un panel
   oscuro. Son los mismos cuatro valores que .wrapper-select .dropdown-content y que el propio
   cajon -- pista negra translucida, pulgar #1e77e5, 8 px --, que es el patron que el resto
   del CSS ya repite por componente.
   --------------------------------------------------------------------------------------- */
.wrapper-handpick .handpick::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .4);
    border-radius: 5px;
}

.wrapper-handpick .handpick::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

.wrapper-handpick .handpick::-webkit-scrollbar-corner {
    background-color: transparent;
}

.wrapper-handpick .handpick::-webkit-scrollbar-thumb {
    background-color: #1e77e5;
    border-radius: 5px;
}

/* ---------------------------------------------------------------------------------------
   EL FILTRO DE AMBIENTES DEL CAJON

   Es el .wrapper-handpick de Reportes > Procesos, sin tocar una sola de sus reglas: la caja,
   el fondo, el punto azul del .circle y el alto de 35px por fila salen todos de ahi. Lo unico
   que se agrega es lo que ese bloque no tenia: un rotulo, el contador de seleccionados y el
   boton de limpiar.

   La variante se marca con .environments sobre el mismo .wrapper-handpick, asi que nada de
   esto se le cae encima al handpick de Procesos ni al de Graficos.
   --------------------------------------------------------------------------------------- */
.wrapper-handpick.environments {
    margin: 0 0 10px;
    position: relative;
}
    .wrapper-handpick.environments.lasted {
        margin-bottom: 15px;
    }

    /* Mismo rotulo que .wrapper-input > label y .wrapper-select > label: los tres son campos
       del mismo cajon y arrancan en la misma sangria. */
    .wrapper-handpick.environments .label {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        padding: 0 10px;
        margin-bottom: 5px;
        font-weight: bold;
        font-size: 12px;
        color: #fff;
    }

        .wrapper-handpick.environments .label .summary {
            font-weight: 500;
            color: #9d9d9d;
            font-size: 11px;
        }

    /* El handpick de Procesos escrolea a 245px. Aca son ambientes y son bastantes menos, asi
       que la caja se queda mas baja para que el boton Encontrar no se vaya del cajon.

       202 = seis filas de 32 mas los 10 de padding inferior. Tiene que caer en un borde de
       fila: con una medida redonda el corte parte la ultima linea de texto por la mitad y se
       lee como un error de dibujo en vez de como "hay mas abajo", que ya lo dice la barra. */
    .wrapper-handpick.environments .handpick {
        max-height: 202px;
    }

    /* LA FILA SE VE COMO EL SELECTOR DE SENSORES DE GRAFICOS

       El handpick de Procesos marca lo elegido con un punto azul y una cajita de fondo. Para
       una lista donde arrancan TODOS elegidos eso es al reves de lo que conviene: ocho puntos
       y ocho cajitas es el estado normal, y el ruido se lo lleva lo que no pasa nada.

       .graphics-sensor-option lo resuelve al reves y mejor: sin marca, y la seleccion la dice
       la opacidad del texto -- blanco elegido, 38% no elegido. Lo que se ve es lo que quedo
       afuera. Se copian sus mismos valores, no unos parecidos.

       Todo cuelga de .environments, asi que Procesos y Graficos siguen con su punto. */
    .wrapper-handpick.environments .handpick .group .content .element,
    .wrapper-handpick.environments .handpick .group .content .element.active {
        min-height: 32px;
        padding: 0 8px;
        border-radius: 5px;
        background: transparent;
        font-weight: 500;
        transition: .2s ease;
    }

        .wrapper-handpick.environments .handpick .group .content .element:hover {
            background: rgba(255, 255, 255, .06);
        }

        /* El punto no se muestra ni siquiera activo: aca la marca es el color. */
        .wrapper-handpick.environments .handpick .group .content .element .circle,
        .wrapper-handpick.environments .handpick .group .content .element.active .circle {
            display: none;
        }

        .wrapper-handpick.environments .handpick .group .content .element span.descripcion {
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 32px;
            font-size: 13px;
            color: rgba(255, 255, 255, .38);
            transition: .2s ease;
        }

        .wrapper-handpick.environments .handpick .group .content .element:hover span.descripcion {
            color: rgba(255, 255, 255, .72);
        }

        .wrapper-handpick.environments .handpick .group .content .element.active span.descripcion {
            color: #fff;
        }

    /* Limpiar. Flota sobre la esquina inferior derecha de la lista, no arriba: ahi queda a
       mano del pulgar y no le compite el lugar al rotulo. Mismo azul que el pulgar de la
       barra y el mismo radio de 7px que el boton Encontrar, que es el que tiene debajo. */
    .wrapper-handpick.environments > .button {
        position: absolute;
        right: 14px;
        bottom: 10px;
        width: 34px;
        height: 34px;
        border-radius: 7px;
        background: #1e77e5;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        user-select: none;
        box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
    }
        .wrapper-handpick.environments > .button:hover {
            background: #2e86f0;
        }

        .wrapper-handpick.environments > .button i {
            font-size: 19px;
        }

.monitoring .monitoring-legend {
    margin-top: 15px;
    font-size: 11px;
    font-weight: bold;
    color: #9d9d9d;
}

    .monitoring .monitoring-legend .scale {
        display: flex;
        align-items: center;
        gap: 2px;
        flex-wrap: wrap;
    }

        .monitoring .monitoring-legend .scale .cap {
            padding: 0 8px;
        }

    .monitoring .monitoring-legend .box {
        height: 20px;
        min-width: 34px;
        border-radius: 3px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 6px;
        border: 1px solid #2a292e;
        color: #e3e3e3;
    }

    .monitoring .monitoring-legend .marks {
        display: flex;
        align-items: center;
        gap: 15px;
        flex-wrap: wrap;
        margin-top: 10px;
    }

        .monitoring .monitoring-legend .marks .mark {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .monitoring .monitoring-legend .marks .note {
            color: #6f6f76;
            font-weight: normal;
        }

        /* El recuento se separa del resto y se va al otro extremo: no es parte de la leyenda,
           es cuanto hay en pantalla. */
        .monitoring .monitoring-legend .marks .count {
            margin-left: auto;
            color: #9d9d9d;
        }