/**
 * Created By: Salvador G. Jasso
 * Creation Date: 19/11/2025
 * Last Modifier: Salvador G. Jasso
 * Last Modification: 19/11/2025
 * 
 * feat: production/DevicesTester.Updates4_CancelFunctions PBI #159820
 */

#devices_tabpanel .x-panel-body-default {
    border: none;
}
#DevicesTesterView .x-toolbar-default {
    border-color: white;
}
:is(#devicesModule) .x-tab-bar-strip {
    border-width: 0;
    height: 0;
    border-style: none;
}
/* Parche de modo ReadOnly */
:is(#devicesModule) .x-item-disabled .x-form-item-label,
:is(#devicesModule) .x-item-disabled .x-form-field,
:is(#devicesModule) .x-item-disabled .x-form-display-field,
:is(#devicesModule) .x-item-disabled .x-form-cb-label,
:is(#devicesModule) .x-item-disabled .x-form-trigger {
    opacity: 0.8;
    outline: 2px solid #d0d0d0;
    color: gray;
    border: none;
}
:is(#devicesModule) .x-mask {
    opacity: 0;
    border: none;
}
#devicesModule [readonly='readonly'],
#devicesModule [readonly=''],
#devicesModule .x-item-disabled .x-form-field {
    background-color: #fafafa;
    outline: 2px solid #d0d0d0;
    color: gray;
    border: none;
}

/* GRID SETTINGS - row expander */
.force-reflowexpander { display: block; }

.devicesTester-grid .rowexpander {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    width: 100%;
}
.devicesTester-grid .rowexpander .column {
    flex: 1;
    padding: 3px;
    box-sizing: border-box;
    max-width: 100%;
}
.devicesTester-grid .column {
    flex: 1;
    padding: 3px;
}
.devicesTester-grid .column h3 { 
    text-align: center;
}
.devicesTester-grid .column ul {
    list-style-type: none;
    padding: 0;
}
.devicesTester-grid .column li {
    padding: 3px 0;
}
.devicesTester-grid-pos-order { 
    display: inline-block; 
    width: 20px; 
    height: 20px; 
    line-height: 20px; 
    border-radius: 50%; 
    background-color: gray; 
    color: white; 
    text-align: center; 
    margin-right: 10px; 
}
.devicesTester-grid-pos-duplicated {
    background-color: lightgray;
    padding: 0 5px;
}
.devicesTester-grid-text_on {
    color: #518b51;
    font-weight: bold;
}
.devicesTester-grid-text_off {
    color: #b65858;
    font-weight: bold;
}
.devicesTester-grid-text_sys {
    color: #111111;
    font-weight: bold;
}
.devicesTester-grid-text_def {
    color: #444444;
}
/* GRID SETTINGS - mask loading & progress bar */
.devicesTester-grid-loading-mask .x-progress-default .x-progress-bar-default {
    background-image: none;
    /* background: transparent !important; 
    background-color: #2890b17a; */
}
.devicesTester-grid-loading-mask .x-mask-msg { 
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
} 
.devicesTester-grid-loading-mask .x-mask-msg .x-mask-msg-inner { 
    display: none !important;
} 
.devicesTester-grid-loading-mask .x-mask-msg-text { 
    background-color: rgba(255, 255, 255, 0.8); 
    border-radius: 4px; 
    padding: 5px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
.devicesTester-grid-loading-mask .loading-bar { 
    border: 2px solid #ddd; 
    border-radius: 4px;
    width: 100%;
    height: 8px; 
    position: relative; 
    overflow: hidden; 
    background-color: #f3f3f3; 
} 
.devicesTester-grid-loading-mask .loading-bar:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    left: -40%; 
    width: 40%; 
    height: 100%; 
    background-color: #2196F3; 
    animation: loading 1s infinite linear; 
} 
@keyframes loading { 
    0% { left: -40%; } 
    100% { left: 100%; } 
}
@keyframes progress { 
    0% { 
        background-position: 0% 50%; 
    } 
    100% { 
        background-position: 100% 50%; 
    } 
} 
.devicesTester-grid-update-label { 
    display: inline-block; 
    background: linear-gradient(to right, #3b82f6 0%, #9333ea 50%, #3b82f6 100%); 
    background-size: 200% 100%; 
    animation: progress 2s linear infinite; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    font-weight: bold; 
    color: blue; 
    /* Color de reserva en caso de que el clip de fondo no funcione */ 
}