/* Variables
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@import '../EstilosMovil/constants.css';



/* Globales
--------------------------------------------------------------------------------------------------------------------------------------------------- */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: none;
    font-family: var(--textFont--main);
    font-size: var(--textSize--normal);
    line-height: var(--textSize--normal);
    color: var(--colorText--normal);
    text-align: left;
}

input[type=date], input[type=time], input[type=datetime-local] {
    cursor: text;
}



/* Pantalla de carga
--------------------------------------------------------------------------------------------------------------------------------------------------- */
.common--loadingScene {
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;
    z-index: var(--zIndex--loadingScene);
    display: flex; flex-wrap: wrap;
    background-color: var(--colorInterface--background);
}

    .common--loadingScene[nodisplayed] {
        display: none;
    }

    .common--loadingScene img {
        margin: auto auto 0;
        flex-basis: 100%;
    }

    .common--loadingScene h2 {
        margin: 10px auto auto;
        padding-left: 25px;
        flex-basis: 100%;

        font-family: var(--textFont--main);
        font-size: var(--textSize--title);
        color: white;
        font-weight: bold;
        text-align: center;
    }



/* Cuerpo y página general
--------------------------------------------------------------------------------------------------------------------------------------------------- */
body {
    width: 100%; height: 100%;
    background-color: var(--colorInterface--background);
}

    body .body--window {
        min-height: 100vh;
        margin: 0 auto;
        display: grid;
        background-color: var(--colorInterface--background);
    }

        /* Content
        -------------------------------------------------- */
        body .body--window .window--container {
            padding: 0;
            margin: 0;
            background-color: #fff;
        }



