.view-color-green {
    background-color: rgba(77, 250, 144, 0.3);
}

.view-color-yellow {
    background-color: rgba(250, 190, 77, 0.3);
}

.view-color-red {
    background-color: rgba(255, 84, 104, 0.3);
}

.view-item-disabled {
    opacity: 0.5;


}




//inicio header
.toolbar-header-style {
    background-color: #808080 !important; /* Gris sólido sin transparencia */
    padding: 12px 24px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    gap: 20px;
    transition: all 0.3s ease;
}

/* Línea dinámica inferior con efecto "hover" */
.toolbar-header-style::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 85%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #3498db 50%, transparent 100%);
    transform: translateX(-50%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.7;
}

/* Efecto hover en toda la barra */
.toolbar-header-style:hover::after {
    width: 100%;
    height: 3px;
    opacity: 1;
    background: linear-gradient(90deg, #3498db 0%, #8e44ad 100%);
}

/* Elementos hijos (botones/iconos) */
.toolbar-header-style > * {
    position: relative;
    padding: 8px 16px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

/* Efecto "levitación" en elementos hijos */
.toolbar-header-style > *:hover {
    transform: translateY(-2px);
}

/* Línea sutil bajo elementos hijos */
.toolbar-header-style > *::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #e74c3c;
    transition: width 0.3s ease;
}

.toolbar-header-style > *:hover::after {
    width: 100%;
}
//fin header








.x-fieldset {
    overflow: visible !important; /* workaround for Safari issue */
}

#update {
    position: absolute;
    width: 100%;
    top: 20px;
    font-weight: bold;
    text-align: center;
}

#attribution {
    position: absolute;
    bottom: 10px;
    right: 15px;
    font-size: x-small;
}

#spinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px;
    border-radius: 50%;
    border-top: 6px solid #5fa2dd;
    border-right: 6px solid transparent;
    animation: spinner .6s linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}