/* Custom alert
--------------------------------------------------------------------------------------------------------------------------------------------------- */
.common--customAlert {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--zIndex--elementOnFocus);
    display: flex;
    flex-wrap: wrap;
    background-color: rgba(0,0,0,0);
}

    /* Content
    -------------------------------------------------- */
    .common--customAlert .customAlert--content {
        width: 90%;
        min-height: 80px;
        padding: var(--padding--insideElements) var(--padding--insideInterfaces);
        border-radius: var(--borderRadius--elements);
        margin: auto auto 20px;
        display: flex;
        background-color: var(--colorAlerts--normal) !important;
    }

        .common--customAlert .customAlert--content[successful] {
            background-color: var(--colorAlerts--successful) !important;
        }

        .common--customAlert .customAlert--content[careful] {
            background-color: var(--colorAlerts--careful) !important;
        }

        .common--customAlert .customAlert--content i {
            margin: auto 0 auto 0;
            font-size: 30px;
            color: white;
        }

        .common--customAlert .customAlert--content p {
            margin: auto auto auto var(--padding--insideElements);
            color: #fff;
            font-weight: bold;
            text-align: left;
        }

        .common--customAlert .customAlert--content button {
            width: auto;
            padding: 0 20px;
            margin: auto 10px auto auto;
        }























    /* Por BORRAR
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    /* Común - Butón //Borrar
    -------------------------------------------------- */
    .common--customAlert .common--button {
        width: 100%;
        height: var(--height--elements);
        border: none;
        border-radius: var(--borderRadius--elements);
        background-color: var(--colorElements--action);
        box-shadow: -2px 2px 0px 0px var(--colorShadow--color);
        color: white;
        text-align: center;
        font-weight: bold;
    }

        .common--customAlert .common--button:hover {
            box-shadow: none;
            background-color: var(--colorElements--actionStrong);
        }

        .common--customAlert .common--button[nodisplayed] {
            display: none;
        }

        .common--customAlert .common--button[novisibility] {
            visibility: hidden;
        }

        .common--customAlert .common--button[disabled] {
            background-color: var(--colorElements--actionLight);
            color: var(--colorText--gray);
            cursor: not-allowed;
        }

        .common--customAlert .common--button[loading][disabled], .common--button[loading] {
            background: linear-gradient(86deg, var(--colorElements--action), #ffffff);
            background-size: 400% 400%;
            box-shadow: none;
            color: white;
            animation: buttonLoading 3s ease infinite;
            cursor: not-allowed;
        }

        .common--customAlert .common--button[shake] {
            animation: shake 0.5s;
        }


/* Cuerpo y página general (contenido completo)
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */
body.body--fullContent {
    background-color: #fff;
}

    body.body--fullContent .body--window {
        width: 100%;
        min-height: 100vh;
        padding: 0;
        margin: 0;
        display: initial;
    }

    /* Navegación
    -------------------------------------------------- */
    body.body--fullContent .window--navigation {
        display: none;
    }

    /* Content
    -------------------------------------------------- */
    body.body--fullContent .window--container {
        width: 100%;
        padding: 0;
        margin: 0;
        grid-column: 1/3;
    }






.common--loadingScene.inactive /* TEMPORAL */ {
    display: none;
}



















/* General elements
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */

    /* Común - Título
    -------------------------------------------------- */
    .common--title {
        margin: 0;

        font-size: var(--textSize--title);
        text-align: center;
        font-weight: bold;

        cursor: default;
    }

    /* Común - Parráfos
    -------------------------------------------------- */
    .common--text {
        margin: 0;

        font-size: var(--textSize--details);

        cursor: default;
    }

    /* Común - Detalles
    -------------------------------------------------- */
    .common--details {
        margin: 0;

        font-size: var(--textSize--smaller);

        cursor: default;
    }

    /* Común - Etiquetas
    -------------------------------------------------- */
    .common--label {
        margin: 0 0 var(--padding--insideSubtitle);

        font-weight: bold;

        cursor: default;
    }

    /* Común - Input
    -------------------------------------------------- */
    .common--input {
        width: 100%; height: var(--height--elements);
        padding: 0 var(--padding--insideElements);
        border: solid 1px var(--colorElements--action); border-radius: var(--borderRadius--elements);
        background-color: #fff;    
    }
    .common--input:hover, .common--input:focus  {
        border-bottom: solid 3px var(--colorElements--actionStrong); border-color: var(--colorElements--actionStrong);
        box-shadow: 0 0 10px 0 var(--colorElements--actionStrong);
        outline: none;
    }
    .common--input[nodisplayed] {
        display: none;
    }
    .common--input[novisibility] {
        visibility: hidden;
    }
    .common--input[disabled] {    
        border-bottom: solid 3px var(--colorElements--tenderStrong); border-color: var(--colorElements--tenderStrong);
        background-color: var(--colorElements--tenderLight); 

        cursor: not-allowed
    }
    .common--input[disabled]:hover, .common--input[disabled]:focus {
         box-shadow: 0 0 10px 0 var(--colorShadow--color);
    }
    .common--input[readonly] {      
        border: none;
        background-color: transparent; 

        cursor: default;
    }
    .common--input[readonly]:hover, .common--input[readonly]:focus {
       box-shadow: none;
    }
    .common--input[loading] {
        animation: elementLoading 3s ease infinite;
    }   

    /* Común - Area de texto
    -------------------------------------------------- */
    .common--textarea {
        width: 100%; height: 80px;
        padding: var(--padding--insideElements);
        border: solid 1px var(--colorElements--action); border-radius: var(--borderRadius--elements);
        background-color: #fff;
            
        resize: none;
    }
    .common--textarea:hover, .common--textarea:focus {
        border-bottom: solid 3px var(--colorElements--action); border-color: var(--colorElements--actionStrong);
        box-shadow: 0 0 10px 0 var(--colorElements--actionStrong);
        outline: none;
    }
    .common--textarea[nodisplayed] {
        display:none;
    }
    .common--textarea[novisibility] {
        visibility: hidden;
    }
    .common--textarea[disabled] {
        border-bottom: solid 3px var(--colorElements--tenderStrong); border-color: var(--colorElements--tenderStrong);
        background-color: var(--colorElements--tenderLight); 

        cursor:not-allowed
    }
    .common--textarea[disabled]:hover, .common--textarea[disabled]:focus {
         box-shadow: 0 0 10px 0 var(--colorShadow--color);
    }
    .common--textarea[readonly] {      
        border: none;
        background-color: transparent; 

        cursor:default;
    }
    .common--textarea[readonly]:hover, .common--input[readonly]:focus {
       box-shadow: none;
    }

    /* Común - Selector
    -------------------------------------------------- */
    .common--select {
        width: 100%; height: var(--height--elements);
        padding: var(--padding--insideElements);
        border: solid 1px var(--colorElements--action); border-radius: var(--borderRadius--elements);
        background-color: #fff;
    }
    .common--select:hover, .common--select:hover {
        border-bottom: solid 3px var(--colorElements--action); border-color: var(--colorElements--actionStrong);
        box-shadow: 0 0 10px 0 var(--colorElements--actionStrong);

        cursor: pointer;
    }
    .common--select[nodisplayed] {
        display:none;
    }
    .common--select[novisibility] {
        visibility: hidden;
    }
    .common--select[disabled] {
        border-bottom: solid 3px var(--colorElements--tenderStrong); border-color: var(--colorElements--tenderStrong);
        background-color: var(--colorElements--tenderLight); 

        cursor:not-allowed
    }
    .common--select[disabled]:hover, .common--select[disabled]:focus {
         box-shadow: 0 0 10px 0 var(--colorShadow--color);
    }

    /* Común - Butón
    -------------------------------------------------- */
    .common--button {
        width: 100%; height: var(--height--elements);
        padding: var(--padding--insideSubtitle) var(--padding--insideElements);
        border: none; border-radius: var(--borderRadius--elements);
        background-color: var(--colorElements--action);
        box-shadow: -2px 2px 0px 0px var(--colorShadow--color);
        
        
        color: #fff;
        text-align: center;
        font-weight: bold;
    }
    .common--button:hover {      
        box-shadow: none;
        background-color: var(--colorElements--actionStrong); 
    }
    .common--button[nodisplayed] {
        display: none;
    }
    .common--button[novisibility] {
        visibility: hidden;
    }
    .common--button[disabled] {
        background-color: var(--colorElements--actionLight); 

        color: var(--colorText--gray);

        cursor: not-allowed; 
    }
    .common--button[loading][disabled], .common--button[loading] {
        background: linear-gradient(86deg, var(--colorElements--action), #ffffff); background-size: 400% 400%; 
        box-shadow: none;

        color: #fff;

        animation: buttonLoading 3s ease infinite;
        cursor: not-allowed;
    }
    .common--button[shake] {
        animation: shake 0.5s;
    }

    /* Común - Botón afirmativo
    -------------------------------------------------- */
    .common--buttonAfirmative {
        background-color: var(--colorElements--afirmetive);
        box-shadow: -2px 2px 0px 0px var(--colorShadow--color);
    }
    .common--buttonAfirmative:hover {
        background-color: var(--colorElements--afirmativeStrong); 
        box-shadow: none;
    }
    .common--buttonAfirmative[nodisplayed] {
        display: none;
    }
    .common--buttonAfirmative[novisibility] {
        visibility: hidden;
    }
    .common--buttonAfirmative[disabled] {
        background-color: var(--colorElements--afirmativeLight); 
        
        color: var(--colorText--gray); 
        
        cursor: not-allowed;
    }
    .common--buttonAfirmative[loading][disabled], .common--buttonAfirmative[loading] {
        background: linear-gradient(86deg, var(--colorElements--afirmetive), #ffffff); background-size: 400% 400%; 
        box-shadow: none;

        color: #fff;

        animation: buttonAfirmativeLoading 3s ease infinite;
    }
    .common--buttonAfirmative[press] { 
        background: linear-gradient(to right, var(--colorElements--afirmetive) 100%, #fff 100%);
        box-shadow: 0px 0px 25px 0 var(--colorElements--afirmetive);

        animation: pressAfirmativeAnimation 1.40s; 
    }
    .common--buttonAffirmative {
        background-color: var(--colorElements--affirmetive);
        box-shadow: -2px 2px 0px 0px var(--colorShadow--color);
    }
    .common--buttonAffirmative:hover {
        background-color: var(--colorElements--affirmativeStrong); 
        box-shadow: none;
    }
    .common--buttonAffirmative[nodisplayed] {
        display: none;
    }
    .common--buttonAffirmative[novisibility] {
        visibility: hidden;
    }
    .common--buttonAffirmative[disabled] {
        background-color: var(--colorElements--affirmativeLight); 
        
        color: var(--colorText--gray); 
        
        cursor: not-allowed;
    }
    .common--buttonAffirmative[loading][disabled], .common--buttonAffirmative[loading] {
        background: linear-gradient(86deg, var(--colorElements--afirmetive), #ffffff); background-size: 400% 400%; 
        box-shadow: none;

        color: #fff;

        animation: buttonAffirmativeLoading 3s ease infinite;
    }
    .common--buttonAffirmative[press] { 
        background: linear-gradient(to right, var(--colorElements--afirmetive) 100%, #fff 100%);
        box-shadow: 0px 0px 25px 0 var(--colorElements--afirmetive);

        animation: pressAffirmativeAnimation 1.40s; 
    }
   
    /* Común - Botón negativo
    -------------------------------------------------- */
    .common--buttonNegative {
        background-color: var(--colorElements--negative);
        box-shadow: -2px 2px 0px 0px var(--colorShadow--color);

        color: #fff;
    }
    .common--buttonNegative:hover {
        background-color: var(--colorElements--negativeStrong); 
        box-shadow: none;
    }
    .common--buttonNegative[nodisplayed] {
        display: none;
    }
    .common--buttonNegative[novisibility] {
        visibility: hidden;
    }
    .common--buttonNegative[disabled] {
        background-color: var(--colorElements--negativeLight); 
        
        color: var(--colorText--gray);
        
        cursor: not-allowed;
    }
    .common--buttonNegative[loading][disabled], .common--buttonNegative[loading] {
        background: linear-gradient(86deg, var(--colorElements--negative), #ffffff); background-size: 400% 400%; 
        box-shadow: none;

        color: #fff;

        animation: buttonNegativeLoading 3s ease infinite;
    }
    .common--buttonNegative[press] { 
        background: linear-gradient(to right, var(--colorElements--negative) 100%, #fff 100%);
        box-shadow: 0px 0px 25px 0 var(--colorElements--negative);

        animation: pressNegativeAnimation 1.40s; 
    }

    /* Común - Checkbox
    -------------------------------------------------- */
    .common--checkbox {
        width: auto; height: 32px;
        padding: 0 0 0 25px;
        margin: 6px auto;
        position: relative;
        display: flex;

        cursor: pointer; 
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        /* Normal */
        .common--checkbox label {
            margin: 3px auto auto 10px;
        }
        .common--checkbox input /* Esconde el checkbox por default */ {
            width: 0; height: 0;
            opacity: 0;

            cursor: pointer;
        }
        .common--checkbox span /* Estiliza el checkbox personalizado */ {
            width: 25px; height: 25px;
            border: solid 3px var(--colorElements--action); border-radius: 5px;
            margin: auto;
            position: absolute;
            top: 0; left: 0;
            background-color: transparent;
            display: block;

            cursor: pointer;
        }

            .common--checkbox:hover input ~ span /* en hover, estiliza */ {
                background-color: var(--colorElements--actionStrong);
            }
            .common--checkbox input:checked ~ span /* en checked, estiliza */ {
                border: solid 3px var(--colorElements--actionStrong);
                background-color: transparent;
            }
            .common--checkbox span:after /* Estiliza el checkmark (escondido por defecto) */ {
                width: 8px; height: 16px;
                border: solid var(--colorElements--actionStrong); border-width: 0 3px 3px 0;
                position: absolute;
                left: 6px; top: 0px; 
                display: none;

                content: "";
                -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);
            }
            .common--checkbox input:checked ~ span:after /* en checked, muestra el checkmark */ {
                display: block;
            }

        /* Hover */
        .common--checkbox:hover {
        }

            .common--checkbox input:hover + span /* en hover, cambia el checkbox personalizado */ {
                background-color: var(--colorElements--actionStrong);
                border-color: var(--colorElements--actionStrong);
                box-shadow: 0 0 10px 0 var(--colorElements--actionStrong);
            }   
            .common--checkbox input:focus + span /* en hover, cambia el checkbox personalizado */ {
                box-shadow: 0 0 10px 0 var(--colorElements--actionStrong);
            }   

        /* Hover checked */
        .common--checkbox:checked:hover {
        }

            .common--checkbox input:checked:hover + span /* en hover, cambia el checkbox personalizado */ {
                background-color: var(--colorElements--actionStrong);
            }
            .common--checkbox input:checked:hover + span:after /* en hover, cambia el checkmark */ {
                border: solid #fff; border-width: 0 3px 3px 0;
            }

        /* Desactivado */
        .common--checkbox[disabled] {
            cursor: not-allowed;
        }

            .common--checkbox[disabled] label{
                color: var(--colorText--grayStrong);

                cursor: not-allowed;
            }
            .common--checkbox input[disabled] ~ span {
                border-color: var(--colorElements--tenderStrong);

                cursor: not-allowed;
            }
            .common--checkbox input[disabled]:hover + span {
                background-color: transparent;
                box-shadow: 0 0 10px 0 var(--colorShadow--color);
            }
            .common--checkbox[disabled] span:after {
                border-color: var(--colorElements--tenderStrong);
            }
            .common--checkbox[disabled] input:checked:hover + span:after {
                border-color: var(--colorElements--tenderStrong);
            }

    /* Común - Switch
    -------------------------------------------------- */
    .common--switch {
        width: auto; height: 32px;
        padding: 0 0 0 35px;
        margin: 6px auto;
        position: relative;
        display: flex;

        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        /* Normal */
        .common--switch label {
            margin: 6px auto auto 35px;
        }
        .common--switch input /* Esconde el checkbox por default */ { 
            width: 0; height: 0;
            opacity: 0;
        }
        .common--switch span /* Estiliza el checkbox personalizado */ {
            width: 60px;
            background-color: #fff;
            border: solid 3px var(--colorElements--action);
            border-radius: 15px;
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;

            cursor: pointer;
            -webkit-transition: .4s;
            transition: .4s;
        }
        
            .common--switch input:checked + span {
                background-color: #fff;
            }    
            .common--switch span:before /* Estiliza el slider (desactivado) */ {
                width: 24px; height: 23px;
                border-radius: 15px;
                background-color: var(--colorElements--negative);
                position: absolute;
                left: 2px; bottom: 2px;
                                
                content: "";
                -webkit-transition: .4s;
                transition: .4s;
            }
            .common--switch input:checked + span:before /* Estiliza el slider (activado) */ {
                background-color: var(--colorElements--affirmativeStrong);

                -webkit-transform: translateX(26px);
                -ms-transform: translateX(26px);
                transform: translateX(26px);
            }

        /* Hover */
        .common--switch:hover{
        }

            .common--switch input:focus + span {
                box-shadow: 0 0 10px 0 var(--colorElements--actionStrong);
            }
            .common--switch input:hover + span {
                box-shadow: 0 0 10px 0 var(--colorElements--actionStrong);
            }
            .common--switch:hover span:before {
                background-color: var(--colorElements--negativeStrong);

                -webkit-transform: translateX(5px);
                -ms-transform: translateX(5px);
                transform: translateX(5px);
            }
            .common--switch:hover input:checked + span:before {
                background-color: var(--colorElements--affirmativeStrong);

                -webkit-transform: translateX(20px);
                -ms-transform: translateX(20px);
                transform: translateX(20px);
            }

        /* Desactivado */
        .common--switch[disabled]{
        }

            .common--switch[disabled] label {
                color: var(--colorText--grayStrong);

                cursor: not-allowed;
            }
            .common--switch input[disabled]:hover + span {
                border-radius: 15px;
                box-shadow: 0 0 10px 0 var(--colorShadow--color);
            }
            .common--switch input[disabled] + span {
                background-color: var(--colorElements--tenderLight);
                border-color: var(--colorElements--tenderStrong);
            }
            .common--switch input[disabled] + span:before {
                background-color: var(--colorElements--negativeLight);
            }
            .common--switch input[disabled]:checked + span:before {
                background-color: var(--colorElements--affirmativeLight);    
            }

    /* Común - Radio
    -------------------------------------------------- */
    .common--radio {
        width: auto; height: 32px;
        padding-left: 45px;
        margin: 6px auto;   
        position: relative;
        display: flex;

        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        /* Normal */
        .common--radio label {
            margin: auto 0;
        }
        .common--radio input /* Esconde el checkbox por default */ { 
            width: 0; height: 0;
            position: absolute;
            opacity: 0;

            cursor: pointer;
        }
        .common--radio span /* Estiliza el checkbox personalizado */ {
            width: 22px; height: 22px;           
            border: solid 3px var(--colorElements--action); border-radius: 50%;
            margin: auto 0;
            position: absolute;
            top: 0; left: var(--padding--insideElements); right: 0; bottom: 0;
            background-color: transparent;

            cursor: pointer;
            -webkit-transition: .4s;
            transition: .4s;
        }
        
            .common--radio input:checked + span {
                background-color: var(--colorElements--actionStrong);
                border-color: var(--colorElements--actionStrong);
            }
             input:focus + span {
                box-shadow: 0 0 10px 0 var(--colorElements--actionStrong);
            }

        /* Hover */
        .common--radio:hover{
            background-color: var(--colorElements--shower);
        }

            .common--radio:hover input ~ span {
                background-color: var(--colorElements--actionStrong);
                box-shadow: 0 0 10px 0 var(--colorElements--actionStrong);
            }
            .common--radio:hover label{
                color: var(--colorText--action);

                cursor: pointer;
            }

        /* Desactivado */
        .common--radio[disabled]{
        }

            .common--radio[disabled] label {
                color: var(--colorText--grayStrong);

                cursor: not-allowed;
            }
            .common--radio input[disabled] + span {
                background-color: transparent;
                border-color: var(--colorElements--tenderSoStrong);
            }
            .common--radio input[disabled]:hover + span {
                box-shadow: 0 0 10px 0 var(--colorShadow--color);

                cursor: not-allowed;
            }
  
    /* Común - Tabla
    -------------------------------------------------- */
    .common--table {
        width: 100%;
        border: none; border-collapse: collapse;
        display: table; table-layout: fixed;
        background-color: #fff;
    }

    
   


/* Elementos de texto
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */

    /* Texto - Acción
    -------------------------------------------------- */
    .text--action {
        font-size: inherit;
        color: var(--colorText--link);
        font-weight: bold;
    }

    /* Texto - Acción afirmativa
    -------------------------------------------------- */
    .text--actionAfirmative {
        font-size: inherit;
        color: var(--colorText--actionAfirmative);
        font-weight: bold;
    }
    .text--actionAffirmative {
        font-size: inherit;
        color: var(--colorText--affirmative);
        font-weight: bold;
    }

    /* Texto - Acción afirmativa
    -------------------------------------------------- */
    .text--actionNegative {
        font-size: inherit;
        color: var(--colorText--negative);
        font-weight: bold;
    }

    /* Texto - Enlace
    -------------------------------------------------- */
    .text--link, .text--link > i {
        font-size: inherit;
        color: var(--colorText--link);
        font-weight: bold;
        text-decoration: underline;
    }
    .text--link:hover, .text--link:hover > i{
        color: var(--colorText--linkStrong);
    }

    .text-link, .text-link > i /* Borrar */ {
        color: var(--colorText--link);
        font-weight: bold;
        text-decoration: underline;
    }
    .text-link:hover, .text-link:hover > i /* Borrar */ {
        color: var(--colorText--linkStrong);
    }



/* Tabla general
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */

    /* Elementos de tabla
    -------------------------------------------------- */  
    .common--table thead {
        height: 60px;
        padding: 0 var(--padding--insideElements);
        border-bottom: solid 5px var(--colorInterface--gray);
        position: sticky; 
        top: 0px;
        z-index: 1;
        background-color: #fff;

        cursor: default;
    }

        .common--table thead th:nth-child(1) {
            border-radius: var(--borderRadius--elements) 0 0 0;
        }
        .common--table thead th:nth-last-child(1) {
            border-radius: 0 var(--borderRadius--elements) 0 0;
        }
        .common--table thead th {
            font-size: var(--textSize--normal);
            line-height: var(--textSize--normal);
            font-weight: bold;
            text-align: center;
        }

    .common--table td {     
        width: auto; height: 50px;
        padding: 0 2px;
        border-bottom: solid 1px var(--colorInterface--gray);

        word-wrap: break-word; word-break: break-all;
        font-size: var(--textSize--small);
    }
        
    /* Elementos de tabla - Sin registros
    -------------------------------------------------- */
    .common--table td.table--zeroRows {
        height: 150px; 
        background-color: #fff; 
        
        text-align: center;
    }

    /* Elementos de tabla - Hover de registro
    -------------------------------------------------- */
    .common--table tbody tr:hover {
        background-color: var(--colorElements--tenderLight);

        cursor: pointer;
    }

    /* Elementos de tabla - Fila escondida
    -------------------------------------------------- */
    .common--table tbody tr[nodisplayed] {
        display: none;
    }

    /* Elementos de tabla- Fila activa
    -------------------------------------------------- */
    .common--table tbody tr[active] { 
        background-color: var(--colorElements--tender); 
    }
    .common--table tbody tr[active] td { 
        background-color: var(--colorElements--tender);
    }
    .common--table tbody tr[active]:hover {
        background-color: var(--colorElements--tender);
    }

    /* Elementos de tabla - GROUP BY
    -------------------------------------------------- */
    .common--table .table--groupBy {
        width: 100%; height: 30px;
        padding: 0 var(--padding--insideElements); 
        border-left: solid 0px var(--colorElements--action);
        border-radius: 5px;
        background-color: var(--colorElements--action); 

        font-size: var(--textSize--small);
        font-weight: bold; 
    }
    .common--table .table--groupBy:hover {
        background-color: var(--colorElements--actionStrong);
    }
    .common--table .table--groupBy > div {
        display: flex; flex-direction: row;
    }

        .common--table .table--groupBy > div div:first-child {
            width: 550px;
        }
        .common--table .table--groupBy > div div:first-child i {
            margin: auto 20px auto 0;
            display: inline;
            color: #fff;
        }
        .common--table .table--groupBy > div div:first-child input {
            width: 500px;
            border: none;
            background-color: transparent;
            display: inline;

            color: #fff;
            font-weight: bold;

            cursor: pointer;
        }

        .common--table .table--groupBy > div div:last-child {
            padding-left: var(--padding--insideElements);
            margin-left: var(--padding--insideInterfaces);
        }
        .common--table .table--groupBy > div div:last-child p,
        .common--table .table--groupBy > div div:last-child span {
            display: inline;

            font-size: var(--textSize--small);
            color: #fff;
        }
        .common--table .table--groupBy > div div:last-child i {
            margin-left: 25px;
        }

    /* Elementos de tabla - SUBGROUP BY
    -------------------------------------------------- */
    .common--table .table--subgroupBy {
        width: 100%; height: 30px;
        padding: 0 var(--padding--insideElements); 
        border-left: solid 20px #fff; border-radius: 5px;
        background-color: var(--colorElements--action); 

        font-size: var(--textSize--small);
        font-weight: bold; 
    }
    .common--table .table--subgroupBy:hover {
        background-color: var(--colorElements--actionStrong);
    }
    .common--table .table--subgroupBy[nodisplayed] {
        display: none;
    } /* Curioso */

    .common--table .table--subgroupBy > div {
        display: flex; flex-direction: row;
    }

        .common--table .table--subgroupBy > div div:first-child {
            width: 250px;
        }
        .common--table .table--subgroupBy > div div:first-child i {
            margin: auto 20px auto 0;
            display: inline;
            color: #fff;
        }
        .common--table .table--subgroupBy > div div:first-child input {
            width: 200px;
            border: none;
            background-color: transparent;
            display: inline;

            color: #fff;
            font-weight: bold;

            cursor: pointer;
        }

        .common--table .table--subgroupBy > div div:last-child {
            padding-left: var(--padding--insideElements);
            margin-left: var(--padding--insideElements);
        }
        .common--table .table--subgroupBy > div div:last-child p,
        .common--table .table--subgroupBy > div div:last-child span {
            display: inline;

            font-size: var(--textSize--small);
            color: #fff;
        }
        .common--table .table--subgroupBy > div div:last-child i {
            margin-left: 25px;
            visibility: hidden;
        }

    /* Elementos de tabla - ORDER BY
    -------------------------------------------------- */
    .common--table thead th .table--orderBy {
        display: inline-flex;
    }

        .common--table thead th .table--orderBy > p {
            margin: auto 0 auto auto; 
            display: flex;
        }
        .common--table thead th .table--orderByIcons {
            margin-left: 5px; 
            display: flex; flex: 1 1 auto; flex-flow: column; 
        }
        .common--table thead th .table--orderByIcons > i {
            color: var(--colorElements--tenderSoStrong);
        }

        /* Estado: Activo */
        .common--table thead th[orderbydirection=ASC], .common--table thead th[orderbydirection=DESC] {
            background-color: var(--colorElements--tender);
        }
        .common--table thead th[orderbydirection=ASC] .table--orderByIcons .fa-caret-up,
        .common--table thead th[orderbydirection=DESC] .table--orderByIcons .fa-caret-down{
            color: var(--colorAlerts--normal);
        }
        .common--table tbody td[orderby] {
            background-color: var(--colorElements--tenderLight);
        }

        /* Estado: Hover */
        .common--table thead th[orderby]:hover {
            background-color: var(--colorElements--tenderStrong); 
            
            cursor: pointer;
        }  
    
    /* Elementos de tabla - Input
    -------------------------------------------------- */
    .common--table .table--input {
        width: 100%; height: 50px;
        padding: 0 var(--padding--insideElements);
        border: solid 1px var(--colorElements--action); border-radius: var(--borderRadius--elements);
        background-color: #fff;  

        font-size: var(--textSize--small);
    }
    .common--table select.table--input {
        cursor: pointer;
    }
    .common--table .table--input:hover, .common--table .table--input:focus {
        border-color: var(--colorElements--actionStrong);
        box-shadow: 0 0 10px 0 var(--colorElements--actionStrong);
        outline: none;
    }
    .common--table .table--input[disabled], .common--table .table--input[disabled]:hover, .common--table .table--input[disabled]:focus {
        background-color: var(--colorElements--tenderLight); 
        border-color: var(--colorElements--tenderStrong);

        cursor: not-allowed;
    }
    .common--table .table--input[readonly], .common--table .table--input[readonly]:hover, .common--table .table--input[readonly]:focus {
        border: none;
        background-color: transparent;
        box-shadow: none;   

        cursor: pointer;
    }

    /* Table elements - action button
    -------------------------------------------------- */
    .common--table .table--roundButton {
        width: 38px; height: 38px;
        border: none; border-radius: 50%;
        margin-left: 10px;
        box-shadow: -2px 2px 0px 0px var(--colorShadow--color);

        font-size: 15px;
        color: #fff;
    }
    .common--table .table--roundButton:hover {
        box-shadow: none;
    }
    .common--table .table--roundButton > i {
        color: #fff;
    }



/* Elementos de páginas
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */

    /* Construcción: Cabecera
    -------------------------------------------------- */
    .common--header {
        height: var(--height--elements);
        display: flex;
        background-color: var(--colorInterface--neutral);
        box-shadow: 0 3px 2px 0 var(--colorShadow--color);
        z-index: 1;

        cursor: default;
    }

        .common--header .header--back {
            width: 150px;
            border: none;
            display: flex; flex-direction: column;
            background-color: transparent;
        }

            .common--header .header--back > i {
                margin: auto;

                font-size: 18px;
                color: #fff;
                font-weight: bold;
                text-align: center;
            }
            .common--header .header--back > p {
                margin: auto;

                font-size: var(--textSize--details);
                color: #fff;
                font-weight: bold;
                text-align: center;
            }

        .common--header .header--back:hover {
            background-color: var(--colorInterface--action);
        }

        .common--header .header--message {
            width: 100%;
            margin: auto;
            background-color: transparent;

            font-size: var(--textSize--subtitle);
            color: #fff;
            font-weight: bold;
            text-align: center;
        }

        .common--header .header--null {
            width: 150px;
            border: none;
            margin: 0 0 0 var(--padding--insideElements);
            background-color: red;
            display: flex;

            color: #fff;

            cursor: default;
        }

            .common--header .header--null i {
                margin: auto;

                color: #fff;
            }

        .common--header .header--null {
            visibility: hidden;
        }

    /* Construcción: Pestañas
    -------------------------------------------------- */
    .common--tabs {
        height: var(--height--elements);
        padding: 0 var(--padding--insideElements);
        display: flex; flex-wrap: wrap;
        background-color: var(--colorInterface--neutral);
        box-shadow: 0 0 10px 0 var(--colorShadow--color);
    }

        .common--tabs button, .common--tabs a {
            border: none;
            flex-grow: 1;
            background-color: transparent;
            display: flex; 
            align-items: center; 
            justify-content: center;

            color: #fff;
            text-align: center;          
            font-weight: bold;
            text-decoration: none;
        }
        .common--tabs button:hover, .common--tabs a:hover,
        .common--tabs button[active], .common--tabs a[active] {
            background-color: var(--colorElements--actionStrong);
        }
        .common--tabs button[disabled], .common--tabs a[disabled] {
            background-color: var(--colorElements--actionLight);

            cursor: not-allowed;
        }

    /* Construcción: Avisos (cabecera)
    -------------------------------------------------- */
    .common--headerAlert {
        height: 40px;
        display: flex;
        background-color: var(--colorAlerts--normal);

        cursor: default;
    }

        .common--headerAlert i {
            margin: auto var(--padding--insideElements) auto auto;

            font-size: 30px;
            color: #fff;           
        }
        .common--headerAlert p {
            margin: auto auto auto 0;

            color: #fff;
            font-weight: bold;
        }

    .common--headerAlert[type="careful"] { 
        background-color: var(--colorAlerts--careful);
    }
    .common--headerAlert[type="successful"] { 
        background-color: var(--colorAlerts--successful);
    }
    .common--headerAlert[nodisplayed] {
        display: none;
    }

    /* Construcción: Configuración general
    -------------------------------------------------- */
    .common--generalConfiguration {
        padding: var(--padding--insideSubtitle) var(--padding--insideElements);
        display: flex; flex-wrap: wrap;
    }

        .common--generalConfiguration .generalConfiguration--generalOption {
            height: 65px;
            padding: var(--padding--insideSubtitle) var(--padding--insideElements);
            border: solid 1px var(--colorElements--action); border-top: solid 5px var(--colorElements--action); border-radius: var(--borderRadius--elements);
            margin: 0 5px;
            display: flex; flex-direction: column; 
            flex-grow: 1;
            background-color: #fff;
            
            cursor: pointer;
        }
       
            .common--generalConfiguration .generalConfiguration--generalOption label {
                height: 10px;
                margin: 0 0 var(--padding--insideElements);

                color: var(--colorElements--action);
                font-weight: bold;
            }
            .common--generalConfiguration .generalConfiguration--generalOption input {
                height: 25px;
                padding: 0;
                border: none; border-radius: 0;
                margin: 0 0 auto;
                background-color: transparent;

                font-weight: bold;

                cursor: pointer;
            }

        .common--generalConfiguration .generalConfiguration--generalOption:hover {
            background-color: var(--colorElements--actionStrong);
            border-color: var(--colorElements--actionStrong); 
        }
        .common--generalConfiguration .generalConfiguration--generalOption:hover > label,
        .common--generalConfiguration .generalConfiguration--generalOption:hover > input,
        .common--generalConfiguration .generalConfiguration--generalOption:hover > p,
        .common--generalConfiguration .generalConfiguration--generalOption:hover > p span {
            color: #fff;

            cursor: pointer;
        }
        .common--generalConfiguration .generalConfiguration--generalOption:hover > p b {
            color: #fff;

            cursor: pointer;
        }

        .common--generalConfiguration .generalConfiguration--generalOption[disabled] {
            border-color: var(--colorElements--tenderStrong);

            cursor: not-allowed;
        }
        .common--generalConfiguration .generalConfiguration--generalOption[disabled] label,
        .common--generalConfiguration .generalConfiguration--generalOption[disabled] input,
        .common--generalConfiguration .generalConfiguration--generalOption[disabled] b,
        .common--generalConfiguration .generalConfiguration--generalOption[disabled] span {
            color: var(--colorText--normal) !important;
            
            cursor: not-allowed !important;
        }
        .common--generalConfiguration .generalConfiguration--generalOption[disabled]:hover {
            background-color: #fff;
        }

        .common--generalConfiguration .generalConfiguration--generalOption.empty {
            visibility: hidden;
        }

    /* Construcción: Configuración de proceso
    -------------------------------------------------- */
    .common--processConfiguration {
        padding: var(--padding--insideSubtitle) var(--padding--insideElements);
        display: flex; flex-wrap: wrap;
        background-color: var(--colorInterface--neutral);
    }

        .common--processConfiguration .processConfiguration--generalOption {
            height: 85px;
            padding: var(--padding--insideSubtitle) var(--padding--insideElements);
            display: flex; flex-direction: column;
            flex-grow: 1;
            
            cursor: default;     
        }
     
            .common--processConfiguration .processConfiguration--generalOption > label {
                height: 25px;
                margin: 0 auto var(--padding--insideElements);

                font-size: var(--textSize--subtitle);
                color: #fff;
                text-align: center;                
                font-weight: bold;
            }
            .common--processConfiguration .processConfiguration--generalOption > input,
            .common--processConfiguration .processConfiguration--generalOption > select {
                margin: 0;
            }

    /* Construcción: Sección
    -------------------------------------------------- */
    .common--section {
        margin: var(--padding--insideElements) var(--padding--insideElements);
        position: relative;
    }

        /* Cabecera
        -------------------------------------------------- */
        .common--section .section--header {
            height: 50px;
            padding: 0 var(--padding--insideElements);
            border-radius: var(--borderRadius--elements) var(--borderRadius--elements) 0 0;
            display: flex;
            background-color: var(--colorInterface--contrast);
            box-shadow: 0 0 10px 0 var(--colorShadow--color);
        }

            .common--section .section--header button {
                width: 30px; height: 30px;
                margin: auto auto auto var(--padding--insideElements);
                padding: 2px 0 0 8px;
                border: none; border-radius: 50%;
                z-index: var(--zIndex--elementOnFocus);
                background-color: var(--colorElements--tender);

                cursor: pointer;
            }
            .common--section .section--header button:hover {
                background-color: var(--colorElements--tenderSoStrong);
            }
            .common--section .section--header button[loading] {
                background: linear-gradient(86deg, var(--colorElements--tenderSoStrong), #ffffff); background-size: 400% 400%; 

                animation: buttonTenderLoading 3s ease infinite;
                cursor: not-allowed;
            }
            .common--section .section--header h3 {
                width: 100%; height: 50px;
                display: flex; justify-content: center; align-items: center;
                position: absolute; left: 0; top: 0;

                font-size: var(--textSize--title);
                color: #fff;
                font-weight: bold;
                text-align: center;

                cursor: default;
            }

        /* Contenido
        -------------------------------------------------- */
        .common--section .section--content {
            border: solid 1px var(--colorInterface--gray); border-radius: 0 0 var(--borderRadius--elements) var(--borderRadius--elements);
        }

        /* Sección (minimizado)
        -------------------------------------------------- */
        .common--section[minimized] .section--header {
            border-radius: var(--borderRadius--elements);
        }
        .common--section[minimized] .section--content {
            display: none;
        }

    /* Construcción: Filtros & busqueda
    -------------------------------------------------- */
    .common--searchFilters {
        display: flex; flex-wrap: wrap;
    }
    .common--searchFilters > div:first-child {
        margin-left: var(--padding--insideElements);
    }
    .common--searchFilters > div:nth-last-child(2) {
        margin-right: var(--padding--insideElements);
    }

        /* Atrás
        -------------------------------------------------- */
        .common--searchFilters .searchFilters--back {
            width: 50px; height: 40px;
            border: solid 1px var(--colorElements--action); border-radius: var(--borderRadius--elements);
            margin: 0 var(--padding--insideSubtitle) 0 0;
            display: flex; flex-wrap: wrap; flex-direction: column; grid-column: 2/3;

            cursor: pointer;
        }

            .common--searchFilters .searchFilters--back i {
                margin: auto auto 0;

                font-size: 16px;
                color: var(--colorText--action);
                font-weight: bold;
                text-align: center;
            }
            .common--searchFilters  .searchFilters--back p {
                margin: 0 auto auto;

                font-size: var(--textSize--details);
                line-height: var(--textSize--details);
                color: var(--colorText--action);
                font-weight: bold;
                text-align: center;
            }

        /* Sucursal
        -------------------------------------------------- */
        .common--searchFilters .searchFilters--branch {
            width: 200px; height: 40px;
            padding: 0 var(--padding--insideElements);
            border: solid 1px var(--colorElements--action); border-radius: var(--borderRadius--elements); 
            margin: 0 var(--padding--insideSubtitle) 0 0;
            display: flex;

            cursor: pointer;
        }

            .common--searchFilters .searchFilters--branch > i {
                margin: auto;
                
                font-size: 16px;
                color: var(--colorText--action);
                font-weight: bold;
                text-align: center;
            }
            .common--searchFilters .searchFilters--branch > input {
                height: 30px;
                padding: 0 10px;
                margin: auto 0;

                color: var(--colorText--action);
                font-weight: bold;

                cursor: pointer;
            }

        .common--searchFilters .searchFilters--branch:hover {
            background-color: var(--colorElements--actionStrong);
        }

            .common--searchFilters .searchFilters--branch:hover > i,
            .common--searchFilters .searchFilters--branch:hover > input {
                color: #fff;
            }

        /* Recarga
        -------------------------------------------------- */
        .common--searchFilters .searchFilters--reload {
            width: 45px; height: 40px;
            border: solid 1px var(--colorElements--action); border-radius: var(--borderRadius--elements);
            margin: 0 var(--padding--insideSubtitle) 0 0;
            display: flex;
        }

            .common--searchFilters .searchFilters--reload > i {
                margin: auto;

                color: var(--colorText--action);
            }

        .common--searchFilters .searchFilters--reload:hover {
            background-color: var(--colorElements--actionStrong);

            cursor: pointer;
        }

            .common--searchFilters .searchFilters--reload:hover > i {
                color: #fff;
            }

        /* Filtros de búsqueda
        -------------------------------------------------- */
        .common--searchFilters .searchFilters--filters {}

            /* Botón
            -------------------------------------------------- */
            .common--searchFilters .searchFilters--filters .filters--open {
                width: 200px; height: 40px;
                border: solid 1px var(--colorElements--action); border-radius: var(--borderRadius--elements);
                display: flex;

                cursor: pointer;
            }
            
                .common--searchFilters .filters--open > i {
                    margin:auto 0 auto auto;

                    font-size: 20px;
                    color: var(--colorText--action);
                    font-weight: bold;
                }
                .common--searchFilters .filters--open > p {
                    margin:auto auto auto 5px;

                    font-size: var(--textSize--details);
                    color: var(--colorText--action);
                    font-weight: bold;
                    text-align: left;
                }

            .common--searchFilters .filters--open:hover, 
            .common--searchFilters .filters--open[active],
            .common--searchFilters .filters--open:hover > i, 
            .common--searchFilters .filters--open[active] > i,
            .common--searchFilters .filters--open:hover > p, 
            .common--searchFilters .filters--open[active] > p {
                background-color: var(--colorElements--actionStrong);
                
                color: #fff;
            }

            /* Menú
            -------------------------------------------------- */
            .common--searchFilters .filters--menu {
                width: 350px; min-height: 100px;
                border: solid 2px var(--colorInterface--action); border-radius: var(--borderRadius--elements);
                margin: 6px 0 0;
                background-color: #fff;
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                position: absolute;
                z-index: var(--zIndex--elementOnFocus);
            }
            .common--searchFilters .filters--menu[nodisplayed] {
                display: none;
            }

                .common--searchFilters .filters--menu .common--submenu {
                    min-height: 100px;
                    padding: 10px;
                    border-radius: var(--borderRadius--interface);
                    display: flex; flex-wrap: wrap; flex-direction: row;
                    position: relative;
                    z-index: var(--zIndex--elementOnFocus);
                    background-color: #fff;
                    box-shadow: 0 0 5px 0 var(--shadow_normal);
                }

                    /* Subtítulo
                    -------------------------------------------------- */   
                    .common--searchFilters .filters--menu .common--submenu .submenu--subtitle {
                        width: 100%;
                        padding: 7px 0;

                        font-family: var(--text_font_main);
                        font-size: var(--text_size_subtitle);
                        line-height: 18px;
                        color: var(--color_contrastPurple);
                        font-weight: bold;
                        text-align: center;
                    }

                    /* Contenedor de opciones
                    -------------------------------------------------- */   
                    .common--searchFilters .filters--menu .common--submenu .submenu--container{
                        display: flex; flex-wrap: wrap; flex-direction: row;
                    }

                        .common--searchFilters .filters--menu .common--submenu .submenu--container .submenu---item {
                            width: 100%;
                            display: flex; flex-wrap: wrap; flex-direction: row;
                        }
                        .common--searchFilters .filters--menu .common--submenu .submenu--container .submenu---item:nth-child(odd){
                            background-color: var(--colorElements--tenderLight);
                        }
                        .common--searchFilters .filters--menu .common--submenu .submenu--container .submenu---item:hover{
                            background-color: var(--colorElements--shower);
                        }
                        .common--searchFilters .filters--menu .common--submenu .submenu--container .submenu---item:hover > .submenu--checkboxLabel{
                            color: var(--colorText--action);
                        }

                            .common--searchFilters .filters--menu .common--submenu .submenu--container .submenu--checkbox {
                                width: 30px;
                                margin: 5px auto;
                            }
                            .common--searchFilters .filters--menu .common--submenu .submenu--container .submenu--checkbox span {
                                margin: 5px 0 0 !important;
                            }
                            .common--searchFilters .filters--menu .common--submenu .submenu--container .submenu--checkboxLabel {
                                width: 240px;
                                padding: 6px 0;
                                margin: auto;

                                font-family: var(--textFont--main);
                                font-size: var(--textSize--normal);
                                line-height: 18px;
                                color: var(--colorText--normal);
                                text-align: left;

                                cursor: pointer;
                            }



    /* Contenedor de opciones
    -------------------------------------------------- */   
    .common--submenu .submenu--footer{
        width: 100%;
        padding: 15px 0;
        border-top: solid 2px var(--colorInterface--contrast);
        margin: 10px 0 0;
        display: flex;
    }

        .common--submenu .submenu--footer .printOption--close{
            width: 40px; height: 35px;
            margin: 0 10px 0 0;
        }
        .common--submenu .submenu--footer .printOption--filter{
            height: 35px;
            margin: 0 0 0 auto;
        }



                .common--searchFilters .submenu--footer > button {
                    height: 35px;
                }

        /* Imprimir
        -------------------------------------------------- */
        .common--searchFilters .searchFilters--print {
            width: 45px; height: 40px;
            border: solid 1px var(--colorElements--action); border-radius: var(--borderRadius--elements);
            margin: 0 0 0 var(--padding--insideSubtitle);
            display: flex;
        }

            .common--searchFilters .searchFilters--print > i {
                margin: auto;
                color: var(--colorText--action);
            }

            .common--searchFilters .searchFilters--print:hover {
                background-color: var(--colorElements--actionStrong);
                cursor: pointer;
            }

                .common--searchFilters .searchFilters--print:hover > i {
                    color: #fff;
                }

        /* Búsqueda
        -------------------------------------------------- */
        .common--searchFilters .searchFilters--search {
            width: 400px; height: 40px;
            margin: 0 0 0 auto;
            display: flex;
            z-index: 1;
        }
        .common--searchFilters .searchFilters--search:hover {
            border-radius: var(--borderRadius--elements);
            box-shadow: 0 0 10px 0 var(--colorElements--actionStrong);
        }

            .common--searchFilters .searchFilters--search > select {
                width: 120px; height: 40px;
                border-right: none; border-radius: var(--borderRadius--elements) 0 0 var(--borderRadius--elements);
                margin: 0;

                text-align: right;
            }
            .common--searchFilters .searchFilters--search > input {
                height: 40px;
                border-left: none; border-radius: 0; 
                margin: 0;
                
                text-align: left;
            }
            .common--searchFilters .searchFilters--search > button {
                width: 60px; height: 40px;
                border-radius: 0px var(--borderRadius--elements) var(--borderRadius--elements) 0px;
                margin: 0; 
                box-shadow: none;
            }
            .common--searchFilters .searchFilters--search > button i {
                color: #fff;
            }

            .common--searchFilters .searchFilters--search > select:hover,
            .common--searchFilters .searchFilters--search > select:focus {
                border-bottom-width: 1px;
                box-shadow: none;
            }
            .common--searchFilters .searchFilters--search > input:hover,
            .common--searchFilters .searchFilters--search > input:focus {
                border-bottom-width: 1px;
                box-shadow: none;
            }

        /* Muestra de filtros
        -------------------------------------------------- */
        .common--searchFilters .searchFilters--filtersShow {
            width: 100%; height: 40px;
            padding: 0 var(--padding--insideElements);
            margin-top: var(--padding--insideSubtitle);
            display: flex; flex-direction: row;
            overflow-x: auto; overflow-y: hidden;
            background-color: var(--colorElements--tenderLight);
        }

            .common--searchFilters .filtersShow--quantity {
                width: 200px;
                margin: auto var(--padding--insideInterfaces) auto 0;
                border-right: solid 1px var(--colorInterface--gray);

                font-size: var(--textSize--details);
            }
            .common--searchFilters .filtersShow--quantity > span {
                font-weight: bold;
            }

            .common--searchFilters .filtersShow--cards {
                min-width: 80px; height: 35px;
                padding: 0 var(--padding--insideElements);
                border-radius: var(--borderRadius--tinyElements);
                margin: auto var(--padding--insideElements) auto 0;
                display: flex;
                background-color: var(--colorElements--action);

                white-space: nowrap;

                cursor: pointer;
            }         

                .common--searchFilters .filtersShow--cards > i {
                    margin: auto var(--padding--insideSubtitle);
                    display: none;

                    color: var(--colorElements--negative);
                
                    cursor: pointer;
                }
                .common--searchFilters .filtersShow--cards > p {                   
                    margin: 2px auto auto;
                    display: inline-block;

                    font-size: var(--textSize--smaller);
                    line-height: var(--textSize--smaller);
                    color: #fff;
                    font-weight: bold;
                }

            .common--searchFilters .filtersShow--cards:hover { 
                background-color: var(--colorElements--actionStrong); 
            }

                .common--searchFilters .filtersShow--cards > i:hover {
                    color: var(--colorElements--negativeLight);
                }
                .common--searchFilters .filtersShow--cards:hover > i {
                    display: inline;
                }

    /* Construcción: Registros
    -------------------------------------------------- */
    .common--records {
        width: calc(var(--width--mainPage) - var(--padding--insideElements) - var(--padding--insideElements));
        border: solid 2px var(--colorInterface--gray); border-radius: var(--borderRadius--elements);
        margin: 38px auto var(--padding--insideElements);
        display: flex; flex-flow: column;
    }

        /* Cabecera
        -------------------------------------------------- */
        .common--records .records--header {
            height: 60px;
            padding: 0 var(--padding--insideInterfaces);
            border-radius: var(--borderRadius--elements);
            margin: -30px 15px 0 15px;
            display: flex;
            z-index: 2;
            background-color: var(--colorInterface--contrast);
            box-shadow: -5px 5px 0px 0px var(--colorShadow--color);
        }

            .common--records .records--header > i {
                margin: auto 0;

                font-size: 25px;
                color: #fff;
                font-weight: bold;
            }
            .common--records .records--header > p {
                margin: auto auto auto var(--padding--insideElements);

                color: #fff;
                font-weight: bold;
                text-align: left;
            }
            .common--records .records--header > a {
                width: 180px;
                padding: 7px 20px;
                margin: auto 0 auto var(--padding--insideElements);
                display: flex;
                justify-content: center;
                align-content: center;
                flex-direction: column;
                
                color: #fff;

                cursor: pointer;
            }
            .common--records .records--header > a:hover {
                color: #fff;
                text-decoration: none;
            }

        /* Registros
        -------------------------------------------------- */
        .common--records .records--content {
            min-height: 200px;
            padding: 0 10px 10px;
        }

        .common--records .records--loadingMore {
            height: 20px;
            margin: 0;

            font-weight: bold;
            text-align: center;
        }
        .common--records .records--loadingMore[nodisplayed] {
            display: none;
        }

    /* Construcción: Productos
    -------------------------------------------------- */
    .common--products {
        border: solid 2px var(--colorInterface--gray); border-bottom: none; border-radius: var(--borderRadius--elements) var(--borderRadius--elements) 0 0;
        margin: 35px var(--padding--insideElements) 0; 
        display: grid; grid-template-rows: auto 1fr;
    }

        /* Cabecera
        -------------------------------------------------- */
        .common--products .products--header {
            padding: var(--padding--insideSubtitle) var(--padding--insideInterfaces);
            border-radius: var(--borderRadius--elements);
            margin: -30px var(--padding--insideElements) 0 var(--padding--insideElements);
            display: flex;
            background-color: var(--colorInterface--contrast);
            box-shadow: -5px 5px 0px 0px var(--shadow_normal);

            cursor: default;
        }

             .common--products .products--header i {
                margin: auto 0;

                font-size: 30px;
                color: #fff;
                font-weight: bold;
            }
             .common--products .products--header p {
                margin: auto var(--padding--insideElements);
                white-space: nowrap;

                color: #fff;
                font-weight: bold;
            }
             .common--products .products--header input {
                margin: auto var(--padding--insideElements) auto 0;
                display: inline;
            }
             .common--products .products--header button {
                width: 250px;
                padding: var(--padding--insideSubtitle) var(--padding--insideElements);
                margin: auto 0;
                display: inline;
            }

        /* Tabla
        -------------------------------------------------- */
        .common--products .products--products {
            min-height: 150px;
            margin: 0 var(--padding--insideElements);
        }

    /* Construcción: Infomación de costos/precios (mini)
    -------------------------------------------------- */
    .common--costInformation {
        width: calc(var(--width--mainPage) - var(--padding--insideElements) - var(--padding--insideElements)); height: 60px;
        padding: 0 var(--padding--insideElements);
        border-radius: 0 0 var(--borderRadius--elements) var(--borderRadius--elements);
        margin: 0 auto 0 var(--padding--insideElements);
        display: flex; flex-direction: row;
        background-color: var(--colorInterface--neutral);

        cursor: default;
    }

        .common--costInformation .costInformation--units {
            width: 140px;
            margin-right: var(--padding--insideElements);
            display: flex;
        }

            .common--costInformation .costInformation--units p, .costInformation--units span {
                color: #fff;
                font-size: var(--textSize--smaller);
            }
            .common--costInformation .costInformation--units span {
                margin-left: var(--padding--insideSubtitle);
            }

        .common--costInformation .costInformation--costDetail {
            width: 250px;
            margin: auto var(--padding--insideElements) auto 0;
        }
        .common--costInformation .costInformation--costDetail:nth-child(4) {
            width: 320px;
        }

            .common--costInformation .costInformation--costDetail label, .costInformation--costDetail p {
                width: 100%;

                color: #fff;
                text-align: center;
                font-weight: bold;
            }
            .common--costInformation .costInformation--costDetail label {
                margin: auto 0 var(--padding--insideSubtitle) 0;
            }
            .common--costInformation .costInformation--costDetail p {
                margin: 0 0 auto 0;
            }

        .common--costInformation .costInformation--doProcess {
            width: 300px;
            margin: auto 0 auto auto;
        }
        
    /* Flotante: Opciones adicionales
    -------------------------------------------------- */
    .page--additionalOptions {
        width: 80px;
        margin: 170px 0 0 1030px;
        position: fixed; top: 0; right: initial;
        z-index: var(--zIndex--elementOnFocus);
        background-color: transparent;
    }
    .page--additionalOptions[side="left"] {
        margin: 170px 0 0 20px;
    }
    .page--additionalOptions[nodisplayed] {
        display: none;
    }
    .page--additionalOptions .additionalOptions--menu {
        border-radius: var(--borderRadius--interface);
        display: flex; flex-wrap: wrap; flex-direction: row;
        background-color: var(--colorInterface--neutral);
        box-shadow: 0 0 5px 0 var(--colorShadow--color);
    }

        /* Estado maximizado
        -------------------------------------------------- */
        .page--additionalOptions .additionalOptions--menu .additionalOptions--control {
            width: 100%; height: 30px;
            border-radius: var(--borderRadius--interface) var(--borderRadius--interface) 0 0;
            background-color: var(--colorInterface--neutral);
            box-shadow: none;
        }
        .page--additionalOptions .additionalOptions--menu .additionalOptions--control i {
            color: #fff;
        }
        .page--additionalOptions .additionalOptions--menu .additionalOptions--control:hover {
            background-color: #fff;     
        }
        .page--additionalOptions .additionalOptions--menu .additionalOptions--control:hover i {
            color: var(--colorElements--action);
        }

        .page--additionalOptions .additionalOptions--menu .menu--option {
            height: 80px;
            background-color: transparent;
            box-shadow: none;
        }
          
            .page--additionalOptions .additionalOptions--menu .menu--option i {
                margin: auto auto 5px;

                font-size: 20px;
                color: #fff;
            }
            .page--additionalOptions .additionalOptions--menu .menu--option p {
                margin: 0 auto auto;

                white-space: nowrap;
                font-size: var(--textSize--smaller);
                color: #fff;
                font-weight: bold;
                text-align: center;
            }

        .page--additionalOptions .additionalOptions--menu .menu--option:hover,
        .page--additionalOptions .additionalOptions--menu .menu--option:hover > i,
        .page--additionalOptions .additionalOptions--menu .menu--option:hover > p {
            background-color: var(--colorElements--actionStrong);
            color: #fff;
        }

        .page--additionalOptions .additionalOptions--menu .menu--option[disabled] i,
        .page--additionalOptions .additionalOptions--menu .menu--option[disabled] p {
            color: var(--colorElements--tenderSoStrong);
        }

        .page--additionalOptions .additionalOptions--menu .menu--option[disabled]:hover {
            background-color: var(--colorElements--tenderSoStrong);
        }
        .page--additionalOptions .additionalOptions--menu .menu--option[disabled]:hover i,
        .page--additionalOptions .additionalOptions--menu .menu--option[disabled]:hover p {
            background-color: var(--colorElements--tenderSoStrong);

            color: #fff;
        }

        /* Interfaz minimizada
        -------------------------------------------------- */
        .page--additionalOptions[minimized] > .additionalOptions--menu .additionalOptions--control {
            background-color: var(--colorElements--action);
            border-radius: var(--borderRadius--interface);

            color: #fff;
        }
        .page--additionalOptions[minimized] > .additionalOptions--menu .additionalOptions--control:hover {
            background-color: var(--colorElements--actionStrong);
        }
        .page--additionalOptions[minimized] > .additionalOptions--menu .additionalOptions--control:hover i {
            color: #fff;
        }

        .page--additionalOptions[minimized] > .additionalOptions--menu .menu--option {
            display: none !important;
        }

    .common--additionalOptions {
        width: 80px;
        margin: 170px 0 0 1030px;
        position: fixed; top: 0; right: initial;
        z-index: var(--zIndex--elementOnFocus);
        background-color: transparent;
    }
    .common--additionalOptions[side="left"] {
        margin: 170px 0 0 20px;
    }
    .common--additionalOptions[nodisplayed] {
        display: none;
    }
    .common--additionalOptions .additionalOptions--menu {
        border-radius: var(--borderRadius--interface);
        display: flex; flex-wrap: wrap; flex-direction: row;
        background-color: var(--colorInterface--neutral);
        box-shadow: 0 0 5px 0 var(--colorShadow--color);
    }

        /* Estado maximizado
        -------------------------------------------------- */
        .common--additionalOptions .additionalOptions--menu .additionalOptions--control {
            width: 100%; height: 30px;
            border-radius: var(--borderRadius--interface) var(--borderRadius--interface) 0 0;
            background-color: var(--colorInterface--neutral);
            box-shadow: none;
        }
        .common--additionalOptions .additionalOptions--menu .additionalOptions--control i {
            color: #fff;
        }
        .common--additionalOptions .additionalOptions--menu .additionalOptions--control:hover {
            background-color: #fff;     
        }
        .common--additionalOptions .additionalOptions--menu .additionalOptions--control:hover i {
            color: var(--colorElements--action);
        }

        .common--additionalOptions .additionalOptions--menu .menu--option {
            height: 80px;
            background-color: transparent;
            box-shadow: none;
        }
          
            .common--additionalOptions .additionalOptions--menu .menu--option i {
                margin: auto auto 5px;

                font-size: 20px;
                color: #fff;
            }
            .common--additionalOptions .additionalOptions--menu .menu--option p {
                margin: 0 auto auto;

                white-space: nowrap;
                font-size: var(--textSize--smaller);
                color: #fff;
                font-weight: bold;
                text-align: center;
            }

        .common--additionalOptions .additionalOptions--menu .menu--option:hover,
        .common--additionalOptions .additionalOptions--menu .menu--option:hover > i,
        .common--additionalOptions .additionalOptions--menu .menu--option:hover > p {
            background-color: var(--colorElements--actionStrong);
            color: #fff;
        }

        .common--additionalOptions .additionalOptions--menu .menu--option[disabled] i,
        .common--additionalOptions .additionalOptions--menu .menu--option[disabled] p {
            color: var(--colorElements--tenderSoStrong);
        }

        .common--additionalOptions .additionalOptions--menu .menu--option[disabled]:hover {
            background-color: var(--colorElements--tenderSoStrong);
        }
        .common--additionalOptions .additionalOptions--menu .menu--option[disabled]:hover i,
        .common--additionalOptions .additionalOptions--menu .menu--option[disabled]:hover p {
            background-color: var(--colorElements--tenderSoStrong);

            color: #fff;
        }

        /* Interfaz minimizada
        -------------------------------------------------- */
        .common--additionalOptions[minimized] > .additionalOptions--menu .additionalOptions--control {
            background-color: var(--colorElements--action);
            border-radius: var(--borderRadius--interface);

            color: #fff;
        }
        .common--additionalOptions[minimized] > .additionalOptions--menu .additionalOptions--control:hover {
            background-color: var(--colorElements--actionStrong);
        }
        .common--additionalOptions[minimized] > .additionalOptions--menu .additionalOptions--control:hover i {
            color: #fff;
        }

        .common--additionalOptions[minimized] > .additionalOptions--menu .menu--option {
            display: none !important;
        }



/* Elementos de documentación
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */

    /* Documentación - Título
    -------------------------------------------------- */
    .documentation--title {
        margin: var(--padding--insideElements) 0 30px;

        font-size: var(--textSize--title);
        color: var(--colorText--action);
        text-align: center;
        font-weight: bold;

        cursor: default;
    }

    /* Documentación - Subtítulo
    -------------------------------------------------- */
    .documentation--subtitle {
        border-top: solid 1px var(--colorInterface--gray);
        margin: var(--padding--insideElements) 0;

        font-size: var(--textSize--subtitle);
        color: var(--colorText--action);
        text-align: center;
        font-weight: bold;

        cursor: default;
    }

    /* Documentación - Parráfos
    -------------------------------------------------- */
    .documentation--text {
        margin: 0;

        font-size: var(--textSize--details);

        cursor: default;
    }

    /* Documentación - Imágenes
    -------------------------------------------------- */
    .documentation--images {
        padding: var(--padding--insideSubtitle);
        border: solid 1px var(--colorInterface--gray); border-radius: var(--borderRadius--elements);
        margin-top: 5px;
        background-color: var(--colorInterface--gray);
    }






/* Dialogo: Selección general
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.common--selectionDialog {
    min-height: 100vh;
    display: flex; flex-wrap: wrap;
    background-color: var(--colorInterface--background);
}
.common--selectionDialog[nodisplayed] { 
    display: none; 
}
.common--selectionDialog .selectionDialog--body {
    padding: var(--padding--insideElements);
    border-radius: var(--borderRadius--interface);
    margin: auto var(--padding--insideInterfaces);
    display: flex; flex-direction: column;
    background-color: #fff;
    box-shadow: -1px 1px 4px 1px var(--colorShadow--color);
}

    /* Cabecera
    -------------------------------------------------- */
    .common--selectionDialog .selectionDialog--body .body--header {
        margin-bottom: var(--padding--insideInterfaces);
        position: relative;
    }

        .common--selectionDialog .selectionDialog--body .body--header .header--newElement {
            position: absolute;
            top: 0; right: 0;
        }
        .common--selectionDialog .selectionDialog--body .body--header .header--newElement div {
            width: 60px; height: 60px;
            display: flex; flex-direction: column;
        }

            .common--selectionDialog .selectionDialog--body .body--header .header--newElement div i {
                margin: auto auto 5px;

                font-size: 20px;
                color: #fff;
            }
            .common--selectionDialog .selectionDialog--body .body--header .header--newElement div p {
                margin: 0 auto auto;

                font-size: var(--textSize--smaller);
                color: #fff;
                font-weight: bold;
                text-align: center;
                white-space: nowrap;
            }

    /* Contenido
    -------------------------------------------------- */
    .common--selectionDialog .selectionDialog--body .body--content { }

        .common--selectionDialog .selectionDialog--body .body--content .common--text:nth-child(2) {
            margin: 0 0 var(--padding--insideElements);
        }

        .common--selectionDialog .selectionDialog--body .body--content .content--rows {
            border: solid 2px var(--colorInterface--gray); border-radius: var(--borderRadius--interface);
            margin-top: 40px;
            display: flex; flex: 1 1 auto; flex-flow: column;
        }

             /* Cabecera
            -------------------------------------------------- */
            .common--selectionDialog .selectionDialog--body .body--content .content--rows .rows--header {
                width: 93%; height: 50px;
                padding: 0 var(--padding--insideElements);
                border-radius: var(--borderRadius--elements);
                margin: -30px auto 0;
                display: flex;
                z-index: 2;
                background-color: var(--colorInterface--contrast);
                box-shadow: -5px 5px 0px 0px var(--colorShadow--color);
            }

                /* Recarga
                -------------------------------------------------- */
                .common--selectionDialog .selectionDialog--body .body--content .content--rows .rows--header .header--reload {
                    height: var(--height--tinyButtons); width: var(--height--tinyButtons);
                    border: none; border-radius: var(--borderRadius--elements);
                    margin: auto var(--padding--insideElements) auto 0;
                    display: flex;
                    background-color: var(--colorInterface--action);
                }
                .common--selectionDialog .selectionDialog--body .body--content .content--rows .rows--header .header--reload > i {
                    margin: auto;

                    color: #fff;
                }

                .common--selectionDialog .selectionDialog--body .body--content .content--rows .rows--header .header--reload:hover {
                    background-color: var(--colorElements--actionStrong);

                    cursor: pointer;
                }
                .common--selectionDialog .selectionDialog--body .body--content .content--rows .rows--header .header--reload:hover > i {
                    color: #fff;
                }

                /* Búsqueda
                -------------------------------------------------- */
                .common--selectionDialog .selectionDialog--body .body--content .content--rows .rows--header .header--search {
                    width: 100%; height: var(--height--tinyButtons);
                    margin: auto;
                    display: flex;
                }
                .common--selectionDialog .selectionDialog--body .body--content .content--rows .rows--header .header--search:hover {
                    border-radius: var(--borderRadius--elements);
                    box-shadow: 0 0 10px 0 var(--colorElements--actionStrong);
                }

                    .common--selectionDialog .selectionDialog--body .body--content .content--rows .rows--header .header--search > select {
                        width: 120px; height: var(--height--tinyButtons);
                        border-right: none; border-radius: var(--borderRadius--elements) 0 0 var(--borderRadius--elements);
                        margin: 0;

                        text-align: right;
                    }
                    .common--selectionDialog .selectionDialog--body .body--content .content--rows .rows--header .header--search > input {
                        height: var(--height--tinyButtons);
                        border-left: none; border-radius: 0;
                        margin: 0;
                    }
                    .common--selectionDialog .selectionDialog--body .body--content .content--rows .rows--header .header--search > button {
                        width: 60px; height: var(--height--tinyButtons);
                        border-radius: 0px var(--borderRadius--elements) var(--borderRadius--elements) 0px;
                        margin: 0;
                        box-shadow: none;
                    }
                    .common--selectionDialog .selectionDialog--body .body--content .content--rows .rows--header .header--search > button i {
                        color: #fff;
                    }

                    .common--selectionDialog .selectionDialog--body .body--content .content--rows .rows--header .header--search > select:hover,
                    .common--selectionDialog .selectionDialog--body .body--content .content--rows .rows--header .header--search  > select:focus {
                        border-bottom-width: 1px;
                        box-shadow: none;
                    }
                    .common--selectionDialog .selectionDialog--body .body--content .content--rows .rows--header .header--search > input:hover,
                    .common--selectionDialog .selectionDialog--body .body--content .content--rows .rows--header .header--search > input:focus {
                        border-bottom-width: 1px;
                        box-shadow: none;
                    }

             /* Registros
            -------------------------------------------------- */
            .common--selectionDialog .selectionDialog--body .body--content .content--rows .rows--content {
                height: 250px;
                padding: 0 var(--padding--insideElements) var(--padding--insideElements);
                overflow-y: auto; overflow-x: hidden;
            }

                .common--selectionDialog .selectionDialog--body .body--content .content--rows .rows--content table thead {
                    height: 50px;
                }

                .common--selectionDialog .selectionDialog--body .body--content .content--rows .rows--content table tbody tr {
                    height: 40px;
                }

                .common--selectionDialog .selectionDialog--body .body--content .content--rows .rows--content table tbody tr > td:nth-child(1) > label {
                    margin: 12px 0 0 15px;
                }

                .common--selectionDialog .selectionDialog--body .body--content .content--rows .rows--content .common--button {
                    margin: auto;
                }

            .common--selectionDialog .selectionDialog--body .body--content .content--rows .selectionDialog--loadingMore {
                margin: 0 0 var(--padding--insideElements);

                font-weight: bold;
                text-align: center;
            }
            .common--selectionDialog .selectionDialog--body .body--content .content--rows .selectionDialog--loadingMore[nodisplayed] {
                display: none;
            }

        .common--selectionDialog .selectionDialog--body .body--content .selectionDialog--quantity {
            margin: var(--padding--insideSubtitle) 0 var(--padding--insideSubtitle) var(--padding--insideSubtitle);

            font-size: var(--textSize--details);           
        }
        .common--selectionDialog .selectionDialog--body .body--content .selectionDialog--quantity span {
            font-weight: bold;     
        }

    /* Pie de página
    -------------------------------------------------- */
    .common--selectionDialog .body--footer {
        padding: var(--padding--insideElements);
        border-radius: var(--borderRadius--interface);
        margin: var(--padding--insideElements) 0 0;
        display: inline-flex; flex-wrap: wrap;
        background-color: var(--colorInterface--neutral);
    }

        .common--selectionDialog .body--footer .footer--associatedSelectionName {
            margin: auto;
        }

            .common--selectionDialog .body--footer .footer--associatedSelectionName > p {
                margin: 0;

                font-size: var(--textSize--details);
                color: #fff;
                text-align: center;
                font-weight: bold;
            }
            .common--selectionDialog .body--footer .footer--associatedSelectionName > input {
                width: 300px; height: 30px;
                margin: 0 auto auto;
                border: none;
                background-color: transparent;
                overflow: hidden;

                font-size: var(--textSize--details);
                color: #fff;
                text-align: center;
                word-break: break-all;
            }
            .common--selectionDialog .body--footer .footer--associatedSelectionName > input:hover,
            .common--selectionDialog .body--footer .footer--associatedSelectionName > input:focus {
                box-shadow: none;
            }

        .common--selectionDialog .body--footer .footer--associatedSelectionControl {
            display: flex;
        }

            .common--selectionDialog .body--footer .footer--associatedSelectionControl > button {
                width: var(--width--midButtons);
                margin: auto 0
            }



/* Dialogo: Dialogo general
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.common--formDialog  {
    width: var(--width--mainPage) !important; min-height: 100vh;
    display: flex; flex-wrap: wrap;
    background-color: var(--colorInterface--background);
}
.common--formDialog[nodisplayed] {
    display: none;
}
.common--formDialog  .formDialog--body {
    width: 400px; min-height: 200px;
    padding: var(--padding--insideElements);
    border-radius: var(--borderRadius--interface);
    margin: auto;
    display: flex; flex-direction: column;
    background-color: #fff;
    box-shadow: -1px 1px 4px 1px var(--colorShadow--color);
}

    /* Cabecera
    -------------------------------------------------- */
    .common--formDialog  .formDialog--body .body--header {
        margin-bottom: var(--padding--insideInterfaces);
    }

    /* Contenido
    -------------------------------------------------- */
    .common--formDialog  .body--content {
        margin: 0 0 var(--padding--insideElements);
    }
        
        .common--formDialog  .body--content .content--form {
            padding: 0 var(--padding--insideElements);
        }

    /* Pie de página
    -------------------------------------------------- */
    .common--formDialog  .body--footer {
        margin: auto 0 0;
    }



/* Flotante: Mini dialogo
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.common--smallDialog {
    width: 600px;
    position: absolute; right: var(--padding--insideElements); bottom: var(--padding--insideElements);
    background-color: #fff;
}
.common--smallDialog[nodisplayed] {
    display: none;
}
.common--smallDialog .smallDialog--body {
    padding: var(--padding--insideElements);
    border: solid 2px var(--colorInterface--gray); border-radius: var(--borderRadius--elements);
    display: flex; flex-wrap: wrap;
    background-color: #fff;
    box-shadow: -1px 1px 4px 1px var(--colorShadow--color);
}

    /* Cabecera
    -------------------------------------------------- */
    .common--smallDialog .smallDialog--body .body--header {
        width: 100%;
        margin-bottom: var(--padding--insideInterfaces);
        position: relative;
    }

    /* Contenido
    -------------------------------------------------- */
    .common--smallDialog .smallDialog--body .body--content { }

        .common--smallDialog .smallDialog--body .body--content .common--text:nth-child(2) {
            margin: 0 0 var(--padding--insideElements);
        }

        .common--smallDialog .smallDialog--body .body--content .content--rows {
            border: solid 2px var(--colorInterface--gray); border-radius: var(--borderRadius--interface);
            margin-top: 40px;
            display: flex; flex: 1 1 auto; flex-flow: column;
        }

             /* Cabecera
            -------------------------------------------------- */
            .common--smallDialog .smallDialog--body .body--content .content--rows .rows--header {
                width: 93%; height: 50px;
                padding: 0 var(--padding--insideElements);
                border-radius: var(--borderRadius--elements);
                margin: -30px auto 0;
                display: flex;
                z-index: 2;
                background-color: var(--colorInterface--contrast);
                box-shadow: -5px 5px 0px 0px var(--colorShadow--color);
            }

                /* Búsqueda
                -------------------------------------------------- */
                .common--smallDialog .smallDialog--body .body--content .content--rows .rows--header .header--search {
                    width: 100%; height: var(--height--tinyButtons);
                    margin: auto;
                    display: flex;
                }
                .common--smallDialog .smallDialog--body .body--content .content--rows .rows--header .header--search:hover {
                    border-radius: var(--borderRadius--elements);
                    box-shadow: 0 0 10px 0 var(--colorElements--actionStrong);
                }

                    .common--smallDialog .smallDialog--body .body--content .content--rows .rows--header .header--search > select {
                        width: 120px; height: var(--height--tinyButtons);
                        border-right: none; border-radius: var(--borderRadius--elements) 0 0 var(--borderRadius--elements);
                        margin: 0;

                        text-align: right;
                    }
                    .common--smallDialog .smallDialog--body .body--content .content--rows .rows--header .header--search > input {
                        height: var(--height--tinyButtons);
                        border-left: none; border-radius: 0;
                        margin: 0;
                    }
                    .common--smallDialog .smallDialog--body .body--content .content--rows .rows--header .header--search > button {
                        width: 60px; height: var(--height--tinyButtons);
                        border-radius: 0px var(--borderRadius--elements) var(--borderRadius--elements) 0px;
                        margin: 0;
                        box-shadow: none;
                    }
                    .common--smallDialog .smallDialog--body .body--content .content--rows .rows--header .header--search > button i {
                        color: #fff;
                    }

                    .common--smallDialog .smallDialog--body .body--content .content--rows .rows--header .header--search > select:hover,
                    .common--smallDialog .smallDialog--body .body--content .content--rows .rows--header .header--search  > select:focus {
                        border-bottom-width: 1px;
                        box-shadow: none;
                    }
                    .common--smallDialog .smallDialog--body .body--content .content--rows .rows--header .header--search > input:hover,
                    .common--smallDialog .smallDialog--body .body--content .content--rows .rows--header .header--search > input:focus {
                        border-bottom-width: 1px;
                        box-shadow: none;
                    }

             /* Registros
            -------------------------------------------------- */
            .common--smallDialog .smallDialog--body .body--content .content--rows .rows--content {
                height: 250px;
                padding: 0 var(--padding--insideElements) var(--padding--insideElements);
                overflow-y: auto; overflow-x: hidden;
            }

                .common--smallDialog .smallDialog--body .body--content .content--rows .rows--content table thead {
                    height: 50px;
                }

                .common--smallDialog .smallDialog--body .body--content .content--rows .rows--content table tbody tr {
                    height: 40px;
                }

                .common--smallDialog .smallDialog--body .body--content .content--rows .rows--content table tbody tr > td:nth-child(1) > label {
                    margin: 12px 0 0 15px;
                }

    /* Pie de página
    -------------------------------------------------- */
    .common--smallDialog .body--footer {
        width: 100%;
        padding: var(--padding--insideElements);
        border-radius: var(--borderRadius--interface);
        margin: var(--padding--insideElements) 0 0;
        display: flex; flex-direction: row;
        background-color: var(--colorInterface--neutral);
    }

        .common--smallDialog .body--footer button { 
            margin-right: var(--padding--insideElements);
        }
        .common--smallDialog .body--footer button:last-child {
            margin-right: 0;
        }


/* Notificación: Notificación general
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.common--generalNotification {
    width: var(--width--mainPage); min-height: 100vh;
    margin: 0 auto 0 0;
    display: flex; flex-wrap: wrap; flex-direction: column;
    background-color: var(--colorInterface--background);
}
.common--generalNotification[nodisplayed] {
    display: none
}
.common--generalNotification .generalNotification--body {
    width: 600px; min-height: 280px;
    padding: var(--padding--insideElements);
    border-radius: var(--borderRadius--interface);
    margin: auto;
    display: flex; flex-direction: column;
    background-color: #fff;
}

    /* Cabecera
    -------------------------------------------------- */
    .common--generalNotification .generalNotification--body .body--header {
        margin-bottom: var(--padding--insideInterfaces);
    }

    /* Contenido
    -------------------------------------------------- */
    .common--generalNotification .generalNotification--body .body--content {
        height: 150px;
    }
    
    /* Pie de página
    -------------------------------------------------- */
    .common--generalNotification .generalNotification--body .body--footer {
        margin: var(--padding--insideElements) 0 0;
    }

        .common--generalNotification .generalNotification--body .body--footer button {
            margin-top: var(--padding--insideElements);
        }
        .common--generalNotification .generalNotification--body .body--footer button:first-child {
            margin-top: 0;
        }














/* Animaciones
-------------------------------------------------- */

    /* Común - Animación de carga de botones y div
    -------------------------------------------------- */
    .common--elementLoading {
        animation: elementLoading 3s ease infinite;
    }
    @keyframes elementLoading {
        0%{box-shadow: 0px 0px 5px 0 #1044b2;}
        20%{box-shadow: 0px 0px 5px 0 #2c69ed; background-color: #b9cdf9;}
        40%{box-shadow: 0px 0px 5px 0 #729bf3;}
        60%{box-shadow: 0px 0px 5px 0 #d0defb;}
        100%{box-shadow: 0px 0px 5px 0 #0a2e75;}
    }



    /* Animación de carga de botones: Muestra el proceso en curso */
    @keyframes buttonLoading {
        0%{background-position: 0% 49%}
        50%{background-position: 100% 52%; color: #000;}
        100%{background-position: 0% 49%;}
    }
    @keyframes buttonAffirmativeLoading {
        0%{background-position: 0% 49%}
        50%{background-position: 100% 52%; color: #000;}
        100%{background-position: 0% 49%;}
    }
    @keyframes buttonNegativeLoading {
        0%{background-position: 0% 49%}
        50%{background-position: 100% 52%; color: #000;}
        100%{background-position: 0% 49%;}
    }
    @keyframes buttonTenderLoading {
        0%{background-position: 0% 49%}
        50%{background-position: 100% 52%; color: #000;}
        100%{background-position: 0% 49%;}
    }

    /* Animación de sacudida de botón: Llama la atención */
    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); box-shadow: 0px 0px 25px 0 var(--colorElements--action);}
        10% { transform: translate(-1px, -2px) rotate(-1deg);}
        20% { transform: translate(-3px, 0px) rotate(1deg); box-shadow: 0px 0px 25px 0 var(--colorElements--action);}
        30% { transform: translate(3px, 2px) rotate(0deg);}
        40% { transform: translate(1px, -1px) rotate(1deg); box-shadow: 0px 0px 25px 0 var(--colorElements--action);}
        50% { transform: translate(-1px, 2px) rotate(-1deg);}
        60% { transform: translate(-3px, 1px) rotate(0deg); box-shadow: 0px 0px 25px 0 var(--colorElements--action);}
        70% { transform: translate(3px, 1px) rotate(-1deg);}
        80% { transform: translate(-1px, -1px) rotate(1deg); box-shadow: 0px 0px 25px 0 var(--colorElements--action);}
        90% { transform: translate(1px, 2px) rotate(0deg);}
        100% { transform: translate(1px, -2px) rotate(-1deg); box-shadow: 0px 0px 25px 0 var(--colorElements--action);}
    }

    /* Animación de presión: Presión de confirmación */
    @keyframes pressAffirmativeAnimation {
        0% {background: linear-gradient(to right, var(--color_affirmativeStrong) 5%, #fff 5%); color: var(--color_blackLight); box-shadow: none;}
        2% {background: linear-gradient(to right, var(--color_affirmativeStrong) 7%, #fff 7%); color: var(--color_blackLight); box-shadow: none;}
        5% {background: linear-gradient(to right, var(--color_affirmativeStrong) 10%, #fff 10%); color: var(--color_blackLight); box-shadow: none;}
        7% {background: linear-gradient(to right, var(--color_affirmativeStrong) 12%, #fff 12%); color: var(--color_blackLight); box-shadow: none;}
        10% {background: linear-gradient(to right, var(--color_affirmativeStrong) 15%, #fff 15%); color: var(--color_blackLight); box-shadow: none;}
        12% {background: linear-gradient(to right, var(--color_affirmativeStrong) 17%, #fff 17%); color: var(--color_blackLight); box-shadow: none;}
        15% {background: linear-gradient(to right, var(--color_affirmativeStrong) 20%, #fff 20%); color: var(--color_blackLight); box-shadow: none;}
        17% {background: linear-gradient(to right, var(--color_affirmativeStrong) 22%, #fff 22%);box-shadow: none;}
        20% {background: linear-gradient(to right, var(--color_affirmativeStrong) 25%, #fff 25%);box-shadow: none;}
        22% {background: linear-gradient(to right, var(--color_affirmativeStrong) 27%, #fff 27%);box-shadow: none;}
        25% {background: linear-gradient(to right, var(--color_affirmativeStrong) 30%, #fff 30%);box-shadow: none;}
        27% {background: linear-gradient(to right, var(--color_affirmativeStrong) 32%, #fff 32%);box-shadow: none;}
        30% {background: linear-gradient(to right, var(--color_affirmativeStrong) 35%, #fff 35%);box-shadow: none;}
        32% {background: linear-gradient(to right, var(--color_affirmativeStrong) 37%, #fff 37%);box-shadow: none;}
        35% {background: linear-gradient(to right, var(--color_affirmativeStrong) 40%, #fff 40%);box-shadow: none;}
        37% {background: linear-gradient(to right, var(--color_affirmativeStrong) 42%, #fff 42%);box-shadow: none;}
        40% {background: linear-gradient(to right, var(--color_affirmativeStrong) 45%, #fff 45%);box-shadow: none;}
        42% {background: linear-gradient(to right, var(--color_affirmativeStrong) 47%, #fff 47%);box-shadow: none;}
        45% {background: linear-gradient(to right, var(--color_affirmativeStrong) 50%, #fff 50%);box-shadow: none;}
        47% {background: linear-gradient(to right, var(--color_affirmativeStrong) 52%, #fff 52%);box-shadow: none;}
        50% {background: linear-gradient(to right, var(--color_affirmativeStrong) 55%, #fff 55%);box-shadow: none;}
        52% {background: linear-gradient(to right, var(--color_affirmativeStrong) 57%, #fff 57%);box-shadow: none;}
        55% {background: linear-gradient(to right, var(--color_affirmativeStrong) 60%, #fff 60%);box-shadow: none;}
        57% {background: linear-gradient(to right, var(--color_affirmativeStrong) 62%, #fff 62%);box-shadow: none;}
        60% {background: linear-gradient(to right, var(--color_affirmativeStrong) 65%, #fff 65%);box-shadow: none;}
        62% {background: linear-gradient(to right, var(--color_affirmativeStrong) 67%, #fff 67%);box-shadow: none;}
        65% {background: linear-gradient(to right, var(--color_affirmativeStrong) 70%, #fff 70%);box-shadow: none;}
        67% {background: linear-gradient(to right, var(--color_affirmativeStrong) 72%, #fff 72%);box-shadow: none;}
        70% {background: linear-gradient(to right, var(--color_affirmativeStrong) 75%, #fff 75%);box-shadow: none;}
        72% {background: linear-gradient(to right, var(--color_affirmativeStrong) 77%, #fff 77%);box-shadow: none;}
        75% {background: linear-gradient(to right, var(--color_affirmativeStrong) 80%, #fff 80%);box-shadow: none;}
        77% {background: linear-gradient(to right, var(--color_affirmativeStrong) 82%, #fff 82%);box-shadow: none;}
        80% {background: linear-gradient(to right, var(--color_affirmativeStrong) 85%, #fff 85%);box-shadow: none;}
        82% {background: linear-gradient(to right, var(--color_affirmativeStrong) 87%, #fff 87%);box-shadow: none;}
        85% {background: linear-gradient(to right, var(--color_affirmativeStrong) 90%, #fff 90%);box-shadow: none;}
        87% {background: linear-gradient(to right, var(--color_affirmativeStrong) 92%, #fff 92%);box-shadow: none;}
        92% {background: linear-gradient(to right, var(--color_affirmativeStrong) 94%, #fff 94%);box-shadow: none;}
        95% {background: linear-gradient(to right, var(--color_affirmativeStrong) 96%, #fff 96%);box-shadow: none;}
        97% {background: linear-gradient(to right, var(--color_affirmativeStrong) 98%, #fff 98%);box-shadow: none;}
        100% {background: linear-gradient(to right, var(--color_affirmativeStrong) 100%, #fff 100%); box-shadow: none;}
    }
    @keyframes pressNegativeAnimation {
        0% {background: linear-gradient(to right, var(--color_negativeStrong) 5%, #fff 5%); color: var(--color_blackLight); box-shadow: none;}
        2% {background: linear-gradient(to right, var(--color_negativeStrong) 7%, #fff 7%); color: var(--color_blackLight); box-shadow: none;}
        5% {background: linear-gradient(to right, var(--color_negativeStrong) 10%, #fff 10%); color: var(--color_blackLight); box-shadow: none;}
        7% {background: linear-gradient(to right, var(--color_negativeStrong) 12%, #fff 12%); color: var(--color_blackLight); box-shadow: none;}
        10% {background: linear-gradient(to right, var(--color_negativeStrong) 15%, #fff 15%); color: var(--color_blackLight); box-shadow: none;}
        12% {background: linear-gradient(to right, var(--color_negativeStrong) 17%, #fff 17%); color: var(--color_blackLight); box-shadow: none;}
        15% {background: linear-gradient(to right, var(--color_negativeStrong) 20%, #fff 20%); color: var(--color_blackLight); box-shadow: none;}
        17% {background: linear-gradient(to right, var(--color_negativeStrong) 22%, #fff 22%);box-shadow: none;}
        20% {background: linear-gradient(to right, var(--color_negativeStrong) 25%, #fff 25%);box-shadow: none;}
        22% {background: linear-gradient(to right, var(--color_negativeStrong) 27%, #fff 27%);box-shadow: none;}
        25% {background: linear-gradient(to right, var(--color_negativeStrong) 30%, #fff 30%);box-shadow: none;}
        27% {background: linear-gradient(to right, var(--color_negativeStrong) 32%, #fff 32%);box-shadow: none;}
        30% {background: linear-gradient(to right, var(--color_negativeStrong) 35%, #fff 35%);box-shadow: none;}
        32% {background: linear-gradient(to right, var(--color_negativeStrong) 37%, #fff 37%);box-shadow: none;}
        35% {background: linear-gradient(to right, var(--color_negativeStrong) 40%, #fff 40%);box-shadow: none;}
        37% {background: linear-gradient(to right, var(--color_negativeStrong) 42%, #fff 42%);box-shadow: none;}
        40% {background: linear-gradient(to right, var(--color_negativeStrong) 45%, #fff 45%);box-shadow: none;}
        42% {background: linear-gradient(to right, var(--color_negativeStrong) 47%, #fff 47%);box-shadow: none;}
        45% {background: linear-gradient(to right, var(--color_negativeStrong) 50%, #fff 50%);box-shadow: none;}
        47% {background: linear-gradient(to right, var(--color_negativeStrong) 52%, #fff 52%);box-shadow: none;}
        50% {background: linear-gradient(to right, var(--color_negativeStrong) 55%, #fff 55%);box-shadow: none;}
        52% {background: linear-gradient(to right, var(--color_negativeStrong) 57%, #fff 57%);box-shadow: none;}
        55% {background: linear-gradient(to right, var(--color_negativeStrong) 60%, #fff 60%);box-shadow: none;}
        57% {background: linear-gradient(to right, var(--color_negativeStrong) 62%, #fff 62%);box-shadow: none;}
        60% {background: linear-gradient(to right, var(--color_negativeStrong) 65%, #fff 65%);box-shadow: none;}
        62% {background: linear-gradient(to right, var(--color_negativeStrong) 67%, #fff 67%);box-shadow: none;}
        65% {background: linear-gradient(to right, var(--color_negativeStrong) 70%, #fff 70%);box-shadow: none;}
        67% {background: linear-gradient(to right, var(--color_negativeStrong) 72%, #fff 72%);box-shadow: none;}
        70% {background: linear-gradient(to right, var(--color_negativeStrong) 75%, #fff 75%);box-shadow: none;}
        72% {background: linear-gradient(to right, var(--color_negativeStrong) 77%, #fff 77%);box-shadow: none;}
        75% {background: linear-gradient(to right, var(--color_negativeStrong) 80%, #fff 80%);box-shadow: none;}
        77% {background: linear-gradient(to right, var(--color_negativeStrong) 82%, #fff 82%);box-shadow: none;}
        80% {background: linear-gradient(to right, var(--color_negativeStrong) 85%, #fff 85%);box-shadow: none;}
        82% {background: linear-gradient(to right, var(--color_negativeStrong) 87%, #fff 87%);box-shadow: none;}
        85% {background: linear-gradient(to right, var(--color_negativeStrong) 90%, #fff 90%);box-shadow: none;}
        87% {background: linear-gradient(to right, var(--color_negativeStrong) 92%, #fff 92%);box-shadow: none;}
        92% {background: linear-gradient(to right, var(--color_negativeStrong) 94%, #fff 94%);box-shadow: none;}
        95% {background: linear-gradient(to right, var(--color_negativeStrong) 96%, #fff 96%);box-shadow: none;}
        97% {background: linear-gradient(to right, var(--color_negativeStrong) 98%, #fff 98%);box-shadow: none;}
        100% {background: linear-gradient(to right, var(--color_negativeStrong) 100%, #fff 100%); box-shadow: none;}
    }



/* Dialogo: Selección de sucursal
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.page--selectBranch {
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    background-color: var(--colorInterface--background);
}

    .page--selectBranch[nodisplayed] {
        display: none;
    }
    .page--selectBranch .selectBranch--body {
        width: 400px;
        min-height: 200px;
        padding: var(--padding--insideElements);
        border-radius: var(--borderRadius--interface);
        margin: auto;
        background-color: #fff;
        box-shadow: -1px 1px 4px 1px var(--colorShadow--color);
    }

        /* Cabecera
        -------------------------------------------------- */
        .page--selectBranch .selectBranch--body .body--header {
            margin-bottom: var(--padding--insideInterfaces);
            position: relative;
        }

            .page--selectBranch .selectionDialog--body .body--header .header--newElement {
                position: absolute; top: 0; right: 0;
                display: none !important;
            }

    /* Contenido
    -------------------------------------------------- */
    .page--selectBranch .body--content {
    }

        .page--selectBranch .body--content .common--text:nth-child(2) {
            margin: 0 0 var(--padding--insideElements);
        }

        .page--selectBranch .body--content .content--form {
            padding: 0 var(--padding--insideElements);
        }

    /* Pie de página
    -------------------------------------------------- */
    .page--selectBranch .body--footer {
        margin: var(--padding--insideElements) 0 0;
    }



    /* Común - Título //Borrar
    -------------------------------------------------- */
    .page--selectBranch .common--title {
        margin: 0;
        font-size: var(--textSize--title);
        text-align: center;
        font-weight: bold;
    }

    /* Común - Parráfos //Borrar
    -------------------------------------------------- */
    .page--selectBranch .common--text {
        margin: 0;
        font-size: var(--textSize--details);
    }

    /* Común - Etiquetas //Borrar
    -------------------------------------------------- */
    .page--selectBranch .common--label {
        margin: 0 0 var(--padding--insideSubtitle) 2px;
        font-weight: bold;
    }

    /* Común - Selector //Borrar
    -------------------------------------------------- */
    .page--selectBranch .common--select {
        width: 100%;
        height: var(--height--elements);
        padding: var(--padding--insideElements);
        border: solid 1px var(--colorElements--action);
        border-radius: var(--borderRadius--elements);
        background-color: white;
    }

        .page--selectBranch .common--select:hover, .common--select:hover {
            border-bottom: solid 3px var(--colorElements--action);
            border-color: var(--colorElements--actionStrong);
            box-shadow: 0 0 10px 0 var(--colorElements--actionStrong);
            cursor: pointer;
        }

        .page--selectBranch .common--select[nodisplayed] {
            display: none;
        }

        .page--selectBranch .common--select[novisibility] {
            visibility: hidden;
        }

        .page--selectBranch .common--select[disabled] {
            border-bottom: solid 3px var(--colorElements--tenderStrong);
            border-color: var(--colorElements--tenderStrong);
            background-color: var(--colorElements--tenderLight);
            cursor: not-allowed
        }

            .page--selectBranch .common--select[disabled]:hover, .common--select[disabled]:focus {
                box-shadow: 0 0 10px 0 var(--colorShadow--color);
            }

    /* Común - Butón //Borrar
    -------------------------------------------------- */
    .page--selectBranch .common--button {
        width: 100%;
        height: var(--height--elements);
        border: none;
        border-radius: var(--borderRadius--elements);
        background-color: var(--colorElements--action);
        box-shadow: -2px 2px 0px 0px var(--colorShadow--color);
        color: white;
        text-align: center;
        font-weight: bold;
    }

        .page--selectBranch .common--button:hover {
            box-shadow: none;
            background-color: var(--colorElements--actionStrong);
        }

        .page--selectBranch .common--button[nodisplayed] {
            display: none;
        }

        .page--selectBranch .common--button[novisibility] {
            visibility: hidden;
        }

        .page--selectBranch .common--button[disabled] {
            background-color: var(--colorElements--actionLight);
            color: var(--colorText--gray);
            cursor: not-allowed;
        }

        .page--selectBranch .common--button[loading][disabled], .common--button[loading] {
            background: linear-gradient(86deg, var(--colorElements--action), #ffffff);
            background-size: 400% 400%;
            box-shadow: none;
            color: white;
            animation: buttonLoading 3s ease infinite;
            cursor: not-allowed;
        }

        .page--selectBranch .common--button[shake] {
            animation: shake 0.5s;
        }














    .page--selection {
        min-height: 100vh;
        display: flex;
        flex-wrap: wrap;
        background-color: var(--colorInterface--background);
    }
        .page--selection[nodisplayed] {
            display: none;
        }
        .page--selection .selection--body {
            height: 280px; width: 100%;
            margin: auto var(--padding--insideInterfaces);
            display: flex; flex-direction: column;
            flex-wrap: wrap;
            background-color: var(--colorInterface--background);
        }
        .page--selection .selection--body h2, .page--selection .selection--body p {
            color: #ffff;
        }
        .page--selection .selection--body button {
            margin-top: var(--padding--insideElements);
        }

    .page--inventariado {
        min-height: 100vh;
        display: flex; flex-direction: row; flex-wrap: wrap;
        background-color: var(--colorInterface--background);
        position: relative;
    }
        .page--inventariado[nodisplayed] {
            display: none;
        }

        .page--inventariado .common--header {
            width: 100%;
            border-radius: var(--borderRadius--interface) 0 0;
            margin: auto var(--padding--insideInterfaces) 0;
        }
            .page--inventariado .common--header .header--action {
                visibility: hidden;
            }
        .page--inventariado .inventariado--body {
            width: 100%;
            padding: var(--padding--insideElements);
            border-radius: 0;
            margin: 0 var(--padding--insideInterfaces) 0;
            display: flex; flex-direction: column;
            background-color: #fff;
            box-shadow: -1px 1px 4px 1px var(--colorShadow--color);
            position: relative;
        }
            .page--inventariado .inventariado--body .body--header {
                height: 50px;
                margin-bottom: var(--padding--insideElements);
                display: flex; flex-direction: row;
                position: relative;
            }
                .page--inventariado .inventariado--body .body--header h2:first-child{
                    margin: auto auto auto 0;
                }
                .page--inventariado .inventariado--body .body--header h2:last-child {
                    margin: auto 0 auto auto;
                }
                .page--inventariado .inventariado--body .body--header h1 {
                    width: 100%;
                    margin: auto;
                    position: absolute;
                    color: var(--colorElements--action);
                    cursor: pointer;
                }
                .page--inventariado .inventariado--body .body--header h2 {
                    color: var(--colorElements--tenderStrong);
                    text-decoration: underline;
                    cursor: pointer;
                }
            .page--inventariado .inventariado--body .body--searcher {
                display: flex;
                flex-direction: row;
            }
                .page--inventariado .inventariado--body .body--searcher input {
                    width: 100%;
                    margin-right: var(--padding--insideElements);
                }
                .page--inventariado .inventariado--body .body--searcher button {
                    width: auto;
                }

            .page--inventariado .inventariado--body .body--result {
                margin-top: var(--padding--insideElements);
                display: flex;
                flex-direction: column;
            }
                .page--inventariado .inventariado--body .body--result input {
                    width: 100%;
                    margin-bottom: var(--padding--insideElements);
                }
                .page--inventariado .inventariado--body .body--result input, .body--result select {
                    text-align: center;
                }
                .page--inventariado .inventariado--body .body--result input:last-child {
                    margin-bottom: 0;
                }

        .page--inventariado .inventariado--footer {
            width: 100%;
            border-radius: 0 0 var(--borderRadius--interface);
            margin: 0 var(--padding--insideInterfaces) auto;
        }